From fffb15e5133a0637be0824dc8b78a29f8c39986c Mon Sep 17 00:00:00 2001 From: Emeric Date: Thu, 28 Nov 2024 20:25:51 +0100 Subject: [PATCH] Minor UI improvements --- qml/components/ActionMenuFixed.qml | 89 ++++++++++++++----- qml/widgets/DeviceWidget.qml | 2 +- .../ComponentLibrary/menus/ActionMenuItem.qml | 19 ++-- .../menus/ActionMenu_bottom.qml | 3 +- 4 files changed, 79 insertions(+), 34 deletions(-) diff --git a/qml/components/ActionMenuFixed.qml b/qml/components/ActionMenuFixed.qml index f08b55f2..5bba4b3c 100644 --- 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,8 +92,10 @@ 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) @@ -98,17 +103,39 @@ T.Popup { //////// - 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 index c0e7d7a5..05d272b4 100644 --- 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 index fd4f07f4..ff29b41d 100644 --- 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 index 7566931f..775a3ddb 100644 --- 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