forked from Shinonome/dots-hyprland
sidebar todo
This commit is contained in:
end-4
@@ -34,9 +34,7 @@ Rectangle {
|
|||||||
duration: Appearance.animation.elementDecel.duration
|
duration: Appearance.animation.elementDecel.duration
|
||||||
easing.type: Appearance.animation.elementDecel.type
|
easing.type: Appearance.animation.elementDecel.type
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
StyledText {
|
StyledText {
|
||||||
|
|||||||
@@ -162,7 +162,7 @@ Singleton {
|
|||||||
|
|
||||||
animation: QtObject {
|
animation: QtObject {
|
||||||
property QtObject elementDecel: QtObject {
|
property QtObject elementDecel: QtObject {
|
||||||
property int duration: 180
|
property int duration: 200
|
||||||
property int type: Easing.OutCirc
|
property int type: Easing.OutCirc
|
||||||
property int velocity: 650
|
property int velocity: 650
|
||||||
}
|
}
|
||||||
@@ -171,8 +171,9 @@ Singleton {
|
|||||||
property int type: Easing.OutExpo
|
property int type: Easing.OutExpo
|
||||||
}
|
}
|
||||||
property QtObject positionShift: QtObject {
|
property QtObject positionShift: QtObject {
|
||||||
property int duration: 160
|
property int duration: 300
|
||||||
property int type: Easing.InOutExpo
|
property int type: Easing.InOutExpo
|
||||||
|
property int velocity: 650
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -36,7 +36,6 @@ Button {
|
|||||||
duration: Appearance.animation.elementDecel.duration
|
duration: Appearance.animation.elementDecel.duration
|
||||||
easing.type: Appearance.animation.elementDecel.type
|
easing.type: Appearance.animation.elementDecel.type
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
MaterialSymbol {
|
MaterialSymbol {
|
||||||
id: navRailButtonIcon
|
id: navRailButtonIcon
|
||||||
|
|||||||
@@ -0,0 +1,41 @@
|
|||||||
|
import "root:/modules/common"
|
||||||
|
import "root:/modules/common/widgets"
|
||||||
|
import QtQuick
|
||||||
|
import QtQuick.Controls
|
||||||
|
import QtQuick.Layouts
|
||||||
|
import Quickshell.Io
|
||||||
|
|
||||||
|
TabButton {
|
||||||
|
id: button
|
||||||
|
property string buttonText
|
||||||
|
property string buttonIcon
|
||||||
|
property bool selected: false
|
||||||
|
height: buttonBackground.height
|
||||||
|
|
||||||
|
background: Rectangle {
|
||||||
|
id: buttonBackground
|
||||||
|
radius: Appearance.rounding.small
|
||||||
|
implicitHeight: 37
|
||||||
|
color: (button.down ? Appearance.colors.colLayer1Active : button.hovered ? Appearance.colors.colLayer1Hover : Appearance.transparentize(Appearance.colors.colLayer1Hover, 1))
|
||||||
|
|
||||||
|
Behavior on color {
|
||||||
|
ColorAnimation {
|
||||||
|
duration: Appearance.animation.elementDecel.duration
|
||||||
|
easing.type: Appearance.animation.elementDecel.type
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
contentItem: StyledText {
|
||||||
|
id: buttonTextWidget
|
||||||
|
anchors.centerIn: buttonBackground
|
||||||
|
horizontalAlignment: Text.AlignHCenter
|
||||||
|
text: buttonText
|
||||||
|
color: selected ? Appearance.m3colors.m3primary : Appearance.colors.colOnLayer1
|
||||||
|
Behavior on color {
|
||||||
|
ColorAnimation {
|
||||||
|
duration: Appearance.animation.elementDecel.duration
|
||||||
|
easing.type: Appearance.animation.elementDecel.type
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,115 @@
|
|||||||
|
import "root:/modules/common"
|
||||||
|
import "root:/modules/common/widgets"
|
||||||
|
import "root:/services"
|
||||||
|
import "./calendar"
|
||||||
|
import "./todo"
|
||||||
|
import QtQuick
|
||||||
|
import QtQuick.Controls
|
||||||
|
import QtQuick.Layouts
|
||||||
|
import Quickshell
|
||||||
|
|
||||||
|
Rectangle {
|
||||||
|
Layout.alignment: Qt.AlignHCenter
|
||||||
|
Layout.fillHeight: false
|
||||||
|
Layout.fillWidth: true
|
||||||
|
radius: Appearance.rounding.normal
|
||||||
|
color: Appearance.colors.colLayer1
|
||||||
|
// implicitHeight: 343 // TODO NO HARD CODE
|
||||||
|
height: bottomWidgetGroupRow.height
|
||||||
|
|
||||||
|
RowLayout {
|
||||||
|
id: bottomWidgetGroupRow
|
||||||
|
anchors.fill: parent
|
||||||
|
height: tabStack.height
|
||||||
|
spacing: 10
|
||||||
|
property int selectedTab: 0
|
||||||
|
|
||||||
|
// Navigation rail
|
||||||
|
ColumnLayout {
|
||||||
|
id: tabBar
|
||||||
|
Layout.fillHeight: true
|
||||||
|
Layout.fillWidth: false
|
||||||
|
Layout.leftMargin: 15
|
||||||
|
spacing: 15
|
||||||
|
Repeater {
|
||||||
|
model: [
|
||||||
|
{"name": "Calendar", "icon": "calendar_month"},
|
||||||
|
{"name": "To Do", "icon": "done_outline"}
|
||||||
|
]
|
||||||
|
NavRailButton {
|
||||||
|
toggled: bottomWidgetGroupRow.selectedTab == index
|
||||||
|
buttonText: modelData.name
|
||||||
|
buttonIcon: modelData.icon
|
||||||
|
onClicked: {
|
||||||
|
bottomWidgetGroupRow.selectedTab = index
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Content area
|
||||||
|
StackLayout {
|
||||||
|
id: tabStack
|
||||||
|
Layout.fillWidth: true
|
||||||
|
height: 358 // ???? wtf
|
||||||
|
Layout.alignment: Qt.AlignVCenter
|
||||||
|
property int realIndex: 0
|
||||||
|
property int animationDuration: Appearance.animation.elementDecel.duration * 1.5
|
||||||
|
|
||||||
|
// Calendar
|
||||||
|
Component {
|
||||||
|
id: calendarWidget
|
||||||
|
|
||||||
|
CalendarWidget {
|
||||||
|
anchors.centerIn: parent
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// To Do
|
||||||
|
Component {
|
||||||
|
id: todoWidget
|
||||||
|
TodoWidget {
|
||||||
|
anchors.fill: parent
|
||||||
|
anchors.margins: 5
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
Connections {
|
||||||
|
target: bottomWidgetGroupRow
|
||||||
|
function onSelectedTabChanged() {
|
||||||
|
delayedStackSwitch.start()
|
||||||
|
tabStack.realIndex = bottomWidgetGroupRow.selectedTab
|
||||||
|
}
|
||||||
|
}
|
||||||
|
Timer {
|
||||||
|
id: delayedStackSwitch
|
||||||
|
interval: tabStack.animationDuration / 2
|
||||||
|
repeat: false
|
||||||
|
onTriggered: {
|
||||||
|
tabStack.currentIndex = bottomWidgetGroupRow.selectedTab
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
Repeater {
|
||||||
|
model: [
|
||||||
|
{ type: "calendar" },
|
||||||
|
{ type: "todo" }
|
||||||
|
]
|
||||||
|
Item { // TODO: make behavior on y also act for the item that's switched to
|
||||||
|
id: tabItem
|
||||||
|
property int tabIndex: index
|
||||||
|
property string tabType: modelData.type
|
||||||
|
property int animDistance: 5
|
||||||
|
opacity: (tabStack.currentIndex === tabItem.tabIndex && tabStack.realIndex === tabItem.tabIndex) ? 1 : 0
|
||||||
|
y: (tabStack.realIndex === tabItem.tabIndex) ? 0 : (tabStack.realIndex < tabItem.tabIndex) ? animDistance : -animDistance
|
||||||
|
Behavior on opacity { NumberAnimation { duration: tabStack.animationDuration / 2; easing.type: Easing.OutCubic } }
|
||||||
|
Behavior on y { NumberAnimation { duration: tabStack.animationDuration; easing.type: Easing.OutExpo } }
|
||||||
|
Loader {
|
||||||
|
anchors.fill: parent
|
||||||
|
sourceComponent: (tabType === "calendar") ? calendarWidget : todoWidget
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -1,223 +0,0 @@
|
|||||||
import "root:/modules/common"
|
|
||||||
import "root:/modules/common/widgets"
|
|
||||||
import "./calendar"
|
|
||||||
import "./calendar/calendar_layout.js" as CalendarLayout
|
|
||||||
import QtQuick
|
|
||||||
import QtQuick.Controls
|
|
||||||
import QtQuick.Layouts
|
|
||||||
import Quickshell
|
|
||||||
|
|
||||||
Rectangle {
|
|
||||||
Layout.alignment: Qt.AlignHCenter
|
|
||||||
Layout.fillHeight: false
|
|
||||||
Layout.fillWidth: true
|
|
||||||
radius: Appearance.rounding.normal
|
|
||||||
color: Appearance.colors.colLayer1
|
|
||||||
// implicitHeight: 343 // TODO NO HARD CODE
|
|
||||||
height: calendarWidgetRow.height
|
|
||||||
|
|
||||||
RowLayout {
|
|
||||||
id: calendarWidgetRow
|
|
||||||
anchors.fill: parent
|
|
||||||
height: tabStack.height
|
|
||||||
spacing: 10
|
|
||||||
property int selectedTab: 0
|
|
||||||
|
|
||||||
// Navigation rail
|
|
||||||
ColumnLayout {
|
|
||||||
id: tabBar
|
|
||||||
Layout.fillHeight: true
|
|
||||||
Layout.fillWidth: false
|
|
||||||
Layout.leftMargin: 15
|
|
||||||
spacing: 15
|
|
||||||
Repeater {
|
|
||||||
model: [
|
|
||||||
{"name": "Calendar", "icon": "calendar_month"},
|
|
||||||
{"name": "To Do", "icon": "done_outline"}
|
|
||||||
]
|
|
||||||
NavRailButton {
|
|
||||||
toggled: calendarWidgetRow.selectedTab == index
|
|
||||||
buttonText: modelData.name
|
|
||||||
buttonIcon: modelData.icon
|
|
||||||
onClicked: {
|
|
||||||
calendarWidgetRow.selectedTab = index
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Content area
|
|
||||||
StackLayout {
|
|
||||||
id: tabStack
|
|
||||||
Layout.fillWidth: true
|
|
||||||
height: 358 // ???? wtf
|
|
||||||
Layout.alignment: Qt.AlignVCenter
|
|
||||||
property int realIndex: 0
|
|
||||||
property int animationDuration: Appearance.animation.elementDecel.duration * 1.5
|
|
||||||
|
|
||||||
// Calendar
|
|
||||||
Component {
|
|
||||||
id: calendarWidget
|
|
||||||
|
|
||||||
Item {
|
|
||||||
anchors.centerIn: parent
|
|
||||||
width: calendarColumn.width
|
|
||||||
height: calendarColumn.height
|
|
||||||
property int monthShift: 0
|
|
||||||
property var viewingDate: CalendarLayout.getDateInXMonthsTime(monthShift)
|
|
||||||
property var calendarLayout: CalendarLayout.getCalendarLayout(viewingDate, monthShift === 0)
|
|
||||||
|
|
||||||
MouseArea {
|
|
||||||
anchors.fill: parent
|
|
||||||
onWheel: {
|
|
||||||
if (wheel.angleDelta.y > 0) {
|
|
||||||
monthShift--;
|
|
||||||
} else if (wheel.angleDelta.y < 0) {
|
|
||||||
monthShift++;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
ColumnLayout {
|
|
||||||
id: calendarColumn
|
|
||||||
anchors.centerIn: parent
|
|
||||||
spacing: 5
|
|
||||||
|
|
||||||
// Calendar header
|
|
||||||
RowLayout {
|
|
||||||
Layout.fillWidth: true
|
|
||||||
spacing: 5
|
|
||||||
CalendarHeaderButton {
|
|
||||||
buttonText: `${monthShift != 0 ? "• " : ""}${viewingDate.toLocaleDateString(Qt.locale(), "MMMM yyyy")}`
|
|
||||||
tooltipText: (monthShift === 0) ? "" : "Jump to current month"
|
|
||||||
onClicked: {
|
|
||||||
monthShift = 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
Item {
|
|
||||||
Layout.fillWidth: true
|
|
||||||
Layout.fillHeight: false
|
|
||||||
}
|
|
||||||
CalendarHeaderButton {
|
|
||||||
forceCircle: true
|
|
||||||
onClicked: {
|
|
||||||
monthShift--;
|
|
||||||
}
|
|
||||||
contentItem: MaterialSymbol {
|
|
||||||
text: "chevron_left"
|
|
||||||
font.pixelSize: Appearance.font.pixelSize.larger
|
|
||||||
horizontalAlignment: Text.AlignHCenter
|
|
||||||
color: Appearance.colors.colOnLayer1
|
|
||||||
}
|
|
||||||
}
|
|
||||||
CalendarHeaderButton {
|
|
||||||
forceCircle: true
|
|
||||||
onClicked: {
|
|
||||||
monthShift++;
|
|
||||||
}
|
|
||||||
contentItem: MaterialSymbol {
|
|
||||||
text: "chevron_right"
|
|
||||||
font.pixelSize: Appearance.font.pixelSize.larger
|
|
||||||
horizontalAlignment: Text.AlignHCenter
|
|
||||||
color: Appearance.colors.colOnLayer1
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Week days row
|
|
||||||
RowLayout {
|
|
||||||
id: weekDaysRow
|
|
||||||
Layout.alignment: Qt.AlignHCenter
|
|
||||||
Layout.fillHeight: false
|
|
||||||
spacing: 5
|
|
||||||
Repeater {
|
|
||||||
model: CalendarLayout.weekDays
|
|
||||||
delegate: CalendarDayButton {
|
|
||||||
day: modelData.day
|
|
||||||
isToday: modelData.today
|
|
||||||
bold: true
|
|
||||||
interactable: false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Real week rows
|
|
||||||
Repeater {
|
|
||||||
id: calendarRows
|
|
||||||
// model: calendarLayout
|
|
||||||
model: 6
|
|
||||||
delegate: RowLayout {
|
|
||||||
Layout.alignment: Qt.AlignHCenter
|
|
||||||
Layout.fillHeight: false
|
|
||||||
spacing: 5
|
|
||||||
Repeater {
|
|
||||||
model: Array(7).fill(modelData)
|
|
||||||
delegate: CalendarDayButton {
|
|
||||||
day: calendarLayout[modelData][index].day
|
|
||||||
isToday: calendarLayout[modelData][index].today
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// To Do
|
|
||||||
Component {
|
|
||||||
id: todoWidget
|
|
||||||
Item {
|
|
||||||
anchors.fill: parent
|
|
||||||
// color: "lavender"
|
|
||||||
// radius: Appearance.rounding.small
|
|
||||||
width: 30; height: 30;
|
|
||||||
StyledText {
|
|
||||||
anchors.margins: 10
|
|
||||||
anchors.left: parent.left
|
|
||||||
anchors.right: parent.right
|
|
||||||
anchors.top: parent.top
|
|
||||||
text: "## To Do\n- Lorem ipsum\n- Dolor shit amet\n\nSigma Ohayo rc1 Pro+ Premium Hippuland hi ask vaxry for pleas fix 123 Billions must lorem ipsum ipsum yesterdays tears are tomorrows coom awawawa"
|
|
||||||
wrapMode: Text.WordWrap
|
|
||||||
textFormat: Text.MarkdownText
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
Connections {
|
|
||||||
target: calendarWidgetRow
|
|
||||||
function onSelectedTabChanged() {
|
|
||||||
delayedStackSwitch.start()
|
|
||||||
tabStack.realIndex = calendarWidgetRow.selectedTab
|
|
||||||
}
|
|
||||||
}
|
|
||||||
Timer {
|
|
||||||
id: delayedStackSwitch
|
|
||||||
interval: tabStack.animationDuration / 2
|
|
||||||
repeat: false
|
|
||||||
onTriggered: {
|
|
||||||
tabStack.currentIndex = calendarWidgetRow.selectedTab
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
Repeater {
|
|
||||||
model: [
|
|
||||||
{ type: "calendar" },
|
|
||||||
{ type: "todo" }
|
|
||||||
]
|
|
||||||
Item { // TODO: make behavior on y also act for the item that's switched to
|
|
||||||
id: tabItem
|
|
||||||
property int tabIndex: index
|
|
||||||
property string tabType: modelData.type
|
|
||||||
property int animDistance: 5
|
|
||||||
opacity: (tabStack.currentIndex === tabItem.tabIndex && tabStack.realIndex === tabItem.tabIndex) ? 1 : 0
|
|
||||||
y: (tabStack.realIndex === tabItem.tabIndex) ? 0 : (tabStack.realIndex < tabItem.tabIndex) ? animDistance : -animDistance
|
|
||||||
Behavior on opacity { NumberAnimation { duration: tabStack.animationDuration / 2; easing.type: Easing.OutCubic } }
|
|
||||||
Behavior on y { NumberAnimation { duration: tabStack.animationDuration; easing.type: Easing.OutExpo } }
|
|
||||||
Loader {
|
|
||||||
anchors.fill: parent
|
|
||||||
sourceComponent: (tabType === "calendar") ? calendarWidget : todoWidget
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -148,7 +148,7 @@ Scope {
|
|||||||
}
|
}
|
||||||
|
|
||||||
// Calendar
|
// Calendar
|
||||||
SidebarCalendar {}
|
BottomWidgetGroup {}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -0,0 +1,107 @@
|
|||||||
|
import "root:/modules/common"
|
||||||
|
import "root:/modules/common/widgets"
|
||||||
|
import "./calendar_layout.js" as CalendarLayout
|
||||||
|
import QtQuick
|
||||||
|
import QtQuick.Controls
|
||||||
|
import QtQuick.Layouts
|
||||||
|
|
||||||
|
Item {
|
||||||
|
property int monthShift: 0
|
||||||
|
property var viewingDate: CalendarLayout.getDateInXMonthsTime(monthShift)
|
||||||
|
property var calendarLayout: CalendarLayout.getCalendarLayout(viewingDate, monthShift === 0)
|
||||||
|
width: calendarColumn.width
|
||||||
|
height: calendarColumn.height
|
||||||
|
|
||||||
|
MouseArea {
|
||||||
|
anchors.fill: parent
|
||||||
|
onWheel: {
|
||||||
|
if (wheel.angleDelta.y > 0) {
|
||||||
|
monthShift--;
|
||||||
|
} else if (wheel.angleDelta.y < 0) {
|
||||||
|
monthShift++;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
ColumnLayout {
|
||||||
|
id: calendarColumn
|
||||||
|
anchors.centerIn: parent
|
||||||
|
spacing: 5
|
||||||
|
|
||||||
|
// Calendar header
|
||||||
|
RowLayout {
|
||||||
|
Layout.fillWidth: true
|
||||||
|
spacing: 5
|
||||||
|
CalendarHeaderButton {
|
||||||
|
buttonText: `${monthShift != 0 ? "• " : ""}${viewingDate.toLocaleDateString(Qt.locale(), "MMMM yyyy")}`
|
||||||
|
tooltipText: (monthShift === 0) ? "" : "Jump to current month"
|
||||||
|
onClicked: {
|
||||||
|
monthShift = 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
Item {
|
||||||
|
Layout.fillWidth: true
|
||||||
|
Layout.fillHeight: false
|
||||||
|
}
|
||||||
|
CalendarHeaderButton {
|
||||||
|
forceCircle: true
|
||||||
|
onClicked: {
|
||||||
|
monthShift--;
|
||||||
|
}
|
||||||
|
contentItem: MaterialSymbol {
|
||||||
|
text: "chevron_left"
|
||||||
|
font.pixelSize: Appearance.font.pixelSize.larger
|
||||||
|
horizontalAlignment: Text.AlignHCenter
|
||||||
|
color: Appearance.colors.colOnLayer1
|
||||||
|
}
|
||||||
|
}
|
||||||
|
CalendarHeaderButton {
|
||||||
|
forceCircle: true
|
||||||
|
onClicked: {
|
||||||
|
monthShift++;
|
||||||
|
}
|
||||||
|
contentItem: MaterialSymbol {
|
||||||
|
text: "chevron_right"
|
||||||
|
font.pixelSize: Appearance.font.pixelSize.larger
|
||||||
|
horizontalAlignment: Text.AlignHCenter
|
||||||
|
color: Appearance.colors.colOnLayer1
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Week days row
|
||||||
|
RowLayout {
|
||||||
|
id: weekDaysRow
|
||||||
|
Layout.alignment: Qt.AlignHCenter
|
||||||
|
Layout.fillHeight: false
|
||||||
|
spacing: 5
|
||||||
|
Repeater {
|
||||||
|
model: CalendarLayout.weekDays
|
||||||
|
delegate: CalendarDayButton {
|
||||||
|
day: modelData.day
|
||||||
|
isToday: modelData.today
|
||||||
|
bold: true
|
||||||
|
interactable: false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Real week rows
|
||||||
|
Repeater {
|
||||||
|
id: calendarRows
|
||||||
|
// model: calendarLayout
|
||||||
|
model: 6
|
||||||
|
delegate: RowLayout {
|
||||||
|
Layout.alignment: Qt.AlignHCenter
|
||||||
|
Layout.fillHeight: false
|
||||||
|
spacing: 5
|
||||||
|
Repeater {
|
||||||
|
model: Array(7).fill(modelData)
|
||||||
|
delegate: CalendarDayButton {
|
||||||
|
day: calendarLayout[modelData][index].day
|
||||||
|
isToday: calendarLayout[modelData][index].today
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,37 @@
|
|||||||
|
import "root:/modules/common"
|
||||||
|
import "root:/modules/common/widgets"
|
||||||
|
import "root:/services"
|
||||||
|
import QtQuick
|
||||||
|
import QtQuick.Controls
|
||||||
|
import QtQuick.Layouts
|
||||||
|
|
||||||
|
Item {
|
||||||
|
required property var taskList;
|
||||||
|
|
||||||
|
Flickable {
|
||||||
|
anchors.fill: parent
|
||||||
|
contentHeight: column.height
|
||||||
|
clip: true
|
||||||
|
|
||||||
|
ColumnLayout {
|
||||||
|
id: column
|
||||||
|
width: parent.width
|
||||||
|
Repeater {
|
||||||
|
model: taskList
|
||||||
|
delegate: Rectangle {
|
||||||
|
Layout.fillWidth: true
|
||||||
|
width: parent.width
|
||||||
|
height: 40
|
||||||
|
color: Appearance.colors.colLayer2
|
||||||
|
radius: Appearance.rounding.small
|
||||||
|
Text {
|
||||||
|
text: modelData.content
|
||||||
|
anchors.verticalCenter: parent.verticalCenter
|
||||||
|
anchors.left: parent.left
|
||||||
|
anchors.leftMargin: 8
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,82 @@
|
|||||||
|
import "root:/modules/common"
|
||||||
|
import "root:/modules/common/widgets"
|
||||||
|
import "root:/services"
|
||||||
|
import QtQuick
|
||||||
|
import QtQuick.Controls
|
||||||
|
import QtQuick.Layouts
|
||||||
|
|
||||||
|
Item {
|
||||||
|
property int currentTab: 0
|
||||||
|
|
||||||
|
ColumnLayout {
|
||||||
|
anchors.fill: parent
|
||||||
|
spacing: 0
|
||||||
|
|
||||||
|
TabBar {
|
||||||
|
id: tabBar
|
||||||
|
property var tabButtonList: [{"icon": "checklist", "name": "Unfinished"}, {"name": "Done", "icon": "check_circle"}]
|
||||||
|
Layout.fillWidth: true
|
||||||
|
currentIndex: currentTab
|
||||||
|
onCurrentIndexChanged: currentTab = currentIndex
|
||||||
|
|
||||||
|
background: Item {
|
||||||
|
WheelHandler {
|
||||||
|
onWheel: (event) => {
|
||||||
|
if (event.angleDelta.y < 0)
|
||||||
|
currentTab = Math.min(currentTab + 1, tabBar.tabButtonList.length - 1)
|
||||||
|
else if (event.angleDelta.y > 0)
|
||||||
|
currentTab = Math.max(currentTab - 1, 0)
|
||||||
|
}
|
||||||
|
acceptedDevices: PointerDevice.Mouse | PointerDevice.TouchPad
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
Repeater {
|
||||||
|
model: tabBar.tabButtonList
|
||||||
|
delegate: StyledTabButton {
|
||||||
|
selected: (index == currentTab)
|
||||||
|
buttonText: modelData.name
|
||||||
|
// buttonIcon: modelData.icon
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
Item {
|
||||||
|
Layout.fillWidth: true
|
||||||
|
Rectangle {
|
||||||
|
property int indicatorPadding: 15
|
||||||
|
id: indicator
|
||||||
|
color: Appearance.m3colors.m3primary
|
||||||
|
height: 3
|
||||||
|
radius: Appearance.rounding.full
|
||||||
|
|
||||||
|
width: tabBar.width / tabBar.tabButtonList.length - indicatorPadding * 2
|
||||||
|
x: indicatorPadding + tabBar.width / tabBar.tabButtonList.length * currentTab
|
||||||
|
z: 2
|
||||||
|
Behavior on x { SmoothedAnimation {
|
||||||
|
velocity: Appearance.animation.positionShift.velocity
|
||||||
|
} }
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
SwipeView {
|
||||||
|
id: swipeView
|
||||||
|
Layout.topMargin: 10
|
||||||
|
Layout.fillWidth: true
|
||||||
|
Layout.fillHeight: true
|
||||||
|
clip: true
|
||||||
|
currentIndex: currentTab
|
||||||
|
onCurrentIndexChanged: currentTab = currentIndex
|
||||||
|
|
||||||
|
// To Do tab
|
||||||
|
TaskList {
|
||||||
|
taskList: Todo.list.filter(item => !item.done)
|
||||||
|
}
|
||||||
|
TaskList {
|
||||||
|
taskList: Todo.list.filter(item => item.done)
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -1,3 +1,4 @@
|
|||||||
|
import "root:/modules/common"
|
||||||
import QtQuick
|
import QtQuick
|
||||||
import Quickshell
|
import Quickshell
|
||||||
import Quickshell.Io
|
import Quickshell.Io
|
||||||
|
|||||||
@@ -1,3 +1,4 @@
|
|||||||
|
import "root:/modules/common"
|
||||||
pragma Singleton
|
pragma Singleton
|
||||||
import QtQuick
|
import QtQuick
|
||||||
import Quickshell
|
import Quickshell
|
||||||
|
|||||||
@@ -0,0 +1,59 @@
|
|||||||
|
pragma Singleton
|
||||||
|
|
||||||
|
import Quickshell;
|
||||||
|
import Quickshell.Io;
|
||||||
|
import Quickshell.Services.Pipewire;
|
||||||
|
import Qt.labs.platform
|
||||||
|
import QtQuick;
|
||||||
|
|
||||||
|
Singleton {
|
||||||
|
id: root
|
||||||
|
property var filePath: `${StandardPaths.standardLocations(StandardPaths.StateLocation)[0]}/user/todo.json`
|
||||||
|
property var list: []
|
||||||
|
|
||||||
|
function addItem(item) {
|
||||||
|
list.push(item)
|
||||||
|
todoFileView.setText(JSON.stringify(root.list))
|
||||||
|
}
|
||||||
|
|
||||||
|
function markDone(index) {
|
||||||
|
if (index >= 0 && index < list.length) {
|
||||||
|
list[index].done = true
|
||||||
|
todoFileView.setText(JSON.stringify(root.list))
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function deleteItem(index) {
|
||||||
|
if (index >= 0 && index < list.length) {
|
||||||
|
list.splice(index, 1)
|
||||||
|
todoFileView.setText(JSON.stringify(root.list))
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function refresh() {
|
||||||
|
todoFileView.reload()
|
||||||
|
}
|
||||||
|
|
||||||
|
Component.onCompleted: {
|
||||||
|
refresh()
|
||||||
|
}
|
||||||
|
|
||||||
|
FileView {
|
||||||
|
id: todoFileView
|
||||||
|
path: filePath
|
||||||
|
onLoaded: {
|
||||||
|
const fileContents = todoFileView.text()
|
||||||
|
root.list = JSON.parse(fileContents)
|
||||||
|
}
|
||||||
|
onLoadFailed: (error) => {
|
||||||
|
if(error == FileViewError.FileNotFound) {
|
||||||
|
console.log("[To Do] File not found, creating new file.")
|
||||||
|
root.list = []
|
||||||
|
todoFileView.setText(JSON.stringify(root.list))
|
||||||
|
} else {
|
||||||
|
console.log("[To Do] Error loading file: " + error)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
Reference in New Issue
Block a user