From 3bbcf60c61646d0655a37785645312ffa324f9e9 Mon Sep 17 00:00:00 2001 From: Vyn Date: Wed, 22 May 2024 18:00:56 +0200 Subject: [PATCH] Rework Button and add Modal to have a better experience on Phone --- CMakeLists.txt | 1 + src/qml/AppButton.qml | 35 ++++++++++++------------------ src/qml/Main.qml | 17 +++++---------- src/qml/SideMenu.qml | 31 ++++----------------------- src/qml/components/Modal.qml | 26 +++++++++++++++++++++++ src/qml/forms/FilesForm.qml | 25 +++++++++++++++++----- src/qml/forms/TaskForm.qml | 41 ++++++++++++++++++++++++++++-------- 7 files changed, 102 insertions(+), 74 deletions(-) create mode 100644 src/qml/components/Modal.qml diff --git a/CMakeLists.txt b/CMakeLists.txt index f7c9abe..cbd29fc 100644 --- a/CMakeLists.txt +++ b/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 diff --git a/src/qml/AppButton.qml b/src/qml/AppButton.qml index eaa99bb..792679c 100644 --- a/src/qml/AppButton.qml +++ b/src/qml/AppButton.qml @@ -11,30 +11,23 @@ import Mirai Button { id: control - icon.color: MiraiColorPalette.buttonIcon property bool noBackgroundColor: false - contentItem: RowLayout { - spacing: control.icon.source != "" ? 4 : 0 - Component { - id: buttonIcon - AppIcon { - icon.source: control.icon.source - icon.color: control?.icon?.color - } - } + icon.color: MiraiColorPalette.buttonIcon - Loader { - sourceComponent: control.icon.source != "" ? buttonIcon : undefined - } - - Text { - text: control.text - color: MiraiColorPalette.text - leftPadding: 8 - rightPadding: 8 - } - } + // I have a different behavior when setting padding for Android + padding: root.isPhone ? undefined : 8 + + contentItem: IconLabel { + spacing: control.spacing + mirrored: control.mirrored + display: control.display + + icon: control.icon + text: control.text + font: control.font + color: MiraiColorPalette.text + } background: Rectangle { color: control.noBackgroundColor ? "transparent" diff --git a/src/qml/Main.qml b/src/qml/Main.qml index 0ba3ae9..89b3478 100644 --- a/src/qml/Main.qml +++ b/src/qml/Main.qml @@ -111,25 +111,18 @@ Window { onWidthChanged: setFittingLayout() Component.onCompleted: setFittingLayout() - Popup { + Modal { id: taskFormPopup - width: parent.width * 0.75 - 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 - } + fullScreen: root.isPhone TaskForm { id: taskForm width: parent.width onConfirmed: { taskFormPopup.close() } + onCanceled: { + taskFormPopup.close() + } } } } diff --git a/src/qml/SideMenu.qml b/src/qml/SideMenu.qml index d7a2047..0294b8f 100644 --- a/src/qml/SideMenu.qml +++ b/src/qml/SideMenu.qml @@ -129,21 +129,9 @@ Rectangle { Layout.fillHeight: true } - - Popup { - parent: Overlay.overlay + Modal { id: filesFormPopup - width: parent.width * 0.75 - 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 - } + fullScreen: root.isPhone FilesForm { id: filesForm width: parent.width @@ -155,20 +143,9 @@ Rectangle { } } - Popup { - parent: Overlay.overlay + Modal { id: tagsFormPopup - width: parent.width * 0.75 - 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 - } + fullScreen: root.isPhone TagsConfigForm { id: tagsForm width: parent.width diff --git a/src/qml/components/Modal.qml b/src/qml/components/Modal.qml new file mode 100644 index 0000000..cc28c3f --- /dev/null +++ b/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 + } +} diff --git a/src/qml/forms/FilesForm.qml b/src/qml/forms/FilesForm.qml index 66587d3..6ee5624 100644 --- a/src/qml/forms/FilesForm.qml +++ b/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 { - text: "+ Add" - onClicked: { - fileDialog.open() - } + Item { + Layout.preferredHeight: 32 } AppButton { diff --git a/src/qml/forms/TaskForm.qml b/src/qml/forms/TaskForm.qml index 882037b..7c2ffca 100644 --- a/src/qml/forms/TaskForm.qml +++ b/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) { - backend.updateTodoFromRawFormat(taskToEditIndex, newTodoContent.text, newTodoDate.text) - } else { - backend.addTodoFromRawFormat( - file.currentValue, - newTodoContent.text, - newTodoDate.text != "" ? newTodoDate.text : "No date" - ) + createTask() + } + } + + RowLayout { + spacing: 8 + AppButton { + text: "Create" + onClicked: { + createTask() + } + } + + AppButton { + text: "Cancel" + onClicked: { + form.canceled() } - form.confirmed() } } }