From 5071692c8fd9c8f5a035fa921115efca577e5659 Mon Sep 17 00:00:00 2001 From: Jan Holthuis Date: Thu, 3 Jun 2021 14:58:22 +0200 Subject: [PATCH 1/5] skins/QMLSkin: Add support for maximized library --- res/skins/QMLDemo/MiniDeck.qml | 49 ++++++++++++++++++++++ res/skins/QMLDemo/MiniDeckRow.qml | 25 +++++++++++ res/skins/QMLDemo/main.qml | 69 ++++++++++++++++++++++++++++++- 3 files changed, 142 insertions(+), 1 deletion(-) create mode 100644 res/skins/QMLDemo/MiniDeck.qml create mode 100644 res/skins/QMLDemo/MiniDeckRow.qml diff --git a/res/skins/QMLDemo/MiniDeck.qml b/res/skins/QMLDemo/MiniDeck.qml new file mode 100644 index 00000000000..c350e27ccfb --- /dev/null +++ b/res/skins/QMLDemo/MiniDeck.qml @@ -0,0 +1,49 @@ +import "." as Skin +import QtQuick 2.12 +import QtQuick.Controls 2.12 +import "Theme" + +Item { + id: root + + property string group // required + + height: buttonColumn.implicitHeight + + Column { + id: buttonColumn + + anchors.left: parent.left + width: 56 + spacing: 5 + + Skin.ControlButton { + id: cueButton + + group: root.group + key: "cue_default" + text: "Cue" + activeColor: Theme.deckActiveColor + } + + Skin.ControlButton { + id: playButton + + group: root.group + key: "play" + text: "Play" + checkable: true + activeColor: Theme.deckActiveColor + } + + } + + Skin.WaveformOverview { + group: root.group + anchors.top: buttonColumn.top + anchors.bottom: buttonColumn.bottom + anchors.left: buttonColumn.right + anchors.right: parent.right + } + +} diff --git a/res/skins/QMLDemo/MiniDeckRow.qml b/res/skins/QMLDemo/MiniDeckRow.qml new file mode 100644 index 00000000000..c67a8e6b693 --- /dev/null +++ b/res/skins/QMLDemo/MiniDeckRow.qml @@ -0,0 +1,25 @@ +import QtQuick.Layouts 1.12 + +RowLayout { + id: root + + property string leftDeckGroup // required + property string rightDeckGroup // required + + height: leftDeck.height + + MiniDeck { + id: leftDeck + + Layout.fillWidth: true + group: root.leftDeckGroup + } + + MiniDeck { + id: rightDeck + + Layout.fillWidth: true + group: root.rightDeckGroup + } + +} diff --git a/res/skins/QMLDemo/main.qml b/res/skins/QMLDemo/main.qml index 1369972ccda..8c1d3858c6e 100644 --- a/res/skins/QMLDemo/main.qml +++ b/res/skins/QMLDemo/main.qml @@ -8,6 +8,7 @@ Rectangle { id: root property alias show4decks: show4DecksButton.checked + property alias maximizeLibrary: maximizeLibraryButton.checked width: 1920 height: 1080 @@ -38,6 +39,52 @@ Rectangle { checkable: true } + Skin.Button { + id: maximizeLibraryButton + + text: "Library" + activeColor: Theme.white + checkable: true + } + + } + + } + + Skin.MiniDeckRow { + id: decks12mini + + leftDeckGroup: "[Channel1]" + rightDeckGroup: "[Channel2]" + width: parent.width - 10 + x: 5 + + states: Skin.HiddenState { + when: !root.maximizeLibrary + target: decks12mini + } + + transitions: Skin.HiddenTransition { + target: decks12mini + } + + } + + Skin.MiniDeckRow { + id: decks34mini + + leftDeckGroup: "[Channel3]" + rightDeckGroup: "[Channel4]" + width: parent.width - 10 + x: 5 + + states: Skin.HiddenState { + when: !root.show4decks || !root.maximizeLibrary + target: decks34mini + } + + transitions: Skin.HiddenTransition { + target: decks34mini } } @@ -49,6 +96,16 @@ Rectangle { rightDeckGroup: "[Channel2]" width: parent.width - 10 x: 5 + + states: Skin.HiddenState { + when: root.maximizeLibrary + target: decks12 + } + + transitions: Skin.HiddenTransition { + target: decks12 + } + } Skin.CrossfaderRow { @@ -57,6 +114,16 @@ Rectangle { crossfaderWidth: decks12.mixer.width width: parent.width - 10 x: 5 + + states: Skin.HiddenState { + when: root.maximizeLibrary + target: crossfader + } + + transitions: Skin.HiddenTransition { + target: crossfader + } + } Skin.DeckRow { @@ -68,7 +135,7 @@ Rectangle { x: 5 states: Skin.HiddenState { - when: !root.show4decks + when: !root.show4decks || root.maximizeLibrary target: decks34 } From e792d2b5b2b6a5fed5ed3e270c22a1f6b7d7b943 Mon Sep 17 00:00:00 2001 From: Jan Holthuis Date: Fri, 4 Jun 2021 00:08:07 +0200 Subject: [PATCH 2/5] skins/QMLDemo: Fix button getting out of sync --- res/skins/QMLDemo/ControlButton.qml | 17 ++++++++++++++++- res/skins/QMLDemo/Deck.qml | 8 ++------ res/skins/QMLDemo/InfoBarButton.qml | 9 ++++++--- res/skins/QMLDemo/MiniDeck.qml | 2 +- res/skins/QMLDemo/MixerColumn.qml | 2 +- 5 files changed, 26 insertions(+), 12 deletions(-) diff --git a/res/skins/QMLDemo/ControlButton.qml b/res/skins/QMLDemo/ControlButton.qml index eb7a15ddf6a..9982444dfc2 100644 --- a/res/skins/QMLDemo/ControlButton.qml +++ b/res/skins/QMLDemo/ControlButton.qml @@ -6,11 +6,26 @@ Skin.Button { property string group // required property string key // required + property bool toggle: false + + highlight: control.value + onPressed: { + if (!toggle) + control.value = 1; + else + control.value = !control.value; + } + onReleased: { + if (!toggle) + control.value = 0; + + } Mixxx.ControlProxy { + id: control + group: root.group key: root.key - value: root.checked || root.down } } diff --git a/res/skins/QMLDemo/Deck.qml b/res/skins/QMLDemo/Deck.qml index 58a86a615f8..3c6d4a96a95 100644 --- a/res/skins/QMLDemo/Deck.qml +++ b/res/skins/QMLDemo/Deck.qml @@ -87,7 +87,6 @@ Item { width: rateSlider.width group: "[EffectRack1_EffectUnit1]" key: "group_" + root.group + "_enable" - checkable: true activeColor: Theme.deckActiveColor foreground: Text { @@ -121,7 +120,6 @@ Item { width: rateSlider.width group: "[EffectRack1_EffectUnit2]" key: "group_" + root.group + "_enable" - checkable: true activeColor: Theme.deckActiveColor foreground: Text { @@ -231,7 +229,6 @@ Item { anchors.right: waveformBarRightSpace.right group: root.group key: "quantize" - checkable: true activeColor: Theme.deckActiveColor foreground: Image { @@ -268,7 +265,6 @@ Item { anchors.right: waveformBarLeftSpace.right group: root.group key: "passthrough" - checkable: true activeColor: Theme.deckActiveColor foreground: Image { @@ -311,7 +307,7 @@ Item { group: root.group key: "play" text: "Play" - checkable: true + toggle: true activeColor: Theme.deckActiveColor } @@ -350,7 +346,7 @@ Item { text: "Sync" group: root.group key: "sync_enabled" - checkable: true + toggle: true activeColor: Theme.deckActiveColor } diff --git a/res/skins/QMLDemo/InfoBarButton.qml b/res/skins/QMLDemo/InfoBarButton.qml index c252b57066f..d6944068e9a 100644 --- a/res/skins/QMLDemo/InfoBarButton.qml +++ b/res/skins/QMLDemo/InfoBarButton.qml @@ -14,7 +14,9 @@ AbstractButton { property color normalColor: Theme.buttonNormalColor property color activeColor // required property color pressedColor: activeColor + property alias highlight: control.value + onPressed: control.value = !control.value states: [ State { name: "pressed" @@ -28,7 +30,7 @@ AbstractButton { }, State { name: "active" - when: root.checked && !root.pressed + when: root.highlight && !root.pressed PropertyChanges { target: colorOverlay @@ -38,7 +40,7 @@ AbstractButton { }, State { name: "inactive" - when: !root.checked && !root.pressed + when: !root.highlight && !root.pressed PropertyChanges { target: colorOverlay @@ -49,9 +51,10 @@ AbstractButton { ] Mixxx.ControlProxy { + id: control + group: root.group key: root.key - value: root.checked || root.down } Item { diff --git a/res/skins/QMLDemo/MiniDeck.qml b/res/skins/QMLDemo/MiniDeck.qml index c350e27ccfb..c12e85e1e46 100644 --- a/res/skins/QMLDemo/MiniDeck.qml +++ b/res/skins/QMLDemo/MiniDeck.qml @@ -32,7 +32,7 @@ Item { group: root.group key: "play" text: "Play" - checkable: true + toggle: true activeColor: Theme.deckActiveColor } diff --git a/res/skins/QMLDemo/MixerColumn.qml b/res/skins/QMLDemo/MixerColumn.qml index b1733874adf..6fe4575afaf 100644 --- a/res/skins/QMLDemo/MixerColumn.qml +++ b/res/skins/QMLDemo/MixerColumn.qml @@ -67,7 +67,7 @@ Item { anchors.bottom: parent.bottom text: "PFL" activeColor: Theme.pflActiveButtonColor - checkable: true + toggle: true } } From ba09cf90a0ccd9d61d579af833b97adec23d4788 Mon Sep 17 00:00:00 2001 From: Jan Holthuis Date: Fri, 4 Jun 2021 17:00:44 +0200 Subject: [PATCH 3/5] skins/QMLDemo: Minify actual decks and introduce FadeBehavior --- res/skins/QMLDemo/Deck.qml | 30 +++++++-- res/skins/QMLDemo/DeckRow.qml | 87 +++++++++++++++++++++++++- res/skins/QMLDemo/FadeBehavior.qml | 36 +++++++++++ res/skins/QMLDemo/HiddenState.qml | 15 ----- res/skins/QMLDemo/HiddenTransition.qml | 25 -------- res/skins/QMLDemo/MiniDeck.qml | 49 --------------- res/skins/QMLDemo/MiniDeckRow.qml | 25 -------- res/skins/QMLDemo/main.qml | 70 +++------------------ 8 files changed, 153 insertions(+), 184 deletions(-) create mode 100644 res/skins/QMLDemo/FadeBehavior.qml delete mode 100644 res/skins/QMLDemo/HiddenState.qml delete mode 100644 res/skins/QMLDemo/HiddenTransition.qml delete mode 100644 res/skins/QMLDemo/MiniDeck.qml delete mode 100644 res/skins/QMLDemo/MiniDeckRow.qml diff --git a/res/skins/QMLDemo/Deck.qml b/res/skins/QMLDemo/Deck.qml index 3c6d4a96a95..71b001ded26 100644 --- a/res/skins/QMLDemo/Deck.qml +++ b/res/skins/QMLDemo/Deck.qml @@ -10,10 +10,12 @@ Item { id: root property string group // required + property bool minimized: false Skin.DeckInfoBar { id: infoBar + anchors.leftMargin: 5 anchors.top: parent.top anchors.left: parent.left anchors.right: parent.right @@ -24,6 +26,7 @@ Item { Skin.Slider { id: rateSlider + visible: !root.minimized anchors.topMargin: 5 anchors.bottomMargin: 5 anchors.top: infoBar.bottom @@ -35,15 +38,21 @@ Item { barStart: 0.5 barColor: Theme.bpmSliderBarColor bg: "images/slider_bpm.svg" + + FadeBehavior on visible { + fadeTarget: rateSlider + } + } Rectangle { id: overview - anchors.topMargin: 5 - anchors.bottomMargin: 5 + visible: !root.minimized + anchors.leftMargin: 5 anchors.rightMargin: 5 - anchors.top: infoBar.bottom + anchors.bottomMargin: 5 + anchors.top: rateSlider.top anchors.bottom: buttonBar.top anchors.left: parent.left anchors.right: rateSlider.left @@ -276,6 +285,10 @@ Item { } + FadeBehavior on visible { + fadeTarget: overview + } + } Item { @@ -284,13 +297,16 @@ Item { anchors.bottom: parent.bottom anchors.left: parent.left anchors.right: parent.right + anchors.leftMargin: 5 height: 56 + visible: !root.minimized Skin.ControlButton { id: cueButton anchors.left: parent.left - anchors.top: parent.top + anchors.bottom: playButton.top + anchors.bottomMargin: 5 group: root.group key: "cue_default" text: "Cue" @@ -300,7 +316,6 @@ Item { Skin.ControlButton { id: playButton - anchors.top: cueButton.bottom anchors.left: parent.left anchors.bottom: parent.bottom anchors.topMargin: 5 @@ -314,7 +329,6 @@ Item { Row { anchors.left: cueButton.right anchors.top: parent.top - anchors.bottom: parent.bottom anchors.leftMargin: 10 spacing: -1 @@ -350,6 +364,10 @@ Item { activeColor: Theme.deckActiveColor } + FadeBehavior on visible { + fadeTarget: buttonBar + } + } } diff --git a/res/skins/QMLDemo/DeckRow.qml b/res/skins/QMLDemo/DeckRow.qml index e33d8e7d30d..22506ecba1a 100644 --- a/res/skins/QMLDemo/DeckRow.qml +++ b/res/skins/QMLDemo/DeckRow.qml @@ -7,15 +7,73 @@ Item { property string leftDeckGroup // required property string rightDeckGroup // required property alias mixer: mixer + property bool minimized: false implicitHeight: mixer.height + states: [ + State { + when: root.minimized + name: "minimized" + + PropertyChanges { + target: mixer + visible: false + } + + PropertyChanges { + target: root + implicitHeight: 56 + } + + AnchorChanges { + target: leftDeck + anchors.right: mixer.horizontalCenter + } + + AnchorChanges { + target: rightDeck + anchors.left: mixer.horizontalCenter + } + + }, + State { + // This State can't be deduplicated by making the first one + // reversible, because for decks 3/4 the mixer may already be + // hidden (since the whole deck row is already hidden). In that + // case, disabling the minimized state would not show the mixer + // again. + when: !root.minimized + name: "maximized" + + PropertyChanges { + target: mixer + visible: true + } + + PropertyChanges { + target: root + implicitHeight: mixer.height + } + + AnchorChanges { + target: leftDeck + anchors.right: mixer.left + } + + AnchorChanges { + target: rightDeck + anchors.left: mixer.right + } + + } + ] Deck { id: leftDeck + minimized: root.minimized anchors.top: parent.top anchors.left: parent.left - anchors.right: mixer.left anchors.bottom: parent.bottom anchors.rightMargin: 5 group: root.leftDeckGroup @@ -28,17 +86,42 @@ Item { anchors.horizontalCenter: parent.horizontalCenter leftDeckGroup: root.leftDeckGroup rightDeckGroup: root.rightDeckGroup + + FadeBehavior on visible { + fadeTarget: mixer + } + } Deck { id: rightDeck + minimized: root.minimized anchors.top: parent.top - anchors.left: mixer.right anchors.right: parent.right anchors.bottom: parent.bottom anchors.leftMargin: 5 group: root.rightDeckGroup } + transitions: Transition { + to: "minimized" + reversible: true + + SequentialAnimation { + AnchorAnimation { + targets: [leftDeck, rightDeck] + duration: 150 + } + + PropertyAnimation { + target: root + property: "implicitHeight" + duration: 150 + } + + } + + } + } diff --git a/res/skins/QMLDemo/FadeBehavior.qml b/res/skins/QMLDemo/FadeBehavior.qml new file mode 100644 index 00000000000..4978b8525c4 --- /dev/null +++ b/res/skins/QMLDemo/FadeBehavior.qml @@ -0,0 +1,36 @@ +import QtQuick 2.12 + +Behavior { + id: root + + // Starting with QtQuick 2.15, we can use targetProperty.object here + property Item fadeTarget + + SequentialAnimation { + // If the opacity is 1, animate it down to 0 + NumberAnimation { + target: root.fadeTarget + property: "opacity" + from: 1 + to: 0 + easing.type: Easing.InQuad + duration: 150 + } + + // Actually change the property value (i.e. "visible") + PropertyAction { + } + + // If the opacity is 0, animate it up to 1 + NumberAnimation { + target: root.fadeTarget + from: 0 + to: 1 + property: "opacity" + easing.type: Easing.OutQuad + duration: 150 + } + + } + +} diff --git a/res/skins/QMLDemo/HiddenState.qml b/res/skins/QMLDemo/HiddenState.qml deleted file mode 100644 index 19435a9b3e3..00000000000 --- a/res/skins/QMLDemo/HiddenState.qml +++ /dev/null @@ -1,15 +0,0 @@ -import QtQuick 2.12 - -State { - property alias target: changes.target - - name: "hidden" - - PropertyChanges { - id: changes - - opacity: 0 - visible: false - } - -} diff --git a/res/skins/QMLDemo/HiddenTransition.qml b/res/skins/QMLDemo/HiddenTransition.qml deleted file mode 100644 index 65379d70b53..00000000000 --- a/res/skins/QMLDemo/HiddenTransition.qml +++ /dev/null @@ -1,25 +0,0 @@ -import QtQuick 2.12 - -Transition { - id: root - - property var target // required - - to: "hidden" - reversible: true - - SequentialAnimation { - NumberAnimation { - target: root.target - property: "opacity" - duration: 150 - } - - PropertyAction { - target: root.target - property: "visible" - } - - } - -} diff --git a/res/skins/QMLDemo/MiniDeck.qml b/res/skins/QMLDemo/MiniDeck.qml deleted file mode 100644 index c12e85e1e46..00000000000 --- a/res/skins/QMLDemo/MiniDeck.qml +++ /dev/null @@ -1,49 +0,0 @@ -import "." as Skin -import QtQuick 2.12 -import QtQuick.Controls 2.12 -import "Theme" - -Item { - id: root - - property string group // required - - height: buttonColumn.implicitHeight - - Column { - id: buttonColumn - - anchors.left: parent.left - width: 56 - spacing: 5 - - Skin.ControlButton { - id: cueButton - - group: root.group - key: "cue_default" - text: "Cue" - activeColor: Theme.deckActiveColor - } - - Skin.ControlButton { - id: playButton - - group: root.group - key: "play" - text: "Play" - toggle: true - activeColor: Theme.deckActiveColor - } - - } - - Skin.WaveformOverview { - group: root.group - anchors.top: buttonColumn.top - anchors.bottom: buttonColumn.bottom - anchors.left: buttonColumn.right - anchors.right: parent.right - } - -} diff --git a/res/skins/QMLDemo/MiniDeckRow.qml b/res/skins/QMLDemo/MiniDeckRow.qml deleted file mode 100644 index c67a8e6b693..00000000000 --- a/res/skins/QMLDemo/MiniDeckRow.qml +++ /dev/null @@ -1,25 +0,0 @@ -import QtQuick.Layouts 1.12 - -RowLayout { - id: root - - property string leftDeckGroup // required - property string rightDeckGroup // required - - height: leftDeck.height - - MiniDeck { - id: leftDeck - - Layout.fillWidth: true - group: root.leftDeckGroup - } - - MiniDeck { - id: rightDeck - - Layout.fillWidth: true - group: root.rightDeckGroup - } - -} diff --git a/res/skins/QMLDemo/main.qml b/res/skins/QMLDemo/main.qml index 8c1d3858c6e..9a4a3f643bc 100644 --- a/res/skins/QMLDemo/main.qml +++ b/res/skins/QMLDemo/main.qml @@ -51,44 +51,6 @@ Rectangle { } - Skin.MiniDeckRow { - id: decks12mini - - leftDeckGroup: "[Channel1]" - rightDeckGroup: "[Channel2]" - width: parent.width - 10 - x: 5 - - states: Skin.HiddenState { - when: !root.maximizeLibrary - target: decks12mini - } - - transitions: Skin.HiddenTransition { - target: decks12mini - } - - } - - Skin.MiniDeckRow { - id: decks34mini - - leftDeckGroup: "[Channel3]" - rightDeckGroup: "[Channel4]" - width: parent.width - 10 - x: 5 - - states: Skin.HiddenState { - when: !root.show4decks || !root.maximizeLibrary - target: decks34mini - } - - transitions: Skin.HiddenTransition { - target: decks34mini - } - - } - Skin.DeckRow { id: decks12 @@ -96,16 +58,7 @@ Rectangle { rightDeckGroup: "[Channel2]" width: parent.width - 10 x: 5 - - states: Skin.HiddenState { - when: root.maximizeLibrary - target: decks12 - } - - transitions: Skin.HiddenTransition { - target: decks12 - } - + minimized: root.maximizeLibrary } Skin.CrossfaderRow { @@ -114,14 +67,10 @@ Rectangle { crossfaderWidth: decks12.mixer.width width: parent.width - 10 x: 5 + visible: !root.maximizeLibrary - states: Skin.HiddenState { - when: root.maximizeLibrary - target: crossfader - } - - transitions: Skin.HiddenTransition { - target: crossfader + FadeBehavior on visible { + fadeTarget: crossfader } } @@ -133,14 +82,11 @@ Rectangle { rightDeckGroup: "[Channel4]" width: parent.width - 10 x: 5 + minimized: root.maximizeLibrary + visible: root.show4decks - states: Skin.HiddenState { - when: !root.show4decks || root.maximizeLibrary - target: decks34 - } - - transitions: Skin.HiddenTransition { - target: decks34 + FadeBehavior on visible { + fadeTarget: decks34 } } From 03e28a058cf1c6d2a81346ba7c870d2d10339c78 Mon Sep 17 00:00:00 2001 From: Jan Holthuis Date: Fri, 4 Jun 2021 20:39:57 +0200 Subject: [PATCH 4/5] skins/QMLDemo: Rename ControlButton toggle property to toggleable --- res/skins/QMLDemo/ControlButton.qml | 10 +++++----- res/skins/QMLDemo/Deck.qml | 4 ++-- res/skins/QMLDemo/MixerColumn.qml | 2 +- 3 files changed, 8 insertions(+), 8 deletions(-) diff --git a/res/skins/QMLDemo/ControlButton.qml b/res/skins/QMLDemo/ControlButton.qml index 9982444dfc2..f69ec0d72f1 100644 --- a/res/skins/QMLDemo/ControlButton.qml +++ b/res/skins/QMLDemo/ControlButton.qml @@ -6,17 +6,17 @@ Skin.Button { property string group // required property string key // required - property bool toggle: false + property bool toggleable: false highlight: control.value onPressed: { - if (!toggle) - control.value = 1; - else + if (toggleable) control.value = !control.value; + else + control.value = 1; } onReleased: { - if (!toggle) + if (!toggleable) control.value = 0; } diff --git a/res/skins/QMLDemo/Deck.qml b/res/skins/QMLDemo/Deck.qml index 71b001ded26..899c1f0ecb5 100644 --- a/res/skins/QMLDemo/Deck.qml +++ b/res/skins/QMLDemo/Deck.qml @@ -322,7 +322,7 @@ Item { group: root.group key: "play" text: "Play" - toggle: true + toggleable: true activeColor: Theme.deckActiveColor } @@ -360,7 +360,7 @@ Item { text: "Sync" group: root.group key: "sync_enabled" - toggle: true + toggleable: true activeColor: Theme.deckActiveColor } diff --git a/res/skins/QMLDemo/MixerColumn.qml b/res/skins/QMLDemo/MixerColumn.qml index 6fe4575afaf..97ae8383c63 100644 --- a/res/skins/QMLDemo/MixerColumn.qml +++ b/res/skins/QMLDemo/MixerColumn.qml @@ -67,7 +67,7 @@ Item { anchors.bottom: parent.bottom text: "PFL" activeColor: Theme.pflActiveButtonColor - toggle: true + toggleable: true } } From c0e727a5b6a70d954bb0f13e595e35e43b08d0e8 Mon Sep 17 00:00:00 2001 From: Jan Holthuis Date: Fri, 4 Jun 2021 22:04:00 +0200 Subject: [PATCH 5/5] skins/QMLDemo: Factor out toggle() method for buttons --- res/skins/QMLDemo/ControlButton.qml | 6 +++++- res/skins/QMLDemo/InfoBarButton.qml | 6 +++++- 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/res/skins/QMLDemo/ControlButton.qml b/res/skins/QMLDemo/ControlButton.qml index f69ec0d72f1..6a44ef06e2f 100644 --- a/res/skins/QMLDemo/ControlButton.qml +++ b/res/skins/QMLDemo/ControlButton.qml @@ -8,10 +8,14 @@ Skin.Button { property string key // required property bool toggleable: false + function toggle() { + control.value = !control.value; + } + highlight: control.value onPressed: { if (toggleable) - control.value = !control.value; + toggle(); else control.value = 1; } diff --git a/res/skins/QMLDemo/InfoBarButton.qml b/res/skins/QMLDemo/InfoBarButton.qml index d6944068e9a..51962df1e61 100644 --- a/res/skins/QMLDemo/InfoBarButton.qml +++ b/res/skins/QMLDemo/InfoBarButton.qml @@ -16,7 +16,11 @@ AbstractButton { property color pressedColor: activeColor property alias highlight: control.value - onPressed: control.value = !control.value + function toggle() { + control.value = !control.value; + } + + onPressed: toggle() states: [ State { name: "pressed"