Doc: Update the Design Views topic

- Updated pictures
- Updated some info on the main toolbar actions based on the tooltips

Task-number: QDS-4007
Change-Id: I49ba9e281d1248dfca564698f8b0ca2bd381ffe1
Reviewed-by: Leena Miettinen <riitta-leena.miettinen@qt.io>

doc/qtcreator/src/qtquick/qtquick-designer.qdoc

@@ -41,15 +41,17 @@
 
     \title Design Views
 
-    \image studio-design-mode.png "Design views"
-
     \QDS contains views for designing UIs. To open them, select
-    \uicontrol View > \uicontrol Views.
+    \uicontrol View > \uicontrol Views. The following images present the
+    views that you are likely to use most often while designing UIs.
+
+    \image studio-design-mode.png "Design views"
+    \image studio-design-mode-states-timeline.png "The States and Timeline views"
 
     You can move the views anywhere on the screen and save them as
     \e workspaces, as instructed in \l {Managing Workspaces}.
 
-    Watch a video about using the design views:
+    To learn more about using the design views, see the following video:
 
     \youtube RfEYO-5Mw6s
 
@@ -63,8 +65,7 @@
     \row
         \li \l{Form Editor}
         \li Provides a working area for designing 2D UIs.
-
-            When you are editing 3D scenes, the \uicontrol {Form Editor} is
+            When you are editing 3D scenes, \uicontrol {Form Editor} is
             used as a canvas for the 3D scene projected by the camera.
         \li \l{Form Editor}
     \row
@@ -119,7 +120,7 @@
     \row
         \li \l{Working in Edit Mode}{Text Editor}
         \li Provides a code editor for viewing and modifying the code
-            generatedby the visual editors.
+            generated by the visual editors.
         \li \l {Working in Edit Mode}
     \row
         \li \l{Viewing Project Files}{Projects}
@@ -137,60 +138,69 @@
 
     \section1 Summary of Main Toolbar Actions
 
-    The top level toolbar in the Design mode contains shortcuts to widely used
-    actions.
+    The top level toolbar in the \uicontrol  Design mode contains shortcuts to
+    widely used actions.
 
     \table
     \header
         \li Button/Field
         \li Action
+        \li Keyboard Shortcut
         \li Read More
     \row
         \li \inlineimage prev.png
-        \li \uicontrol {Go Back} (\key Alt+<): moves a step backwards in your
-            location history. That is, returns focus to the last location in
-            the last file it was on.
+        \li \uicontrol {Go Back}: moves a step backwards in your location history.
+            That is, returns the focus to the last location in the last file it
+            was on.
+        \li \key Alt+< (\key Opt+Cmd+< on \macos)
         \li \l{Navigating Between Open Files and Symbols}
     \row
         \li \inlineimage next.png
-        \li \uicontrol {Go Forward} (\key Alt+>): moves a step forward in your
-            location history.
+        \li \uicontrol {Go Forward}: moves a step forward in your location history.
+        \li \key Alt+> (\key Opt+Cmd+> on \macos)
         \li \l{Navigating Between Open Files and Symbols}
     \row
         \li \inlineimage unlocked.png
-        \li Indicates that the currently open file can be modified and saved.
+        \li File is writable: the currently open file can be modified and saved.
+        \li
         \li \l{Viewing Open Documents}
     \row
         \li File type icon
         \li Indicates the type of the currently open file. Design views cannot
             be split, so the icon cannot be dragged, contrary to the tooltip.
+        \li
         \li \l{Viewing Open Documents}
     \row
         \li Currently open file
         \li Displays the location and filename of the currently open file. You
             can select another file in the list of open files to view it in
             \uicontrol {Form Editor} and \uicontrol Navigator.
+        \li
         \li \l{Viewing Open Documents}
     \row
         \li \inlineimage close.png
-        \li \uicontrol {Close Document} (\key Ctrl+W): closes the current file.
+        \li \uicontrol {Close Document}: closes the current file.
+        \li \key Ctrl+W (\key Cmd+W on \macos)
         \li
     \row
         \li \inlineimage live_preview.png
-        \li \uicontrol {Show Live Preview} (\key Alt+P) shows a preview of the
-            current file or the entire UI. The changes you make to the UI are
-            instantly visible to you in the preview.
+        \li \uicontrol {Show Live Preview} shows a preview of the current file
+            or the entire UI. The changes you make to the UI are instantly
+            visible to you in the preview.
+        \li \key Alt+P (\key Opt+P on \macos)
         \li \l{Previewing}
     \row
         \li Preview size
         \li Displays the size of the preview dialog as a percentage. You can
             select another percentage in the list to view the UI in different
             sizes.
+        \li
         \li \l{Previewing on Desktop}
     \row
         \li FPS
         \li Displays the frames-per-second (FPS) refresh rate of previewed
             animations.
+        \li
         \li \l{Previewing on Desktop}
     \row
         \li Preview language
@@ -198,67 +208,81 @@
             preview. You can select another language in the list of languages
             that the application has been localized to.
         \li
+        \li
     \row
         \li \inlineimage qtcreator-reset-position-icon.png
-        \li Returns a component to its \e {implicit position} after it was
-            moved.
+        \li Returns a component to its \e {implicit position} after
+            being moved.
+        \li \key Ctrl+D (\key Cmd+D on \macos)
         \li \l{Resetting Component Position and Size}
     \row
         \li \inlineimage qtcreator-reset-size-icon.png
         \li Returns a component to its implicit size after it was scaled.
+        \li \key Shift+S
         \li \l{Resetting Component Position and Size}
     \row
         \li \inlineimage icons/anchor-fill.png
         \li Fills the selected component to its parent component.
+        \li \key Shift+F
         \li \l{Setting Anchors and Margins}
     \row
         \li \inlineimage qtcreator-anchors-reset-icon.png
-        \li Resets anchors to their saved state.
+        \li Resets anchors to their saved state for the selected component.
+        \li \key Ctrl+Shift+R (\key Shift+Cmd+R on \macos)
         \li \l{Setting Anchors and Margins}
     \row
         \li \inlineimage row.png
         \li Uses a \uicontrol Row component to lay out the selected components.
+        \li \key Ctrl+U (\key Cmd+U on \macos)
         \li \l{Using Layouts}
     \row
         \li \inlineimage column.png
         \li Uses a \uicontrol Column component to lay out the selected
             components.
+        \li \key Ctrl+L (\key Cmd+L on \macos)
         \li \l{Using Layouts}
     \row
         \li \inlineimage grid.png
         \li Uses a \uicontrol Grid component to lay out the selected
             components.
+        \li \key Shift+G
         \li \l{Using Layouts}
     \if defined(qtdesignstudio)
     \row
         \li \inlineimage icons/edit.png
-        \li \uicontrol {Show Event List} (\key {Alt+E}): opens a dialog for
-            viewing and creating an event list for an application flow.
+        \li \uicontrol {Show Event List}: opens a dialog for viewing and
+            creating an event list for an application flow.
+        \li \key Alt+E (\key Opt+E on \macos)
         \li \l{Simulating Events}
     \row
         \li \inlineimage icons/assign.png
-        \li \uicontrol {Assign Events to Actions} (\key {Alt+A}): assigns
-            events to actions in an application flow.
+        \li \uicontrol {Assign Events to Actions}: assigns events to actions in
+            an application flow.
+        \li \key Alt+A  (\key Opt+A on \macos)
         \li \l{Simulating Events}
     \endif
     \row
         \li Styling
         \li Displays the UI style used for UI controls.
+        \li
         \li \l{Styling Controls}
     \row
         \li Subcomponents
         \li Displays the components referred to in the current file. Select a
             component in the list to open it in \uicontrol {Form Editor} and
             \uicontrol Navigator.
+        \li
         \li \l{Creating Components}
     \row
         \li Workspace
         \li Displays the currently selected workspace. To switch to another
             workspace, select it in the list.
+        \li
         \li \l{Managing Workspaces}
     \row
         \li \inlineimage icons/annotation.png
         \li Enables you to add or edit global annotations.
+        \li
         \li \l{Annotating Designs}
     \endtable
 */