mirrors/PairDrop
1
0
Fork 0
mirror of https://github.com/schlagmichdoch/PairDrop.git synced 2025-04-22 07:46: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">
<h2 class="dialog-title" data-i18n-key="dialogs.language-selector-title" data-i18n-attrs="text"></h2>
</div>
<div class="language-buttons">
<button class="btn fw" data-i18n-key="dialogs.system-language" data-i18n-attrs="text"></button>
<button class="btn fw" value="ar">
<div class="language-buttons p2">
<button class="btn fw wrap">
<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>&nbsp;&nbsp;-&nbsp;&nbsp;</span>
<span>(Arabic)</span>
</button>
<button class="btn fw" value="de">
<button class="btn fw wrap" value="de">
<span>Deutsch</span>
<span>-</span>
<span>&nbsp;&nbsp;-&nbsp;&nbsp;</span>
<span>(German)</span>
</button>
<button class="btn fw" value="en">
<button class="btn fw wrap" value="en">
<span>English</span>
</button>
<button class="btn fw" value="es">
<button class="btn fw wrap" value="es">
<span>Español</span>
<span>-</span>
<span>&nbsp;&nbsp;-&nbsp;&nbsp;</span>
<span>(Spanish)</span>
</button>
<button class="btn fw" value="fr">
<button class="btn fw wrap" value="fr">
<span>Français</span>
<span>-</span>
<span>&nbsp;&nbsp;-&nbsp;&nbsp;</span>
<span>(French)</span>
</button>
<button class="btn fw" value="id">
<button class="btn fw wrap" value="id">
<span>Bahasa Indonesia</span>
<span>-</span>
<span>&nbsp;&nbsp;-&nbsp;&nbsp;</span>
<span>(Indonesian)</span>
</button>
<button class="btn fw" value="it">
<button class="btn fw wrap" value="it">
<span>Italiano</span>
<span>-</span>
<span>&nbsp;&nbsp;-&nbsp;&nbsp;</span>
<span>(Italian)</span>
</button>
<button class="btn fw" value="nl">
<button class="btn fw wrap" value="nl">
<span>Nederlands</span>
<span>-</span>
<span>&nbsp;&nbsp;-&nbsp;&nbsp;</span>
<span>(Dutch)</span>
</button>
<button class="btn fw" value="nb">
<button class="btn fw wrap" value="nb">
<span>Norsk</span>
<span>-</span>
<span>&nbsp;&nbsp;-&nbsp;&nbsp;</span>
<span>(Norwegian)</span>
</button>
<button class="btn fw" value="pt-BR">
<button class="btn fw wrap" value="pt-BR">
<span>Português do Brasil</span>
<span>-</span>
<span>&nbsp;&nbsp;-&nbsp;&nbsp;</span>
<span>(Brazilian Portuguese)</span>
</button>
<button class="btn fw" value="ro">
<button class="btn fw wrap" value="ro">
<span>Română</span>
<span>-</span>
<span>&nbsp;&nbsp;-&nbsp;&nbsp;</span>
<span>(Romanian)</span>
</button>
<button class="btn fw" value="ru">
<button class="btn fw wrap" value="ru">
<span>Русский язык</span>
<span>-</span>
<span>&nbsp;&nbsp;-&nbsp;&nbsp;</span>
<span>(Russian)</span>
</button>
<button class="btn fw" value="tr">
<button class="btn fw wrap" value="tr">
<span>Türkçe</span>
<span>-</span>
<span>&nbsp;&nbsp;-&nbsp;&nbsp;</span>
<span>(Turkish)</span>
</button>
<button class="btn fw" value="zh-CN">
<button class="btn fw wrap" value="zh-CN">
<span>中文</span>
<span>-</span>
<span>&nbsp;&nbsp;-&nbsp;&nbsp;</span>
<span>(Chinese)</span>
</button>
<button class="btn fw" value="ja">
<button class="btn fw wrap" value="ja">
<span>日本語</span>
<span>-</span>
<span>&nbsp;&nbsp;-&nbsp;&nbsp;</span>
<span>(Japanese)</span>
</button>
</div>

28
public/scripts/ui.js
View file

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

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

@ -335,7 +335,7 @@ x-dialog x-paper {
display: flex;
margin: auto;
flex-direction: column;
width: 400px;
max-width: 450px;
z-index: 3;
border-radius: 30px;
overflow: hidden;
@ -388,10 +388,6 @@ x-dialog a {
/* Pair Devices Dialog & Public Room Dialog */
#public-room-dialog x-paper {
width: 450px;
}
.input-key-container {
width: 100%;
display: flex;
@ -556,12 +552,25 @@ x-paper > .btn-row {
margin: 5px 10px 10px;
}
.language-buttons > button > span {
margin: 0 0.3em;
.language-buttons > .btn {
border-top: solid lightgray 1px;
padding: 7px;
font-size: 12px;
}
.language-buttons > button {
min-height: 36px;
.language-buttons > .btn:last-of-type {
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 {