From 40f59da21a74b5999db90e1eb7073f292ac3e54e Mon Sep 17 00:00:00 2001 From: Mitch Curtis Date: Fri, 24 Feb 2017 11:41:25 +0100 Subject: ToolButton: add support for icons Task-number: QTBUG-49820 Change-Id: I0292ad45e9c775af3a3216266c61704fc8375d5a Reviewed-by: J-P Nurmi --- src/imports/controls/ToolButton.qml | 32 +++++++++++++---- src/imports/controls/material/ToolButton.qml | 36 ++++++++++++++----- src/imports/controls/universal/ToolButton.qml | 35 ++++++++++++++----- src/quicktemplates2/qquicktoolbutton.cpp | 3 +- tests/auto/controls/data/tst_toolbutton.qml | 50 +++++++++++++++++++++++++++ 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; + } + } } -- cgit v1.2.3