contents/ui/SwitchButton.qml

0001 /* Copyright 2016 Aditya Mehra <aix.m@outlook.com>
0002
0003     This library is free software; you can redistribute it and/or
0004     modify it under the terms of the GNU Lesser General Public
0005     License as published by the Free Software Foundation; either
0006     version 2.1 of the License, or (at your option) version 3, or any
0007     later version accepted by the membership of KDE e.V. (or its
0008     successor approved by the membership of KDE e.V.), which shall
0009     act as a proxy defined in Section 6 of version 3 of the license.
0010
0011     This library is distributed in the hope that it will be useful,
0012     but WITHOUT ANY WARRANTY; without even the implied warranty of
0013     MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
0014     Lesser General Public License for more details.
0015
0016     You should have received a copy of the GNU Lesser General Public
0017     License along with this library.  If not, see <http://www.gnu.org/licenses/>.
0018 */
0019
0020 import QtQuick 2.9
0021 import QtQuick.Templates 2.0 as T
0022 import org.kde.plasma.core 2.0 as PlasmaCore
0023 import org.kde.plasma.components 2.0 as PlasmaComponents
0024 import org.kde.plasma.extras 2.0 as PlasmaExtras
0025
0026
0027 T.Switch {
0028     id: control
0029
0030     implicitWidth: indicator.implicitWidth
0031     implicitHeight: switchHandle.implicitHeight
0032
0033     property alias circolour: rectangle.color
0034
0035     indicator: Rectangle {
0036         id: switchHandle
0037         implicitWidth: 6 * 4.8
0038         implicitHeight: 6 * 2.6
0039         x: control.leftPadding
0040         anchors.verticalCenter: parent.verticalCenter
0041         radius: 6 * 1.3
0042         color: Qt.darker(theme.textColor, 1.2)
0043         border.color: theme.backgroundColor
0044
0045         Rectangle {
0046             id: rectangle
0047
0048             width: 6 * 2.6
0049             height: 6 * 2.6
0050             radius: 10 * 1.3
0051             color: Qt.lighter(theme.backgroundColor, 1.5)
0052             border.color: theme.textColor
0053         }
0054
0055         states: [
0056             State {
0057                 name: "off"
0058                 when: !control.checked && !control.down
0059             },
0060             State {
0061                 name: "on"
0062                 when: control.checked && !control.down
0063
0064                 PropertyChanges {
0065                     target: switchHandle
0066                     color: Qt.lighter(theme.backgroundColor, 1.5)
0067                     border.color: theme.textColor
0068                 }
0069
0070                 PropertyChanges {
0071                     target: rectangle
0072                     x: parent.width - width
0073
0074                 }
0075             },
0076             State {
0077                 name: "off_down"
0078                 when: !control.checked && control.down
0079
0080                 PropertyChanges {
0081                     target: rectangle
0082                     color: theme.textColor
0083                 }
0084
0085             },
0086             State {
0087                 name: "on_down"
0088                 extend: "off_down"
0089                 when: control.checked && control.down
0090
0091                 PropertyChanges {
0092                     target: rectangle
0093                     x: parent.width - width
0094                     color: theme.textColor
0095                 }
0096
0097                 PropertyChanges {
0098                     target: switchHandle
0099                     color: theme.backgroundColor
0100                     border.color: theme.backgroundColor
0101                 }
0102             }
0103         ]
0104     }
0105 }