nosignal/nosignal-shell
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

dashboard: add month/year and paging to calendar (#499)

Browse source 
* add month/year and paging to calendar

also, removed day/month from time panel, and  highlighting weekends
(need to figure out why the weekday enum is incorrect. locale issue?)

* removing dayOfWeek offset hack

this is clearly a me problem. my locale appears to be set to dz, but
only for caelestia shell. not sure why.

* aesthetic and localization improvements

* ensure all localized dates use UTC

issues i was having wrt localized date and day-of-week being off by one
appear to have been due to my timezone. forcing UTC seems to fix this.

* fixes

* anim today indicator

* keep state across open/close

* fix

---------

Co-authored-by: 2 * r + 2 * t <61896496+soramanew@users.noreply.github.com>
This commit is contained in:
M Matthew Hydock 2025-09-03 07:49:41 -04:00 • committed by GitHub
parent 8d8eabbaa1
commit 6e775a1a0e
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 189 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
modules/dashboard/Dash.qml
View file

@ -56,6 +56,8 @@ GridLayout {
Calendar {
id: calendar
state: root.state
}
}

1
modules/dashboard/Wrapper.qml
View file

@ -15,6 +15,7 @@ Item {
required property PersistentProperties visibilities
readonly property PersistentProperties state: PersistentProperties {
property int currentTab
property date currentDate: new Date()
readonly property FileDialog facePicker: FileDialog {
title: qsTr("Select a profile picture")

204
modules/dashboard/dash/Calendar.qml
View file

@ -1,21 +1,121 @@
pragma ComponentBehavior: Bound
import qs.components
import qs.components.effects
import qs.services
import qs.config
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
Column {
id: root
required property var state
readonly property int currMonth: state.currentDate.getMonth()
readonly property int currYear: state.currentDate.getFullYear()
anchors.left: parent.left
anchors.right: parent.right
padding: Appearance.padding.large
spacing: Appearance.spacing.small
RowLayout {
id: monthNavigationRow
anchors.left: parent.left
anchors.right: parent.right
anchors.margins: parent.padding
spacing: Appearance.spacing.small
Item {
implicitWidth: implicitHeight
implicitHeight: prevMonthText.implicitHeight + Appearance.padding.small * 2
StateLayer {
id: prevMonthStateLayer
radius: Appearance.rounding.full
function onClicked(): void {
root.state.currentDate = new Date(root.currYear, root.currMonth - 1, 1);
}
}
MaterialIcon {
id: prevMonthText
anchors.centerIn: parent
text: "chevron_left"
color: Colours.palette.m3tertiary
font.pointSize: Appearance.font.size.normal
font.weight: 700
}
}
Item {
Layout.fillWidth: true
implicitWidth: monthYearDisplay.implicitWidth + Appearance.padding.small * 2
implicitHeight: monthYearDisplay.implicitHeight + Appearance.padding.small * 2
StateLayer {
anchors.fill: monthYearDisplay
anchors.margins: -Appearance.padding.small
anchors.leftMargin: -Appearance.padding.normal
anchors.rightMargin: -Appearance.padding.normal
radius: Appearance.rounding.full
disabled: root.state.currentDate.toDateString() == new Date().toDateString()
function onClicked(): void {
root.state.currentDate = new Date();
}
}
StyledText {
id: monthYearDisplay
anchors.centerIn: parent
text: grid.title
color: Colours.palette.m3primary
font.pointSize: Appearance.font.size.normal
font.weight: 500
font.capitalization: Font.Capitalize
}
}
Item {
implicitWidth: implicitHeight
implicitHeight: nextMonthText.implicitHeight + Appearance.padding.small * 2
StateLayer {
id: nextMonthStateLayer
radius: Appearance.rounding.full
function onClicked(): void {
root.state.currentDate = new Date(root.currYear, root.currMonth + 1, 1);
}
}
MaterialIcon {
id: nextMonthText
anchors.centerIn: parent
text: "chevron_right"
color: Colours.palette.m3tertiary
font.pointSize: Appearance.font.size.normal
font.weight: 700
}
}
}
DayOfWeekRow {
id: days
id: daysRow
locale: grid.locale
anchors.left: parent.left
anchors.right: parent.right
@ -26,36 +126,37 @@ Column {
horizontalAlignment: Text.AlignHCenter
text: model.shortName
font.family: Appearance.font.family.sans
font.weight: 500
color: (model.day === 0 || model.day === 6) ? Colours.palette.m3secondary : Colours.palette.m3onSurfaceVariant
}
}
MonthGrid {
id: grid
Item {
anchors.left: parent.left
anchors.right: parent.right
anchors.margins: parent.padding
spacing: 3
implicitHeight: grid.implicitHeight
delegate: Item {
id: day
MonthGrid {
id: grid
required property var model
month: root.currMonth
year: root.currYear
implicitWidth: implicitHeight
implicitHeight: text.implicitHeight + Appearance.padding.small * 2
anchors.left: parent.left
anchors.right: parent.right
StyledRect {
anchors.centerIn: parent
spacing: 3
locale: Qt.locale()
implicitWidth: parent.implicitHeight
implicitHeight: parent.implicitHeight
delegate: Item {
id: dayItem
radius: Appearance.rounding.full
color: Qt.alpha(Colours.palette.m3primary, day.model.today ? 1 : 0)
required property var model
implicitWidth: implicitHeight
implicitHeight: text.implicitHeight + Appearance.padding.small * 2
StyledText {
id: text
@ -63,8 +164,73 @@ Column {
anchors.centerIn: parent
horizontalAlignment: Text.AlignHCenter
text: Qt.formatDate(day.model.date, "d")
color: day.model.today ? Colours.palette.m3onPrimary : day.model.month === grid.month ? Colours.palette.m3onSurfaceVariant : Colours.palette.m3outline
text: grid.locale.toString(dayItem.model.day)
color: {
const dayOfWeek = dayItem.model.date.getUTCDay();
if (dayOfWeek === 0 || dayOfWeek === 6)
return Colours.palette.m3secondary;
return Colours.palette.m3onSurfaceVariant;
}
opacity: dayItem.model.today || dayItem.model.month === grid.month ? 1 : 0.4
font.pointSize: Appearance.font.size.normal
font.weight: 500
}
}
}
StyledClippingRect {
id: todayIndicator
readonly property Item todayItem: grid.contentItem.children.find(c => c.model.today) ?? null
property Item today
onTodayItemChanged: {
if (todayItem)
today = todayItem;
}
x: today ? today.x + (today.width - implicitWidth) / 2 : 0
y: today?.y ?? 0
implicitWidth: today?.implicitWidth ?? 0
implicitHeight: today?.implicitHeight ?? 0
radius: Appearance.rounding.full
color: Colours.palette.m3primary
opacity: todayItem ? 1 : 0
scale: todayItem ? 1 : 0.7
Colouriser {
x: -todayIndicator.x
y: -todayIndicator.y
implicitWidth: grid.width
implicitHeight: grid.height
source: grid
sourceColor: Colours.palette.m3onSurface
colorizationColor: Colours.palette.m3onPrimary
}
Behavior on opacity {
Anim {}
}
Behavior on scale {
Anim {}
}
Behavior on x {
Anim {
easing.bezierCurve: Appearance.anim.curves.emphasized
}
}
Behavior on y {
Anim {
easing.bezierCurve: Appearance.anim.curves.emphasized
}
}
}

15
modules/dashboard/dash/DateTime.qml
View file

@ -32,7 +32,6 @@ Item {
}
StyledText {
Layout.topMargin: -(font.pointSize * 0.1)
Layout.alignment: Qt.AlignHCenter
text: "•••"
color: Colours.palette.m3primary
@ -59,23 +58,11 @@ Item {
sourceComponent: StyledText {
text: root.timeComponents[2] ?? ""
color: Colours.palette.m3secondary
color: Colours.palette.m3primary
font.pointSize: Appearance.font.size.large
font.family: Appearance.font.family.clock
font.weight: 600
}
}
StyledText {
Layout.topMargin: Appearance.spacing.normal
Layout.fillWidth: true
horizontalAlignment: Text.AlignHCenter
text: Time.format("ddd, d")
color: Colours.palette.m3tertiary
font.pointSize: Appearance.font.size.normal
font.family: Appearance.font.family.clock
font.weight: 500
elide: Text.ElideRight
}
}
}