new spin box, textfield and searchbar

Modules/Launcher/AppList.qml

@@ -10,7 +10,7 @@ import qs.Config
 CustomListView {
 	id: root
 
-	required property CustomTextField search
+	required property SearchBar search
 	required property PersistentProperties visibilities
 
 	highlightFollowsCurrentItem: false

Modules/Launcher/Content.qml

@@ -16,13 +16,13 @@ Item {
 	readonly property int rounding: Appearance.rounding.large
 	required property PersistentProperties visibilities
 
-	implicitHeight: searchWrapper.height + listWrapper.height + padding * 2
+	implicitHeight: search.height + listWrapper.height + padding * 2
 	implicitWidth: listWrapper.width + padding * 2
 
 	Item {
 		id: listWrapper
 
-		anchors.bottom: searchWrapper.top
+		anchors.bottom: search.top
 		anchors.bottomMargin: root.padding
 		anchors.horizontalCenter: parent.horizontalCenter
 		implicitHeight: list.height + root.padding
@@ -32,7 +32,7 @@ Item {
 			id: list
 
 			content: root
-			maxHeight: root.maxHeight - searchWrapper.implicitHeight - root.padding * 3
+			maxHeight: root.maxHeight - search.implicitHeight - root.padding * 3
 			padding: root.padding
 			panels: root.panels
 			rounding: root.rounding
@@ -41,131 +41,69 @@ Item {
 		}
 	}
 
-	CustomRect {
-		id: searchWrapper
+	SearchBar {
+		id: search
 
 		anchors.bottom: parent.bottom
 		anchors.left: parent.left
 		anchors.margins: root.padding
 		anchors.right: parent.right
-		color: DynamicColors.layer(DynamicColors.palette.m3surfaceContainer, 2)
-		implicitHeight: Math.max(searchIcon.implicitHeight, search.implicitHeight, clearIcon.implicitHeight)
-		radius: Appearance.rounding.smallest
+		bottomPadding: Appearance.padding.larger
+		placeholderText: qsTr("Type \"%1\" for commands").arg(Config.launcher.actionPrefix)
+		topPadding: Appearance.padding.larger
 
-		MaterialIcon {
-			id: searchIcon
-
-			anchors.left: parent.left
-			anchors.leftMargin: root.padding + 10
-			anchors.verticalCenter: parent.verticalCenter
-			color: DynamicColors.palette.m3onSurfaceVariant
-			text: "search"
+		Component.onCompleted: {
+			console.log(search.color);
+			console.log(search.placeholderTextColor);
+			forceActiveFocus();
 		}
-
-		CustomTextField {
-			id: search
-
-			anchors.left: searchIcon.right
-			anchors.leftMargin: Appearance.spacing.small
-			anchors.right: clearIcon.left
-			anchors.rightMargin: Appearance.spacing.small
-			bottomPadding: Appearance.padding.larger
-			placeholderText: qsTr("Type \"%1\" for commands").arg(Config.launcher.actionPrefix)
-			topPadding: Appearance.padding.larger
-
-			Component.onCompleted: forceActiveFocus()
-			Keys.onDownPressed: list.currentList?.decrementCurrentIndex()
-			Keys.onEscapePressed: root.visibilities.launcher = false
-			Keys.onPressed: event => {
-				if (!Config.launcher.vimKeybinds)
-					return;
-
-				if (event.modifiers & Qt.ControlModifier) {
-					if (event.key === Qt.Key_J) {
-						list.currentList?.incrementCurrentIndex();
-						event.accepted = true;
-					} else if (event.key === Qt.Key_K) {
-						list.currentList?.decrementCurrentIndex();
-						event.accepted = true;
-					}
-				} else if (event.key === Qt.Key_Tab) {
+		Keys.onDownPressed: list.currentList?.decrementCurrentIndex()
+		Keys.onEscapePressed: root.visibilities.launcher = false
+		Keys.onPressed: event => {
+			if (event.modifiers & Qt.ControlModifier) {
+				if (event.key === Qt.Key_J) {
 					list.currentList?.incrementCurrentIndex();
 					event.accepted = true;
-				} else if (event.key === Qt.Key_Backtab || (event.key === Qt.Key_Tab && (event.modifiers & Qt.ShiftModifier))) {
+				} else if (event.key === Qt.Key_K) {
 					list.currentList?.decrementCurrentIndex();
 					event.accepted = true;
 				}
+			} else if (event.key === Qt.Key_Tab) {
+				list.currentList?.incrementCurrentIndex();
+				event.accepted = true;
+			} else if (event.key === Qt.Key_Backtab || (event.key === Qt.Key_Tab && (event.modifiers & Qt.ShiftModifier))) {
+				list.currentList?.decrementCurrentIndex();
+				event.accepted = true;
 			}
-			Keys.onUpPressed: list.currentList?.incrementCurrentIndex()
-			onAccepted: {
-				const currentItem = list.currentList?.currentItem;
-				if (currentItem) {
-					if (list.showWallpapers) {
-						if (DynamicColors.scheme === "dynamic" && currentItem.modelData.path !== Wallpapers.actualCurrent)
-							Wallpapers.previewColourLock = true;
-						Wallpapers.setWallpaper(currentItem.modelData.path);
-						root.visibilities.launcher = false;
-					} else if (text.startsWith(Config.launcher.actionPrefix)) {
-						if (text.startsWith(`${Config.launcher.actionPrefix}calc `))
-							currentItem.onClicked();
-						else
-							currentItem.modelData.onClicked(list.currentList);
-					} else {
-						Apps.launch(currentItem.modelData);
-						root.visibilities.launcher = false;
-					}
+		}
+		Keys.onUpPressed: list.currentList?.incrementCurrentIndex()
+		onAccepted: {
+			const currentItem = list.currentList?.currentItem;
+			if (currentItem) {
+				if (list.showWallpapers) {
+					if (DynamicColors.scheme === "dynamic" && currentItem.modelData.path !== Wallpapers.actualCurrent)
+						Wallpapers.previewColourLock = true;
+					Wallpapers.setWallpaper(currentItem.modelData.path);
+					root.visibilities.launcher = false;
+				} else if (text.startsWith(Config.launcher.actionPrefix)) {
+					if (text.startsWith(`${Config.launcher.actionPrefix}calc `))
+						currentItem.onClicked();
+					else
+						currentItem.modelData.onClicked(list.currentList);
+				} else {
+					Apps.launch(currentItem.modelData);
+					root.visibilities.launcher = false;
 				}
 			}
-
-			Connections {
-				function onLauncherChanged(): void {
-					if (!root.visibilities.launcher)
-						search.text = "";
-				}
-
-				target: root.visibilities
-			}
 		}
 
-		MaterialIcon {
-			id: clearIcon
-
-			anchors.right: parent.right
-			anchors.rightMargin: root.padding + 10
-			anchors.verticalCenter: parent.verticalCenter
-			color: DynamicColors.palette.m3onSurfaceVariant
-			opacity: {
-				if (!search.text)
-					return 0;
-				if (mouse.pressed)
-					return 0.7;
-				if (mouse.containsMouse)
-					return 0.8;
-				return 1;
-			}
-			text: "close"
-			width: search.text ? implicitWidth : implicitWidth / 2
-
-			Behavior on opacity {
-				Anim {
-					duration: Appearance.anim.durations.small
-				}
-			}
-			Behavior on width {
-				Anim {
-					duration: Appearance.anim.durations.small
-				}
+		Connections {
+			function onLauncherChanged(): void {
+				if (!root.visibilities.launcher)
+					search.text = "";
 			}
 
-			MouseArea {
-				id: mouse
-
-				anchors.fill: parent
-				cursorShape: search.text ? Qt.PointingHandCursor : undefined
-				hoverEnabled: true
-
-				onClicked: search.text = ""
-			}
+			target: root.visibilities
 		}
 	}
 }

Modules/Launcher/ContentList.qml

@@ -17,7 +17,7 @@ Item {
 	required property int padding
 	required property var panels
 	required property int rounding
-	required property CustomTextField search
+	required property SearchBar search
 	readonly property bool showWallpapers: search.text.startsWith(`${Config.launcher.actionPrefix}wallpaper `)
 	required property PersistentProperties visibilities
 

Modules/Launcher/WallpaperList.qml

@@ -37,7 +37,7 @@ PathView {
 		return visible;
 	}
 	required property var panels
-	required property CustomTextField search
+	required property SearchBar search
 	required property var visibilities
 
 	cacheItemCount: 4

Modules/SettingsNew/Common/HyprTimeInput.qml

@@ -1,659 +0,0 @@
-import QtQuick
-import QtQuick.Layouts
-import qs.Config
-import qs.Components
-import qs.Helpers
-
-Item {
-	id: root
-
-	readonly property string endTime: {
-		var d = new Date(0, 0, 0, 0, 0, 0, 0);
-		d.setMinutes(object[settings[2]]);
-		return Qt.formatTime(d, "hh:mm AP");
-	}
-	readonly property bool highlighted: SettingsHighlight.highlightedSetting === name
-	required property string name
-	required property var object
-	required property list<string> settings
-	property bool shouldBeActive: true
-	readonly property string startTime: {
-		var d = new Date(0, 0, 0, 0, 0, 0, 0);
-		d.setMinutes(object[settings[1]]);
-		return Qt.formatTime(d, "hh:mm AP");
-	}
-
-	function commitChoice(choice: int, setting: string): void {
-		root.object[setting] = choice;
-		Config.save();
-		Hyprsunset.checkStartup();
-	}
-
-	function convertHour(timeValue: int): int {
-		return Math.floor(timeValue / 60);
-	}
-
-	function convertMinute(timeValue: int): int {
-		return timeValue % 60;
-	}
-
-	function convertToMinutes(hour: int, minute: int): int {
-		return hour * 60 + minute;
-	}
-
-	Layout.fillWidth: true
-	implicitHeight: shouldBeActive ? row.implicitHeight + Appearance.padding.smaller * 2 : 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 {
-		}
-	}
-
-	Rectangle {
-		anchors.fill: parent
-		anchors.margins: -Appearance.padding.smaller
-		color: DynamicColors.palette.m3primaryContainer
-		opacity: root.highlighted ? 0.5 : 0
-		radius: Appearance.rounding.small
-
-		Behavior on opacity {
-			Anim {
-				duration: Appearance.anim.durations.normal
-			}
-		}
-	}
-
-	RowLayout {
-		id: row
-
-		anchors.left: parent.left
-		anchors.margins: Appearance.padding.small
-		anchors.right: parent.right
-		anchors.verticalCenter: parent.verticalCenter
-
-		ColumnLayout {
-			Layout.fillHeight: true
-			Layout.fillWidth: true
-
-			CustomText {
-				id: text
-
-				Layout.alignment: Qt.AlignLeft
-				Layout.fillWidth: true
-				font.pointSize: Appearance.font.size.larger
-				text: root.name
-			}
-
-			CustomText {
-				Layout.alignment: Qt.AlignLeft
-				Layout.preferredWidth: Math.min(contentWidth, optionLayout.x - Appearance.spacing.normal)
-				color: DynamicColors.palette.m3onSurfaceVariant
-				font.pointSize: Appearance.font.size.normal
-				text: qsTr("Hyprsunset will turn on at %1, and turn off at %2.").arg(root.startTime).arg(root.endTime)
-				wrapMode: Text.WordWrap
-			}
-		}
-
-		ColumnLayout {
-			id: optionLayout
-
-			Layout.fillHeight: true
-			Layout.fillWidth: true
-
-			RowLayout {
-				CustomText {
-					Layout.preferredWidth: spacer.x + spacer.width
-					text: qsTr("Start")
-				}
-
-				CustomText {
-					Layout.preferredWidth: endMinuteRect.width + endHourRect.width
-					text: qsTr("End")
-				}
-
-				CustomText {
-					Layout.alignment: Qt.AlignLeft | Qt.AlignHCenter
-					text: qsTr("Enabled: ")
-				}
-
-				CustomSwitch {
-					id: enabledSwitch
-
-					Layout.alignment: Qt.AlignRight | Qt.AlignHCenter
-					checked: root.object[root.settings[0]]
-
-					onToggled: {
-						root.object[root.settings[0]] = checked;
-						Config.save();
-					}
-				}
-			}
-
-			RowLayout {
-				Layout.fillHeight: true
-
-				CustomRect {
-					id: startHourRect
-
-					Layout.preferredHeight: 72
-					Layout.preferredWidth: 96
-					color: startHourField.focus ? DynamicColors.palette.m3onPrimaryContainer : DynamicColors.palette.m3surfaceContainerHighest
-					implicitHeight: 72
-					implicitWidth: 96
-					radius: Appearance.rounding.small
-
-					CustomRect {
-						anchors.fill: parent
-						border.color: startHourField.focus ? DynamicColors.palette.m3primaryContainer : DynamicColors.palette.m3surfaceContainerHighest
-						border.width: startHourField.focus ? 2 : 0
-						radius: parent.radius - border.width
-
-						Behavior on border.width {
-							Anim {
-							}
-						}
-					}
-
-					CustomTextField {
-						id: startHourField
-
-						function setConfigText(setting: string): string {
-							var val = root.convertHour(root.object[setting]);
-							if (val === 0) {
-								return "00";
-							}
-							return String(val);
-						}
-
-						anchors.left: parent.left
-						anchors.right: parent.right
-						anchors.verticalCenter: parent.verticalCenter
-						clip: true
-						color: focus ? DynamicColors.palette.m3primaryContainer : DynamicColors.palette.m3onSurface
-						cursorHeight: height - Appearance.padding.normal * 2
-						font.family: "Roboto"
-						font.letterSpacing: -0.25
-						font.pixelSize: 56
-						font.weight: 400
-						horizontalAlignment: TextInput.AlignHCenter
-						text: setConfigText(root.settings[1])
-						verticalAlignment: TextInput.AlignVCenter
-
-						Keys.onPressed: event => {
-							if (event.key === Qt.Key_Backspace) {
-								event.accepted = true;
-								if (startHourField.text.length >= 2) {
-									startHourField.text = "0" + startHourField.text[0];
-								} else if (startHourField.text.length === 1) {
-									startHourField.text = "0";
-								}
-								return;
-							} else if (event.key === Qt.Key_Escape) {
-								event.accepted = true;
-								startHourField.text = setConfigText(root.settings[1]);
-								startHourField.focus = false;
-							} else if (event.key === Qt.Key_Return) {
-								startHourField.focus = false;
-								return;
-							} else if (event.key === Qt.Key_Tab) {
-								startMinuteField.focus = true;
-							} else if (event.key === Qt.Key_Backtab) {
-								endMinuteField.focus = true;
-							}
-
-							if (event.text.length === 1 && event.text >= "0" && event.text <= "9") {
-								event.accepted = true;
-								var digit = event.text;
-								var textLen = startHourField.text.length;
-
-								if (textLen >= 2 && startHourField.text[0] !== '0') {
-									return;
-								}
-
-								var val = 0;
-								if (textLen === 0) {
-									val = parseInt(digit);
-								} else if (textLen === 1) {
-									val = parseInt(startHourField.text + digit);
-								} else {
-									val = parseInt(startHourField.text[1] + digit);
-								}
-
-								val = Math.max(0, Math.min(23, val));
-
-								if (textLen >= 2 && val < 10) {
-									startHourField.text = "0" + val;
-								} else {
-									startHourField.text = val.toString();
-								}
-							}
-
-							event.accepted = true;
-						}
-						onCursorPositionChanged: cursorPosition = 2
-						onEditingFinished: {
-							root.commitChoice(root.convertToMinutes(parseInt(startHourField.text), parseInt(startMinuteField.text)), root.settings[1]);
-						}
-						onTextEdited: {
-							if (startHourField.text === "")
-								return;
-							var val = parseInt(startHourField.text);
-							if (isNaN(val))
-								return;
-							val = Math.max(0, Math.min(23, val));
-							var newText = val.toString();
-							if (newText !== startHourField.text)
-								startHourField.text = newText;
-						}
-					}
-				}
-
-				CustomText {
-					id: startSeparator
-
-					font.pointSize: Appearance.font.size.extraLarge
-					text: ":"
-				}
-
-				CustomRect {
-					id: startMinuteRect
-
-					Layout.preferredHeight: 72
-					Layout.preferredWidth: 96
-					color: startMinuteField.focus ? DynamicColors.palette.m3onPrimaryContainer : DynamicColors.palette.m3surfaceContainerHighest
-					implicitHeight: 72
-					implicitWidth: 96
-					radius: Appearance.rounding.small
-
-					CustomRect {
-						anchors.fill: parent
-						border.color: startMinuteField.focus ? DynamicColors.palette.m3primaryContainer : DynamicColors.palette.m3surfaceContainerHighest
-						border.width: startMinuteField.focus ? 2 : 0
-						radius: parent.radius - border.width
-
-						Behavior on border.width {
-							Anim {
-							}
-						}
-					}
-
-					CustomTextField {
-						id: startMinuteField
-
-						function setConfigText(setting: string): string {
-							var val = root.convertMinute(root.object[setting]);
-							if (val === 0) {
-								return "00";
-							}
-							return String(val);
-						}
-
-						anchors.left: parent.left
-						anchors.right: parent.right
-						anchors.verticalCenter: parent.verticalCenter
-						clip: true
-						color: focus ? DynamicColors.palette.m3primaryContainer : DynamicColors.palette.m3onSurface
-						cursorHeight: height - Appearance.padding.normal * 2
-						font.family: "Roboto"
-						font.letterSpacing: -0.25
-						font.pixelSize: 56
-						font.weight: 400
-						horizontalAlignment: TextInput.AlignHCenter
-						text: setConfigText(root.settings[1])
-						verticalAlignment: TextInput.AlignVCenter
-
-						Keys.onPressed: event => {
-							if (event.key === Qt.Key_Backspace) {
-								event.accepted = true;
-								if (startMinuteField.text.length >= 2) {
-									startMinuteField.text = "0" + startMinuteField.text[0];
-								} else if (startMinuteField.text.length === 1) {
-									startMinuteField.text = "0";
-								}
-								return;
-							} else if (event.key === Qt.Key_Escape) {
-								event.accepted = true;
-								startMinuteField.text = setConfigText(root.settings[1]);
-								startMinuteField.focus = false;
-							} else if (event.key === Qt.Key_Return) {
-								startMinuteField.focus = false;
-								return;
-							} else if (event.key === Qt.Key_Tab) {
-								endHourField.focus = true;
-							} else if (event.key === Qt.Key_Backtab) {
-								startHourField.focus = true;
-							}
-
-							if (event.text.length === 1 && event.text >= "0" && event.text <= "9") {
-								event.accepted = true;
-								var digit = event.text;
-								var textLen = startMinuteField.text.length;
-
-								if (textLen >= 2 && startMinuteField.text[0] !== '0') {
-									return;
-								}
-
-								var val = 0;
-								if (textLen === 0) {
-									val = parseInt(digit);
-								} else if (textLen === 1) {
-									val = parseInt(startMinuteField.text + digit);
-								} else {
-									val = parseInt(startMinuteField.text[1] + digit);
-								}
-
-								val = Math.max(0, Math.min(59, val));
-
-								if (textLen >= 2 && val < 10) {
-									startMinuteField.text = "0" + val;
-								} else {
-									startMinuteField.text = val.toString();
-								}
-							}
-
-							event.accepted = true;
-						}
-						onCursorPositionChanged: cursorPosition = 2
-						onEditingFinished: {
-							root.commitChoice(root.convertToMinutes(parseInt(startHourField.text), parseInt(startMinuteField.text)), root.settings[1]);
-						}
-						onTextEdited: {
-							if (startMinuteField.text === "")
-								return;
-							var val = parseInt(startMinuteField.text);
-							if (isNaN(val))
-								return;
-							val = Math.max(0, Math.min(23, val));
-							var newText = val.toString();
-							if (newText !== startMinuteField.text)
-								startMinuteField.text = newText;
-						}
-					}
-				}
-
-				Item {
-					id: spacer
-
-					Layout.preferredWidth: Appearance.spacing.large
-				}
-
-				CustomRect {
-					id: endHourRect
-
-					Layout.preferredHeight: 72
-					Layout.preferredWidth: 96
-					color: endHourField.focus ? DynamicColors.palette.m3onPrimaryContainer : DynamicColors.palette.m3surfaceContainerHighest
-					implicitHeight: 72
-					implicitWidth: 96
-					radius: Appearance.rounding.small
-
-					CustomRect {
-						anchors.fill: parent
-						border.color: endHourField.focus ? DynamicColors.palette.m3primaryContainer : DynamicColors.palette.m3surfaceContainerHighest
-						border.width: endHourField.focus ? 2 : 0
-						radius: parent.radius - border.width
-
-						Behavior on border.width {
-							Anim {
-							}
-						}
-					}
-
-					CustomTextField {
-						id: endHourField
-
-						function setConfigText(setting: string): string {
-							var val = root.convertHour(root.object[setting]);
-							if (val === 0) {
-								return "00";
-							}
-							return String(val);
-						}
-
-						anchors.left: parent.left
-						anchors.right: parent.right
-						anchors.verticalCenter: parent.verticalCenter
-						clip: true
-						color: focus ? DynamicColors.palette.m3primaryContainer : DynamicColors.palette.m3onSurface
-						cursorHeight: height - Appearance.padding.normal * 2
-						font.family: "Roboto"
-						font.letterSpacing: -0.25
-						font.pixelSize: 56
-						font.weight: 400
-						horizontalAlignment: TextInput.AlignHCenter
-						text: setConfigText(root.settings[2])
-						verticalAlignment: TextInput.AlignVCenter
-
-						Keys.onPressed: event => {
-							if (event.key === Qt.Key_Backspace) {
-								event.accepted = true;
-								if (endHourField.text.length >= 2) {
-									endHourField.text = "0" + endHourField.text[0];
-								} else if (endHourField.text.length === 1) {
-									endHourField.text = "0";
-								}
-								return;
-							} else if (event.key === Qt.Key_Escape) {
-								event.accepted = true;
-								endHourField.text = setConfigText(root.settings[2]);
-								endHourField.focus = false;
-							} else if (event.key === Qt.Key_Return) {
-								endHourField.focus = false;
-								return;
-							} else if (event.key === Qt.Key_Tab) {
-								endMinuteField.focus = true;
-							} else if (event.key === Qt.Key_Backtab) {
-								startMinuteField.focus = true;
-							}
-
-							if (event.text.length === 1 && event.text >= "0" && event.text <= "9") {
-								event.accepted = true;
-								var digit = event.text;
-								var textLen = endHourField.text.length;
-
-								if (textLen >= 2 && endHourField.text[0] !== '0') {
-									return;
-								}
-
-								var val = 0;
-								if (textLen === 0) {
-									val = parseInt(digit);
-								} else if (textLen === 1) {
-									val = parseInt(endHourField.text + digit);
-								} else {
-									val = parseInt(endHourField.text[1] + digit);
-								}
-
-								val = Math.max(0, Math.min(23, val));
-
-								if (textLen >= 2 && val < 10) {
-									endHourField.text = "0" + val;
-								} else {
-									endHourField.text = val.toString();
-								}
-							}
-
-							event.accepted = true;
-						}
-						onCursorPositionChanged: cursorPosition = 2
-						onEditingFinished: {
-							root.commitChoice(root.convertToMinutes(parseInt(endHourField.text), parseInt(endMinuteField.text)), root.settings[2]);
-						}
-						onTextEdited: {
-							if (endHourField.text === "")
-								return;
-							var val = parseInt(endHourField.text);
-							if (isNaN(val))
-								return;
-							val = Math.max(0, Math.min(23, val));
-							var newText = val.toString();
-							if (newText !== endHourField.text)
-								endHourField.text = newText;
-						}
-					}
-				}
-
-				CustomText {
-					id: endSeparator
-
-					font.pointSize: Appearance.font.size.extraLarge
-					text: ":"
-				}
-
-				CustomRect {
-					id: endMinuteRect
-
-					Layout.preferredHeight: 72
-					Layout.preferredWidth: 96
-					color: endMinuteField.focus ? DynamicColors.palette.m3onPrimaryContainer : DynamicColors.palette.m3surfaceContainerHighest
-					implicitHeight: 72
-					implicitWidth: 96
-					radius: Appearance.rounding.small
-
-					CustomRect {
-						anchors.fill: parent
-						border.color: endMinuteField.focus ? DynamicColors.palette.m3primaryContainer : DynamicColors.palette.m3surfaceContainerHighest
-						border.width: endMinuteField.focus ? 2 : 0
-						radius: parent.radius - border.width
-
-						Behavior on border.width {
-							Anim {
-							}
-						}
-					}
-
-					CustomTextField {
-						id: endMinuteField
-
-						function setConfigText(setting: string): string {
-							var val = root.convertMinute(root.object[setting]);
-							if (val === 0) {
-								return "00";
-							}
-							return String(val);
-						}
-
-						anchors.left: parent.left
-						anchors.right: parent.right
-						anchors.verticalCenter: parent.verticalCenter
-						clip: true
-						color: focus ? DynamicColors.palette.m3primaryContainer : DynamicColors.palette.m3onSurface
-						cursorHeight: height - Appearance.padding.normal * 2
-						font.family: "Roboto"
-						font.letterSpacing: -0.25
-						font.pixelSize: 56
-						font.weight: 400
-						horizontalAlignment: TextInput.AlignHCenter
-						text: setConfigText(root.settings[2])
-						verticalAlignment: TextInput.AlignVCenter
-
-						Keys.onPressed: event => {
-							if (event.key === Qt.Key_Backspace) {
-								event.accepted = true;
-								if (endMinuteField.text.length >= 2) {
-									endMinuteField.text = "0" + endMinuteField.text[0];
-								} else if (endMinuteField.text.length === 1) {
-									endMinuteField.text = "0";
-								}
-								return;
-							} else if (event.key === Qt.Key_Escape) {
-								event.accepted = true;
-								endMinuteField.text = setConfigText(root.settings[2]);
-								endMinuteField.focus = false;
-							} else if (event.key === Qt.Key_Return) {
-								endMinuteField.focus = false;
-								return;
-							} else if (event.key === Qt.Key_Tab) {
-								startHourField.focus = true;
-							} else if (event.key === Qt.Key_Backtab) {
-								endHourField.focus = true;
-							}
-
-							if (event.text.length === 1 && event.text >= "0" && event.text <= "9") {
-								event.accepted = true;
-								var digit = event.text;
-								var textLen = endMinuteField.text.length;
-
-								if (textLen >= 2 && endMinuteField.text[0] !== '0') {
-									return;
-								}
-
-								var val = 0;
-								if (textLen === 0) {
-									val = parseInt(digit);
-								} else if (textLen === 1) {
-									val = parseInt(endMinuteField.text + digit);
-								} else {
-									val = parseInt(endMinuteField.text[1] + digit);
-								}
-
-								val = Math.max(0, Math.min(59, val));
-
-								if (textLen >= 2 && val < 10) {
-									endMinuteField.text = "0" + val;
-								} else {
-									endMinuteField.text = val.toString();
-								}
-							}
-
-							event.accepted = true;
-						}
-						onCursorPositionChanged: cursorPosition = 2
-						onEditingFinished: {
-							root.commitChoice(root.convertToMinutes(parseInt(endHourField.text), parseInt(endMinuteField.text)), root.settings[2]);
-						}
-						onTextEdited: {
-							if (endMinuteField.text === "")
-								return;
-							var val = parseInt(endMinuteField.text);
-							if (isNaN(val))
-								return;
-							val = Math.max(0, Math.min(23, val));
-							var newText = val.toString();
-							if (newText !== endMinuteField.text)
-								endMinuteField.text = newText;
-						}
-					}
-				}
-			}
-
-			RowLayout {
-				Layout.fillWidth: true
-
-				CustomText {
-					id: startHour
-
-					Layout.preferredWidth: startSeparator.x + startSeparator.width
-					text: qsTr("Hour")
-				}
-
-				CustomText {
-					id: startMinute
-
-					Layout.preferredWidth: spacer.x + spacer.width - x
-					text: qsTr("Minute")
-				}
-
-				CustomText {
-					Layout.preferredWidth: endSeparator.x + endSeparator.width - x
-					text: qsTr("Hour")
-				}
-
-				CustomText {
-					text: qsTr("Minute")
-				}
-			}
-		}
-	}
-}

Modules/SettingsNew/Common/PageBase.qml

@@ -25,6 +25,8 @@ ColumnLayout {
 		implicitWidth: header.implicitWidth
 		z: 1
 
+		onClicked: focus = true
+
 		RowLayout {
 			id: header
 
@@ -66,5 +68,9 @@ ColumnLayout {
 		contentItem.children: [root.contentChild]
 		fadeAmount: 0.1
 		topMargin: Appearance.padding.large
+
+		TapHandler {
+			onTapped: flickable.focus = true
+		}
 	}
 }

Modules/SettingsNew/Common/PopupRow.qml

@@ -85,7 +85,7 @@ ConnectedRect {
 				anchors.fill: parent
 				cursorShape: popup.open ? Qt.ArrowCursor : undefined
 				enabled: popup.open
-				hoverEnabled: true
+				hoverEnabled: popup.open
 				parent: {
 					if (root.keepPopupAsChild)
 						return triggerArea;
@@ -94,8 +94,6 @@ ConnectedRect {
 					const contentWin = win as Windows; // If inside the drawer content window, put it inside the interaction wrapper so hover works
 					return contentWin ? contentWin.interactionWrapper : (win as QsWindow).contentItem;
 				}
-				preventStealing: true
-				propagateComposedEvents: false
 				z: popup.animDriver > 0 ? 1 : 0
 
 				onClicked: popup.open = false

Modules/SettingsNew/Common/SpinRow.qml

@@ -52,12 +52,12 @@ ConnectedRect {
 		}
 
 		CustomSpinBox {
-			max: root.to
-			min: root.from
-			step: root.stepSize
+			from: root.from
+			stepSize: root.stepSize
+			to: root.to
 			value: root.value
 
-			onValueModified: v => root.moved(v)
+			onValueModified: root.moved(value)
 		}
 	}
 }

Modules/SettingsNew/Common/TimeInput.qml

@@ -68,7 +68,7 @@ CustomClippingRect {
 					}
 				}
 
-				CustomTextField {
+				TextFieldBase {
 					id: startHourField
 
 					function setConfigText(setting: string): string {
@@ -84,7 +84,6 @@ CustomClippingRect {
 					anchors.verticalCenter: parent.verticalCenter
 					clip: true
 					color: focus ? DynamicColors.palette.m3primaryContainer : DynamicColors.palette.m3onSurface
-					cursorHeight: height - Appearance.padding.normal * 2
 					font.family: "Roboto"
 					font.letterSpacing: -0.25
 					font.pixelSize: 56
@@ -188,7 +187,7 @@ CustomClippingRect {
 					}
 				}
 
-				CustomTextField {
+				TextFieldBase {
 					id: startMinuteField
 
 					function setConfigText(setting: string): string {
@@ -204,7 +203,6 @@ CustomClippingRect {
 					anchors.verticalCenter: parent.verticalCenter
 					clip: true
 					color: focus ? DynamicColors.palette.m3primaryContainer : DynamicColors.palette.m3onSurface
-					cursorHeight: height - Appearance.padding.normal * 2
 					font.family: "Roboto"
 					font.letterSpacing: -0.25
 					font.pixelSize: 56
@@ -307,7 +305,7 @@ CustomClippingRect {
 					}
 				}
 
-				CustomTextField {
+				TextFieldBase {
 					id: endHourField
 
 					function setConfigText(setting: string): string {
@@ -323,7 +321,6 @@ CustomClippingRect {
 					anchors.verticalCenter: parent.verticalCenter
 					clip: true
 					color: focus ? DynamicColors.palette.m3primaryContainer : DynamicColors.palette.m3onSurface
-					cursorHeight: height - Appearance.padding.normal * 2
 					font.family: "Roboto"
 					font.letterSpacing: -0.25
 					font.pixelSize: 56
@@ -427,7 +424,7 @@ CustomClippingRect {
 					}
 				}
 
-				CustomTextField {
+				TextFieldBase {
 					id: endMinuteField
 
 					function setConfigText(setting: string): string {
@@ -443,7 +440,6 @@ CustomClippingRect {
 					anchors.verticalCenter: parent.verticalCenter
 					clip: true
 					color: focus ? DynamicColors.palette.m3primaryContainer : DynamicColors.palette.m3onSurface
-					cursorHeight: height - Appearance.padding.normal * 2
 					font.family: "Roboto"
 					font.letterSpacing: -0.25
 					font.pixelSize: 56

Modules/SettingsNew/Content.qml

@@ -27,6 +27,10 @@ CustomClippingRect {
 		}
 	}
 
+	TapHandler {
+		onTapped: root.focus = true
+	}
+
 	BlobGroup {
 		id: blobGroup
 

Modules/SettingsNew/NavPane.qml

@@ -1,5 +1,6 @@
 import QtQuick
 import QtQuick.Layouts
+import qs.Components
 import qs.Modules.SettingsNew.NavPane
 import qs.Config
 
@@ -11,8 +12,28 @@ ColumnLayout {
 	spacing: Appearance.spacing.large
 
 	SearchBar {
+		id: searchField
+
 		Layout.fillWidth: true
-		sState: root.sState
+		bg.border.color: DynamicColors.palette.m3outlineVariant
+		bg.color: DynamicColors.tPalette.m3surfaceContainerLowest
+		clearIcon.font.pointSize: Appearance.font.size.large
+		clearIcon.padding: Appearance.padding.extraSmall
+		font.pointSize: Appearance.font.size.normal
+		placeholderText: qsTr("Search settings")
+		searchIcon.anchors.leftMargin: Appearance.padding.largeIncreased
+		searchIcon.font.pointSize: Appearance.font.size.large
+
+		Behavior on bg.border.color {
+			CAnim {
+			}
+		}
+
+		Binding {
+			property: "searchOpen"
+			target: root.sState
+			value: searchField.text.length > 0
+		}
 	}
 
 	NavLocations {

Modules/SettingsNew/NavPane/NavLocations.qml

@@ -16,6 +16,10 @@ VerticalFadeFlickable {
 	fadeAmount: 0.1
 	topMargin: Appearance.padding.large
 
+	TapHandler {
+		onTapped: root.focus = true
+	}
+
 	ColumnLayout {
 		id: content
 

Modules/SettingsNew/NavPane/SearchBar.qml

@@ -1,75 +0,0 @@
-import QtQuick
-import QtQuick.Layouts
-import qs.Modules.SettingsNew
-import qs.Components
-import qs.Config
-
-CustomRect {
-	id: root
-
-	required property SettingsState sState
-
-	border.color: DynamicColors.palette.m3outlineVariant
-	color: DynamicColors.tPalette.m3surfaceContainerLowest
-	implicitHeight: searchLayout.implicitHeight + Appearance.padding.normal * 2
-	radius: Appearance.rounding.full
-
-	Behavior on border.color {
-		CAnim {
-		}
-	}
-
-	MouseArea {
-		anchors.fill: parent
-		cursorShape: Qt.IBeamCursor
-
-		onClicked: searchField.focus = true
-	}
-
-	RowLayout {
-		id: searchLayout
-
-		anchors.left: parent.left
-		anchors.margins: Appearance.padding.large
-		anchors.right: parent.right
-		anchors.verticalCenter: parent.verticalCenter
-		spacing: Appearance.spacing.small
-
-		MaterialIcon {
-			color: DynamicColors.palette.m3onSurfaceVariant
-			text: "search"
-		}
-
-		CustomTextField {
-			id: searchField
-
-			Layout.fillHeight: true
-			Layout.fillWidth: true
-			color: DynamicColors.palette.m3onSurfaceVariant
-			placeholderText: qsTr("Search settings")
-			placeholderTextColor: DynamicColors.palette.m3onSurfaceVariant
-
-			Binding {
-				property: "searchOpen"
-				target: root.sState
-				value: searchField.text.length > 0
-			}
-		}
-
-		IconButton {
-			icon: "close"
-			isRound: true
-			opacity: searchField.text.length > 0 ? 1 : 0
-			padding: Appearance.padding.extraSmall
-			type: IconButton.Text
-
-			Behavior on opacity {
-				Anim {
-					type: Anim.DefaultEffects
-				}
-			}
-
-			onClicked: searchField.clear()
-		}
-	}
-}

Modules/SettingsNew/Pages/AboutPage.qml

@@ -54,7 +54,7 @@ PageBase {
 				CustomText {
 					Layout.alignment: Qt.AlignHCenter
 					color: DynamicColors.palette.m3onSurfaceVariant
-					font: Appearance.font.body.medium
+					font.pointSize: Appearance.font.size.medium
 					text: ZUtils.version ? `v${ZUtils.version}` : "…"
 				}
 			}