mirrors/PairDrop
1
0
Fork 0
mirror of https://github.com/schlagmichdoch/PairDrop.git synced 2025-04-22 15:56:17 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Fix overflowing Brazilian Portuguese button and change style of current language button

Browse source
This commit is contained in:
schlagmichdoch 2023-12-11 21:44:13 +01:00
parent d5da647ea9
commit 429d0edbf8
3 changed files with 65 additions and 54 deletions
Download patch file Download diff file Expand all files Collapse all files

64
public/index.html
View file

@ -182,79 +182,81 @@
<div class="row center p2"> <div class="row center p2">
<h2 class="dialog-title" data-i18n-key="dialogs.language-selector-title" data-i18n-attrs="text"></h2> <h2 class="dialog-title" data-i18n-key="dialogs.language-selector-title" data-i18n-attrs="text"></h2>
</div> </div>
<div class="language-buttons"> <div class="language-buttons p2">
<button class="btn fw" data-i18n-key="dialogs.system-language" data-i18n-attrs="text"></button> <button class="btn fw wrap">
<button class="btn fw" value="ar"> <span data-i18n-key="dialogs.system-language" data-i18n-attrs="text"></span>
</button>
<button class="btn fw wrap" value="ar">
<span>العربية</span> <span>العربية</span>
<span>-</span> <span>&nbsp;&nbsp;-&nbsp;&nbsp;</span>
<span>(Arabic)</span> <span>(Arabic)</span>
</button> </button>
<button class="btn fw" value="de"> <button class="btn fw wrap" value="de">
<span>Deutsch</span> <span>Deutsch</span>
<span>-</span> <span>&nbsp;&nbsp;-&nbsp;&nbsp;</span>
<span>(German)</span> <span>(German)</span>
</button> </button>
<button class="btn fw" value="en"> <button class="btn fw wrap" value="en">
<span>English</span> <span>English</span>
</button> </button>
<button class="btn fw" value="es"> <button class="btn fw wrap" value="es">
<span>Español</span> <span>Español</span>
<span>-</span> <span>&nbsp;&nbsp;-&nbsp;&nbsp;</span>
<span>(Spanish)</span> <span>(Spanish)</span>
</button> </button>
<button class="btn fw" value="fr"> <button class="btn fw wrap" value="fr">
<span>Français</span> <span>Français</span>
<span>-</span> <span>&nbsp;&nbsp;-&nbsp;&nbsp;</span>
<span>(French)</span> <span>(French)</span>
</button> </button>
<button class="btn fw" value="id"> <button class="btn fw wrap" value="id">
<span>Bahasa Indonesia</span> <span>Bahasa Indonesia</span>
<span>-</span> <span>&nbsp;&nbsp;-&nbsp;&nbsp;</span>
<span>(Indonesian)</span> <span>(Indonesian)</span>
</button> </button>
<button class="btn fw" value="it"> <button class="btn fw wrap" value="it">
<span>Italiano</span> <span>Italiano</span>
<span>-</span> <span>&nbsp;&nbsp;-&nbsp;&nbsp;</span>
<span>(Italian)</span> <span>(Italian)</span>
</button> </button>
<button class="btn fw" value="nl"> <button class="btn fw wrap" value="nl">
<span>Nederlands</span> <span>Nederlands</span>
<span>-</span> <span>&nbsp;&nbsp;-&nbsp;&nbsp;</span>
<span>(Dutch)</span> <span>(Dutch)</span>
</button> </button>
<button class="btn fw" value="nb"> <button class="btn fw wrap" value="nb">
<span>Norsk</span> <span>Norsk</span>
<span>-</span> <span>&nbsp;&nbsp;-&nbsp;&nbsp;</span>
<span>(Norwegian)</span> <span>(Norwegian)</span>
</button> </button>
<button class="btn fw" value="pt-BR"> <button class="btn fw wrap" value="pt-BR">
<span>Português do Brasil</span> <span>Português do Brasil</span>
<span>-</span> <span>&nbsp;&nbsp;-&nbsp;&nbsp;</span>
<span>(Brazilian Portuguese)</span> <span>(Brazilian Portuguese)</span>
</button> </button>
<button class="btn fw" value="ro"> <button class="btn fw wrap" value="ro">
<span>Română</span> <span>Română</span>
<span>-</span> <span>&nbsp;&nbsp;-&nbsp;&nbsp;</span>
<span>(Romanian)</span> <span>(Romanian)</span>
</button> </button>
<button class="btn fw" value="ru"> <button class="btn fw wrap" value="ru">
<span>Русский язык</span> <span>Русский язык</span>
<span>-</span> <span>&nbsp;&nbsp;-&nbsp;&nbsp;</span>
<span>(Russian)</span> <span>(Russian)</span>
</button> </button>
<button class="btn fw" value="tr"> <button class="btn fw wrap" value="tr">
<span>Türkçe</span> <span>Türkçe</span>
<span>-</span> <span>&nbsp;&nbsp;-&nbsp;&nbsp;</span>
<span>(Turkish)</span> <span>(Turkish)</span>
</button> </button>
<button class="btn fw" value="zh-CN"> <button class="btn fw wrap" value="zh-CN">
<span>中文</span> <span>中文</span>
<span>-</span> <span>&nbsp;&nbsp;-&nbsp;&nbsp;</span>
<span>(Chinese)</span> <span>(Chinese)</span>
</button> </button>
<button class="btn fw" value="ja"> <button class="btn fw wrap" value="ja">
<span>日本語</span> <span>日本語</span>
<span>-</span> <span>&nbsp;&nbsp;-&nbsp;&nbsp;</span>
<span>(Japanese)</span> <span>(Japanese)</span>
</button> </button>
</div> </div>

26
public/scripts/ui.js
View file

@ -774,7 +774,7 @@ class LanguageSelectDialog extends Dialog {
this.$languageSelectBtn = $('language-selector'); this.$languageSelectBtn = $('language-selector');
this.$languageSelectBtn.addEventListener('click', _ => this.show()); this.$languageSelectBtn.addEventListener('click', _ => this.show());
this.$languageButtons = this.$el.querySelectorAll(".language-buttons button"); this.$languageButtons = this.$el.querySelectorAll(".language-buttons .btn");
this.$languageButtons.forEach($btn => { this.$languageButtons.forEach($btn => {
$btn.addEventListener("click", e => this.selectLanguage(e)); $btn.addEventListener("click", e => this.selectLanguage(e));
}) })
@ -790,22 +790,22 @@ class LanguageSelectDialog extends Dialog {
} }
show() { show() {
if (Localization.isSystemLocale()) {
this.$languageButtons[0].focus();
}
else {
let locale = Localization.getLocale(); let locale = Localization.getLocale();
for (let i=0; i<this.$languageButtons.length; i++) { this.currentLanguageBtn = Localization.isSystemLocale()
const $btn = this.$languageButtons[i]; ? this.$languageButtons[0]
if ($btn.value === locale) { : this.$el.querySelector(`.btn[value="${locale}"]`);
$btn.focus();
break; this.currentLanguageBtn.classList.add("current");
}
}
}
super.show(); super.show();
} }
hide() {
this.currentLanguageBtn.classList.remove("current");
super.hide();
}
selectLanguage(e) { selectLanguage(e) {
e.preventDefault() e.preventDefault()
let languageCode = e.target.value; let languageCode = e.target.value;

27
public/styles/deferred-styles.css
View file

@ -335,7 +335,7 @@ x-dialog x-paper {
display: flex; display: flex;
margin: auto; margin: auto;
flex-direction: column; flex-direction: column;
width: 400px; max-width: 450px;
z-index: 3; z-index: 3;
border-radius: 30px; border-radius: 30px;
overflow: hidden; overflow: hidden;
@ -388,10 +388,6 @@ x-dialog a {
/* Pair Devices Dialog & Public Room Dialog */ /* Pair Devices Dialog & Public Room Dialog */
#public-room-dialog x-paper {
width: 450px;
}
.input-key-container { .input-key-container {
width: 100%; width: 100%;
display: flex; display: flex;
@ -556,12 +552,25 @@ x-paper > .btn-row {
margin: 5px 10px 10px; margin: 5px 10px 10px;
} }
.language-buttons > button > span { .language-buttons > .btn {
margin: 0 0.3em; border-top: solid lightgray 1px;
padding: 7px;
font-size: 12px;
} }
.language-buttons > button { .language-buttons > .btn:last-of-type {
min-height: 36px; border-bottom: solid lightgray 1px;
}
/* Ensure click event target is always button and never span */
.language-buttons span {
z-index: -1;
}
.language-buttons > .current > span {
text-decoration: underline 4px;
text-decoration-skip-ink: none;
text-underline-position: under;
} }
.file-description { .file-description {