nosignal/nosignal-shell
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

utilities/toggles: convert to row of icon buttons

Browse source
This commit is contained in:
2 * r + 2 * t 2025-09-15 22:36:48 +10:00
parent 3a9db3d163
commit 484027202e
2 changed files with 55 additions and 102 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
components/controls/IconButton.qml
View file

@ -21,6 +21,7 @@ StyledRect {
property alias stateLayer: stateLayer
property alias label: label
property alias radiusAnim: radiusAnim
property bool internalChecked
property color activeColour: type === IconButton.Filled ? Colours.palette.m3primary : Colours.palette.m3secondary
@ -71,6 +72,8 @@ StyledRect {
}
Behavior on radius {
Anim {}
Anim {
id: radiusAnim
}
}
}

152
modules/utilities/cards/Toggles.qml
View file

@ -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
function onClicked(): void {
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: "mic"
text: qsTr("Microphone")
checked: !Audio.sourceMuted
function onClicked(): void {
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
});
}
}
}
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
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
anchors.centerIn: parent
Layout.alignment: Qt.AlignHCenter
spacing: Appearance.spacing.small
MaterialIcon {
text: toggle.icon
color: toggle.internalChecked ? Colours.palette.m3onPrimary : Colours.palette.m3onSurface
fill: toggle.internalChecked ? 1 : 0
Toggle {
icon: "wifi"
checked: Network.wifiEnabled
onClicked: Network.toggleWifi()
}
Behavior on fill {
Anim {}
Toggle {
icon: "bluetooth"
checked: Bluetooth.defaultAdapter?.enabled ?? false
onClicked: {
const adapter = Bluetooth.defaultAdapter;
if (adapter)
adapter.enabled = !adapter.enabled;
}
}
StyledText {
text: toggle.text
color: toggle.internalChecked ? Colours.palette.m3onPrimary : Colours.palette.m3onSurface
font.pointSize: Appearance.font.size.small
Toggle {
icon: "mic"
checked: !Audio.sourceMuted
onClicked: {
const audio = Audio.source?.audio;
if (audio)
audio.muted = !audio.muted;
}
}
Toggle {
icon: "settings"
inactiveOnColour: Colours.palette.m3onSurfaceVariant
toggle: false
onClicked: {
root.visibilities.utilities = false;
WindowFactory.create(null, {
screen: QsWindow.window?.screen ?? null
});
}
}
}
}
Behavior on radius {
Anim {}
component Toggle: IconButton {
Layout.fillWidth: true
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
Behavior on Layout.preferredWidth {
Anim {
duration: Appearance.anim.durations.expressiveFastSpatial
easing.bezierCurve: Appearance.anim.curves.expressiveFastSpatial
}
}
}
}