dock: add opacity slider as requested in #222

Commons/Settings.qml

@@ -284,6 +284,7 @@ Singleton {
       property JsonObject dock: JsonObject {
         property bool autoHide: false
         property bool exclusive: false
+        property real backgroundOpacity: 1.0
         property list<string> monitors: []
       }
 

Modules/Dock/Dock.qml

@@ -32,6 +32,8 @@ Variants {
 
       screen: modelData
 
+      WlrLayershell.namespace: "noctalia-dock"
+
       property bool autoHide: Settings.data.dock.autoHide
       property bool hidden: autoHide
       property int hideDelay: 500
@@ -130,7 +132,7 @@ Variants {
         id: dockContainer
         width: dock.width + 48 * scaling
         height: iconSize * 1.4 * scaling
-        color: Color.mSurface
+        color: Qt.alpha(Color.mSurface, Settings.data.dock.backgroundOpacity)
         anchors.horizontalCenter: parent.horizontalCenter
         anchors.bottom: parent.bottom
         anchors.bottomMargin: dockSpacing

Modules/SettingsPanel/Tabs/GeneralTab.qml

@@ -77,6 +77,45 @@ ColumnLayout {
       onToggled: checked => Settings.data.dock.autoHide = checked
     }
 
+    ColumnLayout {
+      spacing: Style.marginXXS * scaling
+      Layout.fillWidth: true
+
+      NText {
+        text: "Dock Background Opacity"
+        font.pointSize: Style.fontSizeL * scaling
+        font.weight: Style.fontWeightBold
+        color: Color.mOnSurface
+      }
+
+      NText {
+        text: "Adjust the background opacity of the dock."
+        font.pointSize: Style.fontSizeXS * scaling
+        color: Color.mOnSurfaceVariant
+        wrapMode: Text.WordWrap
+        Layout.fillWidth: true
+      }
+
+      RowLayout {
+        NSlider {
+          Layout.fillWidth: true
+          from: 0
+          to: 1
+          stepSize: 0.01
+          value: Settings.data.dock.backgroundOpacity
+          onMoved: Settings.data.dock.backgroundOpacity = value
+          cutoutColor: Color.mSurface
+        }
+
+        NText {
+          text: Math.floor(Settings.data.dock.backgroundOpacity * 100) + "%"
+          Layout.alignment: Qt.AlignVCenter
+          Layout.leftMargin: Style.marginS * scaling
+          color: Color.mOnSurface
+        }
+      }
+    }
+
     ColumnLayout {
       spacing: Style.marginXXS * scaling
       Layout.fillWidth: true