ToolButton: add support for icons

Task-number: QTBUG-49820
Change-Id: I0292ad45e9c775af3a3216266c61704fc8375d5a
Reviewed-by: J-P Nurmi <jpnurmi@qt.io>

5 files changed, 132 insertions, 24 deletions

diff --git a/src/imports/controls/ToolButton.qml b/src/imports/controls/ToolButton.qml
index 684ed10f..13825fb0 100644
--- a/src/imports/controls/ToolButton.qml
+++ b/src/imports/controls/ToolButton.qml
@@ -49,14 +49,32 @@ T.ToolButton {
     baselineOffset: contentItem.y + contentItem.baselineOffset
 
     padding: 6
+    spacing: 6
 
-    contentItem: Text {
-        text: control.text
-        font: control.font
-        color: control.enabled ? (control.visualFocus ? Default.focusColor : Default.textDarkColor) : Default.textDisabledLightColor
-        elide: Text.ElideRight
-        horizontalAlignment: Text.AlignHCenter
-        verticalAlignment: Text.AlignVCenter
+    icon.width: 24
+    icon.height: 24
+    icon.color: enabled ? undefined : Default.textDisabledLightColor
+
+    contentItem: IconLabel {
+        spacing: control.spacing
+        mirrored: control.mirrored
+        display: control.display
+
+        icon: IconImage {
+            name: control.icon.name
+            source: control.icon.source
+            sourceSize.width: control.icon.width
+            sourceSize.height: control.icon.height
+            color: control.icon.color
+        }
+        label: Text {
+            text: control.text
+            font: control.font
+            color: control.enabled ? (control.visualFocus ? Default.focusColor : Default.textDarkColor) : Default.textDisabledLightColor
+            elide: Text.ElideRight
+            horizontalAlignment: Text.AlignHCenter
+            verticalAlignment: Text.AlignVCenter
+        }
     }
 
     background: Rectangle {
diff --git a/src/imports/controls/material/ToolButton.qml b/src/imports/controls/material/ToolButton.qml
index abfaafbb..78e9d651 100644
--- a/src/imports/controls/material/ToolButton.qml
+++ b/src/imports/controls/material/ToolButton.qml
@@ -36,6 +36,8 @@
 
 import QtQuick 2.9
 import QtQuick.Templates 2.3 as T
+import QtQuick.Controls 2.3
+import QtQuick.Controls.impl 2.3
 import QtQuick.Controls.Material 2.3
 import QtQuick.Controls.Material.impl 2.3
 
@@ -49,15 +51,33 @@ T.ToolButton {
     baselineOffset: contentItem.y + contentItem.baselineOffset
 
     padding: 6
+    spacing: 6
 
-    contentItem: Text {
-        text: control.text
-        font: control.font
-        color: !control.enabled ? control.Material.hintTextColor :
-                control.checked || control.highlighted ? control.Material.accent : control.Material.foreground
-        elide: Text.ElideRight
-        horizontalAlignment: Text.AlignHCenter
-        verticalAlignment: Text.AlignVCenter
+    icon.width: 24
+    icon.height: 24
+    icon.color: enabled ? undefined : Material.hintTextColor
+
+    contentItem: IconLabel {
+        spacing: control.spacing
+        mirrored: control.mirrored
+        display: control.display
+
+        icon: IconImage {
+            name: control.icon.name
+            source: control.icon.source
+            sourceSize.width: control.icon.width
+            sourceSize.height: control.icon.height
+            color: control.icon.color
+        }
+        label: Text {
+            text: control.text
+            font: control.font
+            color: !control.enabled ? control.Material.hintTextColor :
+                    control.checked || control.highlighted ? control.Material.accent : control.Material.foreground
+            elide: Text.ElideRight
+            horizontalAlignment: Text.AlignHCenter
+            verticalAlignment: Text.AlignVCenter
+        }
     }
 
     background: Ripple {
diff --git a/src/imports/controls/universal/ToolButton.qml b/src/imports/controls/universal/ToolButton.qml
index 345e0507..613feb9f 100644
--- a/src/imports/controls/universal/ToolButton.qml
+++ b/src/imports/controls/universal/ToolButton.qml
@@ -36,6 +36,8 @@
 
 import QtQuick 2.9
 import QtQuick.Templates 2.3 as T
+import QtQuick.Controls 2.3
+import QtQuick.Controls.impl 2.3
 import QtQuick.Controls.Universal 2.3
 
 T.ToolButton {
@@ -48,18 +50,35 @@ T.ToolButton {
     baselineOffset: contentItem.y + contentItem.baselineOffset
 
     padding: 6
+    spacing: 8
+
+    icon.width: 20
+    icon.height: 20
+    icon.color: enabled ? undefined : Universal.transparentColor(Universal.foreground, 0.2)
 
     property bool useSystemFocusVisuals: true
 
-    contentItem: Text {
-        text: control.text
-        font: control.font
-        elide: Text.ElideRight
-        horizontalAlignment: Text.AlignHCenter
-        verticalAlignment: Text.AlignVCenter
+    contentItem: IconLabel {
+        spacing: control.spacing
+        mirrored: control.mirrored
+        display: control.display
 
-        opacity: enabled ? 1.0 : 0.2
-        color: control.Universal.foreground
+        icon: IconImage {
+            name: control.icon.name
+            source: control.icon.source
+            sourceSize.width: control.icon.width
+            sourceSize.height: control.icon.height
+            color: control.icon.color
+        }
+        label: Text {
+            text: control.text
+            font: control.font
+            elide: Text.ElideRight
+            horizontalAlignment: Text.AlignHCenter
+            verticalAlignment: Text.AlignVCenter
+            opacity: enabled ? 1.0 : 0.2
+            color: control.Universal.foreground
+        }
     }
 
     background: Rectangle {
diff --git a/src/quicktemplates2/qquicktoolbutton.cpp b/src/quicktemplates2/qquicktoolbutton.cpp
index 5ef25e3e..3db22022 100644
--- a/src/quicktemplates2/qquicktoolbutton.cpp
+++ b/src/quicktemplates2/qquicktoolbutton.cpp
@@ -59,7 +59,8 @@ QT_BEGIN_NAMESPACE
 
     ToolButton inherits its API from AbstractButton. For instance, you can set
     \l {AbstractButton::text}{text}, and react to \l {AbstractButton::clicked}{clicks}
-    using the AbstractButton API.
+    using the AbstractButton API. In addition to displaying text, tool buttons
+    can also display an \l [QML]{Button Icons}{icon}.
 
     \sa ToolBar, {Customizing ToolButton}, {Button Controls}
 */
diff --git a/tests/auto/controls/data/tst_toolbutton.qml b/tests/auto/controls/data/tst_toolbutton.qml
index 5eefaf59..982f930a 100644
--- a/tests/auto/controls/data/tst_toolbutton.qml
+++ b/tests/auto/controls/data/tst_toolbutton.qml
@@ -181,4 +181,54 @@ TestCase {
         verify(control)
         compare(control.baselineOffset, control.contentItem.y + control.contentItem.baselineOffset)
     }
+
+    function test_display_data() {
+        return [
+            { "tag": "IconOnly", display: ToolButton.IconOnly },
+            { "tag": "TextOnly", display: ToolButton.TextOnly },
+            { "tag": "TextBesideIcon", display: ToolButton.TextBesideIcon },
+            { "tag": "IconOnly, mirrored", display: ToolButton.IconOnly, mirrored: true },
+            { "tag": "TextOnly, mirrored", display: ToolButton.TextOnly, mirrored: true },
+            { "tag": "TextBesideIcon, mirrored", display: ToolButton.TextBesideIcon, mirrored: true }
+        ]
+    }
+
+    function test_display(data) {
+        var control = createTemporaryObject(toolButton, testCase, {
+            text: "ToolButton",
+            display: data.display,
+            "icon.source": "qrc:/qt-project.org/imports/QtQuick/Controls.2/images/check.png",
+            "LayoutMirroring.enabled": !!data.mirrored
+        })
+        verify(control)
+        verify(control.icon.source.length > 0)
+
+        var iconImage = control.contentItem.icon
+        verify(iconImage)
+        verify(iconImage.hasOwnProperty("name"))
+        var label = control.contentItem.label
+        verify(label)
+        verify(label.hasOwnProperty("text"))
+
+        switch (control.display) {
+        case ToolButton.IconOnly:
+            compare(iconImage.visible, true)
+            compare(label.visible, false)
+            compare(iconImage.x, (control.availableWidth - iconImage.width) / 2)
+            break;
+        case ToolButton.TextOnly:
+            compare(iconImage.visible, false)
+            compare(label.visible, true)
+            compare(label.x, (control.availableWidth - label.width) / 2)
+            break;
+        case ToolButton.TextBesideIcon:
+            compare(iconImage.visible, true)
+            compare(label.visible, true)
+            if (control.mirrored)
+                verify(label.x < iconImage.x)
+            else
+                verify(iconImage.x < label.x)
+            break;
+        }
+    }
 }