From 4d4bd58e9cb8a2c1986fdb5321b4d527f10a51d7 Mon Sep 17 00:00:00 2001 From: Emeric Date: Sat, 23 Nov 2024 14:20:49 +0100 Subject: [PATCH] Improve popups --- qml/MobileHeader.qml | 12 +- qml/components/ActionMenuFixed.qml | 125 +++++---- qml/popups/PopupBackgroundUpdates.qml | 13 +- qml/popups/PopupBlacklistDevice.qml | 9 +- qml/popups/PopupCalibration.qml | 7 +- qml/popups/{PopupDate6.qml => PopupDate.qml} | 244 ++++++++++-------- qml/popups/PopupDeleteData.qml | 9 +- qml/popups/PopupDeleteDevice.qml | 7 +- thirdparty/ComponentLibrary/ThemeEngine.qml | 10 +- .../ComponentLibrary/menus/ActionMenuItem.qml | 4 +- .../menus/ActionMenu_bottom.qml | 48 +++- .../menus/ActionMenu_floating.qml | 4 +- 12 files changed, 284 insertions(+), 208 deletions(-) rename qml/popups/{PopupDate6.qml => PopupDate.qml} (57%) diff --git a/qml/MobileHeader.qml b/qml/MobileHeader.qml index cb60a56c..cd4c20db 100644 --- a/qml/MobileHeader.qml +++ b/qml/MobileHeader.qml @@ -57,16 +57,8 @@ Rectangle { // prevent clicks below this area MouseArea { anchors.fill: parent; acceptedButtons: Qt.AllButtons; } - ActionMenuFixed { - id: actionMenu - - x: parent.width - actionMenu.width - 12 - y: Math.max(screenPaddingStatusbar, screenPaddingTop) + 16 - - onMenuSelected: (index) => { - //console.log("ActionMenu clicked #" + index) - } - } + // Action menu + ActionMenuFixed { id: actionMenu } //////////////////////////////////////////////////////////////////////////// diff --git a/qml/components/ActionMenuFixed.qml b/qml/components/ActionMenuFixed.qml index 569a0d52..f08b55f2 100644 --- a/qml/components/ActionMenuFixed.qml +++ b/qml/components/ActionMenuFixed.qml @@ -7,73 +7,94 @@ import ComponentLibrary T.Popup { id: actionMenu - implicitWidth: 200 - implicitHeight: contentColumn.height + width: appWindow.width + height: actualHeight + + y: appWindow.height - actualHeight padding: 0 margins: 0 modal: true - dim: false - focus: isMobile + dim: true + focus: appWindow.isMobile closePolicy: T.Popup.CloseOnEscape | T.Popup.CloseOnPressOutside - parent: Overlay.overlay + parent: T.Overlay.overlay + + signal menuSelected(var index) - 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) + //////////////////////////////////////////////////////////////////////////// property int layoutDirection: Qt.RightToLeft - signal menuSelected(var index) + property int actualHeight: { + if (typeof mobileMenu !== "undefined" && mobileMenu.height) + return contentColumn.height + appWindow.screenPaddingNavbar + appWindow.screenPaddingBottom + return contentColumn.height + } - //////////////////////////////////////////////////////////////////////////// + property bool opening: false + property bool closing: false - enter: Transition { NumberAnimation { property: "opacity"; from: 0.0; to: 1.0; duration: 133; } } - exit: Transition { NumberAnimation { property: "opacity"; from: 1.0; to: 0.0; duration: 133; } } + onAboutToShow: { + opening = true + closing = false + } + onAboutToHide: { + opening = false + closing = true + } //////////////////////////////////////////////////////////////////////////// - background: Rectangle { - color: Theme.colorBackground - radius: Theme.componentRadius - border.color: Theme.colorSeparator - border.width: Theme.componentBorderWidth + enter: Transition { NumberAnimation { property: "opacity"; from: 0.0; to: 1.0; duration: 233; } } + exit: Transition { NumberAnimation { property: "opacity"; from: 1.0; to: 0.66; duration: 233; } } + + T.Overlay.modal: Rectangle { + color: "#000" + opacity: Theme.isLight ? 0.24 : 0.48 } + background: Item { } + + contentItem: Item { } + //////////////////////////////////////////////////////////////////////////// - contentItem: Item { - Column { + Rectangle { + id: actualPopup + anchors.left: parent.left + anchors.right: parent.right + anchors.bottom: parent.bottom + + height: opening ? actionMenu.actualHeight : 0 + Behavior on height { NumberAnimation { duration: 233 } } + + color: Theme.colorComponentBackground + + Rectangle { // separator + anchors.left: parent.left + anchors.right: parent.right + height: Theme.componentBorderWidth + color: Theme.colorSeparator + } + + Column { // content id: contentColumn + anchors.top: parent.top + anchors.topMargin: 0 anchors.left: parent.left + anchors.leftMargin: screenPaddingLeft anchors.right: parent.right + anchors.rightMargin: screenPaddingRight - topPadding: 8 + topPadding: Theme.componentMargin bottomPadding: 8 spacing: 4 - //////// - - ActionMenuItem { - id: actionClose - - index: -1 - text: qsTr("Close") - source: "qrc:/IconLibrary/material-symbols/close.svg" - layoutDirection: actionMenu.layoutDirection - opacity: 0.8 - - onClicked: { - close() - } - } - - ListSeparatorPadded { - anchors.leftMargin: Theme.componentMargin - anchors.rightMargin: Theme.componentMargin - height: 9 - } + 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) //////// @@ -81,8 +102,8 @@ T.Popup { id: actionUpdate anchors.left: parent.left anchors.right: parent.right + index: 1 - index: 0 text: qsTr("Update data") source: "qrc:/IconLibrary/material-symbols/refresh.svg" layoutDirection: actionMenu.layoutDirection @@ -97,8 +118,8 @@ T.Popup { ActionMenuItem { id: actionRealtime + index: 2 - index: 1 text: qsTr("Real time data") source: "qrc:/IconLibrary/material-icons/duotone/update.svg" layoutDirection: actionMenu.layoutDirection @@ -122,8 +143,8 @@ T.Popup { ActionMenuItem { id: actionHistoryRefresh + index: 3 - index: 2 text: qsTr("Update history") source: "qrc:/IconLibrary/material-icons/duotone/date_range.svg" layoutDirection: actionMenu.layoutDirection @@ -138,8 +159,8 @@ T.Popup { ActionMenuItem { id: actionHistoryClear + index: 4 - index: 3 text: qsTr("Clear history") source: "qrc:/IconLibrary/material-icons/duotone/date_clear.svg" layoutDirection: actionMenu.layoutDirection @@ -163,8 +184,8 @@ T.Popup { ActionMenuItem { id: actionLed - index: 8 + text: qsTr("Blink LED") source: "qrc:/IconLibrary/material-icons/duotone/emoji_objects.svg" layoutDirection: actionMenu.layoutDirection @@ -179,8 +200,8 @@ T.Popup { ActionMenuItem { id: actionWatering - index: 9 + text: qsTr("Watering") source: "qrc:/IconLibrary/material-icons/duotone/local_drink.svg" layoutDirection: actionMenu.layoutDirection @@ -195,8 +216,8 @@ T.Popup { ActionMenuItem { id: actionCalibrate - index: 10 + text: qsTr("Calibrate sensor") source: "qrc:/IconLibrary/material-icons/duotone/model_training.svg" layoutDirection: actionMenu.layoutDirection @@ -211,8 +232,8 @@ T.Popup { ActionMenuItem { id: actionGraphMode - index: 16 + text: qsTr("Switch graph") layoutDirection: actionMenu.layoutDirection visible: (appContent.state === "DeviceThermometer") @@ -230,8 +251,8 @@ T.Popup { ActionMenuItem { id: actionShowSettings - index: 17 + text: qsTr("Sensor infos") source: "qrc:/IconLibrary/material-icons/duotone/memory.svg" layoutDirection: actionMenu.layoutDirection @@ -246,8 +267,8 @@ T.Popup { ActionMenuItem { id: actionReboot - index: 32 + text: qsTr("Reboot sensor") source: "qrc:/IconLibrary/material-symbols/refresh.svg" layoutDirection: actionMenu.layoutDirection @@ -259,6 +280,8 @@ T.Popup { close() } } + + //////// } } diff --git a/qml/popups/PopupBackgroundUpdates.qml b/qml/popups/PopupBackgroundUpdates.qml index c57e57b3..4a249503 100644 --- a/qml/popups/PopupBackgroundUpdates.qml +++ b/qml/popups/PopupBackgroundUpdates.qml @@ -1,7 +1,8 @@ import QtQuick +import QtQuick.Effects import QtQuick.Controls -import ThemeEngine +import ComponentLibrary Popup { id: popupBackgroundUpdates @@ -36,7 +37,7 @@ Popup { Overlay.modal: Rectangle { color: "#000" - opacity: ThemeEngine.isLight ? 0.24 : 0.666 + opacity: Theme.isLight ? 0.24 : 0.48 } background: Rectangle { @@ -53,6 +54,14 @@ Popup { visible: singleColumn color: Theme.colorSeparator } + + layer.enabled: !singleColumn + layer.effect: MultiEffect { // shadow + autoPaddingEnabled: true + blurMax: 48 + shadowEnabled: true + shadowColor: Theme.isLight ? "#aa000000" : "#cc000000" + } } //////////////////////////////////////////////////////////////////////////// diff --git a/qml/popups/PopupBlacklistDevice.qml b/qml/popups/PopupBlacklistDevice.qml index 594bf541..112c5721 100644 --- a/qml/popups/PopupBlacklistDevice.qml +++ b/qml/popups/PopupBlacklistDevice.qml @@ -3,7 +3,7 @@ import QtQuick.Effects import QtQuick.Layouts import QtQuick.Controls -import ThemeEngine +import ComponentLibrary Popup { id: popupBlacklistDevice @@ -40,7 +40,7 @@ Popup { Overlay.modal: Rectangle { color: "#000" - opacity: ThemeEngine.isLight ? 0.24 : 0.666 + opacity: Theme.isLight ? 0.24 : 0.48 } background: Rectangle { @@ -59,10 +59,11 @@ Popup { } layer.enabled: !singleColumn - layer.effect: MultiEffect { + layer.effect: MultiEffect { // shadow autoPaddingEnabled: true + blurMax: 48 shadowEnabled: true - shadowColor: ThemeEngine.isLight ? "#88000000" : "#aaffffff" + shadowColor: Theme.isLight ? "#aa000000" : "#cc000000" } } diff --git a/qml/popups/PopupCalibration.qml b/qml/popups/PopupCalibration.qml index a9827b71..90695d43 100644 --- a/qml/popups/PopupCalibration.qml +++ b/qml/popups/PopupCalibration.qml @@ -2,7 +2,7 @@ import QtQuick import QtQuick.Effects import QtQuick.Controls -import ThemeEngine +import ComponentLibrary Popup { id: popupCalibration @@ -39,10 +39,11 @@ Popup { } layer.enabled: !singleColumn - layer.effect: MultiEffect { + layer.effect: MultiEffect { // shadow autoPaddingEnabled: true + blurMax: 48 shadowEnabled: true - shadowColor: ThemeEngine.isLight ? "#88000000" : "#aaffffff" + shadowColor: Theme.isLight ? "#aa000000" : "#cc000000" } } diff --git a/qml/popups/PopupDate6.qml b/qml/popups/PopupDate.qml similarity index 57% rename from qml/popups/PopupDate6.qml rename to qml/popups/PopupDate.qml index 378b29c8..b4df1ae3 100644 --- a/qml/popups/PopupDate6.qml +++ b/qml/popups/PopupDate.qml @@ -3,7 +3,7 @@ import QtQuick.Effects import QtQuick.Layouts import QtQuick.Controls -import ThemeEngine +import ComponentLibrary Popup { id: popupDate @@ -51,10 +51,6 @@ Popup { grid.year = date.getFullYear() grid.month = date.getMonth() - // visual hacks - //dow.width = dow.width - 8 - grid.width = dow.width - 8 - printDate() popupDate.open() @@ -96,7 +92,7 @@ Popup { Overlay.modal: Rectangle { color: "#000" - opacity: ThemeEngine.isLight ? 0.24 : 0.666 + opacity: Theme.isLight ? 0.24 : 0.48 } background: Rectangle { @@ -144,8 +140,9 @@ Popup { layer.enabled: !singleColumn layer.effect: MultiEffect { // shadow autoPaddingEnabled: true + blurMax: 48 shadowEnabled: true - shadowColor: ThemeEngine.isLight ? "#aa000000" : "#aaffffff" + shadowColor: Theme.isLight ? "#aa000000" : "#cc000000" } } @@ -214,17 +211,20 @@ Popup { //////// Rectangle { // month selector - height: 48 anchors.left: parent.left + anchors.leftMargin: parent.Theme.componentBorderWidth anchors.right: parent.right - anchors.margins: singleColumn ? 0 : Theme.componentBorderWidth + anchors.rightMargin: parent.Theme.componentBorderWidth - color: "#eee" + height: Theme.componentHeightXL + color: Theme.colorForeground - RoundButtonSunken { // previous month + SquareButtonSunken { // previous month anchors.left: parent.left + anchors.leftMargin: 2 anchors.verticalCenter: parent.verticalCenter - width: 48; height: 48; + width: Theme.componentHeightL + height: Theme.componentHeightL source: "qrc:/IconLibrary/material-symbols/chevron_left.svg" colorBackground: parent.color @@ -250,10 +250,12 @@ Popup { color: Theme.colorText } - RoundButtonSunken { // next month + SquareButtonSunken { // next month anchors.right: parent.right + anchors.rightMargin: 2 anchors.verticalCenter: parent.verticalCenter - width: 48; height: 48; + width: Theme.componentHeightL + height: Theme.componentHeightL source: "qrc:/IconLibrary/material-symbols/chevron_right.svg" colorBackground: parent.color @@ -272,125 +274,145 @@ Popup { //////// - DayOfWeekRow { - id: dow + ColumnLayout { // days + id: daysSelector anchors.left: parent.left - anchors.leftMargin: 4 + anchors.leftMargin: Theme.componentMargin anchors.right: parent.right - anchors.rightMargin: 4 + anchors.rightMargin: Theme.componentMargin - Layout.fillWidth: true - //locale: popupDate.locale + DayOfWeekRow { + id: dow - delegate: Text { - text: model.shortName.substring(0, 1).toUpperCase() - color: Theme.colorText - font.bold: true - horizontalAlignment: Text.AlignHCenter - verticalAlignment: Text.AlignVCenter - } - } + Layout.fillWidth: true + Layout.fillHeight: Theme.componentHeight + //locale: popupDate.locale - MonthGrid { - id: grid - anchors.left: parent.left - anchors.leftMargin: 4 - anchors.right: parent.right - anchors.rightMargin: 4 - - Layout.fillWidth: true - //locale: popupDate.locale - - delegate: Text { - width: (grid.width / 7) - height: width - horizontalAlignment: Text.AlignHCenter - verticalAlignment: Text.AlignVCenter - - property bool isSelected: (model.day === selectedDate.getDate() && - model.month === selectedDate.getMonth() && - model.year === selectedDate.getFullYear()) - - property bool isToday: (model.day === popupDate.today.getDate() && - model.month === popupDate.today.getMonth() && - model.year === popupDate.today.getFullYear()) - - text: model.day - font: grid.font - //font.bold: model.today - color: isSelected ? "white" : Theme.colorSubText - opacity: (model.month === grid.month ? 1 : 0.2) - - Rectangle { - z: -1 - anchors.fill: parent - radius: width - color: isSelected ? Theme.colorSecondary : "transparent" - border.color: Theme.colorSecondary - border.width: isToday ? Theme.componentBorderWidth : 0 + delegate: Text { + text: model.shortName.substring(0, 1).toUpperCase() + color: Theme.colorText + font.bold: true + horizontalAlignment: Text.AlignHCenter + verticalAlignment: Text.AlignVCenter } } - onClicked: (date) => { - if (date.getMonth() === grid.month) { - // validate date (min / max) - if (minDate && maxDate) { - const diffMinTime = (minDate - date) - const diffMinDays = -Math.ceil(diffMinTime / (1000 * 60 * 60 * 24) - 1) - //console.log(diffMinDays + " diffMinDays") - const diffMaxTime = (minDate - date); - const diffMaxDays = -Math.ceil(diffMaxTime / (1000 * 60 * 60 * 24) - 1) - //console.log(diffMaxDays + " diffMaxDays") - - if (diffMinDays > -1 && diffMaxDays < 1) { - date.setHours(selectedDate.getHours(), - selectedDate.getMinutes(), - selectedDate.getSeconds()) - selectedDate = date - } - } else { - const diffTime = (today - date) - const diffDays = -Math.ceil(diffTime / (1000 * 60 * 60 * 24) - 1) - //console.log(diffDays + " days") - - // validate date (-21 / today) - if (diffDays > -21 && diffDays < 1) { - date.setHours(selectedDate.getHours(), - selectedDate.getMinutes(), - selectedDate.getSeconds()) - selectedDate = date + MonthGrid { + id: grid + + Layout.fillWidth: true + //locale: popupDate.locale + + delegate: Text { + width: (grid.width / 7) + height: width + horizontalAlignment: Text.AlignHCenter + verticalAlignment: Text.AlignVCenter + + property bool isSelected: (model.day === selectedDate.getDate() && + model.month === selectedDate.getMonth() && + model.year === selectedDate.getFullYear()) + + property bool isToday: (model.day === popupDate.today.getDate() && + model.month === popupDate.today.getMonth() && + model.year === popupDate.today.getFullYear()) + + text: model.day + font: grid.font + //font.bold: model.today + color: isSelected ? "white" : Theme.colorSubText + opacity: (model.month === grid.month ? 1 : 0.2) + + Rectangle { + z: -1 + anchors.fill: parent + anchors.margins: 4 + radius: 8 + color: isSelected ? Theme.colorSecondary : "transparent" + opacity: (isSelected || isToday) ? 1 : 0.66 + border.color: Theme.colorSecondary + border.width: { + if (isToday) return Theme.componentBorderWidth + if (mouse.hovered && model.month === grid.month) return Theme.componentBorderWidth + return 0 } } - printDate() + HoverHandler { + id: mouse + acceptedDevices: PointerDevice.Mouse + } + } + + onClicked: (date) => { + if (date.getMonth() === grid.month) { + // validate date (min / max) + if (minDate && maxDate) { + const diffMinTime = (minDate - date) + const diffMinDays = -Math.ceil(diffMinTime / (1000 * 60 * 60 * 24) - 1) + //console.log(diffMinDays + " diffMinDays") + const diffMaxTime = (minDate - date); + const diffMaxDays = -Math.ceil(diffMaxTime / (1000 * 60 * 60 * 24) - 1) + //console.log(diffMaxDays + " diffMaxDays") + + if (diffMinDays > -1 && diffMaxDays < 1) { + date.setHours(selectedDate.getHours(), + selectedDate.getMinutes(), + selectedDate.getSeconds()) + selectedDate = date + } + } else { + const diffTime = (today - date) + const diffDays = -Math.ceil(diffTime / (1000 * 60 * 60 * 24) - 1) + //console.log(diffDays + " days") + + // validate date (-21 / today) + if (diffDays > -21 && diffDays < 1) { + date.setHours(selectedDate.getHours(), + selectedDate.getMinutes(), + selectedDate.getSeconds()) + selectedDate = date + } + } + + printDate() + } } } } //////// + } - Row { - anchors.right: parent.right - anchors.rightMargin: Theme.componentMarginXL - spacing: Theme.componentMargin + //////////////// - ButtonClear { - color: Theme.colorGrey + Flow { + anchors.left: parent.left + anchors.right: parent.right + anchors.margins: Theme.componentMarginXL + bottomPadding: Theme.componentMarginXL + spacing: Theme.componentMargin - text: qsTr("Cancel") - onClicked: popupDate.close() - } + property int btnCount: 2 + property int btnSize: singleColumn ? width : ((width-(spacing*(btnCount-1))) / btnCount) - ButtonFlat { - text: qsTr("Select") - onClicked: { - updateDate(selectedDate) - popupDate.close() - } - } + ButtonClear { + width: parent.btnSize + color: Theme.colorGrey + + text: qsTr("Cancel") + onClicked: popupDate.close() } - //////// + ButtonFlat { + width: parent.btnSize + + text: qsTr("Select") + onClicked: { + updateDate(selectedDate) + popupDate.close() + } + } } //////////////// diff --git a/qml/popups/PopupDeleteData.qml b/qml/popups/PopupDeleteData.qml index 9171ae54..96e5c87f 100644 --- a/qml/popups/PopupDeleteData.qml +++ b/qml/popups/PopupDeleteData.qml @@ -2,7 +2,7 @@ import QtQuick import QtQuick.Effects import QtQuick.Controls -import ThemeEngine +import ComponentLibrary Popup { id: popupDeleteData @@ -29,7 +29,7 @@ Popup { Overlay.modal: Rectangle { color: "#000" - opacity: ThemeEngine.isLight ? 0.24 : 0.666 + opacity: Theme.isLight ? 0.24 : 0.48 } background: Rectangle { @@ -48,10 +48,11 @@ Popup { } layer.enabled: !singleColumn - layer.effect: MultiEffect { + layer.effect: MultiEffect { // shadow autoPaddingEnabled: true + blurMax: 48 shadowEnabled: true - shadowColor: ThemeEngine.isLight ? "#88000000" : "#aaffffff" + shadowColor: Theme.isLight ? "#aa000000" : "#cc000000" } } diff --git a/qml/popups/PopupDeleteDevice.qml b/qml/popups/PopupDeleteDevice.qml index 479690f9..987da17c 100644 --- a/qml/popups/PopupDeleteDevice.qml +++ b/qml/popups/PopupDeleteDevice.qml @@ -2,7 +2,7 @@ import QtQuick import QtQuick.Effects import QtQuick.Controls -import ThemeEngine +import ComponentLibrary Popup { id: popupDeleteDevice @@ -41,10 +41,11 @@ Popup { } layer.enabled: !singleColumn - layer.effect: MultiEffect { + layer.effect: MultiEffect { // shadow autoPaddingEnabled: true + blurMax: 48 shadowEnabled: true - shadowColor: ThemeEngine.isLight ? "#88000000" : "#aaffffff" + shadowColor: Theme.isLight ? "#aa000000" : "#cc000000" } } diff --git a/thirdparty/ComponentLibrary/ThemeEngine.qml b/thirdparty/ComponentLibrary/ThemeEngine.qml index a5dc58c4..eb6052d1 100644 --- a/thirdparty/ComponentLibrary/ThemeEngine.qml +++ b/thirdparty/ComponentLibrary/ThemeEngine.qml @@ -154,7 +154,7 @@ Item { property color colorComponentBorder property color colorComponentDown property color colorComponentBackground - property color colorComponentShadow: isLight ? "#44000000" : "#88000000" + property color colorComponentShadow: isLight ? "#40000000" : "#88000000" property int componentRadius: 4 property int componentBorderWidth: 2 @@ -357,7 +357,7 @@ Item { colorIcon = "#303030" colorSeparator = "#ececec" colorLowContrast = "white" - colorHighContrast = "black" + colorHighContrast = "#303030" colorComponent = "#f0f0f0" colorComponentText = "black" @@ -469,7 +469,7 @@ Item { colorIcon = "#303030" colorSeparator = "#ececec" colorLowContrast = "white" - colorHighContrast = "black" + colorHighContrast = "#303030" colorComponent = "#f6f6f6" colorComponentText = "black" @@ -776,7 +776,7 @@ Item { colorIcon = "#333333" colorSeparator = "#e8e8e8" colorLowContrast = "white" - colorHighContrast = "black" + colorHighContrast = "#303030" colorComponent = "#EAEAEA" colorComponentText = "black" @@ -1006,7 +1006,7 @@ Item { colorIcon = "#333" colorSeparator = "#E4E4E4" colorLowContrast = "white" - colorHighContrast = "black" + colorHighContrast = "#303030" colorComponent = "#EAEAEA" colorComponentText = "black" diff --git a/thirdparty/ComponentLibrary/menus/ActionMenuItem.qml b/thirdparty/ComponentLibrary/menus/ActionMenuItem.qml index 8578f467..fd4f07f4 100644 --- a/thirdparty/ComponentLibrary/menus/ActionMenuItem.qml +++ b/thirdparty/ComponentLibrary/menus/ActionMenuItem.qml @@ -19,7 +19,7 @@ T.Button { rightPadding: Theme.componentMargin leftPadding: Theme.componentMargin - height: Theme.componentHeight + height: Theme.componentHeightL focusPolicy: Qt.NoFocus @@ -41,7 +41,7 @@ T.Button { anchors.fill: parent radius: Theme.componentRadius - color: Theme.colorComponent + color: Theme.colorForeground //Behavior on color { ColorAnimation { duration: 133 } } opacity: control.enabled && control.hovered ? 1 : 0 diff --git a/thirdparty/ComponentLibrary/menus/ActionMenu_bottom.qml b/thirdparty/ComponentLibrary/menus/ActionMenu_bottom.qml index 44d66ff1..7566931f 100644 --- a/thirdparty/ComponentLibrary/menus/ActionMenu_bottom.qml +++ b/thirdparty/ComponentLibrary/menus/ActionMenu_bottom.qml @@ -10,7 +10,7 @@ T.Popup { id: actionMenu implicitWidth: parent.width - implicitHeight: contentColumn.height + implicitHeight: actualHeight y: appWindow.height @@ -28,7 +28,7 @@ T.Popup { property var model: null - property int layoutDirection: Qt.LeftToRight // disabled + property int layoutDirection: Qt.LeftToRight signal menuSelected(var index) @@ -40,8 +40,22 @@ T.Popup { return contentColumn.height } - enter: Transition { NumberAnimation { duration: 233; property: "height"; from: 0; to: actionMenu.actualHeight; } } - exit: Transition { NumberAnimation { duration: 233; property: "height"; from: actionMenu.actualHeight; to: 0; } } + property bool opening: false + property bool closing: false + + onAboutToShow: { + opening = true + closing = false + } + onAboutToHide: { + opening = false + closing = true + } + + //////////////// + + enter: Transition { NumberAnimation { property: "opacity"; from: 0.0; to: 1.0; duration: 233; } } + exit: Transition { NumberAnimation { property: "opacity"; from: 1.0; to: 0.66; duration: 233; } } //////////////// @@ -50,22 +64,34 @@ T.Popup { opacity: Theme.isLight ? 0.24 : 0.48 } - background: Rectangle { + background: Item { } + + contentItem: Item { } + + //////////////// + + Rectangle { + id: actualPopup + anchors.left: parent.left + anchors.right: parent.right + anchors.bottom: parent.bottom + + height: opening ? actionMenu.actualHeight : 0 + Behavior on height { NumberAnimation { duration: 233 } } + color: Theme.colorComponentBackground - Rectangle { + Rectangle { // separator anchors.left: parent.left anchors.right: parent.right height: Theme.componentBorderWidth color: Theme.colorSeparator } - } - - //////////////// - contentItem: Item { - Column { + Column { // content id: contentColumn + anchors.top: parent.top + anchors.topMargin: 0 anchors.left: parent.left anchors.leftMargin: screenPaddingLeft anchors.right: parent.right diff --git a/thirdparty/ComponentLibrary/menus/ActionMenu_floating.qml b/thirdparty/ComponentLibrary/menus/ActionMenu_floating.qml index 23f25e25..b5caef26 100644 --- a/thirdparty/ComponentLibrary/menus/ActionMenu_floating.qml +++ b/thirdparty/ComponentLibrary/menus/ActionMenu_floating.qml @@ -19,7 +19,7 @@ T.Popup { dim: false focus: isMobile closePolicy: T.Popup.CloseOnEscape | T.Popup.CloseOnPressOutside - parent: T.Overlay.overlay + //parent: T.Overlay.overlay // let it float property string titleTxt property string titleSrc @@ -48,7 +48,7 @@ T.Popup { autoPaddingEnabled: true shadowEnabled: true shadowOpacity: 0.24 - shadowColor: control.border.color + shadowColor: background.border.color } }