feat: add StatusSwitch

Closes #12
This commit is contained in:
B.Melnik 2021-05-20 09:14:18 +03:00 committed by Pascal Precht
parent c94b801e37
commit 52998d687c
No known key found for this signature in database
GPG Key ID: 0EE28D8D6FD85D7D
5 changed files with 75 additions and 1 deletions

View File

@ -85,4 +85,8 @@ GridLayout {
tooltip.text: "Chat" tooltip.text: "Chat"
badge.value: 100 badge.value: 100
} }
StatusSwitch {
}
} }

View File

@ -34,4 +34,5 @@ HEADERS += \
DISTFILES += \ DISTFILES += \
../src/StatusQ/Controls/StatusBaseButton.qml \ ../src/StatusQ/Controls/StatusBaseButton.qml \
../src/StatusQ/Controls/StatusButton.qml \ ../src/StatusQ/Controls/StatusButton.qml \
../src/StatusQ/Controls/StatusFlatRoundButton.qml ../src/StatusQ/Controls/StatusFlatRoundButton.qml \
../src/StatusQ/Controls/StatusSwitch.qml

View File

@ -0,0 +1,66 @@
import QtQuick 2.12
import QtQuick.Controls 2.14
import QtGraphicalEffects 1.14
import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1
import StatusQ.Components 0.1
Switch {
id: statusSwitch
indicator: Rectangle {
id: oval
implicitWidth: 52
implicitHeight: 28
x: statusSwitch.leftPadding
y: parent.height / 2 - height / 2
radius: 14
color: statusSwitch.checked ? Theme.palette.primaryColor1
: Theme.palette.directColor8
Rectangle {
id: circle
y: 4
width: 20
height: 20
radius: 10
color: Theme.palette.white
layer.enabled: true
layer.effect: DropShadow {
width: parent.width
height: parent.height
visible: true
verticalOffset: 1
fast: true
cached: true
color: Theme.palette.dropShadow
}
states: [
State {
name: "on"
when: statusSwitch.checked
PropertyChanges { target: circle; x: oval.width - circle.width - 4 }
},
State {
name: "off"
when: !statusSwitch.checked
PropertyChanges { target: circle; x: 4 }
}
]
transitions: Transition {
reversible: true
NumberAnimation { properties: "x"; easing.type: Easing.Linear; duration: 120; }
}
}
}
contentItem: StatusBaseText {
text: statusSwitch.text
opacity: enabled ? 1.0 : 0.3
verticalAlignment: Text.AlignVCenter
leftPadding: !!statusSwitch.text ? statusSwitch.indicator.width + statusSwitch.spacing : statusSwitch.indicator.width
}
}

View File

@ -8,4 +8,5 @@ StatusButton 0.1 StatusButton.qml
StatusFlatButton 0.1 StatusFlatButton.qml StatusFlatButton 0.1 StatusFlatButton.qml
StatusRoundButton 0.1 StatusRoundButton.qml StatusRoundButton 0.1 StatusRoundButton.qml
StatusFlatRoundButton 0.1 StatusFlatRoundButton.qml StatusFlatRoundButton 0.1 StatusFlatRoundButton.qml
StatusSwitch 0.1 StatusSwitch.qml

View File

@ -25,6 +25,8 @@ QtObject {
property color black: getColor('black') property color black: getColor('black')
property color white: getColor('white') property color white: getColor('white')
property color dropShadow: getColor('black', 0.12)
property color baseColor1 property color baseColor1
property color baseColor2 property color baseColor2
property color baseColor3 property color baseColor3