mirror of
https://codeberg.org/vyn/mirai.git
synced 2025-07-03 18:23:19 +00:00
Add basic responsive layout for Phone
This commit is contained in:
parent
1416b5db58
commit
375a1bfb2d
7 changed files with 360 additions and 293 deletions
170
src/qml/Main.qml
170
src/qml/Main.qml
|
|
@ -51,123 +51,65 @@ Window {
|
|||
taskFormPopup.open()
|
||||
}
|
||||
|
||||
Component {
|
||||
id: sideMenuComponent
|
||||
SideMenu {
|
||||
id: sideMenu
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
Component {
|
||||
id: mainPanelComponent
|
||||
MainPanel {
|
||||
}
|
||||
}
|
||||
|
||||
RowLayout {
|
||||
id: desktopLayout
|
||||
anchors.fill: parent
|
||||
spacing: 0
|
||||
|
||||
Rectangle {
|
||||
color: MiraiColorPalette.pane
|
||||
Layout.preferredWidth: childrenRect.width + 20
|
||||
Layout.fillHeight: true
|
||||
|
||||
SideMenu {
|
||||
anchors.top: parent.top
|
||||
anchors.bottom: parent.bottom
|
||||
anchors.left: parent.left
|
||||
anchors.margins: 10
|
||||
}
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
color: colorPalette.selected.background
|
||||
Layout.fillWidth: true
|
||||
Layout.fillHeight: true
|
||||
ColumnLayout {
|
||||
anchors.fill: parent
|
||||
anchors.margins: 10
|
||||
spacing: 16
|
||||
|
||||
TabSelector {
|
||||
Layout.fillWidth: true
|
||||
Layout.preferredHeight: childrenRect.height
|
||||
|
||||
tabs: [
|
||||
{
|
||||
label: "Todo",
|
||||
onClick: () => {
|
||||
backend.hideCompletedTasks(true) // Little workaround for now.
|
||||
root.selectedView = "list"
|
||||
},
|
||||
selected: root.selectedView === "list"
|
||||
},
|
||||
{
|
||||
label: "Calendar",
|
||||
onClick: () => {
|
||||
backend.hideCompletedTasks(false) // Little workaround for now.
|
||||
root.selectedView = "calendar"
|
||||
},
|
||||
selected: root.selectedView === "calendar"
|
||||
}
|
||||
]
|
||||
|
||||
}
|
||||
|
||||
AppButton {
|
||||
icon.source: "qrc:/qt/qml/Mirai/src/images/add.png"
|
||||
icon.color: colorPalette.selected.palette.green
|
||||
text: "Add task"
|
||||
onClicked: {
|
||||
root.newTask()
|
||||
}
|
||||
}
|
||||
|
||||
Component {
|
||||
id: listViewComponent
|
||||
ListView {
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
Component {
|
||||
id: calendarViewComponent
|
||||
CalendarView {
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
Component {
|
||||
id: gettingStartedComponent
|
||||
AppText {
|
||||
text: "You currently have no files loaded, you can add them by clicking on the cog icon on the left pane"
|
||||
anchors.centerIn: parent
|
||||
horizontalAlignment: Text.AlignHCenter
|
||||
verticalAlignment: Text.AlignVCenter
|
||||
}
|
||||
}
|
||||
|
||||
Loader {
|
||||
sourceComponent: backend.tasks.length === 0 ? gettingStartedComponent
|
||||
: selectedView === "list" ? listViewComponent
|
||||
: selectedView === "calendar" ? calendarViewComponent
|
||||
: undefined
|
||||
Layout.fillWidth: true
|
||||
Layout.fillHeight: true
|
||||
}
|
||||
|
||||
|
||||
|
||||
Popup {
|
||||
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
|
||||
}
|
||||
TaskForm {
|
||||
id: taskForm
|
||||
width: parent.width
|
||||
onConfirmed: {
|
||||
taskFormPopup.close()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Loader {
|
||||
sourceComponent: sideMenuComponent
|
||||
Layout.preferredWidth: item.width
|
||||
Layout.fillHeight: true
|
||||
}
|
||||
Loader {
|
||||
sourceComponent: mainPanelComponent
|
||||
Layout.fillWidth: true
|
||||
Layout.fillHeight: true
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
SwipeView {
|
||||
id: phoneLayout
|
||||
anchors.fill: parent
|
||||
spacing: 0
|
||||
|
||||
Loader {
|
||||
sourceComponent: sideMenuComponent
|
||||
Layout.preferredWidth: item.width
|
||||
Layout.fillHeight: true
|
||||
}
|
||||
Loader {
|
||||
sourceComponent: mainPanelComponent
|
||||
Layout.fillWidth: true
|
||||
Layout.fillHeight: true
|
||||
}
|
||||
}
|
||||
|
||||
function setFittingLayout() {
|
||||
if (width > height) {
|
||||
desktopLayout.visible = true
|
||||
phoneLayout.visible = false
|
||||
} else {
|
||||
desktopLayout.visible = false
|
||||
phoneLayout.visible = true
|
||||
phoneLayout.setCurrentIndex(1)
|
||||
}
|
||||
}
|
||||
onWidthChanged: setFittingLayout()
|
||||
Component.onCompleted: setFittingLayout()
|
||||
}
|
||||
|
|
|
|||
112
src/qml/MainPanel.qml
Normal file
112
src/qml/MainPanel.qml
Normal file
|
|
@ -0,0 +1,112 @@
|
|||
/*
|
||||
* 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
|
||||
import QtQuick.Layouts
|
||||
import Mirai
|
||||
|
||||
Rectangle {
|
||||
color: colorPalette.selected.background
|
||||
|
||||
ColumnLayout {
|
||||
anchors.fill: parent
|
||||
anchors.margins: 10
|
||||
spacing: 16
|
||||
|
||||
TabSelector {
|
||||
Layout.fillWidth: true
|
||||
Layout.preferredHeight: childrenRect.height
|
||||
|
||||
tabs: [
|
||||
{
|
||||
label: "Todo",
|
||||
onClick: () => {
|
||||
backend.hideCompletedTasks(true) // Little workaround for now.
|
||||
root.selectedView = "list"
|
||||
},
|
||||
selected: root.selectedView === "list"
|
||||
},
|
||||
{
|
||||
label: "Calendar",
|
||||
onClick: () => {
|
||||
backend.hideCompletedTasks(false) // Little workaround for now.
|
||||
root.selectedView = "calendar"
|
||||
},
|
||||
selected: root.selectedView === "calendar"
|
||||
}
|
||||
]
|
||||
|
||||
}
|
||||
|
||||
AppButton {
|
||||
icon.source: "qrc:/qt/qml/Mirai/src/images/add.png"
|
||||
icon.color: colorPalette.selected.palette.green
|
||||
text: "Add task"
|
||||
onClicked: {
|
||||
root.newTask()
|
||||
}
|
||||
}
|
||||
|
||||
Component {
|
||||
id: listViewComponent
|
||||
ListView {
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
Component {
|
||||
id: calendarViewComponent
|
||||
CalendarView {
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
Component {
|
||||
id: gettingStartedComponent
|
||||
AppText {
|
||||
text: "You currently have no files loaded, you can add them by clicking on the cog icon on the left pane"
|
||||
anchors.centerIn: parent
|
||||
horizontalAlignment: Text.AlignHCenter
|
||||
verticalAlignment: Text.AlignVCenter
|
||||
}
|
||||
}
|
||||
|
||||
Loader {
|
||||
sourceComponent: backend.tasks.length === 0 ? gettingStartedComponent
|
||||
: selectedView === "list" ? listViewComponent
|
||||
: selectedView === "calendar" ? calendarViewComponent
|
||||
: undefined
|
||||
Layout.fillWidth: true
|
||||
Layout.fillHeight: true
|
||||
}
|
||||
|
||||
|
||||
|
||||
Popup {
|
||||
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
|
||||
}
|
||||
TaskForm {
|
||||
id: taskForm
|
||||
width: parent.width
|
||||
onConfirmed: {
|
||||
taskFormPopup.close()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -10,169 +10,178 @@ import QtQuick.Layouts
|
|||
import QtQuick.Controls
|
||||
import Mirai
|
||||
|
||||
ColumnLayout {
|
||||
Rectangle {
|
||||
|
||||
RowLayout {
|
||||
AppText {
|
||||
text: "Files"
|
||||
font.pixelSize: 32
|
||||
}
|
||||
color: MiraiColorPalette.pane
|
||||
implicitWidth: childrenRect.width + 20
|
||||
|
||||
Item { Layout.fillWidth: true }
|
||||
AppIcon {
|
||||
icon.source: "qrc:/qt/qml/Mirai/src/images/settings.png"
|
||||
icon.color: colorPalette.selected.textPlaceholder
|
||||
onClicked: {
|
||||
filesForm.reset();
|
||||
filesFormPopup.open();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Item { Layout.preferredHeight: 16 }
|
||||
|
||||
Repeater {
|
||||
model: backend.files
|
||||
Rectangle {
|
||||
Layout.preferredHeight: childrenRect.height
|
||||
Layout.fillWidth: true
|
||||
color: backend.activeFilesFilter.includes(modelData.name) ? MiraiColorPalette.filterSelected : mouse.hovered ? MiraiColorPalette.filterHovered : "transparent"
|
||||
radius: 4
|
||||
ColumnLayout {
|
||||
anchors.top: parent.top
|
||||
anchors.bottom: parent.bottom
|
||||
anchors.left: parent.left
|
||||
anchors.margins: 10
|
||||
RowLayout {
|
||||
AppText {
|
||||
text: modelData.name
|
||||
padding: 4
|
||||
text: "Files"
|
||||
font.pixelSize: 32
|
||||
}
|
||||
MouseArea {
|
||||
anchors.fill: parent
|
||||
|
||||
Item { Layout.fillWidth: true }
|
||||
AppIcon {
|
||||
icon.source: "qrc:/qt/qml/Mirai/src/images/settings.png"
|
||||
icon.color: colorPalette.selected.textPlaceholder
|
||||
onClicked: {
|
||||
if (backend.activeFilesFilter.includes(modelData.name)) {
|
||||
backend.removeFileFilter(modelData.name)
|
||||
} else {
|
||||
backend.addFileFilter(modelData.name)
|
||||
filesForm.reset();
|
||||
filesFormPopup.open();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Item { Layout.preferredHeight: 16 }
|
||||
|
||||
Repeater {
|
||||
model: backend.files
|
||||
Rectangle {
|
||||
Layout.preferredHeight: childrenRect.height
|
||||
Layout.fillWidth: true
|
||||
color: backend.activeFilesFilter.includes(modelData.name) ? MiraiColorPalette.filterSelected : mouse.hovered ? MiraiColorPalette.filterHovered : "transparent"
|
||||
radius: 4
|
||||
AppText {
|
||||
text: modelData.name
|
||||
padding: 4
|
||||
}
|
||||
MouseArea {
|
||||
anchors.fill: parent
|
||||
onClicked: {
|
||||
if (backend.activeFilesFilter.includes(modelData.name)) {
|
||||
backend.removeFileFilter(modelData.name)
|
||||
} else {
|
||||
backend.addFileFilter(modelData.name)
|
||||
}
|
||||
}
|
||||
HoverHandler {
|
||||
id: mouse
|
||||
acceptedDevices: PointerDevice.Mouse | PointerDevice.TouchPad
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
}
|
||||
}
|
||||
HoverHandler {
|
||||
id: mouse
|
||||
acceptedDevices: PointerDevice.Mouse | PointerDevice.TouchPad
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
Item { Layout.preferredHeight: 16 }
|
||||
|
||||
RowLayout {
|
||||
AppText {
|
||||
text: "Tags"
|
||||
font.pixelSize: 32
|
||||
}
|
||||
Item { Layout.fillWidth: true }
|
||||
AppIcon {
|
||||
icon.source: "qrc:/qt/qml/Mirai/src/images/settings.png"
|
||||
icon.color: colorPalette.selected.textPlaceholder
|
||||
onClicked: {
|
||||
tagsForm.reset();
|
||||
tagsFormPopup.open();
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Item { Layout.preferredHeight: 16 }
|
||||
Item { Layout.preferredHeight: 16 }
|
||||
|
||||
Repeater {
|
||||
model: backend.tags
|
||||
Rectangle {
|
||||
Layout.preferredHeight: childrenRect.height
|
||||
Layout.fillWidth: true
|
||||
color: backend.activeTagsFilter.includes(modelData.name) ? MiraiColorPalette.filterSelected : mouse.hovered ? MiraiColorPalette.filterHovered : "transparent"
|
||||
radius: 4
|
||||
QtObject {
|
||||
id: internal
|
||||
}
|
||||
RowLayout {
|
||||
AppText {
|
||||
text: modelData.name
|
||||
color: {
|
||||
return modelData.color
|
||||
}
|
||||
padding: 4
|
||||
text: "Tags"
|
||||
font.pixelSize: 32
|
||||
}
|
||||
MouseArea {
|
||||
anchors.fill: parent
|
||||
Item { Layout.fillWidth: true }
|
||||
AppIcon {
|
||||
icon.source: "qrc:/qt/qml/Mirai/src/images/settings.png"
|
||||
icon.color: colorPalette.selected.textPlaceholder
|
||||
onClicked: {
|
||||
if (backend.activeTagsFilter.includes(modelData.name)) {
|
||||
backend.removeTagFilter(modelData.name)
|
||||
} else {
|
||||
backend.addTagFilter(modelData.name)
|
||||
tagsForm.reset();
|
||||
tagsFormPopup.open();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Item { Layout.preferredHeight: 16 }
|
||||
|
||||
Repeater {
|
||||
model: backend.tags
|
||||
Rectangle {
|
||||
Layout.preferredHeight: childrenRect.height
|
||||
Layout.fillWidth: true
|
||||
color: backend.activeTagsFilter.includes(modelData.name) ? MiraiColorPalette.filterSelected : mouse.hovered ? MiraiColorPalette.filterHovered : "transparent"
|
||||
radius: 4
|
||||
QtObject {
|
||||
id: internal
|
||||
}
|
||||
AppText {
|
||||
text: modelData.name
|
||||
color: {
|
||||
return modelData.color
|
||||
}
|
||||
padding: 4
|
||||
}
|
||||
MouseArea {
|
||||
anchors.fill: parent
|
||||
onClicked: {
|
||||
if (backend.activeTagsFilter.includes(modelData.name)) {
|
||||
backend.removeTagFilter(modelData.name)
|
||||
} else {
|
||||
backend.addTagFilter(modelData.name)
|
||||
}
|
||||
}
|
||||
HoverHandler {
|
||||
id: mouse
|
||||
acceptedDevices: PointerDevice.Mouse | PointerDevice.TouchPad
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
}
|
||||
}
|
||||
HoverHandler {
|
||||
id: mouse
|
||||
acceptedDevices: PointerDevice.Mouse | PointerDevice.TouchPad
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
Item {
|
||||
Layout.fillHeight: true
|
||||
}
|
||||
|
||||
AppButton {
|
||||
text: `Hide completed tasks: ${backend.shouldHideCompletedTasks ? "ON" : "OFF"}`
|
||||
onClicked: {
|
||||
backend.hideCompletedTasks(!backend.shouldHideCompletedTasks)
|
||||
}
|
||||
}
|
||||
|
||||
Popup {
|
||||
parent: Overlay.overlay
|
||||
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
|
||||
}
|
||||
FilesForm {
|
||||
id: filesForm
|
||||
width: parent.width
|
||||
onConfirmed: (filesPath) => {
|
||||
filesFormPopup.close()
|
||||
console.log(filesPath)
|
||||
backend.saveFilesPath(filesPath)
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
Item {
|
||||
Layout.fillHeight: true
|
||||
}
|
||||
|
||||
AppButton {
|
||||
text: `Hide completed tasks: ${backend.shouldHideCompletedTasks ? "ON" : "OFF"}`
|
||||
onClicked: {
|
||||
backend.hideCompletedTasks(!backend.shouldHideCompletedTasks)
|
||||
}
|
||||
}
|
||||
|
||||
Popup {
|
||||
parent: Overlay.overlay
|
||||
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
|
||||
}
|
||||
FilesForm {
|
||||
id: filesForm
|
||||
width: parent.width
|
||||
onConfirmed: (filesPath) => {
|
||||
filesFormPopup.close()
|
||||
console.log(filesPath)
|
||||
backend.saveFilesPath(filesPath)
|
||||
Popup {
|
||||
parent: Overlay.overlay
|
||||
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
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Popup {
|
||||
parent: Overlay.overlay
|
||||
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
|
||||
}
|
||||
TagsConfigForm {
|
||||
id: tagsForm
|
||||
width: parent.width
|
||||
onConfirmed: (tags) => {
|
||||
tagsFormPopup.close()
|
||||
backend.saveTagsColor(tags)
|
||||
TagsConfigForm {
|
||||
id: tagsForm
|
||||
width: parent.width
|
||||
onConfirmed: (tags) => {
|
||||
tagsFormPopup.close()
|
||||
backend.saveTagsColor(tags)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue