diff options
-rw-r--r-- | src/imports/controls/TabButton.qml | 19 | ||||
-rw-r--r-- | src/imports/controls/material/TabButton.qml | 17 | ||||
-rw-r--r-- | src/imports/controls/universal/TabButton.qml | 23 | ||||
-rw-r--r-- | tests/auto/controls/data/tst_tabbutton.qml | 80 |
4 files changed, 122 insertions, 17 deletions
diff --git a/src/imports/controls/TabButton.qml b/src/imports/controls/TabButton.qml index c98022bf..039f9769 100644 --- a/src/imports/controls/TabButton.qml +++ b/src/imports/controls/TabButton.qml @@ -49,15 +49,22 @@ T.TabButton { baselineOffset: contentItem.y + contentItem.baselineOffset padding: 6 + spacing: 6 - contentItem: Text { + icon.width: 24 + icon.height: 24 + icon.color: !enabled ? Default.textDisabledLightColor : !checked ? Default.textLightColor : Default.textColor + + contentItem: IconLabel { + spacing: control.spacing + mirrored: control.mirrored + display: control.display + + icon: control.icon text: control.text font: control.font - elide: Text.ElideRight - opacity: enabled ? 1 : 0.3 - color: !control.checked ? Default.textLightColor : control.down ? Default.textDarkColor : Default.textColor - horizontalAlignment: Text.AlignHCenter - verticalAlignment: Text.AlignVCenter + color: Color.transparent(!control.checked ? Default.textLightColor : control.down ? Default.textDarkColor : Default.textColor, + enabled ? 1 : 0.3) } background: Rectangle { diff --git a/src/imports/controls/material/TabButton.qml b/src/imports/controls/material/TabButton.qml index fb433c07..96546d3f 100644 --- a/src/imports/controls/material/TabButton.qml +++ b/src/imports/controls/material/TabButton.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,14 +51,21 @@ T.TabButton { baselineOffset: contentItem.y + contentItem.baselineOffset padding: 12 + spacing: 6 - contentItem: Text { + icon.width: 24 + icon.height: 24 + icon.color: !enabled ? Material.hintTextColor : down || checked ? Material.accentColor : Material.foreground + + contentItem: IconLabel { + spacing: control.spacing + mirrored: control.mirrored + display: control.display + + icon: control.icon text: control.text font: control.font - elide: Text.ElideRight color: !control.enabled ? control.Material.hintTextColor : control.down || control.checked ? control.Material.accentColor : control.Material.foreground - horizontalAlignment: Text.AlignHCenter - verticalAlignment: Text.AlignVCenter } background: Ripple { diff --git a/src/imports/controls/universal/TabButton.qml b/src/imports/controls/universal/TabButton.qml index 88a98a71..054f65f5 100644 --- a/src/imports/controls/universal/TabButton.qml +++ b/src/imports/controls/universal/TabButton.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.TabButton { @@ -48,15 +50,22 @@ T.TabButton { baselineOffset: contentItem.y + contentItem.baselineOffset padding: 12 // PivotItemMargin + spacing: 8 - contentItem: Text { + icon.width: 20 + icon.height: 20 + icon.color: Color.transparent(control.hovered ? control.Universal.baseMediumHighColor : control.Universal.foreground, + control.checked || control.down || control.hovered ? 1.0 : 0.2) + + contentItem: IconLabel { + spacing: control.spacing + mirrored: control.mirrored + display: control.display + + icon: control.icon text: control.text font: control.font - elide: Text.ElideRight - horizontalAlignment: Text.AlignHCenter - verticalAlignment: Text.AlignVCenter - - opacity: control.checked || control.down || control.hovered ? 1.0 : 0.2 - color: control.hovered ? control.Universal.baseMediumHighColor : control.Universal.foreground + color: Color.transparent(control.hovered ? control.Universal.baseMediumHighColor : control.Universal.foreground, + control.checked || control.down || control.hovered ? 1.0 : 0.2) } } diff --git a/tests/auto/controls/data/tst_tabbutton.qml b/tests/auto/controls/data/tst_tabbutton.qml index 60cae927..05108992 100644 --- a/tests/auto/controls/data/tst_tabbutton.qml +++ b/tests/auto/controls/data/tst_tabbutton.qml @@ -95,4 +95,84 @@ TestCase { verify(control) compare(control.baselineOffset, control.contentItem.y + control.contentItem.baselineOffset) } + + function test_spacing() { + var control = createTemporaryObject(tabButton, testCase, { text: "Some long, long, long text" }) + verify(control) + if (control.background) + 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 while no icon is set. + compare(control.contentItem.implicitWidth, textLabel.implicitWidth) + + // That means that spacing shouldn't affect it. + control.spacing += 100 + compare(control.contentItem.implicitWidth, textLabel.implicitWidth) + + // The implicitWidth of the TabButton itself should, therefore, also never include spacing while no icon is set. + compare(control.implicitWidth, textLabel.implicitWidth + control.leftPadding + control.rightPadding) + } + + function test_display_data() { + return [ + { "tag": "IconOnly", display: TabButton.IconOnly }, + { "tag": "TextOnly", display: TabButton.TextOnly }, + { "tag": "TextUnderIcon", display: TabButton.TextUnderIcon }, + { "tag": "TextBesideIcon", display: TabButton.TextBesideIcon }, + { "tag": "IconOnly, mirrored", display: TabButton.IconOnly, mirrored: true }, + { "tag": "TextOnly, mirrored", display: TabButton.TextOnly, mirrored: true }, + { "tag": "TextUnderIcon, mirrored", display: TabButton.TextUnderIcon, mirrored: true }, + { "tag": "TextBesideIcon, mirrored", display: TabButton.TextBesideIcon, mirrored: true } + ] + } + + function test_display(data) { + var control = createTemporaryObject(tabButton, testCase, { + text: "TabButton", + 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 = findChild(control.contentItem, "image") + var textLabel = findChild(control.contentItem, "label") + + switch (control.display) { + case TabButton.IconOnly: + verify(iconImage) + verify(!textLabel) + compare(iconImage.x, (control.availableWidth - iconImage.width) / 2) + compare(iconImage.y, (control.availableHeight - iconImage.height) / 2) + break; + case TabButton.TextOnly: + verify(!iconImage) + verify(textLabel) + compare(textLabel.x, (control.availableWidth - textLabel.width) / 2) + compare(textLabel.y, (control.availableHeight - textLabel.height) / 2) + break; + case TabButton.TextUnderIcon: + verify(iconImage) + verify(textLabel) + compare(iconImage.x, (control.availableWidth - iconImage.width) / 2) + compare(textLabel.x, (control.availableWidth - textLabel.width) / 2) + verify(iconImage.y < textLabel.y) + break; + case TabButton.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; + } + } } |