improve topbar text and buttons culling
This commit is contained in:
parent
903aedc8ce
commit
cb177691aa
4 changed files with 148 additions and 34 deletions
|
|
@ -1483,11 +1483,11 @@ async function switchRoomContent(title, content, showRoomBar, icon = "", skipMob
|
||||||
let pinCallBtns = showRoomBar ? `${pinBtnHtml}${callBtnHtml}` : '';
|
let pinCallBtns = showRoomBar ? `${pinBtnHtml}${callBtnHtml}` : '';
|
||||||
|
|
||||||
let clickableContent = showRoomBar ?
|
let clickableContent = showRoomBar ?
|
||||||
`<button id="room-topbar-clickable" class="inherit" onclick="mobileNavDetails();" style="cursor: pointer; display: flex; align-items: center; border-radius: 0.65rem; background: transparent; outline: none; height: 100%; text-align: left;">
|
`<button id="room-topbar-clickable" class="inherit" onclick="mobileNavDetails();" style="cursor: pointer; display: flex; align-items: center; border-radius: 0.65rem; background: transparent; outline: none; height: 100%; text-align: left; min-width: 0; width: auto; max-width: 100%;">
|
||||||
${icon ? icon + '<space></space>' : ''}<inherit>${processBlah(title)}</inherit>
|
${icon ? icon + '<space></space>' : ''}<inherit style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; min-width: 0; width: auto;">${processBlah(title)}</inherit>
|
||||||
</button>` :
|
</button>` :
|
||||||
`<inherit style="display: flex; align-items: center; height: 100%;">
|
`<inherit style="display: flex; align-items: center; height: 100%; min-width: 0; width: auto; max-width: 100%;">
|
||||||
${icon ? icon + '<space></space>' : ''}<inherit>${processBlah(title)}</inherit>
|
${icon ? icon + '<space></space>' : ''}<inherit style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; min-width: 0; width: auto;">${processBlah(title)}</inherit>
|
||||||
</inherit>`;
|
</inherit>`;
|
||||||
roomsTopBarTransition.innerHTML = `${backBtnHtml}${clickableContent}<div class="flex-spacer"></div>${pinCallBtns}`;
|
roomsTopBarTransition.innerHTML = `${backBtnHtml}${clickableContent}<div class="flex-spacer"></div>${pinCallBtns}`;
|
||||||
|
|
||||||
|
|
@ -4695,3 +4695,69 @@ function scrollToPinnedMessage(e, msgId) {
|
||||||
}
|
}
|
||||||
scrollToMessage(msgId);
|
scrollToMessage(msgId);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function checkTopbarSpace() {
|
||||||
|
if (typeof roomTopBar === 'undefined' || !roomTopBar) return;
|
||||||
|
|
||||||
|
let transitionEl = roomTopBar.children.item(0);
|
||||||
|
if (!transitionEl) return;
|
||||||
|
|
||||||
|
let children = Array.from(transitionEl.children);
|
||||||
|
let usedWidth = 0;
|
||||||
|
|
||||||
|
let isPinHidden = document.body.classList.contains('hide-topbar-pin');
|
||||||
|
let isCallHidden = document.body.classList.contains('hide-topbar-call');
|
||||||
|
|
||||||
|
for (let child of children) {
|
||||||
|
if (child.classList.contains('flex-spacer')) continue;
|
||||||
|
|
||||||
|
if (child.classList.contains('room-action-pin') && isPinHidden) continue;
|
||||||
|
if (child.classList.contains('room-action-call') && isCallHidden) continue;
|
||||||
|
|
||||||
|
let style = window.getComputedStyle(child);
|
||||||
|
let margins = (parseFloat(style.marginLeft) || 0) + (parseFloat(style.marginRight) || 0);
|
||||||
|
|
||||||
|
if (child.id === 'room-topbar-clickable' || child.tagName.toLowerCase() === 'inherit') {
|
||||||
|
let titleEl = child.querySelector('inherit');
|
||||||
|
if (titleEl) {
|
||||||
|
usedWidth += (child.offsetWidth - titleEl.offsetWidth) + titleEl.scrollWidth + margins;
|
||||||
|
} else {
|
||||||
|
usedWidth += child.offsetWidth + margins;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
usedWidth += child.offsetWidth + margins;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Safety buffer for padding/rendering quirks
|
||||||
|
let diff = transitionEl.clientWidth - usedWidth - 5;
|
||||||
|
let iconWidth = 50;
|
||||||
|
|
||||||
|
if (diff < 0) {
|
||||||
|
if (!isPinHidden) {
|
||||||
|
document.body.classList.add('hide-topbar-pin');
|
||||||
|
} else if (!isCallHidden) {
|
||||||
|
document.body.classList.add('hide-topbar-call');
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
if (isCallHidden && diff > iconWidth) {
|
||||||
|
document.body.classList.remove('hide-topbar-call');
|
||||||
|
} else if (isPinHidden && !isCallHidden && diff > iconWidth) {
|
||||||
|
document.body.classList.remove('hide-topbar-pin');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (typeof roomTopBar !== 'undefined' && roomTopBar) {
|
||||||
|
let topbarResizeObserver = new ResizeObserver(() => {
|
||||||
|
checkTopbarSpace();
|
||||||
|
});
|
||||||
|
topbarResizeObserver.observe(roomTopBar);
|
||||||
|
|
||||||
|
if (roomTopBar.children.length > 0) {
|
||||||
|
let topbarMutationObserver = new MutationObserver(() => {
|
||||||
|
setTimeout(checkTopbarSpace, 10);
|
||||||
|
});
|
||||||
|
topbarMutationObserver.observe(roomTopBar.children.item(0), { childList: true, subtree: true });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -216,11 +216,6 @@ sidebar {
|
||||||
border-right: var(--border-width) solid var(--light-border-color);
|
border-right: var(--border-width) solid var(--light-border-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
sidebar:not(.second) {
|
|
||||||
overflow-y: auto;
|
|
||||||
overflow-x: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
sidebar:not(.second)::-webkit-scrollbar {
|
sidebar:not(.second)::-webkit-scrollbar {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
@ -1038,12 +1033,8 @@ roomcontent roomtopbar .room-action-call {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 65rem) and (min-width: 55.001rem) {
|
body.hide-topbar-pin roomcontent roomtopbar .room-action-pin { display: none !important; }
|
||||||
roomcontent roomtopbar .room-action-pin { display: none !important; }
|
body.hide-topbar-pin #roomdetailsbar roomtopbar .room-action-pin { display: flex !important; }
|
||||||
#roomdetailsbar roomtopbar .room-action-pin { display: flex !important; }
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 58rem) and (min-width: 55.001rem) {
|
body.hide-topbar-call roomcontent roomtopbar .room-action-call { display: none !important; }
|
||||||
roomcontent roomtopbar .room-action-call { display: none !important; }
|
body.hide-topbar-call #roomdetailsbar roomtopbar .room-action-call { display: flex !important; }
|
||||||
#roomdetailsbar roomtopbar .room-action-call { display: flex !important; }
|
|
||||||
}
|
|
||||||
|
|
|
||||||
|
|
@ -1483,11 +1483,11 @@ async function switchRoomContent(title, content, showRoomBar, icon = "", skipMob
|
||||||
let pinCallBtns = showRoomBar ? `${pinBtnHtml}${callBtnHtml}` : '';
|
let pinCallBtns = showRoomBar ? `${pinBtnHtml}${callBtnHtml}` : '';
|
||||||
|
|
||||||
let clickableContent = showRoomBar ?
|
let clickableContent = showRoomBar ?
|
||||||
`<button id="room-topbar-clickable" class="inherit" onclick="mobileNavDetails();" style="cursor: pointer; display: flex; align-items: center; border-radius: 0.65rem; background: transparent; outline: none; height: 100%; text-align: left;">
|
`<button id="room-topbar-clickable" class="inherit" onclick="mobileNavDetails();" style="cursor: pointer; display: flex; align-items: center; border-radius: 0.65rem; background: transparent; outline: none; height: 100%; text-align: left; min-width: 0; width: auto; max-width: 100%;">
|
||||||
${icon ? icon + '<space></space>' : ''}<inherit>${processBlah(title)}</inherit>
|
${icon ? icon + '<space></space>' : ''}<inherit style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; min-width: 0; width: auto;">${processBlah(title)}</inherit>
|
||||||
</button>` :
|
</button>` :
|
||||||
`<inherit style="display: flex; align-items: center; height: 100%;">
|
`<inherit style="display: flex; align-items: center; height: 100%; min-width: 0; width: auto; max-width: 100%;">
|
||||||
${icon ? icon + '<space></space>' : ''}<inherit>${processBlah(title)}</inherit>
|
${icon ? icon + '<space></space>' : ''}<inherit style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; min-width: 0; width: auto;">${processBlah(title)}</inherit>
|
||||||
</inherit>`;
|
</inherit>`;
|
||||||
roomsTopBarTransition.innerHTML = `${backBtnHtml}${clickableContent}<div class="flex-spacer"></div>${pinCallBtns}`;
|
roomsTopBarTransition.innerHTML = `${backBtnHtml}${clickableContent}<div class="flex-spacer"></div>${pinCallBtns}`;
|
||||||
|
|
||||||
|
|
@ -4695,3 +4695,69 @@ function scrollToPinnedMessage(e, msgId) {
|
||||||
}
|
}
|
||||||
scrollToMessage(msgId);
|
scrollToMessage(msgId);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function checkTopbarSpace() {
|
||||||
|
if (typeof roomTopBar === 'undefined' || !roomTopBar) return;
|
||||||
|
|
||||||
|
let transitionEl = roomTopBar.children.item(0);
|
||||||
|
if (!transitionEl) return;
|
||||||
|
|
||||||
|
let children = Array.from(transitionEl.children);
|
||||||
|
let usedWidth = 0;
|
||||||
|
|
||||||
|
let isPinHidden = document.body.classList.contains('hide-topbar-pin');
|
||||||
|
let isCallHidden = document.body.classList.contains('hide-topbar-call');
|
||||||
|
|
||||||
|
for (let child of children) {
|
||||||
|
if (child.classList.contains('flex-spacer')) continue;
|
||||||
|
|
||||||
|
if (child.classList.contains('room-action-pin') && isPinHidden) continue;
|
||||||
|
if (child.classList.contains('room-action-call') && isCallHidden) continue;
|
||||||
|
|
||||||
|
let style = window.getComputedStyle(child);
|
||||||
|
let margins = (parseFloat(style.marginLeft) || 0) + (parseFloat(style.marginRight) || 0);
|
||||||
|
|
||||||
|
if (child.id === 'room-topbar-clickable' || child.tagName.toLowerCase() === 'inherit') {
|
||||||
|
let titleEl = child.querySelector('inherit');
|
||||||
|
if (titleEl) {
|
||||||
|
usedWidth += (child.offsetWidth - titleEl.offsetWidth) + titleEl.scrollWidth + margins;
|
||||||
|
} else {
|
||||||
|
usedWidth += child.offsetWidth + margins;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
usedWidth += child.offsetWidth + margins;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Safety buffer for padding/rendering quirks
|
||||||
|
let diff = transitionEl.clientWidth - usedWidth - 5;
|
||||||
|
let iconWidth = 50;
|
||||||
|
|
||||||
|
if (diff < 0) {
|
||||||
|
if (!isPinHidden) {
|
||||||
|
document.body.classList.add('hide-topbar-pin');
|
||||||
|
} else if (!isCallHidden) {
|
||||||
|
document.body.classList.add('hide-topbar-call');
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
if (isCallHidden && diff > iconWidth) {
|
||||||
|
document.body.classList.remove('hide-topbar-call');
|
||||||
|
} else if (isPinHidden && !isCallHidden && diff > iconWidth) {
|
||||||
|
document.body.classList.remove('hide-topbar-pin');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (typeof roomTopBar !== 'undefined' && roomTopBar) {
|
||||||
|
let topbarResizeObserver = new ResizeObserver(() => {
|
||||||
|
checkTopbarSpace();
|
||||||
|
});
|
||||||
|
topbarResizeObserver.observe(roomTopBar);
|
||||||
|
|
||||||
|
if (roomTopBar.children.length > 0) {
|
||||||
|
let topbarMutationObserver = new MutationObserver(() => {
|
||||||
|
setTimeout(checkTopbarSpace, 10);
|
||||||
|
});
|
||||||
|
topbarMutationObserver.observe(roomTopBar.children.item(0), { childList: true, subtree: true });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -216,11 +216,6 @@ sidebar {
|
||||||
border-right: var(--border-width) solid var(--light-border-color);
|
border-right: var(--border-width) solid var(--light-border-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
sidebar:not(.second) {
|
|
||||||
overflow-y: auto;
|
|
||||||
overflow-x: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
sidebar:not(.second)::-webkit-scrollbar {
|
sidebar:not(.second)::-webkit-scrollbar {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
@ -1038,12 +1033,8 @@ roomcontent roomtopbar .room-action-call {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 65rem) and (min-width: 55.001rem) {
|
body.hide-topbar-pin roomcontent roomtopbar .room-action-pin { display: none !important; }
|
||||||
roomcontent roomtopbar .room-action-pin { display: none !important; }
|
body.hide-topbar-pin #roomdetailsbar roomtopbar .room-action-pin { display: flex !important; }
|
||||||
#roomdetailsbar roomtopbar .room-action-pin { display: flex !important; }
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 58rem) and (min-width: 55.001rem) {
|
body.hide-topbar-call roomcontent roomtopbar .room-action-call { display: none !important; }
|
||||||
roomcontent roomtopbar .room-action-call { display: none !important; }
|
body.hide-topbar-call #roomdetailsbar roomtopbar .room-action-call { display: flex !important; }
|
||||||
#roomdetailsbar roomtopbar .room-action-call { display: flex !important; }
|
|
||||||
}
|
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue