Doc: Update Simulating Conditions

Fixes: QDS-11505
Change-Id: I91e793529d0d447ae82e02aedc6c32565f243df0
Reviewed-by: Johanna Vanhatapio <johanna.vanhatapio@qt.io>

9 files changed, 12 insertions, 12 deletions

diff --git a/doc/qtdesignstudio/images/studio-flow-decision-preview.png b/doc/qtdesignstudio/images/studio-flow-decision-preview.png
deleted file mode 100644
index c0c367d143..0000000000
--- a/doc/qtdesignstudio/images/studio-flow-decision-preview.png
+++ /dev/null
diff --git a/doc/qtdesignstudio/images/studio-flow-decision-preview.webp b/doc/qtdesignstudio/images/studio-flow-decision-preview.webp
new file mode 100644
index 0000000000..e3ac10b0b2
--- /dev/null
+++ b/doc/qtdesignstudio/images/studio-flow-decision-preview.webp
diff --git a/doc/qtdesignstudio/images/studio-flow-decision-properties.png b/doc/qtdesignstudio/images/studio-flow-decision-properties.png
deleted file mode 100644
index dbaba5338f..0000000000
--- a/doc/qtdesignstudio/images/studio-flow-decision-properties.png
+++ /dev/null
diff --git a/doc/qtdesignstudio/images/studio-flow-decision-properties.webp b/doc/qtdesignstudio/images/studio-flow-decision-properties.webp
new file mode 100644
index 0000000000..4029d5cd19
--- /dev/null
+++ b/doc/qtdesignstudio/images/studio-flow-decision-properties.webp
diff --git a/doc/qtdesignstudio/images/studio-flow-decision.png b/doc/qtdesignstudio/images/studio-flow-decision.png
deleted file mode 100644
index 0880a14559..0000000000
--- a/doc/qtdesignstudio/images/studio-flow-decision.png
+++ /dev/null
diff --git a/doc/qtdesignstudio/images/studio-flow-decision.webp b/doc/qtdesignstudio/images/studio-flow-decision.webp
new file mode 100644
index 0000000000..df7b18ab93
--- /dev/null
+++ b/doc/qtdesignstudio/images/studio-flow-decision.webp
diff --git a/doc/qtdesignstudio/images/studio-flow-transition-properties-question.png b/doc/qtdesignstudio/images/studio-flow-transition-properties-question.png
deleted file mode 100644
index 80cb7ad1a9..0000000000
--- a/doc/qtdesignstudio/images/studio-flow-transition-properties-question.png
+++ /dev/null
diff --git a/doc/qtdesignstudio/images/studio-flow-transition-properties-question.webp b/doc/qtdesignstudio/images/studio-flow-transition-properties-question.webp
new file mode 100644
index 0000000000..26250a17c1
--- /dev/null
+++ b/doc/qtdesignstudio/images/studio-flow-transition-properties-question.webp
diff --git a/doc/qtdesignstudio/src/qtdesignstudio-app-flows.qdoc b/doc/qtdesignstudio/src/qtdesignstudio-app-flows.qdoc
index 36d44d3b50..f93759cf0d 100644
--- a/doc/qtdesignstudio/src/qtdesignstudio-app-flows.qdoc
+++ b/doc/qtdesignstudio/src/qtdesignstudio-app-flows.qdoc
@@ -530,17 +530,17 @@
     controls, backend, or sensor data that will be required for the production
     version.
 
-    \image studio-flow-decision.png "Flow Decision in the 2D view"
+    \image studio-flow-decision.webp "Flow Decision in the 2D view"
 
     To simulate conditions:
 
     \list 1
         \li Drag a \uicontrol {Flow Decision} component from
-            \uicontrol Components \uicontrol {Flow View} to a
+            \uicontrol Components > \uicontrol {Flow View} to a
             \l{Adding Flow Views}{flow view} in the \l Navigator or \l {2D} view.
         \li Select the flow item where you want the application to start in
-            the \uicontrol Navigator or \uicontrol {2D} view, and then select
-            \uicontrol {Flow} > \uicontrol {Set Flow Start} in the context menu.
+            the \uicontrol Navigator or \uicontrol {2D} view. Then right-click the component
+            to open the context menu, and select \uicontrol Flow > \uicontrol {Set Flow Start}.
         \li Create an \l{Adding Action Areas and Transitions}{action area} for
             the component that will trigger the condition and connect it to the
             flow decision.
@@ -551,10 +551,10 @@
             title for the selection dialog that opens when the condition is
             triggered.
         \li Select a transition line in the \uicontrol Navigator or
-            \uicontrol {2D} view and add a descriptive text in the
+            \uicontrol {2D} view, and add a descriptive text in the
             \uicontrol {Question} field in \uicontrol Properties to represent
             a choice in the selection dialog.
-            \image studio-flow-transition-properties-question.png "Flow Transition properties"
+            \image studio-flow-transition-properties-question.webp "Flow Transition properties"
         \li Press \key {Alt+P} to preview the UI.
         \li Select action areas in the preview, double-click events in the
             event list, or use the keyboard shortcuts to trigger events.
@@ -563,21 +563,21 @@
     Flow decisions are listed in a dialog where you can select which condition
     is met to see the results.
 
-    \image studio-flow-decision-preview.png "Selection dialog for flow decision"
+    \image studio-flow-decision-preview.webp "Selection dialog for flow decision"
 
     \section1 Flow Decision Properties
 
-    You can specify basic properties for a \uicontrol {Flow Decision} component
+    Specify basic properties for a \uicontrol {Flow Decision} component
     in the \l Type and \l ID fields in the \uicontrol Component section in the
     \uicontrol Properties view. Specify properties for flow decisions in the
     \uicontrol {Flow Decision} section.
 
-    \image studio-flow-decision-properties.png "Flow Decision properties"
+    \image studio-flow-decision-properties.webp "Flow Decision properties"
 
     In the \uicontrol {Dialog title} field, enter a title for the selection
     dialog that opens when the condition is triggered.
 
-    You can specify the following properties to change the appearance of the
+    Specify the following properties to change the appearance of the
     flow decision icon \inlineimage icons/flow-decision-icon.png
     :
 
@@ -587,14 +587,14 @@
             component in the \l {2D} view.
         \li In the \uicontrol {Label position} field, select the corner of
             the flow decision icon to place the label in.
+        \li Use the \l{Picking Colors}{color picker} to set \uicontrol {Outline color} and
+            \uicontrol {Fill color} of the flow decision icon.
         \li In the \uicontrol Size field, specify the size of the flow
             decision icon.
         \li In the \uicontrol Radius field, specify the radius of the flow
             decision icon corners.
     \endlist
 
-    You can use the \l{Picking Colors}{color picker} to set the outline and
-    fill color of the flow decision icon.
 */
 
 /*!