diff --git a/.gitignore b/.gitignore index f649533..000ad69 100755 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,4 @@ __MACOSX .DS_Store -applist.json \ No newline at end of file +applist.json +changelog_draft.md diff --git a/module/webui/index.html b/module/webui/index.html index e570824..ed89fb0 100644 --- a/module/webui/index.html +++ b/module/webui/index.html @@ -27,16 +27,14 @@
- +
diff --git a/module/webui/scripts/language.js b/module/webui/scripts/language.js index 7bc2183..8b3c795 100644 --- a/module/webui/scripts/language.js +++ b/module/webui/scripts/language.js @@ -4,6 +4,17 @@ const languageButton = document.querySelector('.language-button'); const languageMenu = document.querySelector('.language-menu'); const languageOptions = document.querySelectorAll('.language-option'); const languageOverlay = document.getElementById('language-overlay'); +const rtlLang = [ + 'ar', // Arabic + 'fa', // Persian + 'he', // Hebrew + 'ur', // Urdu + 'ps', // Pashto + 'sd', // Sindhi + 'ku', // Kurdish + 'yi', // Yiddish + 'dv', // Dhivehi +]; export let translations = {}; let baseTranslations = {}; @@ -88,6 +99,25 @@ export async function loadTranslations() { translations = baseTranslations; } + // Support for rtl language + const isRTL = rtlLang.includes(lang.split('-')[0]); + if (isRTL) { + document.documentElement.setAttribute('dir', 'rtl'); + document.documentElement.setAttribute('lang', lang); + + // Load extra rtl css + fetch('styles/rtl_styles.css') + .then(res => res.text()) + .then(css => { + const style = document.createElement('style'); + style.textContent = css; + document.head.appendChild(style); + }); + } else { + document.documentElement.setAttribute('dir', 'ltr'); + document.documentElement.setAttribute('lang', lang); + } + // Generate language menu await generateLanguageMenu(); } catch (error) { @@ -155,10 +185,10 @@ export function setupLanguageMenu() { languageMenu.addEventListener("click", async (e) => { if (e.target.classList.contains("language-option")) { const lang = e.target.getAttribute("data-lang"); - localStorage.setItem('trickyAddonLanguage', lang); - closeLanguageMenu(); - await new Promise(resolve => setTimeout(resolve, 200)); - loadTranslations(); + if (lang) { + localStorage.setItem('trickyAddonLanguage', lang); + window.location.reload(); + } } }); } diff --git a/module/webui/styles/about.css b/module/webui/styles/about.css index 5cd3dba..a4891a7 100644 --- a/module/webui/styles/about.css +++ b/module/webui/styles/about.css @@ -20,7 +20,6 @@ .about-menu p { margin: 0; font-size: 16px; - text-align: left; } #module_name_line1 { @@ -55,10 +54,9 @@ .link-icon { font-size: 17px; font-weight: bold; - min-height: calc(1em + 15px); + min-height: calc(1em + 20px); padding: 3px 10px; color: #fff; - fill: #fff; user-select: none; display: inline-flex; align-items: center; @@ -69,6 +67,7 @@ transition: background-color 0.2s ease; svg { + fill: #fff; padding-right: 3px; } } diff --git a/module/webui/styles/applist.css b/module/webui/styles/applist.css index 4d5f501..146baea 100644 --- a/module/webui/styles/applist.css +++ b/module/webui/styles/applist.css @@ -273,7 +273,6 @@ display: inline-block; width: 20px; height: 20px; - margin-left: auto; } .checkbox { diff --git a/module/webui/styles/file_selector.css b/module/webui/styles/file_selector.css index f0c079a..b693489 100644 --- a/module/webui/styles/file_selector.css +++ b/module/webui/styles/file_selector.css @@ -71,12 +71,12 @@ position: relative; overflow: hidden; user-select: none; -} -.file-item svg { - flex-shrink: 0; - margin-right: 10px; - fill: var(--text-secondary); + svg { + flex-shrink: 0; + margin-right: 10px; + fill: var(--text-secondary); + } } .file-item span { diff --git a/module/webui/styles/header.css b/module/webui/styles/header.css index e741626..4c9ba13 100644 --- a/module/webui/styles/header.css +++ b/module/webui/styles/header.css @@ -1,7 +1,7 @@ .header { display: flex; align-items: center; - justify-content: space-between; + justify-content: flex-start; position: fixed; top: 0; left: 0; @@ -27,26 +27,34 @@ } .no-connection { - padding: 0; + height: 100%; + display: flex; + align-items: center; display: none; - margin-right: 0px; background: none; border: none; + + svg { + fill: var(--border-color); + } } .language-dropdown { + margin-left: auto; position: relative; display: inline-block; } .language-button { - padding-top: 5px; + height: 100%; + display: flex; + align-items: center; background: none; border: none; -} -.language-icon { - fill: var(--text-primary); + svg { + fill: var(--text-primary); + } } .language-menu { @@ -121,10 +129,16 @@ } .help-button { - padding-left: 5px; - margin-right: auto; + height: 100%; + display: flex; + align-items: center; + padding: 5px; background: none; border: none; + + svg { + fill: var(--border-color); + } } .help-overlay { @@ -139,7 +153,6 @@ background-color: var(--bg-secondary); padding: 30px; border-radius: 15px; - text-align: left; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); } @@ -148,7 +161,9 @@ flex-direction: column; gap: 20px; max-height: calc(85vh - 60px); + padding-bottom: 20px; overflow-y: auto; + mask-image: linear-gradient(black 0%, black calc(100% - 20px), transparent 100%); } .help-content-header { @@ -162,4 +177,4 @@ .instruction p { margin: 0; -} \ No newline at end of file +} diff --git a/module/webui/styles/rtl_styles.css b/module/webui/styles/rtl_styles.css new file mode 100644 index 0000000..28e0f5d --- /dev/null +++ b/module/webui/styles/rtl_styles.css @@ -0,0 +1,57 @@ +#module-version, +#title { + padding-left: unset; + padding-right: 5px; +} + +.language-dropdown { + margin-left: unset; + margin-right: auto; +} + +.language-menu { + right: unset; + left: 5px; + transform-origin: top left; +} + +.close-btn { + right: unset; + left: 12px; +} + +.search-icon { + left: unset; + right: 15px; +} + +.search-card { + left: unset; + right: 0; +} + +.menu { + right: unset; + left: 0; +} + +.menu-options { + right: unset; + left: 0; + transform: translateX(-120%); +} + +.app-icon-container { + margin-right: unset; + margin-left: 10px; +} + +.link-icon svg { + padding-right: unset; + padding-left: 3px; +} + +.file-item svg { + margin-right: unset; + margin-left: 10px; +} diff --git a/module/webui/styles/search_menu.css b/module/webui/styles/search_menu.css index e8fa770..299de88 100644 --- a/module/webui/styles/search_menu.css +++ b/module/webui/styles/search_menu.css @@ -133,7 +133,6 @@ .menu-options li { padding: 12px 15px; - text-align: left; } .menu-options li::after {