Doc: Minor doc fixes related to new UI

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

11 files changed, 54 insertions, 145 deletions

diff --git a/doc/qtdesignstudio/images/icons/create_component.png b/doc/qtdesignstudio/images/icons/create_component.png
new file mode 100644
index 0000000000..75438ce56f
--- /dev/null
+++ b/doc/qtdesignstudio/images/icons/create_component.png
diff --git a/doc/qtdesignstudio/images/icons/edit_component.png b/doc/qtdesignstudio/images/icons/edit_component.png
new file mode 100644
index 0000000000..071971b6bc
--- /dev/null
+++ b/doc/qtdesignstudio/images/icons/edit_component.png
diff --git a/doc/qtdesignstudio/images/icons/home.png b/doc/qtdesignstudio/images/icons/home.png
new file mode 100644
index 0000000000..8af251cf2c
--- /dev/null
+++ b/doc/qtdesignstudio/images/icons/home.png
diff --git a/doc/qtdesignstudio/src/components/qtquick-positioning.qdoc b/doc/qtdesignstudio/src/components/qtquick-positioning.qdoc
index 5ea37b040c..a71831fdd1 100644
--- a/doc/qtdesignstudio/src/components/qtquick-positioning.qdoc
+++ b/doc/qtdesignstudio/src/components/qtquick-positioning.qdoc
@@ -407,12 +407,6 @@
     \uicontrol {Stack Layout}, select the components in the \l {2D} view,
     and then select \uicontrol Layout in the context menu.
 
-    You can also click the \inlineimage column.png
-    (\uicontrol {Column Layout}), \inlineimage row.png
-    (\uicontrol {Row Layout}), and \inlineimage grid.png
-    (\uicontrol {Grid Layout}) toolbar buttons to apply
-    layouts to the selected components.
-
     To make a component within a layout as wide as possible while respecting the
     given constraints, select the component in the \uicontrol {2D} view, and
     then select \uicontrol Layout > \uicontrol {Fill Width} in the context menu.
diff --git a/doc/qtdesignstudio/src/overviews/qt-design-viewer-navigation.qdoc b/doc/qtdesignstudio/src/overviews/qt-design-viewer-navigation.qdoc
index 395534caaf..567650a137 100644
--- a/doc/qtdesignstudio/src/overviews/qt-design-viewer-navigation.qdoc
+++ b/doc/qtdesignstudio/src/overviews/qt-design-viewer-navigation.qdoc
@@ -155,6 +155,7 @@ To organize the pages vertically:
       \li Set \uicontrol {Content size} > \uicontrol H to 3072.
       \li On the \uicontrol Layout tab, select
       \uicontrol {Fill parent component}.
+    \endlist
 \endlist
 
 You must also create a scrollbar to scroll the web application. You create
diff --git a/doc/qtdesignstudio/src/overviews/qtquick-annotations.qdoc b/doc/qtdesignstudio/src/overviews/qtquick-annotations.qdoc
index fa268b530d..d5f19de7a4 100644
--- a/doc/qtdesignstudio/src/overviews/qtquick-annotations.qdoc
+++ b/doc/qtdesignstudio/src/overviews/qtquick-annotations.qdoc
@@ -21,8 +21,8 @@
     An annotation consist of an annotation name and one or several comments.
     The comments have a title, author, and comment text.
 
-    To add or edit global annotations, select \inlineimage icons/annotation.png
-    on the top menu bar in the Design mode.
+    To add or edit global annotations, right-click in the \uicontrol 2D or
+    \uicontrol Navigator view and select \uicontrol {Edit Annotations}.
 
     Global annotations have an additional status property, which enables you
     to indicate whether you are still working on the design, you have submitted
diff --git a/doc/qtdesignstudio/src/qtdesignstudio-app-flows.qdoc b/doc/qtdesignstudio/src/qtdesignstudio-app-flows.qdoc
index 4a7020c9aa..05906cba86 100644
--- a/doc/qtdesignstudio/src/qtdesignstudio-app-flows.qdoc
+++ b/doc/qtdesignstudio/src/qtdesignstudio-app-flows.qdoc
@@ -485,9 +485,8 @@
     To create an event list:
 
     \list 1
-        \li Select the \inlineimage icons/edit.png
-            (\uicontrol {Show Event List}) button on the Design mode
-            \l{Summary of Main Toolbar Actions}{toolbar}, or press \key {Alt+E}.
+        \li Right-click in the \uicontrol 2D or \uicontrol Navigator view and select
+        \uicontrol {Event List} > \uicontrol {Show Event List}.
         \li In the \uicontrol {Event List} dialog, select \inlineimage icons/plus.png
             to add a keyboard shortcut for triggering an event to the list.
             \image studio-flow-event-list.png "Event List dialog"
diff --git a/doc/qtdesignstudio/src/views/qtquick-designer.qdoc b/doc/qtdesignstudio/src/views/qtquick-designer.qdoc
index e94496b98f..a324c6f562 100644
--- a/doc/qtdesignstudio/src/views/qtquick-designer.qdoc
+++ b/doc/qtdesignstudio/src/views/qtquick-designer.qdoc
@@ -150,6 +150,33 @@
         \li Action
         \li Keyboard Shortcut
         \li Read More
+
+    \if defined(qtdesignstudio)
+    \row
+        \li \inlineimage icons/home.png
+        \li \uicontrol {Home}: opens the welcome page.
+        \li
+        \li
+    \row
+      \li \inlineimage icons/start_playback.png
+      \li \uicontrol {Play}: runs the application.
+      \li
+      \li
+    \row
+      \li \uicontrol {Live Preview}
+      \li 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{Validating with Target Hardware}
+    \endif
+
+    \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
+            the \uicontrol {2D} and \uicontrol Navigator views.
+        \li
+        \li \l{Open Documents}
     \row
         \li \inlineimage icons/prev.png
         \li \uicontrol {Go Back}: moves a step backwards in your location history.
@@ -163,130 +190,20 @@
         \li \key Alt+> (\key Opt+Cmd+> on \macos)
         \li \l{Navigating Between Open Files and Symbols}
     \row
-        \li \inlineimage icons/unlocked.png
-        \li File is writable: the currently open file can be modified and saved.
-        \li
-        \li \l{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{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
-            the \uicontrol {2D} and \uicontrol Navigator views.
-        \li
-        \li \l{Open Documents}
-    \row
         \li \inlineimage icons/close.png
         \li \uicontrol {Close Document}: closes the current file.
         \li \key Ctrl+W (\key Cmd+W on \macos)
         \li
     \row
-        \li \inlineimage icons/live_preview.png
-        \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{Validating with Target Hardware}
-    \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
-        \li Displays the language used for a localized application during
-            preview. You can select another language in the list of languages
-            that the application has been localized to.
-        \li
-        \li
-    \row
-        \li \inlineimage icons/qtcreator-reset-position-icon.png
-        \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 icons/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 icons/qtcreator-anchors-reset-icon.png
-        \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 icons/copy-formatting.png
-        \li Copies property values from the selected component.
-        \li
-        \li \l{Copying and Pasting Formatting}
-    \row
-        \li \inlineimage icons/paste-formatting.png
-        \li Applies copied property values to one or several selected
-            components.
+        \li \inlineimage icons/create_component.png
+        \li Creates a custom component from the selected item.
         \li
-        \li \l{Copying and Pasting Formatting}
-    \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)
+        \li \l{Creating Custom Components}
     \row
-        \li \inlineimage icons/edit.png
-        \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}: 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 \inlineimage icons/edit_component.png
+        \li Edits the selected custom component.
         \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 the \uicontrol {2D} and
-            \uicontrol Navigator views.
-        \li
-        \li \l{Using Components}
+        \li \l{Creating Custom Components}
     \row
         \li Workspace
         \li Displays the currently selected workspace. To switch to another
@@ -294,9 +211,9 @@
         \li
         \li \l{Managing Workspaces}
     \row
-        \li \inlineimage icons/annotation.png
-        \li Enables you to add or edit global annotations.
+        \li \uicontrol Share
+        \li Shares the application online using Qt Design Viewer.
         \li
-        \li \l{Annotating Designs}
+        \li \l{Sharing Applications Online}
     \endtable
 */
diff --git a/doc/qtdesignstudio/src/views/qtquick-form-editor.qdoc b/doc/qtdesignstudio/src/views/qtquick-form-editor.qdoc
index f845215276..fc6d8c0223 100644
--- a/doc/qtdesignstudio/src/views/qtquick-form-editor.qdoc
+++ b/doc/qtdesignstudio/src/views/qtquick-form-editor.qdoc
@@ -162,8 +162,8 @@
     \section1 Hiding Component Boundaries
 
     The \uicontrol {2D} view displays the boundaries of component instances.
-    To hide them, select the \inlineimage icons/boundingrect.png
-    button.
+    To hide them, right-click in the \uicontrol 2D view and select
+    \uicontrol {Show Bounds} from the context menu.
 
     \section1 Previewing Component Size
 
diff --git a/doc/qtdesignstudio/src/views/qtquick-navigator.qdoc b/doc/qtdesignstudio/src/views/qtquick-navigator.qdoc
index b1f39f0d06..f0cd1fe235 100644
--- a/doc/qtdesignstudio/src/views/qtquick-navigator.qdoc
+++ b/doc/qtdesignstudio/src/views/qtquick-navigator.qdoc
@@ -90,7 +90,7 @@
 
     To change the visibility of a component in the application code, select the
     \uicontrol Visibility check box in the \uicontrol Properties view or select
-    \uicontrol Edit > \uicontrol Visibility in the context menu.
+    \uicontrol Visibility in the context menu.
 
     You can also set the \uicontrol Opacity field to 0 in \uicontrol Properties
     to hide components in the UI that you want to apply animation to.
diff --git a/doc/qtdesignstudio/src/views/qtquick-properties.qdoc b/doc/qtdesignstudio/src/views/qtquick-properties.qdoc
index 8f8a1da66b..8ce14eba6b 100644
--- a/doc/qtdesignstudio/src/views/qtquick-properties.qdoc
+++ b/doc/qtdesignstudio/src/views/qtquick-properties.qdoc
@@ -90,11 +90,11 @@
     \section2 Resetting Component Position and Size
 
     To return a component to its default position after moving it,
-    select the \inlineimage icons/qtcreator-reset-position-icon.png
-    (\uicontrol {Reset Position}) button on the \l{Design Views}
-    {Design mode toolbar}. To return it to its default size, select
-    \inlineimage icons/qtcreator-reset-size-icon.png
-    (\uicontrol {Reset Size}) button.
+    right-click in the \uicontrol 2D or \uicontrol Navigator view and select
+    \uicontrol Edit > \uicontrol {Reset Position}.
+    To return it to its default size, right-click in the \uicontrol 2D or
+    \uicontrol Navigator view and select \uicontrol Edit >
+    \uicontrol {Reset Size}.
 
     \section2 Managing 2D Transformations
 
@@ -448,15 +448,13 @@
     several other components. The values are applied if the target components
     have those particular properties.
 
-    To copy property values from the selected component, select
-    \inlineimage icons/copy-formatting.png
-    on the \uicontrol Design mode \l{Summary of Main Toolbar Actions}
-    {main toolbar}.
+    To copy property values from a component, right-click it in the
+    \uicontrol 2D or \uicontrol Navigator view and select \uicontrol Edit >
+    \uicontrol {Copy Formatting}.
 
     To apply the values to one or several other components, select
-    them in the \l Navigator or \l {2D} view, and then select
-    \inlineimage icons/paste-formatting.png
-    .
+    them in the \l Navigator or \l {2D} view, and then right-click and select
+    \uicontrol Edit > \uicontrol {Apply Formatting}.
 
     \section1 Editing Properties Inline