Doc: Update States view docs

- Updated images
- Converted jpg images to png
- Updated instructions

Task-number: QDS-6186
Change-Id: Ibaee1acd11881c49d272e9c41e11b729e3c951ec
Reviewed-by: Leena Miettinen <riitta-leena.miettinen@qt.io>

17 files changed, 12 insertions, 19 deletions

diff --git a/doc/qtdesignstudio/examples/doc/images/loginui1-button.png b/doc/qtdesignstudio/examples/doc/images/loginui1-button.png
index 2f15db64fd..6284072c56 100644
--- a/doc/qtdesignstudio/examples/doc/images/loginui1-button.png
+++ b/doc/qtdesignstudio/examples/doc/images/loginui1-button.png
diff --git a/doc/qtdesignstudio/examples/doc/images/loginui1-entry-field-styled.jpg b/doc/qtdesignstudio/examples/doc/images/loginui1-entry-field-styled.jpg
index ef441b60a6..87f2492005 100644
--- a/doc/qtdesignstudio/examples/doc/images/loginui1-entry-field-styled.jpg
+++ b/doc/qtdesignstudio/examples/doc/images/loginui1-entry-field-styled.jpg
diff --git a/doc/qtdesignstudio/examples/doc/images/loginui3-login-state.jpg b/doc/qtdesignstudio/examples/doc/images/loginui3-login-state.jpg
index ab76d81007..9df56bc1a6 100644
--- a/doc/qtdesignstudio/examples/doc/images/loginui3-login-state.jpg
+++ b/doc/qtdesignstudio/examples/doc/images/loginui3-login-state.jpg
diff --git a/doc/qtdesignstudio/examples/doc/images/loginui3-states.jpg b/doc/qtdesignstudio/examples/doc/images/loginui3-states.jpg
index b7192194ec..9dac6b081a 100644
--- a/doc/qtdesignstudio/examples/doc/images/loginui3-states.jpg
+++ b/doc/qtdesignstudio/examples/doc/images/loginui3-states.jpg
diff --git a/doc/qtdesignstudio/examples/doc/loginui3.qdoc b/doc/qtdesignstudio/examples/doc/loginui3.qdoc
index 9ececf1834..c42d1dcfb9 100644
--- a/doc/qtdesignstudio/examples/doc/loginui3.qdoc
+++ b/doc/qtdesignstudio/examples/doc/loginui3.qdoc
@@ -102,7 +102,8 @@
     components in \uicontrol {Form Editor}, depending on the current page:
 
     \list 1
-        \li In the \l States view, select \uicontrol {Create New State}.
+        \li In the \l States view, select \inlineimage icons/plus.png
+        .
         \li Enter \e login as the state name.
             \image loginui3-login-state.jpg "States view"
         \li Select \e repeatPassword in \uicontrol Navigator to display its
diff --git a/doc/qtdesignstudio/examples/doc/loginui4.qdoc b/doc/qtdesignstudio/examples/doc/loginui4.qdoc
index 6a43e55b00..b58701c02e 100644
--- a/doc/qtdesignstudio/examples/doc/loginui4.qdoc
+++ b/doc/qtdesignstudio/examples/doc/loginui4.qdoc
@@ -267,10 +267,10 @@
     in \uicontrol Timeline:
 
     \list 1
-        \li In \uicontrol States, select \uicontrol {Create New State} twice to
-            add two states called \e login and \e createAccount. You don't
-            need to make any property changes this time because you'll bind the
-            states to property animations.
+        \li In \uicontrol States, select \inlineimage icons/plus.png
+            twice to add two states called \e login and \e createAccount. You
+            don't need to make any property changes this time because you'll
+            bind the states to property animations.
        \li In \uicontrol States, select \inlineimage icons/action-icon.png
             for \e login to open the \uicontrol Actions menu, and then
             select \uicontrol {Set as Default} to determine that the \e login
diff --git a/doc/qtdesignstudio/images/qmldesigner-borderimage-states.png b/doc/qtdesignstudio/images/qmldesigner-borderimage-states.png
index 5d1ebaf1ad..9c0d159c32 100644
--- a/doc/qtdesignstudio/images/qmldesigner-borderimage-states.png
+++ b/doc/qtdesignstudio/images/qmldesigner-borderimage-states.png
diff --git a/doc/qtdesignstudio/images/qmldesigner-borderimage-type.png b/doc/qtdesignstudio/images/qmldesigner-borderimage-type.png
index 840708f202..f0f4519b76 100644
--- a/doc/qtdesignstudio/images/qmldesigner-borderimage-type.png
+++ b/doc/qtdesignstudio/images/qmldesigner-borderimage-type.png
diff --git a/doc/qtdesignstudio/images/qmldesigner-screen-design.png b/doc/qtdesignstudio/images/qmldesigner-screen-design.png
index 79da601126..4ef84082d5 100644
--- a/doc/qtdesignstudio/images/qmldesigner-screen-design.png
+++ b/doc/qtdesignstudio/images/qmldesigner-screen-design.png
diff --git a/doc/qtdesignstudio/images/qmldesigner-states-when-condition.png b/doc/qtdesignstudio/images/qmldesigner-states-when-condition.png
index ddd080c315..f506c3e954 100644
--- a/doc/qtdesignstudio/images/qmldesigner-states-when-condition.png
+++ b/doc/qtdesignstudio/images/qmldesigner-states-when-condition.png
diff --git a/doc/qtdesignstudio/images/qmldesigner-states.png b/doc/qtdesignstudio/images/qmldesigner-states.png
index e73fb441f1..2b6e2794e1 100644
--- a/doc/qtdesignstudio/images/qmldesigner-states.png
+++ b/doc/qtdesignstudio/images/qmldesigner-states.png
diff --git a/doc/qtdesignstudio/images/qmldesigner-transitions.png b/doc/qtdesignstudio/images/qmldesigner-transitions.png
index 005178481e..9c91383878 100644
--- a/doc/qtdesignstudio/images/qmldesigner-transitions.png
+++ b/doc/qtdesignstudio/images/qmldesigner-transitions.png
diff --git a/doc/qtdesignstudio/images/studio-design-mode-states-timeline.png b/doc/qtdesignstudio/images/studio-design-mode-states-timeline.png
index d229e39ead..2579687674 100644
--- a/doc/qtdesignstudio/images/studio-design-mode-states-timeline.png
+++ b/doc/qtdesignstudio/images/studio-design-mode-states-timeline.png
diff --git a/doc/qtdesignstudio/images/studio-dial.png b/doc/qtdesignstudio/images/studio-dial.png
index 79c4237ccb..3d7b75fa89 100644
--- a/doc/qtdesignstudio/images/studio-dial.png
+++ b/doc/qtdesignstudio/images/studio-dial.png
diff --git a/doc/qtdesignstudio/src/components/qtquick-buttons.qdoc b/doc/qtdesignstudio/src/components/qtquick-buttons.qdoc
index 7aacb6a655..2a6b36695d 100644
--- a/doc/qtdesignstudio/src/components/qtquick-buttons.qdoc
+++ b/doc/qtdesignstudio/src/components/qtquick-buttons.qdoc
@@ -234,7 +234,7 @@
     \section1 Using States to Change Component Property Values
 
     \list 1
-        \li In the \l States view, select \uicontrol {Create New State}
+        \li In the \l States view, select \inlineimage icons/plus.png
             twice to create two new states.
             \image qmldesigner-borderimage-states.png "Active and inactive states"
         \li Select \uicontrol State1.
diff --git a/doc/qtdesignstudio/src/views/qtquick-states-view.qdoc b/doc/qtdesignstudio/src/views/qtquick-states-view.qdoc
index 021f4cddaa..d5894641db 100644
--- a/doc/qtdesignstudio/src/views/qtquick-states-view.qdoc
+++ b/doc/qtdesignstudio/src/views/qtquick-states-view.qdoc
@@ -38,19 +38,10 @@
     To open the \uicontrol States view, select \uicontrol View >
     \uicontrol Views > \uicontrol States.
 
-    To collapse or expand the \uicontrol States view, select:
-
-    \list
-        \li Select \uicontrol View > \uicontrol Views >
-            \uicontrol {Toggle States}.
-        \li Press \key {Ctr+Alt+S} on Windows or \key {Cmd+Option+S} on \macOS.
-        \li Right-click the view and select \uicontrol Collapse or
-            \uicontrol Expand.
-    \endlist
-
     Initially, \uicontrol States displays a \e {base state} that shows the
     selected \l{glossary-component}{component} in its initial state. To add
-    states, select \uicontrol {Create New State}.
+    states, select \inlineimage icons/plus.png
+    in the \uicontrol States view.
 
     For more information, watch the following video:
 
diff --git a/doc/qtdesignstudio/src/views/qtquick-states.qdoc b/doc/qtdesignstudio/src/views/qtquick-states.qdoc
index cc3652ab31..13f4f8aa95 100644
--- a/doc/qtdesignstudio/src/views/qtquick-states.qdoc
+++ b/doc/qtdesignstudio/src/views/qtquick-states.qdoc
@@ -36,7 +36,8 @@
     \title Adding States
 
     You can define states for components and component instances in the
-    \l States view by selecting \uicontrol {Create New State}.
+    \l States view by selecting \inlineimage icons/plus.png
+    .
 
     \image qmldesigner-transitions.png "States view"
 
@@ -181,7 +182,7 @@
             \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
+        \li In \uicontrol States, select the \uicontrol + symbol to create
             a new state and give it a name. For example, \c Normal.
         \li In \l Properties (2), deselect the \uicontrol Visibility
             check box or set \uicontrol Opacity to 0 for each component that