Skip to content

Commit 4d4bd58

Browse files
emericgemericg
committed
Improve popups
1 parent 0933db4 commit 4d4bd58

12 files changed

+284
-208
lines changed

‎qml/MobileHeader.qml

Lines changed: 2 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -57,16 +57,8 @@ Rectangle {
5757
// prevent clicks below this area
5858
MouseArea { anchors.fill: parent; acceptedButtons: Qt.AllButtons; }
5959

60-
ActionMenuFixed {
61-
id: actionMenu
62-
63-
x: parent.width - actionMenu.width - 12
64-
y: Math.max(screenPaddingStatusbar, screenPaddingTop) + 16
65-
66-
onMenuSelected: (index) => {
67-
//console.log("ActionMenu clicked #" + index)
68-
}
69-
}
60+
// Action menu
61+
ActionMenuFixed { id: actionMenu }
7062

7163
////////////////////////////////////////////////////////////////////////////
7264

‎qml/components/ActionMenuFixed.qml

Lines changed: 74 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -7,82 +7,103 @@ import ComponentLibrary
77
T.Popup {
88
id: actionMenu
99

10-
implicitWidth: 200
11-
implicitHeight: contentColumn.height
10+
width: appWindow.width
11+
height: actualHeight
12+
13+
y: appWindow.height - actualHeight
1214

1315
padding: 0
1416
margins: 0
1517

1618
modal: true
17-
dim: false
18-
focus: isMobile
19+
dim: true
20+
focus: appWindow.isMobile
1921
closePolicy: T.Popup.CloseOnEscape | T.Popup.CloseOnPressOutside
20-
parent: Overlay.overlay
22+
parent: T.Overlay.overlay
23+
24+
signal menuSelected(var index)
2125

22-
property bool partonevisible: (actionUpdate.visible || actionRealtime.visible)
23-
property bool parttwovisible: (actionHistoryRefresh.visible || actionHistoryClear.visible)
24-
property bool partthreevisible: (actionLed.visible || actionWatering.visible || actionGraphMode.visible || actionShowSettings.visible)
26+
////////////////////////////////////////////////////////////////////////////
2527

2628
property int layoutDirection: Qt.RightToLeft
2729

28-
signal menuSelected(var index)
30+
property int actualHeight: {
31+
if (typeof mobileMenu !== "undefined" && mobileMenu.height)
32+
return contentColumn.height + appWindow.screenPaddingNavbar + appWindow.screenPaddingBottom
33+
return contentColumn.height
34+
}
2935

30-
////////////////////////////////////////////////////////////////////////////
36+
property bool opening: false
37+
property bool closing: false
3138

32-
enter: Transition { NumberAnimation { property: "opacity"; from: 0.0; to: 1.0; duration: 133; } }
33-
exit: Transition { NumberAnimation { property: "opacity"; from: 1.0; to: 0.0; duration: 133; } }
39+
onAboutToShow: {
40+
opening = true
41+
closing = false
42+
}
43+
onAboutToHide: {
44+
opening = false
45+
closing = true
46+
}
3447

3548
////////////////////////////////////////////////////////////////////////////
3649

37-
background: Rectangle {
38-
color: Theme.colorBackground
39-
radius: Theme.componentRadius
40-
border.color: Theme.colorSeparator
41-
border.width: Theme.componentBorderWidth
50+
enter: Transition { NumberAnimation { property: "opacity"; from: 0.0; to: 1.0; duration: 233; } }
51+
exit: Transition { NumberAnimation { property: "opacity"; from: 1.0; to: 0.66; duration: 233; } }
52+
53+
T.Overlay.modal: Rectangle {
54+
color: "#000"
55+
opacity: Theme.isLight ? 0.24 : 0.48
4256
}
4357

58+
background: Item { }
59+
60+
contentItem: Item { }
61+
4462
////////////////////////////////////////////////////////////////////////////
4563

46-
contentItem: Item {
47-
Column {
64+
Rectangle {
65+
id: actualPopup
66+
anchors.left: parent.left
67+
anchors.right: parent.right
68+
anchors.bottom: parent.bottom
69+
70+
height: opening ? actionMenu.actualHeight : 0
71+
Behavior on height { NumberAnimation { duration: 233 } }
72+
73+
color: Theme.colorComponentBackground
74+
75+
Rectangle { // separator
76+
anchors.left: parent.left
77+
anchors.right: parent.right
78+
height: Theme.componentBorderWidth
79+
color: Theme.colorSeparator
80+
}
81+
82+
Column { // content
4883
id: contentColumn
84+
anchors.top: parent.top
85+
anchors.topMargin: 0
4986
anchors.left: parent.left
87+
anchors.leftMargin: screenPaddingLeft
5088
anchors.right: parent.right
89+
anchors.rightMargin: screenPaddingRight
5190

52-
topPadding: 8
91+
topPadding: Theme.componentMargin
5392
bottomPadding: 8
5493
spacing: 4
5594

56-
////////
57-
58-
ActionMenuItem {
59-
id: actionClose
60-
61-
index: -1
62-
text: qsTr("Close")
63-
source: "qrc:/IconLibrary/material-symbols/close.svg"
64-
layoutDirection: actionMenu.layoutDirection
65-
opacity: 0.8
66-
67-
onClicked: {
68-
close()
69-
}
70-
}
71-
72-
ListSeparatorPadded {
73-
anchors.leftMargin: Theme.componentMargin
74-
anchors.rightMargin: Theme.componentMargin
75-
height: 9
76-
}
95+
property bool partonevisible: (actionUpdate.visible || actionRealtime.visible)
96+
property bool parttwovisible: (actionHistoryRefresh.visible || actionHistoryClear.visible)
97+
property bool partthreevisible: (actionLed.visible || actionWatering.visible || actionGraphMode.visible || actionShowSettings.visible)
7798

7899
////////
79100

80101
ActionMenuItem {
81102
id: actionUpdate
82103
anchors.left: parent.left
83104
anchors.right: parent.right
105+
index: 1
84106

85-
index: 0
86107
text: qsTr("Update data")
87108
source: "qrc:/IconLibrary/material-symbols/refresh.svg"
88109
layoutDirection: actionMenu.layoutDirection
@@ -97,8 +118,8 @@ T.Popup {
97118

98119
ActionMenuItem {
99120
id: actionRealtime
121+
index: 2
100122

101-
index: 1
102123
text: qsTr("Real time data")
103124
source: "qrc:/IconLibrary/material-icons/duotone/update.svg"
104125
layoutDirection: actionMenu.layoutDirection
@@ -122,8 +143,8 @@ T.Popup {
122143

123144
ActionMenuItem {
124145
id: actionHistoryRefresh
146+
index: 3
125147

126-
index: 2
127148
text: qsTr("Update history")
128149
source: "qrc:/IconLibrary/material-icons/duotone/date_range.svg"
129150
layoutDirection: actionMenu.layoutDirection
@@ -138,8 +159,8 @@ T.Popup {
138159

139160
ActionMenuItem {
140161
id: actionHistoryClear
162+
index: 4
141163

142-
index: 3
143164
text: qsTr("Clear history")
144165
source: "qrc:/IconLibrary/material-icons/duotone/date_clear.svg"
145166
layoutDirection: actionMenu.layoutDirection
@@ -163,8 +184,8 @@ T.Popup {
163184

164185
ActionMenuItem {
165186
id: actionLed
166-
167187
index: 8
188+
168189
text: qsTr("Blink LED")
169190
source: "qrc:/IconLibrary/material-icons/duotone/emoji_objects.svg"
170191
layoutDirection: actionMenu.layoutDirection
@@ -179,8 +200,8 @@ T.Popup {
179200

180201
ActionMenuItem {
181202
id: actionWatering
182-
183203
index: 9
204+
184205
text: qsTr("Watering")
185206
source: "qrc:/IconLibrary/material-icons/duotone/local_drink.svg"
186207
layoutDirection: actionMenu.layoutDirection
@@ -195,8 +216,8 @@ T.Popup {
195216

196217
ActionMenuItem {
197218
id: actionCalibrate
198-
199219
index: 10
220+
200221
text: qsTr("Calibrate sensor")
201222
source: "qrc:/IconLibrary/material-icons/duotone/model_training.svg"
202223
layoutDirection: actionMenu.layoutDirection
@@ -211,8 +232,8 @@ T.Popup {
211232

212233
ActionMenuItem {
213234
id: actionGraphMode
214-
215235
index: 16
236+
216237
text: qsTr("Switch graph")
217238
layoutDirection: actionMenu.layoutDirection
218239
visible: (appContent.state === "DeviceThermometer")
@@ -230,8 +251,8 @@ T.Popup {
230251

231252
ActionMenuItem {
232253
id: actionShowSettings
233-
234254
index: 17
255+
235256
text: qsTr("Sensor infos")
236257
source: "qrc:/IconLibrary/material-icons/duotone/memory.svg"
237258
layoutDirection: actionMenu.layoutDirection
@@ -246,8 +267,8 @@ T.Popup {
246267

247268
ActionMenuItem {
248269
id: actionReboot
249-
250270
index: 32
271+
251272
text: qsTr("Reboot sensor")
252273
source: "qrc:/IconLibrary/material-symbols/refresh.svg"
253274
layoutDirection: actionMenu.layoutDirection
@@ -259,6 +280,8 @@ T.Popup {
259280
close()
260281
}
261282
}
283+
284+
////////
262285
}
263286
}
264287

‎qml/popups/PopupBackgroundUpdates.qml

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
import QtQuick
2+
import QtQuick.Effects
23
import QtQuick.Controls
34

4-
import ThemeEngine
5+
import ComponentLibrary
56

67
Popup {
78
id: popupBackgroundUpdates
@@ -36,7 +37,7 @@ Popup {
3637

3738
Overlay.modal: Rectangle {
3839
color: "#000"
39-
opacity: ThemeEngine.isLight ? 0.24 : 0.666
40+
opacity: Theme.isLight ? 0.24 : 0.48
4041
}
4142

4243
background: Rectangle {
@@ -53,6 +54,14 @@ Popup {
5354
visible: singleColumn
5455
color: Theme.colorSeparator
5556
}
57+
58+
layer.enabled: !singleColumn
59+
layer.effect: MultiEffect { // shadow
60+
autoPaddingEnabled: true
61+
blurMax: 48
62+
shadowEnabled: true
63+
shadowColor: Theme.isLight ? "#aa000000" : "#cc000000"
64+
}
5665
}
5766

5867
////////////////////////////////////////////////////////////////////////////

‎qml/popups/PopupBlacklistDevice.qml

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import QtQuick.Effects
33
import QtQuick.Layouts
44
import QtQuick.Controls
55

6-
import ThemeEngine
6+
import ComponentLibrary
77

88
Popup {
99
id: popupBlacklistDevice
@@ -40,7 +40,7 @@ Popup {
4040

4141
Overlay.modal: Rectangle {
4242
color: "#000"
43-
opacity: ThemeEngine.isLight ? 0.24 : 0.666
43+
opacity: Theme.isLight ? 0.24 : 0.48
4444
}
4545

4646
background: Rectangle {
@@ -59,10 +59,11 @@ Popup {
5959
}
6060

6161
layer.enabled: !singleColumn
62-
layer.effect: MultiEffect {
62+
layer.effect: MultiEffect { // shadow
6363
autoPaddingEnabled: true
64+
blurMax: 48
6465
shadowEnabled: true
65-
shadowColor: ThemeEngine.isLight ? "#88000000" : "#aaffffff"
66+
shadowColor: Theme.isLight ? "#aa000000" : "#cc000000"
6667
}
6768
}
6869

‎qml/popups/PopupCalibration.qml

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import QtQuick
22
import QtQuick.Effects
33
import QtQuick.Controls
44

5-
import ThemeEngine
5+
import ComponentLibrary
66

77
Popup {
88
id: popupCalibration
@@ -39,10 +39,11 @@ Popup {
3939
}
4040

4141
layer.enabled: !singleColumn
42-
layer.effect: MultiEffect {
42+
layer.effect: MultiEffect { // shadow
4343
autoPaddingEnabled: true
44+
blurMax: 48
4445
shadowEnabled: true
45-
shadowColor: ThemeEngine.isLight ? "#88000000" : "#aaffffff"
46+
shadowColor: Theme.isLight ? "#aa000000" : "#cc000000"
4647
}
4748
}
4849

0 commit comments

Comments
 (0)