mirror of
https://github.com/AvengeMedia/DankMaterialShell.git
synced 2026-04-03 20:32:07 -04:00
feat: PowerMenu modal
This commit is contained in:
purian23
@@ -12,14 +12,27 @@ DankModal {
|
||||
property string powerConfirmAction: ""
|
||||
property string powerConfirmTitle: ""
|
||||
property string powerConfirmMessage: ""
|
||||
property int selectedButton: -1 // -1 = none, 0 = Cancel, 1 = Confirm
|
||||
property bool keyboardNavigation: false
|
||||
|
||||
function show(action, title, message) {
|
||||
powerConfirmAction = action
|
||||
powerConfirmTitle = title
|
||||
powerConfirmMessage = message
|
||||
selectedButton = -1 // No button selected initially
|
||||
keyboardNavigation = false
|
||||
open()
|
||||
}
|
||||
|
||||
function selectButton() {
|
||||
if (selectedButton === 0) {
|
||||
close()
|
||||
} else {
|
||||
close()
|
||||
executePowerAction(powerConfirmAction)
|
||||
}
|
||||
}
|
||||
|
||||
function executePowerAction(action) {
|
||||
switch (action) {
|
||||
case "logout":
|
||||
@@ -44,6 +57,35 @@ DankModal {
|
||||
onBackgroundClicked: {
|
||||
close()
|
||||
}
|
||||
onOpened: {
|
||||
modalFocusScope.forceActiveFocus()
|
||||
}
|
||||
modalFocusScope.Keys.onPressed: function(event) {
|
||||
switch (event.key) {
|
||||
case Qt.Key_Left:
|
||||
case Qt.Key_Up:
|
||||
keyboardNavigation = true
|
||||
selectedButton = 0
|
||||
event.accepted = true
|
||||
break
|
||||
case Qt.Key_Right:
|
||||
case Qt.Key_Down:
|
||||
keyboardNavigation = true
|
||||
selectedButton = 1
|
||||
event.accepted = true
|
||||
break
|
||||
case Qt.Key_Tab:
|
||||
keyboardNavigation = true
|
||||
selectedButton = selectedButton === -1 ? 0 : (selectedButton + 1) % 2
|
||||
event.accepted = true
|
||||
break
|
||||
case Qt.Key_Return:
|
||||
case Qt.Key_Enter:
|
||||
selectButton()
|
||||
event.accepted = true
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
content: Component {
|
||||
Item {
|
||||
@@ -93,7 +135,16 @@ DankModal {
|
||||
width: 120
|
||||
height: 40
|
||||
radius: Theme.cornerRadius
|
||||
color: cancelButton.containsMouse ? Theme.surfaceTextPressed : Theme.surfaceVariantAlpha
|
||||
color: {
|
||||
if (keyboardNavigation && selectedButton === 0)
|
||||
return Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.12)
|
||||
else if (cancelButton.containsMouse)
|
||||
return Theme.surfacePressed
|
||||
else
|
||||
return Theme.surfaceVariantAlpha
|
||||
}
|
||||
border.color: (keyboardNavigation && selectedButton === 0) ? Theme.primary : "transparent"
|
||||
border.width: (keyboardNavigation && selectedButton === 0) ? 1 : 0
|
||||
|
||||
StyledText {
|
||||
text: "Cancel"
|
||||
@@ -110,9 +161,11 @@ DankModal {
|
||||
hoverEnabled: true
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
onClicked: {
|
||||
close()
|
||||
selectedButton = 0
|
||||
selectButton()
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
@@ -132,12 +185,15 @@ DankModal {
|
||||
baseColor = Theme.primary
|
||||
break
|
||||
}
|
||||
return confirmButton.containsMouse ? Qt.rgba(
|
||||
baseColor.r,
|
||||
baseColor.g,
|
||||
baseColor.b,
|
||||
0.9) : baseColor
|
||||
if (keyboardNavigation && selectedButton === 1)
|
||||
return Qt.rgba(baseColor.r, baseColor.g, baseColor.b, 1)
|
||||
else if (confirmButton.containsMouse)
|
||||
return Qt.rgba(baseColor.r, baseColor.g, baseColor.b, 0.9)
|
||||
else
|
||||
return baseColor
|
||||
}
|
||||
border.color: (keyboardNavigation && selectedButton === 1) ? "white" : "transparent"
|
||||
border.width: (keyboardNavigation && selectedButton === 1) ? 1 : 0
|
||||
|
||||
StyledText {
|
||||
text: "Confirm"
|
||||
@@ -154,13 +210,19 @@ DankModal {
|
||||
hoverEnabled: true
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
onClicked: {
|
||||
close()
|
||||
executePowerAction(powerConfirmAction)
|
||||
selectedButton = 1
|
||||
selectButton()
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
337
Modals/PowerMenuModal.qml
Normal file
337
Modals/PowerMenuModal.qml
Normal file
@@ -0,0 +1,337 @@
|
||||
import QtQuick
|
||||
import QtQuick.Controls
|
||||
import Quickshell
|
||||
import Quickshell.Io
|
||||
import qs.Common
|
||||
import qs.Services
|
||||
import qs.Widgets
|
||||
|
||||
DankModal {
|
||||
id: root
|
||||
|
||||
property int selectedIndex: 0
|
||||
property int optionCount: 4
|
||||
|
||||
signal powerActionRequested(string action, string title, string message)
|
||||
|
||||
function selectOption() {
|
||||
close()
|
||||
switch (selectedIndex) {
|
||||
case 0:
|
||||
root.powerActionRequested("logout", "Log Out", "Are you sure you want to log out?")
|
||||
break
|
||||
case 1:
|
||||
root.powerActionRequested("suspend", "Suspend", "Are you sure you want to suspend the system?")
|
||||
break
|
||||
case 2:
|
||||
root.powerActionRequested("reboot", "Reboot", "Are you sure you want to reboot the system?")
|
||||
break
|
||||
case 3:
|
||||
root.powerActionRequested("poweroff", "Power Off", "Are you sure you want to power off the system?")
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
shouldBeVisible: false
|
||||
width: 320
|
||||
height: 300
|
||||
enableShadow: true
|
||||
onBackgroundClicked: {
|
||||
close()
|
||||
}
|
||||
onOpened: {
|
||||
selectedIndex = 0
|
||||
modalFocusScope.forceActiveFocus()
|
||||
}
|
||||
modalFocusScope.Keys.onPressed: function(event) {
|
||||
switch (event.key) {
|
||||
case Qt.Key_Up:
|
||||
selectedIndex = (selectedIndex - 1 + optionCount) % optionCount
|
||||
event.accepted = true
|
||||
break
|
||||
case Qt.Key_Down:
|
||||
selectedIndex = (selectedIndex + 1) % optionCount
|
||||
event.accepted = true
|
||||
break
|
||||
case Qt.Key_Tab:
|
||||
selectedIndex = (selectedIndex + 1) % optionCount
|
||||
event.accepted = true
|
||||
break
|
||||
case Qt.Key_Return:
|
||||
case Qt.Key_Enter:
|
||||
selectOption()
|
||||
event.accepted = true
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
content: Component {
|
||||
Item {
|
||||
anchors.fill: parent
|
||||
|
||||
Column {
|
||||
anchors.fill: parent
|
||||
anchors.margins: Theme.spacingL
|
||||
spacing: Theme.spacingM
|
||||
|
||||
Row {
|
||||
width: parent.width
|
||||
|
||||
StyledText {
|
||||
text: "Power Options"
|
||||
font.pixelSize: Theme.fontSizeLarge
|
||||
color: Theme.surfaceText
|
||||
font.weight: Font.Medium
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
}
|
||||
|
||||
Item {
|
||||
width: parent.width - 150
|
||||
height: 1
|
||||
}
|
||||
|
||||
DankActionButton {
|
||||
iconName: "close"
|
||||
iconSize: Theme.iconSize - 4
|
||||
iconColor: Theme.surfaceText
|
||||
hoverColor: Qt.rgba(Theme.error.r, Theme.error.g, Theme.error.b, 0.12)
|
||||
onClicked: {
|
||||
close()
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
Column {
|
||||
width: parent.width
|
||||
spacing: Theme.spacingS
|
||||
|
||||
Rectangle {
|
||||
width: parent.width
|
||||
height: 50
|
||||
radius: Theme.cornerRadius
|
||||
color: {
|
||||
if (selectedIndex === 0)
|
||||
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: selectedIndex === 0 ? Theme.primary : "transparent"
|
||||
border.width: selectedIndex === 0 ? 1 : 0
|
||||
|
||||
Row {
|
||||
anchors.left: parent.left
|
||||
anchors.leftMargin: Theme.spacingM
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
spacing: Theme.spacingM
|
||||
|
||||
DankIcon {
|
||||
name: "logout"
|
||||
size: Theme.iconSize
|
||||
color: Theme.surfaceText
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
}
|
||||
|
||||
StyledText {
|
||||
text: "Log Out"
|
||||
font.pixelSize: Theme.fontSizeMedium
|
||||
color: Theme.surfaceText
|
||||
font.weight: Font.Medium
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
MouseArea {
|
||||
id: logoutArea
|
||||
|
||||
anchors.fill: parent
|
||||
hoverEnabled: true
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
onClicked: {
|
||||
selectedIndex = 0
|
||||
selectOption()
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
width: parent.width
|
||||
height: 50
|
||||
radius: Theme.cornerRadius
|
||||
color: {
|
||||
if (selectedIndex === 1)
|
||||
return Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.12);
|
||||
else if (suspendArea.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: selectedIndex === 1 ? Theme.primary : "transparent"
|
||||
border.width: selectedIndex === 1 ? 1 : 0
|
||||
|
||||
Row {
|
||||
anchors.left: parent.left
|
||||
anchors.leftMargin: Theme.spacingM
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
spacing: Theme.spacingM
|
||||
|
||||
DankIcon {
|
||||
name: "bedtime"
|
||||
size: Theme.iconSize
|
||||
color: Theme.surfaceText
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
}
|
||||
|
||||
StyledText {
|
||||
text: "Suspend"
|
||||
font.pixelSize: Theme.fontSizeMedium
|
||||
color: Theme.surfaceText
|
||||
font.weight: Font.Medium
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
MouseArea {
|
||||
id: suspendArea
|
||||
|
||||
anchors.fill: parent
|
||||
hoverEnabled: true
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
onClicked: {
|
||||
selectedIndex = 1
|
||||
selectOption()
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
width: parent.width
|
||||
height: 50
|
||||
radius: Theme.cornerRadius
|
||||
color: {
|
||||
if (selectedIndex === 2)
|
||||
return Qt.rgba(Theme.warning.r, Theme.warning.g, Theme.warning.b, 0.12);
|
||||
else if (rebootArea.containsMouse)
|
||||
return Qt.rgba(Theme.warning.r, Theme.warning.g, Theme.warning.b, 0.08);
|
||||
else
|
||||
return Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.08);
|
||||
}
|
||||
border.color: selectedIndex === 2 ? Theme.warning : "transparent"
|
||||
border.width: selectedIndex === 2 ? 1 : 0
|
||||
|
||||
Row {
|
||||
anchors.left: parent.left
|
||||
anchors.leftMargin: Theme.spacingM
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
spacing: Theme.spacingM
|
||||
|
||||
DankIcon {
|
||||
name: "restart_alt"
|
||||
size: Theme.iconSize
|
||||
color: rebootArea.containsMouse ? Theme.warning : Theme.surfaceText
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
}
|
||||
|
||||
StyledText {
|
||||
text: "Reboot"
|
||||
font.pixelSize: Theme.fontSizeMedium
|
||||
color: rebootArea.containsMouse ? Theme.warning : Theme.surfaceText
|
||||
font.weight: Font.Medium
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
MouseArea {
|
||||
id: rebootArea
|
||||
|
||||
anchors.fill: parent
|
||||
hoverEnabled: true
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
onClicked: {
|
||||
selectedIndex = 2
|
||||
selectOption()
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
width: parent.width
|
||||
height: 50
|
||||
radius: Theme.cornerRadius
|
||||
color: {
|
||||
if (selectedIndex === 3)
|
||||
return Qt.rgba(Theme.error.r, Theme.error.g, Theme.error.b, 0.12);
|
||||
else if (powerOffArea.containsMouse)
|
||||
return Qt.rgba(Theme.error.r, Theme.error.g, Theme.error.b, 0.08);
|
||||
else
|
||||
return Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.08);
|
||||
}
|
||||
border.color: selectedIndex === 3 ? Theme.error : "transparent"
|
||||
border.width: selectedIndex === 3 ? 1 : 0
|
||||
|
||||
Row {
|
||||
anchors.left: parent.left
|
||||
anchors.leftMargin: Theme.spacingM
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
spacing: Theme.spacingM
|
||||
|
||||
DankIcon {
|
||||
name: "power_settings_new"
|
||||
size: Theme.iconSize
|
||||
color: powerOffArea.containsMouse ? Theme.error : Theme.surfaceText
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
}
|
||||
|
||||
StyledText {
|
||||
text: "Power Off"
|
||||
font.pixelSize: Theme.fontSizeMedium
|
||||
color: powerOffArea.containsMouse ? Theme.error : Theme.surfaceText
|
||||
font.weight: Font.Medium
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
MouseArea {
|
||||
id: powerOffArea
|
||||
|
||||
anchors.fill: parent
|
||||
hoverEnabled: true
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
onClicked: {
|
||||
selectedIndex = 3
|
||||
selectOption()
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
Item {
|
||||
height: Theme.spacingS
|
||||
}
|
||||
|
||||
StyledText {
|
||||
text: "↑↓ Navigate • Tab Cycle • Enter Select • Esc Close"
|
||||
font.pixelSize: Theme.fontSizeSmall
|
||||
color: Theme.surfaceVariantText
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
opacity: 0.7
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
Reference in New Issue
Block a user