Merge branch 'main' of github.com:TriliumNext/Trilium

apps/client/src/services/css_class_manager.ts

@@ -39,12 +39,12 @@ function createClassForColor(colorString: string | null) {
         </style>`);
 
         registeredClasses.add(className);
-        if (hue) {
+        if (hue !== undefined) {
             colorsWithHue.add(className);
         }
     }
 
-    return clsx(className, colorsWithHue.has(className) && "with-hue");
+    return clsx("use-note-color", className, colorsWithHue.has(className) && "with-hue");
 }
 
 function parseColor(color: string) {

apps/client/src/stylesheets/theme-dark.css

@@ -109,3 +109,6 @@ body .todo-list input[type="checkbox"]:not(:checked):before {
     box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6) !important;
 }
 
+.use-note-color {
+    --custom-color: var(--dark-theme-custom-color);
+}

apps/client/src/stylesheets/theme-light.css

@@ -91,4 +91,8 @@ html {
 .ck-content a.reference-link > span,
 .board-note {
     color: var(--light-theme-custom-color, inherit);
+}
+
+.use-note-color {
+    --custom-color: var(--light-theme-custom-color);
 }

apps/client/src/stylesheets/theme-next-dark.css

@@ -270,6 +270,12 @@
     --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-background-color: #3c3c3c;
+    --calendar-coll-event-text-color: white;
+    --calendar-cell-event-hover-filter: brightness(1.25);
 }
 
 /*
@@ -308,4 +314,8 @@ body .todo-list input[type="checkbox"]:not(:checked):before {
     --modal-background-color: hsl(var(--custom-color-hue), 8.8%, 11.2%);
     --modal-border-color: hsl(var(--custom-color-hue), 9.4%, 25.1%);
     --promoted-attribute-card-background-color: hsl(var(--custom-color-hue), 13.2%, 20.8%);
+}
+
+.use-note-color {
+    --custom-color: var(--dark-theme-custom-color);
 }

apps/client/src/stylesheets/theme-next-light.css

@@ -268,6 +268,12 @@
     --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-background-color: #eaeaea;
+    --calendar-coll-event-text-color: black;
+    --calendar-cell-event-hover-filter: brightness(.95) saturate(1.25);
 }
 
 #left-pane .fancytree-node.tinted {

apps/client/src/translations/en-GB/translation.json

@@ -1 +1,73 @@
-{}
+{
+  "import": {
+    "safeImportTooltip": "Trilium <code>.zip</code> export files can contain executable scripts which may contain harmful behaviour. Safe import will deactivate automatic execution of all imported scripts. Uncheck \"Safe import\" only if the imported archive is supposed to contain executable scripts and you completely trust the contents of the import file.",
+    "shrinkImagesTooltip": "<p>If you check this option, Trilium will attempt to shrink the imported images by scaling and optimisation which may affect the perceived image quality. If unchecked, images will be imported without changes.</p><p>This doesn't apply to <code>.zip</code> imports with metadata since it is assumed these files are already optimised.</p>",
+    "codeImportedAsCode": "Import recognised code files (e.g. <code>.json</code>) as code notes if it's unclear from metadata"
+  },
+  "upload_attachments": {
+    "tooltip": "If you check this option, Trilium will attempt to shrink the uploaded images by scaling and optimisation which may affect the perceived image quality. If unchecked, images will be uploaded without changes."
+  },
+  "attribute_detail": {
+    "auto_read_only_disabled": "text/code notes can be set automatically into read mode when they are too large. You can disable this behaviour on per-note basis by adding this label to the note",
+    "workspace_tab_background_color": "CSS colour used in the note tab when hoisted to this note",
+    "color": "defines colour of the note in note tree, links etc. Use any valid CSS colour value like 'red' or #a13d5f",
+    "color_type": "Colour"
+  },
+  "mobile_detail_menu": {
+    "error_unrecognized_command": "Unrecognised command {{command}}"
+  },
+  "promoted_attributes": {
+    "remove_color": "Remove the colour label"
+  },
+  "max_content_width": {
+    "centerContent": "Keep content centred"
+  },
+  "theme": {
+    "auto_theme": "Legacy (Follow system colour scheme)",
+    "triliumnext": "Trilium (Follow system colour scheme)"
+  },
+  "search_engine": {
+    "custom_name_placeholder": "Customise search engine name",
+    "custom_url_placeholder": "Customise search engine url"
+  },
+  "highlights_list": {
+    "description": "You can customise the highlights list displayed in the right panel:",
+    "color": "Coloured text",
+    "bg_color": "Text with background colour"
+  },
+  "table_of_contents": {
+    "description": "Table of contents will appear in text notes when the note has more than a defined number of headings. You can customise this number:"
+  },
+  "custom_date_time_format": {
+    "description": "Customise the format of the date and time inserted via <shortcut /> or the toolbar. See <doc>Day.js docs</doc> for available format tokens."
+  },
+  "i18n": {
+    "title": "Localisation"
+  },
+  "attachment_detail_2": {
+    "unrecognized_role": "Unrecognised attachment role '{{role}}'."
+  },
+  "ai_llm": {
+    "reprocess_index_started": "Search index optimisation started in the background",
+    "index_rebuilding": "Optimising index ({{percentage}}%)",
+    "index_rebuild_complete": "Index optimisation complete"
+  },
+  "highlighting": {
+    "color-scheme": "Colour Scheme"
+  },
+  "code_theme": {
+    "color-scheme": "Colour scheme"
+  },
+  "call_to_action": {
+    "background_effects_message": "On Windows devices, background effects are now fully stable. The background effects adds a touch of colour to the user interface by blurring the background behind it. This technique is also used in other applications such as Windows Explorer."
+  },
+  "settings_appearance": {
+    "related_code_blocks": "Colour scheme for code blocks in text notes",
+    "related_code_notes": "Colour scheme for code notes"
+  },
+  "note-color": {
+    "clear-color": "Clear note colour",
+    "set-color": "Set note colour",
+    "set-custom-color": "Set custom note colour"
+  }
+}

apps/client/src/widgets/collections/calendar/event_builder.ts

@@ -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;

apps/client/src/widgets/collections/calendar/index.css

@@ -75,4 +75,32 @@ body.desktop:not(.zen) .calendar-view .calendar-header {
 .search-result-widget-content .calendar-view .calendar-header {
     padding-inline-end: unset !important;
 }
-/* #endregion */
+/* #endregion */
+
+.calendar-view {
+    --fc-event-text-color: var(--calendar-coll-event-text-color);
+    --fc-event-bg-color: var(--calendar-coll-event-background-color);
+}
+
+.calendar-view a.fc-timegrid-event,
+.calendar-view a.fc-daygrid-event {
+    border: unset;
+    border-left: 4px solid;
+    padding-left: 8px;
+    font-weight: 500;
+}
+
+.calendar-view a.fc-timegrid-event:hover,
+.calendar-view a.fc-daygrid-event:hover {
+    text-decoration: none;
+    border-color: var(--fc-event-text-color);
+    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);
+
+    background: hsl(var(--custom-color-hue),
+                    var(--calendar-coll-event-background-saturation),
+                    var(--calendar-coll-event-background-lightness)) !important;
+}

docs/README-en_GB.md

@@ -279,7 +279,7 @@ described in the "Discuss with us" section above.
   of the application.
 * [Sarah Hussein](https://github.com/Sarah-Hussein) for designing the
   application icon.
-* [nriver](https://github.com/nriver) for his work on internationalization.
+* [nriver](https://github.com/nriver) for his work on internationalisation.
 * [Thomas Frei](https://github.com/thfrei) for his original work on the Canvas.
 * [antoniotejada](https://github.com/nriver) for the original syntax highlight
   widget.