mirrors/PairDrop
1
0
Fork 0
mirror of https://github.com/schlagmichdoch/PairDrop.git synced 2025-04-21 07:16:18 -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 770fb8f1af
4 changed files with 73 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>

28
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()) { let locale = Localization.getLocale();
this.$languageButtons[0].focus(); this.currentLanguageBtn = Localization.isSystemLocale()
} ? this.$languageButtons[0]
else { : this.$el.querySelector(`.btn[value="${locale}"]`);
let locale = Localization.getLocale();
for (let i=0; i<this.$languageButtons.length; i++) { this.currentLanguageBtn.classList.add("current");
const $btn = this.$languageButtons[i];
if ($btn.value === locale) {
$btn.focus();
break;
}
}
}
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;

29
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,27 @@ 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 var(--lang-hr-color) 2px;
padding: 7px;
font-size: 12px;
} }
.language-buttons > button { .language-buttons > .btn:last-of-type {
min-height: 36px; border-bottom: solid var(--lang-hr-color) 2px;
}
/* Ensure click event target is always button and never span */
.language-buttons span {
z-index: -1;
}
.language-buttons > .current:after {
position: absolute;
right: 20px;
content: "✓";
color: var(--primary-color);
font-size: 20px;
} }
.file-description { .file-description {

6
public/styles/styles-main.css
View file

@ -922,6 +922,7 @@ body {
--lt-bg-color-secondary: #f2f2f2; --lt-bg-color-secondary: #f2f2f2;
--lt-border-color: #a9a9a9; --lt-border-color: #a9a9a9;
--lt-badge-color: #a5a5a5; --lt-badge-color: #a5a5a5;
--lt-lang-hr-color: #DDD;
--lt-shadow-color-secondary-rgb: 0,0,0; --lt-shadow-color-secondary-rgb: 0,0,0;
--lt-shadow-color-secondary-cover-rgb: 242,242,242; --lt-shadow-color-secondary-cover-rgb: 242,242,242;
@ -935,6 +936,7 @@ body {
--dt-bg-color-secondary: #262628; --dt-bg-color-secondary: #262628;
--dt-border-color: #919191; --dt-border-color: #919191;
--dt-badge-color: #717171; --dt-badge-color: #717171;
--dt-lang-hr-color: #404040;
--dt-shadow-color-secondary-rgb: 255,255,255; --dt-shadow-color-secondary-rgb: 255,255,255;
--dt-shadow-color-secondary-cover-rgb: 38,38,38; --dt-shadow-color-secondary-cover-rgb: 38,38,38;
@ -950,6 +952,7 @@ body {
--bg-color-secondary: var(--lt-bg-color-secondary); --bg-color-secondary: var(--lt-bg-color-secondary);
--border-color: var(--lt-border-color); --border-color: var(--lt-border-color);
--badge-color: var(--lt-badge-color); --badge-color: var(--lt-badge-color);
--lang-hr-color: var(--lt-lang-hr-color);
--shadow-color-secondary-rgb: var(--lt-shadow-color-secondary-rgb); --shadow-color-secondary-rgb: var(--lt-shadow-color-secondary-rgb);
--shadow-color-secondary-cover-rgb: var(--lt-shadow-color-secondary-cover-rgb); --shadow-color-secondary-cover-rgb: var(--lt-shadow-color-secondary-cover-rgb);
@ -965,6 +968,7 @@ body.dark-theme {
--bg-color-secondary: var(--dt-bg-color-secondary); --bg-color-secondary: var(--dt-bg-color-secondary);
--border-color: var(--dt-border-color); --border-color: var(--dt-border-color);
--badge-color: var(--dt-badge-color); --badge-color: var(--dt-badge-color);
--lang-hr-color: var(--dt-lang-hr-color);
--shadow-color-secondary-rgb: var(--dt-shadow-color-secondary-rgb); --shadow-color-secondary-rgb: var(--dt-shadow-color-secondary-rgb);
--shadow-color-secondary-cover-rgb: var(--dt-shadow-color-secondary-cover-rgb); --shadow-color-secondary-cover-rgb: var(--dt-shadow-color-secondary-cover-rgb);
@ -983,6 +987,7 @@ body.dark-theme {
--bg-color-secondary: var(--dt-bg-color-secondary); --bg-color-secondary: var(--dt-bg-color-secondary);
--border-color: var(--dt-border-color); --border-color: var(--dt-border-color);
--badge-color: var(--dt-badge-color); --badge-color: var(--dt-badge-color);
--lang-hr-color: var(--dt-lang-hr-color);
--shadow-color-secondary-rgb: var(--dt-shadow-color-secondary-rgb); --shadow-color-secondary-rgb: var(--dt-shadow-color-secondary-rgb);
--shadow-color-secondary-cover-rgb: var(--dt-shadow-color-secondary-cover-rgb); --shadow-color-secondary-cover-rgb: var(--dt-shadow-color-secondary-cover-rgb);
@ -999,6 +1004,7 @@ body.dark-theme {
--bg-color-secondary: var(--lt-bg-color-secondary); --bg-color-secondary: var(--lt-bg-color-secondary);
--border-color: var(--lt-border-color); --border-color: var(--lt-border-color);
--badge-color: var(--lt-badge-color); --badge-color: var(--lt-badge-color);
--lang-hr-color: var(--lt-lang-hr-color);
--shadow-color-secondary-rgb: var(--lt-shadow-color-secondary-rgb); --shadow-color-secondary-rgb: var(--lt-shadow-color-secondary-rgb);
--shadow-color-secondary-cover-rgb: var(--lt-shadow-color-secondary-cover-rgb); --shadow-color-secondary-cover-rgb: var(--lt-shadow-color-secondary-cover-rgb);