feat: add separate bar opacity control with toggle switch

- Remove old transparent toggle and related logic - Add new settings for separate bar background opacity control
2026-05-11 17:08:27 +08:00 · 2025-12-28 12:29:09 +08:00
parent f95db2da3d
commit 901bb60560
6 changed files with 177 additions and 74 deletions
@@ -27,73 +27,153 @@ Item {

  anchors.fill: parent

-  // Wrapper with layer caching for better shadow performance
+  // Unified background container
  Item {
    anchors.fill: parent

-    // Enable layer caching to prevent continuous re-rendering
-    // This caches the Shape to a GPU texture, reducing GPU tessellation overhead
-    layer.enabled: true
-
-    // Apply opacity to all backgrounds
-    opacity: Settings.data.ui.panelBackgroundOpacity
-
-    // The unified Shape container
-    Shape {
-      id: backgroundsShape
+    // When not using separate bar opacity, use unified approach (original behavior)
+    Item {
      anchors.fill: parent
+      visible: !Settings.data.bar.useSeparateOpacity

-      // Use curve renderer for smooth corners (GPU-accelerated)
-      preferredRendererType: Shape.CurveRenderer
+      // Enable layer caching to prevent continuous re-rendering
+      layer.enabled: true
+      opacity: Settings.data.ui.panelBackgroundOpacity

-      enabled: false // Disable mouse input on the Shape itself
+      Shape {
+        id: unifiedBackgroundsShape
+        anchors.fill: parent
+        preferredRendererType: Shape.CurveRenderer
+        enabled: false

-      Component.onCompleted: {
-        Logger.d("AllBackgrounds", "AllBackgrounds initialized");
-      }
-
-      /**
-      *  Bar
-      */
-      BarBackground {
-        bar: root.bar
-        shapeContainer: backgroundsShape
-        windowRoot: root.windowRoot
-        backgroundColor: Settings.data.bar.transparent ? Color.transparent : panelBackgroundColor
-      }
-
-      /**
-      *  Panel Background Slots
-      *  Only 2 slots needed: one for currently open/opening panel, one for closing panel
-      */
-
-      // Slot 0: Currently open/opening panel
-      PanelBackground {
-        assignedPanel: {
-          var p = PanelService.backgroundSlotAssignments[0];
-          // Only render if this panel belongs to this screen
-          return (p && p.screen === root.windowRoot.screen) ? p : null;
+        Component.onCompleted: {
+          Logger.d("AllBackgrounds", "AllBackgrounds initialized");
+        }
+
+        /**
+        *  Bar
+        */
+        BarBackground {
+          bar: root.bar
+          shapeContainer: unifiedBackgroundsShape
+          windowRoot: root.windowRoot
+          backgroundColor: panelBackgroundColor
+        }
+
+        /**
+        *  Panel Background Slots
+        *  Only 2 slots needed: one for currently open/opening panel, one for closing panel
+        */
+
+        // Slot 0: Currently open/opening panel
+        PanelBackground {
+          assignedPanel: {
+            var p = PanelService.backgroundSlotAssignments[0];
+            // Only render if this panel belongs to this screen
+            return (p && p.screen === root.windowRoot.screen) ? p : null;
+          }
+          shapeContainer: unifiedBackgroundsShape
+          defaultBackgroundColor: panelBackgroundColor
+        }
+
+        // Slot 1: Closing panel (during transitions)
+        PanelBackground {
+          assignedPanel: {
+            var p = PanelService.backgroundSlotAssignments[1];
+            // Only render if this panel belongs to this screen
+            return (p && p.screen === root.windowRoot.screen) ? p : null;
+          }
+          shapeContainer: unifiedBackgroundsShape
+          defaultBackgroundColor: panelBackgroundColor
        }
-        shapeContainer: backgroundsShape
-        defaultBackgroundColor: panelBackgroundColor
      }

-      // Slot 1: Closing panel (during transitions)
-      PanelBackground {
-        assignedPanel: {
-          var p = PanelService.backgroundSlotAssignments[1];
-          // Only render if this panel belongs to this screen
-          return (p && p.screen === root.windowRoot.screen) ? p : null;
-        }
-        shapeContainer: backgroundsShape
-        defaultBackgroundColor: panelBackgroundColor
+      // Apply shadow to the unified backgrounds
+      NDropShadow {
+        anchors.fill: parent
+        source: unifiedBackgroundsShape
      }
    }

-    // Apply shadow to the cached layer
-    NDropShadow {
+    // When using separate bar opacity, separate the rendering
+    Item {
      anchors.fill: parent
-      source: backgroundsShape
+      visible: Settings.data.bar.useSeparateOpacity
+
+      // Panel backgrounds with panel opacity
+      Item {
+        anchors.fill: parent
+
+        layer.enabled: true
+        opacity: Settings.data.ui.panelBackgroundOpacity
+
+        Shape {
+          id: panelBackgroundsShape
+          anchors.fill: parent
+          preferredRendererType: Shape.CurveRenderer
+          enabled: false
+
+          /**
+          *  Panel Background Slots
+          *  Only 2 slots needed: one for currently open/opening panel, one for closing panel
+          */
+
+          // Slot 0: Currently open/opening panel
+          PanelBackground {
+            assignedPanel: {
+              var p = PanelService.backgroundSlotAssignments[0];
+              // Only render if this panel belongs to this screen
+              return (p && p.screen === root.windowRoot.screen) ? p : null;
+            }
+            shapeContainer: panelBackgroundsShape
+            defaultBackgroundColor: panelBackgroundColor
+          }
+
+          // Slot 1: Closing panel (during transitions)
+          PanelBackground {
+            assignedPanel: {
+              var p = PanelService.backgroundSlotAssignments[1];
+              // Only render if this panel belongs to this screen
+              return (p && p.screen === root.windowRoot.screen) ? p : null;
+            }
+            shapeContainer: panelBackgroundsShape
+            defaultBackgroundColor: panelBackgroundColor
+          }
+        }
+
+        // Apply shadow to the panel backgrounds
+        NDropShadow {
+          anchors.fill: parent
+          source: panelBackgroundsShape
+        }
+      }
+
+      // Bar background with separate opacity
+      Item {
+        anchors.fill: parent
+
+        layer.enabled: true
+        opacity: Settings.data.bar.backgroundOpacity
+
+        Shape {
+          id: barBackgroundShape
+          anchors.fill: parent
+          preferredRendererType: Shape.CurveRenderer
+          enabled: false
+
+          BarBackground {
+            bar: root.bar
+            shapeContainer: barBackgroundShape
+            windowRoot: root.windowRoot
+            backgroundColor: panelBackgroundColor
+          }
+        }
+
+        NDropShadow {
+          anchors.fill: parent
+          source: barBackgroundShape
+        }
+      }
    }
  }
 }