Merge pull request #335 from lonerOrz/sidepanel

feat(bar): Allow custom icon for SidePanelToggle

Modules/Bar/Widgets/SidePanelToggle.qml

@@ -31,8 +31,10 @@ NIconButton {
 
   readonly property string customIcon: widgetSettings.icon || widgetMetadata.icon
   readonly property bool useDistroLogo: (widgetSettings.useDistroLogo !== undefined) ? widgetSettings.useDistroLogo : widgetMetadata.useDistroLogo
+  readonly property string customIconPath: widgetSettings.customIconPath || ""
 
-  icon: useDistroLogo ? "" : customIcon
+  // If we have a custom path or distro logo, don't use the theme icon.
+  icon: (customIconPath === "" && !useDistroLogo) ? customIcon : ""
   tooltipText: "Open side panel"
   baseSize: Style.capsuleHeight
   compact: (Settings.data.bar.density === "compact")
@@ -45,12 +47,16 @@ NIconButton {
   onRightClicked: PanelService.getPanel("settingsPanel")?.toggle()
 
   IconImage {
-    id: logo
+    id: customOrDistroLogo
     anchors.centerIn: parent
     width: root.width * 0.8
     height: width
-    source: useDistroLogo ? DistroLogoService.osLogo : ""
-    visible: useDistroLogo && source !== ""
+    source: {
+      if (customIconPath !== "") return customIconPath;
+      if (useDistroLogo) return DistroLogoService.osLogo;
+      return "";
+    }
+    visible: source !== ""
     smooth: true
     asynchronous: true
   }

Modules/SettingsPanel/Bar/WidgetSettings/SidePanelToggleSettings.qml

@@ -16,18 +16,34 @@ ColumnLayout {
   // Local state
   property string valueIcon: widgetData.icon !== undefined ? widgetData.icon : widgetMetadata.icon
   property bool valueUseDistroLogo: widgetData.useDistroLogo !== undefined ? widgetData.useDistroLogo : widgetMetadata.useDistroLogo
+  property string valueCustomIconPath: widgetData.customIconPath !== undefined ? widgetData.customIconPath : ""
 
   function saveSettings() {
     var settings = Object.assign({}, widgetData || {})
     settings.icon = valueIcon
     settings.useDistroLogo = valueUseDistroLogo
+    settings.customIconPath = valueCustomIconPath
     return settings
   }
 
   NToggle {
     label: "Use distro logo instead of icon"
     checked: valueUseDistroLogo
-    onToggled: checked => valueUseDistroLogo = checked
+    onToggled: {
+      valueUseDistroLogo = checked
+      if (checked) {
+        valueCustomIconPath = ""
+        valueIcon = ""
+      }
+    }
+  }
+
+  NFilePicker {
+    id: filePicker
+    title: "Select a custom icon"
+    onFileSelected: function (filePath) {
+      valueCustomIconPath = "file://" + filePath
+    }
   }
 
   RowLayout {
@@ -35,21 +51,35 @@ ColumnLayout {
 
     NLabel {
       label: "Icon"
-      description: "Select an icon from the library."
+      description: "Select an icon from the library or a custom file."
+    }
+
+    NImageCircled {
+      Layout.alignment: Qt.AlignVCenter
+      imagePath: valueCustomIconPath
+      visible: valueCustomIconPath !== ""
+      width: Style.fontSizeXL * 2 * scaling
+      height: Style.fontSizeXL * 2 * scaling
     }
 
     NIcon {
       Layout.alignment: Qt.AlignVCenter
       icon: valueIcon
       font.pointSize: Style.fontSizeXL * scaling
-      visible: valueIcon !== ""
+      visible: valueIcon !== "" && valueCustomIconPath === ""
     }
 
     NButton {
       enabled: !valueUseDistroLogo
-      text: "Browse"
+      text: "Browse Library"
       onClicked: iconPicker.open()
     }
+
+    NButton {
+      enabled: !valueUseDistroLogo
+      text: "Browse File"
+      onClicked: filePicker.open()
+    }
   }
 
   NIconPicker {
@@ -57,6 +87,7 @@ ColumnLayout {
     initialIcon: valueIcon
     onIconSelected: function (iconName) {
       valueIcon = iconName
+      valueCustomIconPath = ""
     }
   }
-}
+}

Services/BarWidgetRegistry.qml

@@ -103,7 +103,8 @@ Singleton {
                                   "SidePanelToggle": {
                                     "allowUserSettings": true,
                                     "useDistroLogo": false,
-                                    "icon": "noctalia"
+                                    "icon": "noctalia",
+                                    "customIconPath": ""
                                   },
                                   "Volume": {
                                     "allowUserSettings": true,