diff options
| -rw-r--r-- | components/controls/CollapsibleSection.qml | 85 | ||||
| -rw-r--r-- | components/controls/SpinBoxRow.qml | 51 | ||||
| -rw-r--r-- | components/controls/SwitchRow.qml | 47 | ||||
| -rw-r--r-- | components/controls/ToggleButton.qml | 82 | ||||
| -rw-r--r-- | modules/controlcenter/appearance/AppearancePane.qml | 1872 | ||||
| -rw-r--r-- | modules/controlcenter/ethernet/EthernetList.qml | 77 | ||||
| -rw-r--r-- | modules/controlcenter/network/NetworkList.qml | 81 | ||||
| -rw-r--r-- | modules/controlcenter/taskbar/TaskbarPane.qml | 1013 |
8 files changed, 1014 insertions, 2294 deletions
diff --git a/components/controls/CollapsibleSection.qml b/components/controls/CollapsibleSection.qml new file mode 100644 index 0000000..945386c --- /dev/null +++ b/components/controls/CollapsibleSection.qml @@ -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 + } +} + diff --git a/components/controls/SpinBoxRow.qml b/components/controls/SpinBoxRow.qml new file mode 100644 index 0000000..a4441c5 --- /dev/null +++ b/components/controls/SpinBoxRow.qml @@ -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); + } + } + } +} + diff --git a/components/controls/SwitchRow.qml b/components/controls/SwitchRow.qml new file mode 100644 index 0000000..a486ee2 --- /dev/null +++ b/components/controls/SwitchRow.qml @@ -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); + } + } + } +} + diff --git a/components/controls/ToggleButton.qml b/components/controls/ToggleButton.qml new file mode 100644 index 0000000..9d8e094 --- /dev/null +++ b/components/controls/ToggleButton.qml @@ -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 + } + } +} + diff --git a/modules/controlcenter/appearance/AppearancePane.qml b/modules/controlcenter/appearance/AppearancePane.qml index e3600ed..cfe5b56 100644 --- a/modules/controlcenter/appearance/AppearancePane.qml +++ b/modules/controlcenter/appearance/AppearancePane.qml @@ -255,1588 +255,770 @@ RowLayout { } } - Item { + CollapsibleSection { id: themeModeSection - Layout.fillWidth: true - Layout.preferredHeight: themeModeSectionHeader.implicitHeight - property bool expanded: false - - ColumnLayout { - id: themeModeSectionHeader - 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: qsTr("Theme mode") - font.pointSize: Appearance.font.size.larger - font.weight: 500 - } - - Item { - Layout.fillWidth: true - } - - MaterialIcon { - text: "expand_more" - rotation: themeModeSection.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 { - const wasExpanded = themeModeSection.expanded; - root.collapseAllSections(themeModeSection); - themeModeSection.expanded = !wasExpanded; - } - } - - StyledText { - visible: themeModeSection.expanded - text: qsTr("Light or dark theme") - color: Colours.palette.m3outline - Layout.fillWidth: true - } - } - } - - StyledRect { - visible: themeModeSection.expanded - Layout.fillWidth: true - implicitHeight: themeModeSection.expanded ? modeToggle.implicitHeight + Appearance.padding.large * 2 : 0 - - radius: Appearance.rounding.normal - color: Colours.tPalette.m3surfaceContainer - - Behavior on implicitHeight { - Anim {} + title: qsTr("Theme mode") + description: qsTr("Light or dark theme") + onToggleRequested: { + root.collapseAllSections(themeModeSection); } - RowLayout { - id: modeToggle - - anchors.left: parent.left - anchors.right: parent.right - anchors.verticalCenter: parent.verticalCenter - anchors.margins: Appearance.padding.large - - spacing: Appearance.spacing.normal + StyledRect { + Layout.fillWidth: true + implicitHeight: modeToggle.implicitHeight + Appearance.padding.large * 2 - StyledText { - Layout.fillWidth: true - text: qsTr("Dark mode") - } + radius: Appearance.rounding.normal + color: Colours.tPalette.m3surfaceContainer - StyledSwitch { - checked: !Colours.currentLight - onToggled: { - Colours.setMode(checked ? "dark" : "light"); - } + Behavior on implicitHeight { + Anim {} } - } - } - Item { - id: colorVariantSection - Layout.fillWidth: true - Layout.preferredHeight: colorVariantSectionHeader.implicitHeight - property bool expanded: false + RowLayout { + id: modeToggle - ColumnLayout { - id: colorVariantSectionHeader - anchors.left: parent.left - anchors.right: parent.right - spacing: Appearance.spacing.small + anchors.left: parent.left + anchors.right: parent.right + anchors.verticalCenter: parent.verticalCenter + anchors.margins: Appearance.padding.large - RowLayout { - Layout.fillWidth: true - spacing: Appearance.spacing.small + spacing: Appearance.spacing.normal StyledText { - Layout.topMargin: Appearance.spacing.large - text: qsTr("Color variant") - font.pointSize: Appearance.font.size.larger - font.weight: 500 - } - - Item { Layout.fillWidth: true + text: qsTr("Dark mode") } - MaterialIcon { - text: "expand_more" - rotation: colorVariantSection.expanded ? 180 : 0 - color: Colours.palette.m3onSurface - Behavior on rotation { - Anim {} + StyledSwitch { + checked: !Colours.currentLight + onToggled: { + Colours.setMode(checked ? "dark" : "light"); } } } - - StateLayer { - anchors.fill: parent - anchors.leftMargin: -Appearance.padding.normal - anchors.rightMargin: -Appearance.padding.normal - function onClicked(): void { - const wasExpanded = colorVariantSection.expanded; - root.collapseAllSections(colorVariantSection); - colorVariantSection.expanded = !wasExpanded; - } - } - - StyledText { - visible: colorVariantSection.expanded - text: qsTr("Material theme variant") - color: Colours.palette.m3outline - Layout.fillWidth: true - } } } - StyledListView { - visible: colorVariantSection.expanded - Layout.fillWidth: true - implicitHeight: colorVariantSection.expanded ? Math.min(400, M3Variants.list.length * 60) : 0 - Layout.topMargin: 0 - - Behavior on implicitHeight { - Anim {} - } - - model: M3Variants.list - spacing: Appearance.spacing.small / 2 - clip: true - - StyledScrollBar.vertical: StyledScrollBar { - flickable: parent + CollapsibleSection { + id: colorVariantSection + title: qsTr("Color variant") + description: qsTr("Material theme variant") + onToggleRequested: { + root.collapseAllSections(colorVariantSection); } - delegate: StyledRect { - required property var modelData + StyledListView { + Layout.fillWidth: true + implicitHeight: colorVariantSection.expanded ? Math.min(400, M3Variants.list.length * 60) : 0 - anchors.left: parent.left - anchors.right: parent.right + Behavior on implicitHeight { + Anim {} + } - color: Qt.alpha(Colours.tPalette.m3surfaceContainer, modelData.variant === Schemes.currentVariant ? Colours.tPalette.m3surfaceContainer.a : 0) - radius: Appearance.rounding.normal - border.width: modelData.variant === Schemes.currentVariant ? 1 : 0 - border.color: Colours.palette.m3primary + model: M3Variants.list + spacing: Appearance.spacing.small / 2 + clip: true - StateLayer { - function onClicked(): void { - const variant = modelData.variant; - - // Optimistic update - set immediately - Schemes.currentVariant = variant; - - // Execute the command - Quickshell.execDetached(["caelestia", "scheme", "set", "-v", variant]); - - // Reload after a delay to confirm - Qt.callLater(() => { - reloadTimer.restart(); - }); - } - } - - Timer { - id: reloadTimer - interval: 300 - onTriggered: { - Schemes.reload(); - } + StyledScrollBar.vertical: StyledScrollBar { + flickable: parent } - RowLayout { - id: variantRow + delegate: StyledRect { + required property var modelData anchors.left: parent.left anchors.right: parent.right - anchors.verticalCenter: parent.verticalCenter - anchors.margins: Appearance.padding.normal - - spacing: Appearance.spacing.normal - MaterialIcon { - text: modelData.icon - font.pointSize: Appearance.font.size.large - fill: modelData.variant === Schemes.currentVariant ? 1 : 0 - } + color: Qt.alpha(Colours.tPalette.m3surfaceContainer, modelData.variant === Schemes.currentVariant ? Colours.tPalette.m3surfaceContainer.a : 0) + radius: Appearance.rounding.normal + border.width: modelData.variant === Schemes.currentVariant ? 1 : 0 + border.color: Colours.palette.m3primary - StyledText { - Layout.fillWidth: true - text: modelData.name - font.weight: modelData.variant === Schemes.currentVariant ? 500 : 400 + StateLayer { + function onClicked(): void { + const variant = modelData.variant; + + // Optimistic update - set immediately + Schemes.currentVariant = variant; + + // Execute the command + Quickshell.execDetached(["caelestia", "scheme", "set", "-v", variant]); + + // Reload after a delay to confirm + Qt.callLater(() => { + reloadTimer.restart(); + }); + } } - - MaterialIcon { - visible: modelData.variant === Schemes.currentVariant - text: "check" - color: Colours.palette.m3primary - font.pointSize: Appearance.font.size.large + + Timer { + id: reloadTimer + interval: 300 + onTriggered: { + Schemes.reload(); + } } - } - - implicitHeight: variantRow.implicitHeight + Appearance.padding.normal * 2 - } - } - - Item { - id: colorSchemeSection - Layout.fillWidth: true - Layout.preferredHeight: colorSchemeSectionHeader.implicitHeight - property bool expanded: false - ColumnLayout { - id: colorSchemeSectionHeader - anchors.left: parent.left - anchors.right: parent.right - spacing: Appearance.spacing.small + RowLayout { + id: variantRow - RowLayout { - Layout.fillWidth: true - spacing: Appearance.spacing.small + anchors.left: parent.left + anchors.right: parent.right + anchors.verticalCenter: parent.verticalCenter + anchors.margins: Appearance.padding.normal - StyledText { - Layout.topMargin: Appearance.spacing.large - text: qsTr("Color scheme") - font.pointSize: Appearance.font.size.larger - font.weight: 500 - } + spacing: Appearance.spacing.normal - Item { - Layout.fillWidth: true - } + MaterialIcon { + text: modelData.icon + font.pointSize: Appearance.font.size.large + fill: modelData.variant === Schemes.currentVariant ? 1 : 0 + } - MaterialIcon { - text: "expand_more" - rotation: colorSchemeSection.expanded ? 180 : 0 - color: Colours.palette.m3onSurface - Behavior on rotation { - Anim {} + StyledText { + Layout.fillWidth: true + text: modelData.name + font.weight: modelData.variant === Schemes.currentVariant ? 500 : 400 } - } - } - StateLayer { - anchors.fill: parent - anchors.leftMargin: -Appearance.padding.normal - anchors.rightMargin: -Appearance.padding.normal - function onClicked(): void { - const wasExpanded = colorSchemeSection.expanded; - root.collapseAllSections(colorSchemeSection); - colorSchemeSection.expanded = !wasExpanded; + MaterialIcon { + visible: modelData.variant === Schemes.currentVariant + text: "check" + color: Colours.palette.m3primary + font.pointSize: Appearance.font.size.large + } } - } - StyledText { - visible: colorSchemeSection.expanded - text: qsTr("Available color schemes") - color: Colours.palette.m3outline - Layout.fillWidth: true + implicitHeight: variantRow.implicitHeight + Appearance.padding.normal * 2 } } } - StyledListView { - visible: colorSchemeSection.expanded - Layout.fillWidth: true - implicitHeight: colorSchemeSection.expanded ? Math.min(400, Schemes.list.length * 80) : 0 - Layout.topMargin: 0 - - Behavior on implicitHeight { - Anim {} - } - - model: Schemes.list - spacing: Appearance.spacing.small / 2 - clip: true - - StyledScrollBar.vertical: StyledScrollBar { - flickable: parent + CollapsibleSection { + id: colorSchemeSection + title: qsTr("Color scheme") + description: qsTr("Available color schemes") + onToggleRequested: { + root.collapseAllSections(colorSchemeSection); } - delegate: StyledRect { - required property var modelData - - anchors.left: parent.left - anchors.right: parent.right + StyledListView { + Layout.fillWidth: true + implicitHeight: colorSchemeSection.expanded ? Math.min(400, Schemes.list.length * 80) : 0 - readonly property string schemeKey: `${modelData.name} ${modelData.flavour}` - readonly property bool isCurrent: schemeKey === Schemes.currentScheme + Behavior on implicitHeight { + Anim {} + } - color: Qt.alpha(Colours.tPalette.m3surfaceContainer, isCurrent ? Colours.tPalette.m3surfaceContainer.a : 0) - radius: Appearance.rounding.normal - border.width: isCurrent ? 1 : 0 - border.color: Colours.palette.m3primary + model: Schemes.list + spacing: Appearance.spacing.small / 2 + clip: true - StateLayer { - function onClicked(): void { - const name = modelData.name; - const flavour = modelData.flavour; - const schemeKey = `${name} ${flavour}`; - - // Optimistic update - set immediately - Schemes.currentScheme = schemeKey; - - // Execute the command - Quickshell.execDetached(["caelestia", "scheme", "set", "-n", name, "-f", flavour]); - - // Reload after a delay to confirm - Qt.callLater(() => { - reloadTimer.restart(); - }); - } - } - - Timer { - id: reloadTimer - interval: 300 - onTriggered: { - Schemes.reload(); - } + StyledScrollBar.vertical: StyledScrollBar { + flickable: parent } - RowLayout { - id: schemeRow + delegate: StyledRect { + required property var modelData anchors.left: parent.left anchors.right: parent.right - anchors.verticalCenter: parent.verticalCenter - anchors.margins: Appearance.padding.normal - spacing: Appearance.spacing.normal + readonly property string schemeKey: `${modelData.name} ${modelData.flavour}` + readonly property bool isCurrent: schemeKey === Schemes.currentScheme - StyledRect { - id: preview + color: Qt.alpha(Colours.tPalette.m3surfaceContainer, isCurrent ? Colours.tPalette.m3surfaceContainer.a : 0) + radius: Appearance.rounding.normal + border.width: isCurrent ? 1 : 0 + border.color: Colours.palette.m3primary + StateLayer { + function onClicked(): void { + const name = modelData.name; + const flavour = modelData.flavour; + const schemeKey = `${name} ${flavour}`; + + // Optimistic update - set immediately + Schemes.currentScheme = schemeKey; + + // Execute the command + Quickshell.execDetached(["caelestia", "scheme", "set", "-n", name, "-f", flavour]); + + // Reload after a delay to confirm + Qt.callLater(() => { + reloadTimer.restart(); + }); + } + } + + Timer { + id: reloadTimer + interval: 300 + onTriggered: { + Schemes.reload(); + } + } + + RowLayout { + id: schemeRow + + anchors.left: parent.left + anchors.right: parent.right anchors.verticalCenter: parent.verticalCenter + anchors.margins: Appearance.padding.normal - border.width: 1 - border.color: Qt.alpha(`#${modelData.colours?.outline}`, 0.5) + spacing: Appearance.spacing.normal - color: `#${modelData.colours?.surface}` - radius: Appearance.rounding.full - implicitWidth: iconPlaceholder.implicitWidth - implicitHeight: iconPlaceholder.implicitWidth + StyledRect { + id: preview - MaterialIcon { - id: iconPlaceholder - visible: false - text: "circle" - font.pointSize: Appearance.font.size.large - } + anchors.verticalCenter: parent.verticalCenter - Item { - anchors.top: parent.top - anchors.bottom: parent.bottom - anchors.right: parent.right + border.width: 1 + border.color: Qt.alpha(`#${modelData.colours?.outline}`, 0.5) - implicitWidth: parent.implicitWidth / 2 - clip: true + color: `#${modelData.colours?.surface}` + radius: Appearance.rounding.full + implicitWidth: iconPlaceholder.implicitWidth + implicitHeight: iconPlaceholder.implicitWidth + + MaterialIcon { + id: iconPlaceholder + visible: false + text: "circle" + font.pointSize: Appearance.font.size.large + } - StyledRect { + Item { anchors.top: parent.top anchors.bottom: parent.bottom anchors.right: parent.right - implicitWidth: preview.implicitWidth - color: `#${modelData.colours?.primary}` - radius: Appearance.rounding.full - } - } - } + implicitWidth: parent.implicitWidth / 2 + clip: true - Column { - Layout.fillWidth: true - spacing: 0 + StyledRect { + anchors.top: parent.top + anchors.bottom: parent.bottom + anchors.right: parent.right - StyledText { - text: modelData.flavour ?? "" - font.pointSize: Appearance.font.size.normal + implicitWidth: preview.implicitWidth + color: `#${modelData.colours?.primary}` + radius: Appearance.rounding.full + } + } } - StyledText { - text: modelData.name ?? "" - font.pointSize: Appearance.font.size.small - color: Colours.palette.m3outline + Column { + Layout.fillWidth: true + spacing: 0 - elide: Text.ElideRight - anchors.left: parent.left - anchors.right: parent.right - } - } + StyledText { + text: modelData.flavour ?? "" + font.pointSize: Appearance.font.size.normal + } - Loader { - active: isCurrent - asynchronous: true + StyledText { + text: modelData.name ?? "" + font.pointSize: Appearance.font.size.small + color: Colours.palette.m3outline - sourceComponent: MaterialIcon { - text: "check" - color: Colours.palette.m3onSurfaceVariant - font.pointSize: Appearance.font.size.large + elide: Text.ElideRight + anchors.left: parent.left + anchors.right: parent.right + } } - } - } - - implicitHeight: schemeRow.implicitHeight + Appearance.padding.normal * 2 - } - } - - Item { - id: animationsSection - Layout.fillWidth: true - Layout.preferredHeight: animationsSectionHeader.implicitHeight - property bool expanded: false - - ColumnLayout { - id: animationsSectionHeader - 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: qsTr("Animations") - font.pointSize: Appearance.font.size.larger - font.weight: 500 - } + Loader { + active: isCurrent + asynchronous: true - Item { - Layout.fillWidth: true - } - - MaterialIcon { - text: "expand_more" - rotation: animationsSection.expanded ? 180 : 0 - color: Colours.palette.m3onSurface - Behavior on rotation { - Anim {} + sourceComponent: MaterialIcon { + text: "check" + color: Colours.palette.m3onSurfaceVariant + font.pointSize: Appearance.font.size.large + } } } - } - StateLayer { - anchors.fill: parent - anchors.leftMargin: -Appearance.padding.normal - anchors.rightMargin: -Appearance.padding.normal - function onClicked(): void { - const wasExpanded = animationsSection.expanded; - root.collapseAllSections(animationsSection); - animationsSection.expanded = !wasExpanded; - } + implicitHeight: schemeRow.implicitHeight + Appearance.padding.normal * 2 } } } - StyledRect { - visible: animationsSection.expanded - Layout.fillWidth: true - Layout.topMargin: Appearance.spacing.small / 2 - implicitHeight: animationsSection.expanded ? animDurationsScaleRow.implicitHeight + Appearance.padding.large * 2 : 0 - radius: Appearance.rounding.normal - color: Colours.tPalette.m3surfaceContainer - - Behavior on implicitHeight { - Anim {} + CollapsibleSection { + id: animationsSection + title: qsTr("Animations") + onToggleRequested: { + root.collapseAllSections(animationsSection); } - RowLayout { - id: animDurationsScaleRow - 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: qsTr("Animation duration scale") - } - - CustomSpinBox { - id: animDurationsScaleSpinBox - min: 0.1 - max: 5 - value: root.animDurationsScale - onValueModified: value => { - root.animDurationsScale = value; - root.saveConfig(); - } + SpinBoxRow { + label: qsTr("Animation duration scale") + min: 0.1 + max: 5 + value: root.animDurationsScale + onValueModified: value => { + root.animDurationsScale = value; + root.saveConfig(); } } } - Item { + CollapsibleSection { id: fontsSection - Layout.fillWidth: true - Layout.preferredHeight: fontsSectionHeader.implicitHeight - property bool expanded: false - - ColumnLayout { - id: fontsSectionHeader - 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: qsTr("Fonts") - font.pointSize: Appearance.font.size.larger - font.weight: 500 - } - - Item { - Layout.fillWidth: true - } - - MaterialIcon { - text: "expand_more" - rotation: fontsSection.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 { - const wasExpanded = fontsSection.expanded; - root.collapseAllSections(fontsSection); - fontsSection.expanded = !wasExpanded; - } - } - } - } - - StyledText { - visible: fontsSection.expanded - Layout.topMargin: Appearance.spacing.normal - text: qsTr("Material font family") - font.pointSize: Appearance.font.size.larger - font.weight: 500 - } - - StyledListView { - visible: fontsSection.expanded - Layout.fillWidth: true - implicitHeight: fontsSection.expanded ? Math.min(300, Qt.fontFamilies().length * 50) : 0 - Layout.topMargin: 0 - - Behavior on implicitHeight { - Anim {} + title: qsTr("Fonts") + onToggleRequested: { + root.collapseAllSections(fontsSection); } - model: Qt.fontFamilies() - spacing: Appearance.spacing.small / 2 - clip: true - - StyledScrollBar.vertical: StyledScrollBar { - flickable: parent + StyledText { + Layout.topMargin: Appearance.spacing.normal + text: qsTr("Material font family") + font.pointSize: Appearance.font.size.larger + font.weight: 500 } - delegate: StyledRect { - required property string modelData + StyledListView { + Layout.fillWidth: true + implicitHeight: fontsSection.expanded ? Math.min(300, Qt.fontFamilies().length * 50) : 0 - anchors.left: parent.left - anchors.right: parent.right + Behavior on implicitHeight { + Anim {} + } - readonly property bool isCurrent: modelData === root.fontFamilyMaterial - color: Qt.alpha(Colours.tPalette.m3surfaceContainer, isCurrent ? Colours.tPalette.m3surfaceContainer.a : 0) - radius: Appearance.rounding.normal - border.width: isCurrent ? 1 : 0 - border.color: Colours.palette.m3primary + model: Qt.fontFamilies() + spacing: Appearance.spacing.small / 2 + clip: true - StateLayer { - function onClicked(): void { - root.fontFamilyMaterial = modelData; - root.saveConfig(); - } + StyledScrollBar.vertical: StyledScrollBar { + flickable: parent } - RowLayout { - id: fontFamilyMaterialRow + delegate: StyledRect { + required property string modelData anchors.left: parent.left anchors.right: parent.right - anchors.verticalCenter: parent.verticalCenter - anchors.margins: Appearance.padding.normal - - spacing: Appearance.spacing.normal - - StyledText { - text: modelData - font.pointSize: Appearance.font.size.normal - } - - Item { - Layout.fillWidth: true - } - Loader { - active: isCurrent - asynchronous: true + readonly property bool isCurrent: modelData === root.fontFamilyMaterial + color: Qt.alpha(Colours.tPalette.m3surfaceContainer, isCurrent ? Colours.tPalette.m3surfaceContainer.a : 0) + radius: Appearance.rounding.normal + border.width: isCurrent ? 1 : 0 + border.color: Colours.palette.m3primary - sourceComponent: MaterialIcon { - text: "check" - color: Colours.palette.m3onSurfaceVariant - font.pointSize: Appearance.font.size.large + StateLayer { + function onClicked(): void { + root.fontFamilyMaterial = modelData; + root.saveConfig(); } } - } - - implicitHeight: fontFamilyMaterialRow.implicitHeight + Appearance.padding.normal * 2 - } - } - - StyledText { - visible: fontsSection.expanded - Layout.topMargin: Appearance.spacing.normal - text: qsTr("Monospace font family") - font.pointSize: Appearance.font.size.larger - font.weight: 500 - } - - StyledListView { - visible: fontsSection.expanded - Layout.fillWidth: true - implicitHeight: fontsSection.expanded ? Math.min(300, Qt.fontFamilies().length * 50) : 0 - Layout.topMargin: 0 - - Behavior on implicitHeight { - Anim {} - } - - model: Qt.fontFamilies() - spacing: Appearance.spacing.small / 2 - clip: true - - StyledScrollBar.vertical: StyledScrollBar { - flickable: parent - } - - delegate: StyledRect { - required property string modelData - - anchors.left: parent.left - anchors.right: parent.right - - readonly property bool isCurrent: modelData === root.fontFamilyMono - color: Qt.alpha(Colours.tPalette.m3surfaceContainer, isCurrent ? Colours.tPalette.m3surfaceContainer.a : 0) - radius: Appearance.rounding.normal - border.width: isCurrent ? 1 : 0 - border.color: Colours.palette.m3primary - - StateLayer { - function onClicked(): void { - root.fontFamilyMono = modelData; - root.saveConfig(); - } - } - RowLayout { - id: fontFamilyMonoRow + RowLayout { + id: fontFamilyMaterialRow - anchors.left: parent.left - anchors.right: parent.right - anchors.verticalCenter: parent.verticalCenter - anchors.margins: Appearance.padding.normal + anchors.left: parent.left + anchors.right: parent.right + anchors.verticalCenter: parent.verticalCenter + anchors.margins: Appearance.padding.normal - spacing: Appearance.spacing.normal + spacing: Appearance.spacing.normal - StyledText { - text: modelData - font.pointSize: Appearance.font.size.normal - } + StyledText { + text: modelData + font.pointSize: Appearance.font.size.normal + } - Item { - Layout.fillWidth: true - } + Item { + Layout.fillWidth: true + } - Loader { - active: isCurrent - asynchronous: true + Loader { + active: isCurrent + asynchronous: true - sourceComponent: MaterialIcon { - text: "check" - color: Colours.palette.m3onSurfaceVariant - font.pointSize: Appearance.font.size.large + sourceComponent: MaterialIcon { + text: "check" + color: Colours.palette.m3onSurfaceVariant + font.pointSize: Appearance.font.size.large + } } } - } - - implicitHeight: fontFamilyMonoRow.implicitHeight + Appearance.padding.normal * 2 - } - } - StyledText { - visible: fontsSection.expanded - Layout.topMargin: Appearance.spacing.normal - text: qsTr("Sans-serif font family") - font.pointSize: Appearance.font.size.larger - font.weight: 500 - } - - StyledListView { - visible: fontsSection.expanded - Layout.fillWidth: true - implicitHeight: fontsSection.expanded ? Math.min(300, Qt.fontFamilies().length * 50) : 0 - Layout.topMargin: 0 - - Behavior on implicitHeight { - Anim {} + implicitHeight: fontFamilyMaterialRow.implicitHeight + Appearance.padding.normal * 2 + } } - model: Qt.fontFamilies() - spacing: Appearance.spacing.small / 2 - clip: true - - StyledScrollBar.vertical: StyledScrollBar { - flickable: parent + StyledText { + Layout.topMargin: Appearance.spacing.normal + text: qsTr("Monospace font family") + font.pointSize: Appearance.font.size.larger + font.weight: 500 } - delegate: StyledRect { - required property string modelData + StyledListView { + Layout.fillWidth: true + implicitHeight: fontsSection.expanded ? Math.min(300, Qt.fontFamilies().length * 50) : 0 - anchors.left: parent.left - anchors.right: parent.right + Behavior on implicitHeight { + Anim {} + } - readonly property bool isCurrent: modelData === root.fontFamilySans - color: Qt.alpha(Colours.tPalette.m3surfaceContainer, isCurrent ? Colours.tPalette.m3surfaceContainer.a : 0) - radius: Appearance.rounding.normal - border.width: isCurrent ? 1 : 0 - border.color: Colours.palette.m3primary + model: Qt.fontFamilies() + spacing: Appearance.spacing.small / 2 + clip: true - StateLayer { - function onClicked(): void { - root.fontFamilySans = modelData; - root.saveConfig(); - } + StyledScrollBar.vertical: StyledScrollBar { + flickable: parent } - RowLayout { - id: fontFamilySansRow + delegate: StyledRect { + required property string modelData anchors.left: parent.left anchors.right: parent.right - anchors.verticalCenter: parent.verticalCenter - anchors.margins: Appearance.padding.normal - - spacing: Appearance.spacing.normal - - StyledText { - text: modelData - font.pointSize: Appearance.font.size.normal - } - - Item { - Layout.fillWidth: true - } - Loader { - active: isCurrent - asynchronous: true + readonly property bool isCurrent: modelData === root.fontFamilyMono + color: Qt.alpha(Colours.tPalette.m3surfaceContainer, isCurrent ? Colours.tPalette.m3surfaceContainer.a : 0) + radius: Appearance.rounding.normal + border.width: isCurrent ? 1 : 0 + border.color: Colours.palette.m3primary - sourceComponent: MaterialIcon { - text: "check" - color: Colours.palette.m3onSurfaceVariant - font.pointSize: Appearance.font.size.large + StateLayer { + function onClicked(): void { + root.fontFamilyMono = modelData; + root.saveConfig(); } } - } - - implicitHeight: fontFamilySansRow.implicitHeight + Appearance.padding.normal * 2 - } - } - - StyledRect { - visible: fontsSection.expanded - Layout.fillWidth: true - Layout.topMargin: Appearance.spacing.small / 2 - implicitHeight: fontsSection.expanded ? fontSizeScaleRow.implicitHeight + Appearance.padding.large * 2 : 0 - radius: Appearance.rounding.normal - color: Colours.tPalette.m3surfaceContainer - Behavior on implicitHeight { - Anim {} - } - - RowLayout { - id: fontSizeScaleRow - 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: qsTr("Font size scale") - } - - CustomSpinBox { - id: fontSizeScaleSpinBox - min: 0.1 - max: 5 - value: root.fontSizeScale - onValueModified: value => { - root.fontSizeScale = value; - root.saveConfig(); - } - } - } - } + RowLayout { + id: fontFamilyMonoRow - Item { - id: scalesSection - Layout.fillWidth: true - Layout.preferredHeight: scalesSectionHeader.implicitHeight - property bool expanded: false + anchors.left: parent.left + anchors.right: parent.right + anchors.verticalCenter: parent.verticalCenter + anchors.margins: Appearance.padding.normal - ColumnLayout { - id: scalesSectionHeader - anchors.left: parent.left - anchors.right: parent.right - spacing: Appearance.spacing.small + spacing: Appearance.spacing.normal - RowLayout { - Layout.fillWidth: true - spacing: Appearance.spacing.small + StyledText { + text: modelData + font.pointSize: Appearance.font.size.normal + } - StyledText { - Layout.topMargin: Appearance.spacing.large - text: qsTr("Scales") - font.pointSize: Appearance.font.size.larger - font.weight: 500 - } + Item { + Layout.fillWidth: true + } - Item { - Layout.fillWidth: true - } + Loader { + active: isCurrent + asynchronous: true - MaterialIcon { - text: "expand_more" - rotation: scalesSection.expanded ? 180 : 0 - color: Colours.palette.m3onSurface - Behavior on rotation { - Anim {} + sourceComponent: MaterialIcon { + text: "check" + color: Colours.palette.m3onSurfaceVariant + font.pointSize: Appearance.font.size.large + } } } - } - StateLayer { - anchors.fill: parent - anchors.leftMargin: -Appearance.padding.normal - anchors.rightMargin: -Appearance.padding.normal - function onClicked(): void { - const wasExpanded = scalesSection.expanded; - root.collapseAllSections(scalesSection); - scalesSection.expanded = !wasExpanded; - } + implicitHeight: fontFamilyMonoRow.implicitHeight + Appearance.padding.normal * 2 } } - } - StyledRect { - visible: scalesSection.expanded - Layout.fillWidth: true - Layout.topMargin: Appearance.spacing.small / 2 - implicitHeight: scalesSection.expanded ? paddingScaleRow.implicitHeight + Appearance.padding.large * 2 : 0 - radius: Appearance.rounding.normal - color: Colours.tPalette.m3surfaceContainer - - Behavior on implicitHeight { - Anim {} + StyledText { + Layout.topMargin: Appearance.spacing.normal + text: qsTr("Sans-serif font family") + font.pointSize: Appearance.font.size.larger + font.weight: 500 } - RowLayout { - id: paddingScaleRow - 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: qsTr("Padding scale") - } + StyledListView { + Layout.fillWidth: true + implicitHeight: fontsSection.expanded ? Math.min(300, Qt.fontFamilies().length * 50) : 0 - CustomSpinBox { - id: paddingScaleSpinBox - min: 0.1 - max: 5 - value: root.paddingScale - onValueModified: value => { - root.paddingScale = value; - root.saveConfig(); - } + Behavior on implicitHeight { + Anim {} } - } - } - - StyledRect { - visible: scalesSection.expanded - Layout.fillWidth: true - Layout.topMargin: Appearance.spacing.small / 2 - implicitHeight: scalesSection.expanded ? roundingScaleRow.implicitHeight + Appearance.padding.large * 2 : 0 - radius: Appearance.rounding.normal - color: Colours.tPalette.m3surfaceContainer - Behavior on implicitHeight { - Anim {} - } - - RowLayout { - id: roundingScaleRow - 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: qsTr("Rounding scale") - } + model: Qt.fontFamilies() + spacing: Appearance.spacing.small / 2 + clip: true - CustomSpinBox { - id: roundingScaleSpinBox - min: 0.1 - max: 5 - value: root.roundingScale - onValueModified: value => { - root.roundingScale = value; - root.saveConfig(); - } + StyledScrollBar.vertical: StyledScrollBar { + flickable: parent } - } - } - StyledRect { - visible: scalesSection.expanded - Layout.fillWidth: true - Layout.topMargin: Appearance.spacing.small / 2 - implicitHeight: scalesSection.expanded ? spacingScaleRow.implicitHeight + Appearance.padding.large * 2 : 0 - radius: Appearance.rounding.normal - color: Colours.tPalette.m3surfaceContainer + delegate: StyledRect { + required property string modelData - Behavior on implicitHeight { - Anim {} - } - - RowLayout { - id: spacingScaleRow - anchors.left: parent.left - anchors.right: parent.right - anchors.verticalCenter: parent.verticalCenter - anchors.margins: Appearance.padding.large - spacing: Appearance.spacing.normal + anchors.left: parent.left + anchors.right: parent.right - StyledText { - Layout.fillWidth: true - text: qsTr("Spacing scale") - } + readonly property bool isCurrent: modelData === root.fontFamilySans + color: Qt.alpha(Colours.tPalette.m3surfaceContainer, isCurrent ? Colours.tPalette.m3surfaceContainer.a : 0) + radius: Appearance.rounding.normal + border.width: isCurrent ? 1 : 0 + border.color: Colours.palette.m3primary - CustomSpinBox { - id: spacingScaleSpinBox - min: 0.1 - max: 5 - value: root.spacingScale - onValueModified: value => { - root.spacingScale = value; - root.saveConfig(); + StateLayer { + function onClicked(): void { + root.fontFamilySans = modelData; + root.saveConfig(); + } } - } - } - } - - Item { - id: transparencySection - Layout.fillWidth: true - Layout.preferredHeight: transparencySectionHeader.implicitHeight - property bool expanded: false - ColumnLayout { - id: transparencySectionHeader - anchors.left: parent.left - anchors.right: parent.right - spacing: Appearance.spacing.small + RowLayout { + id: fontFamilySansRow - RowLayout { - Layout.fillWidth: true - spacing: Appearance.spacing.small + anchors.left: parent.left + anchors.right: parent.right + anchors.verticalCenter: parent.verticalCenter + anchors.margins: Appearance.padding.normal - StyledText { - Layout.topMargin: Appearance.spacing.large - text: qsTr("Transparency") - font.pointSize: Appearance.font.size.larger - font.weight: 500 - } + spacing: Appearance.spacing.normal - Item { - Layout.fillWidth: true - } - - MaterialIcon { - text: "expand_more" - rotation: transparencySection.expanded ? 180 : 0 - color: Colours.palette.m3onSurface - Behavior on rotation { - Anim {} + StyledText { + text: modelData + font.pointSize: Appearance.font.size.normal } - } - } - - StateLayer { - anchors.fill: parent - anchors.leftMargin: -Appearance.padding.normal - anchors.rightMargin: -Appearance.padding.normal - function onClicked(): void { - const wasExpanded = transparencySection.expanded; - root.collapseAllSections(transparencySection); - transparencySection.expanded = !wasExpanded; - } - } - } - } - StyledRect { - visible: transparencySection.expanded - Layout.fillWidth: true - Layout.topMargin: Appearance.spacing.small / 2 - implicitHeight: transparencySection.expanded ? transparencyEnabledRow.implicitHeight + Appearance.padding.large * 2 : 0 - radius: Appearance.rounding.normal - color: Colours.tPalette.m3surfaceContainer - - Behavior on implicitHeight { - Anim {} - } - - RowLayout { - id: transparencyEnabledRow - anchors.left: parent.left - anchors.right: parent.right - anchors.verticalCenter: parent.verticalCenter - anchors.margins: Appearance.padding.large - spacing: Appearance.spacing.normal + Item { + Layout.fillWidth: true + } - StyledText { - Layout.fillWidth: true - text: qsTr("Transparency enabled") - } + Loader { + active: isCurrent + asynchronous: true - StyledSwitch { - id: transparencyEnabledSwitch - checked: root.transparencyEnabled - onToggled: { - root.transparencyEnabled = checked; - root.saveConfig(); + sourceComponent: MaterialIcon { + text: "check" + color: Colours.palette.m3onSurfaceVariant + font.pointSize: Appearance.font.size.large + } + } } - } - } - } - - StyledRect { - visible: transparencySection.expanded - Layout.fillWidth: true - Layout.topMargin: Appearance.spacing.small / 2 - implicitHeight: transparencySection.expanded ? transparencyBaseRow.implicitHeight + Appearance.padding.large * 2 : 0 - radius: Appearance.rounding.normal - color: Colours.tPalette.m3surfaceContainer - - Behavior on implicitHeight { - Anim {} - } - RowLayout { - id: transparencyBaseRow - 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: qsTr("Transparency base") - } - - CustomSpinBox { - id: transparencyBaseSpinBox - min: 0 - max: 1 - value: root.transparencyBase - onValueModified: value => { - root.transparencyBase = value; - root.saveConfig(); - } + implicitHeight: fontFamilySansRow.implicitHeight + Appearance.padding.normal * 2 } } - } - - StyledRect { - visible: transparencySection.expanded - Layout.fillWidth: true - Layout.topMargin: Appearance.spacing.small / 2 - implicitHeight: transparencySection.expanded ? transparencyLayersRow.implicitHeight + Appearance.padding.large * 2 : 0 - radius: Appearance.rounding.normal - color: Colours.tPalette.m3surfaceContainer - - Behavior on implicitHeight { - Anim {} - } - RowLayout { - id: transparencyLayersRow - 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: qsTr("Transparency layers") - } + StyledRect { + Layout.fillWidth: true + implicitHeight: fontSizeScaleRow.implicitHeight + Appearance.padding.large * 2 + radius: Appearance.rounding.normal + color: Colours.tPalette.m3surfaceContainer - CustomSpinBox { - id: transparencyLayersSpinBox - min: 0 - max: 1 - value: root.transparencyLayers - onValueModified: value => { - root.transparencyLayers = value; - root.saveConfig(); - } + Behavior on implicitHeight { + Anim {} } - } - } - - Item { - id: borderSection - Layout.fillWidth: true - Layout.preferredHeight: borderSectionHeader.implicitHeight - property bool expanded: false - - ColumnLayout { - id: borderSectionHeader - anchors.left: parent.left - anchors.right: parent.right - spacing: Appearance.spacing.small RowLayout { - Layout.fillWidth: true - spacing: Appearance.spacing.small + id: fontSizeScaleRow + anchors.left: parent.left + anchors.right: parent.right + anchors.verticalCenter: parent.verticalCenter + anchors.margins: Appearance.padding.large + spacing: Appearance.spacing.normal StyledText { - Layout.topMargin: Appearance.spacing.large - text: qsTr("Border") - font.pointSize: Appearance.font.size.larger - font.weight: 500 - } - - Item { Layout.fillWidth: true + text: qsTr("Font size scale") } - MaterialIcon { - text: "expand_more" - rotation: borderSection.expanded ? 180 : 0 - color: Colours.palette.m3onSurface - Behavior on rotation { - Anim {} + CustomSpinBox { + id: fontSizeScaleSpinBox + min: 0.1 + max: 5 + value: root.fontSizeScale + onValueModified: value => { + root.fontSizeScale = value; + root.saveConfig(); } } } - - StateLayer { - anchors.fill: parent - anchors.leftMargin: -Appearance.padding.normal - anchors.rightMargin: -Appearance.padding.normal - function onClicked(): void { - const wasExpanded = borderSection.expanded; - root.collapseAllSections(borderSection); - borderSection.expanded = !wasExpanded; - } - } } } - StyledRect { - visible: borderSection.expanded - Layout.fillWidth: true - Layout.topMargin: Appearance.spacing.small / 2 - implicitHeight: borderSection.expanded ? borderRoundingRow.implicitHeight + Appearance.padding.large * 2 : 0 - radius: Appearance.rounding.normal - color: Colours.tPalette.m3surfaceContainer - - Behavior on implicitHeight { - Anim {} + CollapsibleSection { + id: scalesSection + title: qsTr("Scales") + onToggleRequested: { + root.collapseAllSections(scalesSection); } - RowLayout { - id: borderRoundingRow - 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: qsTr("Border rounding") - } - - CustomSpinBox { - id: borderRoundingSpinBox - min: 0.1 - max: 5 - value: root.borderRounding - onValueModified: value => { - root.borderRounding = value; - root.saveConfig(); - } + SpinBoxRow { + label: qsTr("Padding scale") + min: 0.1 + max: 5 + value: root.paddingScale + onValueModified: value => { + root.paddingScale = value; + root.saveConfig(); } } - } - StyledRect { - visible: borderSection.expanded - Layout.fillWidth: true - Layout.topMargin: Appearance.spacing.small / 2 - implicitHeight: borderSection.expanded ? borderThicknessRow.implicitHeight + Appearance.padding.large * 2 : 0 - radius: Appearance.rounding.normal - color: Colours.tPalette.m3surfaceContainer - - Behavior on implicitHeight { - Anim {} - } - - RowLayout { - id: borderThicknessRow - 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: qsTr("Border thickness") - } - - CustomSpinBox { - id: borderThicknessSpinBox - min: 0.1 - max: 5 - value: root.borderThickness - onValueModified: value => { - root.borderThickness = value; - root.saveConfig(); - } + SpinBoxRow { + label: qsTr("Rounding scale") + min: 0.1 + max: 5 + value: root.roundingScale + onValueModified: value => { + root.roundingScale = value; + root.saveConfig(); } } - } - - Item { - id: backgroundSection - Layout.fillWidth: true - Layout.preferredHeight: backgroundSectionHeader.implicitHeight - property bool expanded: false - - ColumnLayout { - id: backgroundSectionHeader - 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: qsTr("Background") - font.pointSize: Appearance.font.size.larger - font.weight: 500 - } - - Item { - Layout.fillWidth: true - } - - MaterialIcon { - text: "expand_more" - rotation: backgroundSection.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 { - const wasExpanded = backgroundSection.expanded; - root.collapseAllSections(backgroundSection); - backgroundSection.expanded = !wasExpanded; - } + SpinBoxRow { + label: qsTr("Spacing scale") + min: 0.1 + max: 5 + value: root.spacingScale + onValueModified: value => { + root.spacingScale = value; + root.saveConfig(); } } } - StyledRect { - visible: backgroundSection.expanded - Layout.fillWidth: true - Layout.topMargin: Appearance.spacing.small / 2 - implicitHeight: backgroundSection.expanded ? desktopClockRow.implicitHeight + Appearance.padding.large * 2 : 0 - radius: Appearance.rounding.normal - color: Colours.tPalette.m3surfaceContainer - - Behavior on implicitHeight { - Anim {} + CollapsibleSection { + id: transparencySection + title: qsTr("Transparency") + onToggleRequested: { + root.collapseAllSections(transparencySection); } - RowLayout { - id: desktopClockRow - 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: qsTr("Desktop clock") - } - - StyledSwitch { - id: desktopClockSwitch - checked: root.desktopClockEnabled - onToggled: { - root.desktopClockEnabled = checked; - root.saveConfig(); - } + SwitchRow { + label: qsTr("Transparency enabled") + checked: root.transparencyEnabled + onToggled: checked => { + root.transparencyEnabled = checked; + root.saveConfig(); } } - } - - StyledRect { - visible: backgroundSection.expanded - Layout.fillWidth: true - Layout.topMargin: Appearance.spacing.small / 2 - implicitHeight: backgroundSection.expanded ? backgroundEnabledRow.implicitHeight + Appearance.padding.large * 2 : 0 - radius: Appearance.rounding.normal - color: Colours.tPalette.m3surfaceContainer - - Behavior on implicitHeight { - Anim {} - } - RowLayout { - id: backgroundEnabledRow - 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: qsTr("Background enabled") + SpinBoxRow { + label: qsTr("Transparency base") + min: 0 + max: 1 + value: root.transparencyBase + onValueModified: value => { + root.transparencyBase = value; + root.saveConfig(); } + } - StyledSwitch { - id: backgroundEnabledSwitch - checked: root.backgroundEnabled - onToggled: { - root.backgroundEnabled = checked; - root.saveConfig(); - } + SpinBoxRow { + label: qsTr("Transparency layers") + min: 0 + max: 1 + value: root.transparencyLayers + onValueModified: value => { + root.transparencyLayers = value; + root.saveConfig(); } } } - StyledText { - visible: backgroundSection.expanded - Layout.topMargin: Appearance.spacing.normal - text: qsTr("Visualiser") - font.pointSize: Appearance.font.size.larger - font.weight: 500 - } - - StyledRect { - visible: backgroundSection.expanded - Layout.fillWidth: true - Layout.topMargin: Appearance.spacing.small / 2 - implicitHeight: backgroundSection.expanded ? visualiserEnabledRow.implicitHeight + Appearance.padding.large * 2 : 0 - radius: Appearance.rounding.normal - color: Colours.tPalette.m3surfaceContainer - - Behavior on implicitHeight { - Anim {} + CollapsibleSection { + id: borderSection + title: qsTr("Border") + onToggleRequested: { + root.collapseAllSections(borderSection); } - RowLayout { - id: visualiserEnabledRow - 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: qsTr("Visualiser enabled") + SpinBoxRow { + label: qsTr("Border rounding") + min: 0.1 + max: 5 + value: root.borderRounding + onValueModified: value => { + root.borderRounding = value; + root.saveConfig(); } + } - StyledSwitch { - id: visualiserEnabledSwitch - checked: root.visualiserEnabled - onToggled: { - root.visualiserEnabled = checked; - root.saveConfig(); - } + SpinBoxRow { + label: qsTr("Border thickness") + min: 0.1 + max: 5 + value: root.borderThickness + onValueModified: value => { + root.borderThickness = value; + root.saveConfig(); } } } - StyledRect { - visible: backgroundSection.expanded - Layout.fillWidth: true - Layout.topMargin: Appearance.spacing.small / 2 - implicitHeight: backgroundSection.expanded ? visualiserAutoHideRow.implicitHeight + Appearance.padding.large * 2 : 0 - radius: Appearance.rounding.normal - color: Colours.tPalette.m3surfaceContainer - - Behavior on implicitHeight { - Anim {} + CollapsibleSection { + id: backgroundSection + title: qsTr("Background") + onToggleRequested: { + root.collapseAllSections(backgroundSection); } - RowLayout { - id: visualiserAutoHideRow - 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: qsTr("Visualiser auto hide") + SwitchRow { + label: qsTr("Desktop clock") + checked: root.desktopClockEnabled + onToggled: checked => { + root.desktopClockEnabled = checked; + root.saveConfig(); } + } - StyledSwitch { - id: visualiserAutoHideSwitch - checked: root.visualiserAutoHide - onToggled: { - root.visualiserAutoHide = checked; - root.saveConfig(); - } + SwitchRow { + label: qsTr("Background enabled") + checked: root.backgroundEnabled + onToggled: checked => { + root.backgroundEnabled = checked; + root.saveConfig(); } } - } - - StyledRect { - visible: backgroundSection.expanded - Layout.fillWidth: true - Layout.topMargin: Appearance.spacing.small / 2 - implicitHeight: backgroundSection.expanded ? visualiserRoundingRow.implicitHeight + Appearance.padding.large * 2 : 0 - radius: Appearance.rounding.normal - color: Colours.tPalette.m3surfaceContainer - Behavior on implicitHeight { - Anim {} + StyledText { + Layout.topMargin: Appearance.spacing.normal + text: qsTr("Visualiser") + font.pointSize: Appearance.font.size.larger + font.weight: 500 } - RowLayout { - id: visualiserRoundingRow - 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: qsTr("Visualiser rounding") - } - - CustomSpinBox { - id: visualiserRoundingSpinBox - min: 0 - max: 10 - value: Math.round(root.visualiserRounding) - onValueModified: value => { - root.visualiserRounding = value; - root.saveConfig(); - } + SwitchRow { + label: qsTr("Visualiser enabled") + checked: root.visualiserEnabled + onToggled: checked => { + root.visualiserEnabled = checked; + root.saveConfig(); } } - } - StyledRect { - visible: backgroundSection.expanded - Layout.fillWidth: true - Layout.topMargin: Appearance.spacing.small / 2 - implicitHeight: backgroundSection.expanded ? visualiserSpacingRow.implicitHeight + Appearance.padding.large * 2 : 0 - radius: Appearance.rounding.normal - color: Colours.tPalette.m3surfaceContainer - - Behavior on implicitHeight { - Anim {} + SwitchRow { + label: qsTr("Visualiser auto hide") + checked: root.visualiserAutoHide + onToggled: checked => { + root.visualiserAutoHide = checked; + root.saveConfig(); + } } - RowLayout { - id: visualiserSpacingRow - 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: qsTr("Visualiser spacing") + SpinBoxRow { + label: qsTr("Visualiser rounding") + min: 0 + max: 10 + value: Math.round(root.visualiserRounding) + onValueModified: value => { + root.visualiserRounding = value; + root.saveConfig(); } + } - CustomSpinBox { - id: visualiserSpacingSpinBox - min: 0 - max: 10 - value: Math.round(root.visualiserSpacing) - onValueModified: value => { - root.visualiserSpacing = value; - root.saveConfig(); - } + SpinBoxRow { + label: qsTr("Visualiser spacing") + min: 0 + max: 10 + value: Math.round(root.visualiserSpacing) + onValueModified: value => { + root.visualiserSpacing = value; + root.saveConfig(); } } } diff --git a/modules/controlcenter/ethernet/EthernetList.qml b/modules/controlcenter/ethernet/EthernetList.qml index ff7cee2..8b04c09 100644 --- a/modules/controlcenter/ethernet/EthernetList.qml +++ b/modules/controlcenter/ethernet/EthernetList.qml @@ -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 - } - } - } } diff --git a/modules/controlcenter/network/NetworkList.qml b/modules/controlcenter/network/NetworkList.qml index 60bd857..09d7352 100644 --- a/modules/controlcenter/network/NetworkList.qml +++ b/modules/controlcenter/network/NetworkList.qml @@ -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 - } - } - } } diff --git a/modules/controlcenter/taskbar/TaskbarPane.qml b/modules/controlcenter/taskbar/TaskbarPane.qml index 22414c7..2bb50d8 100644 --- a/modules/controlcenter/taskbar/TaskbarPane.qml +++ b/modules/controlcenter/taskbar/TaskbarPane.qml @@ -239,73 +239,12 @@ RowLayout { } } - Item { + CollapsibleSection { id: clockSection - Layout.fillWidth: true - Layout.preferredHeight: clockSectionHeader.implicitHeight - property bool expanded: false - - ColumnLayout { - id: clockSectionHeader - 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: qsTr("Clock") - font.pointSize: Appearance.font.size.larger - font.weight: 500 - } - - Item { - Layout.fillWidth: true - } - - MaterialIcon { - text: "expand_more" - rotation: clockSection.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 { - const wasExpanded = clockSection.expanded; - root.collapseAllSections(clockSection); - clockSection.expanded = !wasExpanded; - } - } - - StyledText { - visible: clockSection.expanded - text: qsTr("Clock display settings") - color: Colours.palette.m3outline - Layout.fillWidth: true - } - } - } - - StyledRect { - Layout.fillWidth: true - visible: clockSection.expanded - implicitHeight: clockSection.expanded ? clockRow.implicitHeight + Appearance.padding.large * 2 : 0 - - radius: Appearance.rounding.normal - color: Colours.tPalette.m3surfaceContainer - - Behavior on implicitHeight { - Anim {} + title: qsTr("Clock") + description: qsTr("Clock display settings") + onToggleRequested: { + root.collapseAllSections(clockSection); } RowLayout { @@ -333,835 +272,319 @@ RowLayout { } } - Item { + CollapsibleSection { id: barBehaviorSection - Layout.fillWidth: true - Layout.preferredHeight: barBehaviorSectionHeader.implicitHeight - property bool expanded: false - - ColumnLayout { - id: barBehaviorSectionHeader - 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: qsTr("Bar Behavior") - font.pointSize: Appearance.font.size.larger - font.weight: 500 - } - - Item { - Layout.fillWidth: true - } - - MaterialIcon { - text: "expand_more" - rotation: barBehaviorSection.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 { - const wasExpanded = barBehaviorSection.expanded; - root.collapseAllSections(barBehaviorSection); - barBehaviorSection.expanded = !wasExpanded; - } - } + title: qsTr("Bar Behavior") + onToggleRequested: { + root.collapseAllSections(barBehaviorSection); } - } - - StyledRect { - visible: barBehaviorSection.expanded - Layout.fillWidth: true - Layout.topMargin: Appearance.spacing.small / 2 - implicitHeight: barBehaviorSection.expanded ? persistentRow.implicitHeight + Appearance.padding.large * 2 : 0 - radius: Appearance.rounding.normal - color: Colours.tPalette.m3surfaceContainer - - Behavior on implicitHeight { - Anim {} - } - - RowLayout { - id: persistentRow - 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: qsTr("Persistent") - } - StyledSwitch { - checked: root.persistent - onToggled: { - root.persistent = checked; - root.saveConfig(); - } + SwitchRow { + label: qsTr("Persistent") + checked: root.persistent + onToggled: checked => { + root.persistent = checked; + root.saveConfig(); } } - } - - StyledRect { - visible: barBehaviorSection.expanded - Layout.fillWidth: true - Layout.topMargin: Appearance.spacing.small / 2 - implicitHeight: barBehaviorSection.expanded ? showOnHoverRow.implicitHeight + Appearance.padding.large * 2 : 0 - radius: Appearance.rounding.normal - color: Colours.tPalette.m3surfaceContainer - - Behavior on implicitHeight { - Anim {} - } - - RowLayout { - id: showOnHoverRow - 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: qsTr("Show on hover") - } - StyledSwitch { - checked: root.showOnHover - onToggled: { - root.showOnHover = checked; - root.saveConfig(); - } + SwitchRow { + label: qsTr("Show on hover") + checked: root.showOnHover + onToggled: checked => { + root.showOnHover = checked; + root.saveConfig(); } } - } - - StyledRect { - visible: barBehaviorSection.expanded - Layout.fillWidth: true - Layout.topMargin: Appearance.spacing.small / 2 - implicitHeight: barBehaviorSection.expanded ? dragThresholdRow.implicitHeight + Appearance.padding.large * 2 : 0 - radius: Appearance.rounding.normal - color: Colours.tPalette.m3surfaceContainer - - Behavior on implicitHeight { - Anim {} - } - RowLayout { - id: dragThresholdRow - 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: qsTr("Drag threshold") - } - - CustomSpinBox { - min: 0 - max: 100 - value: root.dragThreshold - onValueModified: value => { - root.dragThreshold = value; - root.saveConfig(); - } + SpinBoxRow { + label: qsTr("Drag threshold") + min: 0 + max: 100 + value: root.dragThreshold + onValueModified: value => { + root.dragThreshold = value; + root.saveConfig(); } } } - Item { + CollapsibleSection { id: statusIconsSection - Layout.fillWidth: true - Layout.preferredHeight: statusIconsSectionHeader.implicitHeight - property bool expanded: false - - ColumnLayout { - id: statusIconsSectionHeader - 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: qsTr("Status Icons") - font.pointSize: Appearance.font.size.larger - font.weight: 500 - } - - Item { - Layout.fillWidth: true - } - - MaterialIcon { - text: "expand_more" - rotation: statusIconsSection.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 { - const wasExpanded = statusIconsSection.expanded; - root.collapseAllSections(statusIconsSection); - statusIconsSection.expanded = !wasExpanded; - } - } + title: qsTr("Status Icons") + onToggleRequested: { + root.collapseAllSections(statusIconsSection); } - } - - StyledRect { - visible: statusIconsSection.expanded - Layout.fillWidth: true - Layout.topMargin: Appearance.spacing.small / 2 - implicitHeight: statusIconsSection.expanded ? showAudioRow.implicitHeight + Appearance.padding.large * 2 : 0 - radius: Appearance.rounding.normal - color: Colours.tPalette.m3surfaceContainer - - Behavior on implicitHeight { - Anim {} - } - - RowLayout { - id: showAudioRow - 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: qsTr("Show audio") - } - StyledSwitch { - checked: root.showAudio - onToggled: { - root.showAudio = checked; - root.saveConfig(); - } + SwitchRow { + label: qsTr("Show audio") + checked: root.showAudio + onToggled: checked => { + root.showAudio = checked; + root.saveConfig(); } } - } - - StyledRect { - visible: statusIconsSection.expanded - Layout.fillWidth: true - Layout.topMargin: Appearance.spacing.small / 2 - implicitHeight: statusIconsSection.expanded ? showMicrophoneRow.implicitHeight + Appearance.padding.large * 2 : 0 - radius: Appearance.rounding.normal - color: Colours.tPalette.m3surfaceContainer - - Behavior on implicitHeight { - Anim {} - } - RowLayout { - id: showMicrophoneRow - 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: qsTr("Show microphone") + SwitchRow { + label: qsTr("Show microphone") + checked: root.showMicrophone + onToggled: checked => { + root.showMicrophone = checked; + root.saveConfig(); } - - StyledSwitch { - checked: root.showMicrophone - onToggled: { - root.showMicrophone = checked; - root.saveConfig(); - } - } - } - } - - StyledRect { - visible: statusIconsSection.expanded - Layout.fillWidth: true - Layout.topMargin: Appearance.spacing.small / 2 - implicitHeight: statusIconsSection.expanded ? showKbLayoutRow.implicitHeight + Appearance.padding.large * 2 : 0 - radius: Appearance.rounding.normal - color: Colours.tPalette.m3surfaceContainer - - Behavior on implicitHeight { - Anim {} } - RowLayout { - id: showKbLayoutRow - 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: qsTr("Show keyboard layout") + SwitchRow { + label: qsTr("Show keyboard layout") + checked: root.showKbLayout + onToggled: checked => { + root.showKbLayout = checked; + root.saveConfig(); } + } - StyledSwitch { - checked: root.showKbLayout - onToggled: { - root.showKbLayout = checked; - root.saveConfig(); - } + SwitchRow { + label: qsTr("Show network") + checked: root.showNetwork + onToggled: checked => { + root.showNetwork = checked; + root.saveConfig(); } } - } - StyledRect { - visible: statusIconsSection.expanded - Layout.fillWidth: true - Layout.topMargin: Appearance.spacing.small / 2 - implicitHeight: statusIconsSection.expanded ? showNetworkRow.implicitHeight + Appearance.padding.large * 2 : 0 - radius: Appearance.rounding.normal - color: Colours.tPalette.m3surfaceContainer - - Behavior on implicitHeight { - Anim {} + SwitchRow { + label: qsTr("Show bluetooth") + checked: root.showBluetooth + onToggled: checked => { + root.showBluetooth = checked; + root.saveConfig(); + } } - RowLayout { - id: showNetworkRow - 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: qsTr("Show network") + SwitchRow { + label: qsTr("Show battery") + checked: root.showBattery + onToggled: checked => { + root.showBattery = checked; + root.saveConfig(); } + } - StyledSwitch { - checked: root.showNetwork - onToggled: { - root.showNetwork = checked; - root.saveConfig(); - } + SwitchRow { + label: qsTr("Show lock status") + checked: root.showLockStatus + onToggled: checked => { + root.showLockStatus = checked; + root.saveConfig(); } } } - StyledRect { - visible: statusIconsSection.expanded - Layout.fillWidth: true - Layout.topMargin: Appearance.spacing.small / 2 - implicitHeight: statusIconsSection.expanded ? showBluetoothRow.implicitHeight + Appearance.padding.large * 2 : 0 - radius: Appearance.rounding.normal - color: Colours.tPalette.m3surfaceContainer - - Behavior on implicitHeight { - Anim {} + CollapsibleSection { + id: traySettingsSection + title: qsTr("Tray Settings") + onToggleRequested: { + root.collapseAllSections(traySettingsSection); } - RowLayout { - id: showBluetoothRow - 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: qsTr("Show bluetooth") + SwitchRow { + label: qsTr("Background") + checked: root.trayBackground + onToggled: checked => { + root.trayBackground = checked; + root.saveConfig(); } - - StyledSwitch { - checked: root.showBluetooth - onToggled: { - root.showBluetooth = checked; - root.saveConfig(); - } - } - } - } - - StyledRect { - visible: statusIconsSection.expanded - Layout.fillWidth: true - Layout.topMargin: Appearance.spacing.small / 2 - implicitHeight: statusIconsSection.expanded ? showBatteryRow.implicitHeight + Appearance.padding.large * 2 : 0 - radius: Appearance.rounding.normal - color: Colours.tPalette.m3surfaceContainer - - Behavior on implicitHeight { - Anim {} } - RowLayout { - id: showBatteryRow - 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: qsTr("Show battery") + SwitchRow { + label: qsTr("Compact") + checked: root.trayCompact + onToggled: checked => { + root.trayCompact = checked; + root.saveConfig(); } + } - StyledSwitch { - checked: root.showBattery - onToggled: { - root.showBattery = checked; - root.saveConfig(); - } + SwitchRow { + label: qsTr("Recolour") + checked: root.trayRecolour + onToggled: checked => { + root.trayRecolour = checked; + root.saveConfig(); } } } - StyledRect { - visible: statusIconsSection.expanded - Layout.fillWidth: true - Layout.topMargin: Appearance.spacing.small / 2 - implicitHeight: statusIconsSection.expanded ? showLockStatusRow.implicitHeight + Appearance.padding.large * 2 : 0 - radius: Appearance.rounding.normal - color: Colours.tPalette.m3surfaceContainer - - Behavior on implicitHeight { - Anim {} + CollapsibleSection { + id: workspacesSection + title: qsTr("Workspaces") + onToggleRequested: { + root.collapseAllSections(workspacesSection); } - RowLayout { - id: showLockStatusRow - 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: qsTr("Show lock status") - } + StyledRect { + Layout.fillWidth: true + implicitHeight: workspacesShownRow.implicitHeight + Appearance.padding.large * 2 + radius: Appearance.rounding.normal + color: Colours.tPalette.m3surfaceContainer - StyledSwitch { - checked: root.showLockStatus - onToggled: { - root.showLockStatus = checked; - root.saveConfig(); - } + Behavior on implicitHeight { + Anim {} } - } - } - - Item { - id: traySettingsSection - Layout.fillWidth: true - Layout.preferredHeight: traySettingsSectionHeader.implicitHeight - property bool expanded: false - - ColumnLayout { - id: traySettingsSectionHeader - anchors.left: parent.left - anchors.right: parent.right - spacing: Appearance.spacing.small RowLayout { - Layout.fillWidth: true - spacing: Appearance.spacing.small + id: workspacesShownRow + anchors.left: parent.left + anchors.right: parent.right + anchors.verticalCenter: parent.verticalCenter + anchors.margins: Appearance.padding.large + spacing: Appearance.spacing.normal StyledText { - Layout.topMargin: Appearance.spacing.large - text: qsTr("Tray Settings") - font.pointSize: Appearance.font.size.larger - font.weight: 500 - } - - Item { Layout.fillWidth: true + text: qsTr("Shown") } - MaterialIcon { - text: "expand_more" - rotation: traySettingsSection.expanded ? 180 : 0 - color: Colours.palette.m3onSurface - Behavior on rotation { - Anim {} + CustomSpinBox { + min: 1 + max: 20 + value: root.workspacesShown + onValueModified: value => { + root.workspacesShown = value; + root.saveConfig(); } } } - - StateLayer { - anchors.fill: parent - anchors.leftMargin: -Appearance.padding.normal - anchors.rightMargin: -Appearance.padding.normal - function onClicked(): void { - const wasExpanded = traySettingsSection.expanded; - root.collapseAllSections(traySettingsSection); - traySettingsSection.expanded = !wasExpanded; - } - } } - } - - StyledRect { - visible: traySettingsSection.expanded - Layout.fillWidth: true - Layout.topMargin: Appearance.spacing.small / 2 - implicitHeight: traySettingsSection.expanded ? trayBackgroundRow.implicitHeight + Appearance.padding.large * 2 : 0 - radius: Appearance.rounding.normal - color: Colours.tPalette.m3surfaceContainer - - Behavior on implicitHeight { - Anim {} - } - - RowLayout { - id: trayBackgroundRow - 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: qsTr("Background") - } + StyledRect { + Layout.fillWidth: true + implicitHeight: workspacesActiveIndicatorRow.implicitHeight + Appearance.padding.large * 2 + radius: Appearance.rounding.normal + color: Colours.tPalette.m3surfaceContainer - StyledSwitch { - checked: root.trayBackground - onToggled: { - root.trayBackground = checked; - root.saveConfig(); - } + Behavior on implicitHeight { + Anim {} } - } - } - - StyledRect { - visible: traySettingsSection.expanded - Layout.fillWidth: true - Layout.topMargin: Appearance.spacing.small / 2 - implicitHeight: traySettingsSection.expanded ? trayCompactRow.implicitHeight + Appearance.padding.large * 2 : 0 - radius: Appearance.rounding.normal - color: Colours.tPalette.m3surfaceContainer - Behavior on implicitHeight { - Anim {} - } - - RowLayout { - id: trayCompactRow - 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: qsTr("Compact") - } + RowLayout { + id: workspacesActiveIndicatorRow + anchors.left: parent.left + anchors.right: parent.right + anchors.verticalCenter: parent.verticalCenter + anchors.margins: Appearance.padding.large + spacing: Appearance.spacing.normal - StyledSwitch { - checked: root.trayCompact - onToggled: { - root.trayCompact = checked; - root.saveConfig(); + StyledText { + Layout.fillWidth: true + text: qsTr("Active indicator") } - } - } - } - - StyledRect { - visible: traySettingsSection.expanded - Layout.fillWidth: true - Layout.topMargin: Appearance.spacing.small / 2 - implicitHeight: traySettingsSection.expanded ? trayRecolourRow.implicitHeight + Appearance.padding.large * 2 : 0 - radius: Appearance.rounding.normal - color: Colours.tPalette.m3surfaceContainer - - Behavior on implicitHeight { - Anim {} - } - RowLayout { - id: trayRecolourRow - 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: qsTr("Recolour") - } - - StyledSwitch { - checked: root.trayRecolour - onToggled: { - root.trayRecolour = checked; - root.saveConfig(); + StyledSwitch { + checked: root.workspacesActiveIndicator + onToggled: { + root.workspacesActiveIndicator = checked; + root.saveConfig(); + } } } } - } - Item { - id: workspacesSection - Layout.fillWidth: true - Layout.preferredHeight: workspacesSectionHeader.implicitHeight - property bool expanded: false + StyledRect { + Layout.fillWidth: true + implicitHeight: workspacesOccupiedBgRow.implicitHeight + Appearance.padding.large * 2 + radius: Appearance.rounding.normal + color: Colours.tPalette.m3surfaceContainer - ColumnLayout { - id: workspacesSectionHeader - anchors.left: parent.left - anchors.right: parent.right - spacing: Appearance.spacing.small + Behavior on implicitHeight { + Anim {} + } RowLayout { - Layout.fillWidth: true - spacing: Appearance.spacing.small + id: workspacesOccupiedBgRow + anchors.left: parent.left + anchors.right: parent.right + anchors.verticalCenter: parent.verticalCenter + anchors.margins: Appearance.padding.large + spacing: Appearance.spacing.normal StyledText { - Layout.topMargin: Appearance.spacing.large - text: qsTr("Workspaces") - font.pointSize: Appearance.font.size.larger - font.weight: 500 - } - - Item { Layout.fillWidth: true + text: qsTr("Occupied background") } - MaterialIcon { - text: "expand_more" - rotation: workspacesSection.expanded ? 180 : 0 - color: Colours.palette.m3onSurface - Behavior on rotation { - Anim {} + StyledSwitch { + checked: root.workspacesOccupiedBg + onToggled: { + root.workspacesOccupiedBg = checked; + root.saveConfig(); } } } - - StateLayer { - anchors.fill: parent - anchors.leftMargin: -Appearance.padding.normal - anchors.rightMargin: -Appearance.padding.normal - function onClicked(): void { - const wasExpanded = workspacesSection.expanded; - root.collapseAllSections(workspacesSection); - workspacesSection.expanded = !wasExpanded; - } - } } - } - StyledRect { - visible: workspacesSection.expanded - Layout.fillWidth: true - Layout.topMargin: Appearance.spacing.small / 2 - implicitHeight: workspacesSection.expanded ? workspacesShownRow.implicitHeight + Appearance.padding.large * 2 : 0 - radius: Appearance.rounding.normal - color: Colours.tPalette.m3surfaceContainer - - Behavior on implicitHeight { - Anim {} - } - - RowLayout { - id: workspacesShownRow - 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: qsTr("Shown") - } + StyledRect { + Layout.fillWidth: true + implicitHeight: workspacesShowWindowsRow.implicitHeight + Appearance.padding.large * 2 + radius: Appearance.rounding.normal + color: Colours.tPalette.m3surfaceContainer - CustomSpinBox { - min: 1 - max: 20 - value: root.workspacesShown - onValueModified: value => { - root.workspacesShown = value; - root.saveConfig(); - } + Behavior on implicitHeight { + Anim {} } - } - } - StyledRect { - visible: workspacesSection.expanded - Layout.fillWidth: true - Layout.topMargin: Appearance.spacing.small / 2 - implicitHeight: workspacesSection.expanded ? workspacesActiveIndicatorRow.implicitHeight + Appearance.padding.large * 2 : 0 - radius: Appearance.rounding.normal - color: Colours.tPalette.m3surfaceContainer - - Behavior on implicitHeight { - Anim {} - } - - RowLayout { - id: workspacesActiveIndicatorRow - 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: qsTr("Active indicator") - } + RowLayout { + id: workspacesShowWindowsRow + anchors.left: parent.left + anchors.right: parent.right + anchors.verticalCenter: parent.verticalCenter + anchors.margins: Appearance.padding.large + spacing: Appearance.spacing.normal - StyledSwitch { - checked: root.workspacesActiveIndicator - onToggled: { - root.workspacesActiveIndicator = checked; - root.saveConfig(); + StyledText { + Layout.fillWidth: true + text: qsTr("Show windows") } - } - } - } - - StyledRect { - visible: workspacesSection.expanded - Layout.fillWidth: true - Layout.topMargin: Appearance.spacing.small / 2 - implicitHeight: workspacesSection.expanded ? workspacesOccupiedBgRow.implicitHeight + Appearance.padding.large * 2 : 0 - radius: Appearance.rounding.normal - color: Colours.tPalette.m3surfaceContainer - - Behavior on implicitHeight { - Anim {} - } - - RowLayout { - id: workspacesOccupiedBgRow - 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: qsTr("Occupied background") - } - StyledSwitch { - checked: root.workspacesOccupiedBg - onToggled: { - root.workspacesOccupiedBg = checked; - root.saveConfig(); + StyledSwitch { + checked: root.workspacesShowWindows + onToggled: { + root.workspacesShowWindows = checked; + root.saveConfig(); + } } } } - } - StyledRect { - visible: workspacesSection.expanded - Layout.fillWidth: true - Layout.topMargin: Appearance.spacing.small / 2 - implicitHeight: workspacesSection.expanded ? workspacesShowWindowsRow.implicitHeight + Appearance.padding.large * 2 : 0 - radius: Appearance.rounding.normal - color: Colours.tPalette.m3surfaceContainer - - Behavior on implicitHeight { - Anim {} - } - - RowLayout { - id: workspacesShowWindowsRow - 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: qsTr("Show windows") - } + StyledRect { + Layout.fillWidth: true + implicitHeight: workspacesPerMonitorRow.implicitHeight + Appearance.padding.large * 2 + radius: Appearance.rounding.normal + color: Colours.tPalette.m3surfaceContainer - StyledSwitch { - checked: root.workspacesShowWindows - onToggled: { - root.workspacesShowWindows = checked; - root.saveConfig(); - } + Behavior on implicitHeight { + Anim {} } - } - } - StyledRect { - visible: workspacesSection.expanded - Layout.fillWidth: true - Layout.topMargin: Appearance.spacing.small / 2 - implicitHeight: workspacesSection.expanded ? workspacesPerMonitorRow.implicitHeight + Appearance.padding.large * 2 : 0 - radius: Appearance.rounding.normal - color: Colours.tPalette.m3surfaceContainer - - Behavior on implicitHeight { - Anim {} - } - - RowLayout { - id: workspacesPerMonitorRow - anchors.left: parent.left - anchors.right: parent.right - anchors.verticalCenter: parent.verticalCenter - anchors.margins: Appearance.padding.large - spacing: Appearance.spacing.normal + RowLayout { + id: workspacesPerMonitorRow + 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: qsTr("Per monitor workspaces") - } + StyledText { + Layout.fillWidth: true + text: qsTr("Per monitor workspaces") + } - StyledSwitch { - checked: root.workspacesPerMonitor - onToggled: { - root.workspacesPerMonitor = checked; - root.saveConfig(); + StyledSwitch { + checked: root.workspacesPerMonitor + onToggled: { + root.workspacesPerMonitor = checked; + root.saveConfig(); + } } } } |