DankBackdrop and resizing control center

Modules/ControlCenter/ControlCenterPopout.qml

@@ -39,8 +39,8 @@ DankPopout {
     signal powerActionRequested(string action, string title, string message)
     signal lockRequested
 
-    popupWidth: 600
+    popupWidth: 550
-    popupHeight: contentLoader.item ? contentLoader.item.implicitHeight : (powerOptionsExpanded ? 570 : 500)
+    popupHeight: contentLoader.item ? contentLoader.item.implicitHeight : 600
     triggerX: Screen.width - 600 - Theme.spacingL
     triggerY: Theme.barHeight - 4 + SettingsData.topBarSpacing + Theme.spacingXS
     triggerWidth: 80
@@ -72,7 +72,11 @@ DankPopout {
                 baseHeight += 90 // user header
                 baseHeight += (powerOptionsExpanded ? 60 : 0) + Theme.spacingL // power options
                 baseHeight += 52 + Theme.spacingL // tab bar
-                baseHeight += 280 // tab content area
+                
+                // Use actual tab content height without adding extra
+                let tabHeight = tabContentLoader.item ? tabContentLoader.item.implicitHeight + Theme.spacingS * 2 : 400
+                baseHeight += Math.min(Math.max(tabHeight, 300), 500)
+                
                 return baseHeight
             }
 
@@ -698,6 +702,7 @@ DankPopout {
                 }
 
                 Rectangle {
+                    id: tabContentContainer
                     width: parent.width
                     Layout.fillHeight: true
                     radius: Theme.cornerRadius
@@ -709,50 +714,64 @@ DankPopout {
                     border.width: 1
 
                     Loader {
+                        id: tabContentLoader
                         anchors.fill: parent
                         anchors.margins: Theme.spacingS
-                        active: root.currentTab === "network"
                         asynchronous: true
-                        sourceComponent: Component {
+                        sourceComponent: {
-                            NetworkTab {}
+                            switch (root.currentTab) {
+                            case "network":
+                                return networkTabComponent
+                            case "audio":
+                                return audioTabComponent
+                            case "bluetooth":
+                                return BluetoothService.available ? bluetoothTabComponent : null
+                            case "display":
+                                return displayTabComponent
+                            default:
+                                return networkTabComponent
+                            }
                         }
                     }
 
-                    Loader {
+                    Component {
-                        anchors.fill: parent
+                        id: networkTabComponent
-                        anchors.margins: Theme.spacingS
+                        NetworkTab {
-                        active: root.currentTab === "audio"
+                            implicitHeight: 550
-                        asynchronous: true
-                        sourceComponent: Component {
-                            AudioTab {}
                         }
                     }
 
-                    Loader {
+                    Component {
-                        anchors.fill: parent
+                        id: audioTabComponent
-                        anchors.margins: Theme.spacingS
+                        AudioTab {
-                        active: BluetoothService.available
+                            implicitHeight: 350
-                                && root.currentTab === "bluetooth"
-                        asynchronous: true
-                        sourceComponent: Component {
-                            BluetoothTab {}
                         }
                     }
 
-                    Loader {
+                    Component {
-                        anchors.fill: parent
+                        id: bluetoothTabComponent
-                        anchors.margins: Theme.spacingS
+                        BluetoothTab {
-                        active: root.currentTab === "display"
+                            implicitHeight: 400
-                        asynchronous: true
-                        sourceComponent: Component {
-                            DisplayTab {}
                         }
                     }
 
-                    Behavior on height {
+                    Component {
-                        NumberAnimation {
+                        id: displayTabComponent
-                            duration: Theme.shortDuration
+                        DisplayTab {
-                            easing.type: Theme.standardEasing
+                            implicitHeight: {
+                                let height = Theme.spacingL
+                                
+                                if (BrightnessService.brightnessAvailable) {
+                                    height += 80
+                                    if (BrightnessService.devices.length > 1) {
+                                        height += 40
+                                    }
+                                }
+                                
+                                height += 120
+                                
+                                return Math.max(height, 200)
+                            }
                         }
                     }
                 }
@@ -760,8 +779,8 @@ DankPopout {
 
             Behavior on implicitHeight {
                 NumberAnimation {
-                    duration: Theme.shortDuration
+                    duration: 75
-                    easing.type: Theme.standardEasing
+                    easing.type: Easing.OutQuad
                 }
             }
         }

Modules/ControlCenter/NetworkTab.qml

@@ -247,8 +247,13 @@ Item {
     MouseArea {
         anchors.fill: parent
         visible: wifiContextMenuWindow.visible
-        onClicked: {
+        propagateComposedEvents: true
+        onClicked: function(mouse) {
             wifiContextMenuWindow.hide()
+            mouse.accepted = false
+        }
+        onWheel: function(wheel) {
+            wheel.accepted = false
         }
 
         MouseArea {
@@ -256,8 +261,8 @@ Item {
             y: wifiContextMenuWindow.y
             width: wifiContextMenuWindow.width
             height: wifiContextMenuWindow.height
-            onClicked: {
+            onClicked: function(mouse) {
-
+                mouse.accepted = true
             }
         }
     }

Modules/WallpaperBackground.qml

@@ -6,7 +6,7 @@ import qs.Common
 import qs.Widgets
 
 LazyLoader {
-    active: SessionData.wallpaperPath !== ""
+    active: true
 
     Variants {
         model: SettingsData.getFilteredScreens("wallpaper")
@@ -49,38 +49,9 @@ LazyLoader {
                     active: !root.source
                     asynchronous: true
 
-                    sourceComponent: Rectangle {
+                    sourceComponent: DankBackdrop {
-                        color: Theme.surface
+                        screenWidth: wallpaperWindow.modelData.width
-
+                        screenHeight: wallpaperWindow.modelData.height
-                        Row {
-                            anchors.centerIn: parent
-                            spacing: Theme.spacingL
-
-                            DankIcon {
-                                name: "sentiment_stressed"
-                                color: Theme.surfaceVariantText
-                                size: Theme.iconSize * 5
-                                anchors.verticalCenter: parent.verticalCenter
-                            }
-
-                            Column {
-                                anchors.verticalCenter: parent.verticalCenter
-                                spacing: Theme.spacingS
-
-                                StyledText {
-                                    text: "Wallpaper missing?"
-                                    color: Theme.surfaceVariantText
-                                    font.pixelSize: Theme.fontSizeXLarge * 2
-                                    font.weight: Font.Bold
-                                }
-
-                                StyledText {
-                                    text: "Set wallpaper in Settings"
-                                    color: Theme.primary
-                                    font.pixelSize: Theme.fontSizeLarge
-                                }
-                            }
-                        }
                     }
                 }
 

Widgets/DankBackdrop.qml

@@ -0,0 +1,64 @@
+import QtQuick
+import QtQuick.Effects
+import qs.Common
+
+Item {
+    id: root
+
+    property int screenWidth: 1920
+    property int screenHeight: 1080
+
+    anchors.fill: parent
+
+    Rectangle {
+        anchors.fill: parent
+        color: Qt.darker(Theme.surface, 1.3)
+    }
+
+    Rectangle {
+        x: parent.width * 0.7
+        y: -parent.height * 0.3
+        width: parent.width * 0.8
+        height: parent.height * 1.5
+        color: Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.025)
+        rotation: 35
+    }
+
+    Rectangle {
+        x: parent.width * 0.85
+        y: -parent.height * 0.2
+        width: parent.width * 0.4
+        height: parent.height * 1.2
+        color: Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.04)
+        rotation: 35
+    }
+
+
+    Item {
+        anchors.left: parent.left
+        anchors.bottom: parent.bottom
+        anchors.leftMargin: Theme.spacingXL * 2
+        
+        readonly property real logoHeight: 6 * (Theme.fontSizeLarge * 1.2 * 1.2)
+        readonly property real widgetHeight: Math.max(20, 26 + SettingsData.topBarInnerPadding * 0.6)
+        readonly property real effectiveBarHeight: Math.max(widgetHeight + SettingsData.topBarInnerPadding + 4, Theme.barHeight - 4 - (8 - SettingsData.topBarInnerPadding))
+        readonly property real topBarExclusiveZone: SettingsData.topBarVisible && !SettingsData.topBarAutoHide ? effectiveBarHeight + SettingsData.topBarSpacing - 2 + SettingsData.topBarBottomGap : 0
+        readonly property real availableHeight: screenHeight - topBarExclusiveZone
+        anchors.bottomMargin: Math.max(Theme.spacingXL * 3, (availableHeight - logoHeight) * 0.15)
+        
+        opacity: 0.15
+        
+        StyledText {
+            text: `
+██████╗  █████╗ ███╗   ██╗██╗  ██╗
+██╔══██╗██╔══██╗████╗  ██║██║ ██╔╝
+██║  ██║███████║██╔██╗ ██║█████╔╝
+██║  ██║██╔══██║██║╚██╗██║██╔═██╗
+██████╔╝██║  ██║██║ ╚████║██║  ██╗
+╚═════╝ ╚═╝  ╚═╝╚═╝  ╚═══╝╚═╝  ╚═╝`
+            isMonospace: true
+            font.pixelSize: Theme.fontSizeLarge * 1.2
+            color: Theme.primary
+        }
+    }
+}