feat: allow customizing today format

Author: mzdr

app/assets/backgrounds/gradient.svg

@@ -27,6 +27,7 @@ const {
 const defaultPreferences = {
   calendarBackground: resolve(integratedBackgroundsDirectory, 'empty.svg'),
   calendarLegendFormat: 'MMM y',
+  calendarTodayFormat: 'EEEE, do MMMM',
   clockFormat: 'PPPP',
   openAtLogin: false,
 };

app/index.js

@@ -18,15 +18,19 @@ module.exports = {
     },
     clockFormat: {
       label: 'Format der Uhr',
-      description: 'Die System-Tray-Uhr verwendet die Formatfunktion von [date-fns](https://date-fns.org/docs/format). Verwenden Sie ein beliebiges Muster, das Ihnen gefällt.',
+      description: 'Das [Format](https://date-fns.org/docs/format) der Uhrzeitanzeige im System-Tray.',
     },
     calendarBackground: {
       label: 'Hintergrund',
-      description: 'Passen Sie den Kalenderhintergrund an Ihre persönlichen Wünsche an.',
+      description: 'Wählen Sie einen Kalenderhintergrund aus der Ihrem Geschmack entspricht.',
     },
     calendarLegendFormat: {
       label: 'Format der Legende',
-      description: 'Das Format der Legende über dem Monat. Verwendet auch die Formatfunktion von [date-fns](https://date-fns.org/docs/format).',
+      description: 'Das [Format](https://date-fns.org/docs/format) der Legende über dem Monat.',
+    },
+    calendarTodayFormat: {
+      label: 'Format des aktuellen Tages',
+      description: 'Das [Format](https://date-fns.org/docs/format) des aktuellen Tages welches im Kalenderkopf angezeigt wird.',
     },
     shortcuts: {
       description: 'Im Folgenden finden Sie eine vollständige Liste der Tastenkombinationen, die Sie im Kalenderfenster verwenden können.',

app/locales/de.js

@@ -18,15 +18,19 @@ module.exports = {
     },
     clockFormat: {
       label: 'Clock format',
-      description: 'The system tray clock is using the format function of [date-fns](https://date-fns.org/docs/format). Use any pattern you may like.',
+      description: 'The format [pattern](https://date-fns.org/docs/format) of the system tray clock.',
     },
     calendarBackground: {
       label: 'Background',
-      description: 'Customize the calendar background to your personal liking.',
+      description: 'Choose a calendar background that suits your personal liking.',
     },
     calendarLegendFormat: {
       label: 'Legend format',
-      description: 'The format of the legend above the month. Uses the format function of [date-fns](https://date-fns.org/docs/format) as well.',
+      description: 'The format [pattern](https://date-fns.org/docs/format) of the legend above the month.',
+    },
+    calendarTodayFormat: {
+      label: 'Today format',
+      description: 'The format [pattern](https://date-fns.org/docs/format) of the today display in the calendar head.',
     },
     shortcuts: {
       description: 'See below for a complete list of keyboard shortcuts that you can use in the calendar window.',

app/locales/en.js

@@ -1,9 +1,8 @@
 .form-group {
   display: grid;
-  grid-gap: calc(var(--grid-gap) / 3) calc(var(--grid-gap) * 2);
-  grid-template-areas: "label action" "description .";
+  grid-gap: calc(var(--grid-gap) / 3) calc(var(--grid-gap) * 3);
+  grid-template-areas: "label action" "description action";
   grid-template-columns: 1fr min-content;
-  grid-template-rows: minmax(30px, min-content) min-content;
 }
 
 .form-group > .label {
@@ -18,7 +17,7 @@
 }
 
 .form-group > .action {
-  align-self: center;
+  align-self: flex-start;
   grid-area: action;
   margin: 0;
   outline: 0;
@@ -29,6 +28,8 @@
   font: inherit;
   outline: 0;
   padding: 2px 4px;
+  resize: none;
+  text-align: center;
 }
 
 .form-group > .action.-toggle {
@@ -37,6 +38,6 @@
 }
 
 .form-group > .action.-select {
-  padding: 4px;
+  padding: 5px;
   text-transform: capitalize;
 }

app/styles/components/form-group.css

@@ -7,9 +7,6 @@
   display: block;
   font-size: calc(var(--type-size) * 2.5);
   font-weight: 100;
-  padding: calc(var(--grid-gap) * 2.5) 0 calc(var(--grid-gap) * 1.5);
-}
-
-.calendar-today > .day {
-  font-weight: 300;
+  padding: calc(var(--grid-gap) * 2.5) var(--grid-gap);
+  white-space: pre;
 }

app/views/calendar/calendar-today/calendar-today.css

@@ -7,17 +7,31 @@ export default class CalendarToday extends HTMLElement {
     upgrade(this, `
       <template>
         <link rel="stylesheet" href="calendar-today/calendar-today.css">
-        <span class="calendar-today" @postupdate.window="onPostUpdate" #$content>&nbsp;</span>
+        <slot class="calendar-today">&nbsp;</slot>
       </template>
     `);
+
+    const { preferences } = window;
+
+    preferences.on('changed', this.onPreferencesChanged.bind(this));
+
+    this.render();
+  }
+
+  onPreferencesChanged(event, key, value) {
+    if (key !== 'calendarTodayFormat') {
+      return;
+    }
+
+    this.render(value);
   }
 
-  async onPostUpdate() {
-    const { calendar } = window;
-    const { $content } = this.$refs;
-    const [day, date, month] = (await calendar.getDate({ format: 'EEEE do MMMM' })).split(' ');
+  async render(format) {
+    const { calendar, preferences } = window;
 
-    $content.innerHTML = `${day},<br><strong class="day">${date}</strong> ${month}`;
+    this.innerHTML = await calendar.getDate({
+      format: (format || await preferences.get('calendarTodayFormat')).replace(/\n/g, '\'<br>\''),
+    });
 
     dispatch(this, 'postrender');
   }

app/views/calendar/calendar-today/calendar-today.js

@@ -82,6 +82,11 @@ export default class PreferencesView extends HTMLElement {
                 <translation-key class="label">preferences.calendarLegendFormat.label</translation-key>
                 <translation-key class="description" markdown>preferences.calendarLegendFormat.description</translation-key>
               </label>
+              <label class="form-group">
+                <textarea name="calendarTodayFormat" class="action -text" cols="10"></textarea>
+                <translation-key class="label">preferences.calendarTodayFormat.label</translation-key>
+                <translation-key class="description" markdown>preferences.calendarTodayFormat.description</translation-key>
+              </label>
             </section>
             <section class="content" #$content>
               <translation-key class="description">preferences.shortcuts.description</translation-key>