components/private/SwitchStyle.qml

0001 /*
0002     SPDX-FileCopyrightText: 2019 Michail Vourlakos <mvourlakos@gmail.com>
0003     SPDX-License-Identifier: GPL-2.0-or-later
0004 */
0005
0006 import QtQuick 2.2
0007 import QtQuick.Controls.Styles 1.2 as QtQuickControlStyle
0008 import QtQuick.Controls 1.2
0009 import org.kde.plasma.core 2.0 as PlasmaCore
0010
0011 QtQuickControlStyle.SwitchStyle {
0012     id: styleRoot
0013     padding { top: 0 ; left: 0 ; right: 0 ; bottom: 0 }
0014
0015     PlasmaCore.Svg {
0016         id: switchSvg
0017         imagePath: "widgets/switch"
0018         colorGroup: PlasmaCore.ColorScope.colorGroup
0019     }
0020
0021     property bool themeHasSwitch: false
0022
0023     handle: Item {
0024         implicitWidth: {
0025             if (fallbackHandle.visible) {
0026                 return height;
0027             }
0028
0029             return switchSvg.hasElement("hint-handle-size") ? switchSvg.elementSize("hint-handle-size").width : themeHandleItem.width;
0030         }
0031         implicitHeight: {
0032             if (fallbackHandle.visible) {
0033                 return theme.mSize(theme.defaultFont).height
0034             }
0035
0036             return switchSvg.hasElement("hint-handle-size") ? switchSvg.elementSize("hint-handle-size").height : themeHandleItem.height
0037         }
0038
0039         Item {
0040             id: fallbackHandle
0041             anchors.fill: parent
0042             visible: !themeHandleItem.visible
0043
0044             PlasmaCore.FrameSvgItem {
0045                 anchors.fill: parent
0046                 opacity: control.enabled ? 1.0 : 0.6
0047                 imagePath: "widgets/button"
0048                 prefix: "shadow"
0049             }
0050
0051             PlasmaCore.FrameSvgItem {
0052                 id: button
0053                 anchors.fill: parent
0054                 imagePath: "widgets/button"
0055                 prefix: "normal"
0056             }
0057         }
0058
0059         PlasmaCore.SvgItem {
0060             id: themeHandleShadow
0061             anchors.fill: themeHandleItem
0062             opacity: control.enabled ? 1.0 : 0.6
0063             svg: switchSvg
0064             elementId: control.activeFocus ? "handle-focus" : (control.hovered ? "handle-hover" : "handle-shadow")
0065             visible: styleRoot.themeHasSwitch
0066         }
0067
0068         PlasmaCore.SvgItem {
0069             id: themeHandleItem
0070             anchors.centerIn: parent
0071             width: naturalSize.width
0072             height: naturalSize.height
0073             svg: switchSvg
0074             elementId: "handle"
0075             visible: styleRoot.themeHasSwitch
0076         }
0077     }
0078
0079     groove: Item {
0080         width: theme.mSize(theme.defaultFont).height * 2
0081         height: themeGroove.visible ? themeGrooveItem.implicitHeight : theme.mSize(theme.defaultFont).height
0082
0083         Item{
0084             id: fallbackGroove
0085             anchors.fill: parent
0086             visible: !themeGroove.visible
0087
0088             PlasmaCore.FrameSvgItem {
0089                 id: fallbackGrooveItem
0090                 anchors.fill: parent
0091                 imagePath: "widgets/slider"
0092                 prefix: "groove"
0093                 opacity: control.checked ? 0 : 1
0094                 colorGroup: PlasmaCore.ColorScope.colorGroup
0095                 visible: opacity > 0
0096
0097                 Behavior on opacity {
0098                     PropertyAnimation { duration: units.shortDuration * 2 }
0099                 }
0100             }
0101
0102             PlasmaCore.FrameSvgItem {
0103                 id: fallbackHighlight
0104                 anchors.fill: fallbackGrooveItem
0105                 imagePath: "widgets/slider"
0106                 prefix: "groove-highlight"
0107                 opacity: control.checked ? 1 : 0
0108                 colorGroup: PlasmaCore.ColorScope.colorGroup
0109                 visible: opacity > 0
0110
0111                 Behavior on opacity {
0112                     PropertyAnimation { duration: units.shortDuration * 2 }
0113                 }
0114             }
0115         }
0116
0117         Item {
0118             id: themeGroove
0119             anchors.fill: parent
0120             visible: styleRoot.themeHasSwitch
0121
0122             PlasmaCore.FrameSvgItem {
0123                 id: themeGrooveItem
0124                 anchors.fill: parent
0125                 imagePath: "widgets/switch"
0126                 prefix: "groove"
0127                 opacity: control.checked ? 0 : 1
0128                 colorGroup: PlasmaCore.ColorScope.colorGroup
0129                 visible: opacity > 0
0130
0131                 Component.onCompleted: styleRoot.themeHasSwitch = fromCurrentTheme;
0132                 onFromCurrentThemeChanged: styleRoot.themeHasSwitch = fromCurrentTheme;
0133
0134                 Behavior on opacity {
0135                     PropertyAnimation { duration: units.shortDuration * 2 }
0136                 }
0137             }
0138
0139             PlasmaCore.FrameSvgItem {
0140                 id: themeGrooveHighlight
0141                 anchors.fill: parent
0142                 imagePath: "widgets/switch"
0143                 prefix: "groove-highlight"
0144                 opacity: control.checked ? 1 : 0
0145                 colorGroup: PlasmaCore.ColorScope.colorGroup
0146                 visible: opacity > 0
0147
0148                 Behavior on opacity {
0149                     PropertyAnimation { duration: units.shortDuration * 2 }
0150                 }
0151             }
0152         }
0153     }
0154 }