quickshell and hyprland additions

This commit is contained in:
2026-03-15 13:56:00 +02:00
parent c9c27d1554
commit 1ad06b82a6
509 changed files with 68371 additions and 19 deletions

View File

@@ -0,0 +1,254 @@
pragma ComponentBehavior: Bound
import ".."
import "../components"
import "./sections"
import "../../launcher/services"
import qs.components
import qs.components.controls
import qs.components.effects
import qs.components.containers
import qs.components.images
import qs.services
import qs.config
import qs.utils
import Caelestia.Models
import Quickshell
import Quickshell.Widgets
import QtQuick
import QtQuick.Layouts
Item {
id: root
required property Session session
property real animDurationsScale: Config.appearance.anim.durations.scale ?? 1
property string fontFamilyMaterial: Config.appearance.font.family.material ?? "Material Symbols Rounded"
property string fontFamilyMono: Config.appearance.font.family.mono ?? "CaskaydiaCove NF"
property string fontFamilySans: Config.appearance.font.family.sans ?? "Rubik"
property real fontSizeScale: Config.appearance.font.size.scale ?? 1
property real paddingScale: Config.appearance.padding.scale ?? 1
property real roundingScale: Config.appearance.rounding.scale ?? 1
property real spacingScale: Config.appearance.spacing.scale ?? 1
property bool transparencyEnabled: Config.appearance.transparency.enabled ?? false
property real transparencyBase: Config.appearance.transparency.base ?? 0.85
property real transparencyLayers: Config.appearance.transparency.layers ?? 0.4
property real borderRounding: Config.border.rounding ?? 1
property real borderThickness: Config.border.thickness ?? 1
property bool desktopClockEnabled: Config.background.desktopClock.enabled ?? false
property real desktopClockScale: Config.background.desktopClock.scale ?? 1
property string desktopClockPosition: Config.background.desktopClock.position ?? "bottom-right"
property bool desktopClockShadowEnabled: Config.background.desktopClock.shadow.enabled ?? true
property real desktopClockShadowOpacity: Config.background.desktopClock.shadow.opacity ?? 0.7
property real desktopClockShadowBlur: Config.background.desktopClock.shadow.blur ?? 0.4
property bool desktopClockBackgroundEnabled: Config.background.desktopClock.background.enabled ?? false
property real desktopClockBackgroundOpacity: Config.background.desktopClock.background.opacity ?? 0.7
property bool desktopClockBackgroundBlur: Config.background.desktopClock.background.blur ?? false
property bool desktopClockInvertColors: Config.background.desktopClock.invertColors ?? false
property bool backgroundEnabled: Config.background.enabled ?? true
property bool wallpaperEnabled: Config.background.wallpaperEnabled ?? true
property bool visualiserEnabled: Config.background.visualiser.enabled ?? false
property bool visualiserAutoHide: Config.background.visualiser.autoHide ?? true
property real visualiserRounding: Config.background.visualiser.rounding ?? 1
property real visualiserSpacing: Config.background.visualiser.spacing ?? 1
anchors.fill: parent
function saveConfig() {
Config.appearance.anim.durations.scale = root.animDurationsScale;
Config.appearance.font.family.material = root.fontFamilyMaterial;
Config.appearance.font.family.mono = root.fontFamilyMono;
Config.appearance.font.family.sans = root.fontFamilySans;
Config.appearance.font.size.scale = root.fontSizeScale;
Config.appearance.padding.scale = root.paddingScale;
Config.appearance.rounding.scale = root.roundingScale;
Config.appearance.spacing.scale = root.spacingScale;
Config.appearance.transparency.enabled = root.transparencyEnabled;
Config.appearance.transparency.base = root.transparencyBase;
Config.appearance.transparency.layers = root.transparencyLayers;
Config.background.desktopClock.enabled = root.desktopClockEnabled;
Config.background.enabled = root.backgroundEnabled;
Config.background.desktopClock.scale = root.desktopClockScale;
Config.background.desktopClock.position = root.desktopClockPosition;
Config.background.desktopClock.shadow.enabled = root.desktopClockShadowEnabled;
Config.background.desktopClock.shadow.opacity = root.desktopClockShadowOpacity;
Config.background.desktopClock.shadow.blur = root.desktopClockShadowBlur;
Config.background.desktopClock.background.enabled = root.desktopClockBackgroundEnabled;
Config.background.desktopClock.background.opacity = root.desktopClockBackgroundOpacity;
Config.background.desktopClock.background.blur = root.desktopClockBackgroundBlur;
Config.background.desktopClock.invertColors = root.desktopClockInvertColors;
Config.background.wallpaperEnabled = root.wallpaperEnabled;
Config.background.visualiser.enabled = root.visualiserEnabled;
Config.background.visualiser.autoHide = root.visualiserAutoHide;
Config.background.visualiser.rounding = root.visualiserRounding;
Config.background.visualiser.spacing = root.visualiserSpacing;
Config.border.rounding = root.borderRounding;
Config.border.thickness = root.borderThickness;
Config.save();
}
Component {
id: appearanceRightContentComponent
Item {
id: rightAppearanceFlickable
ColumnLayout {
id: contentLayout
anchors.fill: parent
spacing: 0
StyledText {
Layout.alignment: Qt.AlignHCenter
Layout.bottomMargin: Appearance.spacing.normal
text: qsTr("Wallpaper")
font.pointSize: Appearance.font.size.extraLarge
font.weight: 600
}
Loader {
id: wallpaperLoader
Layout.fillWidth: true
Layout.fillHeight: true
Layout.bottomMargin: -Appearance.padding.large * 2
active: {
const isActive = root.session.activeIndex === 3;
const isAdjacent = Math.abs(root.session.activeIndex - 3) === 1;
const splitLayout = root.children[0];
const loader = splitLayout && splitLayout.rightLoader ? splitLayout.rightLoader : null;
const shouldActivate = loader && loader.item !== null && (isActive || isAdjacent);
return shouldActivate;
}
onStatusChanged: {
if (status === Loader.Error) {
console.error("[AppearancePane] Wallpaper loader error!");
}
}
sourceComponent: WallpaperGrid {
session: root.session
}
}
}
}
}
SplitPaneLayout {
anchors.fill: parent
leftContent: Component {
StyledFlickable {
id: sidebarFlickable
readonly property var rootPane: root
flickableDirection: Flickable.VerticalFlick
contentHeight: sidebarLayout.height
StyledScrollBar.vertical: StyledScrollBar {
flickable: sidebarFlickable
}
ColumnLayout {
id: sidebarLayout
anchors.left: parent.left
anchors.right: parent.right
spacing: Appearance.spacing.small
readonly property var rootPane: sidebarFlickable.rootPane
readonly property bool allSectionsExpanded: themeModeSection.expanded && colorVariantSection.expanded && colorSchemeSection.expanded && animationsSection.expanded && fontsSection.expanded && scalesSection.expanded && transparencySection.expanded && borderSection.expanded && backgroundSection.expanded
RowLayout {
spacing: Appearance.spacing.smaller
StyledText {
text: qsTr("Appearance")
font.pointSize: Appearance.font.size.large
font.weight: 500
}
Item {
Layout.fillWidth: true
}
IconButton {
icon: sidebarLayout.allSectionsExpanded ? "unfold_less" : "unfold_more"
type: IconButton.Text
label.animate: true
onClicked: {
const shouldExpand = !sidebarLayout.allSectionsExpanded;
themeModeSection.expanded = shouldExpand;
colorVariantSection.expanded = shouldExpand;
colorSchemeSection.expanded = shouldExpand;
animationsSection.expanded = shouldExpand;
fontsSection.expanded = shouldExpand;
scalesSection.expanded = shouldExpand;
transparencySection.expanded = shouldExpand;
borderSection.expanded = shouldExpand;
backgroundSection.expanded = shouldExpand;
}
}
}
ThemeModeSection {
id: themeModeSection
}
ColorVariantSection {
id: colorVariantSection
}
ColorSchemeSection {
id: colorSchemeSection
}
AnimationsSection {
id: animationsSection
rootPane: sidebarFlickable.rootPane
}
FontsSection {
id: fontsSection
rootPane: sidebarFlickable.rootPane
}
ScalesSection {
id: scalesSection
rootPane: sidebarFlickable.rootPane
}
TransparencySection {
id: transparencySection
rootPane: sidebarFlickable.rootPane
}
BorderSection {
id: borderSection
rootPane: sidebarFlickable.rootPane
}
BackgroundSection {
id: backgroundSection
rootPane: sidebarFlickable.rootPane
}
}
}
}
rightContent: appearanceRightContentComponent
}
}

View File

@@ -0,0 +1,44 @@
pragma ComponentBehavior: Bound
import ".."
import "../../components"
import qs.components
import qs.components.controls
import qs.components.containers
import qs.services
import qs.config
import QtQuick
import QtQuick.Layouts
CollapsibleSection {
id: root
required property var rootPane
title: qsTr("Animations")
showBackground: true
SectionContainer {
contentSpacing: Appearance.spacing.normal
SliderInput {
Layout.fillWidth: true
label: qsTr("Animation duration scale")
value: rootPane.animDurationsScale
from: 0.1
to: 5.0
decimals: 1
suffix: "×"
validator: DoubleValidator {
bottom: 0.1
top: 5.0
}
onValueModified: newValue => {
rootPane.animDurationsScale = newValue;
rootPane.saveConfig();
}
}
}
}

View File

@@ -0,0 +1,345 @@
pragma ComponentBehavior: Bound
import ".."
import "../../components"
import qs.components
import qs.components.controls
import qs.components.containers
import qs.services
import qs.config
import QtQuick
import QtQuick.Layouts
CollapsibleSection {
id: root
required property var rootPane
title: qsTr("Background")
showBackground: true
SwitchRow {
label: qsTr("Background enabled")
checked: rootPane.backgroundEnabled
onToggled: checked => {
rootPane.backgroundEnabled = checked;
rootPane.saveConfig();
}
}
SwitchRow {
label: qsTr("Wallpaper enabled")
checked: rootPane.wallpaperEnabled
onToggled: checked => {
rootPane.wallpaperEnabled = checked;
rootPane.saveConfig();
}
}
StyledText {
Layout.topMargin: Appearance.spacing.normal
text: qsTr("Desktop Clock")
font.pointSize: Appearance.font.size.larger
font.weight: 500
}
SwitchRow {
label: qsTr("Desktop Clock enabled")
checked: rootPane.desktopClockEnabled
onToggled: checked => {
rootPane.desktopClockEnabled = checked;
rootPane.saveConfig();
}
}
SectionContainer {
id: posContainer
contentSpacing: Appearance.spacing.small
z: 1
readonly property var pos: (rootPane.desktopClockPosition || "top-left").split('-')
readonly property string currentV: pos[0]
readonly property string currentH: pos[1]
function updateClockPos(v, h) {
rootPane.desktopClockPosition = v + "-" + h;
rootPane.saveConfig();
}
StyledText {
text: qsTr("Positioning")
font.pointSize: Appearance.font.size.larger
font.weight: 500
}
SplitButtonRow {
label: qsTr("Vertical Position")
enabled: rootPane.desktopClockEnabled
menuItems: [
MenuItem {
text: qsTr("Top")
icon: "vertical_align_top"
property string val: "top"
},
MenuItem {
text: qsTr("Middle")
icon: "vertical_align_center"
property string val: "middle"
},
MenuItem {
text: qsTr("Bottom")
icon: "vertical_align_bottom"
property string val: "bottom"
}
]
Component.onCompleted: {
for (let i = 0; i < menuItems.length; i++) {
if (menuItems[i].val === posContainer.currentV)
active = menuItems[i];
}
}
// The signal from SplitButtonRow
onSelected: item => posContainer.updateClockPos(item.val, posContainer.currentH)
}
SplitButtonRow {
label: qsTr("Horizontal Position")
enabled: rootPane.desktopClockEnabled
expandedZ: 99
menuItems: [
MenuItem {
text: qsTr("Left")
icon: "align_horizontal_left"
property string val: "left"
},
MenuItem {
text: qsTr("Center")
icon: "align_horizontal_center"
property string val: "center"
},
MenuItem {
text: qsTr("Right")
icon: "align_horizontal_right"
property string val: "right"
}
]
Component.onCompleted: {
for (let i = 0; i < menuItems.length; i++) {
if (menuItems[i].val === posContainer.currentH)
active = menuItems[i];
}
}
onSelected: item => posContainer.updateClockPos(posContainer.currentV, item.val)
}
}
SwitchRow {
label: qsTr("Invert colors")
checked: rootPane.desktopClockInvertColors
onToggled: checked => {
rootPane.desktopClockInvertColors = checked;
rootPane.saveConfig();
}
}
SectionContainer {
contentSpacing: Appearance.spacing.small
StyledText {
text: qsTr("Shadow")
font.pointSize: Appearance.font.size.larger
font.weight: 500
}
SwitchRow {
label: qsTr("Enabled")
checked: rootPane.desktopClockShadowEnabled
onToggled: checked => {
rootPane.desktopClockShadowEnabled = checked;
rootPane.saveConfig();
}
}
SectionContainer {
contentSpacing: Appearance.spacing.normal
SliderInput {
Layout.fillWidth: true
label: qsTr("Opacity")
value: rootPane.desktopClockShadowOpacity * 100
from: 0
to: 100
suffix: "%"
validator: IntValidator {
bottom: 0
top: 100
}
formatValueFunction: val => Math.round(val).toString()
parseValueFunction: text => parseInt(text)
onValueModified: newValue => {
rootPane.desktopClockShadowOpacity = newValue / 100;
rootPane.saveConfig();
}
}
}
SectionContainer {
contentSpacing: Appearance.spacing.normal
SliderInput {
Layout.fillWidth: true
label: qsTr("Blur")
value: rootPane.desktopClockShadowBlur * 100
from: 0
to: 100
suffix: "%"
validator: IntValidator {
bottom: 0
top: 100
}
formatValueFunction: val => Math.round(val).toString()
parseValueFunction: text => parseInt(text)
onValueModified: newValue => {
rootPane.desktopClockShadowBlur = newValue / 100;
rootPane.saveConfig();
}
}
}
}
SectionContainer {
contentSpacing: Appearance.spacing.small
StyledText {
text: qsTr("Background")
font.pointSize: Appearance.font.size.larger
font.weight: 500
}
SwitchRow {
label: qsTr("Enabled")
checked: rootPane.desktopClockBackgroundEnabled
onToggled: checked => {
rootPane.desktopClockBackgroundEnabled = checked;
rootPane.saveConfig();
}
}
SwitchRow {
label: qsTr("Blur enabled")
checked: rootPane.desktopClockBackgroundBlur
onToggled: checked => {
rootPane.desktopClockBackgroundBlur = checked;
rootPane.saveConfig();
}
}
SectionContainer {
contentSpacing: Appearance.spacing.normal
SliderInput {
Layout.fillWidth: true
label: qsTr("Opacity")
value: rootPane.desktopClockBackgroundOpacity * 100
from: 0
to: 100
suffix: "%"
validator: IntValidator {
bottom: 0
top: 100
}
formatValueFunction: val => Math.round(val).toString()
parseValueFunction: text => parseInt(text)
onValueModified: newValue => {
rootPane.desktopClockBackgroundOpacity = newValue / 100;
rootPane.saveConfig();
}
}
}
}
StyledText {
Layout.topMargin: Appearance.spacing.normal
text: qsTr("Visualiser")
font.pointSize: Appearance.font.size.larger
font.weight: 500
}
SwitchRow {
label: qsTr("Visualiser enabled")
checked: rootPane.visualiserEnabled
onToggled: checked => {
rootPane.visualiserEnabled = checked;
rootPane.saveConfig();
}
}
SwitchRow {
label: qsTr("Visualiser auto hide")
checked: rootPane.visualiserAutoHide
onToggled: checked => {
rootPane.visualiserAutoHide = checked;
rootPane.saveConfig();
}
}
SectionContainer {
contentSpacing: Appearance.spacing.normal
SliderInput {
Layout.fillWidth: true
label: qsTr("Visualiser rounding")
value: rootPane.visualiserRounding
from: 0
to: 10
stepSize: 1
validator: IntValidator {
bottom: 0
top: 10
}
formatValueFunction: val => Math.round(val).toString()
parseValueFunction: text => parseInt(text)
onValueModified: newValue => {
rootPane.visualiserRounding = Math.round(newValue);
rootPane.saveConfig();
}
}
}
SectionContainer {
contentSpacing: Appearance.spacing.normal
SliderInput {
Layout.fillWidth: true
label: qsTr("Visualiser spacing")
value: rootPane.visualiserSpacing
from: 0
to: 2
validator: DoubleValidator {
bottom: 0
top: 2
}
onValueModified: newValue => {
rootPane.visualiserSpacing = newValue;
rootPane.saveConfig();
}
}
}
}

View File

@@ -0,0 +1,68 @@
pragma ComponentBehavior: Bound
import ".."
import "../../components"
import qs.components
import qs.components.controls
import qs.components.containers
import qs.services
import qs.config
import QtQuick
import QtQuick.Layouts
CollapsibleSection {
id: root
required property var rootPane
title: qsTr("Border")
showBackground: true
SectionContainer {
contentSpacing: Appearance.spacing.normal
SliderInput {
Layout.fillWidth: true
label: qsTr("Border rounding")
value: rootPane.borderRounding
from: 0.1
to: 100
decimals: 1
suffix: "px"
validator: DoubleValidator {
bottom: 0.1
top: 100
}
onValueModified: newValue => {
rootPane.borderRounding = newValue;
rootPane.saveConfig();
}
}
}
SectionContainer {
contentSpacing: Appearance.spacing.normal
SliderInput {
Layout.fillWidth: true
label: qsTr("Border thickness")
value: rootPane.borderThickness
from: 0.1
to: 100
decimals: 1
suffix: "px"
validator: DoubleValidator {
bottom: 0.1
top: 100
}
onValueModified: newValue => {
rootPane.borderThickness = newValue;
rootPane.saveConfig();
}
}
}
}

View File

@@ -0,0 +1,145 @@
pragma ComponentBehavior: Bound
import ".."
import "../../../launcher/services"
import qs.components
import qs.components.controls
import qs.components.containers
import qs.services
import qs.config
import Quickshell
import QtQuick
import QtQuick.Layouts
CollapsibleSection {
title: qsTr("Color scheme")
description: qsTr("Available color schemes")
showBackground: true
ColumnLayout {
Layout.fillWidth: true
spacing: Appearance.spacing.small / 2
Repeater {
model: Schemes.list
delegate: StyledRect {
required property var modelData
Layout.fillWidth: true
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
StateLayer {
function onClicked(): void {
const name = modelData.name;
const flavour = modelData.flavour;
const schemeKey = `${name} ${flavour}`;
Schemes.currentScheme = schemeKey;
Quickshell.execDetached(["caelestia", "scheme", "set", "-n", name, "-f", flavour]);
Qt.callLater(() => {
reloadTimer.restart();
});
}
}
Timer {
id: reloadTimer
interval: 300
onTriggered: {
Schemes.reload();
}
}
RowLayout {
id: schemeRow
anchors.fill: parent
anchors.margins: Appearance.padding.normal
spacing: Appearance.spacing.normal
StyledRect {
id: preview
Layout.alignment: Qt.AlignVCenter
border.width: 1
border.color: Qt.alpha(`#${modelData.colours?.outline}`, 0.5)
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
}
Item {
anchors.top: parent.top
anchors.bottom: parent.bottom
anchors.right: parent.right
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
StyledText {
text: modelData.flavour ?? ""
font.pointSize: Appearance.font.size.normal
}
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
}
}
Loader {
active: isCurrent
sourceComponent: MaterialIcon {
text: "check"
color: Colours.palette.m3onSurfaceVariant
font.pointSize: Appearance.font.size.large
}
}
}
implicitHeight: schemeRow.implicitHeight + Appearance.padding.normal * 2
}
}
}
}

View File

@@ -0,0 +1,91 @@
pragma ComponentBehavior: Bound
import ".."
import "../../../launcher/services"
import qs.components
import qs.components.controls
import qs.components.containers
import qs.services
import qs.config
import Quickshell
import QtQuick
import QtQuick.Layouts
CollapsibleSection {
title: qsTr("Color variant")
description: qsTr("Material theme variant")
showBackground: true
ColumnLayout {
Layout.fillWidth: true
spacing: Appearance.spacing.small / 2
Repeater {
model: M3Variants.list
delegate: StyledRect {
required property var modelData
Layout.fillWidth: true
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;
Schemes.currentVariant = variant;
Quickshell.execDetached(["caelestia", "scheme", "set", "-v", variant]);
Qt.callLater(() => {
reloadTimer.restart();
});
}
}
Timer {
id: reloadTimer
interval: 300
onTriggered: {
Schemes.reload();
}
}
RowLayout {
id: variantRow
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
}
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
}
}
implicitHeight: variantRow.implicitHeight + Appearance.padding.normal * 2
}
}
}
}

View File

@@ -0,0 +1,282 @@
pragma ComponentBehavior: Bound
import ".."
import "../../components"
import qs.components
import qs.components.controls
import qs.components.containers
import qs.services
import qs.config
import QtQuick
import QtQuick.Layouts
CollapsibleSection {
id: root
required property var rootPane
title: qsTr("Fonts")
showBackground: true
CollapsibleSection {
id: materialFontSection
title: qsTr("Material font family")
expanded: true
showBackground: true
nested: true
Loader {
id: materialFontLoader
Layout.fillWidth: true
Layout.preferredHeight: item ? Math.min(item.contentHeight, 300) : 0
active: materialFontSection.expanded
sourceComponent: StyledListView {
id: materialFontList
property alias contentHeight: materialFontList.contentHeight
clip: true
spacing: Appearance.spacing.small / 2
model: Qt.fontFamilies()
StyledScrollBar.vertical: StyledScrollBar {
flickable: materialFontList
}
delegate: StyledRect {
required property string modelData
required property int index
width: ListView.view.width
readonly property bool isCurrent: modelData === rootPane.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
StateLayer {
function onClicked(): void {
rootPane.fontFamilyMaterial = modelData;
rootPane.saveConfig();
}
}
RowLayout {
id: fontFamilyMaterialRow
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
sourceComponent: MaterialIcon {
text: "check"
color: Colours.palette.m3onSurfaceVariant
font.pointSize: Appearance.font.size.large
}
}
}
implicitHeight: fontFamilyMaterialRow.implicitHeight + Appearance.padding.normal * 2
}
}
}
}
CollapsibleSection {
id: monoFontSection
title: qsTr("Monospace font family")
expanded: false
showBackground: true
nested: true
Loader {
Layout.fillWidth: true
Layout.preferredHeight: item ? Math.min(item.contentHeight, 300) : 0
active: monoFontSection.expanded
sourceComponent: StyledListView {
id: monoFontList
property alias contentHeight: monoFontList.contentHeight
clip: true
spacing: Appearance.spacing.small / 2
model: Qt.fontFamilies()
StyledScrollBar.vertical: StyledScrollBar {
flickable: monoFontList
}
delegate: StyledRect {
required property string modelData
required property int index
width: ListView.view.width
readonly property bool isCurrent: modelData === rootPane.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 {
rootPane.fontFamilyMono = modelData;
rootPane.saveConfig();
}
}
RowLayout {
id: fontFamilyMonoRow
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
sourceComponent: MaterialIcon {
text: "check"
color: Colours.palette.m3onSurfaceVariant
font.pointSize: Appearance.font.size.large
}
}
}
implicitHeight: fontFamilyMonoRow.implicitHeight + Appearance.padding.normal * 2
}
}
}
}
CollapsibleSection {
id: sansFontSection
title: qsTr("Sans-serif font family")
expanded: false
showBackground: true
nested: true
Loader {
Layout.fillWidth: true
Layout.preferredHeight: item ? Math.min(item.contentHeight, 300) : 0
active: sansFontSection.expanded
sourceComponent: StyledListView {
id: sansFontList
property alias contentHeight: sansFontList.contentHeight
clip: true
spacing: Appearance.spacing.small / 2
model: Qt.fontFamilies()
StyledScrollBar.vertical: StyledScrollBar {
flickable: sansFontList
}
delegate: StyledRect {
required property string modelData
required property int index
width: ListView.view.width
readonly property bool isCurrent: modelData === rootPane.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
StateLayer {
function onClicked(): void {
rootPane.fontFamilySans = modelData;
rootPane.saveConfig();
}
}
RowLayout {
id: fontFamilySansRow
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
sourceComponent: MaterialIcon {
text: "check"
color: Colours.palette.m3onSurfaceVariant
font.pointSize: Appearance.font.size.large
}
}
}
implicitHeight: fontFamilySansRow.implicitHeight + Appearance.padding.normal * 2
}
}
}
}
SectionContainer {
contentSpacing: Appearance.spacing.normal
SliderInput {
Layout.fillWidth: true
label: qsTr("Font size scale")
value: rootPane.fontSizeScale
from: 0.7
to: 1.5
decimals: 2
suffix: "×"
validator: DoubleValidator {
bottom: 0.7
top: 1.5
}
onValueModified: newValue => {
rootPane.fontSizeScale = newValue;
rootPane.saveConfig();
}
}
}
}

View File

@@ -0,0 +1,92 @@
pragma ComponentBehavior: Bound
import ".."
import "../../components"
import qs.components
import qs.components.controls
import qs.components.containers
import qs.services
import qs.config
import QtQuick
import QtQuick.Layouts
CollapsibleSection {
id: root
required property var rootPane
title: qsTr("Scales")
showBackground: true
SectionContainer {
contentSpacing: Appearance.spacing.normal
SliderInput {
Layout.fillWidth: true
label: qsTr("Padding scale")
value: rootPane.paddingScale
from: 0.5
to: 2.0
decimals: 1
suffix: "×"
validator: DoubleValidator {
bottom: 0.5
top: 2.0
}
onValueModified: newValue => {
rootPane.paddingScale = newValue;
rootPane.saveConfig();
}
}
}
SectionContainer {
contentSpacing: Appearance.spacing.normal
SliderInput {
Layout.fillWidth: true
label: qsTr("Rounding scale")
value: rootPane.roundingScale
from: 0.1
to: 5.0
decimals: 1
suffix: "×"
validator: DoubleValidator {
bottom: 0.1
top: 5.0
}
onValueModified: newValue => {
rootPane.roundingScale = newValue;
rootPane.saveConfig();
}
}
}
SectionContainer {
contentSpacing: Appearance.spacing.normal
SliderInput {
Layout.fillWidth: true
label: qsTr("Spacing scale")
value: rootPane.spacingScale
from: 0.1
to: 2.0
decimals: 1
suffix: "×"
validator: DoubleValidator {
bottom: 0.1
top: 2.0
}
onValueModified: newValue => {
rootPane.spacingScale = newValue;
rootPane.saveConfig();
}
}
}
}

View File

@@ -0,0 +1,23 @@
pragma ComponentBehavior: Bound
import ".."
import qs.components
import qs.components.controls
import qs.components.containers
import qs.services
import qs.config
import QtQuick
CollapsibleSection {
title: qsTr("Theme mode")
description: qsTr("Light or dark theme")
showBackground: true
SwitchRow {
label: qsTr("Dark mode")
checked: !Colours.currentLight
onToggled: checked => {
Colours.setMode(checked ? "dark" : "light");
}
}
}

View File

@@ -0,0 +1,79 @@
pragma ComponentBehavior: Bound
import ".."
import "../../components"
import qs.components
import qs.components.controls
import qs.components.containers
import qs.services
import qs.config
import QtQuick
import QtQuick.Layouts
CollapsibleSection {
id: root
required property var rootPane
title: qsTr("Transparency")
showBackground: true
SwitchRow {
label: qsTr("Transparency enabled")
checked: rootPane.transparencyEnabled
onToggled: checked => {
rootPane.transparencyEnabled = checked;
rootPane.saveConfig();
}
}
SectionContainer {
contentSpacing: Appearance.spacing.normal
SliderInput {
Layout.fillWidth: true
label: qsTr("Transparency base")
value: rootPane.transparencyBase * 100
from: 0
to: 100
suffix: "%"
validator: IntValidator {
bottom: 0
top: 100
}
formatValueFunction: val => Math.round(val).toString()
parseValueFunction: text => parseInt(text)
onValueModified: newValue => {
rootPane.transparencyBase = newValue / 100;
rootPane.saveConfig();
}
}
}
SectionContainer {
contentSpacing: Appearance.spacing.normal
SliderInput {
Layout.fillWidth: true
label: qsTr("Transparency layers")
value: rootPane.transparencyLayers * 100
from: 0
to: 100
suffix: "%"
validator: IntValidator {
bottom: 0
top: 100
}
formatValueFunction: val => Math.round(val).toString()
parseValueFunction: text => parseInt(text)
onValueModified: newValue => {
rootPane.transparencyLayers = newValue / 100;
rootPane.saveConfig();
}
}
}
}