olcxjas-softworks/LarpixClient
2
0
Fork 1
Code Issues Pull requests 1 Projects Releases Packages Wiki Activity Actions 3

improve topbar text and buttons culling

Browse source
This commit is contained in:
olcxja 2026-08-02 21:19:00 +02:00
commit cb177691aa
4 changed files with 148 additions and 34 deletions
Download patch file Download diff file Expand all files Collapse all files

74
android/app/src/main/assets/public/main.js
View file

@ -1483,11 +1483,11 @@ async function switchRoomContent(title, content, showRoomBar, icon = "", skipMob
let pinCallBtns = showRoomBar ? `${pinBtnHtml}${callBtnHtml}` : '';
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;">
${icon ? icon + '<space></space>' : ''}<inherit>${processBlah(title)}</inherit>
`<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 style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; min-width: 0; width: auto;">${processBlah(title)}</inherit>
</button>` :
`<inherit style="display: flex; align-items: center; height: 100%;">
${icon ? icon + '<space></space>' : ''}<inherit>${processBlah(title)}</inherit>
`<inherit style="display: flex; align-items: center; height: 100%; min-width: 0; width: auto; max-width: 100%;">
${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>`;
roomsTopBarTransition.innerHTML = `${backBtnHtml}${clickableContent}<div class="flex-spacer"></div>${pinCallBtns}`;
@ -4695,3 +4695,69 @@ function scrollToPinnedMessage(e, 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 });
}
}

17
android/app/src/main/assets/public/style.css
View file

@ -216,11 +216,6 @@ sidebar {
border-right: var(--border-width) solid var(--light-border-color);
}
sidebar:not(.second) {
overflow-y: auto;
overflow-x: hidden;
}
sidebar:not(.second)::-webkit-scrollbar {
display: none;
}
@ -1038,12 +1033,8 @@ roomcontent roomtopbar .room-action-call {
display: none;
}
@media (max-width: 65rem) and (min-width: 55.001rem) {
roomcontent roomtopbar .room-action-pin { display: none !important; }
#roomdetailsbar roomtopbar .room-action-pin { display: flex !important; }
}
body.hide-topbar-pin roomcontent roomtopbar .room-action-pin { display: none !important; }
body.hide-topbar-pin #roomdetailsbar roomtopbar .room-action-pin { display: flex !important; }
@media (max-width: 58rem) and (min-width: 55.001rem) {
roomcontent roomtopbar .room-action-call { display: none !important; }
#roomdetailsbar roomtopbar .room-action-call { display: flex !important; }
}
body.hide-topbar-call roomcontent roomtopbar .room-action-call { display: none !important; }
body.hide-topbar-call #roomdetailsbar roomtopbar .room-action-call { display: flex !important; }