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

feat: improve dash calendar

Browse source
This commit is contained in:
2 * r + 2 * t 2026-04-23 02:00:07 +10:00
parent dbc62f91ea
commit 6897f0629a
1 changed files with 39 additions and 71 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -3,6 +3,7 @@ pragma ComponentBehavior: Bound
import QtQuick import QtQuick
import QtQuick.Controls import QtQuick.Controls
import QtQuick.Layouts import QtQuick.Layouts
import M3Shapes
import Caelestia.Config import Caelestia.Config
import qs.components import qs.components
import qs.components.controls import qs.components.controls
@ -36,56 +37,38 @@ CustomMouseArea {
anchors.fill: parent anchors.fill: parent
anchors.margins: Tokens.padding.large anchors.margins: Tokens.padding.large
spacing: Tokens.spacing.small spacing: Tokens.spacing.extraSmall
RowLayout { RowLayout {
id: monthNavigationRow id: monthNavigationRow
Layout.fillWidth: true Layout.fillWidth: true
spacing: Tokens.spacing.small spacing: Tokens.spacing.extraSmall
Item { IconButton {
implicitWidth: implicitHeight icon: "chevron_left"
implicitHeight: prevMonthText.implicitHeight + Tokens.padding.small type: IconButton.Text
font: Tokens.font.icon.builders.small.weight(Font.Bold).build()
StateLayer { inactiveOnColour: Colours.palette.m3tertiary
id: prevMonthStateLayer padding: Tokens.padding.small
onClicked: root.dashState.currentDate = new Date(root.currYear, root.currMonth - 1, 1)
radius: Tokens.rounding.full
onClicked: root.dashState.currentDate = new Date(root.currYear, root.currMonth - 1, 1)
}
MaterialIcon {
id: prevMonthText
anchors.centerIn: parent
text: "chevron_left"
color: Colours.palette.m3tertiary
fontStyle: Tokens.font.icon.size(Tokens.font.icon.medium.pointSize).weight(Font.Bold).build()
}
} }
Item { Item {
Layout.fillWidth: true Layout.fillWidth: true
Layout.fillHeight: true
implicitWidth: monthYearDisplay.implicitWidth + Tokens.padding.small implicitWidth: monthYearDisplay.implicitWidth + Tokens.padding.large * 2
implicitHeight: monthYearDisplay.implicitHeight + Tokens.padding.small implicitHeight: monthYearDisplay.implicitHeight + Tokens.padding.extraSmall * 2
StateLayer { StateLayer {
onClicked: { color: Colours.palette.m3primary
root.dashState.currentDate = new Date();
}
anchors.fill: monthYearDisplay
anchors.margins: -Tokens.padding.extraSmall
anchors.leftMargin: -Tokens.padding.medium
anchors.rightMargin: -Tokens.padding.medium
radius: Tokens.rounding.full radius: Tokens.rounding.full
disabled: { disabled: {
const now = new Date(); const now = new Date();
return root.currMonth === now.getMonth() && root.currYear === now.getFullYear(); return root.currMonth === now.getMonth() && root.currYear === now.getFullYear();
} }
onClicked: root.dashState.currentDate = new Date()
} }
StyledText { StyledText {
@ -94,32 +77,17 @@ CustomMouseArea {
anchors.centerIn: parent anchors.centerIn: parent
text: grid.title text: grid.title
color: Colours.palette.m3primary color: Colours.palette.m3primary
font: Tokens.font.body.builders.medium.weight(Font.Medium).capitalisation(Font.Capitalize).build() font: Tokens.font.title.builders.small.capitalisation(Font.Capitalize).build()
} }
} }
Item { IconButton {
implicitWidth: implicitHeight icon: "chevron_right"
implicitHeight: nextMonthText.implicitHeight + Tokens.padding.small type: IconButton.Text
font: Tokens.font.icon.builders.small.weight(Font.Bold).build()
StateLayer { inactiveOnColour: Colours.palette.m3tertiary
id: nextMonthStateLayer padding: Tokens.padding.small
onClicked: root.dashState.currentDate = new Date(root.currYear, root.currMonth + 1, 1)
onClicked: {
root.dashState.currentDate = new Date(root.currYear, root.currMonth + 1, 1);
}
radius: Tokens.rounding.full
}
MaterialIcon {
id: nextMonthText
anchors.centerIn: parent
text: "chevron_right"
color: Colours.palette.m3tertiary
fontStyle: Tokens.font.icon.size(Tokens.font.icon.medium.pointSize).weight(Font.Bold).build()
}
} }
} }
@ -134,7 +102,7 @@ CustomMouseArea {
horizontalAlignment: Text.AlignHCenter horizontalAlignment: Text.AlignHCenter
text: model.shortName text: model.shortName
font: Tokens.font.body.builders.medium.weight(Font.Medium).build() font: Tokens.font.body.builders.small.weight(Font.Medium).build()
color: (model.day === 0 || model.day === 6) ? Colours.palette.m3secondary : Colours.palette.m3onSurfaceVariant color: (model.day === 0 || model.day === 6) ? Colours.palette.m3secondary : Colours.palette.m3onSurfaceVariant
} }
} }
@ -177,12 +145,12 @@ CustomMouseArea {
return Colours.palette.m3onSurfaceVariant; return Colours.palette.m3onSurfaceVariant;
} }
opacity: dayItem.model.today || dayItem.model.month === grid.month ? 1 : 0.4 opacity: dayItem.model.today || dayItem.model.month === grid.month ? 1 : 0.4
font: Tokens.font.body.builders.medium.weight(Font.Medium).build() font: Tokens.font.body.small
} }
} }
} }
StyledRect { MaterialShape {
id: todayIndicator id: todayIndicator
readonly property Item todayItem: grid.contentItem.children.find(c => c.model.today) ?? null readonly property Item todayItem: grid.contentItem.children.find(c => c.model.today) ?? null
@ -193,14 +161,14 @@ CustomMouseArea {
today = todayItem; today = todayItem;
} }
x: today ? today.x + (today.width - implicitWidth) / 2 : 0 // I have no idea why it needs -1 but oh well
y: today?.y ?? 0 x: today ? today.x + (today.width - implicitWidth) / 2 - 1 : 0
y: today ? today.y - Tokens.padding.extraSmall - 1 : 0
implicitWidth: today?.implicitWidth ?? 0 implicitSize: today ? Math.max(today.implicitWidth, today.implicitHeight) + Tokens.padding.extraSmall * 2 : 0
implicitHeight: today?.implicitHeight ?? 0 shape: MaterialShape.Sunny
clip: true clip: true
radius: Tokens.rounding.full
color: Colours.palette.m3primary color: Colours.palette.m3primary
opacity: todayItem ? 1 : 0 opacity: todayItem ? 1 : 0
@ -219,23 +187,23 @@ CustomMouseArea {
} }
Behavior on opacity { Behavior on opacity {
Anim {} Anim {
type: Anim.DefaultEffects
}
} }
Behavior on scale { Behavior on scale {
Anim {} Anim {
type: Anim.FastSpatial
}
} }
Behavior on x { Behavior on x {
Anim { Anim {}
type: Anim.DefaultSpatial
}
} }
Behavior on y { Behavior on y {
Anim { Anim {}
type: Anim.DefaultSpatial
}
} }
} }
} }