From 04612e77368c8c7f46932a0c4aae3e13fefe28a7 Mon Sep 17 00:00:00 2001 From: Leena Miettinen Date: Mon, 22 Feb 2021 17:30:46 +0100 Subject: [PATCH] Doc: Add a summary of Navigator icons and the actions they apply Change the topic name to Navigator and move the topic under Design views in the TOC. Replace occurrences of "item" and "QML type" with "component". Task-number: QDS-3771 Change-Id: I7dbe9803d88a409c8ba0a0ef074e2bc8a6866dec Reviewed-by: Leena Miettinen --- .../images/icons/navigator-arrowdown.png | Bin 0 -> 156 bytes .../images/icons/navigator-arrowup.png | Bin 0 -> 157 bytes doc/qtcreator/src/qtcreator-toc.qdoc | 2 +- .../creator-only/qtquick-app-tutorial.qdoc | 2 +- .../src/qtquick/qtquick-buttons.qdoc | 2 +- .../qtquick-component-context-menu.qdocinc | 4 +- .../src/qtquick/qtquick-navigator.qdoc | 186 ++++++++++++------ .../src/qtquick/qtquick-properties.qdoc | 2 +- doc/qtcreator/src/qtquick/qtquick-uis.qdoc | 2 +- .../src/qtdesignstudio-toc.qdoc | 2 +- doc/qtdesignstudio/src/qtdesignstudio.qdoc | 1 - .../qtdesignstudio-3d-design-mode.qdoc | 2 +- 12 files changed, 134 insertions(+), 71 deletions(-) create mode 100644 doc/qtcreator/images/icons/navigator-arrowdown.png create mode 100644 doc/qtcreator/images/icons/navigator-arrowup.png diff --git a/doc/qtcreator/images/icons/navigator-arrowdown.png b/doc/qtcreator/images/icons/navigator-arrowdown.png new file mode 100644 index 0000000000000000000000000000000000000000..ff55e005cdde23a40b2ee59a3e1ecb5f50444136 GIT binary patch literal 156 zcmeAS@N?(olHy`uVBq!ia0y~yU=RRd7G?$phPQVgfdu3Nd_r6q7#PIF#KgtLySlpe z?%lh8|NcXV4jn#x_{*0s|NsA=*6Ufpz`$VX>Eal|5uH4Pla=R04`+&jPh-!@X%21+ zpSR5Hoabq#?wxWJQTd$(D?UQqu!lCLdv7wqRzEzGOFT+V_x~3=9kmp00i_ I>zopr0G*~b{{R30 literal 0 HcmV?d00001 diff --git a/doc/qtcreator/src/qtcreator-toc.qdoc b/doc/qtcreator/src/qtcreator-toc.qdoc index 8ccab79a3a0..f2cba727297 100644 --- a/doc/qtcreator/src/qtcreator-toc.qdoc +++ b/doc/qtcreator/src/qtcreator-toc.qdoc @@ -95,6 +95,7 @@ \list \li \l{Form Editor} \li \l{Library} + \li \l{Navigator} \endlist \li \l {Creating UIs} \list @@ -109,7 +110,6 @@ \li \l{Creating Buttons} \li \l{Creating Scalable Buttons and Borders} \endlist - \li \l{Managing Item Hierarchy} \li \l{Specifying Item Properties} \li \l{Positioning Items} \li \l{Using Custom Fonts} diff --git a/doc/qtcreator/src/qtquick/creator-only/qtquick-app-tutorial.qdoc b/doc/qtcreator/src/qtquick/creator-only/qtquick-app-tutorial.qdoc index 41a9593ec67..91159e76bbc 100644 --- a/doc/qtcreator/src/qtquick/creator-only/qtquick-app-tutorial.qdoc +++ b/doc/qtcreator/src/qtquick/creator-only/qtquick-app-tutorial.qdoc @@ -195,7 +195,7 @@ \list \li \l{Creating Components} - \li \l{Managing Item Hierarchy} + \li \l{Navigator} \li \l{Specifying Item Properties} \endlist diff --git a/doc/qtcreator/src/qtquick/qtquick-buttons.qdoc b/doc/qtcreator/src/qtquick/qtquick-buttons.qdoc index f61aeee27d3..d656e9d61e5 100644 --- a/doc/qtcreator/src/qtquick/qtquick-buttons.qdoc +++ b/doc/qtcreator/src/qtquick/qtquick-buttons.qdoc @@ -131,7 +131,7 @@ /*! \previouspage quick-buttons.html \page quick-scalable-image.html - \nextpage qtquick-navigator.html + \nextpage qtquick-properties.html \title Creating Scalable Buttons and Borders diff --git a/doc/qtcreator/src/qtquick/qtquick-component-context-menu.qdocinc b/doc/qtcreator/src/qtquick/qtquick-component-context-menu.qdocinc index 1dc19f288d3..0dff73e4d70 100644 --- a/doc/qtcreator/src/qtquick/qtquick-component-context-menu.qdocinc +++ b/doc/qtcreator/src/qtquick/qtquick-component-context-menu.qdocinc @@ -37,10 +37,10 @@ \li Go To \row \li Arrange - \li \l{Arranging Items} + \li \l{Arranging Components} \row \li Edit - \li \l{Showing and Hiding Items} + \li \l{Showing and Hiding Components} \row \li Anchors \li \l{Setting Anchors and Margins} diff --git a/doc/qtcreator/src/qtquick/qtquick-navigator.qdoc b/doc/qtcreator/src/qtquick/qtquick-navigator.qdoc index 41559a292aa..e6eb7db95fc 100644 --- a/doc/qtcreator/src/qtquick/qtquick-navigator.qdoc +++ b/doc/qtcreator/src/qtquick/qtquick-navigator.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. @@ -25,122 +25,186 @@ /*! \page qtquick-navigator.html - \previouspage quick-scalable-image.html + \previouspage quick-library.html \nextpage qtquick-properties.html - \title Managing Item Hierarchy + \title Navigator - The \uicontrol Navigator view displays the items in the current QML file and - their relationships. Items (1) are listed in a tree structure, below their - parent (2). You can preview items by hovering the mouse over them (3). + The \uicontrol Navigator view displays the components in the current + component file and their relationships. \l{glossary-component}{Components} + (1) are listed in a tree structure, below their parent (2). You can preview + components by hovering the mouse over them (3). - \image qmldesigner-navigator.png "Navigator with item preview" + \image qmldesigner-navigator.png "Navigator with component preview" - You can select items in the \uicontrol Navigator view to edit their - properties in the \uicontrol Properties view. Items can access the - properties of their parent item. To select items in the - \uicontrol {Form Editor} view, right-click an item, and select another - item in the \uicontrol Selection submenu. + You can select components in the \uicontrol Navigator view to edit their + properties in the \uicontrol Properties view. Components can access the + properties of their parent component. To select components in the + \uicontrol {Form Editor} view, right-click a component, and select another + component in the \uicontrol Selection submenu. - Typically, child items are located within the parent item in + Typically, child components are located within the parent component in \uicontrol {Form Editor}. However, they do not necessarily have to - fit inside the parent item. For example, you might want to make a + fit inside the parent component. For example, you might want to make a mouse area larger than the rectangle or image beneath it. \image qmldesigner-element-size.png "Mouse area for a button" - When you copy an item, all its child items are also copied. When - you remove an item, the child items are also removed. + When you copy a component, all its child components are also copied. When + you remove a component, the child components are also removed. - Select context menu commands to apply commands to items. The availability - of the commands depends on the item type. For example, you can change - the source of an Image type by selecting \uicontrol {Change Source URL} in - the context menu. + Select context menu commands to apply commands to components. The + availability of the commands depends on the component type. For example, + you can change the source of an Image component by selecting + \uicontrol {Change Source URL} in the context menu. - \section1 Showing and Hiding Items + \section1 Summary of Navigator Buttons - To show and hide items in \uicontrol {Form Editor} when focusing on + The following table lists the \uicontrol Navigator buttons: + + \table + \header + \li Icon + \li Tooltip + \li Read More + \row + \li \inlineimage arrowleft.png + \li Moves the component one level up in the component tree, so that + it becomes the last sibling of its current parent. + \li \l{Arranging Components} + \row + \li \inlineimage arrowright.png + \li Moves the component one level down in the component tree, so that it + becomes the child of its last sibling. + \li \l{Arranging Components} + \row + \li \inlineimage icons/navigator-arrowdown.png + \li Moves the component down within its parent. + \li \l{Arranging Components} + \row + \li \inlineimage icons/navigator-arrowup.png + \li Moves the component up within its parent. + \li \l{Arranging Components} + \row + \li \inlineimage filtericon.png + \li Shows and hides invisible components in \uicontrol Navigator. + \li \l{Showing and Hiding Components} + \row + \li \inlineimage export_unchecked.png + \li Adds a property alias that you can use from outside of the + component. + \li \l{Adding Property Aliases} + \row + \li \inlineimage icons/visibilityon.png + \li Shows and hide components in \uicontrol {Form Editor}. + \li \l{Showing and Hiding Components} + \row + \li \inlineimage icons/lockon.png + \li Locks components in all views. + \li \l{Locking Components} + \endtable + + \section1 Showing and Hiding Components + + To show and hide components in \uicontrol {Form Editor} when focusing on specific parts of the application, click \inlineimage icons/visibilityon.png in \uicontrol Navigator. - To change the visibility of an item in the application code, select the + 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. You can also set the \uicontrol Opacity field to 0 in \uicontrol Properties - to hide items in the UI that you want to apply animation to. + to hide components in the UI that you want to apply animation to. As all properties, visibility and opacity are inherited from the parent - item. To hide or show child items, edit the properties of the parent item. + component. To hide or show child components, edit the properties of the + parent component. - To hide invisible items in \uicontrol Navigator, click + To hide invisible components in \uicontrol Navigator, click \inlineimage filtericon.png (\uicontrol {Filter Tree}) and select \uicontrol {Show only visible items}. - \section1 Locking Items + \section1 Locking Components When designing complex applications, it is easy to accidentally modify - the properties of an item in one of the \QC views in ways that lead to + the properties of a component in one of the \QC views in ways that lead to surprising results. For example, \uicontrol {Form Editor} can become - crowded and other items can get in the way when you are trying to select - or transform a particular item, so that you end up transforming more - items than you wanted to. + crowded and other components can get in the way when you are trying to + select or transform a particular component, so that you end up transforming + more components than you wanted to. - To lock items that you are not currently editing and their children, + To lock components that you are not currently editing and their children, click \inlineimage icons/lockon.png - in \uicontrol Navigator. Locked items cannot be handled in any \QC views. - You can unlock the items when you want to edit them again. + in \uicontrol Navigator. Locked components cannot be handled in any \QC + views. You can unlock the components when you want to edit them again. - \image qtquick-designer-navigator-lock.gif "Locking items in Navigator" + \image qtquick-designer-navigator-lock.gif "Locking components in Navigator" - You cannot select locked items in \uicontrol {Form Editor} or + You cannot select locked components in \uicontrol {Form Editor} or \uicontrol {3D Editor} nor access their properties in \uicontrol Properties. If you attempt to \l{Adding States}{remove a state} that changes the - properties of a locked item, you are prompted to confirm the removal. + properties of a locked component, you are prompted to confirm the removal. If you have \l{Editing Animation Curves}{added easing curves} to keyframe animations, you can lock and unlock them in the \uicontrol {Curve Editor} - view. If you lock the items that contain the easing curves, the lock status - is synchronized between \uicontrol Navigator and \uicontrol {Curve Editor}. + view. If you lock the components that contain the easing curves, the lock + status is synchronized between \uicontrol Navigator and + \uicontrol {Curve Editor}. - \section1 Arranging Items + \section1 Arranging Components - You can view the order of items in a QML file in \uicontrol Navigator - and \uicontrol {Text Editor}. The order of items in the file also + You can view the order of components in a component file in \uicontrol Navigator + and \uicontrol {Text Editor}. The order of components in the file also determines the order in which they are drawn in \uicontrol {Form Editor}. - By default, items that are located at the top of the file are listed at - the bottom of the \uicontrol Navigator tree and behind overlapping items - in \uicontrol {Form Editor}. To list the items in the order in which they - appear in the file, as some other tools do, click \inlineimage filtericon.png + By default, components that are located at the top of the file are listed at + the bottom of the \uicontrol Navigator tree and behind overlapping + components in \uicontrol {Form Editor}. To list the components in the order + in which they appear in the file, as some other tools do, click + \inlineimage filtericon.png (\uicontrol {Filter Tree}), and select \uicontrol {Reverse item order}. - To move an item to the top or bottom of the tree within its parent, + To move a component to the top or bottom of the tree within its parent, right-click it in \uicontrol Navigator or \uicontrol {Form Editor} and select \uicontrol Arrange > \uicontrol {Bring to Front} or - \uicontrol {Send to Back}. To move an item up or down, select + \uicontrol {Send to Back}. To move a component up or down, select \uicontrol {Bring Forward} or \uicontrol {Send Backward}. - To reverse the order of the selected items in \uicontrol Navigator and + To reverse the order of the selected components in \uicontrol Navigator and \uicontrol {Text Editor}, select \uicontrol Arrange > \uicontrol Reverse. - \image qtquick-designer-navigator-arrange.gif "Reversing item order" + \image qtquick-designer-navigator-arrange.gif "Reversing component order" - You can also drag and drop the item to another position in the tree or use - the arrow buttons to move the item in the tree. You can use the left and - right arrow buttons to change the parent of the item. + You can also drag and drop the component to another position in the tree or + use the arrow buttons to move the component in the tree. You can use the + left and right arrow buttons to change the parent of the component. \image qmldesigner-navigator-arrows.png "Navigator buttons" - When you drag and drop instances of QML types to \uicontrol {Form Editor}, - the new item is added as a child of the item - beneath it. When you move the items, it is not possible to determine whether - you want to adjust their position or attach them to a new parent item. - Therefore, the parent item is not automatically changed. To change the - parent of the item, press down the \key Shift key before you drag and drop - the item into a new position. The topmost item under the cursor becomes the - new parent of the item. + When you drag and drop instances of components to \uicontrol {Form Editor}, + the new component is added as a child of the component + beneath it. When you move the components, it is not possible to determine + whether you want to adjust their position or attach them to a new parent component. + Therefore, the parent component is not automatically changed. To change the + parent of the component, press down the \key Shift key before you drag and drop + the component into a new position. The topmost component under the cursor becomes the + new parent of the component. + + \section1 Adding Property Aliases + + A \e {property alias} is a property that you can use from outside the + component. + + You can use the \inlineimage export_unchecked.png + (\uicontrol Export) button in \uicontrol Navigator + to export a component as an alias. + + \image qmldesigner-export-item.png + + You can then use the property alias in other components to + \l{Adding Connections}{create connections} to this component. \section1 Moving Within Components diff --git a/doc/qtcreator/src/qtquick/qtquick-properties.qdoc b/doc/qtcreator/src/qtquick/qtquick-properties.qdoc index f6b8d2153df..5f375c62e61 100644 --- a/doc/qtcreator/src/qtquick/qtquick-properties.qdoc +++ b/doc/qtcreator/src/qtquick/qtquick-properties.qdoc @@ -25,7 +25,7 @@ /*! \page qtquick-properties.html - \previouspage qtquick-navigator.html + \previouspage quick-scalable-image.html \nextpage qtquick-positioning.html \title Specifying Item Properties diff --git a/doc/qtcreator/src/qtquick/qtquick-uis.qdoc b/doc/qtcreator/src/qtquick/qtquick-uis.qdoc index 2461f6468b3..c62d44c23d0 100644 --- a/doc/qtcreator/src/qtquick/qtquick-uis.qdoc +++ b/doc/qtcreator/src/qtquick/qtquick-uis.qdoc @@ -77,7 +77,7 @@ QML types. You can import visual assets in various formats, such as PNG, JPG, and SVG for use in the components. - \li \l {Managing Item Hierarchy} + \li \l {Navigator} You can manage the items in the current QML file and their relationships in the \uicontrol Navigator view. diff --git a/doc/qtdesignstudio/src/qtdesignstudio-toc.qdoc b/doc/qtdesignstudio/src/qtdesignstudio-toc.qdoc index 6b23964d095..22d92ea81d4 100644 --- a/doc/qtdesignstudio/src/qtdesignstudio-toc.qdoc +++ b/doc/qtdesignstudio/src/qtdesignstudio-toc.qdoc @@ -60,6 +60,7 @@ \list \li \l{Form Editor} \li \l{Library} + \li \l{Navigator} \endlist \li \l{Managing Workspaces} \li \l{Managing Sessions} @@ -98,7 +99,6 @@ \li \l{Creating Buttons} \li \l{Creating Scalable Buttons and Borders} \endlist - \li \l{Managing Item Hierarchy} \li \l{Specifying Item Properties} \li \l{Positioning Items} \li \l{Using Custom Fonts} diff --git a/doc/qtdesignstudio/src/qtdesignstudio.qdoc b/doc/qtdesignstudio/src/qtdesignstudio.qdoc index 06d140b5b1e..57fdc6d1dec 100644 --- a/doc/qtdesignstudio/src/qtdesignstudio.qdoc +++ b/doc/qtdesignstudio/src/qtdesignstudio.qdoc @@ -63,7 +63,6 @@ \list \li \l{Designing Application Flows} \li \l{Creating Components} - \li \l{Managing Item Hierarchy} \li \l{Specifying Item Properties} \li \l{Positioning Items} \li \l{Annotating Designs} diff --git a/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-design-mode.qdoc b/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-design-mode.qdoc index 3890327894f..3f443c2eaa2 100644 --- a/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-design-mode.qdoc +++ b/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-design-mode.qdoc @@ -59,7 +59,7 @@ Views}. \li \uicontrol {Navigator} (4) displays the items in the current QML file as a tree structure. For more information, see - \l {Managing Item Hierarchy}. + \l {Navigator}. \li \uicontrol {Properties} (5) organizes the properties of the selected item. You can change the properties also in \uicontrol {Text Editor}. For more information, see