From 904615a51a0cc9b72add13612078bca6cd559920 Mon Sep 17 00:00:00 2001 From: Veloman Yunkan Date: Sun, 19 Feb 2023 16:30:38 +0400 Subject: [PATCH] Modal language selector on the welcome page The language selector on the welcome page has been replaced with a smaller button that opens a modal language selector. Though the code for introducing such a modal language selector has been added in i18n.js, its appearance relies on styles defined in index.css. Once this new UI for changing the UI language is approved, it must be used in the ZIM viewer too. Known issues: - selecting the language with arrow keys (using the keyboard only, without pressing space first, so that the full list of languages is shown) doesn't work because as soon as the current language is changed the modal language selector disappears. --- static/skin/i18n.js | 44 +++++++++++++++++++++++++++++++++++++ static/skin/index.css | 21 ++++++++++++++++-- static/skin/index.js | 1 + static/templates/index.html | 19 +++++++++++++--- test/server.cpp | 14 ++++++------ 5 files changed, 87 insertions(+), 12 deletions(-) diff --git a/static/skin/i18n.js b/static/skin/i18n.js index 6c5eb0ad1..53c11c7f9 100644 --- a/static/skin/i18n.js +++ b/static/skin/i18n.js @@ -97,7 +97,51 @@ function setUserLanguage(lang, callback) { Translations.whenReady(callback); } +function createModalUILanguageSelector() { + document.body.insertAdjacentHTML('beforeend', + ``); + + window.modalUILanguageSelector = { + show: () => { + document.getElementById('uiLanguageSelector').style.display = 'flex'; + }, + + close: () => { + document.getElementById('uiLanguageSelector').style.display = 'none'; + } + }; +} + function initUILanguageSelector(activeLanguage, languageChangeCallback) { + if ( document.getElementById("ui_language") == null ) { + createModalUILanguageSelector(); + } const languageSelector = document.getElementById("ui_language"); for (const lang of uiLanguages ) { const lang_name = Object.getOwnPropertyNames(lang)[0]; diff --git a/static/skin/index.css b/static/skin/index.css index e0d43fbb0..df0b33ff0 100644 --- a/static/skin/index.css +++ b/static/skin/index.css @@ -157,9 +157,26 @@ body { font-weight: bolder; } -#ui_language { +#uiLanguageSelector { + display: none; +} + +#uiLanguageSelector .modal { + height: 140px; +} + +#uiLanguageSelector .modal-heading { + height: 40%; +} + +#uiLanguageSelector .modal-content #ui_language { + font-size: 1.6rem; + width: 100%; +} + +#uiLanguageSelectorButton { + margin: 16px 12px 0 0; float: right; - top: 0; } .book__list { diff --git a/static/skin/index.js b/static/skin/index.js index 06147f88b..c87a47878 100644 --- a/static/skin/index.js +++ b/static/skin/index.js @@ -33,6 +33,7 @@ } function changeUILanguage() { + window.modalUILanguageSelector.close(); const s = document.getElementById("ui_language"); const lang = s.options[s.selectedIndex].value; setPermanentGlobalCookie('userlang', lang); diff --git a/static/templates/index.html b/static/templates/index.html index aae63a6a1..6bbe6d126 100644 --- a/static/templates/index.html +++ b/static/templates/index.html @@ -52,9 +52,18 @@ aria-label="Library OPDS Feed" title="Library OPDS Feed"> + + + + + + +
-