Doc: Reorganize "User Interface" topic and move info to How-tos

Moved How-to topics into separate topics (HTML files) and
linked to them from UI Interface in QDS Manual and from How-to
in Qt Creator Manual.

Task-number: QTCREATORBUG-28996
Change-Id: I2b6defa936954c6a41085d0276f29942462ec12f
Signed-off-by: Leena Miettinen <riitta-leena.miettinen@qt.io>
Reviewed-by: Eike Ziller <eike.ziller@qt.io>

doc/qtcreator/src/howto/creator-how-to-macos.qdoc

@@ -0,0 +1,36 @@
+// Copyright (C) 2023 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+
+/*!
+    \page creator-how-to-macos.html
+    \if defined(qtcreator)
+    \previouspage creator-how-tos.html
+    \nextpage creator-known-issues.html
+    \endif
+    \ingroup creator-how-to-ui
+    \ingroup studio-how-to
+
+    \title Find menu items on \macos
+
+    \QC uses standard names and locations for standard features, such as
+    \e preferences. In this manual, the names and locations on
+    Windows and Linux are usually used to keep the instructions short. Here are
+    some places to check if you cannot find a function, dialog, or keyboard
+    shortcut on \macos when following the instructions:
+
+    \table
+        \header
+            \li For
+            \li Look In
+        \row
+            \li \uicontrol Edit > \uicontrol Preferences
+            \li \uicontrol {\QC} > \uicontrol Preferences
+        \row
+            \li \uicontrol Help > \uicontrol {About Plugins}
+            \li \uicontrol {\QC} > \uicontrol {About Plugins}
+        \row
+            \li Keyboard shortcuts
+            \li \uicontrol {\QC} > \uicontrol Preferences > \uicontrol Environment >
+                \uicontrol Keyboard
+    \endtable
+*/

doc/qtcreator/src/howto/creator-how-to-set-high-dpi-scaling.qdoc

@@ -0,0 +1,38 @@
+// Copyright (C) 2023 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+
+/*!
+    \page creator-how-to-set-high-dpi-scaling.html
+    \if defined(qtcreator)
+    \previouspage creator-how-tos.html
+    \nextpage creator-known-issues.html
+    \endif
+    \ingroup creator-how-to-ui
+    \ingroup studio-how-to
+
+    \title Set high DPI scaling
+
+    The operating systems that \QC supports implement high dots-per-inch (DPI)
+    scaling at varying levels. Therefore, \QC handles high DPI scaling
+    differently on different operating systems:
+
+    \list
+        \li On \macos, \QC forces high DPI scaling, which means that it allows
+            Qt to use the system scaling factor as the \QC scaling factor.
+        \li On Windows, if you do not set \l{High DPI}
+            {scaling environment variables}, \QC instructs Qt to detect the
+            scaling factor and use it as the \QC scaling factor.
+        \li On Linux, \QC leaves it to the user to enable high DPI scaling
+            because the process varies so much on different distributions
+            and windowing systems that it cannot be reliably done automatically.
+    \endlist
+
+    To override the default approach and always enable high DPI scaling:
+
+        \list 1
+            \li Select \uicontrol Edit > \uicontrol Preferences >
+                \uicontrol Environment > \uicontrol Interface.
+            \li Select \uicontrol {Enable high DPI scaling}.
+            \li Restart \QC to have the change take effect.
+    \endlist
+*/

doc/qtcreator/src/howto/creator-how-to-switch-ui-themes.qdoc

@@ -0,0 +1,26 @@
+// Copyright (C) 2023 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+
+/*!
+    \page creator-how-to-switch-ui-themes.html
+    \if defined(qtcreator)
+    \previouspage creator-how-tos.html
+    \nextpage creator-known-issues.html
+    \endif
+    \ingroup creator-how-to-ui
+    \ingroup studio-how-to
+
+    \title Switch UI themes
+
+    Themes enable you to change the appearance of the UI from dark to light,
+    for example.
+
+    To switch themes:
+
+    \list 1
+        \li Select \uicontrol Edit > \uicontrol Preferences >
+            \uicontrol Environment > \uicontrol Interface.
+            \image qtcreator-preferences-environment-interface.webp {Interface preferences}
+        \li In \uicontrol Theme, select a theme.
+    \endlist
+*/

doc/qtcreator/src/howto/creator-how-to-view-images.qdoc

@@ -0,0 +1,66 @@
+// Copyright (C) 2023 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+
+/*!
+    \page creator-how-to-view-images.html
+    \if defined(qtcreator)
+    \previouspage creator-how-tos.html
+    \nextpage creator-known-issues.html
+    \endif
+    \ingroup creator-how-to-design
+    \ingroup studio-how-to-image-viewer
+
+    \title View images
+
+    \QC opens image files in the image viewer.
+
+    \image qtcreator-image-viewer.png {Image viewer}
+
+    Use the toolbar buttons or \l{Keyboard Shortcuts}{keyboard shortcuts} to:
+
+    \list
+        \li \inlineimage icons/export.png
+            - Export SVG images to pixmaps or copy an image as a data URL, which
+            enables you to include it in web pages as if it were an external
+            resource
+        \li \inlineimage icons/original-size.png
+            - Return images to their original size
+        \li \inlineimage icons/zoom-in.png
+            - Zoom in and out (\inlineimage icons/zoom-out.png
+            )
+        \li \inlineimage icons/run_small.png
+            - Play and pause animated GIF and MNG images
+        \li \inlineimage icons/qtcreator-desktopdevice-button.png
+            - Show and hide the image background
+        \li \inlineimage icons/switch-outline.png
+            - Show and hide the image outline
+        \li \inlineimage icons/fittoview.png
+            - Fit images to screen
+    \endlist
+
+    Select \uicontrol {Set as Default} to use the current settings for the
+    background and outline modes and fitting images to screen as default
+    values for the image viewer.
+*/
+
+/*!
+    \page creator-how-to-export-svg-images.html
+    \if defined(qtcreator)
+    \previouspage creator-how-tos.html
+    \nextpage creator-known-issues.html
+    \endif
+    \ingroup creator-how-to-design
+    \ingroup studio-how-to-image-viewer
+
+    \title Export SVG images
+
+    If you have a freely scalable icon in the SVG format, you can open it in the
+    \l{View images}{image viewer} to export it to several images of different
+    sizes to create a set of pixmaps.
+
+    Select \inlineimage icons/export.png
+    on the toolbar.
+
+    You can then use QIcon::addPixmap() to add the pixmaps to icons in
+    different modes and states.
+*/

doc/qtcreator/src/howto/creator-only/creator-how-to-find-settings-files.qdoc

@@ -0,0 +1,32 @@
+// Copyright (C) 2023 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+
+/*!
+    \page creator-how-to-find-settings-files.html
+    \previouspage creator-how-tos.html
+    \nextpage creator-known-issues.html
+    \ingroup creator-how-to-use
+
+    \title Find settings files
+
+    \QC creates the following files and directories:
+
+    \list
+        \li QtCreator.db
+        \li QtCreator.ini
+        \li qtversion.xml
+        \li qtcreator
+    \endlist
+
+    The location of the above files and directories depends on the platform:
+
+    \list
+        \li On Linux and other Unix platforms, look in
+            \c {~/.config/QtProject} and
+            \c {~/.local/share/data/QtProject/qtcreator}.
+        \li On \macos, look in \c {~/.config/QtProject} and
+            \c {~/Library/Application Support/QtProject/Qt Creator}.
+        \li On Windows, look in
+            \c {%appdata%\QtProject} and \c {%localappdata%\QtProject}.
+    \endlist
+*/

doc/qtcreator/src/howto/creator-only/creator-how-tos.qdoc

@@ -12,35 +12,70 @@
     \page creator-how-tos.html
     \nextpage creator-known-issues.html
 
-    \title How-tos
+    \title How-to
 
-    How do I:
+    The following topics describe how to use \QC to perform a particular task.
+
+    \section1 Use the UI
 
     \list
-    \li \l {Switch between modes}
+        \li \l {Find a particular preference}
-    \li \l {Move between open files}
+        \li \l {Find keyboard shortcuts}
-    \li \l {Switch to Edit mode}
+        \li \l {Find menu items on \macos}
-    \li \l {Find a specific setting}
+        \li \l {Set high DPI scaling}
-    \li \l {View output}
+        \li \l {Set the number of recent files shown}
-    \li \l {Find keyboard shortcuts}
+        \li \l {Show and hide sidebars}
-    \li \l {Run \QC from the command line}
+        \li \l {Switch between modes}
-    \li \l {Show and hide sidebars}
+        \li \l {Switch UI themes}
-    \li \l {Move to symbols}
+        \li \l {View output}
-    \li \l {Quickly locate files using the keyboard}
-    \li \l {Perform calculations}
-    \li \l {Jump to a function in QML code}
-    \li \l {Add a license header template for C++ code}
-    \li \l {Paste text from my clipboard history}
-    \li \l {Sort lines alphabetically}
-    \li \l {Enclose selected code in curly braces, parentheses, or double quotes}
-    \li \l {Select the enclosing block in C++}
-    \li \l {Add my own code snippets to the auto-complete menu}
-    \li \l {Quickly write down notes somewhere}
-    \li \l {Configure the amount of recent files shown}
-    \li \l {Search and replace across files using a regular expression}
     \endlist
 
-    \section1 Switch between modes
+    \section1 Edit Code
+
+     \list
+        \li \l {Add code snippets to the auto-complete menu}
+        \li \l {Enclose selected code in curly braces, parentheses, or double quotes}
+        \li \l {Jump to a function in QML code}
+        \li \l {Locate files using the keyboard}
+        \li \l {Move between open files}
+        \li \l {Move to symbols}
+        \li \l {Paste text from clipboard history}
+        \li \l {Perform calculations}
+        \li \l {Search and replace across files using a regular expression}
+        \li \l {Select the enclosing block in C++}
+        \li \l {Sort lines alphabetically}
+        \li \l {Switch to Edit mode}
+        \li \l {Write down notes}
+    \endlist
+
+    \section1 Design UIs
+
+     \list
+        \li \l {Export SVG images}
+        \li \l {View images}
+    \endlist
+
+    \section1 Manage Projects
+
+    \list
+        \li \l {Add a license header template for C++ code}
+    \endlist
+
+    \section1 Use \QC
+
+    \list
+        \li \l {Find settings files}
+        \li \l {Run \QC from the command line}
+    \endlist
+*/
+
+/*!
+    \page creator-how-to-switch-between-modes.html
+    \previouspage creator-how-tos.html
+    \nextpage creator-known-issues.html
+    \ingroup creator-how-to-ui
+
+    \title Switch between modes
 
     \QC uses different modes for different purposes. You can quickly
     switch between these modes with the following keyboard shortcuts:
@@ -57,8 +92,15 @@
     \endlist
 
     For more information about \QC modes, see \l {Selecting Modes}.
+*/
 
-    \section1 Move between open files
+/*!
+    \page creator-how-to-move-between-open-files.html
+    \previouspage creator-how-tos.html
+    \nextpage creator-known-issues.html
+    \ingroup creator-how-to-edit
+
+    \title Move between open files
 
     To quickly move between currently open files, press
     \key Ctrl+Tab.
@@ -68,8 +110,15 @@
     (\key {Cmd+Opt+Left} on \macos). For example, if you use the \uicontrol Locator
     to jump to a symbol in the same file, you can jump back to your original
     location in that file by pressing \key {Alt+Left}.
+*/
 
-    \section1 Switch to Edit mode
+/*!
+    \page creator-how-to-switch-to-edit-mode.html
+    \previouspage creator-how-tos.html
+    \nextpage creator-known-issues.html
+    \ingroup creator-how-to-edit
+
+    \title Switch to Edit mode
 
     To move to the \uicontrol Edit mode and currently active file, press
     \key Esc.
@@ -83,13 +132,29 @@
         \li The second press closes secondary windows
 
     \endlist
+*/
 
-    \section1 Find a specific setting
+/*!
+    \page creator-how-to-find-preferences.html
+    \previouspage creator-how-tos.html
+    \nextpage creator-known-issues.html
+    \ingroup creator-how-to-ui
 
-    To find specific settings in \uicontrol Edit > \uicontrol Preferences,
+    \title Find a particular preference
+
+    To find a particular preference in \uicontrol Edit > \uicontrol Preferences,
     use the filter located at the top left of the \uicontrol Preferences dialog.
 
-    \section1 View output
+    \image qtcreator-preferences.webp {Filtering preferences}
+*/
+
+/*!
+    \page creator-how-to-view-output.html
+    \previouspage creator-how-tos.html
+    \nextpage creator-known-issues.html
+    \ingroup creator-how-to-ui
+
+    \title View output
 
     The \l{Viewing Output}{taskbar} shows output from
     several sources, such as a list of errors and warnings encountered during
@@ -113,8 +178,15 @@
     \endlist
 
     For additional ways to view other types of output, see \l{Viewing Output}.
+*/
 
-    \section1 Find keyboard shortcuts
+/*!
+    \page creator-how-to-find-keyboard-shortcuts.html
+    \previouspage creator-how-tos.html
+    \nextpage creator-known-issues.html
+    \ingroup creator-how-to-ui
+
+    \title Find keyboard shortcuts
 
     \QC has \l{Keyboard Shortcuts}{many useful keyboard shortcuts}.
     You can see the keyboard shortcut for a menu command in the menu
@@ -124,8 +196,15 @@
     \uicontrol Preferences > \uicontrol Environment > \uicontrol Keyboard.
 
     \image qtcreator-keyboard-shortcuts.png "Keyboard preferences"
+*/
 
-    \section1 Run \QC from the command line
+/*!
+    \page creator-how-to-run-from-cli.html
+    \previouspage creator-how-tos.html
+    \nextpage creator-known-issues.html
+    \ingroup creator-how-to-use
+
+    \title Run \QC from the command line
 
     You can launch \QC from the command line using the name of an
     existing \l{Managing Sessions}{session} or project file by entering
@@ -135,8 +214,15 @@
     loads the session called \e somesession.
 
     For more information, see \l{Using Command Line Options}.
+*/
 
-    \section1 Show and hide sidebars
+/*!
+    \page creator-how-to-show-and-hide-sidebars.html
+    \previouspage creator-how-tos.html
+    \nextpage creator-known-issues.html
+    \ingroup creator-how-to-ui
+
+    \title Show and hide sidebars
 
     You can toggle the left and right sidebar in some \QC modes.
 
@@ -150,8 +236,15 @@
 
     For more information on using the sidebars, see
     \l {Browsing Project Contents}.
+*/
 
-    \section1 Move to symbols
+/*!
+    \page creator-how-to-move-to-symbols.html
+    \previouspage creator-how-tos.html
+    \nextpage creator-known-issues.html
+    \ingroup creator-how-to-edit
+
+    \title Move to symbols
 
     To move straight to a symbol used in a project, select the symbol in the
     \uicontrol Editor toolbar drop-down menu. For more information on the editor
@@ -166,8 +259,15 @@
     the definition or the declaration of the symbol. You can also move the
     cursor on the symbol and press \key {F2}. For more information, see
     \l{Moving to Symbol Definition or Declaration}.
+*/
 
-    \section1 Quickly locate files using the keyboard
+/*!
+    \page creator-how-to-locate-files-using-keyboard.html
+    \previouspage creator-how-tos.html
+    \nextpage creator-known-issues.html
+    \ingroup creator-how-to-edit
+
+    \title Locate files using the keyboard
 
     Use the \uicontrol Locator to browse
     through projects, files, classes, functions, documentation, and file systems.
@@ -184,8 +284,15 @@
     \image qtcreator-locator-customize.webp "Locator preferences"
 
     For more information, see \l{Creating Locator Filters}.
+*/
 
-    \section1 Perform calculations
+/*!
+    \page creator-how-to-perform-calculations.html
+    \previouspage creator-how-to-move-between-open-files.html
+    \nextpage creator-known-issues.html
+    \ingroup creator-how-to-edit
+
+    \title Perform calculations
 
     Open the \uicontrol Locator with \key {Ctrl+K} and type =, followed by a space.
     You can now do basic calculations, with options to copy the results to the clipboard
@@ -194,13 +301,27 @@
     \image qtcreator-locator.webp "List of locator filters"
 
     For more information, see \l{Executing JavaScript}.
+*/
 
-    \section1 Jump to a function in QML code
+/*!
+    \page creator-how-to-jump-to-functions-in-qml-code.html
+    \previouspage creator-how-tos.html
+    \nextpage creator-known-issues.html
+    \ingroup creator-how-to-edit
+
+    \title Jump to a function in QML code
 
     Open the \uicontrol Locator with \key {Ctrl+K} and type m, followed by a space.
     You can now go directly to any QML method in the file.
+*/
 
-    \section1 Add a license header template for C++ code
+/*!
+    \page creator-how-to-add-license-header-templates.html
+    \previouspage creator-how-tos.html
+    \nextpage creator-known-issues.html
+    \ingroup creator-how-to-projects
+
+    \title Add a license header template for C++ code
 
     Specify a file that has a license header for C++ in \uicontrol Edit >
     \uicontrol Preferences > \uicontrol C++ > \uicontrol {File Naming} >
@@ -223,20 +344,41 @@
         \li \c %$VARIABLE%: Contents of environment variable \c{VARIABLE}.
 
     \endlist
+*/
 
-    \section1 Paste text from my clipboard history
+/*!
+    \page creator-how-to-paste-text-from-clipboard-history.html
+    \previouspage creator-how-tos.html
+    \nextpage creator-known-issues.html
+    \ingroup creator-how-to-edit
+
+    \title Paste text from clipboard history
 
     \QC stores copied text in clipboard history. To retrieve clips from the
     history, press \key {Ctrl+Shift+V} until the clip appears.
     The number of clips in the history is fixed to 10.
+*/
 
-    \section1 Sort lines alphabetically
+/*!
+    \page creator-how-to-sort-lines-alphabetically.html
+    \previouspage creator-how-tos.html
+    \nextpage creator-known-issues.html
+    \ingroup creator-how-to-edit
+
+    \title Sort lines alphabetically
 
     To sort selected lines alphabetically, select \uicontrol Edit >
     \uicontrol Advanced > \uicontrol {Sort Selected Lines} or press
     \key {Alt+Shift+S} (or \key Ctrl+Shift+S on \macos).
+*/
 
-    \section1 Enclose selected code in curly braces, parentheses, or double quotes
+/*!
+    \page creator-enclose-code-in-characters.html
+    \previouspage creator-how-tos.html
+    \nextpage creator-known-issues.html
+    \ingroup creator-how-to-edit
+
+    \title Enclose selected code in curly braces, parentheses, or double quotes
 
     When you have selected code and enter one of the following opening
     characters, the matching closing character is added automatically
@@ -253,45 +395,87 @@
     \uicontrol {Text Editor} > \uicontrol Completion.
 
     \image qtcreator-options-texteditor-completion.png "Completion preferences"
+*/
 
-    \section1 Select the enclosing block in C++
+/*!
+    \page creator-how-to-select-enclosing-block.html
+    \previouspage creator-how-tos.html
+    \nextpage creator-known-issues.html
+    \ingroup creator-how-to-edit
+
+    \title Select the enclosing block in C++
 
     Press \key {Ctrl+U}.
+*/
 
-    \section1 Add my own code snippets to the auto-complete menu
+/*!
+    \page creator-how-to-add-code-snippets.html
+    \previouspage creator-how-tos.html
+    \nextpage creator-known-issues.html
+    \ingroup creator-how-to-edit
 
-    You can add, modify, and remove snippets in the snippet editor.
+    \title Add code snippets to the auto-complete menu
+
+    Add, modify, and remove snippets in the snippet editor.
     To open the editor, select \uicontrol Edit > \uicontrol Preferences
     > \uicontrol {Text Editor} > \uicontrol Snippets.
 
     \image qtcreator-snippet-modifiers.png "Snippets preferences"
 
     For more information, see \l {Adding and Editing Snippets}.
+*/
 
-    \section1 Quickly write down notes somewhere
+/*!
+    \page creator-how-to-write-notes.html
+    \previouspage creator-how-tos.html
+    \nextpage creator-known-issues.html
+    \ingroup creator-how-to-edit
 
-    Select \uicontrol File > \uicontrol {New File} >
+    \title Write down notes
-    \uicontrol General > \uicontrol {Scratch Buffer}.
-    Alternatively, \key {Ctrl+N} can be used to open this dialog, which is
-    fully navigable via keyboard by using the up and down arrow keys and the
-    tab key.
 
-    This creates a new empty text file and saves it to the temporary directory
+    To write down notes without having to worry about deleting the file
-    on your machine. You can use it to write down notes without having to worry
+    later, create a new empty text file and save it to a temporary directory
-    about deleting the file afterwards. The operating system will eventually
+    on your machine.
-    remove the file automatically. If you want to keep the file, you can easily
-    save it as a new file somewhere else. If you accidentally close the file,
-    you can find it in the \uicontrol File > \uicontrol {Recent Files} menu.
 
-    \section1 Configure the amount of recent files shown
+    \image qtcreator-scratch-buffer.webp {Scratch file open in the text editor}
+
+    To create a scratch file and open it in the text editor:
+
+    \list
+        \li Select \uicontrol File > \uicontrol {New File} > \uicontrol General >
+            \uicontrol {Scratch Buffer}.
+        \li Press \key {Ctrl+N}.
+    \endlist
+
+    Use the up and down arrow keys and the tab key to navigate in the editor.
+
+    The operating system will eventually remove the file automatically. To keep
+    the file, save it as a new file somewhere else. If you accidentally close the
+    file, find it in \uicontrol File > \uicontrol {Recent Files}.
+*/
+
+/*!
+    \page creator-how-to-set-recent-files.html
+    \previouspage creator-how-tos.html
+    \nextpage creator-known-issues.html
+    \ingroup creator-how-to-ui
+
+    \title Set the number of recent files shown
 
     Set the value of \uicontrol Edit > \uicontrol Preferences >
     \uicontrol Environment > \uicontrol System
     > \uicontrol {Maximum number of entries in "Recent Files"}.
 
     \image qtcreator-options-environment-system.png "System preferences"
+*/
 
-    \section1 Search and replace across files using a regular expression
+/*!
+    \page creator-how-to-search-and-replace-using-regexp.html
+    \previouspage creator-how-to-move-between-open-files.html
+    \nextpage creator-known-issues.html
+    \ingroup creator-how-to-edit
+
+    \title Search and replace across files using a regular expression
 
     As an example, say you want to replace equality checks (\c {foo == bar})
     with a function (\c {foo.equals(bar)}):

doc/qtcreator/src/howto/creator-only/qtcreator-faq.qdoc

@@ -10,7 +10,7 @@
 
     This section has answers to some frequently asked questions about \QC.
     You might also find answers to your questions in the
-    \l{Known Issues} and \l{How-tos} sections, or the Troubleshooting
+    \l{Known Issues} and \l{How-to} sections, or the Troubleshooting
     sections for a special area, such as
     \l{Troubleshooting Debugger}{debugging}.
 
@@ -22,7 +22,7 @@
     Remove the settings files created by \QC.
 
     For more information about where the files are located on each supported
-    platform, see \l {Location of Settings Files}.
+    platform, see \l {Find settings files}.
 
     \b {\QC comes with \MinGW, should I use this version with Qt?}
 

doc/qtcreator/src/overview/creator-only/creator-help-overview.qdoc

@@ -30,7 +30,7 @@
 
             Has answers to some frequently asked questions about \QC.
 
-        \li \l{How-tos}
+        \li \l{How-to}
 
             Lists useful \QC features.
 

doc/qtcreator/src/qtcreator-toc.qdoc

@@ -255,7 +255,7 @@
         \list
             \li \l{Using the Help Mode}
             \li \l{FAQ}
-            \li \l{How-tos}
+            \li \l{How-to}
             \li \l{Known Issues}
             \li \l{Glossary}
             \li \l{Technical Support}

doc/qtcreator/src/qtcreator.qdoc

@@ -103,7 +103,7 @@
                 \list
                     \li \l{Using the Help Mode}
                     \li \l{FAQ}
-                    \li \l{How-tos}
+                    \li \l{How-to}
                     \li \l{Known Issues}
                     \li \l{Glossary}
                 \endlist

doc/qtcreator/src/user-interface/creator-ui.qdoc

@@ -18,51 +18,57 @@
 
     \title User Interface
 
-    When you start \QC, it opens to the \uicontrol Welcome mode, where you can:
-
-    \list
-        \if defined(qtcreator)
-        \li Open recent sessions
-        \endif
-
-        \li Open recent projects
-
-        \li Create and open projects
-
-        \li Open tutorials and example projects
-
-        \if defined(qtcreator)
-        \li Browse Qt extensions in the \l{https://marketplace.qt.io/}
-            {Qt Marketplace}
-        \li Download the Qt Installer
-        \endif
-
-        \li Read news from the online community and Qt blogs
-
-        \li Create or manage a Qt Account
-
-    \endlist
-
     \if defined(qtcreator)
-    \image qtcreator-breakdown.png
+    When you start \QC, it opens to the \uicontrol Welcome mode.
-    \else
-    \image studio-welcome-mode.png
-    \endif
 
-    \if defined(qtcreator)
+    \image qtcreator-breakdown.png {Welcome mode}
-    Do you want to perform a particular task, such as designing the UI,
-    writing code, or debugging the application? Select the appropriate mode in
-    the \l{Selecting Modes}{mode selector} (1).
 
-    Are you ready to build the application for particular hardware or (5)
+    \table
-    run (3) or debug (4) it on a device? Use the kit selector (2) to select
+    \header
-    the appropriate \l{glossary-buildandrun-kit}{kit}. The task bar (7)
+        \li Number
-    displays output from these actions.
+        \li UI Control
+        \li Purpose
+        \li Read More
+    \row
+        \li \inlineimage numbers/01.png
+        \li Mode selector
+        \li Perform a particular task, such as designing the UI, writing code, or
+            debugging the application.
+        \li \l{Selecting Modes}
+    \row
+        \li \inlineimage numbers/02.png
+        \li Kit selector
+        \li Select the appropriate \l{glossary-buildandrun-kit}{kit} for building
+            the project and running it on particular hardware.
+        \li \l{Activating Kits for a Project}
+    \row
+        \li \inlineimage numbers/03.png
+        \li Run button
+        \li Run the application on the selected target platform.
+        \li \l{Running on Multiple Platforms}
+    \row
+        \li \inlineimage numbers/04.png
+        \li Debug button
+        \li Debug the application on the selected target platform.
+        \li \l{Debugging}
+    \row
+        \li \inlineimage numbers/05.png
+        \li Build button
+        \li Build the application using the selected kit.
+        \li \l{Building for Multiple Platforms}
+    \row
+        \li \inlineimage numbers/06.png
+        \li Locator
+        \li Find a particular project, file, class, or function.
+        \li \l{Searching with the Locator}
+    \row
+        \li \inlineimage numbers/07.png
+        \li Output
+        \li View output from building, running, and other actions.
+        \li \l{Viewing Output}
+    \endtable
 
-    Are you looking for a particular project, file, class, or function?
+    To see where the above controls are in the UI, select
-    Start typing its name in the \l{Searching with the Locator}{locator} (6).
-
-    To see where the above controls are in the user interface, select
     \uicontrol Help > \uicontrol {UI Tour}.
 
     The following video shows the parts of the UI and the \uicontrol Welcome
@@ -70,55 +76,27 @@
 
     \youtube hOx3dod5-1A
 
-    The following sections describe some \QC controls in more detail:
-
-    \list
-        \li \l{Selecting Modes}{Mode selector}
-        \li \l{Working with Sidebars}{Sidebars}
-        \li \l{Browsing Project Contents}{Views}
-        \li \l{Viewing Output}{Output}
-    \endlist
-
-    \else
-    You can use the \l{Selecting Modes}{mode selector} to switch to the
-    \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.
-
-    Below the mode selector, you can find shortcuts to some more advanced
-    functions, such as running the application or finding problems in the
-    QML code by debugging or profiling it.
-    \endif
-
     \section1 What's New?
 
     For information about new features and bug fixes in each \QC release,
     select \uicontrol Help > \uicontrol {Change Log}.
 
-    \section1 For \macos Users
+    \sa {Working with Sidebars}, {Browsing Project Contents}
+    \sa {Use the UI}{How-to: Use the UI}
+    \else
+    When you start \QC, it opens to the \uicontrol Welcome mode, where you can:
 
-    \QC uses standard names and locations for standard features, such as
+    \list
-    \e preferences. In this manual, the names and locations on
+        \li Open recent projects
-    Windows and Linux are usually used to keep the instructions short. Here are
+        \li Create and open projects
-    some places to check if you cannot find a function, dialog, or keyboard
+        \li Open tutorials and example projects
-    shortcut on \macos when following the instructions:
+        \li Read news from the online community and Qt blogs
+        \li Create or manage a Qt Account
+    \endlist
 
-    \table
+    \image studio-welcome-mode.webp {Welcome mode}
-        \header
+
-            \li For
+    \endif
-            \li Look In
-        \row
-            \li \uicontrol Edit > \uicontrol Preferences
-            \li \uicontrol {\QC} > \uicontrol Preferences
-        \row
-            \li \uicontrol Help > \uicontrol {About Plugins}
-            \li \uicontrol {\QC} > \uicontrol {About Plugins}
-        \row
-            \li Keyboard shortcuts
-            \li \uicontrol {\QC} > \uicontrol Preferences > \uicontrol Environment >
-                \uicontrol Keyboard
-    \endtable
 
     \if defined(qtdesignstudio)
     \section1 Customizing the Menu
@@ -139,143 +117,26 @@
 
     You need to restart \QDS to apply changes made to these settings.
 
-    \endif
+    \section1 Customizing the UI
 
-    \section1 Switching UI Themes
+    The following topics describe how to customize the UI:
-
-    Themes enable you to change the appearance of the UI from dark to light,
-    for example. To switch themes, select \uicontrol Edit > \uicontrol Preferences
-    > \uicontrol Environment, and then select a theme in the \uicontrol Theme
-    field.
-
-    \image qtcreator-preferences-environment-interface.webp {Interface preferences}
-
-    \section1 Changing Languages
-
-    \QC has several language versions. If the system language
-    is one of the supported languages, \QC selects it automatically. To
-    change the language, select \uicontrol Edit > \uicontrol Preferences >
-    \uicontrol Environment and select a language in the \uicontrol Language
-    field. Select \uicontrol {Restart Now} to restart \QC and have the change
-    take effect.
-
-    \section1 High DPI Scaling
-
-    The operating systems that \QC supports implement high dots-per-inch (DPI)
-    scaling at varying levels. Therefore, \QC handles high DPI scaling
-    differently on different operating systems:
 
     \list
-        \li On \macos, \QC forces high DPI scaling, which means that it allows
+        \li \l {Find menu items on \macos}
-            Qt to use the system scaling factor as the \QC scaling factor.
+        \li \l {Set high DPI scaling}
-        \li On Windows, if you do not set \l{High DPI}
+        \li \l {Switch UI themes}
-            {scaling environment variables}, \QC instructs Qt to detect the
-            scaling factor and use it as the \QC scaling factor.
-        \li On Linux, \QC leaves it to the user to enable high DPI scaling
-            because the process varies so much on different distributions
-            and windowing systems that it cannot be reliably done automatically.
     \endlist
 
-    To override the default approach and always enable high-DPI scaling, select
-    \uicontrol Edit > \uicontrol Preferences > \uicontrol Environment >
-    \uicontrol {Enable high DPI scaling}. The changes will take effect after you
-    restart \QC.
-
-    \section1 Navigating with Keyboard
-
-    \QC caters not only to those users who like to use the mouse, but also
-    to those who are more comfortable with the keyboard. A wide range of
-    \l{keyboard-shortcuts}{keyboard} and \l{Searching with the Locator}
-    {navigation} shortcuts are available to help you work faster.
-
-    \if defined(qtcreator)
-    \section1 Useful Features
-
-    For a list of useful \QC features described in other parts of the
-    documentation, see \l{How-tos}.
-    \endif
-
     \section1 Viewing Images
 
-    \QC opens image files in the image viewer.
+    The following topics describe how to use the image viewer:
 
-    \image qtcreator-image-viewer.png "Image viewer"
+     \list
-
+        \li \l {Export SVG images}
-    Use the toolbar buttons or \l{Keyboard Shortcuts}{keyboard shortcuts} to:
+        \li \l {View images}
-
-    \list
-        \li \inlineimage icons/export.png
-            - Export SVG images to pixmaps or copy an image as a data URL, which
-            enables you to include it in web pages as if it were an external
-            resource
-        \li \inlineimage icons/original-size.png
-            - Return images to their original size
-        \li \inlineimage icons/zoom-in.png
-            - Zoom in and out (\inlineimage icons/zoom-out.png
-            )
-        \li \inlineimage icons/run_small.png
-            - Play and pause animated GIF and MNG images
-        \li \inlineimage icons/qtcreator-desktopdevice-button.png
-            - Show and hide the image background
-        \li \inlineimage icons/switch-outline.png
-            - Show and hide the image outline
-        \li \inlineimage icons/fittoview.png
-            - Fit images to screen
     \endlist
 
-    Select \uicontrol {Set as Default} to use the current settings for the
-    background and outline modes and fitting images to screen as default
-    values for the image viewer.
-
-    \section2 Exporting SVG Images
-
-    If you have a freely scalable icon in the SVG format,
-    you can export it to several images of different sizes to create a set of
-    pixmaps.
-    \if defined(qtcreator)
-    You can then use QIcon::addPixmap() to add the pixmaps to icons in
-    different modes and states.
     \endif
-
-    \if defined(qtcreator)
-    \section1 Location of Settings Files
-
-    \QC creates the following files and directories:
-
-    \list
-
-        \li QtCreator.db
-
-        \li QtCreator.ini
-
-        \li qtversion.xml
-
-        \li toolChains.xml
-
-        \li qtcreator
-
-        \li qtc-qmldump
-
-    \endlist
-
-    The location of the above files and directories depends on the platform:
-
-    \list
-
-        \li On Linux and other Unix platforms, look in
-            \c {~/.config/QtProject} and
-            \c {~/.local/share/data/QtProject/qtcreator}.
-
-        \li On \macos, look in \c {~/.config/QtProject} and
-            \c {~/Library/Application Support/QtProject/Qt Creator}.
-
-        \li On Windows, look in
-            \c {%appdata%\QtProject} and \c {%localappdata%\QtProject}.
-
-    \endlist
-    \endif
-
-
 */
 
 /*!