vyn/mirai
1
Fork 0
mirror of https://codeberg.org/vyn/mirai.git synced 2025-07-03 18:23:19 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add a Calendar view on the right side

Browse source
This commit is contained in:
Vyn 2024-10-29 15:02:46 +01:00
parent a80515ff90
commit f1ac8a42d1
18 changed files with 406 additions and 130 deletions
Download patch file Download diff file Expand all files Collapse all files

112
ui/components/Calendar.slint Normal file
View file

@ -0,0 +1,112 @@
import { ScrollView, Date, Time } from "std-widgets.slint";
import { VCheckBox, VButton, VActionButton, Svg, VTag, VPopupIconMenu, VText, Palette } from "@selenite";
import { Utils } from "../Utils.slint";
export struct CalendarDayEvent {
title: string,
startsAt: Time,
endsAt: Time
}
export struct CalendarDay {
events: [CalendarDayEvent],
date: Date,
header: string,
}
export enum CalendarDateDisplayFormat {
Relative,
Normal
}
export component Calendar inherits Rectangle {
in property<[CalendarDay]> days;
in property <CalendarDateDisplayFormat> format;
private property <length> header-height: 64px;
private property <length> available-day-space: self.height - header-height;
private property <length> day-start-y: header-height;
private property <length> hour-spacing: available-day-space / 24;
background: Palette.pane;
HorizontalLayout {
Rectangle {
//background: red;
width: 48px;
VerticalLayout {
y: 0;
height: header-height;
padding-right: 8px;
VText {
vertical-alignment: center;
horizontal-alignment: right;
text: "";
}
}
for index in 24: VerticalLayout {
y: day-start-y + index * hour-spacing - (hour-spacing / 2);
height: hour-spacing;
padding-right: 8px;
VText {
vertical-alignment: center;
horizontal-alignment: right;
text: "\{index}h";
}
}
}
Rectangle {
//background: green;
HorizontalLayout {
for day[day-index] in root.days: Rectangle {
if day-index > 0 : Rectangle {
x: 0;
y: header-height - 32px;
width: 1px;
height: parent.height;
background: Palette.card-background.transparentize(0.5);
}
VerticalLayout {
y: 0;
height: header-height;
padding-right: 8px;
VText {
vertical-alignment: center;
horizontal-alignment: center;
text: day.header;
}
}
for hour[hour-index] in 24 : Rectangle {
background: Palette.card-background.transparentize(0.5);
x: 0px;
width: parent.width;
y: day-start-y + hour-spacing * hour-index;
height: 1px;
}
for event[event-index] in day.events : Rectangle {
background: Palette.card-background;
border-radius: 4px;
x: 8px;
width: parent.width - 16px;
y: day-start-y + hour-spacing * event.startsAt.hour;
height: hour-spacing * (event.endsAt.hour - event.startsAt.hour) - 2px;
clip: true;
HorizontalLayout {
Rectangle {
width: 4px;
background: Palette.accent;
}
VerticalLayout {
padding: 16px;
VText {
text: event.title;
wrap: TextWrap.word-wrap;
}
}
}
}
}
}
}
}
}

2
ui/components/EventGroup.slint
View file

@ -62,7 +62,7 @@ export component EventGroup {
VText {
text: Utils.time-to-string(event.endsAt);
color: Palette.accent;
font-size: 0.8rem;
font-size: 0.9rem;
horizontal-alignment: center;
}
}

42
ui/components/SideBar.slint
View file

@ -1,11 +1,11 @@
import { Backend } from "../Backend.slint";
import { ToggleButton, VText, Palette } from "@selenite";
import { VButton, ToggleButton, VText, Svg, Palette } from "@selenite";
export component SideBar inherits Rectangle {
background: Palette.pane;
VerticalLayout {
alignment: start;
height: parent.height;
padding: 16px;
spacing: 16px;
VText {
@ -13,19 +13,33 @@ export component SideBar inherits Rectangle {
font-size: 1.5rem;
}
VerticalLayout {
spacing: 4px;
ToggleButton {
text: "All";
text-alignment: left;
active: Backend.no-source-selected;
clicked => { Backend.source-clicked(-1) }
}
for item[index] in Backend.sources-selected: ToggleButton {
text: item.name;
text-alignment: left;
active: item.selected;
clicked => { Backend.source-clicked(index) }
alignment: space-between;
vertical-stretch: 1;
VerticalLayout {
vertical-stretch: 1;
spacing: 4px;
ToggleButton {
text: "All";
text-alignment: left;
active: Backend.no-source-selected;
clicked => { Backend.source-clicked(-1) }
}
for item[index] in Backend.sources-selected: ToggleButton {
text: item.name;
text-alignment: left;
active: item.selected;
clicked => { Backend.source-clicked(index) }
}
}
/*VerticalLayout {
spacing: 4px;
VButton {
icon-svg: Svg.cog;
text: "Settings";
background: transparent;
clicked => { Backend.settings-clicked() }
}
}*/
}
}
}