From 1623ba976ef30129e7751794c413af36019533f6 Mon Sep 17 00:00:00 2001 From: dss Date: Fri, 4 Sep 2026 15:25:45 +0800 Subject: [PATCH] fix: adjust dark mode button style parameters and add soft shadow support MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Fix several dark mode (common family) button styling issues on the v25-flowstyle branch: FlowStyle.qml: - background1/background2 normalDark: reduce opacity from 1.0 to 0.6 - background1/background2 hoveredDark: reduce opacity from 0.6 to 0.4 - background1/background2 pressedDark: set to (40,40,40,1) / (46,46,46,1) - dropShadow pressedDark: add (0,0,0,0.4) for visible pressed shadow - innerShadow1 normalDark: 0.5 -> 0.2, hoveredDark: 0.6 -> 0.3 - innerShadow1 pressedDark: add transparent (fix DTK palette fallback bug) - innerShadow2 pressedDark: add (255,255,255,0.07) for subtle top highlight - insideBorder hoveredDark: add transparent (no inner border in dark hover) - outsideBorder pressedDark: add transparent (no outer border in dark pressed) BoxPanel.qml: - Add BoxShadow Loader for soft drop shadow rendering when boxShadowBlur > 0 - Hard shadow Rectangles and soft shadow Loader are mutually exclusive ButtonPanel.qml: - boxShadowBlur: pressed state uses blur=1 (soft shadow), normal/hover use 0 - Update stale comment to reflect pressed now uses soft shadow 修复深色模式按钮样式的若干问题（v25-flowstyle 分支）： FlowStyle.qml: - background1/background2 normalDark 不透明度从 1.0 降至 0.6 - background1/background2 hoveredDark 不透明度从 0.6 降至 0.4 - background1/background2 pressedDark 设为 (40,40,40,1) / (46,46,46,1) - dropShadow pressedDark: 新增 (0,0,0,0.4) 按压投影 - innerShadow1 normalDark: 0.5 -> 0.2, hoveredDark: 0.6 -> 0.3 - innerShadow1 pressedDark: 新增 transparent（修复 DTK Palette 回退 bug） - innerShadow2 pressedDark: 新增 (255,255,255,0.07) 顶部高光 - insideBorder hoveredDark: 新增 transparent（深色 hover 无内描边） - outsideBorder pressedDark: 新增 transparent（深色 pressed 无外描边） BoxPanel.qml: - 新增 BoxShadow Loader，当 boxShadowBlur > 0 时渲染柔和投影 - 硬投影 Rectangle 与柔和投影 Loader 互斥，不会同时渲染 ButtonPanel.qml: - boxShadowBlur: pressed 状态使用 blur=1（柔和投影），normal/hover 使用 0 - 更新过时注释，反映 pressed 现在使用柔和投影 --- qt6/src/qml/BoxPanel.qml | 16 ++++++++++++++++ qt6/src/qml/FlowStyle.qml | 25 +++++++++++++++++-------- qt6/src/qml/private/ButtonPanel.qml | 7 ++++--- 3 files changed, 37 insertions(+), 11 deletions(-) diff --git a/qt6/src/qml/BoxPanel.qml b/qt6/src/qml/BoxPanel.qml index 9c4fae45..40b1dded 100644 --- a/qt6/src/qml/BoxPanel.qml +++ b/qt6/src/qml/BoxPanel.qml @@ -66,6 +66,22 @@ Item { antialiasing: false } + // Soft drop shadow (blur > 0): uses BoxShadow for blurred rendering. + // Active only when boxShadowBlur is non-zero (e.g. pressed state). + Loader { + active: control.enableBoxShadow && control.enableDropShadow + && control.boxShadowBlur > 0 + && dropShadowColor && control.D.ColorSelector.dropShadowColor.a > 0 + anchors.fill: parent + + sourceComponent: BoxShadow { + cornerRadius: backgroundRect.radius + shadowBlur: control.boxShadowBlur + shadowOffsetY: control.boxShadowOffsetY + shadowColor: control.D.ColorSelector.dropShadowColor + } + } + Rectangle { id: backgroundRect property alias color1: control.color1 diff --git a/qt6/src/qml/FlowStyle.qml b/qt6/src/qml/FlowStyle.qml index 8df21147..1535a1ed 100644 --- a/qt6/src/qml/FlowStyle.qml +++ b/qt6/src/qml/FlowStyle.qml @@ -108,7 +108,7 @@ QtObject { crystal: Qt.rgba(0, 0, 0, 0.1) } normalDark { - common: Qt.rgba(60 / 255, 60 / 255, 60 / 255, 1) + common: Qt.rgba(60 / 255, 60 / 255, 60 / 255, 0.6) crystal: Qt.rgba(1, 1, 1, 0.08) } hovered { @@ -116,7 +116,7 @@ QtObject { crystal: Qt.rgba(0, 0, 0, 0.2) } hoveredDark { - common: Qt.rgba(110 / 255, 110 / 255, 110 / 255, 0.6) + common: Qt.rgba(110 / 255, 110 / 255, 110 / 255, 0.4) crystal: Qt.rgba(1, 1, 1, 0.2) } pressed { @@ -124,8 +124,8 @@ QtObject { crystal: Qt.rgba(0, 0, 0, 0.15) } pressedDark { - common: Qt.rgba(1, 1, 1, 0.05) - crystal: Qt.rgba(1, 1, 1, 0.05) + common: Qt.rgba(40 / 255, 40 / 255, 40 / 255, 1) + crystal: Qt.rgba(40 / 255, 40 / 255, 40 / 255, 1) } } @@ -135,7 +135,7 @@ QtObject { crystal: Qt.rgba(0, 0, 0, 0.1) } normalDark { - common: Qt.rgba(45 / 255, 45 / 255, 45 / 255, 1) + common: Qt.rgba(45 / 255, 45 / 255, 45 / 255, 0.6) crystal: Qt.rgba(1, 1, 1, 0.1) } hovered { @@ -143,12 +143,16 @@ QtObject { crystal: Qt.rgba(16.0 / 255, 16.0 / 255, 16.0 / 255, 0.2) } hoveredDark { - common: Qt.rgba(66 / 255, 66 / 255, 66 / 255, 0.6) + common: Qt.rgba(66 / 255, 66 / 255, 66 / 255, 0.4) } pressed { common: Qt.rgba(202 / 255, 202 / 255, 202 / 255, 0.5) crystal: Qt.rgba(16.0 / 255, 16.0 / 255, 16.0 / 255, 0.15) } + pressedDark { + common: Qt.rgba(40 / 255, 40 / 255, 40 / 255, 1) + crystal: Qt.rgba(46 / 255, 46 / 255, 46 / 255, 1) + } } property D.Palette dropShadow: D.Palette { @@ -156,6 +160,7 @@ QtObject { normalDark: ("transparent") hovered: Qt.rgba(0, 0, 0, 0.05) pressed: Qt.rgba(0, 0, 0, 0.1) + pressedDark: Qt.rgba(0, 0, 0, 0.4) } // 1px near hard drop shadow layered over `dropShadow` (the 2px far @@ -169,9 +174,10 @@ QtObject { property D.Palette innerShadow1: D.Palette { normal: ("transparent") - normalDark: Qt.rgba(0, 0, 0, 0.5) - hoveredDark: Qt.rgba(0, 0, 0, 0.6) + normalDark: Qt.rgba(0, 0, 0, 0.2) + hoveredDark: Qt.rgba(0, 0, 0, 0.3) pressed: ("transparent") + pressedDark: ("transparent") } property D.Palette innerShadow2: D.Palette { @@ -179,6 +185,7 @@ QtObject { normalDark: Qt.rgba(1, 1, 1, 0.07) hovered: Qt.rgba(1, 1, 1, 0.3) pressed: ("transparent") + pressedDark: Qt.rgba(1, 1, 1, 0.07) } property D.Palette insideBorder: D.Palette { @@ -194,6 +201,7 @@ QtObject { common: ("transparent") crystal: Qt.rgba(0, 0, 0, 0.05) } + hoveredDark: ("transparent") pressed: ("transparent") } @@ -210,6 +218,7 @@ QtObject { crystal: Qt.rgba(0, 0, 0, 0.2) } pressed: Qt.rgba(0, 0, 0, 0.15) + pressedDark: ("transparent") } property D.Palette text: D.Palette { diff --git a/qt6/src/qml/private/ButtonPanel.qml b/qt6/src/qml/private/ButtonPanel.qml index 6daca548..11a6f404 100644 --- a/qt6/src/qml/private/ButtonPanel.qml +++ b/qt6/src/qml/private/ButtonPanel.qml @@ -20,9 +20,10 @@ BoxPanel { dropShadowColor2: selectValue(DS.Style.button.dropShadow2, null, null) innerShadowColor1: selectValue(DS.Style.button.innerShadow1, DS.Style.checkedButton.innerShadow, DS.Style.highlightedButton.innerShadow1) innerShadowColor2: selectValue(DS.Style.button.innerShadow2, null, DS.Style.highlightedButton.innerShadow2) - // All states use hard shadows (blur=0). Normal/hover: 2px far shadow + - // 1px near shadow layered on top. Pressed: 1px only (CSS `0 1px 0 0`). - boxShadowBlur: selectValue(0, 6, 4) + // Normal/hover: hard shadows (blur=0) - 2px far shadow + 1px near + // shadow layered on top. Pressed: soft shadow (blur=1) via BoxShadow, + // offset 1px down. + boxShadowBlur: selectValue(control.D.ColorSelector.controlState === D.DTK.PressedState ? 1 : 0, 6, 4) boxShadowOffsetY: selectValue(control.D.ColorSelector.controlState === D.DTK.PressedState ? 1 : 2, 4, 4) boxShadowOffsetY2: selectValue(control.D.ColorSelector.controlState === D.DTK.PressedState ? 0 : 1, 0, 0) innerShadowOffsetY1: -1