controlcenter: appearance panel, added border options
This commit is contained in:
parent
4188d32840
commit
e613ab81cc
1 changed files with 140 additions and 0 deletions
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue