ColorPicker: QOL improvements

Modules/Panels/Settings/SettingsContent.qml

@@ -13,6 +13,9 @@ import qs.Widgets
 Item {
   id: root
 
+  // Screen reference for child components
+  property var screen
+
   // Input: which tab to show initially
   property int requestedTab: 0
 
@@ -669,6 +672,11 @@ Item {
                       active: true
                       sourceComponent: root.tabsModel[index]?.source
                       width: scrollView.availableWidth
+                      onLoaded: {
+                        if (item && item.hasOwnProperty("screen")) {
+                          item.screen = root.screen;
+                        }
+                      }
                     }
                   }
                 }

Modules/Panels/Settings/SettingsPanel.qml

@@ -226,6 +226,7 @@ SmartPanel {
     SettingsContent {
       id: settingsContent
       anchors.fill: parent
+      screen: root.screen
       onCloseRequested: root.close()
       Component.onCompleted: {
         root._settingsContent = settingsContent;

Modules/Panels/Settings/Tabs/SystemMonitorTab.qml

@@ -10,6 +10,8 @@ import qs.Widgets
 ColumnLayout {
   id: root
 
+  property var screen
+
   spacing: Style.marginL
 
   NHeader {
@@ -70,6 +72,7 @@ ColumnLayout {
       }
 
       NColorPicker {
+        screen: root.screen
         Layout.preferredWidth: Style.sliderWidth
         Layout.preferredHeight: Style.baseWidgetSize
         enabled: Settings.data.systemMonitor.useCustomColors
@@ -88,6 +91,7 @@ ColumnLayout {
       }
 
       NColorPicker {
+        screen: root.screen
         Layout.preferredWidth: Style.sliderWidth
         Layout.preferredHeight: Style.baseWidgetSize
         enabled: Settings.data.systemMonitor.useCustomColors

Modules/Panels/Settings/Tabs/WallpaperTab.qml

@@ -11,6 +11,7 @@ import qs.Widgets
 ColumnLayout {
   id: root
 
+  property var screen
   property string specificFolderMonitorName: ""
 
   spacing: Style.marginL
@@ -233,6 +234,7 @@ ColumnLayout {
       }
 
       NColorPicker {
+        screen: root.screen
         selectedColor: Settings.data.wallpaper.fillColor
         onColorSelected: color => Settings.data.wallpaper.fillColor = color
       }

Modules/Panels/Wallpaper/WallpaperPanel.qml

@@ -186,6 +186,7 @@ SmartPanel {
     // Solid color picker dialog
     NColorPickerDialog {
       id: solidColorPicker
+      screen: root.screen
       selectedColor: Settings.data.wallpaper.solidColor
       onColorSelected: color => WallpaperService.setSolidColor(color.toString())
     }

Widgets/NColorPicker.qml

@@ -7,6 +7,7 @@ import qs.Widgets
 Rectangle {
   id: root
 
+  property var screen
   property color selectedColor: Color.black
 
   signal colorSelected(color color)
@@ -26,7 +27,8 @@ Rectangle {
     onClicked: {
       var dialog = Qt.createComponent("NColorPickerDialog.qml").createObject(root, {
                                                                                "selectedColor": selectedColor,
-                                                                               "parent": Overlay.overlay
+                                                                               "parent": Overlay.overlay,
+                                                                               "screen": root.screen
                                                                              });
       // Connect the dialog's signal to the picker's signal
       dialog.colorSelected.connect(function (color) {

Widgets/NColorPickerDialog.qml

@@ -10,6 +10,7 @@ import qs.Widgets
 Popup {
   id: root
 
+  property var screen
   property color selectedColor: Color.black
 
   enum EditMode {
@@ -34,17 +35,19 @@ Popup {
   signal colorSelected(color color)
 
   width: 580
-  height: {
-    const h = scrollView.implicitHeight + padding * 2;
-    Math.min(h, screen?.height - Style.barHeight - Style.marginL * 2);
-  }
   padding: Style.marginXL
 
-  // Center popup in parent
-  x: (parent.width - width) * 0.5
-  y: (parent.height - height) * 0.5
-
   modal: true
+  closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutside
+
+  onOpened: {
+    // Center on screen after popup is opened and parent position is known
+    if (screen && parent) {
+      var parentPos = parent.mapToItem(null, 0, 0);
+      x = Math.round((screen.width - width) / 2 - parentPos.x);
+      y = Math.round((screen.height - height) / 2 - parentPos.y);
+    }
+  }
 
   background: Rectangle {
     color: Color.mSurface
@@ -53,20 +56,13 @@ Popup {
     border.width: Style.borderM
   }
 
-  contentItem: NScrollView {
-    id: scrollView
-    width: parent.width
+  contentItem: ColumnLayout {
+    id: mainContent
+    spacing: Style.marginL
 
-    verticalPolicy: ScrollBar.AlwaysOff
-    horizontalPolicy: ScrollBar.AlwaysOff
-
-    ColumnLayout {
-      width: scrollView.availableWidth
-      spacing: Style.marginL
-
-      // Header
-      RowLayout {
-        Layout.fillWidth: true
+    // Header
+    RowLayout {
+      Layout.fillWidth: true
 
         RowLayout {
           spacing: Style.marginS
@@ -606,22 +602,26 @@ Popup {
             }
           }
 
-          NCollapsible {
-            id: paletteCollapsible
+          NLabel {
             label: I18n.tr("widgets.color-picker.palette.label")
-            description: I18n.tr("widgets.color-picker.palette.description")
-
             Layout.fillWidth: true
-            contentSpacing: Style.marginS
+          }
+
+          NScrollView {
+            Layout.fillWidth: true
+            Layout.preferredHeight: Math.min(paletteGrid.implicitHeight, 200)
+            verticalPolicy: paletteGrid.implicitHeight > 200 ? ScrollBar.AsNeeded : ScrollBar.AlwaysOff
+            horizontalPolicy: ScrollBar.AlwaysOff
 
             GridLayout {
-              Layout.alignment: Qt.AlignHCenter
-              columns: 15
+              id: paletteGrid
+              width: parent.availableWidth
+              columns: 17
               columnSpacing: 6
               rowSpacing: 6
 
               NLabel {
-                Layout.columnSpan: 15
+                Layout.columnSpan: 17
                 Layout.fillWidth: true
                 description: I18n.tr("widgets.color-picker.palette.theme-colors")
               }
@@ -686,12 +686,18 @@ Popup {
               }
 
               NDivider {
-                Layout.columnSpan: 15
+                Layout.columnSpan: 17
                 Layout.fillWidth: true
                 Layout.topMargin: Style.marginXS
                 Layout.bottomMargin: 0
               }
 
+              NLabel {
+                Layout.columnSpan: 17
+                Layout.fillWidth: true
+                description: I18n.tr("widgets.color-picker.palette.description")
+              }
+
               Repeater {
                 model: ColorList.colors
 
@@ -750,10 +756,12 @@ Popup {
           icon: "check"
           onClicked: {
             root.colorSelected(root.selectedColor);
-            root.close();
+            // Delay close to prevent click propagation to elements behind the dialog
+            Qt.callLater(() => {
+              root.close();
+            });
           }
         }
       }
-    }
   }
 }