diff --git a/qt6/src/qml/FlowStyle.qml b/qt6/src/qml/FlowStyle.qml index 1535a1ed..b3eccd03 100644 --- a/qt6/src/qml/FlowStyle.qml +++ b/qt6/src/qml/FlowStyle.qml @@ -427,6 +427,92 @@ QtObject { property int height: 30 property int iconSize: 16 property int indicatorRightMargin: 6 + + property int radius: 6 + + // Checked tool buttons render as a subtle overlay chip with an + // accent-colored icon, instead of reusing the solid accent-fill + // checked button style shared with Button/ItemDelegate/etc. + property D.Palette checkedBackground: D.Palette { + normal { + common: Qt.rgba(0, 0, 0, 0.1) + crystal: Qt.rgba(0, 0, 0, 0.1) + } + normalDark { + common: Qt.rgba(0, 0, 0, 0.3) + crystal: Qt.rgba(0, 0, 0, 0.3) + } + hovered { + common: Qt.rgba(0, 0, 0, 0.15) + crystal: Qt.rgba(0, 0, 0, 0.15) + } + hoveredDark { + common: Qt.rgba(0, 0, 0, 0.35) + crystal: Qt.rgba(0, 0, 0, 0.35) + } + pressed { + common: Qt.rgba(0, 0, 0, 0.15) + crystal: Qt.rgba(0, 0, 0, 0.15) + } + pressedDark { + common: Qt.rgba(0, 0, 0, 0.35) + crystal: Qt.rgba(0, 0, 0, 0.35) + } + } + + property D.Palette checkedText: D.Palette { + normal: D.DTK.makeColor(D.Color.Highlight) + normalDark: D.DTK.makeColor(D.Color.Highlight) + hovered: D.DTK.makeColor(D.Color.Highlight) + hoveredDark: D.DTK.makeColor(D.Color.Highlight) + pressed: D.DTK.makeColor(D.Color.Highlight) + pressedDark: D.DTK.makeColor(D.Color.Highlight) + } + + // Inner shadow for the checked chip. Light mode uses a subtle + // 10% black; dark mode uses 50% black so the bottom inset line + // stays visible against the translucent overlay. + property D.Palette checkedShadow: D.Palette { + normal: Qt.rgba(0, 0, 0, 0.1) + normalDark: Qt.rgba(0, 0, 0, 0.5) + hovered: Qt.rgba(0, 0, 0, 0.1) + hoveredDark: Qt.rgba(0, 0, 0, 0.5) + pressed: Qt.rgba(0, 0, 0, 0.1) + pressedDark: Qt.rgba(0, 0, 0, 0.5) + } + + // Background for non-checked tool buttons. Uses the Palette's + // built-in state mechanism: 'normal' is transparent, 'hovered' + // and 'pressed' apply a subtle tint. The ColorSelector selects + // the correct state automatically, no manual controlState check + // is needed. Dark-mode hover adds backdrop blur + inset bevel in + // ToolButton.qml on top of the hoveredDark tint. + property D.Palette background: D.Palette { + normal { + common: Qt.rgba(0, 0, 0, 0) + crystal: Qt.rgba(0, 0, 0, 0) + } + normalDark { + common: Qt.rgba(0, 0, 0, 0) + crystal: Qt.rgba(0, 0, 0, 0) + } + hovered { + common: Qt.rgba(0, 0, 0, 0.15) + crystal: Qt.rgba(0, 0, 0, 0.15) + } + hoveredDark { + common: Qt.rgba(20.0 / 255, 20.0 / 255, 20.0 / 255, 0.2) + crystal: Qt.rgba(20.0 / 255, 20.0 / 255, 20.0 / 255, 0.2) + } + pressed { + common: Qt.rgba(0, 0, 0, 0.2) + crystal: Qt.rgba(0, 0, 0, 0.2) + } + pressedDark { + common: Qt.rgba(0, 0, 0, 0.15) + crystal: Qt.rgba(0, 0, 0, 0.15) + } + } } property QtObject radioButton: QtObject { diff --git a/qt6/src/qml/ToolButton.qml b/qt6/src/qml/ToolButton.qml index ad7ef9dc..24a09626 100644 --- a/qt6/src/qml/ToolButton.qml +++ b/qt6/src/qml/ToolButton.qml @@ -1,4 +1,4 @@ -// SPDX-FileCopyrightText: 2021 - 2024 UnionTech Software Technology Co., Ltd. +// SPDX-FileCopyrightText: 2021 - 2026 UnionTech Software Technology Co., Ltd. // // SPDX-License-Identifier: LGPL-3.0-or-later @@ -10,12 +10,11 @@ import org.deepin.dtk.private 1.0 as P T.ToolButton { id: control - property D.Palette textColor: { - if (D.DTK.hasAnimation) - return checked ? DS.Style.highlightedButton.text : (highlighted ? DS.Style.highlightedButton.text : DS.Style.button.text) + // The checked chip is now a dedicated ToolButton style, so the checked + // text palette stays consistent whether animations are enabled or not. + property D.Palette textColor: checked ? DS.Style.toolButton.checkedText : (highlighted ? DS.Style.highlightedButton.text : DS.Style.button.text) - return checked ? DS.Style.checkedButton.text : (highlighted ? DS.Style.highlightedButton.text : DS.Style.button.text) - } + property D.Palette checkedShadow: DS.Style.toolButton.checkedShadow implicitWidth: DS.Style.control.implicitWidth(control) implicitHeight: DS.Style.control.implicitHeight(control) @@ -114,22 +113,94 @@ T.ToolButton { implicitHeight: DS.Style.toolButton.height button: control outsideBorderColor: null + insideBorderColor: null + radius: DS.Style.toolButton.radius + // Non-checked tool buttons: bind color1 to the background palette + // which has transparent 'normal', tinted 'hovered' and 'pressed' + // states. The ColorSelector picks the state automatically, and + // ButtonPanel's default visibility shows the panel when hovered + // or pressed (flat buttons are hidden in normal state). Binding on color1 { - when: D.DTK.hasAnimation - value: D.Palette { - normal { - common: Qt.rgba(0, 0, 0, 0.1) - } - } + when: !control.checked + value: DS.Style.toolButton.background } Binding on color2 { - when: D.DTK.hasAnimation + when: !control.checked value: buttonPanel.color1 } - Binding on visible { - when: D.DTK.hasAnimation - value: control.hovered && !control.checked + + // Dark-theme hover frosted-glass chip for non-checked tool buttons: + // backdrop blur (radius 15, saturation 100%) plus a 1px white top + // inset highlight and 1px black bottom inset shadow, over the + // translucent dark tint from background (rgba(20,20,20,0.2)). + // The blur is platform-gated; the inset bevel shows regardless. + readonly property bool __darkHover: !control.checked + && D.DTK.themeType === D.ApplicationHelper.DarkType + && buttonPanel.D.ColorSelector.controlState === D.DTK.HoveredState + + D.InWindowBlur { + id: hoverBlur + anchors.fill: parent + radius: 15 + saturation: 1.0 + offscreen: true + visible: buttonPanel.__darkHover && hoverBlur.valid + z: -1 + + D.ItemViewport { + anchors.fill: parent + fixed: true + sourceItem: hoverBlur.content + radius: buttonPanel.radius + hideSource: false + } + } + + // Inner shadow 1: 1px white top inset highlight. + D.BoxInsetShadow { + anchors.fill: parent + visible: buttonPanel.__darkHover + z: D.DTK.AboveOrder + cornerRadius: buttonPanel.radius + shadowColor: Qt.rgba(1, 1, 1, 0.1) + shadowOffsetX: 0 + shadowOffsetY: 1 + shadowBlur: 1 + } + + // Inner shadow 2: 1px black bottom inset shadow. + D.BoxInsetShadow { + anchors.fill: parent + visible: buttonPanel.__darkHover + z: D.DTK.AboveOrder + cornerRadius: buttonPanel.radius + shadowColor: Qt.rgba(0, 0, 0, 0.5) + shadowOffsetX: 0 + shadowOffsetY: -1 + shadowBlur: 1 + } + + // Checked tool buttons use a subtle overlay chip with an accent icon + // instead of the shared accent-fill checked button style. + Binding on color1 { + when: control.checked + value: DS.Style.toolButton.checkedBackground + } + Binding on color2 { + when: control.checked + value: DS.Style.toolButton.checkedBackground + } + // Inset bottom shadow for the checked chip. + D.BoxInsetShadow { + anchors.fill: parent + visible: control.checked + z: D.DTK.AboveOrder + cornerRadius: buttonPanel.radius + shadowColor: control.D.ColorSelector.checkedShadow + shadowOffsetX: 0 + shadowOffsetY: -1 + shadowBlur: 1 } } } diff --git a/qt6/src/qml/overridable/InWindowBlur.qml b/qt6/src/qml/overridable/InWindowBlur.qml index a6eab580..02693232 100644 --- a/qt6/src/qml/overridable/InWindowBlur.qml +++ b/qt6/src/qml/overridable/InWindowBlur.qml @@ -10,6 +10,7 @@ Item { id :control property bool offscreen: false property alias radius: blur.blurMax + property alias saturation: blur.saturation property alias multiplier: blur.blurMultiplier property alias content: blur default property alias data: blitter.data