summaryrefslogtreecommitdiff
path: root/modules
diff options
context:
space:
mode:
authorATMDA <atdma2600@gmail.com>2025-11-12 15:58:42 -0500
committerATMDA <atdma2600@gmail.com>2025-11-12 15:58:42 -0500
commite92187293e4afa046ca05bd80796c1fa193097e5 (patch)
treecc9fae7544271ff03c3eb2515bc8daa0c9e1cdcd /modules
parentnotifs/toasts: reworked notifications and toasts and how they display and wor... (diff)
downloadcaelestia-shell-e92187293e4afa046ca05bd80796c1fa193097e5.tar.gz
caelestia-shell-e92187293e4afa046ca05bd80796c1fa193097e5.tar.bz2
caelestia-shell-e92187293e4afa046ca05bd80796c1fa193097e5.zip
controlcenter: refactoring into components
Diffstat (limited to 'modules')
-rw-r--r--modules/controlcenter/appearance/AppearancePane.qml1872
-rw-r--r--modules/controlcenter/ethernet/EthernetList.qml77
-rw-r--r--modules/controlcenter/network/NetworkList.qml81
-rw-r--r--modules/controlcenter/taskbar/TaskbarPane.qml1013
4 files changed, 749 insertions, 2294 deletions
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();
+ }
}
}
}
generated by cgit v1.2.3-freya (git 2.51.1) at 2026-01-20 07:00:52 +0000