Doc: Fix paths to moved icons on the QDS side

- Copy missing icons from utils to doc/qtdesignstudio/images/icons - Use gray-scale icons for keyframe icons Task-number: QTCREATORBUG-26644 Change-Id: I3905f17317078b489ad3b33470657eb3e1fd48f5 Reviewed-by: <github-actions-qt-creator@cristianadam.eu> Reviewed-by: Thomas Hartmann <thomas.hartmann@qt.io>
2021-12-09 14:38:52 +01:00
parent 9a172e4d4d
commit d420e7f5ee
57 changed files with 87 additions and 88 deletions
@@ -19,7 +19,6 @@ sourcedirs = ../src \
 imagedirs = ../images \
            ../examples/doc/images \
            ../../qtcreator/images \
-            ../../../plugins/qmldesigner/qmlpreviewplugin/images \
            ../../../share/qtcreator/qml/qmlpuppet/mockfiles/images \
            ../../../share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/images \
            ../../../src/libs/qmleditorwidgets/images \
@@ -122,14 +122,14 @@
    \image coffee-machine-timeline.png

    Our viewport contains 200 frames, so we select the
-    \inlineimage plus.png "Plus button"
+    \inlineimage icons/plus.png "Plus button"
    button to add a 1200-frame timeline to the root component.
    We use the default values for all other fields.

    To start recording the transition from the startup screen to the coffee
    selection screen on the timeline, we select \e choosingCoffee in
    \l Navigator. We check that the playhead is at frame 0, and then
-    select the \inlineimage recordfill.png
+    select the \inlineimage icons/recordfill.png
    (\uicontrol {Auto Key (K)}) button (or press \key k).

    At frame 0, we set the X coordinate to 0 in \l Properties >
@@ -55,14 +55,14 @@
    the screens in \e {Screen01.ui.qml}.

    Our viewport contains 1000 frames, so we select the
-    \inlineimage plus.png "Plus button"
+    \inlineimage icons/plus.png "Plus button"
    button to add a 5000-frame timeline to the root component.
    We use the default values for all other fields.

    To start recording the transitions between the Standard screen and the
    Trip and Navigator screens on the timeline, we select \e screenCanvas in
    the \l Navigator view. We check that the playhead is at frame 0, and then
-    select the \inlineimage recordfill.png
+    select the \inlineimage icons/recordfill.png
    (\uicontrol {Auto Key (K)}) button (or press \key k).

    \image ebikedesign-timeline.png "Timeline view"
@@ -160,7 +160,7 @@
    To add the assets to \l Library:
    \list 1
        \li Select \uicontrol Library > \uicontrol Assets
-            > \inlineimage plus.png
+            > \inlineimage icons/plus.png
            .
        \li Select the asset files, and then select \uicontrol Open.
        \li Select the location where the files will be saved in the
@@ -281,7 +281,7 @@
    The \l {Images}{Image} component is used for adding images to the UI in several
    supported formats, including bitmap formats such as PNG and JPEG and vector
    graphics formats such as SVG. To add an image to \uicontrol Library, select
-    \uicontrol Assets > \inlineimage plus.png
+    \uicontrol Assets > \inlineimage icons/plus.png
    , and then select the image file.

    If you need to display animated images, use the \l {Animated Image}
@@ -177,7 +177,7 @@
        \li Select \uicontrol View > \uicontrol Views >
            \uicontrol {Connection View} to open the \uicontrol Connections tab.
        \li Select \e createAccount in \uicontrol Navigator.
-        \li In the \uicontrol Connections tab, select the \inlineimage plus.png
+        \li In the \uicontrol Connections tab, select the \inlineimage icons/plus.png
            button to add the action that the \c onClicked signal handler of
            \e createAccount should apply.
        \li Double-click the value \uicontrol Action column and select
@@ -85,7 +85,7 @@
        \li Double-click \e Screen01.ui.qml in \l Projects to open it
            in \l {Form Editor}.
        \li In the \l States view, select \e login, and then select
-            \inlineimage close.png
+            \inlineimage icons/close.png
            to remove the state. Repeat for the \e createAccount state.
        \li Select \e username in \l Navigator, and then select
            \inlineimage arrowleft.png
@@ -143,7 +143,7 @@
    \list 1
            \li Select \uicontrol View > \uicontrol Views >
            \uicontrol Timeline to open the \l Timeline view.
-        \li In \uicontrol Timeline, select \inlineimage plus.png
+        \li In \uicontrol Timeline, select \inlineimage icons/plus.png
            to add a 1000-frame timeline and settings for running the animation.
            \image loginui4-timeline-settings.png
        \li In the \uicontrol {Animation ID} field, enter
@@ -172,7 +172,7 @@
            opacity property of the component.
            \image loginui4-keyframe-opacity.png "Inserting keyframe for opacity property"
        \li In \uicontrol Timeline, check that the playhead is in
-            frame 0, and select the \inlineimage recordfill.png
+            frame 0, and select the \inlineimage icons/recordfill.png
            (\uicontrol {Per Property Recording}) button for the
            \uicontrol opacity property of \e repeatPassword to start
            recording property changes.
@@ -183,7 +183,7 @@
            to show the button.

            To fine-tune the value of a keyframe, you can also right-click the
-            keyframe marker \inlineimage keyframe_linear_inactive.png
+            keyframe marker \inlineimage icons/keyframe_linear_active.png
            , and select \uicontrol {Edit Keyframe}.
        \li Select the record button again to stop recording property changes.
            If you forget this, all the following changes will be recorded, and
@@ -236,7 +236,7 @@
    margin animation that will make the transition seem smoother:

    \list 1
-        \li Click the keyframe marker \inlineimage keyframe_linear_inactive.png
+        \li Click the keyframe marker \inlineimage icons/keyframe_linear_active.png
            for the \e anchors.topMargin property at frame 1000 on the
            timeline to select it.
            \image loginui4-easing-curve-top-anchor-margin.png "Top anchor margin keyframe marker"
@@ -249,8 +249,8 @@
    \endlist

    When you attach easing curves to keyframes, the shape of the keyframe
-    marker changes from \inlineimage keyframe_linear_inactive.png
-    to \inlineimage keyframe_manualbezier_inactive.png
+    marker changes from \inlineimage icons/keyframe_linear_active.png
+    to \inlineimage icons/keyframe_manualbezier_active.png
    .

    Your timeline should now look something like this:
@@ -90,14 +90,14 @@
    \section2 Adding Color Animation

    First, we add a color animation to the \e root component in the \e Root.qml
-    file. We select the \inlineimage plus.png
+    file. We select the \inlineimage icons/plus.png
    button to add a 100-frame timeline to root. You can use the default
    values for all other fields.

    \image progressbar-timeline-settings.png "Timeline settings"

    To start recording a color animation on the timeline, we check that the
-    playhead is at frame 0 and then select the \inlineimage recordfill.png
+    playhead is at frame 0 and then select the \inlineimage icons/recordfill.png
    (\uicontrol {Auto Key (K)}) button (or press \key k).

    \image progressbar-timeline.png "Color animation timeline"
@@ -194,7 +194,7 @@
    use a column layout to lay out the progress bar instances.

    We can now add timelines for each progress bar instance, with different
-    settings. We select the \inlineimage plus.png
+    settings. We select the \inlineimage icons/plus.png
    button to add a 4000-frame timeline to the first progress bar instance
    (\e root). We select the \uicontrol Continuous check box so that the
    animation will loop.
@@ -236,8 +236,8 @@
    \image studio-easing-curve-editor.png "Easing Curve Editor"

    When we apply easing curves to animations, the shape of the keyframe
-    marker changes from \inlineimage keyframe_linear_inactive.png
-    to \inlineimage keyframe_manualbezier_inactive.png
+    marker changes from \inlineimage icons/keyframe_linear_active.png
+    to \inlineimage icons/keyframe_manualbezier_active.png
    .

    For more information, see \l{Editing Easing Curves}.
@@ -120,7 +120,7 @@
    In addition, we set the \uicontrol Checked property to \c true for the
    first button instance on the menu bar to make it appear selected.

-    We can now select the \inlineimage run_small.png "Run button"
+    We can now select the \inlineimage icons/run_small.png "Run button"
    (\uicontrol Run) button to run the application and test our menu bar.

    \section1 Creating a Side Menu
@@ -153,7 +153,7 @@

    \image sidemenu-states.png "Side menu states"

-    We then select the \inlineimage plus.png
+    We then select the \inlineimage icons/plus.png
    button in the \l Timeline view to add animation
    for transitions to the \e open and \e close states:

@@ -167,7 +167,7 @@
    We want to change the position of the outline and background images. To
    start recording the transition from the closed state to the open state,
    we select \e imageOutline in \uicontrol Navigator. We check that the
-    playhead is at frame 0, and then select the \inlineimage recordfill.png
+    playhead is at frame 0, and then select the \inlineimage icons/recordfill.png
    (\uicontrol {Auto Key (K)}) button (or press \key k).

    At frame 0, we set the X coordinate to -423 in \uicontrol Properties >
@@ -40,7 +40,7 @@
    text into \l{Text Edit} or \l{Text Input} components. For more information
    about using it, see \l{User Guide}{Virtual Keyboard: User Guide}.

-    To test the virtual keyboard, you need to select the \inlineimage run_small.png
+    To test the virtual keyboard, you need to select the \inlineimage icons/run_small.png
    (\uicontrol Run) button to run the example on the desktop or a device.
    The keyboard is not available during preview.

@@ -134,7 +134,7 @@

    We can now add a timeline animation to make the arc move around the button
    when the button is pressed. In the \uicontrol Timeline view, we select the
-    \inlineimage plus.png
+    \inlineimage icons/plus.png
    button to add a 1000-frame timeline to the \e root of the component.
    We'll use the default values for all other fields.

@@ -150,7 +150,7 @@
    \image washingmachineui-insert-keyframe.png "Inserting keyframe for Rotation property"

    To start recording a rotation animation on the timeline, we check that the
-    playhead is at frame 0 and then select the \inlineimage recordfill.png
+    playhead is at frame 0 and then select the \inlineimage icons/recordfill.png
    (\uicontrol {Auto Key (K)}) button (or press \key k).

    First, we set the rotation at frame 0 to -90 in \uicontrol Properties >
@@ -214,7 +214,7 @@

    Then, we select the mouse area for the start button, \e startMA,
    in \uicontrol Navigator. In \l {Connection View} > \uicontrol Connections,
-    we select the \inlineimage plus.png
+    we select the \inlineimage icons/plus.png
    (\uicontrol Add) button to connect the \c onClicked() signal handler
    of the button to the \c startClicked() signal.

@@ -176,7 +176,7 @@

    \list 1
        \li Click \uicontrol {Design} to edit the UI file in \l {Form Editor}.
-        \li Select \l Library > \uicontrol Assets > \inlineimage plus.png
+        \li Select \l Library > \uicontrol Assets > \inlineimage icons/plus.png
            to copy the image files you want to use to the project folder.
        \li In \l Navigator, select the root component and set the
            width (\uicontrol W) and height (\uicontrol H) of the button in the
@@ -37,7 +37,7 @@
    first add them to \l Library:
    \list 1
        \li Select \uicontrol Library > \uicontrol Assets
-            > \inlineimage plus.png
+            > \inlineimage icons/plus.png
            .
        \li Select the image file, and then select \uicontrol Open.
        \li Select the location where the image will be saved in the
@@ -117,7 +117,7 @@

    For convenience, you can click the \inlineimage icons/anchor-fill.png
    (\uicontrol {Fill to Parent}) toolbar button to apply fill anchors to a
-    component and the \inlineimage qtcreator-anchors-reset-icon.png
+    component and the \inlineimage icons/qtcreator-anchors-reset-icon.png
    (\uicontrol {Reset Anchors}) button to reset the anchors to their saved
    state.

@@ -484,10 +484,10 @@
    \image qtquick-designer-stacked-view.png

    To add components to a \uicontrol {Stack Layout}, select the
-    \inlineimage plus.png
+    \inlineimage icons/plus.png
    button next to the component name in \l {Form Editor}.
-    To move between components, select the \inlineimage prev.png
-    (\uicontrol Previous) and \inlineimage next.png
+    To move between components, select the \inlineimage icons/prev.png
+    (\uicontrol Previous) and \inlineimage icons/next.png
    (\uicontrol Next) buttons.

    To add a tab bar to a stack layout, right-click on the
@@ -31,7 +31,7 @@
    \title Preset Components

    To use preset components, add the modules that contain them to your project
-    by selecting \l Library > \uicontrol Components > \inlineimage plus.png
+    by selecting \l Library > \uicontrol Components > \inlineimage icons/plus.png
    . For more information, see \l{Adding and Removing Modules}. You can then
    create instances of the components by dragging-and-dropping them from
    \uicontrol Library to \l {Form Editor}, \l {3D Editor}, or \l Navigator.
@@ -123,7 +123,7 @@

    \list 1
        \li Select \uicontrol Library > \l Assets
-            > \inlineimage plus.png
+            > \inlineimage icons/plus.png
            .
        \li Select the font file, and then select \uicontrol Open.
        \li Select the location where the file will be saved in the
@@ -77,10 +77,10 @@
        \li Select \uicontrol OK.
    \endlist

-    To add more comments about the component, select the \inlineimage plus.png
+    To add more comments about the component, select the \inlineimage icons/plus.png
    (\uicontrol {Add Comment}) button.

-    To remove the active comment, select the \inlineimage minus.png
+    To remove the active comment, select the \inlineimage icons/minus.png
    (\uicontrol {Remove Comment}) button. To remove the annotation, right-click
    the annotation icon, and then select \uicontrol {Remove Annotation}.

@@ -46,7 +46,7 @@

    \list 1
        \li Select \uicontrol Library > \l Assets
-         > \inlineimage plus.png
+         > \inlineimage icons/plus.png
         .
        \li Browse to the folder that contains the font files and select them,
            and then select \uicontrol Open.
@@ -510,7 +510,7 @@
        \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 In the \uicontrol {Event List} dialog, select \inlineimage plus.png
+        \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"
        \li In the \uicontrol {Event ID} field, enter an identifier for the
@@ -36,7 +36,7 @@
    To import an asset, drag-and-drop the external file containing the asset from,
    for example, File Explorer on Windows, to \uicontrol {Form Editor},
    \uicontrol Navigator, or \uicontrol {Text Editor}. Alternatively, select
-    \l Library > \uicontrol Assets > \inlineimage plus.png
+    \l Library > \uicontrol Assets > \inlineimage icons/plus.png
    and follow the instructions in the \uicontrol {Asset Import} dialog. You can
    also multiselect several external asset files to drag-and-drop them to
    \QDS simultaneously.
@@ -76,7 +76,7 @@
            create an empty project.
        \li In \uicontrol Projects, double-click \e Screen01.ui.qml to move to
            the Design mode.
-        \li Select \l Library > \uicontrol Assets > \inlineimage plus.png
+        \li Select \l Library > \uicontrol Assets > \inlineimage icons/plus.png
            .
        \li Select the folder where you exported the assets.
        \li Select \uicontrol {Exported Assets (*.metadata)} in the dropdown
@@ -121,7 +121,7 @@

    After importing the metadata files, wait a few moments to allow all
    imported assets to appear in your project files before selecting your
-    metadata filename from \uicontrol Assets > \inlineimage plus.png
+    metadata filename from \uicontrol Assets > \inlineimage icons/plus.png
    .

    If asset importer conflicts, warnings, and errors are displayed in the
@@ -169,7 +169,7 @@
    \endlist

    To use JavaScript and image files in the UI, select \uicontrol Library >
-    \uicontrol Assets > \inlineimage plus.png
+    \uicontrol Assets > \inlineimage icons/plus.png
    .

    \section1 Adding Files to Projects
@@ -146,7 +146,7 @@

    To integrate the Simulink model into \QDS, you first need to add the
    Simulink connector module to your project. In the \l Library view, select
-    \uicontrol Components > \inlineimage plus.png
+    \uicontrol Components > \inlineimage icons/plus.png
    > \uicontrol SimulinkConnector. \QDS is now ready to communicate with the
    Simulink model.

@@ -156,7 +156,7 @@
    \uicontrol SimulinkConnector item in \l Navigator and set the IP address
    and/or port in the \l Properties view. If you cannot see
    \uicontrol SimulinkConnector in \uicontrol Navigator, you need to click
-    \inlineimage filtericon.png
+    \inlineimage icons/filtericon.png
    (\uicontrol {Filter Tree}) and unselect \uicontrol {Show only visible items}.

    To communicate with a specific model in Simulink, you need to create
@@ -166,7 +166,7 @@

    \section2 Importing Assets
    \list 1
-    \li Select \uicontrol Library > \uicontrol Assets > \inlineimage plus.png
+    \li Select \uicontrol Library > \uicontrol Assets > \inlineimage icons/plus.png
        .
        \image exporting-from-qt3ds/09-add-new-assets.png

@@ -155,7 +155,7 @@

            The \uicontrol Passes property contains a list of render passes
            implemented by the effect. You can add more entry fields to the list
-            by selecting \inlineimage plus.png
+            by selecting \inlineimage icons/plus.png
            . For more information, see \l {Custom Effects and Materials}.

    \row
@@ -44,7 +44,7 @@
    \l{Lights}{light}, \l{3D Models}{model}, and
    \l {Materials and Shaders}{materials}. If your scene did not contain
    them, you can add the corresponding \l {3D Components}{Qt Quick 3D}
-    components from \l Library > \uicontrol Components > \inlineimage plus.png
+    components from \l Library > \uicontrol Components > \inlineimage icons/plus.png
    > \uicontrol {Qt Quick 3D} > \uicontrol {Qt Quick 3D}.

    You can use the \l{Summary of the 3D Editor Toolbar Buttons}{toolbar buttons}
@@ -71,7 +71,7 @@
    grid.

    To refresh the contents of \uicontrol {3D Editor}, press \key P or
-    select the \inlineimage reset.png
+    select the \inlineimage icons/reset.png
    (\uicontrol {Reset View}) button.

    \image studio-3d-editor.png "3D Editor"
@@ -297,7 +297,7 @@
        \li \key G
        \li
    \row
-        \li \inlineimage reset.png
+        \li \inlineimage icons/reset.png
        \li Reset View
        \li \key R
        \li
@@ -66,7 +66,7 @@

    \list 1
        \li In the \l{Design Views}{Design mode}, select \l Library >
-            \uicontrol Assets > \inlineimage plus.png
+            \uicontrol Assets > \inlineimage icons/plus.png
            .
        \li Select \uicontrol {3D Assets} in the dropdown menu to filter 3D
            graphics files.
@@ -119,7 +119,7 @@
                \uicontrol Instances, select each \uicontrol {Instance List Entry}
                you wish to include in the \uicontrol {Instance List} by using
                the dropdown menu. You can add more fields for the property by
-                clicking the \inlineimage plus.png
+                clicking the \inlineimage icons/plus.png
                icon.
            \li To define an \uicontrol {Instance List Entry}, select it in
                \uicontrol Navigator, and specify its properties in
@@ -227,6 +227,6 @@
    You can apply the same material to another component as well. Again,
    delete the default material first. You should then select the component and
    go to the \uicontrol Properties view. Find the \uicontrol Materials property,
-    select the \inlineimage plus.png
+    select the \inlineimage icons/plus.png
    icon, and choose the new material in the dropdown menu.
 */
@@ -54,7 +54,7 @@
    \l Properties view. You can apply the same material to another component as
    well. Again, delete the default material first. You should then select the
    component and go to the \uicontrol Properties view. Find the
-    \uicontrol Materials property, select the \inlineimage plus.png
+    \uicontrol Materials property, select the \inlineimage icons/plus.png
    icon, and choose the new material in the dropdown menu.

    Each material has its own set of properties that can be used to further
@@ -53,7 +53,7 @@
    \section1 Model Properties

    You can change the model type in \uicontrol Properties > \uicontrol Model
-    > \uicontrol Source field. Select the \inlineimage plus.png
+    > \uicontrol Source field. Select the \inlineimage icons/plus.png
    button to add custom model types to the list.

    \image studio-qtquick-3d-model.png "Model properties"
@@ -69,7 +69,7 @@

    A model can consist of several sub-meshes, each of which can have its own
    material. Select the material from the list in the \uicontrol {Materials}
-    field. Select the \inlineimage plus.png
+    field. Select the \inlineimage icons/plus.png
    button to add materials to the list. For more information about materials,
    see \l {Materials and Shaders}.

@@ -86,7 +86,7 @@
    To add a particle system that emits sprite particles:

    \list 1
-        \li Select \uicontrol Library > \uicontrol Assets > \inlineimage plus.png
+        \li Select \uicontrol Library > \uicontrol Assets > \inlineimage icons/plus.png
            to add your sprites, 3D models, textures, and other graphical
            \l{Assets}{assets} to the project.
        \li Drag-and-drop an instance of the \uicontrol {Particle System}
@@ -1016,7 +1016,7 @@
    \uicontrol System.

    To only affect some of the particles in the particle system, select
-    them in \uicontrol Particles. Select \inlineimage plus.png
+    them in \uicontrol Particles. Select \inlineimage icons/plus.png
    to add logical particles to the list.

    Deselect \uicontrol Enabled to turn the affector off. Usually, this
@@ -54,7 +54,7 @@
    \list 1
        \li Select \uicontrol View > \uicontrol Views >
             \l {Connection View} > \uicontrol {Bindings}.
-        \li Select the \inlineimage plus.png
+        \li Select the \inlineimage icons/plus.png
            (\uicontrol Add) button to add a binding for the currently selected
            component. The component ID is displayed in the \uicontrol Item
            column.
@@ -65,7 +65,7 @@
    \list 1
        \li Select \uicontrol View > \uicontrol Views >
            \uicontrol {Connection View} > \uicontrol {Properties}.
-        \li Select the \inlineimage plus.png
+        \li Select the \inlineimage icons/plus.png
            (\uicontrol Add) button to add a dynamic property for the currently
            selected component. The component ID is displayed in the \uicontrol Item
            column.
@@ -70,7 +70,7 @@
    \list 1
        \li Select \uicontrol View > \uicontrol Views >
            \l {Connection View} > \uicontrol {Connections}.
-        \li Select the \inlineimage plus.png
+        \li Select the \inlineimage icons/plus.png
            (\uicontrol Add) button to add a connection.
        \li Double-click the value in the \uicontrol Target column to add the
            component to connect to a signal.
@@ -148,19 +148,19 @@
        \li Keyboard Shortcut
        \li Read More
    \row
-        \li \inlineimage prev.png
+        \li \inlineimage icons/prev.png
        \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 \inlineimage icons/next.png
        \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 \inlineimage icons/unlocked.png
        \li File is writable: the currently open file can be modified and saved.
        \li
        \li \l{Open Documents}
@@ -178,7 +178,7 @@
        \li
        \li \l{Open Documents}
    \row
-        \li \inlineimage close.png
+        \li \inlineimage icons/close.png
        \li \uicontrol {Close Document}: closes the current file.
        \li \key Ctrl+W (\key Cmd+W on \macos)
        \li
@@ -226,7 +226,7 @@
        \li \key Shift+F
        \li \l{Setting Anchors and Margins}
    \row
-        \li \inlineimage qtcreator-anchors-reset-icon.png
+        \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}
@@ -102,7 +102,7 @@

    When you attach easing curves to keyframes, the shape of the
    \l{keyframe_marker}{keyframe marker} on a keyframe track in
-    \l Timeline changes from \inlineimage keyframe_linear_inactive.png
+    \l Timeline changes from \inlineimage icons/keyframe_linear_active.png
    to a marker that describes the type of the selected easing curve.

    \section1 Attaching Easing Curves to Transitions
@@ -72,7 +72,7 @@
            align them.
        \li \l{Snapping to Parent and Sibling Components}
    \row
-        \li \inlineimage boundingrect.png
+        \li \inlineimage icons/boundingrect.png
        \li Hides and shows component instance boundaries.
        \li \l{Hiding Component Boundaries}
    \row
@@ -108,7 +108,7 @@
        \li Zooms to fit the current selection.
        \li \l{Zooming}
    \row
-        \li \inlineimage reset.png
+        \li \inlineimage icons/reset.png
        \li Refreshes the contents of \uicontrol {Form Editor}.
        \li \l{Refreshing Form Editor Contents}
    \endtable
@@ -199,7 +199,7 @@
    \section1 Hiding Component Boundaries

    \uicontrol {Form Editor} displays the boundaries of component instances.
-    To hide them, select the \inlineimage boundingrect.png
+    To hide them, select the \inlineimage icons/boundingrect.png
    button.

    \section1 Previewing Component Size
@@ -254,7 +254,7 @@
    \uicontrol {Form Editor}.

    To refresh the contents of \uicontrol {Form Editor}, press \key R or
-    select the \inlineimage reset.png
+    select the \inlineimage icons/reset.png
    (\uicontrol {Reset View}) button.

    \include qtquick-component-context-menu.qdocinc context-menu
@@ -98,7 +98,7 @@
    contains basic components and UI controls, while a 3D application project
    contains additional 3D components.

-    To view the list of available modules, select \inlineimage plus.png
+    To view the list of available modules, select \inlineimage icons/plus.png
    . Most commonly used modules are placed at the top of the list in
    alphabetical order. You can search for components and modules by entering
    search criteria in the \uicontrol Search field.
@@ -120,7 +120,7 @@

    \uicontrol Library > \uicontrol {Assets} displays the images and other files
    that you add to the project folder by dragging-and-dropping external asset
-    files to \QDS or by selecting \inlineimage plus.png
+    files to \QDS or by selecting \inlineimage icons/plus.png
    . For more information about importing assets to \QDS, see
    \l {Importing 2D Assets} and \l {Importing 3D Assets}.

@@ -86,7 +86,7 @@
        \li Moves the component up within its parent.
        \li \l{Arranging Components}
    \row
-        \li \inlineimage filtericon.png
+        \li \inlineimage icons/filtericon.png
        \li Shows and hides invisible components in \uicontrol Navigator.
        \li \l{Showing and Hiding Components}
    \row
@@ -122,7 +122,7 @@
    parent component.

    To hide invisible components in \uicontrol Navigator, click
-    \inlineimage filtericon.png
+    \inlineimage icons/filtericon.png
    (\uicontrol {Filter Tree}) and select
    \uicontrol {Show Only Visible Components}.

@@ -164,7 +164,7 @@
    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
+    \inlineimage icons/filtericon.png
    (\uicontrol {Filter Tree}), and select \uicontrol {Reverse Component Order}.

    To move a component to the top or bottom of the tree within its parent,
@@ -178,7 +178,7 @@
    \list 1
        \li In the base state, add all components you will need in the
            application (1). While you work on one view, you can click the
-            \inlineimage eye_open.png
+            \inlineimage icons/eye_open.png
            icon in \l Navigator to hide components on the canvas that are
            not part of a view.
        \li In \uicontrol States, select \uicontrol {Create New State} to create
@@ -37,7 +37,7 @@

    \image studio-timeline-empty.png "Empty Timeline view"

-    Select the \inlineimage plus.png
+    Select the \inlineimage icons/plus.png
    (\uicontrol {Add Timeline}) button to \l{Creating Timelines}
    {create a timeline} and specify settings for it in the
    \uicontrol {Timeline Settings} dialog.
@@ -225,13 +225,13 @@
            gray, and when a keyframe itself is selected, its marker turns
            brown:
            \list
-                \li \inlineimage keyframe_linear_inactive.png
+                \li \inlineimage icons/keyframe_linear_active.png
                    - linear easing curve
-                \li \inlineimage keyframe_manualbezier_inactive.png
+                \li \inlineimage icons/keyframe_manualbezier_active.png
                    - manually set Bezier curve
-                \li \inlineimage keyframe_autobezier_inactive.png
+                \li \inlineimage icons/keyframe_autobezier_active.png
                    - automatically set Bezier curve
-                \li \inlineimage keyframe_lineartobezier_inactive.png
+                \li \inlineimage icons/keyframe_lineartobezier_active.png
                    - linear-to-Bezier curve
            \endlist
        \li \l {Editing Easing Curves}
@@ -46,7 +46,7 @@
    To create a timeline to animate a UI component:

    \list 1
-        \li In the \l Timeline view, select the \inlineimage plus.png
+        \li In the \l Timeline view, select the \inlineimage icons/plus.png
            (\uicontrol {Add Timeline}) button to specify settings
            for the timeline and running the animation
            in the \uicontrol {Timeline Settings} dialog.
@@ -82,12 +82,12 @@
        \li Select \uicontrol Close to close the dialog and save the settings.
    \endlist

-    To create additional timelines, select the \inlineimage plus.png
+    To create additional timelines, select the \inlineimage icons/plus.png
    (\uicontrol {Add Timeline}) button next to the
    \uicontrol {Timeline Settings} tab.

    To specify settings for running timeline animations, select the
-    \inlineimage plus.png
+    \inlineimage icons/plus.png
    (\uicontrol {Add Animation}) button next to the
    \uicontrol {Animation Settings} tab. For example, you could create
    settings for running a part of the timeline animation between specified
@@ -101,7 +101,7 @@
        \li Select \uicontrol View > \uicontrol Views >
            \uicontrol {Transition Editor}.
            \image qmldesigner-transition-editor-startup.png "Empty Transition Editor"
-        \li Select the \inlineimage plus.png
+        \li Select the \inlineimage icons/plus.png
            (\uicontrol {Add Transition}) button to add a transition. This
            works only if you have added at least one state and modified at
            least one property in it.
@@ -125,7 +125,7 @@
    To add transitions:

    \list 1
-        \li Select the \inlineimage plus.png
+        \li Select the \inlineimage icons/plus.png
            (\uicontrol {Add Transition}) button.
        \li In the \uicontrol {Transition ID} field, enter an ID for the
            transition.
@@ -133,7 +133,7 @@
        \li In the \uicontrol To field, select the state to transition to.
    \endlist

-    To remove the current transition, select the \inlineimage minus.png
+    To remove the current transition, select the \inlineimage icons/minus.png
    (\uicontrol {Remove Transition}) button.

    \if defined(qtcreator)