diff options
Diffstat (limited to 'src/quickcontrols/material/impl/SwitchIndicator.qml')
-rw-r--r-- | src/quickcontrols/material/impl/SwitchIndicator.qml | 92 |
1 files changed, 72 insertions, 20 deletions
diff --git a/src/quickcontrols/material/impl/SwitchIndicator.qml b/src/quickcontrols/material/impl/SwitchIndicator.qml index e439bc31b7..2d48302e01 100644 --- a/src/quickcontrols/material/impl/SwitchIndicator.qml +++ b/src/quickcontrols/material/impl/SwitchIndicator.qml @@ -3,37 +3,71 @@ import QtQuick import QtQuick.Templates as T +import QtQuick.Controls.impl import QtQuick.Controls.Material import QtQuick.Controls.Material.impl -Item { +Rectangle { id: indicator - implicitWidth: 38 - implicitHeight: 32 + width: 52 + height: 32 + radius: height / 2 + y: parent.height / 2 - height / 2 + color: control.enabled + ? (control.checked + ? control.Material.switchCheckedTrackColor : control.Material.switchUncheckedTrackColor) + : (control.checked + ? control.Material.switchDisabledCheckedTrackColor + : control.Material.switchDisabledUncheckedTrackColor) + border.width: 2 + border.color: control.enabled + ? (control.checked ? control.Material.switchCheckedTrackColor : control.Material.switchUncheckedHandleColor) + : (control.checked ? control.Material.switchDisabledCheckedTrackColor : control.Material.switchDisabledUncheckedTrackBorderColor) property T.AbstractButton control property alias handle: handle - Material.elevation: 1 - - Rectangle { - width: parent.width - height: 14 - radius: height / 2 - y: parent.height / 2 - height / 2 - color: indicator.control.enabled ? (indicator.control.checked ? indicator.control.Material.switchCheckedTrackColor : indicator.control.Material.switchUncheckedTrackColor) - : indicator.control.Material.switchDisabledTrackColor + Behavior on color { + ColorAnimation { + duration: 200 + } + } + Behavior on border.color { + ColorAnimation { + duration: 200 + } } Rectangle { id: handle - x: Math.max(0, Math.min(parent.width - width, indicator.control.visualPosition * parent.width - (width / 2))) + x: Math.max(offset, Math.min(parent.width - offset - width, + indicator.control.visualPosition * parent.width - (width / 2))) y: (parent.height - height) / 2 - width: 20 - height: 20 + // We use scale to allow us to enlarge the circle from the center, + // as using width/height will cause it to jump due to the position x/y bindings. + // However, a large enough scale on certain displays will show the triangles + // that make up the circle, so instead we make sure that the circle is always + // its largest size so that more triangles are used, and downscale instead. + width: normalSize * largestScale + height: normalSize * largestScale radius: width / 2 - color: indicator.control.enabled ? (indicator.control.checked ? indicator.control.Material.switchCheckedHandleColor : indicator.control.Material.switchUncheckedHandleColor) - : indicator.control.Material.switchDisabledHandleColor + color: indicator.control.enabled + ? (indicator.control.checked + ? indicator.control.Material.switchCheckedHandleColor + : indicator.control.hovered + ? indicator.control.Material.switchUncheckedHoveredHandleColor : indicator.control.Material.switchUncheckedHandleColor) + : (indicator.control.checked + ? indicator.control.Material.switchDisabledCheckedHandleColor + : indicator.control.Material.switchDisabledUncheckedHandleColor) + scale: indicator.control.down ? 1 : (indicator.control.checked ? checkedSize / largestSize : normalSize / largestSize) + + readonly property int offset: 2 + readonly property real normalSize: !hasIcon ? 16 : checkedSize + readonly property real checkedSize: 24 + readonly property real largestSize: 28 + readonly property real largestScale: largestSize / normalSize + readonly property bool hasIcon: indicator.control.icon.name.length > 0 + || indicator.control.icon.source.toString().length > 0 Behavior on x { enabled: !indicator.control.pressed @@ -41,9 +75,27 @@ Item { duration: 300 } } - layer.enabled: indicator.Material.elevation > 0 - layer.effect: ElevationEffect { - elevation: indicator.Material.elevation + + Behavior on scale { + NumberAnimation { + duration: 100 + } + } + + Behavior on color { + ColorAnimation { + duration: 200 + } + } + + IconImage { + x: (parent.width - width) / 2 + y: (parent.height - height) / 2 + name: indicator.control.icon.name + source: indicator.control.icon.source + sourceSize: Qt.size(indicator.control.icon.width, indicator.control.icon.height) + color: indicator.control.icon.color + visible: handle.hasIcon } } } |