diff --git a/Assets/Translations/en.json b/Assets/Translations/en.json index b1aff5469..27b988368 100644 --- a/Assets/Translations/en.json +++ b/Assets/Translations/en.json @@ -1077,9 +1077,13 @@ "description": "Displays a visible border around every widget.", "label": "Show widget outlines" }, - "transparent": { - "description": "This will prevent the panels from attaching to the bar.", - "label": "Transparent background" + "use-separate-opacity": { + "description": "Enable to use a separate opacity value for the bar background.", + "label": "Use separate bar opacity" + }, + "background-opacity": { + "description": "Set the background opacity specifically for the bar.", + "label": "Bar background opacity" } }, "monitors": { diff --git a/Assets/Translations/zh-CN.json b/Assets/Translations/zh-CN.json index 115b0d582..2c1db9cc3 100644 --- a/Assets/Translations/zh-CN.json +++ b/Assets/Translations/zh-CN.json @@ -1077,9 +1077,13 @@ "description": "在每个小部件周围显示可见边框。", "label": "显示小部件轮廓" }, - "transparent": { - "description": "这将阻止面板附加到工具栏。", - "label": "透明背景" + "use-separate-opacity": { + "description": "启用后为任务栏背景使用单独的不透明度值。", + "label": "使用单独的任务栏不透明度" + }, + "background-opacity": { + "description": "为任务栏设置背景不透明度。", + "label": "任务栏背景不透明度" } }, "monitors": { diff --git a/Assets/settings-default.json b/Assets/settings-default.json index f1154fcef..17a9fc82d 100644 --- a/Assets/settings-default.json +++ b/Assets/settings-default.json @@ -4,7 +4,8 @@ "position": "top", "monitors": [], "density": "default", - "transparent": false, + "barBackgroundOpacity": 0.93, + "useSeparateBarOpacity": false, "showOutline": false, "showCapsule": true, "capsuleOpacity": 1, @@ -353,12 +354,7 @@ "autoHideMs": 2000, "overlayLayer": true, "backgroundOpacity": 1, - "enabledTypes": [ - 0, - 1, - 2, - 4 - ], + "enabledTypes": [0, 1, 2, 4], "monitors": [] }, "audio": { @@ -435,4 +431,4 @@ "gridSnap": false, "monitorWidgets": [] } -} \ No newline at end of file +} diff --git a/Commons/Settings.qml b/Commons/Settings.qml index f1135f50c..12053c72f 100644 --- a/Commons/Settings.qml +++ b/Commons/Settings.qml @@ -188,11 +188,14 @@ Singleton { property string position: "top" // "top", "bottom", "left", or "right" property list monitors: [] // holds bar visibility per monitor property string density: "default" // "compact", "default", "comfortable" - property bool transparent: false property bool showOutline: false property bool showCapsule: true property real capsuleOpacity: 1.0 + // Bar background opacity settings + property real backgroundOpacity: 0.93 + property bool useSeparateOpacity: false + // Floating bar settings property bool floating: false property real marginVertical: 0.25 diff --git a/Modules/MainScreen/Backgrounds/AllBackgrounds.qml b/Modules/MainScreen/Backgrounds/AllBackgrounds.qml index 30fbd92e3..53132d432 100644 --- a/Modules/MainScreen/Backgrounds/AllBackgrounds.qml +++ b/Modules/MainScreen/Backgrounds/AllBackgrounds.qml @@ -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 + } + } } } } diff --git a/Modules/Panels/Settings/Tabs/BarTab.qml b/Modules/Panels/Settings/Tabs/BarTab.qml index eb2758b8e..8fa3fd178 100644 --- a/Modules/Panels/Settings/Tabs/BarTab.qml +++ b/Modules/Panels/Settings/Tabs/BarTab.qml @@ -86,14 +86,30 @@ ColumnLayout { onSelected: key => Settings.data.bar.density = key } + // Use Separate Bar Opacity Toggle NToggle { - Layout.fillWidth: true - label: I18n.tr("settings.bar.appearance.transparent.label") - description: I18n.tr("settings.bar.appearance.transparent.description") - checked: Settings.data.bar.transparent + label: I18n.tr("settings.bar.appearance.use-separate-opacity.label") + description: I18n.tr("settings.bar.appearance.use-separate-opacity.description") + checked: Settings.data.bar.useSeparateOpacity isSettings: true - defaultValue: Settings.getDefaultValue("bar.transparent") - onToggled: checked => Settings.data.bar.transparent = checked + defaultValue: Settings.getDefaultValue("bar.useSeparateOpacity") + onToggled: checked => Settings.data.bar.useSeparateOpacity = checked + } + + // Bar Background Opacity (only visible when separate opacity is enabled) + NValueSlider { + Layout.fillWidth: true + visible: Settings.data.bar.useSeparateOpacity + label: I18n.tr("settings.bar.appearance.background-opacity.label") + description: I18n.tr("settings.bar.appearance.background-opacity.description") + from: 0 + to: 1 + stepSize: 0.01 + value: Settings.data.bar.backgroundOpacity + isSettings: true + defaultValue: Settings.getDefaultValue("bar.backgroundOpacity") + onMoved: value => Settings.data.bar.backgroundOpacity = value + text: Math.floor(Settings.data.bar.backgroundOpacity * 100) + "%" } NToggle {