From 158a262d8abe3e8fe639c9a35acaf17e72826b24 Mon Sep 17 00:00:00 2001 From: Emeric Date: Wed, 21 Sep 2022 16:42:00 +0200 Subject: [PATCH] Simplify some UI components --- qml/MainView.qml | 5 +- qml/components_generic/AndroidButton.qml | 10 ++-- qml/components_generic/AndroidButtonIcon.qml | 10 ++-- qml/components_generic/ButtonCompactable.qml | 48 +++++----------- qml/components_generic/ButtonImage.qml | 25 +++------ qml/components_generic/ButtonWireframe.qml | 13 +---- .../ButtonWireframeIcon.qml | 13 +---- .../ButtonWireframeIconCentered.qml | 13 +---- qml/components_generic/CsdLinux.qml | 32 ++++------- qml/components_generic/CsdMac.qml | 11 +--- qml/components_generic/CsdWindows.qml | 34 ++++------- qml/components_generic/DesktopHeaderItem.qml | 56 +++++++------------ qml/components_generic/DesktopSidebarItem.qml | 17 ++---- .../MobileMenuItem_horizontal.qml | 3 +- .../MobileMenuItem_vertical.qml | 3 +- qml/components_generic/RoundButtonIcon.qml | 23 +++----- qml/components_generic/RoundButtonText.qml | 23 +++----- qml/components_generic/SelectorMenuItem.qml | 18 ++---- .../SelectorMenuThemedItem.qml | 13 ++--- 19 files changed, 116 insertions(+), 254 deletions(-) diff --git a/qml/MainView.qml b/qml/MainView.qml index 552057d..83c6f2b 100644 --- a/qml/MainView.qml +++ b/qml/MainView.qml @@ -715,15 +715,14 @@ Item { width: 112 value: 0.33 } -/* + ButtonImage { width: 128 height: 128 hoverMode: "glow" - source: "qrc:/assets/button.png" + source: "qrc:/assets/logos/logo.svg" sourceSize: 96 } -*/ } //////////////////////// diff --git a/qml/components_generic/AndroidButton.qml b/qml/components_generic/AndroidButton.qml index 7f10822..21c2d17 100644 --- a/qml/components_generic/AndroidButton.qml +++ b/qml/components_generic/AndroidButton.qml @@ -24,7 +24,7 @@ T.Button { //////////////////////////////////////////////////////////////////////////// MouseArea { - id: mousearea + id: mouseArea anchors.fill: control hoverEnabled: false @@ -40,15 +40,15 @@ T.Button { implicitHeight: 56 Rectangle { // mouseBackground - width: mousearea.pressed ? control.width*2 : 0 + width: mouseArea.pressed ? control.width*2 : 0 height: width radius: width - x: mousearea.mouseX + 4 - (width / 2) - y: mousearea.mouseY + 4 - (width / 2) + x: mouseArea.mouseX + 4 - (width / 2) + y: mouseArea.mouseY + 4 - (width / 2) color: control.primaryColor - opacity: mousearea.pressed ? 0.1 : 0 + opacity: mouseArea.pressed ? 0.1 : 0 Behavior on opacity { NumberAnimation { duration: 333 } } Behavior on width { NumberAnimation { duration: 333 } } } diff --git a/qml/components_generic/AndroidButtonIcon.qml b/qml/components_generic/AndroidButtonIcon.qml index 6d60c65..0647b3c 100644 --- a/qml/components_generic/AndroidButtonIcon.qml +++ b/qml/components_generic/AndroidButtonIcon.qml @@ -33,7 +33,7 @@ T.Button { //////////////////////////////////////////////////////////////////////////// MouseArea { - id: mousearea + id: mouseArea anchors.fill: control hoverEnabled: false @@ -72,15 +72,15 @@ T.Button { //////// Rectangle { // mouseBackground - width: mousearea.pressed ? control.width*2 : 0 + width: mouseArea.pressed ? control.width*2 : 0 height: width radius: width - x: mousearea.mouseX + 4 - (width / 2) - y: mousearea.mouseY + 4 - (width / 2) + x: mouseArea.mouseX + 4 - (width / 2) + y: mouseArea.mouseY + 4 - (width / 2) color: "#222" - opacity: mousearea.pressed ? 0.1 : 0 + opacity: mouseArea.pressed ? 0.1 : 0 Behavior on opacity { NumberAnimation { duration: 333 } } Behavior on width { NumberAnimation { duration: 333 } } } diff --git a/qml/components_generic/ButtonCompactable.qml b/qml/components_generic/ButtonCompactable.qml index d369a72..ed1ed0a 100644 --- a/qml/components_generic/ButtonCompactable.qml +++ b/qml/components_generic/ButtonCompactable.qml @@ -16,12 +16,9 @@ Item { // actions signal clicked() + signal pressed() signal pressAndHold() - // states - property bool hovered: false - property bool pressed: false - // settings property bool compact: true property string text @@ -45,41 +42,22 @@ Item { //////////////////////////////////////////////////////////////////////////// MouseArea { - id: mousearea + id: mouseArea anchors.fill: parent hoverEnabled: (isDesktop && control.enabled) onClicked: control.clicked() - onPressAndHold: control.pressAndHold() - onPressed: { - control.pressed = true + control.pressed() mouseBackground.width = (control.width * 2) - mouseBackground.opacity = 0.16 - } - onReleased: { - control.pressed = false - //mouseBackground.width = 0 - //mouseBackground.opacity = 0 } + onPressAndHold: control.pressAndHold() - onEntered: { - control.hovered = true - mouseBackground.width = 72 - mouseBackground.opacity = 0.16 - } - onExited: { - control.hovered = false - mouseBackground.width = 0 - mouseBackground.opacity = 0 - } - onCanceled: { - control.hovered = false - control.pressed = false - mouseBackground.width = 0 - mouseBackground.opacity = 0 - } + //onReleased: mouseBackground.width = 0 // let the click expand the ripple + onEntered: mouseBackground.width = 72 + onExited: mouseBackground.width = 0 + onCanceled: mouseBackground.width = 0 } //////////////////////////////////////////////////////////////////////////// @@ -90,18 +68,18 @@ Item { radius: control.compact ? (control.height / 2) : Theme.componentRadius color: control.backgroundColor - opacity: (!control.compact || control.hovered) ? 1 : 0 + opacity: (!control.compact || mouseArea.containsMouse) ? 1 : 0 Behavior on opacity { NumberAnimation { duration: 333 } } Rectangle { id: mouseBackground width: 0; height: width; radius: width; - x: mousearea.mouseX - (width / 2) - y: mousearea.mouseY - (width / 2) + x: mouseArea.mouseX - (width / 2) + y: mouseArea.mouseY - (width / 2) visible: !control.compact color: "white" - opacity: 0 + opacity: mouseArea.containsMouse ? 0.16 : 0 Behavior on opacity { NumberAnimation { duration: 333 } } Behavior on width { NumberAnimation { duration: 200 } } } @@ -180,7 +158,7 @@ Item { active: control.tooltipText sourceComponent: ToolTipFlat { - visible: control.hovered + visible: mouseArea.containsMouse text: control.tooltipText textColor: control.textColor tooltipPosition: control.tooltipPosition diff --git a/qml/components_generic/ButtonImage.qml b/qml/components_generic/ButtonImage.qml index 0b4d35b..a45708e 100644 --- a/qml/components_generic/ButtonImage.qml +++ b/qml/components_generic/ButtonImage.qml @@ -12,12 +12,9 @@ Item { // actions signal clicked() + signal pressed() signal pressAndHold() - // states - property bool hovered: false - property bool pressed: false - // image property url source property int sourceSize: 32 @@ -32,22 +29,14 @@ Item { //////////////////////////////////////////////////////////////////////////// MouseArea { + id: mouseArea anchors.fill: parent propagateComposedEvents: false hoverEnabled: (isDesktop && control.enabled) onClicked: control.clicked() + onPressed: control.pressed() onPressAndHold: control.pressAndHold() - - onPressed: control.pressed = true - onReleased: control.pressed = false - - onEntered: control.hovered = true - onExited: control.hovered = false - onCanceled: { - control.hovered = false - control.pressed = false - } } //////////////////////////////////////////////////////////////////////////// @@ -62,7 +51,7 @@ Item { radius: control.width color: control.highlightColor - opacity: control.hovered ? 0.33 : 0 + opacity: mouseArea.containsMouse ? 0.33 : 0 Behavior on opacity { OpacityAnimator { duration: 333 } } } Glow { @@ -78,7 +67,7 @@ Item { //samples: 16 transparentBorder: true - opacity: control.hovered ? 1 : 0 + opacity: mouseArea.containsMouse ? 1 : 0 Behavior on opacity { OpacityAnimator { duration: 333 } } } @@ -88,8 +77,8 @@ Item { id: contentImage anchors.centerIn: parent - width: Math.round(control.sourceSize * (control.pressed ? 0.9 : 1)) - height: Math.round(control.sourceSize * (control.pressed ? 0.9 : 1)) + width: Math.round(control.sourceSize * (mouseArea.containsPress ? 0.9 : 1)) + height: Math.round(control.sourceSize * (mouseArea.containsPress ? 0.9 : 1)) source: control.source sourceSize: Qt.size(control.sourceSize, control.sourceSize) diff --git a/qml/components_generic/ButtonWireframe.qml b/qml/components_generic/ButtonWireframe.qml index e608b32..643d0b1 100644 --- a/qml/components_generic/ButtonWireframe.qml +++ b/qml/components_generic/ButtonWireframe.qml @@ -40,7 +40,6 @@ T.Button { enabled: control.hoverAnimation hoverEnabled: control.hoverAnimation - property bool hovered: false onClicked: control.clicked() onPressAndHold: control.pressAndHold() @@ -48,29 +47,21 @@ T.Button { onPressed: { control.down = true mouseBackground.width = (control.width * 2) - mouseBackground.opacity = 0.16 } onReleased: { control.down = false - //mouseBackground.width = 0 - //mouseBackground.opacity = 0 + //mouseBackground.width = 0 // let the click expand the ripple } onEntered: { - mousearea.hovered = true mouseBackground.width = 72 - mouseBackground.opacity = 0.16 } onExited: { - mousearea.hovered = false control.down = false mouseBackground.width = 0 - mouseBackground.opacity = 0 } onCanceled: { - mousearea.hovered = false control.down = false mouseBackground.width = 0 - mouseBackground.opacity = 0 } } @@ -94,7 +85,7 @@ T.Button { visible: control.hoverAnimation color: "white" - opacity: 0 + opacity: mousearea.containsMouse ? 0.16 : 0 Behavior on opacity { NumberAnimation { duration: 333 } } Behavior on width { NumberAnimation { duration: 200 } } } diff --git a/qml/components_generic/ButtonWireframeIcon.qml b/qml/components_generic/ButtonWireframeIcon.qml index c9c9c67..00fdd00 100644 --- a/qml/components_generic/ButtonWireframeIcon.qml +++ b/qml/components_generic/ButtonWireframeIcon.qml @@ -47,7 +47,6 @@ T.Button { enabled: control.hoverAnimation hoverEnabled: control.hoverAnimation - property bool hovered: false onClicked: control.clicked() onPressAndHold: control.pressAndHold() @@ -55,30 +54,22 @@ T.Button { onPressed: { control.down = true mouseBackground.width = (control.width * 2) - mouseBackground.opacity = 0.16 } onReleased: { control.down = false - //mouseBackground.width = 0 - //mouseBackground.opacity = 0 + //mouseBackground.width = 0 // let the click expand the ripple } onEntered: { - mousearea.hovered = true mouseBackground.width = 72 - mouseBackground.opacity = 0.16 } onExited: { - mousearea.hovered = false control.down = false mouseBackground.width = 0 - mouseBackground.opacity = 0 } onCanceled: { - mousearea.hovered = false control.down = false mouseBackground.width = 0 - mouseBackground.opacity = 0 } } @@ -103,7 +94,7 @@ T.Button { visible: control.hoverAnimation color: "white" - opacity: 0 + opacity: mousearea.containsMouse ? 0.16 : 0 Behavior on opacity { NumberAnimation { duration: 333 } } Behavior on width { NumberAnimation { duration: 200 } } } diff --git a/qml/components_generic/ButtonWireframeIconCentered.qml b/qml/components_generic/ButtonWireframeIconCentered.qml index 7bf8bf7..909e69f 100644 --- a/qml/components_generic/ButtonWireframeIconCentered.qml +++ b/qml/components_generic/ButtonWireframeIconCentered.qml @@ -47,7 +47,6 @@ T.Button { enabled: control.hoverAnimation hoverEnabled: control.hoverAnimation - property bool hovered: false onClicked: control.clicked() onPressAndHold: control.pressAndHold() @@ -55,30 +54,22 @@ T.Button { onPressed: { control.down = true mouseBackground.width = (control.width * 2) - mouseBackground.opacity = 0.16 } onReleased: { control.down = false - //mouseBackground.width = 0 - //mouseBackground.opacity = 0 + //mouseBackground.width = 0 // let the click expand the ripple } onEntered: { - mousearea.hovered = true mouseBackground.width = 72 - mouseBackground.opacity = 0.16 } onExited: { - mousearea.hovered = false control.down = false mouseBackground.width = 0 - mouseBackground.opacity = 0 } onCanceled: { - mousearea.hovered = false control.down = false mouseBackground.width = 0 - mouseBackground.opacity = 0 } } @@ -103,7 +94,7 @@ T.Button { visible: control.hoverAnimation color: "white" - opacity: 0 + opacity: mousearea.containsMouse ? 0.16 : 0 Behavior on opacity { NumberAnimation { duration: 333 } } Behavior on width { NumberAnimation { duration: 200 } } } diff --git a/qml/components_generic/CsdLinux.qml b/qml/components_generic/CsdLinux.qml index d09f551..7cf3592 100644 --- a/qml/components_generic/CsdLinux.qml +++ b/qml/components_generic/CsdLinux.qml @@ -24,26 +24,22 @@ Loader { Rectangle { // button minimize width: 26; height: 26; radius: 26; - color: hovered ? "#66aaaaaa" : "#33aaaaaa" + color: mouseAreaMin.containsMouse ? "#66aaaaaa" : "#33aaaaaa" Behavior on color { ColorAnimation { duration: 233; easing.type: Easing.InOutCirc; } } - property bool hovered: false - Rectangle { width: 10; height: 2; anchors.horizontalCenter: parent.horizontalCenter anchors.verticalCenter: parent.verticalCenter anchors.verticalCenterOffset: 4 - color: parent.hovered ? Theme.colorHighContrast : Theme.colorIcon + color: mouseAreaMin.containsMouse ? Theme.colorHighContrast : Theme.colorIcon } MouseArea { + id: mouseAreaMin anchors.fill: parent hoverEnabled: true - onEntered: parent.hovered = true - onExited: parent.hovered = false - onCanceled: parent.hovered = false onClicked: appWindow.showMinimized() } } @@ -52,26 +48,22 @@ Loader { Rectangle { // button maximize width: 26; height: 26; radius: 26; - color: hovered ? "#66aaaaaa" : "#33aaaaaa" + color: mouseAreaMax.containsMouse ? "#66aaaaaa" : "#33aaaaaa" Behavior on color { ColorAnimation { duration: 233; easing.type: Easing.InOutCirc; } } - property bool hovered: false - Rectangle { width: 10; height: 10; anchors.centerIn: parent color: "transparent" border.width: 2 - border.color: parent.hovered ? Theme.colorHighContrast : Theme.colorIcon + border.color: mouseAreaMax.containsMouse ? Theme.colorHighContrast : Theme.colorIcon } MouseArea { + id: mouseAreaMax anchors.fill: parent hoverEnabled: true - onEntered: parent.hovered = true - onExited: parent.hovered = false - onCanceled: parent.hovered = false onClicked: { if (appWindow.visibility === ApplicationWindow.Maximized) appWindow.showNormal() @@ -85,31 +77,27 @@ Loader { Rectangle { // button close width: 26; height: 26; radius: 26; - color: hovered ? "red" : "#33aaaaaa" + color: mouseAreaClose.containsMouse ? "red" : "#33aaaaaa" Behavior on color { ColorAnimation { duration: 233; easing.type: Easing.InOutCirc; } } - property bool hovered: false - Rectangle { width: 13; height: 2; radius: 2; anchors.centerIn: parent rotation: 45 - color: parent.hovered ? "white" : Theme.colorIcon + color: mouseAreaClose.containsMouse ? "white" : Theme.colorIcon } Rectangle { width: 13; height: 2; radius: 2; anchors.centerIn: parent rotation: -45 - color: parent.hovered ? "white" : Theme.colorIcon + color: mouseAreaClose.containsMouse ? "white" : Theme.colorIcon } MouseArea { + id: mouseAreaClose anchors.fill: parent hoverEnabled: true - onEntered: parent.hovered = true - onExited: parent.hovered = false - onCanceled: parent.hovered = false onClicked: appWindow.close() } } diff --git a/qml/components_generic/CsdMac.qml b/qml/components_generic/CsdMac.qml index 56cfb39..a0b5ef3 100644 --- a/qml/components_generic/CsdMac.qml +++ b/qml/components_generic/CsdMac.qml @@ -16,18 +16,13 @@ Loader { implicitWidth: 48 implicitHeight: 24 - property bool hovered: false - //////// MouseArea { - id: buttonsArea + id: mouseArea anchors.fill: buttonsRow hoverEnabled: visible - onEntered: csdMac.hovered = true - onExited: csdMac.hovered = false - onCanceled: csdMac.hovered = false } //////// @@ -46,7 +41,7 @@ Loader { width: 10; height: 10; anchors.centerIn: parent source: "qrc:/assets/icons_material/baseline-close-24px.svg" - opacity: csdMac.hovered ? 0.6 : 0 + opacity: mouseArea.containsMouse ? 0.6 : 0 //Behavior on opacity { OpacityAnimator { duration: 133 } } } MouseArea { @@ -62,7 +57,7 @@ Loader { width: 8; height: 1; anchors.centerIn: parent color: "grey" - opacity: csdMac.hovered ? 0.8 : 0 + opacity: mouseArea.containsMouse ? 0.8 : 0 //Behavior on opacity { OpacityAnimator { duration: 133 } } } MouseArea { diff --git a/qml/components_generic/CsdWindows.qml b/qml/components_generic/CsdWindows.qml index 386af11..3a1b54e 100644 --- a/qml/components_generic/CsdWindows.qml +++ b/qml/components_generic/CsdWindows.qml @@ -24,23 +24,19 @@ Loader { Rectangle { // button minimize width: 46; height: 28; - color: hovered ? "#33aaaaaa" : "transparent" - - property bool hovered: false + color: mouseAreaMin.containsMouse ? "#33aaaaaa" : "transparent" Rectangle { width: 10; height: 1; anchors.centerIn: parent - color: parent.hovered ? Theme.colorHighContrast : Theme.colorIcon + color: mouseAreaMin.containsMouse ? Theme.colorHighContrast : Theme.colorIcon } MouseArea { + id: mouseAreaMin anchors.fill: parent hoverEnabled: true - onEntered: parent.hovered = true - onExited: parent.hovered = false - onCanceled: parent.hovered = false onClicked: appWindow.showMinimized() } } @@ -49,25 +45,21 @@ Loader { Rectangle { // button maximize width: 46; height: 28; - color: hovered ? "#33aaaaaa" : "transparent" - - property bool hovered: false + color: mouseAreaMax.containsMouse ? "#33aaaaaa" : "transparent" Rectangle { width: 10; height: 10; anchors.centerIn: parent color: "transparent" border.width: 1 - border.color: parent.hovered ? Theme.colorHighContrast : Theme.colorIcon + border.color: mouseAreaMax.containsMouse ? Theme.colorHighContrast : Theme.colorIcon } MouseArea { + id: mouseAreaMax anchors.fill: parent hoverEnabled: true - onEntered: parent.hovered = true - onExited: parent.hovered = false - onCanceled: parent.hovered = false onClicked: { if (appWindow.visibility === ApplicationWindow.Maximized) appWindow.showNormal() @@ -81,38 +73,34 @@ Loader { Rectangle { // button close width: 46; height: 28; - color: hovered ? "red" : "transparent" - - property bool hovered: false + color: mouseAreaClose.containsMouse ? "red" : "transparent" IconSvg { width: 16; height: 16; anchors.centerIn: parent source: "qrc:/assets/icons_material/baseline-close-24px.svg" - color: parent.hovered ? "white" : Theme.colorIcon + color: mouseAreaClose.containsMouse ? "white" : Theme.colorIcon } /* Rectangle { width: 12; height: 1; anchors.centerIn: parent rotation: 45 - color: parent.hovered ? "white" : Theme.colorIcon + color: mouseAreaClose.containsMouse ? "white" : Theme.colorIcon } Rectangle { width: 12; height: 1; anchors.centerIn: parent rotation: -45 - color: parent.hovered ? "white" : Theme.colorIcon + color: mouseAreaClose.containsMouse ? "white" : Theme.colorIcon } */ MouseArea { + id: mouseAreaClose anchors.fill: parent hoverEnabled: true - onEntered: parent.hovered = true - onExited: parent.hovered = false - onCanceled: parent.hovered = false onClicked: appWindow.close() } } diff --git a/qml/components_generic/DesktopHeaderItem.qml b/qml/components_generic/DesktopHeaderItem.qml index e9a3f60..cf1e055 100644 --- a/qml/components_generic/DesktopHeaderItem.qml +++ b/qml/components_generic/DesktopHeaderItem.qml @@ -13,11 +13,10 @@ Item { // actions signal clicked() + signal pressed() signal pressAndHold() // states - property bool hovered: false - property bool pressed: false property bool selected: false // settings @@ -37,47 +36,34 @@ Item { hoverEnabled: true onClicked: control.clicked() + onPressed: control.pressed() onPressAndHold: control.pressAndHold() - onPressed: control.pressed = true - onReleased: control.pressed = false + Rectangle { // bgRect + anchors.fill: parent - onEntered: control.hovered = true - onExited: control.hovered = false - onCanceled: { - control.hovered = false - control.pressed = false + visible: (control.selected && control.highlightMode === "background") + color: control.colorHighlight } - } - - //////////////////////////////////////////////////////////////////////////// - - Rectangle { - id: bgRect - anchors.fill: parent - visible: (control.selected && control.highlightMode === "background") - color: control.colorHighlight - } - Rectangle { - id: bgFocus - anchors.fill: parent + Rectangle { // bgFocus + anchors.fill: parent - visible: (highlightMode === "background") - color: control.colorHighlight - opacity: control.hovered ? 0.5 : 0 - Behavior on opacity { OpacityAnimator { duration: 333 } } - } + visible: (highlightMode === "background") + color: control.colorHighlight + opacity: parent.containsMouse ? 0.5 : 0 + Behavior on opacity { OpacityAnimator { duration: 333 } } + } - Rectangle { - id: indicator - anchors.left: parent.left - anchors.right: parent.right - anchors.bottom: parent.bottom + Rectangle { // indicator + anchors.left: parent.left + anchors.right: parent.right + anchors.bottom: parent.bottom - height: 4 - visible: (control.selected && highlightMode === "indicator") - color: Theme.colorPrimary + height: 4 + visible: (control.selected && highlightMode === "indicator") + color: Theme.colorPrimary + } } //////////////////////////////////////////////////////////////////////////// diff --git a/qml/components_generic/DesktopSidebarItem.qml b/qml/components_generic/DesktopSidebarItem.qml index 2e29995..de6d16a 100644 --- a/qml/components_generic/DesktopSidebarItem.qml +++ b/qml/components_generic/DesktopSidebarItem.qml @@ -14,11 +14,10 @@ Item { // actions signal clicked() + signal pressed() signal pressAndHold() // states - property bool hovered: false - property bool pressed: false property bool selected: false // settings @@ -38,21 +37,13 @@ Item { //////////////////////////////////////////////////////////////////////////// MouseArea { + id: mouseArea anchors.fill: parent hoverEnabled: true onClicked: control.clicked() + onPressed: control.pressed() onPressAndHold: control.pressAndHold() - - onPressed: control.pressed = true - onReleased: control.pressed = false - - onEntered: control.hovered = true - onExited: control.hovered = false - onCanceled: { - control.hovered = false - control.pressed = false - } } //////////////////////////////////////////////////////////////////////////// @@ -71,7 +62,7 @@ Item { color: control.colorHighlight opacity: { if (control.selected) return 1 - if (control.hovered) return 0.5 + if (mouseArea.containsMouse) return 0.5 return 0 } Behavior on opacity { OpacityAnimator { duration: 233 } } diff --git a/qml/components_generic/MobileMenuItem_horizontal.qml b/qml/components_generic/MobileMenuItem_horizontal.qml index bd2b41c..06daf5c 100644 --- a/qml/components_generic/MobileMenuItem_horizontal.qml +++ b/qml/components_generic/MobileMenuItem_horizontal.qml @@ -13,10 +13,10 @@ Item { // actions signal clicked() + signal pressed() signal pressAndHold() // states - property bool pressed: false property bool selected: false // settings @@ -35,6 +35,7 @@ Item { hoverEnabled: false onClicked: control.clicked() + onPressed: control.pressed() onPressAndHold: control.pressAndHold() } diff --git a/qml/components_generic/MobileMenuItem_vertical.qml b/qml/components_generic/MobileMenuItem_vertical.qml index cbd22cc..c0ae4f0 100644 --- a/qml/components_generic/MobileMenuItem_vertical.qml +++ b/qml/components_generic/MobileMenuItem_vertical.qml @@ -13,10 +13,10 @@ Item { // actions signal clicked() + signal pressed() signal pressAndHold() // states - property bool pressed: false property bool selected: false // settings @@ -35,6 +35,7 @@ Item { hoverEnabled: false onClicked: control.clicked() + onPressed: control.pressed() onPressAndHold: control.pressAndHold() } diff --git a/qml/components_generic/RoundButtonIcon.qml b/qml/components_generic/RoundButtonIcon.qml index d24265e..cc14c98 100644 --- a/qml/components_generic/RoundButtonIcon.qml +++ b/qml/components_generic/RoundButtonIcon.qml @@ -10,11 +10,10 @@ Item { // actions signal clicked() + signal pressed() signal pressAndHold() // states - property bool hovered: false - property bool pressed: false property bool selected: false // settings @@ -43,23 +42,15 @@ Item { //////////////////////////////////////////////////////////////////////////// MouseArea { + id: mouseArea anchors.fill: control hoverEnabled: (isDesktop && control.enabled) propagateComposedEvents: false onClicked: control.clicked() + onPressed: control.pressed() onPressAndHold: control.pressAndHold() - - onPressed: control.pressed = true - onReleased: control.pressed = false - - onEntered: control.hovered = true - onExited: control.hovered = false - onCanceled: { - control.pressed = false - control.hovered = false - } } //////////////////////////////////////////////////////////////////////////// @@ -72,14 +63,14 @@ Item { color: control.backgroundColor border.width: { - if (control.border || ((control.hovered || control.selected) && control.highlightMode === "border")) + if (control.border || ((mouseArea.containsMouse || control.selected) && control.highlightMode === "border")) return Theme.componentBorderWidth return 0 } border.color: control.borderColor opacity: { - if (control.hovered) { + if (mouseArea.containsMouse) { return (control.highlightMode === "circle" || control.highlightMode === "both" || control.background) ? 1 : 0.75 } else { return control.background ? 0.75 : 0 @@ -101,7 +92,7 @@ Item { source: control.source color: { - if ((control.selected || control.hovered) && (control.highlightMode === "color" || control.highlightMode === "both")) { + if ((control.selected || mouseArea.containsMouse) && (control.highlightMode === "color" || control.highlightMode === "both")) { return control.highlightColor } return control.iconColor @@ -134,7 +125,7 @@ Item { active: control.tooltipText sourceComponent: ToolTipFlat { - visible: control.hovered + visible: mouseArea.containsMouse text: control.tooltipText textColor: control.iconColor tooltipPosition: control.tooltipPosition diff --git a/qml/components_generic/RoundButtonText.qml b/qml/components_generic/RoundButtonText.qml index db983bb..c72b0b5 100644 --- a/qml/components_generic/RoundButtonText.qml +++ b/qml/components_generic/RoundButtonText.qml @@ -10,11 +10,10 @@ Item { // actions signal clicked() + signal pressed() signal pressAndHold() // states - property bool hovered: false - property bool pressed: false property bool selected: false // settings @@ -38,23 +37,15 @@ Item { //////////////////////////////////////////////////////////////////////////// MouseArea { + id: mouseArea anchors.fill: control hoverEnabled: (isDesktop && control.enabled) propagateComposedEvents: false onClicked: control.clicked() + onPressed: control.pressed() onPressAndHold: control.pressAndHold() - - onPressed: control.pressed = true - onReleased: control.pressed = false - - onEntered: control.hovered = true - onExited: control.hovered = false - onCanceled: { - control.pressed = false - control.hovered = false - } } //////////////////////////////////////////////////////////////////////////// @@ -67,14 +58,14 @@ Item { color: control.backgroundColor border.width: { - if (control.border || ((control.hovered || control.selected) && control.highlightMode === "border")) + if (control.border || ((mouseArea.containsMouse || control.selected) && control.highlightMode === "border")) return Theme.componentBorderWidth return 0 } border.color: control.borderColor opacity: { - if (control.hovered) { + if (mouseArea.containsMouse) { return (control.highlightMode === "circle" || control.highlightMode === "both" || control.background) ? 1 : 0.75 } else { return control.background ? 0.75 : 0 @@ -101,7 +92,7 @@ Item { verticalAlignment: Text.AlignVCenter color: { - if ((control.selected || control.hovered) && (control.highlightMode === "color" || control.highlightMode === "both")) { + if ((control.selected || mouseArea.containsMouse) && (control.highlightMode === "color" || control.highlightMode === "both")) { return control.highlightColor } return control.textColor @@ -115,7 +106,7 @@ Item { active: control.tooltipText sourceComponent: ToolTipFlat { - visible: control.hovered + visible: mouseArea.containsMouse text: control.tooltipText textColor: control.textColor tooltipPosition: control.tooltipPosition diff --git a/qml/components_generic/SelectorMenuItem.qml b/qml/components_generic/SelectorMenuItem.qml index c6a2ff3..2cf1970 100644 --- a/qml/components_generic/SelectorMenuItem.qml +++ b/qml/components_generic/SelectorMenuItem.qml @@ -11,11 +11,10 @@ Item { // actions signal clicked() + signal pressed() signal pressAndHold() // states - property bool hovered: false - property bool pressed: false property bool selected: false // settings @@ -32,15 +31,13 @@ Item { //////////////////////////////////////////////////////////////////////////// MouseArea { + id: mouseArea anchors.fill: control hoverEnabled: (isDesktop && control.enabled) onClicked: control.clicked() + onPressed: control.pressed() onPressAndHold: control.pressAndHold() - - onEntered: control.hovered = true - onExited: control.hovered = false - onCanceled: control.hovered = false } //////////////////////////////////////////////////////////////////////////// @@ -52,12 +49,9 @@ Item { color: control.colorBackgroundHighlight opacity: { - if (control.selected) - return 1 - else if (control.hovered) - return 0.2 - else - return 0 + if (control.selected) return 1 + else if (mouseArea.containsMouse) return 0.2 + return 0 } Behavior on opacity { OpacityAnimator { duration: 133 } } } diff --git a/qml/components_themed/SelectorMenuThemedItem.qml b/qml/components_themed/SelectorMenuThemedItem.qml index 31cefee..bdb8ee9 100644 --- a/qml/components_themed/SelectorMenuThemedItem.qml +++ b/qml/components_themed/SelectorMenuThemedItem.qml @@ -11,11 +11,10 @@ Item { // actions signal clicked() + signal pressed() signal pressAndHold() // states - property bool hovered: false - property bool pressed: false property bool selected: false // settings @@ -32,15 +31,13 @@ Item { //////////////////////////////////////////////////////////////////////////// MouseArea { + id: mouseArea anchors.fill: control hoverEnabled: (isDesktop && control.enabled) onClicked: control.clicked() + onPressed: control.pressed() onPressAndHold: control.pressAndHold() - - onEntered: control.hovered = true - onExited: control.hovered = false - onCanceled: control.hovered = false } //////////////////////////////////////////////////////////////////////////// @@ -52,11 +49,11 @@ Item { color: control.colorBackgroundHighlight opacity: { - if (control.hovered && control.selected) + if (mouseArea.containsMouse && control.selected) return 0.9 else if (control.selected) return 0.7 - else if (control.hovered) + else if (mouseArea.containsMouse) return 0.5 else return 0