vyn/mirai
1
Fork 0
mirror of https://codeberg.org/vyn/mirai.git synced 2025-07-02 01:13:19 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

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

Browse source
This commit is contained in:
Vyn 2024-05-22 18:00:56 +02:00
parent 4164d8fbf3
commit 3bbcf60c61
7 changed files with 102 additions and 74 deletions
Download patch file Download diff file Expand all files Collapse all files

1
CMakeLists.txt
View file

@ -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

35
src/qml/AppButton.qml
View file

@ -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"

17
src/qml/Main.qml
View file

@ -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()
}
}
}
}

31
src/qml/SideMenu.qml
View file

@ -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

26
src/qml/components/Modal.qml Normal file
View file

@ -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
}
}

25
src/qml/forms/FilesForm.qml
View file

@ -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 {

41
src/qml/forms/TaskForm.qml
View file

@ -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()
}
}
}