controlcenter: appearance panel, added border options

This commit is contained in:
ATMDA 2025-11-11 15:57:00 -05:00
parent 4188d32840
commit e613ab81cc

View file

@ -33,6 +33,8 @@ RowLayout {
property bool transparencyEnabled: false
property real transparencyBase: 0.85
property real transparencyLayers: 0.4
property real borderRounding: 1
property real borderThickness: 1
// Background settings
property bool desktopClockEnabled: true
@ -98,6 +100,12 @@ RowLayout {
}
}
// Update border settings
if (config.border) {
root.borderRounding = config.border.rounding ?? 1;
root.borderThickness = config.border.thickness ?? 1;
}
// Update background settings
if (config.background) {
root.desktopClockEnabled = config.background.desktopClock?.enabled !== undefined ? config.background.desktopClock.enabled : false;
@ -133,6 +141,7 @@ RowLayout {
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;
}
@ -193,6 +202,11 @@ RowLayout {
config.background.visualiser.rounding = root.visualiserRounding;
config.background.visualiser.spacing = root.visualiserSpacing;
// Update border
if (!config.border) config.border = {};
config.border.rounding = root.borderRounding;
config.border.thickness = root.borderThickness;
// Write back to file using setText (same simple approach that worked for taskbar)
const jsonString = JSON.stringify(config, null, 4);
configFile.setText(jsonString);
@ -1423,6 +1437,132 @@ RowLayout {
}
}
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
StyledText {
Layout.topMargin: Appearance.spacing.large
text: qsTr("Border")
font.pointSize: Appearance.font.size.larger
font.weight: 500
}
Item {
Layout.fillWidth: true
}
MaterialIcon {
text: "expand_more"
rotation: borderSection.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 = 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 {}
}
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();
}
}
}
}
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();
}
}
}
}
Item {
id: backgroundSection
Layout.fillWidth: true