diff --git a/.config/quickshell/modules/common/Appearance.qml b/.config/quickshell/modules/common/Appearance.qml index de95e5b08..d3c03520a 100644 --- a/.config/quickshell/modules/common/Appearance.qml +++ b/.config/quickshell/modules/common/Appearance.qml @@ -114,8 +114,8 @@ Singleton { property color colOnLayer2: m3colors.m3onSurface; property color colLayer3: mix(m3colors.m3surfaceContainerHigh, m3colors.m3onSurface, 0.96); property color colOnLayer3: m3colors.m3onSurface; - property color colLayer1Hover: mix(colLayer1, colOnLayer1, 0.85); - property color colLayer1Active: mix(colLayer1, colOnLayer1, 0.70); + property color colLayer1Hover: mix(colLayer1, colOnLayer1, 0.88); + property color colLayer1Active: mix(colLayer1, colOnLayer1, 0.77); property color colLayer2Hover: mix(colLayer2, colOnLayer2, 0.90); property color colLayer2Active: mix(colLayer2, colOnLayer2, 0.80); property color colLayer3Hover: mix(colLayer3, colOnLayer3, 0.90); diff --git a/.config/quickshell/modules/common/DateTime.qml b/.config/quickshell/modules/common/DateTime.qml index bbcedfb52..3e09be16c 100644 --- a/.config/quickshell/modules/common/DateTime.qml +++ b/.config/quickshell/modules/common/DateTime.qml @@ -6,6 +6,8 @@ pragma Singleton Singleton { property string time: Qt.formatDateTime(clock.date, "hh:mm") property string date: Qt.formatDateTime(clock.date, "dddd, dd/MM") + property string month: Qt.formatDateTime(clock.date, "MMMM") + property string year: Qt.formatDateTime(clock.date, "yyyy") property string uptime: "0h, 0m" SystemClock { diff --git a/.config/quickshell/modules/common/widgets/SmallCircleButton.qml b/.config/quickshell/modules/common/widgets/SmallCircleButton.qml index e1b85dd41..14d7c19e3 100644 --- a/.config/quickshell/modules/common/widgets/SmallCircleButton.qml +++ b/.config/quickshell/modules/common/widgets/SmallCircleButton.qml @@ -11,8 +11,8 @@ Button { required default property Item content property bool extraActiveCondition: false - implicitWidth: 26 - implicitHeight: 26 + implicitHeight: Math.max(content.implicitHeight, 26, content.implicitHeight) + implicitWidth: Math.max(content.implicitHeight, 26, content.implicitWidth) contentItem: content background: Rectangle { diff --git a/.config/quickshell/modules/common/widgets/StyledText.qml b/.config/quickshell/modules/common/widgets/StyledText.qml index 96c75a053..14cec33b0 100644 --- a/.config/quickshell/modules/common/widgets/StyledText.qml +++ b/.config/quickshell/modules/common/widgets/StyledText.qml @@ -7,5 +7,5 @@ Text { verticalAlignment: Text.AlignVCenter font.family: Appearance.font.family.main font.pixelSize: Appearance.font.pixelSize.small - color: Appearance.colors.colOnBackground + color: Appearance.m3colors.m3onBackground } diff --git a/.config/quickshell/modules/sidebarRight/SidebarCalendar.qml b/.config/quickshell/modules/sidebarRight/SidebarCalendar.qml index b85a5ca31..a4e27241a 100644 --- a/.config/quickshell/modules/sidebarRight/SidebarCalendar.qml +++ b/.config/quickshell/modules/sidebarRight/SidebarCalendar.qml @@ -1,10 +1,11 @@ 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 -import "calendar_layout.js" as CalendarLayout Rectangle { Layout.alignment: Qt.AlignHCenter @@ -12,19 +13,21 @@ Rectangle { Layout.fillWidth: true radius: Appearance.rounding.normal color: Appearance.colors.colLayer1 - implicitHeight: 300 + implicitHeight: 343 // TODO NO HARD CODE RowLayout { id: calendarRow anchors.fill: parent - width: parent.width - 10 * 2 + // width: parent.width - 10 * 2 height: parent.height - 10 * 2 spacing: 10 property int selectedTab: 0 + // Navigation rail ColumnLayout { id: tabBar Layout.fillHeight: true + Layout.fillWidth: false Layout.leftMargin: 15 spacing: 15 Repeater { @@ -42,44 +45,119 @@ Rectangle { } } } + + // Content area StackLayout { id: tabStack Layout.fillWidth: true - Layout.fillHeight: true + // Layout.fillHeight: true + Layout.alignment: Qt.AlignVCenter property int realIndex: 0 property int animationDuration: Appearance.animation.elementDecel.duration * 1.5 // Calendar Component { id: calendarWidget - ColumnLayout { + + Item { anchors.centerIn: parent - spacing: 5 - RowLayout { - Layout.fillWidth: true - Layout.fillHeight: false - spacing: 5 - Repeater { - model: CalendarLayout.weekDays - delegate: CalendarDayButton { - day: modelData.day - isToday: modelData.today - bold: true - interactable: false + width: calendarColumn.width + height: calendarColumn.height + property int monthShift: 0 + property var viewingDate: CalendarLayout.getDateInXMonthsTime(monthShift) + + MouseArea { + anchors.fill: parent + onWheel: { + if (wheel.angleDelta.y > 0) { + monthShift--; + } else if (wheel.angleDelta.y < 0) { + monthShift++; } } } - Repeater { - model: CalendarLayout.getCalendarLayout(null, true) - delegate: RowLayout { + ColumnLayout { + id: calendarColumn + anchors.centerIn: parent + spacing: 5 + + // Calendar header + RowLayout { Layout.fillWidth: true Layout.fillHeight: false spacing: 5 + CalendarHeaderButton { + onClicked: { + monthShift = 0; + } + content: StyledText { + text: `${monthShift != 0 ? "• " : ""}${viewingDate.toLocaleDateString(Qt.locale(), "MMMM yyyy")}` + horizontalAlignment: Text.AlignHCenter + font.pixelSize: Appearance.font.pixelSize.larger + color: Appearance.colors.colOnLayer1 + } + } + Item { + Layout.fillWidth: true + Layout.fillHeight: false + } + CalendarHeaderButton { + forceCircle: true + onClicked: { + monthShift--; + } + content: MaterialSymbol { + text: "chevron_left" + font.pixelSize: Appearance.font.pixelSize.large + horizontalAlignment: Text.AlignHCenter + color: Appearance.colors.colOnLayer1 + } + } + CalendarHeaderButton { + forceCircle: true + onClicked: { + monthShift++; + } + content: MaterialSymbol { + text: "chevron_right" + font.pixelSize: Appearance.font.pixelSize.large + horizontalAlignment: Text.AlignHCenter + color: Appearance.colors.colOnLayer1 + } + } + } + + // Week days row + RowLayout { + id: weekDaysRow + Layout.alignment: Qt.AlignHCenter + Layout.fillHeight: false + spacing: 5 Repeater { - model: modelData + model: CalendarLayout.weekDays delegate: CalendarDayButton { day: modelData.day isToday: modelData.today + bold: true + interactable: false + } + } + } + + // Real week rows + Repeater { + id: calendarRows + model: CalendarLayout.getCalendarLayout(viewingDate, monthShift === 0) + delegate: RowLayout { + Layout.alignment: Qt.AlignHCenter + Layout.fillHeight: false + spacing: 5 + Repeater { + model: modelData + delegate: CalendarDayButton { + day: modelData.day + isToday: modelData.today + } } } } @@ -128,7 +206,7 @@ Rectangle { { type: "calendar" }, { type: "todo" } ] - Item { + 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 diff --git a/.config/quickshell/modules/sidebarRight/CalendarDayButton.qml b/.config/quickshell/modules/sidebarRight/calendar/CalendarDayButton.qml similarity index 100% rename from .config/quickshell/modules/sidebarRight/CalendarDayButton.qml rename to .config/quickshell/modules/sidebarRight/calendar/CalendarDayButton.qml diff --git a/.config/quickshell/modules/sidebarRight/calendar/CalendarHeaderButton.qml b/.config/quickshell/modules/sidebarRight/calendar/CalendarHeaderButton.qml new file mode 100644 index 000000000..447dc6a37 --- /dev/null +++ b/.config/quickshell/modules/sidebarRight/calendar/CalendarHeaderButton.qml @@ -0,0 +1,31 @@ +import "root:/modules/common" +import "root:/modules/common/widgets" +import QtQuick +import QtQuick.Controls +import QtQuick.Layouts + +Button { + id: button + required default property Item content + property bool forceCircle: false + + implicitHeight: 30 + implicitWidth: forceCircle ? implicitHeight : (contentItem.implicitWidth + 10 * 2) + + background: Rectangle { + anchors.fill: parent + radius: Appearance.rounding.full + color: (button.down) ? Appearance.colors.colLayer2Active : (button.hovered ? Appearance.colors.colLayer2Hover : Appearance.colors.colLayer2) + + Behavior on color { + ColorAnimation { + duration: Appearance.animation.elementDecel.duration + easing.type: Appearance.animation.elementDecel.type + } + + } + + } + contentItem: content + +} \ No newline at end of file diff --git a/.config/quickshell/modules/sidebarRight/calendar_layout.js b/.config/quickshell/modules/sidebarRight/calendar/calendar_layout.js similarity index 79% rename from .config/quickshell/modules/sidebarRight/calendar_layout.js rename to .config/quickshell/modules/sidebarRight/calendar/calendar_layout.js index 097320acd..7f750b411 100644 --- a/.config/quickshell/modules/sidebarRight/calendar_layout.js +++ b/.config/quickshell/modules/sidebarRight/calendar/calendar_layout.js @@ -40,6 +40,26 @@ function getPrevMonthDays(month, year) { return 31; } +function getDateInXMonthsTime(x) { + var currentDate = new Date(); // Get the current date + if (x == 0) return currentDate; // If x is 0, return the current date + + var targetMonth = currentDate.getMonth() + x; // Calculate the target month + var targetYear = currentDate.getFullYear(); // Get the current year + + // Adjust the year and month if necessary + targetYear += Math.floor(targetMonth / 12); + targetMonth = (targetMonth % 12 + 12) % 12; + + // Create a new date object with the target year and month + var targetDate = new Date(targetYear, targetMonth, 1); + + // Set the day to the last day of the month to get the desired date + // targetDate.setDate(0); + + return targetDate; +} + function getCalendarLayout(dateObject, highlight) { if (!dateObject) dateObject = new Date(); const weekday = (dateObject.getDay() + 6) % 7; // MONDAY IS THE FIRST DAY OF THE WEEK