Settings UI for color scheme presets

2026-05-23 20:13:56 +02:00
parent 5df46160f6
commit 96afbdb30b
29 changed files with 695 additions and 42 deletions
@@ -0,0 +1,161 @@
+pragma ComponentBehavior: Bound
+
+import Quickshell
+import QtQuick
+import QtQuick.Layouts
+import qs.Config
+import qs.Components
+
+Item {
+	id: root
+
+	required property string name
+	required property var object
+	property alias row: row
+	required property string setting
+	property bool shouldBeActive: true
+	required property list<var> stringList
+
+	signal optionSet(option: string)
+
+	anchors.left: parent.left
+	anchors.right: parent.right
+	implicitHeight: shouldBeActive ? row.height : 0
+	opacity: shouldBeActive ? 1 : 0
+	scale: shouldBeActive ? 1 : 0.8
+	visible: opacity > 0
+
+	Behavior on opacity {
+		Anim {
+		}
+	}
+	Behavior on scale {
+		Anim {
+		}
+	}
+	Behavior on y {
+		Anim {
+		}
+	}
+
+	RowLayout {
+		id: row
+
+		anchors.left: parent.left
+		anchors.margins: Appearance.padding.small
+		anchors.right: parent.right
+		anchors.verticalCenter: parent.verticalCenter
+
+		CustomText {
+			id: text
+
+			Layout.fillWidth: true
+			font.pointSize: Appearance.font.size.larger
+			text: root.name
+		}
+
+		CustomClippingRect {
+			Layout.preferredHeight: 42 * 6 + Appearance.padding.normal * 2 + Appearance.spacing.small * 5
+			Layout.preferredWidth: 500
+			color: DynamicColors.tPalette.m3surfaceContainer
+			radius: (21 + Appearance.padding.normal) * Appearance.rounding.scale
+
+			CustomRect {
+				id: searchBox
+
+				anchors.left: parent.left
+				anchors.margins: Appearance.padding.normal
+				anchors.right: parent.right
+				anchors.top: parent.top
+				color: DynamicColors.tPalette.m3surfaceContainer
+				implicitHeight: 42
+				radius: Appearance.rounding.full
+
+				MaterialIcon {
+					id: searchIcon
+
+					anchors.bottom: parent.bottom
+					anchors.left: parent.left
+					anchors.leftMargin: Appearance.padding.large
+					anchors.top: parent.top
+					font.pointSize: Appearance.font.size.large
+					text: "search"
+					verticalAlignment: Text.AlignVCenter
+				}
+
+				CustomTextField {
+					id: textSearch
+
+					anchors.left: searchIcon.right
+					anchors.leftMargin: Appearance.spacing.small
+					anchors.right: parent.right
+					anchors.rightMargin: Appearance.spacing.normal
+					anchors.verticalCenter: parent.verticalCenter
+					placeholderText: "Search..."
+				}
+			}
+
+			CustomClippingRect {
+				anchors.bottom: parent.bottom
+				anchors.left: parent.left
+				anchors.margins: Appearance.padding.normal
+				anchors.right: parent.right
+				anchors.top: searchBox.bottom
+				bottomLeftRadius: 21
+				bottomRightRadius: 21
+
+				CustomListView {
+					anchors.fill: parent
+					clip: true
+					spacing: Appearance.spacing.small
+
+					delegate: CustomRect {
+						id: delegate
+
+						required property string modelData
+
+						anchors.left: parent.left
+						anchors.right: parent.right
+						implicitHeight: 42
+						radius: Appearance.rounding.smallest
+
+						CustomText {
+							anchors.fill: parent
+							anchors.leftMargin: Appearance.padding.normal
+							text: modelData
+							verticalAlignment: Text.AlignVCenter
+						}
+
+						MaterialIcon {
+							anchors.fill: parent
+							anchors.rightMargin: Appearance.padding.normal
+							color: DynamicColors.palette.m3primary
+							font.pointSize: Appearance.font.size.large
+							horizontalAlignment: Text.AlignRight
+							text: "check_circle"
+							verticalAlignment: Text.AlignVCenter
+							visible: root.object[root.setting] === delegate.modelData
+						}
+
+						StateLayer {
+							onClicked: {
+								root.object[root.setting] = delegate.modelData;
+								root.optionSet(delegate.modelData);
+								Config.save();
+							}
+						}
+					}
+					model: ScriptModel {
+						values: {
+							const values = root.stringList;
+							const search = textSearch.text;
+							var regex = new RegExp(search, "i");
+
+							return values.filter(n => regex.test(n));
+						}
+					}
+				}
+			}
+		}
+	}
+}