summaryrefslogtreecommitdiff
path: root/modules/controlcenter/appearance/AppearancePane.qml
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/controlcenter/appearance/AppearancePane.qml
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/controlcenter/appearance/AppearancePane.qml')
-rw-r--r--modules/controlcenter/appearance/AppearancePane.qml1872
1 files changed, 527 insertions, 1345 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();
}
}
}
generated by cgit v1.2.3-freya (git 2.51.1) at 2026-01-20 09:46:06 +0000