noctalia-shell/Widgets/NToggle.qml
2025-08-09 22:45:06 -04:00

78 lines
1.9 KiB
QML

import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import qs.Services
RowLayout {
id: root
readonly property real scaling: Scaling.scale(screen)
property string label: ""
property string description: ""
property bool value: false
property bool hovering: false
property var onToggled: function (value: bool) {}
Layout.fillWidth: true
ColumnLayout {
spacing: 2 * scaling
Layout.fillWidth: true
Text {
text: label
font.pointSize: Style.fontSizeMedium * scaling
font.bold: true
color: Colors.textPrimary
}
Text {
text: description
font.pointSize: Style.fontSizeSmall * scaling
color: Colors.textSecondary
wrapMode: Text.WordWrap
Layout.fillWidth: true
}
}
Rectangle {
id: switcher
width: Style.baseWidgetSize * 1.625 * scaling
height: Style.baseWidgetSize * scaling
radius: height * 0.5
color: value ? Colors.accentPrimary :Colors.surfaceVariant
border.color: value ? Colors.accentPrimary : Colors.outline
border.width: Math.min(1, Style.borderMedium * scaling)
Rectangle {
width: (Style.baseWidgetSize - 4) * scaling
height: (Style.baseWidgetSize - 4) * scaling
radius: height * 0.5
color: Colors.surface
border.color: hovering ? Colors.textDisabled : Colors.outline
border.width: Math.min(1, Style.borderMedium * scaling)
y: 2 * scaling
x: value ? switcher.width - width - 2 * scaling : 2 * scaling
Behavior on x {
NumberAnimation {
duration: 200
easing.type: Easing.OutCubic
}
}
}
MouseArea {
anchors.fill: parent
cursorShape: Qt.PointingHandCursor
hoverEnabled: true
onEntered: hovering = true
onExited: hovering = false
onClicked: {
value = !value;
root.onToggled(value);
}
}
}
}