diff options
Diffstat (limited to 'modules')
| -rw-r--r-- | modules/utilities/cards/Toggles.qml | 144 |
1 files changed, 47 insertions, 97 deletions
diff --git a/modules/utilities/cards/Toggles.qml b/modules/utilities/cards/Toggles.qml index 6e2d227..b74fa02 100644 --- a/modules/utilities/cards/Toggles.qml +++ b/modules/utilities/cards/Toggles.qml @@ -1,4 +1,5 @@ import qs.components +import qs.components.controls import qs.services import qs.config import qs.modules.controlcenter @@ -18,127 +19,76 @@ StyledRect { radius: Appearance.rounding.normal color: Colours.palette.m3surfaceContainer - GridLayout { + ColumnLayout { id: layout anchors.fill: parent anchors.margins: Appearance.padding.large - - columns: 2 - rowSpacing: Appearance.spacing.normal - columnSpacing: Appearance.spacing.normal - uniformCellWidths: true + spacing: Appearance.spacing.normal StyledText { - Layout.columnSpan: 2 text: qsTr("Quick Toggles") font.pointSize: Appearance.font.size.normal } - Toggle { - icon: "wifi" - text: qsTr("WiFi") - checked: Network.wifiEnabled + RowLayout { + Layout.alignment: Qt.AlignHCenter + spacing: Appearance.spacing.small - function onClicked(): void { - Network.toggleWifi(); + Toggle { + icon: "wifi" + checked: Network.wifiEnabled + onClicked: Network.toggleWifi() } - } - Toggle { - icon: "bluetooth" - text: qsTr("Bluetooth") - checked: Bluetooth.defaultAdapter?.enabled ?? false - - function onClicked(): void { - const adapter = Bluetooth.defaultAdapter; - if (adapter) - adapter.enabled = !adapter.enabled; + Toggle { + icon: "bluetooth" + checked: Bluetooth.defaultAdapter?.enabled ?? false + onClicked: { + const adapter = Bluetooth.defaultAdapter; + if (adapter) + adapter.enabled = !adapter.enabled; + } } - } - - Toggle { - icon: "mic" - text: qsTr("Microphone") - checked: !Audio.sourceMuted - function onClicked(): void { - const audio = Audio.source?.audio; - if (audio) - audio.muted = !audio.muted; + Toggle { + icon: "mic" + checked: !Audio.sourceMuted + onClicked: { + const audio = Audio.source?.audio; + if (audio) + audio.muted = !audio.muted; + } } - } - Toggle { - icon: "settings" - text: qsTr("Settings") - toggle: false - - function onClicked(): void { - root.visibilities.utilities = false; - WindowFactory.create(null, { - screen: QsWindow.window?.screen ?? null - }); + Toggle { + icon: "settings" + inactiveOnColour: Colours.palette.m3onSurfaceVariant + toggle: false + onClicked: { + root.visibilities.utilities = false; + WindowFactory.create(null, { + screen: QsWindow.window?.screen ?? null + }); + } } } } - component Toggle: StyledRect { - id: toggle - - required property string icon - required property string text - property bool checked - property bool toggle: true - property bool internalChecked - - function onClicked(): void { - } - - onCheckedChanged: internalChecked = checked - - radius: internalChecked ? Appearance.rounding.small : implicitHeight / 2 - color: internalChecked ? Colours.palette.m3primary : Colours.palette.m3surfaceContainerHigh - + component Toggle: IconButton { Layout.fillWidth: true - implicitWidth: label.implicitWidth + Appearance.padding.larger * 2 - implicitHeight: label.implicitHeight + Appearance.padding.smaller * 2 - - StateLayer { - color: toggle.internalChecked ? Colours.palette.m3onPrimary : Colours.palette.m3onSurface - - function onClicked(): void { - if (toggle.toggle) - toggle.internalChecked = !toggle.internalChecked; - toggle.onClicked(); - } - } - - RowLayout { - id: label + Layout.preferredWidth: implicitWidth + (stateLayer.pressed ? Appearance.padding.large : internalChecked ? Appearance.padding.smaller : 0) + radius: stateLayer.pressed ? Appearance.rounding.small / 2 : internalChecked ? Appearance.rounding.small : Appearance.rounding.normal + inactiveColour: Colours.palette.m3surfaceContainerHighest + toggle: true + radiusAnim.duration: Appearance.anim.durations.expressiveFastSpatial + radiusAnim.easing.bezierCurve: Appearance.anim.curves.expressiveFastSpatial - anchors.centerIn: parent - spacing: Appearance.spacing.small - - MaterialIcon { - text: toggle.icon - color: toggle.internalChecked ? Colours.palette.m3onPrimary : Colours.palette.m3onSurface - fill: toggle.internalChecked ? 1 : 0 - - Behavior on fill { - Anim {} - } + Behavior on Layout.preferredWidth { + Anim { + duration: Appearance.anim.durations.expressiveFastSpatial + easing.bezierCurve: Appearance.anim.curves.expressiveFastSpatial } - - StyledText { - text: toggle.text - color: toggle.internalChecked ? Colours.palette.m3onPrimary : Colours.palette.m3onSurface - font.pointSize: Appearance.font.size.small - } - } - - Behavior on radius { - Anim {} } } } |