diff options
| author | Richard Moe Gustavsen <richard.gustavsen@qt.io> | 2025-10-07 14:32:22 +0200 |
|---|---|---|
| committer | Richard Moe Gustavsen <richard.gustavsen@qt.io> | 2025-10-08 12:10:15 +0200 |
| commit | 0149d1422990b82bb83ee2783121bcba1b9018ff (patch) | |
| tree | ab45e5430c127eed85287e0646c291773db778f4 /src/quickcontrols/macos/impl/SwitchHandle.qml | |
| parent | f5e34266ea15c6e44e9816f01f4e627d5f038f0c (diff) | |
mac style: update Switch
On macOS Tahoe 26, the native AppKit Switch has changed apparance
to become wider, with a liquid glass effect on the handle.
This patch will therefore update the Controls Switch to do the
same. That is, change the Switch to be equally wider if the app
is running with liquid glass, and change the appearance of the
handle to look a bit closer to the native handle.
Note that the Switch in Controls has always been drawn
'manually' with QML, so this change is not really fixing a
regression, but is more of a style update.
Task-number: QTBUG-138942
Change-Id: I1c7c9beb35845dac29c0fc67bd0813fffa313116
Reviewed-by: Tor Arne Vestbø <tor.arne.vestbo@qt.io>
Diffstat (limited to 'src/quickcontrols/macos/impl/SwitchHandle.qml')
| -rw-r--r-- | src/quickcontrols/macos/impl/SwitchHandle.qml | 109 |
1 files changed, 84 insertions, 25 deletions
diff --git a/src/quickcontrols/macos/impl/SwitchHandle.qml b/src/quickcontrols/macos/impl/SwitchHandle.qml index f1f1a64edf..e80c366954 100644 --- a/src/quickcontrols/macos/impl/SwitchHandle.qml +++ b/src/quickcontrols/macos/impl/SwitchHandle.qml @@ -1,38 +1,97 @@ -// Copyright (C) 2023 The Qt Company Ltd. +// Copyright (C) 2025 The Qt Company Ltd. // SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only // Qt-Security score:significant reason:default import QtQuick import QtQuick.Templates as T +import QtQuick.NativeStyle as NativeStyle +import QtQuick.Shapes import QtQuick.Effects -Rectangle { +Item { id: handle implicitWidth: 22 implicitHeight: 22 - radius: height / 2 - color: "transparent" - border.color: Application.styleHints.accessibility.contrastPreference === Qt.HighContrast ? Application.styleHints.colorScheme === Qt.Light ? "#b3000000" : "#b3ffffff" : "transparent" - - required property bool down - - Rectangle { - x: 1 - y: 1 - implicitWidth: 20 - implicitHeight: 20 - radius: 10 - color: Application.styleHints.colorScheme === Qt.Light - ? Qt.darker(palette.base, handle.down ? 1.05 : 1) - : Qt.lighter("#cdcbc9", handle.down ? 1.05 : 1) - - layer.enabled: Application.styleHints.accessibility.contrastPreference !== Qt.HighContrast - layer.effect: MultiEffect { - shadowEnabled: true - blurMax: 10 - shadowBlur: 0.2 - shadowScale: 0.92 - shadowOpacity: 1 + + required property SwitchIndicator indicator + readonly property T.AbstractButton control: indicator.control + property color handleColor: Application.styleHints.colorScheme === Qt.Light ? palette.base : "#cdcbc9" + + Behavior on x { + SmoothedAnimation { + velocity: NativeStyle.StyleConstants.runningWithLiquidGlass ? 100 : 200 + } + } + + Loader { + active: NativeStyle.StyleConstants.runningWithLiquidGlass + x: (parent.width - width) / 2 + y: (parent.height - height) / 2 + width: parent.width + (parent.control.down ? 14 : 0) + height: parent.height + (parent.control.down ? 14 : 0) + Behavior on width { NumberAnimation { duration: 200 } } + Behavior on height { NumberAnimation { duration: 200 } } + sourceComponent: Rectangle { + radius: width / 2 + readonly property color fillColor1: indicator.color + readonly property color fillColor2: "black" + gradient: RadialGradient { + GradientStop { position: 0.0; color: control.down ? Qt.alpha(fillColor1, 1.0) : handleColor } + GradientStop { position: 0.15; color: control.down ? Qt.alpha(fillColor2, 0.2) : handleColor } + GradientStop { position: 0.4; color: control.down ? Qt.alpha(fillColor2, 0.1) : handleColor } + GradientStop { position: 0.6; color: control.down ? Qt.alpha(fillColor2, 0.1) : handleColor } + GradientStop { position: 0.9; color: control.down ? Qt.alpha(fillColor2, 0.2) : handleColor } + GradientStop { position: 1.0; color: control.down ? Qt.alpha(fillColor1, 1.0) : handleColor } + } + border.color: Application.styleHints.accessibility.contrastPreference === Qt.HighContrast + ? Application.styleHints.colorScheme === Qt.Light ? "#b3000000" : "#b3ffffff" + : Application.styleHints.colorScheme === Qt.Light + ? Qt.alpha(handleColor, 1.0) : Qt.alpha(handleColor, 0.3) + border.width: 1 + + Behavior on color { ColorAnimation { duration: 200 } } + + layer.enabled: Application.styleHints.accessibility.contrastPreference !== Qt.HighContrast + layer.effect: MultiEffect { + shadowEnabled: true + blurMax: 10 + shadowBlur: 1 + shadowScale: 1.3 + shadowOpacity: 0.05 + } + } + } + + Loader { + active: !NativeStyle.StyleConstants.runningWithLiquidGlass + x: (parent.width - width) / 2 + y: (parent.height - height) / 2 + width: parent.width - 2 + height: parent.height - 2 + sourceComponent: Rectangle { + radius: width / 2 + color: { + const light = Application.styleHints.colorScheme === Qt.Light + if (!control.enabled) + return light ? palette.base : "#64676a"; + if (light) + return Qt.darker(palette.base, handle.control.down ? 1.05 : 1) + return Qt.lighter("#cdcbc9", handle.control.down ? 1.05 : 1) + } + + border.color: Application.styleHints.accessibility.contrastPreference === Qt.HighContrast + ? Application.styleHints.colorScheme === Qt.Light ? "#b3000000" : "#b3ffffff" + : "transparent" + border.width: 1 + + layer.enabled: Application.styleHints.accessibility.contrastPreference !== Qt.HighContrast + layer.effect: MultiEffect { + shadowEnabled: true + blurMax: 10 + shadowBlur: 0.2 + shadowScale: 0.92 + shadowOpacity: 1 + } } } } |