summaryrefslogtreecommitdiff
path: root/modules/controlcenter/appearance/AppearancePane.qml
diff options
context:
space:
mode:
Diffstat (limited to 'modules/controlcenter/appearance/AppearancePane.qml')
-rw-r--r--modules/controlcenter/appearance/AppearancePane.qml548
1 files changed, 275 insertions, 273 deletions
diff --git a/modules/controlcenter/appearance/AppearancePane.qml b/modules/controlcenter/appearance/AppearancePane.qml
index 38d335d..279c362 100644
--- a/modules/controlcenter/appearance/AppearancePane.qml
+++ b/modules/controlcenter/appearance/AppearancePane.qml
@@ -540,64 +540,65 @@ RowLayout {
font.weight: 500
}
- ColumnLayout {
+ StyledListView {
Layout.fillWidth: true
+ Layout.preferredHeight: Math.min(contentHeight, 300)
+
+ clip: true
spacing: Appearance.spacing.small / 2
+ model: Qt.fontFamilies()
- Repeater {
- model: Qt.fontFamilies()
+ delegate: StyledRect {
+ required property string modelData
+ required property int index
- delegate: StyledRect {
- required property string modelData
+ width: ListView.view.width
- Layout.fillWidth: true
-
- 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
+ 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();
- }
+ StateLayer {
+ function onClicked(): void {
+ rootPane.fontFamilyMaterial = modelData;
+ rootPane.saveConfig();
}
+ }
- RowLayout {
- id: fontFamilyMaterialRow
+ 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: fontFamilyMaterialRow.implicitHeight + Appearance.padding.normal * 2
}
+
+ implicitHeight: fontFamilyMaterialRow.implicitHeight + Appearance.padding.normal * 2
}
}
@@ -608,64 +609,65 @@ RowLayout {
font.weight: 500
}
- ColumnLayout {
+ StyledListView {
Layout.fillWidth: true
+ Layout.preferredHeight: Math.min(contentHeight, 300)
+
+ clip: true
spacing: Appearance.spacing.small / 2
+ model: Qt.fontFamilies()
- Repeater {
- model: Qt.fontFamilies()
+ delegate: StyledRect {
+ required property string modelData
+ required property int index
- delegate: StyledRect {
- required property string modelData
+ width: ListView.view.width
- Layout.fillWidth: true
+ 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
- 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();
- }
+ StateLayer {
+ function onClicked(): void {
+ rootPane.fontFamilyMono = modelData;
+ rootPane.saveConfig();
}
+ }
- RowLayout {
- id: fontFamilyMonoRow
+ RowLayout {
+ id: fontFamilyMonoRow
- 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
}
+
+ implicitHeight: fontFamilyMonoRow.implicitHeight + Appearance.padding.normal * 2
}
}
@@ -676,64 +678,65 @@ RowLayout {
font.weight: 500
}
- ColumnLayout {
+ StyledListView {
Layout.fillWidth: true
+ Layout.preferredHeight: Math.min(contentHeight, 300)
+
+ clip: true
spacing: Appearance.spacing.small / 2
+ model: Qt.fontFamilies()
- Repeater {
- model: Qt.fontFamilies()
+ delegate: StyledRect {
+ required property string modelData
+ required property int index
- delegate: StyledRect {
- required property string modelData
+ width: ListView.view.width
- Layout.fillWidth: true
+ 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
- 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();
- }
+ StateLayer {
+ function onClicked(): void {
+ rootPane.fontFamilySans = modelData;
+ rootPane.saveConfig();
}
+ }
- RowLayout {
- id: fontFamilySansRow
+ RowLayout {
+ id: fontFamilySansRow
- 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: fontFamilySansRow.implicitHeight + Appearance.padding.normal * 2
}
+
+ implicitHeight: fontFamilySansRow.implicitHeight + Appearance.padding.normal * 2
}
}
@@ -1874,210 +1877,209 @@ RowLayout {
color: Colours.palette.m3onSurfaceVariant
}
- GridLayout {
+ GridView {
+ id: wallpaperGrid
Layout.fillWidth: true
Layout.topMargin: Appearance.spacing.large
+ Layout.preferredHeight: Math.min(600, Math.ceil(count / Math.floor(width / cellWidth)) * cellHeight)
Layout.alignment: Qt.AlignHCenter
- columns: Math.max(2, Math.floor(parent.width / 200))
- rowSpacing: Appearance.spacing.normal
- columnSpacing: Appearance.spacing.normal
+ cellWidth: 200 + Appearance.spacing.normal
+ cellHeight: 140 + Appearance.spacing.normal
+
+ model: Wallpapers.list
+ clip: true
- // Center the grid content
- Layout.maximumWidth: {
- const cols = columns;
- const itemWidth = 200;
- const spacing = columnSpacing;
- return cols * itemWidth + (cols - 1) * spacing;
+ // Enable caching for better performance
+ cacheBuffer: cellHeight * 2
+
+ StyledScrollBar.vertical: StyledScrollBar {
+ flickable: wallpaperGrid
}
- Repeater {
- model: Wallpapers.list
+ delegate: Item {
+ required property var modelData
- delegate: Item {
- required property var modelData
+ width: 200
+ height: 140
- Layout.preferredWidth: 200
- Layout.preferredHeight: 140
- Layout.minimumWidth: 200
- Layout.minimumHeight: 140
- Layout.maximumWidth: 200
- Layout.maximumHeight: 140
+ // Center in cell
+ x: (wallpaperGrid.cellWidth - width) / 2
+ y: (wallpaperGrid.cellHeight - height) / 2
- readonly property bool isCurrent: modelData.path === Wallpapers.actualCurrent
+ readonly property bool isCurrent: modelData.path === Wallpapers.actualCurrent
- StateLayer {
- radius: Appearance.rounding.normal
+ StateLayer {
+ radius: Appearance.rounding.normal
- function onClicked(): void {
- Wallpapers.setWallpaper(modelData.path);
- }
+ function onClicked(): void {
+ Wallpapers.setWallpaper(modelData.path);
}
+ }
- StyledClippingRect {
- id: image
+ StyledClippingRect {
+ id: image
- anchors.fill: parent
- color: Colours.tPalette.m3surfaceContainer
- radius: Appearance.rounding.normal
+ anchors.fill: parent
+ color: Colours.tPalette.m3surfaceContainer
+ radius: Appearance.rounding.normal
- CachingImage {
- id: cachingImage
+ CachingImage {
+ id: cachingImage
- path: modelData.path
- anchors.fill: parent
- cache: true
- visible: opacity > 0
+ path: modelData.path
+ anchors.fill: parent
+ cache: true
+ visible: opacity > 0
- // Show when ready
- opacity: status === Image.Ready ? 1 : 0
+ // Show when ready
+ opacity: status === Image.Ready ? 1 : 0
- Behavior on opacity {
- NumberAnimation {
- duration: 1000
- easing.type: Easing.OutQuad
- }
+ Behavior on opacity {
+ NumberAnimation {
+ duration: 1000
+ easing.type: Easing.OutQuad
}
}
+ }
- // Fallback image for when caching fails
- Image {
- id: fallbackImage
+ // Fallback image for when caching fails
+ Image {
+ id: fallbackImage
- anchors.fill: parent
- source: fallbackTimer.triggered && cachingImage.status !== Image.Ready ? modelData.path : ""
- asynchronous: true
- fillMode: Image.PreserveAspectCrop
- cache: true
- visible: opacity > 0
+ anchors.fill: parent
+ source: fallbackTimer.triggered && cachingImage.status !== Image.Ready ? modelData.path : ""
+ asynchronous: true
+ fillMode: Image.PreserveAspectCrop
+ cache: true
+ visible: opacity > 0
- opacity: status === Image.Ready && cachingImage.status !== Image.Ready ? 1 : 0
+ opacity: status === Image.Ready && cachingImage.status !== Image.Ready ? 1 : 0
- Behavior on opacity {
- NumberAnimation {
- duration: 1000
- easing.type: Easing.OutQuad
- }
+ Behavior on opacity {
+ NumberAnimation {
+ duration: 1000
+ easing.type: Easing.OutQuad
}
}
+ }
- // Timer to trigger fallback only if caching hasn't loaded
- Timer {
- id: fallbackTimer
+ // Timer to trigger fallback only if caching hasn't loaded
+ Timer {
+ id: fallbackTimer
- property bool triggered: false
- interval: 800
- running: cachingImage.status === Image.Loading || cachingImage.status === Image.Null
- onTriggered: triggered = true
- }
+ property bool triggered: false
+ interval: 800
+ running: cachingImage.status === Image.Loading || cachingImage.status === Image.Null
+ onTriggered: triggered = true
}
+ }
- // Border overlay that doesn't affect image size
- Rectangle {
- anchors.fill: parent
- color: "transparent"
- radius: Appearance.rounding.normal
- border.width: isCurrent ? 2 : 0
- border.color: Colours.palette.m3primary
+ // Border overlay that doesn't affect image size
+ Rectangle {
+ anchors.fill: parent
+ color: "transparent"
+ radius: Appearance.rounding.normal
+ border.width: isCurrent ? 2 : 0
+ border.color: Colours.palette.m3primary
- Behavior on border.width {
- NumberAnimation {
- duration: 150
- easing.type: Easing.OutQuad
- }
+ Behavior on border.width {
+ NumberAnimation {
+ duration: 150
+ easing.type: Easing.OutQuad
}
+ }
- MaterialIcon {
- anchors.right: parent.right
- anchors.top: parent.top
- anchors.margins: Appearance.padding.small
+ MaterialIcon {
+ anchors.right: parent.right
+ anchors.top: parent.top
+ anchors.margins: Appearance.padding.small
- visible: isCurrent
- text: "check_circle"
- color: Colours.palette.m3primary
- font.pointSize: Appearance.font.size.large
- }
+ visible: isCurrent
+ text: "check_circle"
+ color: Colours.palette.m3primary
+ font.pointSize: Appearance.font.size.large
+ }
- // Gradient overlay for filename with rounded bottom corners
- Rectangle {
- id: filenameOverlay
+ // Gradient overlay for filename with rounded bottom corners
+ Rectangle {
+ id: filenameOverlay
- anchors.left: parent.left
- anchors.right: parent.right
- anchors.bottom: parent.bottom
+ anchors.left: parent.left
+ anchors.right: parent.right
+ anchors.bottom: parent.bottom
- implicitHeight: filenameText.implicitHeight + Appearance.padding.normal * 2
+ implicitHeight: filenameText.implicitHeight + Appearance.padding.normal * 2
- radius: Appearance.rounding.normal
+ radius: Appearance.rounding.normal
- 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
+ opacity: 0
- Behavior on opacity {
- NumberAnimation {
- duration: 1000
- easing.type: Easing.OutCubic
- }
+ Behavior on opacity {
+ NumberAnimation {
+ duration: 1000
+ easing.type: Easing.OutCubic
}
+ }
- Component.onCompleted: {
- opacity = 1;
- }
+ Component.onCompleted: {
+ opacity = 1;
}
+ }
- StyledText {
- id: filenameText
- anchors.left: parent.left
- anchors.right: parent.right
- anchors.bottom: parent.bottom
- anchors.leftMargin: Appearance.padding.normal
- anchors.rightMargin: Appearance.padding.normal
- anchors.bottomMargin: Appearance.padding.normal
+ StyledText {
+ id: filenameText
+ anchors.left: parent.left
+ anchors.right: parent.right
+ anchors.bottom: parent.bottom
+ anchors.leftMargin: Appearance.padding.normal
+ anchors.rightMargin: Appearance.padding.normal
+ anchors.bottomMargin: Appearance.padding.normal
- readonly property string fileName: {
- const path = modelData.relativePath || "";
- const parts = path.split("/");
- return parts.length > 0 ? parts[parts.length - 1] : path;
- }
+ readonly property string fileName: {
+ const path = modelData.relativePath || "";
+ const parts = path.split("/");
+ return parts.length > 0 ? parts[parts.length - 1] : path;
+ }
- text: fileName
- font.pointSize: Appearance.font.size.smaller
- font.weight: 500
- color: isCurrent ? Colours.palette.m3primary : "#FFFFFF"
- elide: Text.ElideMiddle
- maximumLineCount: 1
+ text: fileName
+ font.pointSize: Appearance.font.size.smaller
+ font.weight: 500
+ color: isCurrent ? Colours.palette.m3primary : "#FFFFFF"
+ elide: Text.ElideMiddle
+ maximumLineCount: 1
- opacity: 0
+ opacity: 0
- Behavior on opacity {
- NumberAnimation {
- duration: 1000
- easing.type: Easing.OutCubic
- }
+ Behavior on opacity {
+ NumberAnimation {
+ duration: 1000
+ easing.type: Easing.OutCubic
}
+ }
- Component.onCompleted: {
- opacity = 1;
- }
+ Component.onCompleted: {
+ opacity = 1;
}
}
}
generated by cgit v1.2.3-freya (git 2.51.1) at 2026-01-20 12:46:35 +0000