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

controlcenter: refactoring into components

Browse source
This commit is contained in:
ATMDA 2025-11-12 15:58:42 -05:00
parent c1510b5476
commit e92187293e
8 changed files with 1145 additions and 2425 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

85
components/controls/CollapsibleSection.qml Normal file
View file

@ -0,0 +1,85 @@
import ".."
import qs.components
import qs.components.effects
import qs.services
import qs.config
import QtQuick
import QtQuick.Layouts
ColumnLayout {
id: root
required property string title
property string description: ""
property bool expanded: false
signal toggleRequested
spacing: Appearance.spacing.small / 2
Layout.fillWidth: true
Item {
id: sectionHeaderItem
Layout.fillWidth: true
Layout.preferredHeight: sectionHeader.implicitHeight
ColumnLayout {
id: sectionHeader
anchors.left: parent.left
anchors.right: parent.right
spacing: Appearance.spacing.small
RowLayout {
Layout.fillWidth: true
spacing: Appearance.spacing.small
StyledText {
Layout.topMargin: Appearance.spacing.large
text: root.title
font.pointSize: Appearance.font.size.larger
font.weight: 500
}
Item {
Layout.fillWidth: true
}
MaterialIcon {
text: "expand_more"
rotation: root.expanded ? 180 : 0
color: Colours.palette.m3onSurface
Behavior on rotation {
Anim {}
}
}
}
StateLayer {
anchors.fill: parent
anchors.leftMargin: -Appearance.padding.normal
anchors.rightMargin: -Appearance.padding.normal
function onClicked(): void {
root.toggleRequested();
root.expanded = !root.expanded;
}
}
StyledText {
visible: root.expanded && root.description !== ""
text: root.description
color: Colours.palette.m3outline
Layout.fillWidth: true
}
}
}
default property alias content: contentColumn.data
ColumnLayout {
id: contentColumn
Layout.fillWidth: true
visible: root.expanded
spacing: Appearance.spacing.small / 2
}
}

51
components/controls/SpinBoxRow.qml Normal file
View file

@ -0,0 +1,51 @@
import ".."
import qs.components
import qs.components.effects
import qs.services
import qs.config
import QtQuick
import QtQuick.Layouts
StyledRect {
id: root
required property string label
required property real value
required property real min
required property real max
property var onValueModified: function(value) {}
Layout.fillWidth: true
implicitHeight: row.implicitHeight + Appearance.padding.large * 2
radius: Appearance.rounding.normal
color: Colours.tPalette.m3surfaceContainer
Behavior on implicitHeight {
Anim {}
}
RowLayout {
id: row
anchors.left: parent.left
anchors.right: parent.right
anchors.verticalCenter: parent.verticalCenter
anchors.margins: Appearance.padding.large
spacing: Appearance.spacing.normal
StyledText {
Layout.fillWidth: true
text: root.label
}
CustomSpinBox {
min: root.min
max: root.max
value: root.value
onValueModified: value => {
root.onValueModified(value);
}
}
}
}

47
components/controls/SwitchRow.qml Normal file
View file

@ -0,0 +1,47 @@
import ".."
import qs.components
import qs.components.effects
import qs.services
import qs.config
import QtQuick
import QtQuick.Layouts
StyledRect {
id: root
required property string label
required property bool checked
property var onToggled: function(checked) {}
Layout.fillWidth: true
implicitHeight: row.implicitHeight + Appearance.padding.large * 2
radius: Appearance.rounding.normal
color: Colours.tPalette.m3surfaceContainer
Behavior on implicitHeight {
Anim {}
}
RowLayout {
id: row
anchors.left: parent.left
anchors.right: parent.right
anchors.verticalCenter: parent.verticalCenter
anchors.margins: Appearance.padding.large
spacing: Appearance.spacing.normal
StyledText {
Layout.fillWidth: true
text: root.label
}
StyledSwitch {
checked: root.checked
onToggled: {
root.onToggled(checked);
}
}
}
}

82
components/controls/ToggleButton.qml Normal file
View file

@ -0,0 +1,82 @@
import ".."
import qs.components
import qs.components.effects
import qs.services
import qs.config
import QtQuick
import QtQuick.Layouts
StyledRect {
id: root
required property bool toggled
property string icon
property string label
property string accent: "Secondary"
signal clicked
Layout.preferredWidth: implicitWidth + (toggleStateLayer.pressed ? Appearance.padding.normal * 2 : toggled ? Appearance.padding.small * 2 : 0)
implicitWidth: toggleBtnInner.implicitWidth + Appearance.padding.large * 2
implicitHeight: toggleBtnIcon.implicitHeight + Appearance.padding.normal * 2
radius: toggled || toggleStateLayer.pressed ? Appearance.rounding.small : Math.min(width, height) / 2 * Math.min(1, Appearance.rounding.scale)
color: toggled ? Colours.palette[`m3${accent.toLowerCase()}`] : Colours.palette[`m3${accent.toLowerCase()}Container`]
StateLayer {
id: toggleStateLayer
color: root.toggled ? Colours.palette[`m3on${root.accent}`] : Colours.palette[`m3on${root.accent}Container`]
function onClicked(): void {
root.clicked();
}
}
RowLayout {
id: toggleBtnInner
anchors.centerIn: parent
spacing: Appearance.spacing.normal
MaterialIcon {
id: toggleBtnIcon
visible: !!text
fill: root.toggled ? 1 : 0
text: root.icon
color: root.toggled ? Colours.palette[`m3on${root.accent}`] : Colours.palette[`m3on${root.accent}Container`]
font.pointSize: Appearance.font.size.large
Behavior on fill {
Anim {}
}
}
Loader {
asynchronous: true
active: !!root.label
visible: active
sourceComponent: StyledText {
text: root.label
color: root.toggled ? Colours.palette[`m3on${root.accent}`] : Colours.palette[`m3on${root.accent}Container`]
}
}
}
Behavior on radius {
Anim {
duration: Appearance.anim.durations.expressiveFastSpatial
easing.bezierCurve: Appearance.anim.curves.expressiveFastSpatial
}
}
Behavior on Layout.preferredWidth {
Anim {
duration: Appearance.anim.durations.expressiveFastSpatial
easing.bezierCurve: Appearance.anim.curves.expressiveFastSpatial
}
}
}

2054
modules/controlcenter/appearance/AppearancePane.qml
View file

File diff suppressed because it is too large Load diff

77
modules/controlcenter/ethernet/EthernetList.qml
View file

@ -34,7 +34,7 @@ ColumnLayout {
icon: "settings"
accent: "Primary"
function onClicked(): void {
onClicked: {
if (root.session.ethernet.active)
root.session.ethernet.active = null;
else {
@ -166,81 +166,6 @@ ColumnLayout {
implicitHeight: rowLayout.implicitHeight + Appearance.padding.normal * 2
}
}
component ToggleButton: StyledRect {
id: toggleBtn
required property bool toggled
property string icon
property string label
property string accent: "Secondary"
function onClicked(): void {
}
Layout.preferredWidth: implicitWidth + (toggleStateLayer.pressed ? Appearance.padding.normal * 2 : toggled ? Appearance.padding.small * 2 : 0)
implicitWidth: toggleBtnInner.implicitWidth + Appearance.padding.large * 2
implicitHeight: toggleBtnIcon.implicitHeight + Appearance.padding.normal * 2
radius: toggled || toggleStateLayer.pressed ? Appearance.rounding.small : Math.min(width, height) / 2 * Math.min(1, Appearance.rounding.scale)
color: toggled ? Colours.palette[`m3${accent.toLowerCase()}`] : Colours.palette[`m3${accent.toLowerCase()}Container`]
StateLayer {
id: toggleStateLayer
color: toggleBtn.toggled ? Colours.palette[`m3on${toggleBtn.accent}`] : Colours.palette[`m3on${toggleBtn.accent}Container`]
function onClicked(): void {
toggleBtn.onClicked();
}
}
RowLayout {
id: toggleBtnInner
anchors.centerIn: parent
spacing: Appearance.spacing.normal
MaterialIcon {
id: toggleBtnIcon
visible: !!text
fill: toggleBtn.toggled ? 1 : 0
text: toggleBtn.icon
color: toggleBtn.toggled ? Colours.palette[`m3on${toggleBtn.accent}`] : Colours.palette[`m3on${toggleBtn.accent}Container`]
font.pointSize: Appearance.font.size.large
Behavior on fill {
Anim {}
}
}
Loader {
asynchronous: true
active: !!toggleBtn.label
visible: active
sourceComponent: StyledText {
text: toggleBtn.label
color: toggleBtn.toggled ? Colours.palette[`m3on${toggleBtn.accent}`] : Colours.palette[`m3on${toggleBtn.accent}Container`]
}
}
}
Behavior on radius {
Anim {
duration: Appearance.anim.durations.expressiveFastSpatial
easing.bezierCurve: Appearance.anim.curves.expressiveFastSpatial
}
}
Behavior on Layout.preferredWidth {
Anim {
duration: Appearance.anim.durations.expressiveFastSpatial
easing.bezierCurve: Appearance.anim.curves.expressiveFastSpatial
}
}
}
}

81
modules/controlcenter/network/NetworkList.qml
View file

@ -34,7 +34,7 @@ ColumnLayout {
icon: "wifi"
accent: "Tertiary"
function onClicked(): void {
onClicked: {
Network.toggleWifi();
}
}
@ -44,7 +44,7 @@ ColumnLayout {
icon: "wifi_find"
accent: "Secondary"
function onClicked(): void {
onClicked: {
Network.rescanWifi();
}
}
@ -54,7 +54,7 @@ ColumnLayout {
icon: "settings"
accent: "Primary"
function onClicked(): void {
onClicked: {
if (root.session.network.active)
root.session.network.active = null;
else {
@ -224,79 +224,4 @@ ColumnLayout {
implicitHeight: rowLayout.implicitHeight + Appearance.padding.normal * 2
}
}
component ToggleButton: StyledRect {
id: toggleBtn
required property bool toggled
property string icon
property string label
property string accent: "Secondary"
function onClicked(): void {
}
Layout.preferredWidth: implicitWidth + (toggleStateLayer.pressed ? Appearance.padding.normal * 2 : toggled ? Appearance.padding.small * 2 : 0)
implicitWidth: toggleBtnInner.implicitWidth + Appearance.padding.large * 2
implicitHeight: toggleBtnIcon.implicitHeight + Appearance.padding.normal * 2
radius: toggled || toggleStateLayer.pressed ? Appearance.rounding.small : Math.min(width, height) / 2 * Math.min(1, Appearance.rounding.scale)
color: toggled ? Colours.palette[`m3${accent.toLowerCase()}`] : Colours.palette[`m3${accent.toLowerCase()}Container`]
StateLayer {
id: toggleStateLayer
color: toggleBtn.toggled ? Colours.palette[`m3on${toggleBtn.accent}`] : Colours.palette[`m3on${toggleBtn.accent}Container`]
function onClicked(): void {
toggleBtn.onClicked();
}
}
RowLayout {
id: toggleBtnInner
anchors.centerIn: parent
spacing: Appearance.spacing.normal
MaterialIcon {
id: toggleBtnIcon
visible: !!text
fill: toggleBtn.toggled ? 1 : 0
text: toggleBtn.icon
color: toggleBtn.toggled ? Colours.palette[`m3on${toggleBtn.accent}`] : Colours.palette[`m3on${toggleBtn.accent}Container`]
font.pointSize: Appearance.font.size.large
Behavior on fill {
Anim {}
}
}
Loader {
asynchronous: true
active: !!toggleBtn.label
visible: active
sourceComponent: StyledText {
text: toggleBtn.label
color: toggleBtn.toggled ? Colours.palette[`m3on${toggleBtn.accent}`] : Colours.palette[`m3on${toggleBtn.accent}Container`]
}
}
}
Behavior on radius {
Anim {
duration: Appearance.anim.durations.expressiveFastSpatial
easing.bezierCurve: Appearance.anim.curves.expressiveFastSpatial
}
}
Behavior on Layout.preferredWidth {
Anim {
duration: Appearance.anim.durations.expressiveFastSpatial
easing.bezierCurve: Appearance.anim.curves.expressiveFastSpatial
}
}
}
}

1093
modules/controlcenter/taskbar/TaskbarPane.qml
View file

File diff suppressed because it is too large Load diff