progress in i18n

diff --git a/frontend/src/lib/Datepicker.svelte b/frontend/src/lib/Datepicker.svelte
index 09df6922dba201033e9f92e1a122281063d9421f..0d0e6377b1ad0fc8d79855c95d70daec771f7b41 100644 (file)
--- a/frontend/src/lib/Datepicker.svelte
+++ b/frontend/src/lib/Datepicker.svelte
@@ -131,7 +131,15 @@
        };
 
        // weekdays
-       const weekDays = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
+       const weekDays = [
+               $t('calendar.day_short.monday'),
+               $t('calendar.day_short.tuesday'),
+               $t('calendar.day_short.wednesday'),
+               $t('calendar.day_short.thursday'),
+               $t('calendar.day_short.friday'),
+               $t('calendar.day_short.saturday'),
+               $t('calendar.day_short.sunday')
+       ];
 </script>
 
 <div class="datepicker glassLight">
@@ -226,7 +234,7 @@
                                                                fill-rule: evenodd;
                                                        }
                                                </style></defs
-                                       ><title>add-bookmark</title>
+                                       ><title>{$t('calendar.button_bookmark')}</title>
                                        {#if !$cal.daysBookmarked.includes($selectedDate.day)}
                                                <path
                                                        class="cls-1"

diff --git a/frontend/src/lib/Sidenav.svelte b/frontend/src/lib/Sidenav.svelte
index 133f33b0997cfa67603619d8feaf839d341affc9..02644a60c36cf57345a573992537cb8dc856121d 100644 (file)
--- a/frontend/src/lib/Sidenav.svelte
+++ b/frontend/src/lib/Sidenav.svelte
@@ -12,6 +12,9 @@
        import { API_URL } from '$lib/APIurl.js';
        import axios from 'axios';
        import { cal } from '$lib/calendarStore.js';
+       import { getTranslate } from '@tolgee/svelte';
+
+       const { t } = getTranslate();
 
        let oc;
 
@@ -263,21 +266,10 @@
                                class="btnSearchPopover btn btn-outline-secondary glassLight"
                                data-bs-toggle="popover"
                                data-bs-title="Suche"
-                               data-bs-content="Du kannst nach <b>Text</b>, <b>Dateinamen</b> und <b>Tags</b> suchen.<br>
-                               Mit <span class='kbd'>Ctrl</span> + <span class='kbd'>F</span> wird das Suchfeld fokussiert.<br>
-                               <ul>
-                                       <li><b><u>Text</u></b>: Bei Verwendung von mehreren Suchbegriffen gelten folgende Regeln:
-                                               <ul>
-                                                       <li><b>EXAKT</b>: Setze den kompletten Suchbegriff in <u>doppelte Anführungszeichen</u>, um die exakte Wortfolge zu suchen.</li>
-                                                       <li><b>ODER</b>: Trenne Suchbegriffe mit <b>|</b>, um Einträge zu finden, bei denen mindestens ein Begriff verwendet wurde.</li>
-                                                       <li><b>UND</b>: Trenne Suchbegriffe mit <u>Leerzeichen</u>, um Einträge zu finden, bei denen alle Begriffe verwendet wurden. Die Reihenfolge der Begriffe ist dabei irrelevant, genauso wie die Distanz zwischen den Begriffen.</li>
-                                               </ul>
-                                       </li>
-                                       <li><b><u>Dateinamen</u></b>: Wenn der Suchbegriff nur aus <u>einem Wort</u> besteht, dann wird nicht nur nach Text, sondern auch nach Dateinamen gesucht.</li>
-                                       <li><b><u>Tags</u></b>: Der Suchbegriff muss mit <b>#</b> beginnen. Es wird nach jedem Datum gesucht, das mit dem Tag markiert ist.</li>
-                               </ul>"
+                               data-bs-content={$t('search.description')}
                                onclick={(event) => event.preventDefault()}><Fa icon={faQuestionCircle} /></button
                        >
+                       <!--TODO: Description not working (html?!)! -->
                        {#if $searchTag.id}
                                <!-- If a tag is selected ... -->
                                <div class="ms-1 align-content-center">
@@ -298,7 +290,7 @@
                                        type="text"
                                        class="form-control"
                                        placeholder="Suche"
-                                       aria-label="Suche"
+                                       aria-label={$t('search.search')}
                                        aria-describedby="search-button"
                                        onkeydown={handleKeyDown}
                                        autocomplete="off"
@@ -316,7 +308,7 @@
                                        {#if $isSearching}
                                                <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
                                        {:else}
-                                               Suche
+                                               {$t('search.search')}
                                        {/if}
                                </button>
                        {/if}
@@ -324,7 +316,9 @@
                {#if showTagDropdown}
                        <div class="searchTagDropdown glass">
                                {#if filteredTags.length === 0}
-                                       <em style="padding: 0.2rem;">Kein Tag gefunden...</em>
+                                       <em style="padding: 0.2rem;">
+                                               {$t('tags.no_tags_found')}
+                                       </em>
                                {:else}
                                        {#each filteredTags as tag, index (tag.id)}
                                                <!-- svelte-ignore a11y_click_events_have_key_events -->
@@ -379,7 +373,9 @@
                                        </button>
                                {/each}
                        {:else}
-                               <span class="noResult">Keine Ergebnisse</span>
+                               <span class="noResult">
+                                       {$t('search.no_results')}
+                               </span>
                        {/if}
                </div>
        </div>
@@ -394,7 +390,9 @@
                aria-atomic="true"
        >
                <div class="d-flex">
-                       <div class="toast-body">Fehler beim Suchen!</div>
+                       <div class="toast-body">
+                               {$t('search.toast.error')}
+                       </div>
                </div>
        </div>
 
@@ -406,7 +404,9 @@
                aria-atomic="true"
        >
                <div class="d-flex">
-                       <div class="toast-body">Fehler beim Markieren des Tages!</div>
+                       <div class="toast-body">
+                               {$t('calendar.toast.error_bookmarking')}
+                       </div>
                </div>
        </div>
 </div>

diff --git a/frontend/src/lib/settingsStore.js b/frontend/src/lib/settingsStore.js
index 77d0867c567fef908c8f9e90ef519ce51498796b..6e97eab73ffa90df57797f207998148246188c17 100644 (file)
--- a/frontend/src/lib/settingsStore.js
+++ b/frontend/src/lib/settingsStore.js
@@ -2,13 +2,6 @@ import {writable} from 'svelte/store';
 
 export const readingMode = writable('');
 
-// old, to be deleted
-export const useTrianglify = writable(true);
-export const trianglifyOpacity = writable(0.4);
-export const trianglifyColor = writable('');
-export const backgroundColor = writable('');
-//=========
-
 export const settings = writable({});
 
 export const tempSettings = writable({});

diff --git a/frontend/src/routes/(authed)/+layout.svelte b/frontend/src/routes/(authed)/+layout.svelte
index b2c21fc1ef01bc68f07cfacab582b0a1b782aa0f..2f75cc4bd1363c88e3843e8bae91066aa5f1a21f 100644 (file)
--- a/frontend/src/routes/(authed)/+layout.svelte
+++ b/frontend/src/routes/(authed)/+layout.svelte
@@ -7,9 +7,7 @@
                readingMode,
                settings,
                tempSettings,
-               autoLoadImagesThisDevice,
-               useTrianglify,
-               trianglifyOpacity
+               autoLoadImagesThisDevice
        } from '$lib/settingsStore.js';
        import { API_URL } from '$lib/APIurl.js';
        import { tags } from '$lib/tagStore.js';
@@ -1939,26 +1937,10 @@
                border-radius: 5px;
        }
 
-       #trianglifyOpacity {
-               max-width: 300px;
-       }
-
-       #trianglifyOpacityNumber {
-               width: 80px;
-       }
-
        .modal-body {
                overflow-y: hidden;
        }
 
-       .modal-content {
-               /* backdrop-filter: blur(10px) saturate(150%);
-               background-color: rgba(208, 208, 208, 0.61); */
-
-               /* background-color: rgba(43, 56, 78, 0.75); */
-               /* color: rgb(22, 22, 22); */
-       }
-
        .modal-header {
                border-bottom: 1px solid rgba(255, 255, 255, 0.2);
        }

diff --git a/frontend/src/routes/+layout.svelte b/frontend/src/routes/+layout.svelte
index d8a3b50376fa2d0247a362d1ab47591240535c88..8e9b5a6b1128ee7b9a06575e0c2f02675a76bda7 100644 (file)
--- a/frontend/src/routes/+layout.svelte
+++ b/frontend/src/routes/+layout.svelte
@@ -4,7 +4,6 @@
        import { goto } from '$app/navigation';
        import { onMount } from 'svelte';
        import '../scss/styles.scss';
-       import { trianglifyOpacity } from '$lib/settingsStore.js';
        import { page } from '$app/state';
        import { API_URL } from '$lib/APIurl.js';
        import { alwaysShowSidenav, generateNeonMesh } from '$lib/helpers.js';
@@ -71,14 +70,6 @@
                }
        );
 
-       $effect(() => {
-               if ($trianglifyOpacity) {
-                       if (document.querySelector('canvas')) {
-                               document.querySelector('canvas').style.opacity = $trianglifyOpacity;
-                       }
-               }
-       });
-
        function calculateResize() {
                if (window.innerWidth > 840) {
                        $alwaysShowSidenav = true;