diff options
author | J-P Nurmi <jpnurmi@qt.io> | 2017-04-12 14:08:28 +0200 |
---|---|---|
committer | J-P Nurmi <jpnurmi@qt.io> | 2017-04-19 09:39:53 +0000 |
commit | 65247c0bbd340f4be89e0ae284b865fd8ba235ce (patch) | |
tree | a4c5b04f1c52b1f5ebf3130d450d8c1cbc863871 | |
parent | ce0a6e5d78fa6edca573e5d48b5448647ba7642d (diff) |
SwitchDelegate: add support for icons
Task-number: QTBUG-49820
Change-Id: I9cafe09ae56afa14a55748e13405dd0364f9dcb2
Reviewed-by: Mitch Curtis <mitch.curtis@qt.io>
-rw-r--r-- | src/imports/controls/SwitchDelegate.qml | 20 | ||||
-rw-r--r-- | src/imports/controls/material/SwitchDelegate.qml | 18 | ||||
-rw-r--r-- | src/imports/controls/universal/SwitchDelegate.qml | 22 | ||||
-rw-r--r-- | tests/auto/controls/data/tst_switchdelegate.qml | 81 |
4 files changed, 121 insertions, 20 deletions
diff --git a/src/imports/controls/SwitchDelegate.qml b/src/imports/controls/SwitchDelegate.qml index 4b57cd29..287e174c 100644 --- a/src/imports/controls/SwitchDelegate.qml +++ b/src/imports/controls/SwitchDelegate.qml @@ -52,23 +52,29 @@ T.SwitchDelegate { padding: 12 spacing: 12 + icon.width: 24 + icon.height: 24 + icon.color: enabled ? undefined : Default.textDisabledLightColor + indicator: SwitchIndicator { x: text ? (control.mirrored ? control.leftPadding : control.width - width - control.rightPadding) : control.leftPadding + (control.availableWidth - width) / 2 y: control.topPadding + (control.availableHeight - height) / 2 control: control } - contentItem: Text { - leftPadding: control.indicator && !control.mirrored ? 0 : control.indicator.width + control.spacing - rightPadding: control.indicator && control.mirrored ? 0 : control.indicator.width + control.spacing + contentItem: IconLabel { + leftPadding: control.mirrored ? control.indicator.width + control.spacing : 0 + rightPadding: !control.mirrored ? control.indicator.width + control.spacing : 0 + + spacing: control.spacing + mirrored: control.mirrored + display: control.display + alignment: control.display === IconLabel.IconOnly || control.display === IconLabel.TextUnderIcon ? Qt.AlignCenter : Qt.AlignLeft + icon: control.icon text: control.text font: control.font color: control.enabled ? Default.textDarkColor : Default.textDisabledColor - elide: Text.ElideRight - visible: control.text - horizontalAlignment: Text.AlignLeft - verticalAlignment: Text.AlignVCenter } background: Rectangle { diff --git a/src/imports/controls/material/SwitchDelegate.qml b/src/imports/controls/material/SwitchDelegate.qml index c5c4a91d..c1591178 100644 --- a/src/imports/controls/material/SwitchDelegate.qml +++ b/src/imports/controls/material/SwitchDelegate.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 @@ -54,23 +56,29 @@ T.SwitchDelegate { bottomPadding: 8 spacing: 16 + icon.width: 24 + icon.height: 24 + icon.color: enabled ? undefined : Material.hintTextColor + indicator: SwitchIndicator { x: text ? (control.mirrored ? control.leftPadding : control.width - width - control.rightPadding) : control.leftPadding + (control.availableWidth - width) / 2 y: control.topPadding + (control.availableHeight - height) / 2 control: control } - contentItem: Text { + contentItem: IconLabel { leftPadding: !control.mirrored ? 0 : control.indicator.width + control.spacing rightPadding: control.mirrored ? 0 : control.indicator.width + control.spacing + spacing: control.spacing + mirrored: control.mirrored + display: control.display + alignment: control.display === IconLabel.IconOnly || control.display === IconLabel.TextUnderIcon ? Qt.AlignCenter : Qt.AlignLeft + + icon: control.icon text: control.text font: control.font color: control.enabled ? control.Material.foreground : control.Material.hintTextColor - elide: Text.ElideRight - visible: control.text - horizontalAlignment: Text.AlignLeft - verticalAlignment: Text.AlignVCenter } background: Rectangle { diff --git a/src/imports/controls/universal/SwitchDelegate.qml b/src/imports/controls/universal/SwitchDelegate.qml index 49482d05..af7f403e 100644 --- a/src/imports/controls/universal/SwitchDelegate.qml +++ b/src/imports/controls/universal/SwitchDelegate.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.SwitchDelegate { @@ -54,25 +56,29 @@ T.SwitchDelegate { topPadding: padding - 1 bottomPadding: padding + 1 + icon.width: 20 + icon.height: 20 + icon.color: enabled ? undefined : Color.transparent(Universal.foreground, 0.2) + indicator: SwitchIndicator { x: text ? (control.mirrored ? control.leftPadding : control.width - width - control.rightPadding) : control.leftPadding + (control.availableWidth - width) / 2 y: control.topPadding + (control.availableHeight - height) / 2 control: control } - contentItem: Text { + contentItem: IconLabel { leftPadding: !control.mirrored ? 0 : control.indicator.width + control.spacing rightPadding: control.mirrored ? 0 : control.indicator.width + control.spacing + spacing: control.spacing + mirrored: control.mirrored + display: control.display + alignment: control.display === IconLabel.IconOnly || control.display === IconLabel.TextUnderIcon ? Qt.AlignCenter : Qt.AlignLeft + + icon: control.icon text: control.text font: control.font - elide: Text.ElideRight - visible: control.text - horizontalAlignment: Text.AlignLeft - verticalAlignment: Text.AlignVCenter - - opacity: enabled ? 1.0 : 0.2 - color: control.Universal.foreground + color: Color.transparent(control.Universal.foreground, enabled ? 1.0 : 0.2) } background: Rectangle { diff --git a/tests/auto/controls/data/tst_switchdelegate.qml b/tests/auto/controls/data/tst_switchdelegate.qml index f0c3e68b..a1e6c072 100644 --- a/tests/auto/controls/data/tst_switchdelegate.qml +++ b/tests/auto/controls/data/tst_switchdelegate.qml @@ -523,4 +523,85 @@ TestCase { compare(control.pressed, false) verify(spy.success) } + + function test_spacing() { + var control = createTemporaryObject(switchDelegate, testCase, { text: "Some long, long, long text" }) + verify(control) + verify(control.contentItem.implicitWidth + control.leftPadding + control.rightPadding > control.background.implicitWidth) + + var textLabel = findChild(control.contentItem, "label") + verify(textLabel) + + // The implicitWidth of the IconLabel that all buttons use as their contentItem should be + // equal to the implicitWidth of the Text and the switch indicator + spacing while no icon is set. + compare(control.contentItem.implicitWidth, textLabel.implicitWidth + control.indicator.width + control.spacing) + + control.spacing += 100 + compare(control.contentItem.implicitWidth, textLabel.implicitWidth + control.indicator.width + control.spacing) + + compare(control.implicitWidth, textLabel.implicitWidth + control.indicator.width + control.spacing + control.leftPadding + control.rightPadding) + } + + function test_display_data() { + return [ + { "tag": "IconOnly", display: SwitchDelegate.IconOnly }, + { "tag": "TextOnly", display: SwitchDelegate.TextOnly }, + { "tag": "TextUnderIcon", display: SwitchDelegate.TextUnderIcon }, + { "tag": "TextBesideIcon", display: SwitchDelegate.TextBesideIcon }, + { "tag": "IconOnly, mirrored", display: SwitchDelegate.IconOnly, mirrored: true }, + { "tag": "TextOnly, mirrored", display: SwitchDelegate.TextOnly, mirrored: true }, + { "tag": "TextUnderIcon, mirrored", display: SwitchDelegate.TextUnderIcon, mirrored: true }, + { "tag": "TextBesideIcon, mirrored", display: SwitchDelegate.TextBesideIcon, mirrored: true } + ] + } + + function test_display(data) { + var control = createTemporaryObject(switchDelegate, testCase, { + text: "SwitchDelegate", + display: data.display, + width: 400, + "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 = findChild(control.contentItem, "image") + var textLabel = findChild(control.contentItem, "label") + + var availableWidth = control.availableWidth - control.indicator.width - control.spacing + var indicatorOffset = control.mirrored ? control.indicator.width + control.spacing : 0 + + switch (control.display) { + case SwitchDelegate.IconOnly: + verify(iconImage) + verify(!textLabel) + compare(iconImage.x, indicatorOffset + (availableWidth - iconImage.width) / 2) + compare(iconImage.y, (control.availableHeight - iconImage.height) / 2) + break; + case SwitchDelegate.TextOnly: + verify(!iconImage) + verify(textLabel) + compare(textLabel.x, control.mirrored ? control.availableWidth - textLabel.width : 0) + compare(textLabel.y, (control.availableHeight - textLabel.height) / 2) + break; + case SwitchDelegate.TextUnderIcon: + verify(iconImage) + verify(textLabel) + compare(iconImage.x, indicatorOffset + (availableWidth - iconImage.width) / 2) + compare(textLabel.x, indicatorOffset + (availableWidth - textLabel.width) / 2) + verify(iconImage.y < textLabel.y) + break; + case SwitchDelegate.TextBesideIcon: + verify(iconImage) + verify(textLabel) + if (control.mirrored) + verify(textLabel.x < iconImage.x) + else + verify(iconImage.x < textLabel.x) + compare(iconImage.y, (control.availableHeight - iconImage.height) / 2) + compare(textLabel.y, (control.availableHeight - textLabel.height) / 2) + break; + } + } } |