Doc: update screenshots according to new guidelines

Update text to fit the new images.

Change-Id: I7b3edfc5208c929919ef969986e6945e523c5a22
Reviewed-by: Erik Verbruggen <erik.verbruggen@nokia.com>
Reviewed-by: Virva Auvinen <virva.auvinen@nokia.com>

1 files changed, 50 insertions, 40 deletions

diff --git a/doc/src/howto/creator-ui.qdoc b/doc/src/howto/creator-ui.qdoc
index c9fbc84af1b..cf5e5fcb42e 100644
--- a/doc/src/howto/creator-ui.qdoc
+++ b/doc/src/howto/creator-ui.qdoc
@@ -33,34 +33,33 @@
 
     \title User Interface
 
-    \image qtcreator-breakdown.png
-
     When you start \QC, it opens to the \gui Welcome mode, where you can:
 
     \list
 
-        \o  Read news from the Qt labs
+        \o  Open recent sessions and projects
+
+        \o  Create and open projects
 
         \o  Open tutorials and example projects
 
-        \o  Create and open projects
+        \o  Read news from the online community and Qt labs
 
         \o  Send feedback to the development team
 
-        \o  Open recent sessions and projects
-
     \endlist
 
-    You can use the mode selector to change to another \QC mode.
-    The following image displays an example application in \gui Edit mode
-    and \gui Design mode.
+    \image qtcreator-breakdown.png
 
-    \image qtcreator-qt-quick-editors.png "Edit mode and Design mode"
+    You can use the mode selector (1) to change to another \QC mode.
 
-    \QC has been localized into several languages. If the system language is one
-    of the supported languages, it is automatically selected. To change the
-    language, select \gui {Tools > Options > Environment} and select a language
-    in the \gui Language field. The change takes effect after you restart \QC.
+    You can use the target selector (2) to select the
+    \l{glossary-development-target}{target} for running (3), debugging (4), or
+    building (5) the application. Output from these actions is displayed in the
+    output panes (7).
+
+    You can use the locator (6) to to browse through projects, files, classes,
+    methods, documentation, and file systems.
 
     \section1 Modes
 
@@ -70,6 +69,11 @@
     modes, click the icons, or use the \l{keyboard-shortcuts}
     {corresponding keyboard shortcut}.
 
+    The following image displays an example application in \gui Edit mode (1)
+    and \gui Design mode (2).
+
+    \image qtcreator-qt-quick-editors.png "Edit mode and Design mode"
+
     You can use \QC in the following modes:
 
     \list
@@ -109,7 +113,7 @@
 
     \image qtcreator-sidebar.png
 
-    You can select the content of the sidebar in the sidebar menu:
+    You can select the content of the sidebar in the sidebar menu (1):
 
     \list
 
@@ -138,14 +142,15 @@
     \list
 
         \o  To toggle the sidebar, click \inlineimage qtcreator-togglebutton.png
-            or press \key Alt+0 (\key Cmd+0 on Mac OS X).
+            (\gui {Hide Sidebar/Show Sidebar}) or press \key Alt+0
+            (\key Cmd+0 on Mac OS X).
 
         \o  To split the sidebar, click \inlineimage qtcreator-splitbar.png
-            . Select new content to view in the split view.
+            (\gui {Split}). Select new content to view in the split view.
 
         \o  To close a sidebar view, click
             \inlineimage qtcreator-closesidebar.png
-            .
+            (\gui {Close}).
 
     \endlist
 
@@ -175,16 +180,15 @@
 
         \o  To hide the categories and sort project files alphabetically, click
             \inlineimage qtcreator-filter.png
-            and select \gui{Simplify Tree}.
+            (\gui {Filter Tree}) and select \gui{Simplify Tree}.
 
         \o  To hide source files which are automatically generated by the build
-            system, during a build, click \inlineimage qtcreator-filter.png
-            and select \gui{Hide Generated Files}.
+            system, select \gui {Filter Tree > Hide Generated Files}.
 
         \o  To keep the position in the project tree synchronized with the file
             currently opened in the editor, click
             \inlineimage qtcreator-synchronizefocus.png
-            .
+            (\gui {Synchronize with Editor}).
 
         \o  To see the absolute path of a file, move the mouse pointer over the
             file name.
@@ -197,16 +201,14 @@
     \gui {File System} view, which shows all the files in the file system.
 
     To keep the position in the tree synchronized with the file
-    opened in the editor, click
-    \inlineimage qtcreator-synchronizefocus.png
-    .
+    opened in the editor, select \gui {Synchronize with Editor}.
 
     \section2 Viewing the Class Hierarchy
 
     The \gui {Class View} shows the class hierarchy of the currently
     open projects. To organize the view by subprojects, click
     \inlineimage qtcreator-show-subprojects.png
-    .
+    (\gui {Show Subprojects}).
 
     \section2 Viewing QML Elements
 
@@ -214,14 +216,11 @@
 
     \list
 
-        \o  To see a complete list of all bindings, click
-            \inlineimage qtcreator-filter.png
-            and select \gui{Show All Bindings}.
+        \o  To see a complete list of all bindings, select \gui {Filter Tree >
+            Show All Bindings}.
 
         \o  To keep the position in the view synchronized with the element
-            selected in the editor, click
-            \inlineimage qtcreator-synchronizefocus.png
-            .
+            selected in the editor, select \gui {Synchronize with Editor}.
 
     \endlist
 
@@ -259,7 +258,8 @@
     the \gui Find field and click the left and right arrows to search down and
     up in the pane.
 
-    To open the \gui{General Messages} and \gui{Version Control} panes, select
+    To open the \gui{General Messages} and \l{Using Version Control Systems}
+    {Version Control} panes, select
     \gui {Window > Output Panes}.
 
     \section2 Issues
@@ -291,7 +291,7 @@
 
     The pane filters out irrelevant output from the build tools and presents the
     issues in an organized way. To further filter the output by type, select
-    \inlineimage qtcreator-filter.png
+    \gui {Filter Tree}
     and then select a filter.
 
     \image qtcreator-build-issues.png
@@ -305,9 +305,13 @@
 
     \section2 Search Results
 
-    The \gui{Search Results} pane displays the results for global searches,
-    for example, searching within a current document, files on disk, or all
-    projects.
+    In the \gui{Search Results} pane, you can search through projects, files on
+    a file system or the currently open file:
+
+    \image qtcreator-search-results.png "Search Results output pane"
+
+    The search results are stored in the search history (1) from which you can
+    select earlier searches.
 
     The figure below shows an example search result for all
     occurrences of \c textfinder within the \c "/TextFinder" directory.
@@ -319,8 +323,6 @@
     The \gui{Application Output} pane displays the status of a program when
     it is executed, and the debug output.
 
-    The figure below shows an example output from qDebug().
-
     \image qtcreator-application-output.png
 
     \section2 Compile Output
@@ -331,13 +333,21 @@
 
     \image qtcreator-compile-pane.png
 
+    \section1 Changing Languages
+
+    \QC has been localized into several languages. If the system language is one
+    of the supported languages, it is automatically selected. To change the
+    language, select \gui {Tools > Options > Environment} and select a language
+    in the \gui Language field. The change takes effect after you restart \QC.
+
     \section1 Viewing Images
 
     \QC opens image files in the image viewer.
 
     \image qtcreator-image-viewer.png "Image viewer"
 
-    Use the toolbar buttons or \l{Keyboard Shortcuts}{keyboard shortcuts} to:
+    Use the toolbar buttons (1) or \l{Keyboard Shortcuts}{keyboard shortcuts}
+    to:
 
     \list