From d0821bd98b87d29acfd162c020f36be028e6f0e1 Mon Sep 17 00:00:00 2001 From: Chris Kankiewicz Date: Wed, 30 Dec 2020 12:56:26 -0700 Subject: [PATCH] Added theme toggle switch --- .env.example | 1 - app/config/app.php | 7 ------- app/resources/js/app.js | 35 +++++++++++++++++++++----------- app/resources/sass/app.scss | 5 +++++ app/translations/da.yaml | 1 + app/translations/de.yaml | 1 + app/translations/en.yaml | 1 + app/translations/es.yaml | 1 + app/translations/fi.yaml | 1 + app/translations/fr.yaml | 1 + app/translations/gr.yaml | 1 + app/translations/id.yaml | 1 + app/translations/it.yaml | 1 + app/translations/kr.yaml | 3 ++- app/translations/nl.yaml | 3 ++- app/translations/pl.yaml | 1 + app/translations/pt-BR.yaml | 1 + app/translations/ro.yaml | 1 + app/translations/ru.yaml | 1 + app/translations/zh-CN.yaml | 1 + app/translations/zh-TW.yaml | 1 + app/views/components/header.twig | 10 +++++++-- app/views/layouts/app.twig | 10 ++++----- 23 files changed, 60 insertions(+), 29 deletions(-) diff --git a/.env.example b/.env.example index a43d126..dd719b7 100644 --- a/.env.example +++ b/.env.example @@ -1,7 +1,6 @@ APP_DEBUG=false APP_LANGUAGE=en -DARK_MODE=false DISPLAY_READMES=true READMES_FIRST=false ZIP_DOWNLOADS=true diff --git a/app/config/app.php b/app/config/app.php index a663fdd..007fff6 100644 --- a/app/config/app.php +++ b/app/config/app.php @@ -36,13 +36,6 @@ return [ */ 'meta_description' => DI\env('META_DESCRIPTION', 'Yet another directory listing, powered by Directory Lister.'), - /** - * Enable dark mode? - * - * Default value: false - */ - 'dark_mode' => DI\env('DARK_MODE', false), - /** * Parse and render README files on the page. * diff --git a/app/resources/js/app.js b/app/resources/js/app.js index c3cd4c6..bcfe1de 100644 --- a/app/resources/js/app.js +++ b/app/resources/js/app.js @@ -4,31 +4,42 @@ import FileInfoModal from './components/file-info-modal.vue'; const app = new Vue({ el: '#app', components: { FileInfoModal }, - data: function () { - return { menuOpen: false }; - }, + data: () => ({ + theme: 'light', + menuOpen: false, + }), computed: { - menuStyles() { return { 'hidden': ! this.menuOpen } } + darkMode() { + return this.theme === 'dark'; + }, + lightMode() { + return this.theme === 'light'; + } }, methods: { showFileInfo(filePath) { this.$refs.fileInfoModal.show(filePath); }, - toggleMenuVisibility() { - this.menuOpen = ! this.menuOpen; - } + toggleTheme() { + this.theme = this.lightMode ? 'dark' : 'light'; + }, + }, + created: function () { + this.theme = localStorage.getItem('theme') || 'light'; }, mounted: function() { - window.addEventListener('keyup', e => e.key == '/' && this.$refs.searchInput.focus()); + window.addEventListener('keyup', e => e.key === '/' && this.$refs.searchInput.focus()); - let scrollToTop = this.$refs.scrollToTop; window.addEventListener('scroll', function() { if (window.scrollY > 10) { - scrollToTop.classList.remove('hidden'); + this.$refs.scrollToTop.classList.remove('hidden'); } else { - scrollToTop.classList.add('hidden'); + this.$refs.scrollToTop.classList.add('hidden'); } - }); + }.bind(this)); + }, + watch: { + theme: value => localStorage.setItem('theme', value), } }); diff --git a/app/resources/sass/app.scss b/app/resources/sass/app.scss index bf647b7..b66083f 100644 --- a/app/resources/sass/app.scss +++ b/app/resources/sass/app.scss @@ -17,3 +17,8 @@ $fa-font-path: "./webfonts"; // Additional Styles @import "markdown.scss"; + +// Miscellaneous +[v-cloak] { + display: none; +} diff --git a/app/translations/da.yaml b/app/translations/da.yaml index 59b8fb3..40c0959 100644 --- a/app/translations/da.yaml +++ b/app/translations/da.yaml @@ -8,6 +8,7 @@ file: info: Filoplysninger powered_by: Drevet af scroll_to_top: Gå til sidens top +toggle_theme: Skift lys/mørk tilstand error: directory_not_found: Mappen eksisterer ikke diff --git a/app/translations/de.yaml b/app/translations/de.yaml index 6282bb2..923d785 100644 --- a/app/translations/de.yaml +++ b/app/translations/de.yaml @@ -8,6 +8,7 @@ file: info: Dateiinformation powered_by: Unterstützt von scroll_to_top: Nach oben Scrollen +toggle_theme: Schalten Sie den Hell/Dunkel-Modus um error: directory_not_found: Verzeichnis nicht gefunden diff --git a/app/translations/en.yaml b/app/translations/en.yaml index fe1b3cb..0f4193e 100644 --- a/app/translations/en.yaml +++ b/app/translations/en.yaml @@ -8,6 +8,7 @@ file: info: File Info powered_by: Powered by scroll_to_top: Scroll to Top +toggle_theme: Toggle Light/Dark Mode error: directory_not_found: Directory does not exist diff --git a/app/translations/es.yaml b/app/translations/es.yaml index 32bcfa4..912eb5c 100644 --- a/app/translations/es.yaml +++ b/app/translations/es.yaml @@ -8,6 +8,7 @@ file: info: Información del Archivo powered_by: Desarrollado por scroll_to_top: Vuelve al Comienzo +toggle_theme: Alternar modo claro/oscuro error: directory_not_found: El directorio no existe diff --git a/app/translations/fi.yaml b/app/translations/fi.yaml index 7e9a0c3..218b21f 100644 --- a/app/translations/fi.yaml +++ b/app/translations/fi.yaml @@ -8,6 +8,7 @@ file: info: Tiedot powered_by: Voimanlähteenä scroll_to_top: Takaisin ylös +toggle_theme: Vaihda vaalea/tumma tila error: directory_not_found: Hakemistoa ei ole olemassa diff --git a/app/translations/fr.yaml b/app/translations/fr.yaml index 8dbcad3..54ed0e1 100644 --- a/app/translations/fr.yaml +++ b/app/translations/fr.yaml @@ -8,6 +8,7 @@ file: info: Informations sur le Fichier powered_by: Alimenté par scroll_to_top: Retour en Haut +toggle_theme: Basculer entre le thème clair/sombre error: directory_not_found: Le répertoire n'existe pas diff --git a/app/translations/gr.yaml b/app/translations/gr.yaml index a74967c..26514cb 100644 --- a/app/translations/gr.yaml +++ b/app/translations/gr.yaml @@ -8,6 +8,7 @@ file: info: Πληροφορίες αρχείου powered_by: Powered by scroll_to_top: Μεταβείτε στην κορυφή +toggle_theme: Εναλλαγή φωτεινής/σκοτεινής λειτουργίας error: directory_not_found: Ο κατάλογος δεν υπάρχει diff --git a/app/translations/id.yaml b/app/translations/id.yaml index 8ad8e21..17c30f3 100644 --- a/app/translations/id.yaml +++ b/app/translations/id.yaml @@ -8,6 +8,7 @@ file: info: Info Berkas powered_by: Diberdayakan oleh scroll_to_top: Skrol ke atas +toggle_theme: Alihkan mode terang/gelap error: directory_not_found: Direktori tidak ditemukan diff --git a/app/translations/it.yaml b/app/translations/it.yaml index 9845961..1148a03 100644 --- a/app/translations/it.yaml +++ b/app/translations/it.yaml @@ -8,6 +8,7 @@ file: info: Info powered_by: Powered by scroll_to_top: Torna su +toggle_theme: Attiva/disattiva la modalità luce/buio error: directory_not_found: La cartella non esiste diff --git a/app/translations/kr.yaml b/app/translations/kr.yaml index 1e907e1..f1a2c7f 100644 --- a/app/translations/kr.yaml +++ b/app/translations/kr.yaml @@ -8,6 +8,7 @@ file: info: 파일 정보 powered_by: Powered by scroll_to_top: 맨위로 스크롤 +toggle_theme: 밝게/어둡게 모드 전환 error: directory_not_found: 디렉토리 찾을 수 없습니다 @@ -16,4 +17,4 @@ error: no_results_found: 검색 결과를 없습니다 unexpected: 오류가 발생했습니다 -enable_debugging: 더 많은 정보 받아기 위해서 디버깅 활성화하세요 \ No newline at end of file +enable_debugging: 더 많은 정보 받아기 위해서 디버깅 활성화하세요 diff --git a/app/translations/nl.yaml b/app/translations/nl.yaml index 6c6d62a..7618ac9 100644 --- a/app/translations/nl.yaml +++ b/app/translations/nl.yaml @@ -1,5 +1,5 @@ home: Home -download: Download this Directory +download: Download deze directory search: Zoeken file: name: Bestandsnaam @@ -8,6 +8,7 @@ file: info: Bestandsinformatie powered_by: Mogelijk gemaakt door scroll_to_top: Ga naar boven +toggle_theme: Schakel tussen licht/donker modus error: directory_not_found: Map bestaat niet diff --git a/app/translations/pl.yaml b/app/translations/pl.yaml index cb953ac..375462e 100644 --- a/app/translations/pl.yaml +++ b/app/translations/pl.yaml @@ -8,6 +8,7 @@ file: info: Szczegóły powered_by: Wspierane przez scroll_to_top: Przewiń na górę +toggle_theme: Przełącz tryb jasny/ciemny error: directory_not_found: Nie znaleziono ścieżki diff --git a/app/translations/pt-BR.yaml b/app/translations/pt-BR.yaml index 0778561..b2457f0 100644 --- a/app/translations/pt-BR.yaml +++ b/app/translations/pt-BR.yaml @@ -8,6 +8,7 @@ file: info: Informação do arquivo powered_by: Desenvolvido por scroll_to_top: Voltar ao início +toggle_theme: Alternar modo claro/escuro error: directory_not_found: Diretório não existe diff --git a/app/translations/ro.yaml b/app/translations/ro.yaml index c8e15bb..00c4c1d 100644 --- a/app/translations/ro.yaml +++ b/app/translations/ro.yaml @@ -8,6 +8,7 @@ file: info: Info Fișier powered_by: Cu sprijinul scroll_to_top: Derulați la început +toggle_theme: Comutați modul lumină/întuneric error: directory_not_found: Directorul nu există diff --git a/app/translations/ru.yaml b/app/translations/ru.yaml index 813b5db..3f51c5c 100644 --- a/app/translations/ru.yaml +++ b/app/translations/ru.yaml @@ -8,6 +8,7 @@ file: info: Информация о файле powered_by: Питаться от scroll_to_top: Пролистать наверх +toggle_theme: Переключить светлый/темный режим error: directory_not_found: Каталог не существует diff --git a/app/translations/zh-CN.yaml b/app/translations/zh-CN.yaml index 8e5394b..764148d 100644 --- a/app/translations/zh-CN.yaml +++ b/app/translations/zh-CN.yaml @@ -8,6 +8,7 @@ file: info: 文件信息 powered_by: 基于 scroll_to_top: 回到顶部 +toggle_theme: 切换亮/暗模式 error: directory_not_found: 目录不存在 diff --git a/app/translations/zh-TW.yaml b/app/translations/zh-TW.yaml index b49d838..9649381 100644 --- a/app/translations/zh-TW.yaml +++ b/app/translations/zh-TW.yaml @@ -8,6 +8,7 @@ file: info: 文件資訊 powered_by: 基於 scroll_to_top: 回到頂部 +toggle_theme: 切換亮/暗模式 error: directory_not_found: 目錄不存在 diff --git a/app/views/components/header.twig b/app/views/components/header.twig index 12955f7..9be4124 100644 --- a/app/views/components/header.twig +++ b/app/views/components/header.twig @@ -12,18 +12,24 @@ {% endif %} - -
+
{% if path and files is not empty and config('zip_downloads') %} {% endif %} +
+
+ +
+
+
{% include 'components/search.twig' %}
diff --git a/app/views/layouts/app.twig b/app/views/layouts/app.twig index 9ae07f7..32e9644 100644 --- a/app/views/layouts/app.twig +++ b/app/views/layouts/app.twig @@ -4,7 +4,7 @@ - + {% if config('google_analytics_id', false) %} @@ -17,10 +17,10 @@ {{ title }} • Directory Lister - -
+
+
{% block content %}{% endblock %}
+
- - +