remove old Settings, rename new

Modules/Settings/Common/TimeInput.qml

@@ -0,0 +1,581 @@
+import QtQuick
+import QtQuick.Layouts
+import ZShell.Components
+import qs.Config
+import qs.Components
+import qs.Helpers
+
+CustomClippingRect {
+	id: root
+
+	required property var object
+	required property list<string> settings
+	property bool shouldBeActive: true
+
+	signal applySettings(startTime: int, endTime: int)
+	signal close
+
+	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;
+	}
+
+	color: DynamicColors.palette.m3surfaceContainer
+	implicitHeight: column.implicitHeight + column.anchors.margins * 2 + buttonRow.implicitHeight + buttonRow.anchors.topMargin
+	implicitWidth: column.implicitWidth + column.anchors.margins * 2
+	radius: Appearance.rounding.large
+
+	ColumnLayout {
+		id: column
+
+		anchors.left: parent.left
+		anchors.margins: Appearance.padding.largeIncreased
+		anchors.right: parent.right
+		anchors.top: parent.top
+		spacing: Appearance.spacing.normal
+
+		CustomText {
+			text: qsTr("Select time")
+		}
+
+		RowLayout {
+			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 {
+						}
+					}
+				}
+
+				TextFieldBase {
+					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
+					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
+					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 {
+						}
+					}
+				}
+
+				TextFieldBase {
+					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
+					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
+					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 {
+						}
+					}
+				}
+
+				TextFieldBase {
+					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
+					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
+					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 {
+						}
+					}
+				}
+
+				TextFieldBase {
+					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
+					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
+					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 {
+			CustomText {
+				Layout.preferredWidth: spacer.x + spacer.width
+				text: qsTr("Start")
+			}
+
+			CustomText {
+				Layout.preferredWidth: endMinuteRect.width + endHourRect.width
+				text: qsTr("End")
+			}
+		}
+	}
+
+	RowLayout {
+		id: buttonRow
+
+		anchors.bottom: parent.bottom
+		anchors.left: parent.left
+		anchors.margins: Appearance.padding.largeIncreased
+		anchors.right: parent.right
+		anchors.top: column.bottom
+		anchors.topMargin: Appearance.spacing.normal
+
+		Item {
+			id: buttonSpacer
+
+			Layout.fillWidth: true
+		}
+
+		ButtonRow {
+			spacing: Appearance.spacing.normal
+
+			IconTextButton {
+				font.pointSize: Appearance.font.size.normal
+				icon: "close"
+				inactiveColor: DynamicColors.layer(DynamicColors.palette.m3surfaceContainerHighest, 2)
+				inactiveOnColor: DynamicColors.palette.m3onSurfaceVariant
+				isRound: true
+				isToggle: false
+				shapeMorph: true
+				shapeMorphExpansion: pressed ? 12 : 0
+				text: "Cancel"
+
+				onClicked: root.close()
+			}
+
+			IconTextButton {
+				font.pointSize: Appearance.font.size.normal
+				icon: "check"
+				isRound: true
+				isToggle: false
+				shapeMorph: true
+				shapeMorphExpansion: pressed ? 12 : 0
+				text: "Apply"
+
+				onClicked: {
+					const start = root.convertToMinutes(parseInt(startHourField.text)) + parseInt(startMinuteField.text);
+					const end = root.convertToMinutes(parseInt(endHourField.text)) + parseInt(endMinuteField.text);
+					root.applySettings(start, end);
+				}
+			}
+		}
+	}
+}