Skip to content

feat: 完善普通文字按钮投影、内阴影与深色模式配色 #671

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
iCancely wants to merge 3 commits into
base: v25-flowstyle
Choose a base branch
from
Open

feat: 完善普通文字按钮投影、内阴影与深色模式配色 #671

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
e1b60fa
fix: 恢复普通文字按钮的硬投影、内阴影和渐变效果
iCancely Aug 20, 2026
8e67b3c
feat: 调整按钮投影硬度和深色模式 normal 调色板
iCancely Aug 21, 2026
a0eb843
feat: 完善普通文字按钮深色模式配色与硬投影渲染
iCancely Aug 26, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 11 additions & 6 deletions qt6/src/qml/BoxInsetShadow.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,9 +18,10 @@ Item {
property real shadowOffsetY: 0
property color shadowColor: "black"
property real spread: 0
readonly property real __borderBase: cornerRadius + spread + shadowBlur / 2.0
readonly property real __hardPadding: shadowBlur === 0 ? 1 : 0
readonly property real __borderBase: cornerRadius + spread + shadowBlur / 2.0 + __hardPadding
readonly property real __minImageSize: Math.max(image.border.left + image.border.right, image.border.top + image.border.bottom)
readonly property real __boxSize: Math.max(__minImageSize - shadowBlur, cornerRadius * 2 + 1)
readonly property real __boxSize: Math.max(__minImageSize - shadowBlur - __hardPadding * 2, cornerRadius * 2 + 1)

BorderImage {
id: image
Expand All @@ -41,11 +42,15 @@ Item {
return val;
}

// When blur=0 the shadow offset is handled by translating the shadow
// rect in the image provider, not by asymmetric border sizing. Using
// asymmetric borders would eat the entire center region (top+bottom ==
// imageSize), leaving BorderImage with nothing to stretch.
border {
left: __borderBase + bound(0, shadowBlur + shadowOffsetX, width - 2 * __borderBase)
right: __borderBase + bound(0, shadowBlur - shadowOffsetX, width - 2 * __borderBase)
top: __borderBase + bound(0, shadowBlur + shadowOffsetY, height - 2 * __borderBase)
bottom: __borderBase + bound(0, shadowBlur - shadowOffsetY, height - 2 * __borderBase)
left: __borderBase + (shadowBlur > 0 ? bound(0, shadowBlur + shadowOffsetX, width - 2 * __borderBase) : 0)
right: __borderBase + (shadowBlur > 0 ? bound(0, shadowBlur - shadowOffsetX, width - 2 * __borderBase) : 0)
top: __borderBase + (shadowBlur > 0 ? bound(0, shadowBlur + shadowOffsetY, height - 2 * __borderBase) : 0)
bottom: __borderBase + (shadowBlur > 0 ? bound(0, shadowBlur - shadowOffsetY, height - 2 * __borderBase) : 0)
}
}
}
135 changes: 94 additions & 41 deletions qt6/src/qml/BoxPanel.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,26 +15,67 @@ Item {
property D.Palette insideBorderColor: DS.Style.button.insideBorder
property D.Palette outsideBorderColor: DS.Style.button.outsideBorder
property D.Palette dropShadowColor: DS.Style.button.dropShadow
property D.Palette dropShadowColor2: null
property D.Palette innerShadowColor1: DS.Style.button.innerShadow1
property D.Palette innerShadowColor2: DS.Style.button.innerShadow2
property D.Palette overlayColor: null
property int boxShadowBlur: 6
property int boxShadowOffsetY: 4
property int boxShadowOffsetY2: 0
property int innerShadowOffsetY1: -1
property int innerShadowOffsetY2: 1
// Background color changes with hover state if `backgroundFlowingHovered` is `true`.
property bool backgroundFlowsHovered: true
property bool enableBoxShadow: control.D.ColorSelector.family === D.Palette.CommonColor
// Shadow and gradient rendering is opt-in. Commit 52633cb temporarily
// dropped BoxPanel's drop shadow, inner shadow and gradient for every
// consumer, so they stay off by default here. Only the normal text
// Button (see Button.qml) turns them on, which keeps the other button
// styles and panels looking as they did before.
property bool enableDropShadow: false
property bool enableInnerShadow: false
property bool enableGradient: false

// TODO drop shadow temporarily.
// Loader {
// anchors.fill: backgroundRect
// active: enableBoxShadow
// sourceComponent: BoxShadow {
// shadowBlur: control.boxShadowBlur
// shadowOffsetY: control.boxShadowOffsetY
// shadowColor: control.D.ColorSelector.dropShadowColor
// cornerRadius: backgroundRect.radius
// }
// }
// True when a hard drop shadow is actually visible (non-transparent).
// In dark mode where the drop shadow is transparent, the outside border
// is drawn fully inside to avoid a stray line outside the button.
readonly property bool __hasVisibleHardDropShadow: control.enableBoxShadow && control.enableDropShadow
&& control.boxShadowBlur === 0
&& dropShadowColor && control.D.ColorSelector.dropShadowColor.a > 0
// Hard drop shadows (blur == 0): two rounded Rectangles matching the
// border-box, placed below the background and borders in z-order so the
// button's own paint naturally covers the overlapping part. Only the
// strip extending below the button is visible, with full rounded corners.
Rectangle {
id: hardShadow
z: D.DTK.BelowOrder
visible: control.enableBoxShadow && control.enableDropShadow
&& control.boxShadowBlur === 0
&& dropShadowColor && control.D.ColorSelector.dropShadowColor.a > 0
x: backgroundRect.x
y: backgroundRect.y + control.boxShadowOffsetY
width: backgroundRect.width
height: backgroundRect.height
radius: backgroundRect.radius
color: control.D.ColorSelector.dropShadowColor
antialiasing: false
}

Rectangle {
id: hardShadow2
z: D.DTK.BelowOrder
visible: control.enableBoxShadow && control.enableDropShadow
&& control.boxShadowBlur === 0
&& dropShadowColor2 && control.D.ColorSelector.dropShadowColor2.a > 0
&& control.boxShadowOffsetY2 > 0
x: backgroundRect.x
y: backgroundRect.y + control.boxShadowOffsetY2
width: backgroundRect.width
height: backgroundRect.height
radius: backgroundRect.radius
color: control.D.ColorSelector.dropShadowColor2
antialiasing: false
}

Rectangle {
id: backgroundRect
Expand All @@ -52,38 +93,48 @@ Item {

anchors.fill: parent
radius: control.radius
// gradient: D.ColorSelector.color1 === D.ColorSelector.color2 ? null : backgroundGradient
gradient: control.enableGradient
&& D.ColorSelector.color1 !== D.ColorSelector.color2 ? backgroundGradient : null
color: D.ColorSelector.color1
}

// Loader {
// anchors.fill: backgroundRect
// readonly property color innerShadowColor: control.D.ColorSelector.innerShadowColor1
// active: innerShadowColor1 && innerShadowColor.a !== 0 && control.D.ColorSelector.family === D.Palette.CommonColor
// z: D.DTK.AboveOrder

// sourceComponent: BoxInsetShadow {
// shadowBlur: 2
// shadowOffsetY: control.innerShadowOffsetY1
// spread: 1
// shadowColor: innerShadowColor
// cornerRadius: backgroundRect.radius
// }
// }

// Loader {
// anchors.fill: backgroundRect
// readonly property color innerShadowColor: control.D.ColorSelector.innerShadowColor2
// active: innerShadowColor2 && innerShadowColor.a !== 0 && control.D.ColorSelector.family === D.Palette.CommonColor
// z: D.DTK.AboveOrder

// sourceComponent: BoxInsetShadow {
// shadowBlur: 1
// shadowOffsetY: 1
// shadowColor: innerShadowColor
// cornerRadius: backgroundRect.radius
// }
// }
Rectangle {
visible: control.overlayColor
anchors.fill: parent
radius: control.radius
color: control.D.ColorSelector.overlayColor
}

Loader {
anchors.fill: backgroundRect
readonly property color innerShadowColor: control.D.ColorSelector.innerShadowColor1
active: control.enableBoxShadow && control.enableInnerShadow
&& innerShadowColor1 && innerShadowColor.a !== 0
z: D.DTK.AboveOrder

sourceComponent: BoxInsetShadow {
shadowBlur: 0
shadowOffsetY: control.innerShadowOffsetY1
spread: 0
shadowColor: innerShadowColor
cornerRadius: backgroundRect.radius
}
}

Loader {
anchors.fill: backgroundRect
readonly property color innerShadowColor: control.D.ColorSelector.innerShadowColor2
active: control.enableBoxShadow && control.enableInnerShadow
&& innerShadowColor2 && innerShadowColor.a !== 0
z: D.DTK.AboveOrder

sourceComponent: BoxInsetShadow {
shadowBlur: 0
shadowOffsetY: control.innerShadowOffsetY2
shadowColor: innerShadowColor
cornerRadius: backgroundRect.radius
}
}

Loader {
active: insideBorderColor
Expand All @@ -94,18 +145,20 @@ Item {
radius: backgroundRect.radius
color: control.D.ColorSelector.insideBorderColor
borderWidth: DS.Style.control.borderWidth
borderInside: !control.__hasVisibleHardDropShadow
}
}

Loader {
active: outsideBorderColor
anchors.fill: backgroundRect
z: D.DTK.AboveOrder
z: D.DTK.NormalOrder

sourceComponent: OutsideBoxBorder {
radius: backgroundRect.radius
color: control.D.ColorSelector.outsideBorderColor
borderWidth: DS.Style.control.borderWidth
borderInside: !control.__hasVisibleHardDropShadow
}
}
}
8 changes: 8 additions & 0 deletions qt6/src/qml/Button.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,14 @@ T.Button {
implicitWidth: DS.Style.button.width
implicitHeight: DS.Style.button.height
button: control
// The normal (non-checked, non-highlighted) text button opts into the
// BoxPanel drop shadow, inner shadow and gradient that were dropped
// for every consumer in commit 52633cb. Checked/highlighted buttons
// and all other ButtonPanel users keep their existing flat look.
radius: control.checked || control.highlighted ? DS.Style.control.radius : DS.Style.button.radius
enableDropShadow: !(control.checked || control.highlighted)
enableInnerShadow: !(control.checked || control.highlighted)
enableGradient: !(control.checked || control.highlighted)
}

contentItem: Item {
Expand Down
Loading
Loading