diff options
| -rw-r--r-- | modules/controlcenter/appearance/AppearancePane.qml | 1184 |
1 files changed, 596 insertions, 588 deletions
diff --git a/modules/controlcenter/appearance/AppearancePane.qml b/modules/controlcenter/appearance/AppearancePane.qml index 6f77d25..1e81205 100644 --- a/modules/controlcenter/appearance/AppearancePane.qml +++ b/modules/controlcenter/appearance/AppearancePane.qml @@ -48,15 +48,24 @@ RowLayout { spacing: 0 function collapseAllSections(exceptSection) { - if (exceptSection !== themeModeSection) themeModeSection.expanded = false; - if (exceptSection !== colorVariantSection) colorVariantSection.expanded = false; - if (exceptSection !== colorSchemeSection) colorSchemeSection.expanded = false; - if (exceptSection !== animationsSection) animationsSection.expanded = false; - if (exceptSection !== fontsSection) fontsSection.expanded = false; - if (exceptSection !== scalesSection) scalesSection.expanded = false; - if (exceptSection !== transparencySection) transparencySection.expanded = false; - if (exceptSection !== borderSection) borderSection.expanded = false; - if (exceptSection !== backgroundSection) backgroundSection.expanded = false; + if (exceptSection !== themeModeSection) + themeModeSection.expanded = false; + if (exceptSection !== colorVariantSection) + colorVariantSection.expanded = false; + if (exceptSection !== colorSchemeSection) + colorSchemeSection.expanded = false; + if (exceptSection !== animationsSection) + animationsSection.expanded = false; + if (exceptSection !== fontsSection) + fontsSection.expanded = false; + if (exceptSection !== scalesSection) + scalesSection.expanded = false; + if (exceptSection !== transparencySection) + transparencySection.expanded = false; + if (exceptSection !== borderSection) + borderSection.expanded = false; + if (exceptSection !== backgroundSection) + backgroundSection.expanded = false; } function saveConfig() { @@ -123,712 +132,712 @@ RowLayout { spacing: Appearance.spacing.small - RowLayout { - spacing: Appearance.spacing.smaller + RowLayout { + spacing: Appearance.spacing.smaller - StyledText { - text: qsTr("Settings") - font.pointSize: Appearance.font.size.large - font.weight: 500 - } + StyledText { + text: qsTr("Settings") + font.pointSize: Appearance.font.size.large + font.weight: 500 + } - Item { - Layout.fillWidth: true + Item { + Layout.fillWidth: true + } } - } - CollapsibleSection { - id: themeModeSection - title: qsTr("Theme mode") - description: qsTr("Light or dark theme") - onToggleRequested: { - root.collapseAllSections(themeModeSection); - } + CollapsibleSection { + id: themeModeSection + title: qsTr("Theme mode") + description: qsTr("Light or dark theme") + onToggleRequested: { + root.collapseAllSections(themeModeSection); + } - SwitchRow { - label: qsTr("Dark mode") - checked: !Colours.currentLight - onToggled: checked => { - Colours.setMode(checked ? "dark" : "light"); + SwitchRow { + label: qsTr("Dark mode") + checked: !Colours.currentLight + onToggled: checked => { + Colours.setMode(checked ? "dark" : "light"); + } } } - } - CollapsibleSection { - id: colorVariantSection - title: qsTr("Color variant") - description: qsTr("Material theme variant") - onToggleRequested: { - root.collapseAllSections(colorVariantSection); - } + CollapsibleSection { + id: colorVariantSection + title: qsTr("Color variant") + description: qsTr("Material theme variant") + onToggleRequested: { + root.collapseAllSections(colorVariantSection); + } - StyledListView { - Layout.fillWidth: true - implicitHeight: colorVariantSection.expanded ? Math.min(400, M3Variants.list.length * 60) : 0 + StyledListView { + Layout.fillWidth: true + implicitHeight: colorVariantSection.expanded ? Math.min(400, M3Variants.list.length * 60) : 0 - model: M3Variants.list - spacing: Appearance.spacing.small / 2 - clip: true + model: M3Variants.list + spacing: Appearance.spacing.small / 2 + clip: true - StyledScrollBar.vertical: StyledScrollBar { - flickable: parent - } + StyledScrollBar.vertical: StyledScrollBar { + flickable: parent + } - delegate: StyledRect { - required property var modelData + delegate: StyledRect { + required property var modelData - width: parent ? parent.width : 0 + width: parent ? parent.width : 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 + 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 - StateLayer { - function onClicked(): void { - const variant = modelData.variant; + StateLayer { + function onClicked(): void { + const variant = modelData.variant; - // Optimistic update - set immediately - Schemes.currentVariant = variant; + // Optimistic update - set immediately + Schemes.currentVariant = variant; - // Execute the command - Quickshell.execDetached(["caelestia", "scheme", "set", "-v", variant]); + // Execute the command + Quickshell.execDetached(["caelestia", "scheme", "set", "-v", variant]); - // Reload after a delay to confirm - Qt.callLater(() => { - reloadTimer.restart(); - }); + // Reload after a delay to confirm + Qt.callLater(() => { + reloadTimer.restart(); + }); + } } - } - Timer { - id: reloadTimer - interval: 300 - onTriggered: { - Schemes.reload(); + Timer { + id: reloadTimer + interval: 300 + onTriggered: { + Schemes.reload(); + } } - } - RowLayout { - id: variantRow + RowLayout { + id: variantRow - 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 - MaterialIcon { - text: modelData.icon - font.pointSize: Appearance.font.size.large - fill: modelData.variant === Schemes.currentVariant ? 1 : 0 - } + MaterialIcon { + text: modelData.icon + font.pointSize: Appearance.font.size.large + fill: modelData.variant === Schemes.currentVariant ? 1 : 0 + } - StyledText { - Layout.fillWidth: true - text: modelData.name - font.weight: modelData.variant === Schemes.currentVariant ? 500 : 400 - } + StyledText { + Layout.fillWidth: true + text: modelData.name + font.weight: modelData.variant === Schemes.currentVariant ? 500 : 400 + } - MaterialIcon { - visible: modelData.variant === Schemes.currentVariant - text: "check" - color: Colours.palette.m3primary - font.pointSize: Appearance.font.size.large + MaterialIcon { + visible: modelData.variant === Schemes.currentVariant + text: "check" + color: Colours.palette.m3primary + font.pointSize: Appearance.font.size.large + } } - } - implicitHeight: variantRow.implicitHeight + Appearance.padding.normal * 2 + implicitHeight: variantRow.implicitHeight + Appearance.padding.normal * 2 + } } } - } - CollapsibleSection { - id: colorSchemeSection - title: qsTr("Color scheme") - description: qsTr("Available color schemes") - onToggleRequested: { - root.collapseAllSections(colorSchemeSection); - } + CollapsibleSection { + id: colorSchemeSection + title: qsTr("Color scheme") + description: qsTr("Available color schemes") + onToggleRequested: { + root.collapseAllSections(colorSchemeSection); + } - StyledListView { - Layout.fillWidth: true - implicitHeight: colorSchemeSection.expanded ? Math.min(400, Schemes.list.length * 80) : 0 + StyledListView { + Layout.fillWidth: true + implicitHeight: colorSchemeSection.expanded ? Math.min(400, Schemes.list.length * 80) : 0 - model: Schemes.list - spacing: Appearance.spacing.small / 2 - clip: true + model: Schemes.list + spacing: Appearance.spacing.small / 2 + clip: true - StyledScrollBar.vertical: StyledScrollBar { - flickable: parent - } + StyledScrollBar.vertical: StyledScrollBar { + flickable: parent + } - delegate: StyledRect { - required property var modelData + delegate: StyledRect { + required property var modelData - width: parent ? parent.width : 0 + width: parent ? parent.width : 0 - readonly property string schemeKey: `${modelData.name} ${modelData.flavour}` - readonly property bool isCurrent: schemeKey === Schemes.currentScheme + readonly property string schemeKey: `${modelData.name} ${modelData.flavour}` + readonly property bool isCurrent: schemeKey === Schemes.currentScheme - 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 + 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}`; + StateLayer { + function onClicked(): void { + const name = modelData.name; + const flavour = modelData.flavour; + const schemeKey = `${name} ${flavour}`; - // Optimistic update - set immediately - Schemes.currentScheme = schemeKey; + // Optimistic update - set immediately + Schemes.currentScheme = schemeKey; - // Execute the command - Quickshell.execDetached(["caelestia", "scheme", "set", "-n", name, "-f", flavour]); + // Execute the command + Quickshell.execDetached(["caelestia", "scheme", "set", "-n", name, "-f", flavour]); - // Reload after a delay to confirm - Qt.callLater(() => { - reloadTimer.restart(); - }); + // Reload after a delay to confirm + Qt.callLater(() => { + reloadTimer.restart(); + }); + } } - } - Timer { - id: reloadTimer - interval: 300 - onTriggered: { - Schemes.reload(); + Timer { + id: reloadTimer + interval: 300 + onTriggered: { + Schemes.reload(); + } } - } - - RowLayout { - id: schemeRow - - anchors.fill: parent - anchors.margins: Appearance.padding.normal - spacing: Appearance.spacing.normal + RowLayout { + id: schemeRow - StyledRect { - id: preview + anchors.fill: parent + anchors.margins: Appearance.padding.normal - Layout.alignment: Qt.AlignVCenter + spacing: Appearance.spacing.normal - border.width: 1 - border.color: Qt.alpha(`#${modelData.colours?.outline}`, 0.5) + StyledRect { + id: preview - color: `#${modelData.colours?.surface}` - radius: Appearance.rounding.full - implicitWidth: iconPlaceholder.implicitWidth - implicitHeight: iconPlaceholder.implicitWidth + Layout.alignment: Qt.AlignVCenter - MaterialIcon { - id: iconPlaceholder - visible: false - text: "circle" - font.pointSize: Appearance.font.size.large - } + border.width: 1 + border.color: Qt.alpha(`#${modelData.colours?.outline}`, 0.5) - Item { - anchors.top: parent.top - anchors.bottom: parent.bottom - anchors.right: parent.right + color: `#${modelData.colours?.surface}` + radius: Appearance.rounding.full + implicitWidth: iconPlaceholder.implicitWidth + implicitHeight: iconPlaceholder.implicitWidth - implicitWidth: parent.implicitWidth / 2 - clip: true + 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 + + StyledRect { + anchors.top: parent.top + anchors.bottom: parent.bottom + anchors.right: parent.right + + implicitWidth: preview.implicitWidth + color: `#${modelData.colours?.primary}` + radius: Appearance.rounding.full + } } } - } - Column { - Layout.fillWidth: true - spacing: 0 + Column { + Layout.fillWidth: true + spacing: 0 - StyledText { - text: modelData.flavour ?? "" - font.pointSize: Appearance.font.size.normal - } + StyledText { + text: modelData.flavour ?? "" + font.pointSize: Appearance.font.size.normal + } - StyledText { - text: modelData.name ?? "" - font.pointSize: Appearance.font.size.small - color: Colours.palette.m3outline + StyledText { + text: modelData.name ?? "" + font.pointSize: Appearance.font.size.small + color: Colours.palette.m3outline - elide: Text.ElideRight - anchors.left: parent.left - anchors.right: parent.right + elide: Text.ElideRight + anchors.left: parent.left + anchors.right: parent.right + } } - } - 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: schemeRow.implicitHeight + Appearance.padding.normal * 2 + implicitHeight: schemeRow.implicitHeight + Appearance.padding.normal * 2 + } } } - } - - CollapsibleSection { - id: animationsSection - title: qsTr("Animations") - onToggleRequested: { - root.collapseAllSections(animationsSection); - } - SpinBoxRow { - label: qsTr("Animation duration scale") - min: 0.1 - max: 5 - value: root.animDurationsScale - onValueModified: value => { - root.animDurationsScale = value; - root.saveConfig(); + CollapsibleSection { + id: animationsSection + title: qsTr("Animations") + onToggleRequested: { + root.collapseAllSections(animationsSection); } - } - } - - CollapsibleSection { - id: fontsSection - title: qsTr("Fonts") - onToggleRequested: { - root.collapseAllSections(fontsSection); - } - StyledText { - Layout.topMargin: Appearance.spacing.normal - text: qsTr("Material font family") - font.pointSize: Appearance.font.size.larger - font.weight: 500 + SpinBoxRow { + label: qsTr("Animation duration scale") + min: 0.1 + max: 5 + value: root.animDurationsScale + onValueModified: value => { + root.animDurationsScale = value; + root.saveConfig(); + } + } } - StyledListView { - Layout.fillWidth: true - implicitHeight: fontsSection.expanded ? Math.min(300, Qt.fontFamilies().length * 50) : 0 - - model: Qt.fontFamilies() - spacing: Appearance.spacing.small / 2 - clip: true - - StyledScrollBar.vertical: StyledScrollBar { - flickable: parent + CollapsibleSection { + id: fontsSection + title: qsTr("Fonts") + onToggleRequested: { + root.collapseAllSections(fontsSection); } - delegate: StyledRect { - required property string modelData + StyledText { + Layout.topMargin: Appearance.spacing.normal + text: qsTr("Material font family") + font.pointSize: Appearance.font.size.larger + font.weight: 500 + } - anchors.left: parent.left - anchors.right: parent.right + StyledListView { + Layout.fillWidth: true + implicitHeight: fontsSection.expanded ? Math.min(300, Qt.fontFamilies().length * 50) : 0 - 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 + 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 - StyledText { - text: modelData - font.pointSize: Appearance.font.size.normal + StateLayer { + function onClicked(): void { + root.fontFamilyMaterial = modelData; + root.saveConfig(); + } } - Item { - Layout.fillWidth: true - } + RowLayout { + id: fontFamilyMaterialRow - Loader { - active: isCurrent - asynchronous: true + anchors.left: parent.left + anchors.right: parent.right + anchors.verticalCenter: parent.verticalCenter + anchors.margins: Appearance.padding.normal - sourceComponent: MaterialIcon { - text: "check" - color: Colours.palette.m3onSurfaceVariant - font.pointSize: Appearance.font.size.large - } - } - } + spacing: Appearance.spacing.normal - implicitHeight: fontFamilyMaterialRow.implicitHeight + Appearance.padding.normal * 2 - } - } + StyledText { + text: modelData + font.pointSize: Appearance.font.size.normal + } - StyledText { - Layout.topMargin: Appearance.spacing.normal - text: qsTr("Monospace font family") - font.pointSize: Appearance.font.size.larger - font.weight: 500 - } + Item { + Layout.fillWidth: true + } - StyledListView { - Layout.fillWidth: true - implicitHeight: fontsSection.expanded ? Math.min(300, Qt.fontFamilies().length * 50) : 0 + Loader { + active: isCurrent + asynchronous: true - model: Qt.fontFamilies() - spacing: Appearance.spacing.small / 2 - clip: true + sourceComponent: MaterialIcon { + text: "check" + color: Colours.palette.m3onSurfaceVariant + font.pointSize: Appearance.font.size.large + } + } + } - StyledScrollBar.vertical: StyledScrollBar { - flickable: parent + implicitHeight: fontFamilyMaterialRow.implicitHeight + Appearance.padding.normal * 2 + } } - delegate: StyledRect { - required property string modelData + StyledText { + Layout.topMargin: Appearance.spacing.normal + text: qsTr("Monospace font family") + font.pointSize: Appearance.font.size.larger + font.weight: 500 + } - anchors.left: parent.left - anchors.right: parent.right + StyledListView { + Layout.fillWidth: true + implicitHeight: fontsSection.expanded ? Math.min(300, Qt.fontFamilies().length * 50) : 0 - 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 + model: Qt.fontFamilies() + spacing: Appearance.spacing.small / 2 + clip: true - StateLayer { - function onClicked(): void { - root.fontFamilyMono = modelData; - root.saveConfig(); - } + StyledScrollBar.vertical: StyledScrollBar { + flickable: parent } - RowLayout { - id: fontFamilyMonoRow + 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 + 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 - StyledText { - text: modelData - font.pointSize: Appearance.font.size.normal + StateLayer { + function onClicked(): void { + root.fontFamilyMono = modelData; + root.saveConfig(); + } } - Item { - Layout.fillWidth: true - } + RowLayout { + id: fontFamilyMonoRow - Loader { - active: isCurrent - asynchronous: true + anchors.left: parent.left + anchors.right: parent.right + anchors.verticalCenter: parent.verticalCenter + anchors.margins: Appearance.padding.normal - sourceComponent: MaterialIcon { - text: "check" - color: Colours.palette.m3onSurfaceVariant - font.pointSize: Appearance.font.size.large - } - } - } + spacing: Appearance.spacing.normal - implicitHeight: fontFamilyMonoRow.implicitHeight + Appearance.padding.normal * 2 - } - } + StyledText { + text: modelData + font.pointSize: Appearance.font.size.normal + } - StyledText { - Layout.topMargin: Appearance.spacing.normal - text: qsTr("Sans-serif font family") - font.pointSize: Appearance.font.size.larger - font.weight: 500 - } + Item { + Layout.fillWidth: true + } - StyledListView { - Layout.fillWidth: true - implicitHeight: fontsSection.expanded ? Math.min(300, Qt.fontFamilies().length * 50) : 0 + Loader { + active: isCurrent + asynchronous: true - model: Qt.fontFamilies() - spacing: Appearance.spacing.small / 2 - clip: true + sourceComponent: MaterialIcon { + text: "check" + color: Colours.palette.m3onSurfaceVariant + font.pointSize: Appearance.font.size.large + } + } + } - StyledScrollBar.vertical: StyledScrollBar { - flickable: parent + implicitHeight: fontFamilyMonoRow.implicitHeight + Appearance.padding.normal * 2 + } } - delegate: StyledRect { - required property string modelData + StyledText { + Layout.topMargin: Appearance.spacing.normal + text: qsTr("Sans-serif font family") + font.pointSize: Appearance.font.size.larger + font.weight: 500 + } - anchors.left: parent.left - anchors.right: parent.right + StyledListView { + Layout.fillWidth: true + implicitHeight: fontsSection.expanded ? Math.min(300, Qt.fontFamilies().length * 50) : 0 - 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 + 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 - StyledText { - text: modelData - font.pointSize: Appearance.font.size.normal + StateLayer { + function onClicked(): void { + root.fontFamilySans = modelData; + root.saveConfig(); + } } - Item { - Layout.fillWidth: true - } + RowLayout { + id: fontFamilySansRow + + anchors.left: parent.left + anchors.right: parent.right + anchors.verticalCenter: parent.verticalCenter + anchors.margins: Appearance.padding.normal - Loader { - active: isCurrent - asynchronous: true + spacing: Appearance.spacing.normal - sourceComponent: MaterialIcon { - text: "check" - color: Colours.palette.m3onSurfaceVariant - font.pointSize: Appearance.font.size.large + StyledText { + text: modelData + font.pointSize: Appearance.font.size.normal + } + + Item { + Layout.fillWidth: true + } + + Loader { + active: isCurrent + asynchronous: true + + sourceComponent: MaterialIcon { + text: "check" + color: Colours.palette.m3onSurfaceVariant + font.pointSize: Appearance.font.size.large + } } } - } - implicitHeight: fontFamilySansRow.implicitHeight + Appearance.padding.normal * 2 + implicitHeight: fontFamilySansRow.implicitHeight + Appearance.padding.normal * 2 + } } - } - SpinBoxRow { - label: qsTr("Font size scale") - min: 0.1 - max: 5 - value: root.fontSizeScale - onValueModified: value => { - root.fontSizeScale = value; - root.saveConfig(); + SpinBoxRow { + label: qsTr("Font size scale") + min: 0.1 + max: 5 + value: root.fontSizeScale + onValueModified: value => { + root.fontSizeScale = value; + root.saveConfig(); + } } } - } - CollapsibleSection { - id: scalesSection - title: qsTr("Scales") - onToggleRequested: { - root.collapseAllSections(scalesSection); - } + CollapsibleSection { + id: scalesSection + title: qsTr("Scales") + onToggleRequested: { + root.collapseAllSections(scalesSection); + } - SpinBoxRow { - label: qsTr("Padding scale") - min: 0.1 - max: 5 - value: root.paddingScale - onValueModified: value => { - root.paddingScale = value; - root.saveConfig(); + SpinBoxRow { + label: qsTr("Padding scale") + min: 0.1 + max: 5 + value: root.paddingScale + onValueModified: value => { + root.paddingScale = value; + root.saveConfig(); + } } - } - SpinBoxRow { - label: qsTr("Rounding scale") - min: 0.1 - max: 5 - value: root.roundingScale - onValueModified: value => { - root.roundingScale = value; - root.saveConfig(); + SpinBoxRow { + label: qsTr("Rounding scale") + min: 0.1 + max: 5 + value: root.roundingScale + onValueModified: value => { + root.roundingScale = value; + root.saveConfig(); + } } - } - SpinBoxRow { - label: qsTr("Spacing scale") - min: 0.1 - max: 5 - value: root.spacingScale - onValueModified: value => { - root.spacingScale = value; - root.saveConfig(); + SpinBoxRow { + label: qsTr("Spacing scale") + min: 0.1 + max: 5 + value: root.spacingScale + onValueModified: value => { + root.spacingScale = value; + root.saveConfig(); + } } } - } - CollapsibleSection { - id: transparencySection - title: qsTr("Transparency") - onToggleRequested: { - root.collapseAllSections(transparencySection); - } + CollapsibleSection { + id: transparencySection + title: qsTr("Transparency") + onToggleRequested: { + root.collapseAllSections(transparencySection); + } - SwitchRow { - label: qsTr("Transparency enabled") - checked: root.transparencyEnabled - onToggled: checked => { - root.transparencyEnabled = checked; - root.saveConfig(); + SwitchRow { + label: qsTr("Transparency enabled") + checked: root.transparencyEnabled + onToggled: checked => { + root.transparencyEnabled = checked; + root.saveConfig(); + } } - } - SpinBoxRow { - label: qsTr("Transparency base") - min: 0 - max: 1 - value: root.transparencyBase - onValueModified: value => { - root.transparencyBase = value; - root.saveConfig(); + SpinBoxRow { + label: qsTr("Transparency base") + min: 0 + max: 1 + value: root.transparencyBase + onValueModified: value => { + root.transparencyBase = value; + root.saveConfig(); + } } - } - SpinBoxRow { - label: qsTr("Transparency layers") - min: 0 - max: 1 - value: root.transparencyLayers - onValueModified: value => { - root.transparencyLayers = value; - root.saveConfig(); + SpinBoxRow { + label: qsTr("Transparency layers") + min: 0 + max: 1 + value: root.transparencyLayers + onValueModified: value => { + root.transparencyLayers = value; + root.saveConfig(); + } } } - } - CollapsibleSection { - id: borderSection - title: qsTr("Border") - onToggleRequested: { - root.collapseAllSections(borderSection); - } + CollapsibleSection { + id: borderSection + title: qsTr("Border") + onToggleRequested: { + root.collapseAllSections(borderSection); + } - SpinBoxRow { - label: qsTr("Border rounding") - min: 0.1 - max: 5 - value: root.borderRounding - onValueModified: value => { - root.borderRounding = value; - root.saveConfig(); + SpinBoxRow { + label: qsTr("Border rounding") + min: 0.1 + max: 5 + value: root.borderRounding + onValueModified: value => { + root.borderRounding = value; + root.saveConfig(); + } } - } - SpinBoxRow { - label: qsTr("Border thickness") - min: 0.1 - max: 5 - value: root.borderThickness - onValueModified: value => { - root.borderThickness = value; - root.saveConfig(); + SpinBoxRow { + label: qsTr("Border thickness") + min: 0.1 + max: 5 + value: root.borderThickness + onValueModified: value => { + root.borderThickness = value; + root.saveConfig(); + } } } - } - CollapsibleSection { - id: backgroundSection - title: qsTr("Background") - onToggleRequested: { - root.collapseAllSections(backgroundSection); - } + CollapsibleSection { + id: backgroundSection + title: qsTr("Background") + onToggleRequested: { + root.collapseAllSections(backgroundSection); + } - SwitchRow { - label: qsTr("Desktop clock") - checked: root.desktopClockEnabled - onToggled: checked => { - root.desktopClockEnabled = checked; - root.saveConfig(); + SwitchRow { + label: qsTr("Desktop clock") + checked: root.desktopClockEnabled + onToggled: checked => { + root.desktopClockEnabled = checked; + root.saveConfig(); + } } - } - SwitchRow { - label: qsTr("Background enabled") - checked: root.backgroundEnabled - onToggled: checked => { - root.backgroundEnabled = checked; - root.saveConfig(); + SwitchRow { + label: qsTr("Background enabled") + checked: root.backgroundEnabled + onToggled: checked => { + root.backgroundEnabled = checked; + root.saveConfig(); + } } - } - StyledText { - Layout.topMargin: Appearance.spacing.normal - text: qsTr("Visualiser") - font.pointSize: Appearance.font.size.larger - font.weight: 500 - } + StyledText { + Layout.topMargin: Appearance.spacing.normal + text: qsTr("Visualiser") + font.pointSize: Appearance.font.size.larger + font.weight: 500 + } - SwitchRow { - label: qsTr("Visualiser enabled") - checked: root.visualiserEnabled - onToggled: checked => { - root.visualiserEnabled = checked; - root.saveConfig(); + SwitchRow { + label: qsTr("Visualiser enabled") + checked: root.visualiserEnabled + onToggled: checked => { + root.visualiserEnabled = checked; + root.saveConfig(); + } } - } - SwitchRow { - label: qsTr("Visualiser auto hide") - checked: root.visualiserAutoHide - onToggled: checked => { - root.visualiserAutoHide = checked; - root.saveConfig(); + SwitchRow { + label: qsTr("Visualiser auto hide") + checked: root.visualiserAutoHide + onToggled: checked => { + root.visualiserAutoHide = checked; + root.saveConfig(); + } } - } - SpinBoxRow { - label: qsTr("Visualiser rounding") - min: 0 - max: 10 - value: Math.round(root.visualiserRounding) - onValueModified: value => { - root.visualiserRounding = value; - root.saveConfig(); + SpinBoxRow { + label: qsTr("Visualiser rounding") + min: 0 + max: 10 + value: Math.round(root.visualiserRounding) + onValueModified: value => { + root.visualiserRounding = value; + root.saveConfig(); + } } - } - SpinBoxRow { - label: qsTr("Visualiser spacing") - 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(); + } } } } - } } InnerBorder { @@ -862,34 +871,34 @@ RowLayout { spacing: Appearance.spacing.normal - MaterialIcon { - Layout.alignment: Qt.AlignHCenter - text: "palette" - font.pointSize: Appearance.font.size.extraLarge * 3 - font.bold: true - } + MaterialIcon { + Layout.alignment: Qt.AlignHCenter + text: "palette" + font.pointSize: Appearance.font.size.extraLarge * 3 + font.bold: true + } - StyledText { - Layout.alignment: Qt.AlignHCenter - text: qsTr("Appearance Settings") - font.pointSize: Appearance.font.size.large - font.bold: true - } + StyledText { + Layout.alignment: Qt.AlignHCenter + text: qsTr("Appearance Settings") + font.pointSize: Appearance.font.size.large + font.bold: true + } - StyledText { - Layout.topMargin: Appearance.spacing.large - Layout.alignment: Qt.AlignHCenter - text: qsTr("Wallpaper") - font.pointSize: Appearance.font.size.extraLarge - font.weight: 600 - } + StyledText { + Layout.topMargin: Appearance.spacing.large + Layout.alignment: Qt.AlignHCenter + text: qsTr("Wallpaper") + font.pointSize: Appearance.font.size.extraLarge + font.weight: 600 + } - StyledText { - Layout.alignment: Qt.AlignHCenter - text: qsTr("Select a wallpaper") - font.pointSize: Appearance.font.size.normal - color: Colours.palette.m3onSurfaceVariant - } + StyledText { + Layout.alignment: Qt.AlignHCenter + text: qsTr("Select a wallpaper") + font.pointSize: Appearance.font.size.normal + color: Colours.palette.m3onSurfaceVariant + } GridLayout { Layout.fillWidth: true @@ -948,10 +957,7 @@ RowLayout { anchors.fill: parent // Ensure sourceSize is always set to valid dimensions - sourceSize: Qt.size( - Math.max(1, Math.floor(parent.width)), - Math.max(1, Math.floor(parent.height)) - ) + sourceSize: Qt.size(Math.max(1, Math.floor(parent.width)), Math.max(1, Math.floor(parent.height))) // Show when ready, hide if fallback is showing opacity: status === Image.Ready && !fallbackImage.visible ? 1 : 0 @@ -971,10 +977,7 @@ RowLayout { source: modelData.path asynchronous: true fillMode: Image.PreserveAspectCrop - sourceSize: Qt.size( - Math.max(1, Math.floor(parent.width)), - Math.max(1, Math.floor(parent.height)) - ) + sourceSize: Qt.size(Math.max(1, Math.floor(parent.width)), Math.max(1, Math.floor(parent.height))) // Show if caching image hasn't loaded after a delay visible: opacity > 0 @@ -1019,24 +1022,35 @@ RowLayout { color: Colours.palette.m3primary font.pointSize: Appearance.font.size.large } - } - // Gradient overlay for filename with rounded bottom corners - Rectangle { - id: filenameOverlay - anchors.left: parent.left - anchors.right: parent.right - anchors.bottom: parent.bottom - height: filenameText.implicitHeight + Appearance.padding.normal * 2 + // Gradient overlay for filename with rounded bottom corners + Rectangle { + id: filenameOverlay - // Match the parent's rounded corners at the bottom - radius: Appearance.rounding.normal + anchors.left: parent.left + anchors.right: parent.right + anchors.bottom: parent.bottom + + implicitHeight: filenameText.implicitHeight + Appearance.padding.normal * 2 - gradient: Gradient { - GradientStop { position: 0.0; color: Qt.rgba(0, 0, 0, 0) } - GradientStop { position: 0.3; color: Qt.rgba(0, 0, 0, 0.3) } - GradientStop { position: 0.7; color: Qt.rgba(0, 0, 0, 0.75) } - GradientStop { position: 1.0; color: Qt.rgba(0, 0, 0, 0.85) } + gradient: Gradient { + GradientStop { + position: 0.0 + color: Qt.rgba(0, 0, 0, 0) + } + GradientStop { + position: 0.3 + color: Qt.rgba(0, 0, 0, 0.3) + } + GradientStop { + position: 0.7 + color: Qt.rgba(0, 0, 0, 0.75) + } + GradientStop { + position: 1.0 + color: Qt.rgba(0, 0, 0, 0.85) + } + } } opacity: 0 @@ -1075,10 +1089,6 @@ RowLayout { elide: Text.ElideMiddle maximumLineCount: 1 - // Text shadow for better readability - style: Text.Outline - styleColor: Qt.rgba(0, 0, 0, 0.6) - opacity: 0 Behavior on opacity { @@ -1103,5 +1113,3 @@ RowLayout { } } } - - |