Doc: Pull out "Adding States" into a separate topic

To further modularize the Manual.

Change-Id: I9b51ce951b92ff6690780de3d9f08f436169150d
Reviewed-by: Thomas Hartmann <thomas.hartmann@qt.io>

5 files changed, 92 insertions, 67 deletions

diff --git a/doc/src/qtcreator-toc.qdoc b/doc/src/qtcreator-toc.qdoc
index c18c379cdb..0f30047180 100644
--- a/doc/src/qtcreator-toc.qdoc
+++ b/doc/src/qtcreator-toc.qdoc
@@ -96,6 +96,7 @@
                     \li \l{Adding Bindings Between Properties}
                     \li \l{Managing C++ Backend Objects}
                 \endlist
+                \li \l {Adding States}
                 \li \l {Creating Components}
                 \li \l {Creating Buttons}
                 \li \l {Creating Scalable Buttons and Borders}
diff --git a/doc/src/qtquick/qtquick-components.qdoc b/doc/src/qtquick/qtquick-components.qdoc
index 7ddfecf073..31af869be8 100644
--- a/doc/src/qtquick/qtquick-components.qdoc
+++ b/doc/src/qtquick/qtquick-components.qdoc
@@ -32,7 +32,7 @@
 /*!
 
     \contentspage {Qt Creator Manual}
-    \previouspage qmldesigner-connections.html
+    \previouspage quick-states.html
     \page quick-components.html
     \nextpage quick-buttons.html
 
diff --git a/doc/src/qtquick/qtquick-connection-editor-backend.qdoc b/doc/src/qtquick/qtquick-connection-editor-backend.qdoc
index e79b32eec2..5cd7b328f1 100644
--- a/doc/src/qtquick/qtquick-connection-editor-backend.qdoc
+++ b/doc/src/qtquick/qtquick-connection-editor-backend.qdoc
@@ -27,7 +27,7 @@
     \contentspage {Qt Creator Manual}
     \previouspage quick-property-bindings.html
     \page quick-connections-backend.html
-    \nextpage quick-components.html
+    \nextpage quick-states.html
 
     \title Managing C++ Backend Objects
 
diff --git a/doc/src/qtquick/qtquick-designer.qdoc b/doc/src/qtquick/qtquick-designer.qdoc
index 62e66312cc..753f02a538 100644
--- a/doc/src/qtquick/qtquick-designer.qdoc
+++ b/doc/src/qtquick/qtquick-designer.qdoc
@@ -93,7 +93,7 @@
         \li \uicontrol {State} pane (6) displays the different states of the item.
             QML states typically describe user interface configurations, such as
             the UI controls, their properties and behavior and the available
-            actions.
+            actions. For more information, see \l{Adding States}.
 
     \endlist
 
@@ -426,70 +426,6 @@
 
     \image qmldesigner-inline-editing.png
 
-    \section1 Adding States
-
-    User interfaces are designed to present different interface configurations
-    in different scenarios, or to modify their appearances in response to user
-    interaction. Often, there are a set of changes that are made concurrently,
-    such that the interface could be seen to be internally changing from one
-    \e state to another.
-
-    This applies generally to interfaces regardless of their complexity.
-    A photo viewer may initially present images in a grid, and when an image is
-    clicked, change to a detailed state where the individual image is expanded
-    and the interface is changed to present new options for image editing.
-    On the other end of the scale, when a simple button is pressed, it may change
-    to a \e pressed state in which its color and position is modified to give a
-    pressed appearance.
-
-    In QML, any item can change between different states to apply sets of
-    changes that modify the properties of relevant items. Each state can present
-    a different configuration that can, for example:
-
-    \list
-
-        \li Show some UI items and hide others.
-
-        \li Present different available actions to the user.
-
-        \li Start, stop or pause animations.
-
-        \li Execute some script required in the new state.
-
-        \li Change a property value for a particular item.
-
-        \li Show a different view or screen.
-
-    \endlist
-
-    The \uicontrol State pane displays the different \l{State}{states}
-    of the component in the Design mode. The \uicontrol State pane is
-    collapsed by default to save space. Select \uicontrol Expand in the context
-    menu to view the whole pane.
-
-    \image qmldesigner-transitions.png "State pane"
-
-    To add states, click the \inlineimage plus.png
-    button. Then modify the new state in the editor.
-    For example, to change the appearance of a button, you can hide the button
-    image and show another image in its place. Or, to add movement to the screen,
-    you can change the position of an object on the canvas and then add animation
-    to the change between the states.
-
-    To determine when the state should be applied, select
-    \uicontrol {Set when Condition} in the menu and specify a
-    \l [QtQuick]{State::when}{when} property for the state.
-
-    You can preview the states in the \uicontrol State pane and click them to switch
-    between states on the canvas.
-
-    For more information on using states, see \l{Creating Screens}.
-
-    If you add animation to the states, you can run the application to test the
-    animation.
-
-    For more information on adding animation, see \l{Animating Screens}.
-
     \section1 Working with QML Types on Canvas
 
     You design applications on the canvas by placing items on it.
diff --git a/doc/src/qtquick/qtquick-states.qdoc b/doc/src/qtquick/qtquick-states.qdoc
new file mode 100644
index 0000000000..80316aaa4f
--- /dev/null
+++ b/doc/src/qtquick/qtquick-states.qdoc
@@ -0,0 +1,88 @@
+/****************************************************************************
+**
+** Copyright (C) 2018 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the Qt Creator documentation.
+**
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU Free Documentation License Usage
+** Alternatively, this file may be used under the terms of the GNU Free
+** Documentation License version 1.3 as published by the Free Software
+** Foundation and appearing in the file included in the packaging of
+** this file. Please review the following information to ensure
+** the GNU Free Documentation License version 1.3 requirements
+** will be met: https://www.gnu.org/licenses/fdl-1.3.html.
+**
+****************************************************************************/
+
+/*!
+    \contentspage {Qt Creator Manual}
+    \previouspage quick-connections-backend.html
+    \page quick-states.html
+    \nextpage quick-components.html
+
+    \title Adding States
+
+    User interfaces are designed to present different interface configurations
+    in different scenarios, or to modify their appearances in response to user
+    interaction. Often, there are a set of changes that are made concurrently,
+    such that the interface could be seen to be internally changing from one
+    \e state to another.
+
+    This applies generally to interfaces regardless of their complexity. A photo
+    viewer may initially present images in a grid, and when an image is clicked,
+    change to a detailed state where the individual image is expanded and the
+    interface is changed to present new options for image editing. At the other
+    end of the scale, when a button is pressed, it may change to a
+    \e pressed state in which its color and position are modified so that it
+    appears to be pressed down.
+
+    In QML, any item can change between different states to apply sets of
+    changes that modify the properties of relevant items. Each state can
+    present a different configuration that can, for example:
+
+    \list
+        \li Show some UI items and hide others.
+        \li Present different available actions to the user.
+        \li Start, stop or pause animations.
+        \li Execute some script required in the new state.
+        \li Change a property value for a particular item.
+        \li Show a different view or screen.
+    \endlist
+
+    The \uicontrol State pane displays the different \l{State}{states}
+    of the component in the Design mode. The \uicontrol State pane is
+    collapsed by default to save space. Select \uicontrol Expand in
+    the context menu to view the whole pane.
+
+    \image qmldesigner-transitions.png "State pane"
+
+    To add states, click the \inlineimage plus.png
+    button. Then modify the new state in the editor. For example, to change the
+    appearance of a button, you can hide the button image and show another image
+    in its place. Or, to add movement to the screen, you can change the position
+    of an object on the canvas and then add animation to the change between the
+    states.
+
+    To determine when the state should be applied, select
+    \uicontrol {Set when Condition} in the menu and specify a
+    \l [QtQuick]{State::when}{when} property for the state.
+
+    You can preview the states in the \uicontrol State pane and click them to
+    switch between states on the canvas.
+
+    For more information about using states, see \l{Creating Screens}.
+
+    If you add animation to the states, you can run the application to test the
+    animation.
+
+    For more information about adding animation, see \l{Animating Screens}.
+*/