ControlCenter: Implement edit mode for customizing widgets

2026-01-26 14:32:52 -05:00 · 2025-09-23 14:38:01 -04:00
parent b9b1737639
commit c04177e45d
32 changed files with 2870 additions and 796 deletions
--- a/Modules/ControlCenter/Components/HeaderPane.qml
+++ b/Modules/ControlCenter/Components/HeaderPane.qml
@@ -0,0 +1,122 @@
+import QtQuick
+import qs.Common
+import qs.Services
+import qs.Widgets
+
+Rectangle {
+    id: root
+
+    property bool powerOptionsExpanded: false
+    property bool editMode: false
+
+    signal powerActionRequested(string action, string title, string message)
+    signal lockRequested()
+    signal editModeToggled()
+
+    implicitHeight: 90
+    radius: Theme.cornerRadius
+    color: Qt.rgba(Theme.surfaceVariant.r,
+                   Theme.surfaceVariant.g,
+                   Theme.surfaceVariant.b,
+                   Theme.getContentBackgroundAlpha() * 0.4)
+    border.color: Qt.rgba(Theme.outline.r, Theme.outline.g,
+                          Theme.outline.b, 0.08)
+    border.width: 1
+
+    Row {
+        anchors.left: parent.left
+        anchors.verticalCenter: parent.verticalCenter
+        anchors.leftMargin: Theme.spacingL
+        anchors.rightMargin: Theme.spacingL
+        spacing: Theme.spacingM
+
+        DankCircularImage {
+            id: avatarContainer
+
+            width: 64
+            height: 64
+            imageSource: {
+                if (PortalService.profileImage === "")
+                    return ""
+
+                if (PortalService.profileImage.startsWith("/"))
+                    return "file://" + PortalService.profileImage
+
+                return PortalService.profileImage
+            }
+            fallbackIcon: "person"
+        }
+
+        Column {
+            anchors.verticalCenter: parent.verticalCenter
+            spacing: 2
+
+            Typography {
+                text: UserInfoService.fullName
+                      || UserInfoService.username || "User"
+                style: Typography.Style.Subtitle
+                color: Theme.surfaceText
+            }
+
+            Typography {
+                text: (UserInfoService.uptime || "Unknown")
+                style: Typography.Style.Caption
+                color: Theme.surfaceVariantText
+            }
+        }
+    }
+
+    Row {
+        id: actionButtonsRow
+        anchors.right: parent.right
+        anchors.top: parent.top
+        anchors.rightMargin: Theme.spacingXS
+        anchors.topMargin: Theme.spacingXS
+        spacing: Theme.spacingXS
+
+        DankActionButton {
+            buttonSize: 36
+            iconName: "lock"
+            iconSize: Theme.iconSize - 4
+            iconColor: Theme.surfaceText
+            backgroundColor: "transparent"
+            onClicked: {
+                root.lockRequested()
+            }
+        }
+
+        DankActionButton {
+            buttonSize: 36
+            iconName: root.powerOptionsExpanded ? "expand_less" : "power_settings_new"
+            iconSize: Theme.iconSize - 4
+            iconColor: root.powerOptionsExpanded ? Theme.primary : Theme.surfaceText
+            backgroundColor: "transparent"
+            onClicked: {
+                root.powerOptionsExpanded = !root.powerOptionsExpanded
+            }
+        }
+
+        DankActionButton {
+            buttonSize: 36
+            iconName: "settings"
+            iconSize: Theme.iconSize - 4
+            iconColor: Theme.surfaceText
+            backgroundColor: "transparent"
+            onClicked: {
+                settingsModal.show()
+            }
+        }
+    }
+
+    DankActionButton {
+        buttonSize: 24
+        iconName: editMode ? "done" : "edit"
+        iconSize: 14
+        iconColor: editMode ? Theme.primary : Theme.outline
+        backgroundColor: "transparent"
+        anchors.bottom: parent.bottom
+        anchors.right: parent.right
+        anchors.margins: Theme.spacingXS
+        onClicked: root.editModeToggled()
+    }
+}