Rework Button and add Modal to have a better experience on Phone

CMakeLists.txt

@@ -58,6 +58,7 @@ qt_add_qml_module(mirai
 		src/qml/components/TabSelector.qml
 		src/qml/components/Tag.qml
 		src/qml/components/Calendar.qml
+		src/qml/components/Modal.qml
 		src/qml/styles/MiraiColorPalette.qml
 		src/qml/styles/CatppuccinFrappe.qml
 		src/qml/views/ListView.qml

src/qml/AppButton.qml

@@ -11,30 +11,23 @@ import Mirai
 
 Button {
 	id: control
-	icon.color: MiraiColorPalette.buttonIcon
 	property bool noBackgroundColor: false
 
-	contentItem: RowLayout {
+	icon.color: MiraiColorPalette.buttonIcon
-		spacing: control.icon.source != "" ? 4 : 0
-		Component {
-			id: buttonIcon
-			AppIcon {
-				icon.source: control.icon.source
-				icon.color: control?.icon?.color
-			}
-		}
 
-		Loader {
+	// I have a different behavior when setting padding for Android
-			sourceComponent: control.icon.source != "" ? buttonIcon : undefined
+	padding: root.isPhone ? undefined : 8
-		}
 
-		Text {
+	contentItem: IconLabel {
-			text: control.text
+        spacing: control.spacing
-			color: MiraiColorPalette.text
+        mirrored: control.mirrored
-			leftPadding: 8
+        display: control.display
-			rightPadding: 8
+
-		}
+        icon: control.icon
-	}
+        text: control.text
+        font: control.font
+        color: MiraiColorPalette.text
+    }
 
 	background: Rectangle {
 		color: control.noBackgroundColor ? "transparent"

src/qml/Main.qml

@@ -111,25 +111,18 @@ Window {
 	onWidthChanged: setFittingLayout()
 	Component.onCompleted: setFittingLayout()
 
-	Popup {
+	Modal {
 		id: taskFormPopup
-		width: parent.width * 0.75
+		fullScreen: root.isPhone
-		implicitHeight: taskForm.height + padding * 2
-		x: Math.round((parent.width - width) / 2)
-		y: Math.round((parent.height * 0.4) / 2)
-		padding: 8
-		background: Rectangle {
-			border.color: colorPalette.selected.modalBorder
-			border.width: 2
-			color: colorPalette.selected.pane
-			radius: 4
-		}
 		TaskForm {
 			id: taskForm
 			width: parent.width
 			onConfirmed: {
 				taskFormPopup.close()
 			}
+			onCanceled: {
+				taskFormPopup.close()
+			}
 		}
 	}
 }

src/qml/SideMenu.qml

@@ -129,21 +129,9 @@ Rectangle {
 			Layout.fillHeight: true
 		}
 
-
+		Modal {
-		Popup {
-			parent: Overlay.overlay
 			id: filesFormPopup
-			width: parent.width * 0.75
+			fullScreen: root.isPhone
-			implicitHeight: filesForm.height + padding * 2
-			x: Math.round((parent.width - width) / 2)
-			y: Math.round((parent.height * 0.4) / 2)
-			padding: 8
-			background: Rectangle {
-				border.color: colorPalette.selected.modalBorder
-				border.width: 2
-				color: colorPalette.selected.pane
-				radius: 4
-			}
 			FilesForm {
 				id: filesForm
 				width: parent.width
@@ -155,20 +143,9 @@ Rectangle {
 			}
 		}
 
-		Popup {
+		Modal {
-			parent: Overlay.overlay
 			id: tagsFormPopup
-			width: parent.width * 0.75
+			fullScreen: root.isPhone
-			implicitHeight: tagsForm.height + padding * 2
-			x: Math.round((parent.width - width) / 2)
-			y: Math.round((parent.height * 0.4) / 2)
-			padding: 8
-			background: Rectangle {
-				border.color: colorPalette.selected.modalBorder
-				border.width: 2
-				color: colorPalette.selected.pane
-				radius: 4
-			}
 			TagsConfigForm {
 				id: tagsForm
 				width: parent.width

src/qml/components/Modal.qml

@@ -0,0 +1,26 @@
+/* 
+ * Mirai. Copyright (C) 2024 Vyn
+ * This file is licensed under version 3 of the GNU General Public License (GPL-3.0-only)
+ * The license can be found in the LICENSE file or at https://www.gnu.org/licenses/gpl-3.0.txt
+ */
+
+import QtQuick
+import QtQuick.Window
+import QtQuick.Controls
+
+Popup {
+	property bool fullScreen: false
+
+	parent: Overlay.overlay
+	width: parent.width * (fullScreen ? 1 : 0.75)
+	height: fullScreen ? parent.height : undefined
+	x: Math.round((parent.width - width) / 2)
+	y: fullScreen ? 0 : Math.round((parent.height * 0.4) / 2)
+	padding: 8
+	background: Rectangle {
+		border.color: colorPalette.selected.modalBorder
+		border.width: 2
+		color: colorPalette.selected.pane
+		radius: 4
+	}
+}

src/qml/forms/FilesForm.qml

@@ -28,6 +28,15 @@ ColumnLayout {
 		property var paths
 	}
 
+	AppText {
+		text: "Files"
+		font.pixelSize: 32
+	}
+
+	Item {
+		Layout.preferredHeight: 32
+	}
+
 	Repeater {
 		model: internal.paths
 		ColumnLayout {
@@ -40,6 +49,15 @@ ColumnLayout {
 		}
 	}
 
+	AppButton {
+		text: "Add"
+		icon.source: "qrc:/qt/qml/Mirai/src/images/add.png"
+		icon.color: colorPalette.selected.palette.green
+		onClicked: {
+			fileDialog.open()
+		}
+	}
+
 	FileDialog {
         id: fileDialog
 		onAccepted: {
@@ -48,11 +66,8 @@ ColumnLayout {
 		}
     }
 
-	AppButton {
+	Item {
-		text: "+ Add"
+		Layout.preferredHeight: 32
-		onClicked: {
-			fileDialog.open()
-		}
 	}
 
 	AppButton {

src/qml/forms/TaskForm.qml

@@ -16,12 +16,27 @@ ColumnLayout {
 	property int taskToEditIndex
 	spacing: 6
 	signal confirmed
+	signal canceled
 
 	onTaskToEditChanged: {
 		newTodoContent.text = taskToEdit?.rawFormat ?? "- [ ] "
 		newTodoDate.text = taskToEdit?.date ?? ""
 	}
 
+	function createTask() {
+		
+		if (taskToEdit && taskToEditIndex !== undefined) {
+			backend.updateTodoFromRawFormat(taskToEditIndex, newTodoContent.text, newTodoDate.text)
+		} else {
+			backend.addTodoFromRawFormat(
+				file.currentValue,
+				newTodoContent.text,
+				newTodoDate.text != "" ? newTodoDate.text : "No date"
+			)
+		}
+		form.confirmed()
+	}
+
 	AppText {
 		text: "New/Edit task"
 	}
@@ -57,16 +72,24 @@ ColumnLayout {
 			if (newTodoContent.text == "") {
 				return 
 			}
-			if (taskToEdit && taskToEditIndex !== undefined) {
+			createTask()
-				backend.updateTodoFromRawFormat(taskToEditIndex, newTodoContent.text, newTodoDate.text)
+		}
-			} else {
+	}
-				backend.addTodoFromRawFormat(
+
-					file.currentValue,
+	RowLayout {
-					newTodoContent.text,
+		spacing: 8
-					newTodoDate.text != "" ? newTodoDate.text : "No date"
+		AppButton {
-				)
+			text: "Create"
+			onClicked: {
+				createTask()
+			}
+		}
+
+		AppButton {
+			text: "Cancel"
+			onClicked: {
+				form.canceled()
 			}
-			form.confirmed()
 		}
 	}
 }