[sysui] add processing of icon.source for ToolsColumn component

- ToolsColumn uses ToolButton inside. ToolButton provides two ways of
setting icon image. First one is using icon.name and theme, it is now
implemented in Neptune 3 UI. Another uses icon URL in icon.source.
This commit adds processing of sourceOn and sourceOff roles in the
component's model to define the ToolButton's icon.source property for
the selected and deselected states.

Task-number: AUTOSUITE-1215
Change-Id: I33f3a0e133db81e03464a430d5e2cd0302026f80
Reviewed-by: Kavindra Palaraja <kpalaraja@luxoft.com>

3 files changed, 41 insertions, 4 deletions

diff --git a/doc/neptune3ui-project.qdocconf b/doc/neptune3ui-project.qdocconf
index fd4a0275..53f19f0e 100644
--- a/doc/neptune3ui-project.qdocconf
+++ b/doc/neptune3ui-project.qdocconf
@@ -29,7 +29,8 @@ depends += qtcore \
            qt3d \
            qt3dstudio \
            qtdoc \
-           qtwayland
+           qtwayland \
+           qtquickcontrols2
 
 indexes = $$QT_INSTALL_DOCS/../QtSafeRenderer-1.0.0/SafetyManual/qtsaferenderer.index
 
diff --git a/doc/src/images/tools-column.jpg b/doc/src/images/tools-column.jpg
new file mode 100644
index 00000000..20b82053
--- /dev/null
+++ b/doc/src/images/tools-column.jpg
diff --git a/plugins/controls/ToolsColumn.qml b/plugins/controls/ToolsColumn.qml
index 53e115f1..50a785f7 100644
--- a/plugins/controls/ToolsColumn.qml
+++ b/plugins/controls/ToolsColumn.qml
@@ -42,17 +42,26 @@ import shared.utils 1.0
     \inqmlmodule controls
     \inherits ColumnLayout
     \since 5.11
-    \brief The tools column component for Neptune 3 applications.
+    \brief The tools column component for Neptune 3 UI applications.
 
-    The ToolsColumn provides a custom column of tool buttons for Neptune 3 Applications
+    The ToolsColumn provides a custom column of tool buttons for Neptune 3 UI Applications
     to follow the specification where only one of them can be selected at any given time.
 
+    \image tools-column.jpg
+
     See \l{Neptune 3 UI Components and Interfaces} to see more available components in
     Neptune 3 UI.
 
+    The ToolsColumn inherits its API from \l{AbstractButton::icon}{AbstractButton} to display icons
+    for the items. To use icons from theme (\c {icon.name} property of a button) add \c icon
+    role to the model items. To define icon by source URL (\c {icon.source} property of a
+    button) add \c sourceOn and \c sourceOff roles to the model items for the selected and
+    deselected states. Please refer to \l{Icons in Qt Quick Controls 2} for how to use icon
+    themes and icon URLs.
+
     \section2 Example Usage
 
-    The following example uses \l{ToolsColumn}:
+    The following example uses \l{ToolsColumn} with icons defined by theme:
 
     \qml
     import QtQuick 2.10
@@ -70,6 +79,26 @@ import shared.utils 1.0
         }
     }
     \endqml
+
+    The following example uses \l{ToolsColumn} with icons defined by source URL:
+
+    \qml
+    import QtQuick 2.10
+    import shared.controls 1.0
+
+    Item {
+        id: root
+        ToolsColumn {
+            translationContext: "MyToolsColumn"
+            model: ListModel {
+                ListElement {
+                    sourceOn: "ic-logo_ON.png"; sourceOff: "ic-logo_OFF.png";
+                    text: QT_TRANSLATE_NOOP("MyToolsColumn", "foo")
+                }
+            }
+        }
+    }
+    \endqml
 */
 
 ColumnLayout {
@@ -140,6 +169,9 @@ ColumnLayout {
             checkable: true
             checked: root.currentIndex === index
             icon.name: model.icon ? (checked ? model.icon + "_ON" : model.icon + "_OFF") : ""
+            icon.source: (model.sourceOn && model.sourceOff)
+                           ? checked ? model.sourceOn : model.sourceOff
+                           : ""
             text: qsTranslate(root.translationContext, model.text)
             font.pixelSize: Sizes.fontSizeS
             enabled: !model.greyedOut
@@ -151,4 +183,8 @@ ColumnLayout {
             ButtonGroup.group: buttonGroup
         }
     }
+
+    Item {
+        Layout.fillHeight: true
+    }
 }