mirror of
https://codeberg.org/vyn/mirai.git
synced 2025-07-03 01:33: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
|
|
@ -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