FileDialog: also properly hide/restore popups when opening

Modules/SettingsPanel/Bar/BarWidgetSettingsDialog.qml

@@ -9,12 +9,14 @@ import "./WidgetSettings" as WidgetSettings
 
 // Widget Settings Dialog Component
 Popup {
-  id: settingsPopup
+  id: root
 
   property int widgetIndex: -1
   property var widgetData: null
   property string widgetId: ""
 
+  property bool isMasked: false
+
   // Center popup in parent
   x: (parent.width - width) * 0.5
   y: (parent.height - height) * 0.5
@@ -23,52 +25,35 @@ Popup {
   height: content.implicitHeight + padding * 2
   padding: Style.marginXL * scaling
   modal: true
-
-  background: Rectangle {
-    id: bgRect
-    color: Color.mSurface
-    radius: Style.radiusL * scaling
-    border.color: Color.mPrimary
-    border.width: Style.borderM * scaling
-  }
-
-  // Load settings when popup opens with data
+  
   onOpened: {
+    // Mark this popup has opened in the PanelService
+    PanelService.willOpenPopup(root)
+
+    // Load settings when popup opens with data
     if (widgetData && widgetId) {
       loadWidgetSettings()
     }
   }
 
-  function loadWidgetSettings() {
-    const widgetSettingsMap = {
-      "ActiveWindow": "WidgetSettings/ActiveWindowSettings.qml",
-      "Battery": "WidgetSettings/BatterySettings.qml",
-      "Brightness": "WidgetSettings/BrightnessSettings.qml",
-      "Clock": "WidgetSettings/ClockSettings.qml",
-      "CustomButton": "WidgetSettings/CustomButtonSettings.qml",
-      "KeyboardLayout": "WidgetSettings/KeyboardLayoutSettings.qml",
-      "MediaMini": "WidgetSettings/MediaMiniSettings.qml",
-      "Microphone": "WidgetSettings/MicrophoneSettings.qml",
-      "NotificationHistory": "WidgetSettings/NotificationHistorySettings.qml",
-      "Workspace": "WidgetSettings/WorkspaceSettings.qml",
-      "SidePanelToggle": "WidgetSettings/SidePanelToggleSettings.qml",
-      "Spacer": "WidgetSettings/SpacerSettings.qml",
-      "SystemMonitor": "WidgetSettings/SystemMonitorSettings.qml",
-      "Volume": "WidgetSettings/VolumeSettings.qml"
-    }
-
-    const source = widgetSettingsMap[widgetId]
-    if (source) {
-      // Use setSource to pass properties at creation time
-      settingsLoader.setSource(source, {
-                                 "widgetData": widgetData,
-                                 "widgetMetadata": BarWidgetRegistry.widgetMetadata[widgetId]
-                               })
-    }
+  onClosed: {
+    PanelService.willClosePopup(root)
   }
 
-  ColumnLayout {
+  background: Rectangle {
+    id: bgRect
+
+    opacity: root.isMasked ? 0 : 1.0
+    color: Color.mSurface
+    radius: Style.radiusL * scaling
+    border.color: Color.mPrimary
+    border.width: Math.max(1, Style.borderM * scaling)
+  }
+
+  contentItem: ColumnLayout {
     id: content
+
+    opacity: root.isMasked ? 0 : 1.0
     width: parent.width
     spacing: Style.marginM * scaling
 
@@ -77,7 +62,7 @@ Popup {
       Layout.fillWidth: true
 
       NText {
-        text: `${settingsPopup.widgetId} Settings`
+        text: `${root.widgetId} Settings`
         font.pointSize: Style.fontSizeL * scaling
         font.weight: Style.fontWeightBold
         color: Color.mPrimary
@@ -86,7 +71,7 @@ Popup {
 
       NIconButton {
         icon: "close"
-        onClicked: settingsPopup.close()
+        onClicked: root.close()
       }
     }
 
@@ -117,7 +102,7 @@ Popup {
       NButton {
         text: "Cancel"
         outlined: true
-        onClicked: settingsPopup.close()
+        onClicked: root.close()
       }
 
       NButton {
@@ -126,11 +111,40 @@ Popup {
         onClicked: {
           if (settingsLoader.item && settingsLoader.item.saveSettings) {
             var newSettings = settingsLoader.item.saveSettings()
-            root.updateWidgetSettings(sectionId, settingsPopup.widgetIndex, newSettings)
-            settingsPopup.close()
+            root.updateWidgetSettings(sectionId, root.widgetIndex, newSettings)
+            root.close()
           }
         }
       }
     }
   }
+
+    function loadWidgetSettings() {
+    const widgetSettingsMap = {
+      "ActiveWindow": "WidgetSettings/ActiveWindowSettings.qml",
+      "Battery": "WidgetSettings/BatterySettings.qml",
+      "Brightness": "WidgetSettings/BrightnessSettings.qml",
+      "Clock": "WidgetSettings/ClockSettings.qml",
+      "CustomButton": "WidgetSettings/CustomButtonSettings.qml",
+      "KeyboardLayout": "WidgetSettings/KeyboardLayoutSettings.qml",
+      "MediaMini": "WidgetSettings/MediaMiniSettings.qml",
+      "Microphone": "WidgetSettings/MicrophoneSettings.qml",
+      "NotificationHistory": "WidgetSettings/NotificationHistorySettings.qml",
+      "Workspace": "WidgetSettings/WorkspaceSettings.qml",
+      "SidePanelToggle": "WidgetSettings/SidePanelToggleSettings.qml",
+      "Spacer": "WidgetSettings/SpacerSettings.qml",
+      "SystemMonitor": "WidgetSettings/SystemMonitorSettings.qml",
+      "Volume": "WidgetSettings/VolumeSettings.qml"
+    }
+
+    const source = widgetSettingsMap[widgetId]
+    if (source) {
+      // Use setSource to pass properties at creation time
+      settingsLoader.setSource(source, {
+                                 "widgetData": widgetData,
+                                 "widgetMetadata": BarWidgetRegistry.widgetMetadata[widgetId]
+                               })
+    }
+  }
+
 }

Modules/SettingsPanel/Bar/WidgetSettings/SidePanelToggleSettings.qml

@@ -38,13 +38,6 @@ ColumnLayout {
     }
   }
 
-  NFilePicker {
-    id: filePicker
-    title: "Select a custom icon"
-    onFileSelected: function (filePath) {
-      valueCustomIconPath = "file://" + filePath
-    }
-  }
 
   RowLayout {
     spacing: Style.marginM * scaling
@@ -85,9 +78,15 @@ ColumnLayout {
   NIconPicker {
     id: iconPicker
     initialIcon: valueIcon
-    onIconSelected: function (iconName) {
+    onIconSelected: iconName => {
       valueIcon = iconName
       valueCustomIconPath = ""
     }
   }
+
+  NFilePicker {
+    id: filePicker
+    title: "Select a custom icon"
+    onAccepted: paths => valueCustomIconPath = paths[0]
+  }
 }

Services/PanelService.qml

@@ -14,6 +14,9 @@ Singleton {
   property var openedPanel: null
   readonly property bool hasOpenedPanel: (openedPanel !== null)
 
+  // Currently opened popup
+  property var openedPopup: null
+
   property var registeredPanels: ({})
 
   signal willOpen
@@ -56,4 +59,14 @@ Singleton {
       openedPanel = null
     }
   }
+
+  // Popups
+  function willOpenPopup(popup) {
+    openedPopup = popup
+  }
+  function willClosePopup(popup) {
+    if (openedPopup && openedPopup === popup) {
+      openedPopup = null
+    }
+  }
 }

Widgets/NFilePicker.qml

@@ -37,6 +37,10 @@ Item {
       PanelService.openedPanel.isMasked = true
     }
 
+    if (PanelService.openedPopup !== null) {
+      PanelService.openedPopup.isMasked = true
+    }
+
     isOpen = true
 
     // Small delay to ensure panel changes happen first
@@ -66,6 +70,10 @@ Item {
       PanelService.openedPanel.isMasked = false
     }
 
+    if (PanelService.openedPopup !== null) {
+      PanelService.openedPopup.isMasked = false
+    }
+
     afterClose()
   }