gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-12-01 04:54:25 +01:00
Code Issues Actions 13 Packages Projects Releases Wiki Activity

style/calendar collection: improve the support for colored notes

Browse Source
This commit is contained in:
Adorian Doran 2025-11-30 20:08:24 +02:00
parent 1bf8be2874
commit 63f9006d17
4 changed files with 40 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
apps/client/src/stylesheets/theme-next-dark.css
View File

@ -270,6 +270,11 @@
--ck-editor-toolbar-button-on-color: white;
--ck-editor-toolbar-button-on-shadow: 1px 1px 2px rgba(0, 0, 0, .75);
--ck-editor-toolbar-dropdown-button-open-background: #ffffff14;
--calendar-coll-event-background-saturation: 12%;
--calendar-coll-event-background-lightness: 21%;
--calendar-coll-event-text-color: white;
--calendar-cell-event-hover-filter: brightness(1.25);
}
/*

5
apps/client/src/stylesheets/theme-next-light.css
View File

@ -268,6 +268,11 @@
--ck-editor-toolbar-button-on-color: black;
--ck-editor-toolbar-button-on-shadow: none;
--ck-editor-toolbar-dropdown-button-open-background: #0000000f;
--calendar-coll-event-background-lightness: 95%;
--calendar-coll-event-background-saturation: 80%;
--calendar-coll-event-text-color: black;
--calendar-cell-event-hover-filter: brightness(.95) saturate(1.25);
}
#left-pane .fancytree-node.tinted {

4
apps/client/src/widgets/collections/calendar/event_builder.ts
View File

@ -3,6 +3,7 @@ import froca from "../../../services/froca";
import { formatDateToLocalISO, getCustomisableLabel, getMonthsInDateRange, offsetDate } from "./utils";
import FNote from "../../../entities/fnote";
import server from "../../../services/server";
import clsx from "clsx";
interface Event {
startDate: string,
@ -81,6 +82,7 @@ export async function buildEvent(note: FNote, { startDate, endDate, startTime, e
const customTitleAttributeName = note.getLabelValue("calendar:title");
const titles = await parseCustomTitle(customTitleAttributeName, note);
const color = note.getLabelValue("calendar:color") ?? note.getLabelValue("color");
const colorClass = note.getColorClass();
const events: EventInput[] = [];
const calendarDisplayedAttributes = note.getLabelValue("calendar:displayedAttributes")?.split(",");
@ -111,7 +113,7 @@ export async function buildEvent(note: FNote, { startDate, endDate, startTime, e
color: color ?? undefined,
iconClass: note.getLabelValue("iconClass"),
promotedAttributes: displayedAttributesData,
className: isArchived ? "archived" : ""
className: clsx({archived: isArchived}, colorClass)
};
if (endDate) {
eventData.end = endDate;

26
apps/client/src/widgets/collections/calendar/index.css
View File

@ -76,3 +76,29 @@ body.desktop:not(.zen) .calendar-view .calendar-header {
padding-inline-end: unset !important;
}
/* #endregion */
.calendar-view {
--fc-event-text-color: var(--calendar-coll-event-text-color);
}
.calendar-view a.fc-timegrid-event,
.calendar-view a.fc-daygrid-event {
font-weight: 500;
}
.calendar-view a.fc-timegrid-event:hover,
.calendar-view a.fc-daygrid-event:hover {
text-decoration: none;
filter: var(--calendar-cell-event-hover-filter);
}
.fc-timegrid-event.with-hue, .fc-daygrid-event:not(.fc-daygrid-dot-event).with-hue {
--fc-event-text-color: var(--custom-color);
border: unset;
border-left: 4px solid;
padding-left: 8px;
background: hsl(var(--custom-color-hue),
var(--calendar-coll-event-background-saturation),
var(--calendar-coll-event-background-lightness)) !important;
}