Changeset View
Changeset View
Standalone View
Standalone View
plasmoid/contents/ui/SwitchButton.qml
- This file was added.
| 1 | import QtQuick 2.7 | ||||
|---|---|---|---|---|---|
| 2 | import QtQuick.Templates 2.1 as T | ||||
| 3 | import org.kde.plasma.core 2.0 as PlasmaCore | ||||
| 4 | import org.kde.plasma.components 2.0 as PlasmaComponents | ||||
| 5 | import org.kde.plasma.extras 2.0 as PlasmaExtras | ||||
| 6 | | ||||
| 7 | | ||||
| 8 | T.Switch { | ||||
| 9 | id: control | ||||
| 10 | | ||||
| 11 | implicitWidth: indicator.implicitWidth | ||||
| 12 | implicitHeight: switchHandle.implicitHeight | ||||
| 13 | | ||||
| 14 | property alias circolour: rectangle.color | ||||
| 15 | | ||||
| 16 | indicator: Rectangle { | ||||
| 17 | id: switchHandle | ||||
| 18 | implicitWidth: 6 * 4.8 | ||||
| 19 | implicitHeight: 6 * 2.6 | ||||
| 20 | x: control.leftPadding | ||||
| 21 | anchors.verticalCenter: parent.verticalCenter | ||||
| 22 | radius: 6 * 1.3 | ||||
| 23 | color: Qt.darker(theme.textColor, 1.2) | ||||
| 24 | border.color: theme.backgroundColor | ||||
| 25 | | ||||
| 26 | Rectangle { | ||||
| 27 | id: rectangle | ||||
| 28 | | ||||
| 29 | width: 6 * 2.6 | ||||
| 30 | height: 6 * 2.6 | ||||
| 31 | radius: 10 * 1.3 | ||||
| 32 | color: Qt.lighter(theme.backgroundColor, 1.5) | ||||
| 33 | border.color: theme.textColor | ||||
| 34 | } | ||||
| 35 | | ||||
| 36 | states: [ | ||||
| 37 | State { | ||||
| 38 | name: "off" | ||||
| 39 | when: !control.checked && !control.down | ||||
| 40 | }, | ||||
| 41 | State { | ||||
| 42 | name: "on" | ||||
| 43 | when: control.checked && !control.down | ||||
| 44 | | ||||
| 45 | PropertyChanges { | ||||
| 46 | target: switchHandle | ||||
| 47 | color: Qt.lighter(theme.backgroundColor, 1.5) | ||||
| 48 | border.color: theme.textColor | ||||
| 49 | } | ||||
| 50 | | ||||
| 51 | PropertyChanges { | ||||
| 52 | target: rectangle | ||||
| 53 | x: parent.width - width | ||||
| 54 | | ||||
| 55 | } | ||||
| 56 | }, | ||||
| 57 | State { | ||||
| 58 | name: "off_down" | ||||
| 59 | when: !control.checked && control.down | ||||
| 60 | | ||||
| 61 | PropertyChanges { | ||||
| 62 | target: rectangle | ||||
| 63 | color: theme.textColor | ||||
| 64 | } | ||||
| 65 | | ||||
| 66 | }, | ||||
| 67 | State { | ||||
| 68 | name: "on_down" | ||||
| 69 | extend: "off_down" | ||||
| 70 | when: control.checked && control.down | ||||
| 71 | | ||||
| 72 | PropertyChanges { | ||||
| 73 | target: rectangle | ||||
| 74 | x: parent.width - width | ||||
| 75 | color: theme.textColor | ||||
| 76 | } | ||||
| 77 | | ||||
| 78 | PropertyChanges { | ||||
| 79 | target: switchHandle | ||||
| 80 | color: theme.backgroundColor | ||||
| 81 | border.color: theme.backgroundColor | ||||
| 82 | } | ||||
| 83 | } | ||||
| 84 | ] | ||||
| 85 | } | ||||
| 86 | } | ||||