noctalia-shell/Components/ToggleOption.qml

88 lines
2.1 KiB
QML

import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import qs.Components
import qs.Settings
ColumnLayout {
id: root
property string label: ""
property string description: ""
property bool value: false
property var onToggled: function() {
}
Layout.fillWidth: true
RowLayout {
Layout.fillWidth: true
ColumnLayout {
spacing: 4 * Theme.scale(Screen)
Layout.fillWidth: true
Text {
text: label
font.pixelSize: 13 * Theme.scale(Screen)
font.bold: true
color: Theme.textPrimary
}
Text {
text: description
font.pixelSize: 12 * Theme.scale(Screen)
color: Theme.textSecondary
wrapMode: Text.WordWrap
Layout.fillWidth: true
}
}
Rectangle {
id: switcher
width: 52 * Theme.scale(Screen)
height: 32 * Theme.scale(Screen)
radius: 16 * Theme.scale(Screen)
color: value ? Theme.accentPrimary : Theme.surfaceVariant
border.color: value ? Theme.accentPrimary : Theme.outline
border.width: 2 * Theme.scale(Screen)
Rectangle {
width: 28 * Theme.scale(Screen)
height: 28 * Theme.scale(Screen)
radius: 14 * Theme.scale(Screen)
color: Theme.surface
border.color: Theme.outline
border.width: 1 * Theme.scale(Screen)
y: 2
x: value ? switcher.width - width - 2 : 2
Behavior on x {
NumberAnimation {
duration: 200
easing.type: Easing.OutCubic
}
}
}
MouseArea {
anchors.fill: parent
cursorShape: Qt.PointingHandCursor
onClicked: {
root.onToggled();
}
}
}
}
Rectangle {
height: 8 * Theme.scale(Screen)
}
}