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

Make overflowing icons expandable via caret button and fix header btn opacity

Browse source
This commit is contained in:
schlagmichdoch 2023-12-09 17:34:54 +01:00
parent e7031cea90
commit b5535c7ace
5 changed files with 173 additions and 98 deletions
Download patch file Download diff file Expand all files Collapse all files

12
public/scripts/localization.js
View file

@ -2,7 +2,7 @@ class Localization {
constructor() {
Localization.defaultLocale = "en";
Localization.supportedLocales = ["ar", "de", "en", "es", "fr", "id", "it", "ja", "nb", "nl", "ro", "ru", "tr", "zh-CN"];
Localization.supportedLocalesRTL = ["ar"];
Localization.supportedLocalesRtl = ["ar"];
Localization.translations = {};
Localization.defaultTranslations = {};
@ -20,8 +20,12 @@ class Localization {
return Localization.supportedLocales.indexOf(locale) > -1;
}
static isRTLLanguage(locale) {
return Localization.supportedLocalesRTL.indexOf(locale) > -1;
static isRtlLanguage(locale) {
return Localization.supportedLocalesRtl.indexOf(locale) > -1;
}
static isCurrentLocaleRtl() {
return Localization.isRtlLanguage(Localization.locale);
}
static getSupportedOrDefault(locales) {
@ -46,7 +50,7 @@ class Localization {
const htmlRootNode = document.querySelector('html');
if (Localization.isRTLLanguage(locale)) {
if (Localization.isRtlLanguage(locale)) {
htmlRootNode.setAttribute('dir', 'rtl');
}
else {

9
public/scripts/main.js
View file

@ -1,7 +1,7 @@
class PairDrop {
constructor() {
this.$headerNotificationButton = $('notification');
this.$headerNotificationBtn = $('notification');
this.$headerEditPairedDevicesBtn = $('edit-paired-devices');
this.$footerPairedDevicesBadge = $$('.discovery-wrapper .badge-room-secret');
this.$headerInstallBtn = $('install');
@ -46,7 +46,8 @@ class PairDrop {
await this.footerUI.showLoading();
// Evaluate css shifting UI elements and fade in UI elements
await this.evaluateUI();
await this.evaluatePermissionsAndRoomSecrets();
await this.headerUI.evaluateOverflowing();
await this.headerUI.fadeIn();
await this.footerUI._evaluateFooterBadges();
await this.footerUI.fadeIn();
@ -87,10 +88,10 @@ class PairDrop {
return e.preventDefault();
}
async evaluateUI() {
async evaluatePermissionsAndRoomSecrets() {
// Check whether notification permissions have already been granted
if ('Notification' in window && Notification.permission !== 'granted') {
this.$headerNotificationButton.removeAttribute('hidden');
this.$headerNotificationBtn.removeAttribute('hidden');
}
let roomSecrets = await PersistentStorage.getAllRoomSecrets();

52
public/scripts/ui-main.js
View file

@ -114,12 +114,62 @@ class ThemeUI {
class HeaderUI {
constructor() {
this.$header = $$('header.opacity-0');
this.$header = $$('header');
this.$expandBtn = $('expand');
Events.on("resize", _ => this.evaluateOverflowing());
this.$expandBtn.addEventListener('click', _ => this.onExpandBtnClick());
}
async fadeIn() {
this.$header.classList.remove('opacity-0');
}
async evaluateOverflowing() {
// remove and reset bracket icon before evaluating
this.$expandBtn.setAttribute('hidden', true);
this.$expandBtn.classList.add('flipped');
const rtlLocale = Localization.isCurrentLocaleRtl();
let icon;
const $headerIconsShown = document.querySelectorAll('body > header:first-of-type > *:not([hidden])');
for (let i= 1; i < $headerIconsShown.length; i++) {
let isFurtherLeftThanLastIcon = $headerIconsShown[i].offsetLeft >= $headerIconsShown[i-1].offsetLeft;
let isFurtherRightThanLastIcon = $headerIconsShown[i].offsetLeft <= $headerIconsShown[i-1].offsetLeft;
if ((!rtlLocale && isFurtherLeftThanLastIcon) || (rtlLocale && isFurtherRightThanLastIcon)) {
// we have found the first icon on second row. Use previous icon.
icon = $headerIconsShown[i-1];
break;
}
}
if (icon) {
// overflowing
// add overflowing-hidden class
this.$header.classList.add('overflow-hidden');
// add expand btn 2 before icon
this.$expandBtn.removeAttribute('hidden');
icon.before(this.$expandBtn);
}
else {
// no overflowing
// add overflowing-hidden class
this.$header.classList.remove('overflow-hidden');
}
}
onExpandBtnClick() {
// toggle overflowing-hidden class and flip expand btn icon
if (this.$header.classList.contains('overflow-hidden')) {
this.$header.classList.remove('overflow-hidden');
this.$header.classList.add('overflow-expanded');
this.$expandBtn.classList.remove('flipped');
}
else {
this.$header.classList.add('overflow-hidden');
this.$header.classList.remove('overflow-expanded');
this.$expandBtn.classList.add('flipped');
}
}
}
class CenterUI {