br0kenpixel/Tricky-Addon-Update-Target-List
1
0
Fork 0
mirror of https://github.com/KOWX712/Tricky-Addon-Update-Target-List.git synced 2025-09-06 06:37:09 +00:00
Code Issues Packages Projects Releases 1 Wiki Activity

feat: add rtl language ui support

Browse Source
This commit is contained in:
KOWX712
2025-06-20 05:58:48 +08:00
parent 38848fa891
commit b0025ea5d5
9 changed files with 129 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
.gitignore vendored
View File

@@ -1,3 +1,4 @@
__MACOSX
.DS_Store
applist.json
applist.json
changelog_draft.md

8
module/webui/index.html
View File

@@ -27,16 +27,14 @@
<div class="header">
<div id="title" data-i18n="header_title"></div><span id="module-version"></span>
<button id="help-button" class="help-button">
<svg xmlns="http://www.w3.org/2000/svg" height="21px" viewBox="0 -1060 960 990" width="21px" fill="#6E6E6E"><path d="M478-240q21 0 35.5-14.5T528-290q0-21-14.5-35.5T478-340q-21 0-35.5 14.5T428-290q0 21 14.5 35.5T478-240Zm-36-154h74q0-33 7.5-52t42.5-52q26-26 41-49.5t15-56.5q0-56-41-86t-97-30q-57 0-92.5 30T342-618l66 26q5-18 22.5-39t53.5-21q32 0 48 17.5t16 38.5q0 20-12 37.5T506-526q-44 39-54 59t-10 73Zm38 314q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z" /></svg>
<svg xmlns="http://www.w3.org/2000/svg" height="21px" viewBox="0 -960 960 960" width="21px"><path d="M478-240q21 0 35.5-14.5T528-290q0-21-14.5-35.5T478-340q-21 0-35.5 14.5T428-290q0 21 14.5 35.5T478-240Zm-36-154h74q0-33 7.5-52t42.5-52q26-26 41-49.5t15-56.5q0-56-41-86t-97-30q-57 0-92.5 30T342-618l66 26q5-18 22.5-39t53.5-21q32 0 48 17.5t16 38.5q0 20-12 37.5T506-526q-44 39-54 59t-10 73Zm38 314q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z" /></svg>
</button>
<div class="no-connection">
<svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 -920 960 960" width="20px" fill="#6E6E6E"><path d="M790-56 414-434q-47 11-87.5 33T254-346l-84-86q32-32 69-56t79-42l-90-90q-41 21-76.5 46.5T84-516L0-602q32-32 66.5-57.5T140-708l-84-84 56-56 736 736-58 56Zm-310-64q-42 0-71-29.5T380-220q0-42 29-71t71-29q42 0 71 29t29 71q0 41-29 70.5T480-120Zm236-238-29-29-29-29-144-144q81 8 151.5 41T790-432l-74 74Zm160-158q-77-77-178.5-120.5T480-680q-21 0-40.5 1.5T400-674L298-776q44-12 89.5-18t92.5-6q142 0 265 53t215 145l-84 86Z" /></svg>
<svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 -960 960 960" width="20px"><path d="M790-56 414-434q-47 11-87.5 33T254-346l-84-86q32-32 69-56t79-42l-90-90q-41 21-76.5 46.5T84-516L0-602q32-32 66.5-57.5T140-708l-84-84 56-56 736 736-58 56Zm-310-64q-42 0-71-29.5T380-220q0-42 29-71t71-29q42 0 71 29t29 71q0 41-29 70.5T480-120Zm236-238-29-29-29-29-144-144q81 8 151.5 41T790-432l-74 74Zm160-158q-77-77-178.5-120.5T480-680q-21 0-40.5 1.5T400-674L298-776q44-12 89.5-18t92.5-6q142 0 265 53t215 145l-84 86Z" /></svg>
</div>
<div class="language-dropdown">
<button class="language-button">
<i class="language-icon">
<svg xmlns="http://www.w3.org/2000/svg" height="22px" viewBox="0 -960 960 960" width="22px"><path d="M480-80q-82 0-155-31.5t-127.5-86Q143-252 111.5-325T80-480q0-83 31.5-155.5t86-127Q252-817 325-848.5T480-880q83 0 155.5 31.5t127 86q54.5 54.5 86 127T880-480q0 82-31.5 155t-86 127.5q-54.5 54.5-127 86T480-80Zm0-82q26-36 45-75t31-83H404q12 44 31 83t45 75Zm-104-16q-18-33-31.5-68.5T322-320H204q29 50 72.5 87t99.5 55Zm208 0q56-18 99.5-55t72.5-87H638q-9 38-22.5 73.5T584-178ZM170-400h136q-3-20-4.5-39.5T300-480q0-21 1.5-40.5T306-560H170q-5 20-7.5 39.5T160-480q0 21 2.5 40.5T170-400Zm216 0h188q3-20 4.5-39.5T580-480q0-21-1.5-40.5T574-560H386q-3 20-4.5 39.5T380-480q0 21 1.5 40.5T386-400Zm268 0h136q5-20 7.5-39.5T800-480q0-21-2.5-40.5T790-560H654q3 20 4.5 39.5T660-480q0 21-1.5 40.5T654-400Zm-16-240h118q-29-50-72.5-87T584-782q18 33 31.5 68.5T638-640Zm-234 0h152q-12-44-31-83t-45-75q-26 36-45 75t-31 83Zm-200 0h118q9-38 22.5-73.5T376-782q-56 18-99.5 55T204-640Z"/></svg>
</i>
<svg xmlns="http://www.w3.org/2000/svg" height="22px" viewBox="0 -960 960 960" width="22px"><path d="M480-80q-82 0-155-31.5t-127.5-86Q143-252 111.5-325T80-480q0-83 31.5-155.5t86-127Q252-817 325-848.5T480-880q83 0 155.5 31.5t127 86q54.5 54.5 86 127T880-480q0 82-31.5 155t-86 127.5q-54.5 54.5-127 86T480-80Zm0-82q26-36 45-75t31-83H404q12 44 31 83t45 75Zm-104-16q-18-33-31.5-68.5T322-320H204q29 50 72.5 87t99.5 55Zm208 0q56-18 99.5-55t72.5-87H638q-9 38-22.5 73.5T584-178ZM170-400h136q-3-20-4.5-39.5T300-480q0-21 1.5-40.5T306-560H170q-5 20-7.5 39.5T160-480q0 21 2.5 40.5T170-400Zm216 0h188q3-20 4.5-39.5T580-480q0-21-1.5-40.5T574-560H386q-3 20-4.5 39.5T380-480q0 21 1.5 40.5T386-400Zm268 0h136q5-20 7.5-39.5T800-480q0-21-2.5-40.5T790-560H654q3 20 4.5 39.5T660-480q0 21-1.5 40.5T654-400Zm-16-240h118q-29-50-72.5-87T584-782q18 33 31.5 68.5T638-640Zm-234 0h152q-12-44-31-83t-45-75q-26 36-45 75t-31 83Zm-200 0h118q9-38 22.5-73.5T376-782q-56 18-99.5 55T204-640Z"/></svg>
</button>
<div class="language-menu blur-box"></div>
<div id="language-overlay" class="language-overlay"></div>

38
module/webui/scripts/language.js
View File

@@ -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();
}
}
});
}

5
module/webui/styles/about.css
View File

@@ -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;
}
}

1
module/webui/styles/applist.css
View File

@@ -273,7 +273,6 @@
display: inline-block;
width: 20px;
height: 20px;
margin-left: auto;
}
.checkbox {

10
module/webui/styles/file_selector.css
View File

@@ -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 {

37
module/webui/styles/header.css
View File

@@ -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;
}
}

57
module/webui/styles/rtl_styles.css Normal file
View File

@@ -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;
}

1
module/webui/styles/search_menu.css
View File

@@ -133,7 +133,6 @@
.menu-options li {
padding: 12px 15px;
text-align: left;
}
.menu-options li::after {