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

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 {