Doc: Cleaned up the Designer main window and Embedded Linux pages.

Reviewed-by: Trust Me

1 files changed, 166 insertions, 92 deletions

diff --git a/doc/src/development/designer-manual.qdoc b/doc/src/development/designer-manual.qdoc
index ff05228..bdadcf7 100644
--- a/doc/src/development/designer-manual.qdoc
+++ b/doc/src/development/designer-manual.qdoc
@@ -1520,26 +1520,34 @@
 
 
     \target CreatingAMenu
-    \table
-        \row
-            \i  \inlineimage designer-creating-menu1.png
-            \i  \inlineimage designer-creating-menu2.png
-            \i  \bold{Creating a Menu}
-
-        Double-click the placeholder item to begin editing. The menu text,
-        displayed using a line edit, can be modified.
-
-        \row
-            \i  \inlineimage designer-creating-menu3.png
-            \i  \inlineimage designer-creating-menu4.png
-            \i  Insert the required text for the new menu. Inserting an
-                ampersand character (&) causes the letter following it to be
-                used as a mnemonic for the menu.
-
-        Press \key Return or \key Enter to accept the new text, or press
-        \key Escape to reject it. You can undo the editing operation later if
-        required.
-    \endtable
+    \raw HTML
+    <div style="float: left; margin-right: 2em">
+    \endraw
+    \inlineimage designer-creating-menu1.png
+    \inlineimage designer-creating-menu2.png
+    \br
+    \inlineimage designer-creating-menu3.png
+    \inlineimage designer-creating-menu4.png
+    \raw HTML
+    </div>
+    \endraw
+
+    \section2 Creating a Menu
+
+    Double-click the placeholder item to begin editing. The menu text,
+    displayed using a line edit, can be modified.
+
+    Insert the required text for the new menu. Inserting an
+    ampersand character (&) causes the letter following it to be
+    used as a mnemonic for the menu.
+
+    Press \key Return or \key Enter to accept the new text, or press
+    \key Escape to reject it. You can undo the editing operation later if
+    required.
+
+    \raw HTML
+    <div style="clear: both" />
+    \endraw
 
     Menus can also be rearranged in the menu bar simply by dragging and
     dropping them in the preferred location. A vertical red line indicates the
@@ -1550,31 +1558,40 @@
     navigating the menu structure in the usual way.
 
     \target CreatingAMenuEntry
+    \raw HTML
+    <div style="float: right; margin-left: 2em">
+    \endraw
+    \inlineimage designer-creating-menu-entry1.png
+    \inlineimage designer-creating-menu-entry2.png
+    \br
+    \inlineimage designer-creating-menu-entry3.png
+    \inlineimage designer-creating-menu-entry4.png
+    \raw HTML
+    </div>
+    \endraw
     \table
-        \row
-            \i  \inlineimage designer-creating-menu-entry1.png
-            \i  \inlineimage designer-creating-menu-entry2.png
-            \i  \bold{Creating a Menu Entry}
 
-        Double-click the \gui{new action} placeholder to begin editing, or
-        double-click \gui{new separator} to insert a new separator line after
-        the last entry in the menu.
+    \section2 Creating a Menu Entry
 
-        The menu entry's text is displayed using a line edit, and can be
-        modified.
+    Double-click the \gui{new action} placeholder to begin editing, or
+    double-click \gui{new separator} to insert a new separator line after
+    the last entry in the menu.
 
-        \row
-            \i  \inlineimage designer-creating-menu-entry3.png
-            \i  \inlineimage designer-creating-menu-entry4.png
-            \i  Insert the required text for the new entry, optionally using
-                the ampersand character (&) to mark the letter to use as a
-                mnemonic for the entry.
+    The menu entry's text is displayed using a line edit, and can be
+    modified.
 
-        Press \key Return or \key Enter to accept the new text, or press
-        \key Escape to reject it. The action created for this menu entry will
-        be accessible via the \l{#TheActionEditor}{Action Editor}, and any
-        associated keyboard shortcut can be set there.
-    \endtable
+    Insert the required text for the new entry, optionally using
+    the ampersand character (&) to mark the letter to use as a
+    mnemonic for the entry.
+
+    Press \key Return or \key Enter to accept the new text, or press
+    \key Escape to reject it. The action created for this menu entry will
+    be accessible via the \l{#TheActionEditor}{Action Editor}, and any
+    associated keyboard shortcut can be set there.
+
+    \raw HTML
+    <div style="clear: both" />
+    \endraw
 
     Just like with menus, entries can be moved around simply by dragging and
     dropping them in the preferred location. When an entry is dragged over a
@@ -1582,53 +1599,92 @@
     menu entries are based on actions, they can also be dropped onto toolbars,
     where they will be displayed as toolbar buttons.
 
-
     \section1 Toolbars
 
+    \raw HTML
+    <div style="float: left; margin-right: 2em">
+    \endraw
+    \inlineimage designer-creating-toolbar.png
+    \raw HTML
+    </div>
+    \endraw
 
-    ### SCREENSHOT
+    \section2 Creating and Removing a Toolbar
 
-    Toolbars ared added to a main window in a similar way to the menu bar:
+    Toolbars are added to a main window in a similar way to the menu bar:
     Select the \gui{Add Tool Bar} option from the form's context menu.
     Alternatively, if there is an existing toolbar in the main window, you can
     click the arrow on its right end to create a new toolbar.
 
-    Toolbar buttons are created using the action system to populate each
-    toolbar, rather than by using specific button widgets from the widget box.
-    Since actions can be represented by menu entries and toolbar buttons, they
-    can be moved between menus and toolbars. To share an action between a menu
-    and a toolbar, drag its icon from the \l{#TheActionEditor}{Action Editor}
-    to the toolbar rather than from the menu where its entry is located.
+    Toolbars are removed from the form via an entry in the toolbar's context
+    menu.
+
+    \raw HTML
+    <div style="clear: both" />
+    \endraw
 
-    New actions for menus and toolbars can be created in the
-    \l{#TheActionEditor}{Action Editor}.
+    \section2 Adding and Removing Toolbar Buttons
 
+    Toolbar buttons are created as actions in the
+    \l{#TheActionEditor}{Action Editor} and dragged onto the toolbar.
+    Since actions can be represented by menu entries and toolbar buttons,
+    they can be moved between menus and toolbars.
+
+    \target AddingAnAction
+    \raw HTML
+    <div style="float: right; margin-left: 2em">
+    \endraw
+    \inlineimage designer-adding-toolbar-action.png
+    \inlineimage designer-removing-toolbar-action.png
+    \raw HTML
+    </div>
+    \endraw
+
+    To share an action between a menu and a toolbar, drag its icon from the
+    action editor to the toolbar rather than from the menu where its entry is
+    located. See \l{#Adding an Action}{Adding an Action} for more information
+    about this process.
+
+    Toolbar buttons are removed via the toolbar's context menu.
+
+    \raw HTML
+    <div style="clear: both" />
+    \endraw
 
     \section1 Actions
 
     With the menu bar and the toolbars in place, it's time to populate them
-    with action: \QD provides an action editor to simplify the creation and
-    management of actions.
-
+    with actions. New actions for both menus and toolbars are created in the
+    action editor window, simplifying the creation and management of actions.
 
     \target TheActionEditor
-    \table
-        \row
-            \i  \inlineimage designer-action-editor.png
-            \i  \bold{The Action Editor}
+    \raw HTML
+    <div style="float: left; margin-right: 2em">
+    \endraw
+    \inlineimage designer-action-editor.png
+    \raw HTML
+    </div>
+    \endraw
 
-        Enable the action editor by opening the \gui Tools menu, and switching
-        on the \gui{Action Editor} option.
+    \section2 The Action Editor
 
-        The action editor allows you to create \gui New actions and \gui Delete
-        actions. It also provides a search function, \gui Filter, using the
-        action's text.
+    Enable the action editor by opening the \gui Tools menu, and switching
+    on the \gui{Action Editor} option.
 
-        \QD's action editor can be viewed in the classic \gui{Icon View} and
-        \gui{Detailed View}. The screenshot below shows the action editor in
-        \gui{Detailed View}. You can also copy and paste actions between menus,
-        toolbars and forms.
-    \endtable
+    The action editor allows you to create \gui New actions and \gui Delete
+    actions. It also provides a search function, \gui Filter, using the
+    action's text.
+
+    \QD's action editor can be viewed in the classic \gui{Icon View} and
+    \gui{Detailed View}. The screenshot below shows the action editor in
+    \gui{Detailed View}. You can also copy and paste actions between menus,
+    toolbars and forms.
+
+    \raw HTML
+    <div style="clear: both" />
+    \endraw
+
+    \section2 Creating an Action
 
     To create an action, use the action editor's \gui New button, which will
     then pop up an input dialog. Provide the new action with a \gui Text --
@@ -1641,23 +1697,33 @@
 
     Once the action is created, it can be used wherever actions are applicable.
 
+    \raw HTML
+    <div style="clear: left" />
+    \endraw
 
     \target AddingAnAction
-    \table
-        \row
-            \i  \inlineimage designer-adding-menu-action.png
-            \i  \inlineimage designer-adding-toolbar-action.png
-            \i  \bold{Adding an Action}
+    \raw HTML
+    <div style="float: right; margin-left: 2em">
+    \endraw
+    \inlineimage designer-adding-menu-action.png
+    \inlineimage designer-adding-toolbar-action.png
+    \raw HTML
+    </div>
+    \endraw
 
-        To add an action to a menu or a toolbar, simply press the left mouse
-        button over the action in the action editor, and drag it to the
-        preferred location.
+    \section2 Adding an Action
 
-        \QD provides highlighted guide lines that tell you where the action
-        will be added. Release the mouse button to add the action when you have
-        found the right spot.
-    \endtable
+    To add an action to a menu or a toolbar, simply press the left mouse
+    button over the action in the action editor, and drag it to the
+    preferred location.
+
+    \QD provides highlighted guide lines that tell you where the action
+    will be added. Release the mouse button to add the action when you have
+    found the right spot.
 
+    \raw HTML
+    <div style="clear: right" />
+    \endraw
 
     \section1 Dock Widgets
 
@@ -1668,21 +1734,29 @@
     and choose an appropriate value for its \gui{dockWidgetArea} property.
 
     \target AddingADockWidget
-    \table
-        \row
-            \i  \inlineimage designer-adding-dockwidget.png
-            \i  \bold{Adding a Dock Widget}
 
-        To add a dock widget, simply drag one from the \gui Containers section
-        of the widget box, and drop it onto the main form area. Just like other
-        widgets, its properties can be modified with the \gui{Property Editor}.
+    \raw HTML
+    <div style="float: left; margin-right: 2em">
+    \endraw
+    \inlineimage designer-adding-dockwidget.png
+    \raw HTML
+    </div>
+    \endraw
 
-        Dock widgets can be optionally floated as indpendent tool windows.
-        Hence, it is useful to give them window titles by setting their
-        \gui{windowTitle} property. This also helps to identify them on the
-        form.
+    \section2 Adding a Dock Widget
 
-    \endtable
+    To add a dock widget, simply drag one from the \gui Containers section
+    of the widget box, and drop it onto the main form area. Just like other
+    widgets, its properties can be modified with the \gui{Property Editor}.
+
+    Dock widgets can be optionally floated as indpendent tool windows.
+    Hence, it is useful to give them window titles by setting their
+    \gui{windowTitle} property. This also helps to identify them on the
+    form.
+
+    \raw HTML
+    <div style="clear: both" />
+    \endraw
 */