1
0
mirror of https://github.com/AvengeMedia/DankMaterialShell.git synced 2026-04-03 20:32:07 -04:00

powermenu: more intuitive layout

This commit is contained in:
bbedward
2025-11-12 12:08:42 -05:00
parent e3b7360f39
commit da7e599e65
3 changed files with 134 additions and 118 deletions

View File

@@ -34,7 +34,7 @@ DankModal {
} }
function getActionAtIndex(index) { function getActionAtIndex(index) {
const actions = ["poweroff", "lock", "suspend", "reboot", "logout", SessionService.hibernateSupported ? "hibernate" : "restart"] const actions = ["reboot", "logout", "poweroff", "lock", "suspend", SessionService.hibernateSupported ? "hibernate" : "restart"]
return actions[index] return actions[index]
} }
@@ -170,14 +170,14 @@ DankModal {
rowSpacing: Theme.spacingS rowSpacing: Theme.spacingS
Rectangle { Rectangle {
id: poweroffButton id: rebootButton
width: (parent.width - Theme.spacingS * 2) / 3 width: (parent.width - Theme.spacingS * 2) / 3
height: 100 height: 100
radius: Theme.cornerRadius radius: Theme.cornerRadius
color: { color: {
if (root.selectedIndex === 0) { if (root.selectedIndex === 0) {
return Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.12) return Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.12)
} else if (poweroffArea.containsMouse) { } else if (rebootArea.containsMouse) {
return Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.08) return Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.08)
} else { } else {
return Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.08) return Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.08)
@@ -186,6 +186,106 @@ DankModal {
border.color: root.selectedIndex === 0 ? Theme.primary : "transparent" border.color: root.selectedIndex === 0 ? Theme.primary : "transparent"
border.width: root.selectedIndex === 0 ? 2 : 0 border.width: root.selectedIndex === 0 ? 2 : 0
Column {
anchors.centerIn: parent
spacing: Theme.spacingS
DankIcon {
name: "restart_alt"
size: Theme.iconSize + 8
color: rebootArea.containsMouse ? Theme.warning : Theme.surfaceText
anchors.horizontalCenter: parent.horizontalCenter
}
StyledText {
text: I18n.tr("Reboot")
font.pixelSize: Theme.fontSizeMedium
color: rebootArea.containsMouse ? Theme.warning : Theme.surfaceText
font.weight: Font.Medium
anchors.horizontalCenter: parent.horizontalCenter
}
}
MouseArea {
id: rebootArea
anchors.fill: parent
hoverEnabled: true
cursorShape: Qt.PointingHandCursor
onClicked: () => {
root.selectedRow = 0
root.selectedCol = 0
selectOption("reboot")
}
}
}
Rectangle {
id: logoutButton
width: (parent.width - Theme.spacingS * 2) / 3
height: 100
radius: Theme.cornerRadius
color: {
if (root.selectedIndex === 1) {
return Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.12)
} else if (logoutArea.containsMouse) {
return Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.08)
} else {
return Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.08)
}
}
border.color: root.selectedIndex === 1 ? Theme.primary : "transparent"
border.width: root.selectedIndex === 1 ? 2 : 0
Column {
anchors.centerIn: parent
spacing: Theme.spacingS
DankIcon {
name: "logout"
size: Theme.iconSize + 8
color: Theme.surfaceText
anchors.horizontalCenter: parent.horizontalCenter
}
StyledText {
text: I18n.tr("Log Out")
font.pixelSize: Theme.fontSizeMedium
color: Theme.surfaceText
font.weight: Font.Medium
anchors.horizontalCenter: parent.horizontalCenter
}
}
MouseArea {
id: logoutArea
anchors.fill: parent
hoverEnabled: true
cursorShape: Qt.PointingHandCursor
onClicked: () => {
root.selectedRow = 0
root.selectedCol = 1
selectOption("logout")
}
}
}
Rectangle {
id: poweroffButton
width: (parent.width - Theme.spacingS * 2) / 3
height: 100
radius: Theme.cornerRadius
color: {
if (root.selectedIndex === 2) {
return Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.12)
} else if (poweroffArea.containsMouse) {
return Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.08)
} else {
return Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.08)
}
}
border.color: root.selectedIndex === 2 ? Theme.primary : "transparent"
border.width: root.selectedIndex === 2 ? 2 : 0
Column { Column {
anchors.centerIn: parent anchors.centerIn: parent
spacing: Theme.spacingS spacing: Theme.spacingS
@@ -213,7 +313,7 @@ DankModal {
cursorShape: Qt.PointingHandCursor cursorShape: Qt.PointingHandCursor
onClicked: () => { onClicked: () => {
root.selectedRow = 0 root.selectedRow = 0
root.selectedCol = 0 root.selectedCol = 2
selectOption("poweroff") selectOption("poweroff")
} }
} }
@@ -225,7 +325,7 @@ DankModal {
height: 100 height: 100
radius: Theme.cornerRadius radius: Theme.cornerRadius
color: { color: {
if (root.selectedIndex === 1) { if (root.selectedIndex === 3) {
return Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.12) return Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.12)
} else if (lockArea.containsMouse) { } else if (lockArea.containsMouse) {
return Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.08) return Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.08)
@@ -233,8 +333,8 @@ DankModal {
return Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.08) return Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.08)
} }
} }
border.color: root.selectedIndex === 1 ? Theme.primary : "transparent" border.color: root.selectedIndex === 3 ? Theme.primary : "transparent"
border.width: root.selectedIndex === 1 ? 2 : 0 border.width: root.selectedIndex === 3 ? 2 : 0
Column { Column {
anchors.centerIn: parent anchors.centerIn: parent
@@ -262,8 +362,8 @@ DankModal {
hoverEnabled: true hoverEnabled: true
cursorShape: Qt.PointingHandCursor cursorShape: Qt.PointingHandCursor
onClicked: () => { onClicked: () => {
root.selectedRow = 0 root.selectedRow = 1
root.selectedCol = 1 root.selectedCol = 0
selectOption("lock") selectOption("lock")
} }
} }
@@ -275,7 +375,7 @@ DankModal {
height: 100 height: 100
radius: Theme.cornerRadius radius: Theme.cornerRadius
color: { color: {
if (root.selectedIndex === 2) { if (root.selectedIndex === 4) {
return Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.12) return Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.12)
} else if (suspendArea.containsMouse) { } else if (suspendArea.containsMouse) {
return Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.08) return Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.08)
@@ -283,8 +383,8 @@ DankModal {
return Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.08) return Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.08)
} }
} }
border.color: root.selectedIndex === 2 ? Theme.primary : "transparent" border.color: root.selectedIndex === 4 ? Theme.primary : "transparent"
border.width: root.selectedIndex === 2 ? 2 : 0 border.width: root.selectedIndex === 4 ? 2 : 0
Column { Column {
anchors.centerIn: parent anchors.centerIn: parent
@@ -311,110 +411,10 @@ DankModal {
anchors.fill: parent anchors.fill: parent
hoverEnabled: true hoverEnabled: true
cursorShape: Qt.PointingHandCursor cursorShape: Qt.PointingHandCursor
onClicked: () => {
root.selectedRow = 0
root.selectedCol = 2
selectOption("suspend")
}
}
}
Rectangle {
id: rebootButton
width: (parent.width - Theme.spacingS * 2) / 3
height: 100
radius: Theme.cornerRadius
color: {
if (root.selectedIndex === 3) {
return Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.12)
} else if (rebootArea.containsMouse) {
return Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.08)
} else {
return Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.08)
}
}
border.color: root.selectedIndex === 3 ? Theme.primary : "transparent"
border.width: root.selectedIndex === 3 ? 2 : 0
Column {
anchors.centerIn: parent
spacing: Theme.spacingS
DankIcon {
name: "restart_alt"
size: Theme.iconSize + 8
color: rebootArea.containsMouse ? Theme.warning : Theme.surfaceText
anchors.horizontalCenter: parent.horizontalCenter
}
StyledText {
text: I18n.tr("Reboot")
font.pixelSize: Theme.fontSizeMedium
color: rebootArea.containsMouse ? Theme.warning : Theme.surfaceText
font.weight: Font.Medium
anchors.horizontalCenter: parent.horizontalCenter
}
}
MouseArea {
id: rebootArea
anchors.fill: parent
hoverEnabled: true
cursorShape: Qt.PointingHandCursor
onClicked: () => {
root.selectedRow = 1
root.selectedCol = 0
selectOption("reboot")
}
}
}
Rectangle {
id: logoutButton
width: (parent.width - Theme.spacingS * 2) / 3
height: 100
radius: Theme.cornerRadius
color: {
if (root.selectedIndex === 4) {
return Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.12)
} else if (logoutArea.containsMouse) {
return Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.08)
} else {
return Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.08)
}
}
border.color: root.selectedIndex === 4 ? Theme.primary : "transparent"
border.width: root.selectedIndex === 4 ? 2 : 0
Column {
anchors.centerIn: parent
spacing: Theme.spacingS
DankIcon {
name: "logout"
size: Theme.iconSize + 8
color: Theme.surfaceText
anchors.horizontalCenter: parent.horizontalCenter
}
StyledText {
text: I18n.tr("Log Out")
font.pixelSize: Theme.fontSizeMedium
color: Theme.surfaceText
font.weight: Font.Medium
anchors.horizontalCenter: parent.horizontalCenter
}
}
MouseArea {
id: logoutArea
anchors.fill: parent
hoverEnabled: true
cursorShape: Qt.PointingHandCursor
onClicked: () => { onClicked: () => {
root.selectedRow = 1 root.selectedRow = 1
root.selectedCol = 1 root.selectedCol = 1
selectOption("logout") selectOption("suspend")
} }
} }
} }

View File

@@ -27,6 +27,7 @@ DankPopout {
property bool editMode: false property bool editMode: false
property int expandedWidgetIndex: -1 property int expandedWidgetIndex: -1
property var expandedWidgetData: null property var expandedWidgetData: null
property bool powerMenuOpen: powerMenuModalLoader?.item?.shouldBeVisible ?? false
signal lockRequested signal lockRequested
@@ -115,6 +116,21 @@ DankPopout {
antialiasing: true antialiasing: true
smooth: true smooth: true
Rectangle {
anchors.fill: parent
color: Qt.rgba(0, 0, 0, 0.6)
radius: parent.radius
visible: root.powerMenuOpen
z: 5000
Behavior on opacity {
NumberAnimation {
duration: 200
easing.type: Easing.OutCubic
}
}
}
Column { Column {
id: mainColumn id: mainColumn
width: parent.width - Theme.spacingL * 2 width: parent.width - Theme.spacingL * 2

View File

@@ -2048,7 +2048,7 @@
{ {
"term": "Lock", "term": "Lock",
"context": "Lock", "context": "Lock",
"reference": "Modals/PowerMenuModal.qml:251", "reference": "Modals/PowerMenuModal.qml:351",
"comment": "" "comment": ""
}, },
{ {
@@ -2072,7 +2072,7 @@
{ {
"term": "Log Out", "term": "Log Out",
"context": "Log Out", "context": "Log Out",
"reference": "Modals/PowerMenuModal.qml:55, Modals/PowerMenuModal.qml:401, Modules/Lock/LockPowerMenu.qml:209, Modules/ControlCenter/PowerMenu.qml:14", "reference": "Modals/PowerMenuModal.qml:55, Modals/PowerMenuModal.qml:251, Modules/Lock/LockPowerMenu.qml:209, Modules/ControlCenter/PowerMenu.qml:14",
"comment": "" "comment": ""
}, },
{ {
@@ -2846,7 +2846,7 @@
{ {
"term": "Power Off", "term": "Power Off",
"context": "Power Off", "context": "Power Off",
"reference": "Modals/PowerMenuModal.qml:71, Modals/PowerMenuModal.qml:201, Modules/Lock/LockPowerMenu.qml:432, Modules/ControlCenter/PowerMenu.qml:17", "reference": "Modals/PowerMenuModal.qml:71, Modals/PowerMenuModal.qml:301, Modules/Lock/LockPowerMenu.qml:432, Modules/ControlCenter/PowerMenu.qml:17",
"comment": "" "comment": ""
}, },
{ {
@@ -2978,7 +2978,7 @@
{ {
"term": "Reboot", "term": "Reboot",
"context": "Reboot", "context": "Reboot",
"reference": "Modals/PowerMenuModal.qml:67, Modals/PowerMenuModal.qml:351, Modules/Lock/LockPowerMenu.qml:372, Modules/ControlCenter/PowerMenu.qml:16", "reference": "Modals/PowerMenuModal.qml:67, Modals/PowerMenuModal.qml:201, Modules/Lock/LockPowerMenu.qml:372, Modules/ControlCenter/PowerMenu.qml:16",
"comment": "" "comment": ""
}, },
{ {
@@ -3524,7 +3524,7 @@
{ {
"term": "Suspend", "term": "Suspend",
"context": "Suspend", "context": "Suspend",
"reference": "Modals/PowerMenuModal.qml:59, Modals/PowerMenuModal.qml:301, Modules/Lock/LockPowerMenu.qml:260, Modules/ControlCenter/PowerMenu.qml:15", "reference": "Modals/PowerMenuModal.qml:59, Modals/PowerMenuModal.qml:401, Modules/Lock/LockPowerMenu.qml:260, Modules/ControlCenter/PowerMenu.qml:15",
"comment": "" "comment": ""
}, },
{ {