Simplify some UI components

emericg · Sep 21, 2022 · 158a262 · 158a262
1 parent c79c756
commit 158a262
Show file tree

Hide file tree

Showing 19 changed files with 116 additions and 254 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -40,37 +40,28 @@ T.Button {
         enabled: control.hoverAnimation
 
         hoverEnabled: control.hoverAnimation
-        property bool hovered: false
 
         onClicked: control.clicked()
         onPressAndHold: control.pressAndHold()
 
         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
@@ -47,38 +47,29 @@ T.Button {
         enabled: control.hoverAnimation
 
         hoverEnabled: control.hoverAnimation
-        property bool hovered: false
 
         onClicked: control.clicked()
         onPressAndHold: control.pressAndHold()
 
         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
@@ -47,38 +47,29 @@ T.Button {
         enabled: control.hoverAnimation
 
         hoverEnabled: control.hoverAnimation
-        property bool hovered: false
 
         onClicked: control.clicked()
         onPressAndHold: control.pressAndHold()
 
         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 } }
         }