Minor UI improvements

emericg · Nov 28, 2024 · fffb15e · fffb15e
1 parent 54e3eb1
commit fffb15e
Show file tree

Hide file tree

Showing 4 changed files with 79 additions and 34 deletions.
diff --git a/qml/components/ActionMenuFixed.qml b/qml/components/ActionMenuFixed.qml
@@ -21,12 +21,15 @@ T.Popup {
     closePolicy: T.Popup.CloseOnEscape | T.Popup.CloseOnPressOutside
     parent: T.Overlay.overlay
 
+    property string titleTxt
+    property string titleSrc // disabled
+
+    property int layoutDirection: Qt.RightToLeft
+
     signal menuSelected(var index)
 
     ////////////////////////////////////////////////////////////////////////////
 
-    property int layoutDirection: Qt.RightToLeft
-
     property int actualHeight: {
         if (typeof mobileMenu !== "undefined" && mobileMenu.height)
             return contentColumn.height + appWindow.screenPaddingNavbar + appWindow.screenPaddingBottom
@@ -89,26 +92,50 @@ T.Popup {
             anchors.rightMargin: screenPaddingRight
 
             topPadding: Theme.componentMargin
-            bottomPadding: 8
-            spacing: 4
+            bottomPadding: 4
+            spacing: 0
+
+            ////////
 
             property bool partonevisible: (actionUpdate.visible || actionRealtime.visible)
             property bool parttwovisible: (actionHistoryRefresh.visible || actionHistoryClear.visible)
             property bool partthreevisible: (actionLed.visible || actionWatering.visible || actionGraphMode.visible || actionShowSettings.visible)
 
             ////////
 
-            ActionMenuItem {
-                id: actionUpdate
+            Text { // title
                 anchors.left: parent.left
+                anchors.leftMargin: Theme.componentMargin + 4
                 anchors.right: parent.right
+                anchors.rightMargin: Theme.componentMargin
+
+                height: Theme.componentHeight
+                visible: actionMenu.titleTxt
+
+                text: actionMenu.titleTxt
+                textFormat: Text.PlainText
+
+                color: Theme.colorSubText
+                font.bold: false
+                font.pixelSize: Theme.fontSizeContentVeryBig
+                horizontalAlignment: Text.AlignLeft
+                verticalAlignment: Text.AlignVCenter
+                elide: Text.ElideRight
+            }
+
+            ////////
+
+            ActionMenuItem {
+                id: actionUpdate
                 index: 1
 
-                text: qsTr("Update data")
-                source: "qrc:/IconLibrary/material-symbols/refresh.svg"
+                height: Theme.componentHeightL
                 layoutDirection: actionMenu.layoutDirection
                 visible: (deviceManager.bluetooth && (selectedDevice && selectedDevice.hasBluetoothConnection))
 
+                text: qsTr("Update data")
+                source: "qrc:/IconLibrary/material-symbols/refresh.svg"
+
                 onClicked: {
                     deviceRefreshButtonClicked()
                     menuSelected(index)
@@ -120,11 +147,13 @@ T.Popup {
                 id: actionRealtime
                 index: 2
 
-                text: qsTr("Real time data")
-                source: "qrc:/IconLibrary/material-icons/duotone/update.svg"
+                height: Theme.componentHeightL
                 layoutDirection: actionMenu.layoutDirection
                 visible: (deviceManager.bluetooth && (selectedDevice && selectedDevice.hasRealTime))
 
+                text: qsTr("Real time data")
+                source: "qrc:/IconLibrary/material-icons/duotone/update.svg"
+
                 onClicked: {
                     deviceRefreshRealtimeButtonClicked()
                     menuSelected(index)
@@ -145,11 +174,13 @@ T.Popup {
                 id: actionHistoryRefresh
                 index: 3
 
-                text: qsTr("Update history")
-                source: "qrc:/IconLibrary/material-icons/duotone/date_range.svg"
+                height: Theme.componentHeightL
                 layoutDirection: actionMenu.layoutDirection
                 visible: (deviceManager.bluetooth && (selectedDevice && selectedDevice.hasHistory))
 
+                text: qsTr("Update history")
+                source: "qrc:/IconLibrary/material-icons/duotone/date_range.svg"
+
                 onClicked: {
                     deviceRefreshHistoryButtonClicked()
                     menuSelected(index)
@@ -186,11 +217,13 @@ T.Popup {
                 id: actionLed
                 index: 8
 
-                text: qsTr("Blink LED")
-                source: "qrc:/IconLibrary/material-icons/duotone/emoji_objects.svg"
+                height: Theme.componentHeightL
                 layoutDirection: actionMenu.layoutDirection
                 visible: (deviceManager.bluetooth && (selectedDevice && selectedDevice.hasLED))
 
+                text: qsTr("Blink LED")
+                source: "qrc:/IconLibrary/material-icons/duotone/emoji_objects.svg"
+
                 onClicked: {
                     deviceLedButtonClicked()
                     menuSelected(index)
@@ -202,11 +235,13 @@ T.Popup {
                 id: actionWatering
                 index: 9
 
-                text: qsTr("Watering")
-                source: "qrc:/IconLibrary/material-icons/duotone/local_drink.svg"
+                height: Theme.componentHeightL
                 layoutDirection: actionMenu.layoutDirection
                 visible: (deviceManager.bluetooth && (selectedDevice && selectedDevice.hasWaterTank))
 
+                text: qsTr("Watering")
+                source: "qrc:/IconLibrary/material-icons/duotone/local_drink.svg"
+
                 onClicked: {
                     deviceWateringButtonClicked()
                     menuSelected(index)
@@ -218,11 +253,13 @@ T.Popup {
                 id: actionCalibrate
                 index: 10
 
-                text: qsTr("Calibrate sensor")
-                source: "qrc:/IconLibrary/material-icons/duotone/model_training.svg"
+                height: Theme.componentHeightL
                 layoutDirection: actionMenu.layoutDirection
                 visible: (deviceManager.bluetooth && (selectedDevice && selectedDevice.hasCalibration))
 
+                text: qsTr("Calibrate sensor")
+                source: "qrc:/IconLibrary/material-icons/duotone/model_training.svg"
+
                 onClicked: {
                     deviceCalibrateButtonClicked()
                     menuSelected(index)
@@ -234,9 +271,11 @@ T.Popup {
                 id: actionGraphMode
                 index: 16
 
-                text: qsTr("Switch graph")
+                height: Theme.componentHeightL
                 layoutDirection: actionMenu.layoutDirection
                 visible: (appContent.state === "DeviceThermometer")
+
+                text: qsTr("Switch graph")
                 source: (settingsManager.graphThermometer === "minmax") ?
                             "qrc:/IconLibrary/material-icons/duotone/insert_chart.svg" :
                             "qrc:/IconLibrary/material-symbols/timeline.svg"
@@ -253,11 +292,13 @@ T.Popup {
                 id: actionShowSettings
                 index: 17
 
-                text: qsTr("Sensor infos")
-                source: "qrc:/IconLibrary/material-icons/duotone/memory.svg"
+                height: Theme.componentHeightL
                 layoutDirection: actionMenu.layoutDirection
                 visible: (appContent.state === "DeviceThermometer" || appContent.state === "DeviceEnvironmental")
 
+                text: qsTr("Sensor infos")
+                source: "qrc:/IconLibrary/material-icons/duotone/memory.svg"
+
                 onClicked: {
                     deviceSettingsButtonClicked()
                     menuSelected(index)
@@ -269,11 +310,13 @@ T.Popup {
                 id: actionReboot
                 index: 32
 
-                text: qsTr("Reboot sensor")
-                source: "qrc:/IconLibrary/material-symbols/refresh.svg"
+                height: Theme.componentHeightL
                 layoutDirection: actionMenu.layoutDirection
                 visible: (deviceManager.bluetooth && (selectedDevice && selectedDevice.hasReboot))
 
+                text: qsTr("Reboot sensor")
+                source: "qrc:/IconLibrary/material-symbols/refresh.svg"
+
                 onClicked: {
                     deviceRebootButtonClicked()
                     menuSelected(index)

diff --git a/qml/widgets/DeviceWidget.qml b/qml/widgets/DeviceWidget.qml
@@ -226,7 +226,7 @@ Item {
 
         RippleThemed {
             anchors.fill: parent
-            anchor: control
+            anchor: deviceWidget
             clip: true
 
             pressed: mousearea.pressed

diff --git a/thirdparty/ComponentLibrary/menus/ActionMenuItem.qml b/thirdparty/ComponentLibrary/menus/ActionMenuItem.qml
@@ -14,12 +14,12 @@ T.Button {
     anchors.right: parent.right
     anchors.rightMargin: Theme.componentBorderWidth
 
-    leftInset: Theme.componentMargin/2
-    rightInset: Theme.componentMargin/2
-    rightPadding: Theme.componentMargin
-    leftPadding: Theme.componentMargin
+    leftInset: 8
+    rightInset: 8
+    rightPadding: 16
+    leftPadding: 16
 
-    height: Theme.componentHeightL
+    height: Theme.componentHeight
 
     focusPolicy: Qt.NoFocus
 
@@ -41,7 +41,7 @@ T.Button {
             anchors.fill: parent
             radius: Theme.componentRadius
 
-            color: Theme.colorForeground
+            color: Theme.colorComponent
             //Behavior on color { ColorAnimation { duration: 133 } }
 
             opacity: control.enabled && control.hovered ? 1 : 0
@@ -50,10 +50,11 @@ T.Button {
 
         RippleThemed {
             anchors.fill: parent
+            anchor: control
 
-            pressed: control.down
-            active: enabled && control.down
-            color: Qt.rgba(Theme.colorForeground.r, Theme.colorForeground.g, Theme.colorForeground.b, 0.66)
+            pressed: control.pressed
+            active: control.enabled && (control.down || control.visualFocus)
+            color: Qt.rgba(Theme.colorComponentDown.r, Theme.colorComponentDown.g, Theme.colorComponentDown.b, 0.666)
         }
 
         layer.enabled: true

diff --git a/thirdparty/ComponentLibrary/menus/ActionMenu_bottom.qml b/thirdparty/ComponentLibrary/menus/ActionMenu_bottom.qml
@@ -99,7 +99,7 @@ T.Popup {
 
             topPadding: Theme.componentMargin
             bottomPadding: 4
-            spacing: 4
+            spacing: 0
 
             ////
 
@@ -140,6 +140,7 @@ T.Popup {
                         roleValue: "itm"
                         ActionMenuItem {
                             width: actionMenu.width
+                            height: Theme.componentHeightL
                             layoutDirection: actionMenu.layoutDirection
                             index: idx
                             text: txt