Doc: Rename and restructure Editing QML Files in Design Mode topic

Add a table that lists the views and links to their documentation
and to the documentation for the tasks that users can perform in
the views.

Change-Id: I96748b62163613aff1bb5f71782af007299b02ce
Reviewed-by: Thomas Hartmann <thomas.hartmann@qt.io>

doc/qtcreator/src/howto/creator-ui.qdoc

@@ -99,7 +99,7 @@
 
     \else
     You can use the \l{Selecting Modes}{mode selector} to switch to the
-    \l{Editing QML Files in Design Mode}{Design mode} (1), where you will do
+    \l{Design Views}{Design mode} (1), where you will do
     most of your work and the \l{Using the Help Mode}{Help} (2) mode, where
     you can read the product documentation. The other modes are for more
     advanced use, and you are likely to need them less often.
@@ -312,7 +312,7 @@
             mode for designing and developing application user interfaces.
             This mode is available for UI files.
         \else
-        \li \uicontrol{\l{Editing QML Files in Design Mode}{Design}}
+        \li \uicontrol{\l{Design Views}{Design}}
             mode for designing and developing application user interfaces.
             As a designer, you'll do most of your work in this mode.
         \endif

doc/qtcreator/src/howto/creator-views.qdoc

@@ -72,7 +72,7 @@
     \endif
 
     For more information about views that are only available when editing QML
-    files in the Design mode, see \l{Editing QML Files in Design Mode}.
+    files in the Design mode, see \l{Design Views}.
 
     The additional options in each view are described in the following
     sections.

doc/qtcreator/src/qtcreator-toc.qdoc

@@ -90,8 +90,7 @@
             \li \l{Developing Qt Quick Applications}
             \list
                 \li \l {Creating Qt Quick Projects}
-                \li \l {Editing QML Files in Design Mode}
+                \li \l {Design Views}
-
                     \list
                         \li \l{Form Editor}
                         \li \l{Library}

doc/qtcreator/src/qtquick/creator-only/qtquick-app-development.qdoc

@@ -42,7 +42,7 @@
 
             You can use wizards to create Qt Quick projects.
 
-        \li \l {Editing QML Files in Design Mode}
+        \li \l {Design Views}
 
             You can use several different editors and views in the
             Design mode to develop Qt Quick applications.

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

@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2020 The Qt Company Ltd.
+** Copyright (C) 2021 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
 ** This file is part of the Qt Creator documentation.
@@ -39,86 +39,103 @@
     \nextpage quick-uis.html
     \endif
 
-    \title Editing QML Files in Design Mode
+    \title Design Views
 
-    \QC opens \l{Qt Quick UI Forms}{UI forms} (ui.qml files) in the
+    \image studio-design-mode.png "Design views"
-    \uicontrol {Form Editor} view in the Design mode. It is
-    recommended that you use UI forms for components that you want to
-    edit in the Design mode.
 
-    \image studio-design-mode.png "Design mode"
+    \QDS contains views for designing UIs. To open them, select
-
+    \uicontrol View > \uicontrol Views.
-    The Design mode contains different views for designing UIs. To open the
-    following views, select \uicontrol View > \uicontrol Views:
-
-    \list
-        \li \uicontrol {Form Editor} (1) provides a canvas for designing
-            2D UIs. For more information, see \l {Editing 2D Content}.
-            When you are editing 3D scenes, the \uicontrol {Form Editor} is
-            used as a canvas for the 3D scene projected by the camera.
-
-        \li \uicontrol {3D Editor} provides an editor for files you created
-            using 3D graphics applications and stored in one of the supported
-            formats. For more information, see \l{Editing 3D Scenes}.
-
-        \li \uicontrol {Text Editor} provides a code editor for editing the QML
-            code generated by the visual editors. For more information, see
-            \l {Working in Edit Mode}.
-
-        \li \uicontrol {Library} (2) displays the building blocks that you
-            can use to design applications: predefined QML types, your own
-            QML components, or Qt Quick Controls that you import to the
-            project, and other resources. For more information, see
-            \l {Creating Components}.
-
-        \li \uicontrol {Navigator} (3) displays the items in the current QML
-            file as a tree structure. For more information, see
-            \l {Managing Item Hierarchy}.
-
-        \li \uicontrol {Properties} (4) organizes the properties of the
-            selected component. You can change the properties also in the
-            \uicontrol {Text Editor}. For more information, see
-            \l {Specifying Item Properties}.
-
-        \li \uicontrol {Connection View} (5) enables you to create connections
-            between objects, signals, and object properties. For more
-            information, see \l{Adding Connections}.
-
-        \li \uicontrol {File System} shows all files in the currently
-            selected directory. For more information, see
-            \l{Viewing the File System}.
-
-        \li \uicontrol {Open Documents} shows currently open files.
-
-        \li \uicontrol {Projects} (6) shows a list of projects open in the
-            current session. For more information, see
-            \l{Viewing Project Files}.
-
-        \li \uicontrol {States} displays the different states of the item.
-            QML states typically describe user interface configurations, such as
-            the UI controls, their properties and behavior and the available
-            actions. For more information, see \l{Adding States}.
-
-        \li \uicontrol {Transition Editor} enables you to make movement between
-            states smooth by animating the changes between states. For more
-            information, see \l{Animating Transitions Between States}.
-
-        \li \uicontrol Timeline (7) provides a timeline and keyframe based
-            editor that enables you to animate the properties of UI components.
-            For more information, see \l{Creating Animations}.
-
-        \li \uicontrol {Curve Editor} enables you to view and modify the whole
-            animation curve by inserting keyframes to the curve and dragging
-            them and the point handlers to modify the curve. You can modify the
-            appearance of the curve in the style editor. For more information,
-            see \l {Editing Animation Curves}.
-
-    \endlist
 
     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 mode views:
+    Watch a video about using the design views:
 
     \youtube RfEYO-5Mw6s
+
+    \section1 Summary of Design Views
+
+    \table
+    \header
+        \li View
+        \li Purpose
+        \li Read More
+    \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
+            used as a canvas for the 3D scene projected by the camera.
+        \li \l{Form Editor}
+    \row
+        \li \l{Working in 3D Editor}{3D Editor}
+        \li Provides an editor for files you created using 3D graphics
+            applications and stored in one of the supported formats.
+        \li \l{Editing 3D Scenes}
+   \row
+        \li \l Library
+        \li Contains the building blocks that you can use to design
+            applications: preset components, your own components, and
+            assets.
+        \li \l {Creating Components}
+    \row
+        \li \l Navigator
+        \li Displays the composition of the current component file as
+            a tree structure. A component file can contain references
+            to other components and assets.
+        \li \l Navigator
+    \row
+        \li \l Properties
+        \li Enables you to modify the properties of the selected component.
+        \li \l {Specifying Component Properties}
+    \row
+        \li \l{Adding Connections}{Connection View}
+        \li Enables you to add functionality to the UI by creating
+            connections between objects, signals, and object properties.
+        \li \l{Adding Connections}
+    \row
+        \li \l{Adding States}{States}
+        \li Displays the different states that can be applied to a component.
+            Typically, states describe UI configurations, such as the
+            visibility and behavior of components and the available user
+            actions.
+        \li \l{Adding States}
+    \row
+        \li \l{Animating Transitions Between States}{Transition Editor}
+        \li Enables you to make movement between states smooth by animating
+            the changes between states.
+        \li \l{Animating Transitions Between States}
+    \row
+        \li \l{Creating Animations}{Timeline}
+        \li Provides a timeline and keyframe based editor for animating
+            the properties of components.
+        \li \l{Creating Animations}
+    \row
+        \li \l{Editing Animation Curves}{Curve Editor}
+        \li Enables you to view and modify the whole animation curve by
+            inserting keyframes to the curve and dragging them and the point
+            handlers to modify the curve. You can modify the appearance of
+            the curve in the style editor.
+        \li \l {Editing Animation Curves}
+    \row
+        \li \l{Working in Edit Mode}{Text Editor}
+        \li Provides a code editor for viewing and modifying the code
+            generatedby the visual editors.
+        \li \l {Working in Edit Mode}
+    \row
+        \li \l{Viewing Project Files}{Projects}
+        \li Shows a list of open projects and the files they contain.
+        \li \l{Viewing Project Files}
+     \row
+        \li \l{Viewing the File System}{File System}
+        \li Shows all files in the currently selected directory.
+        \li \l{Viewing the File System}
+    \row
+        \li \l{Viewing Open Documents}{Open Documents}
+        \li Shows currently open files.
+        \li \l{Viewing Open Documents}
+    \endtable
+
+
+
 */

doc/qtdesignstudio/src/qtdesignstudio-getting-started.qdoc

@@ -74,7 +74,7 @@
         \li \l {User Interface}
 
             Describes the parts and basic features of \QDS.
-        \li \l{Editing QML Files in Design Mode}
+        \li \l{Design Views}
 
             Describes the views and basic features of the Design mode.
             This is where you'll do most of your work.

doc/qtdesignstudio/src/qtdesignstudio-toc.qdoc

@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2020 The Qt Company Ltd.
+** Copyright (C) 2021 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
 ** This file is part of the Qt Design Studio documentation.
@@ -56,7 +56,7 @@
                 \li \l{User Interface}
                     \list
                         \li \l{Selecting Modes}
-                        \li \l{Editing QML Files in Design Mode}
+                        \li \l{Design Views}
                             \list
                                 \li \l{Form Editor}
                                 \li \l{Library}
@@ -145,7 +145,6 @@
             \endlist
         \li \l{Advanced Topics}
         \list
-
             \li \l{Supported Platforms}
             \li \l{Keyboard Shortcuts}
             \li \l{Coding}

doc/qtdesignstudio/src/qtdesignstudio-tutorials.qdoc

@@ -43,7 +43,7 @@
 
     Before you start, take a look at the following topics to familiarize
     yourself with the parts of \QDS in general, and the Design mode in
-    particular: \l{User Interface} and \l{Editing QML Files in Design Mode}.
+    particular: \l{User Interface} and \l{Design Views}.
 
     In addition to these entry-level tutorials, \QDS comes with examples
     and video tutorials that you can open from the \uicontrol Examples and

doc/qtdesignstudio/src/qtdesignstudio.qdoc

@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2019 The Qt Company Ltd.
+** Copyright (C) 2021 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
 ** This file is part of the Qt Design Studio documentation.
@@ -29,10 +29,12 @@
 
     \title Qt Design Studio Manual
 
-    \QDS is a UI design and development environment for creating animated UIs
+    Define the look and feel of the UI from wireframe to final implementation
-    and previewing them on the desktop or on Android and embedded Linux devices.
+    with preset UI components. Import UI design files from 2D and 3D tools to
-    It provides you with tools for accomplishing your tasks throughout the whole
+    \QDS, which can turn them into code for developers. \QDS prototyping
-    process, from design to production.
+    features bring your designs to life and simulate and validate interactions
+    and dynamic behavior. You can test, preview, and fine-tune your designs to
+    pixel-perfection live on the desktop or target device.
 
     \table
         \row
@@ -47,7 +49,7 @@
             \list
                 \li \l{Exporting from Design Tools}
                 \li \l{User Interface}
-                \li \l{Editing QML Files in Design Mode}
+                \li \l{Design Views}
                 \li \l{Tutorials}
                 \li \l{Qt Quick Best Practices}
             \endlist

doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-design-mode.qdoc

@@ -81,5 +81,5 @@
     \youtube w1yhDl93YI0
 
     For more information on other views, see
-    \l {Editing QML Files in Design Mode}.
+    \l {Design Views}.
 */