sugary/LarpixClient
1
0
Fork 0
forked from olcxjas-softworks/LarpixClient
Code Pull requests Activity

Add example notifications and invites tab and improve ux

Browse source
This commit is contained in:
olcxja 2026-05-19 23:28:08 +02:00
commit f63f8dd77c
8 changed files with 264 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

30
webroot/screens.js
View file

@ -73,6 +73,34 @@ var joinSpaceScreen = `
</div>
`;
var invitesScreen = `
<div style="display: flex; flex-direction: column; height: 100%;">
<div style="display: flex; gap: 0.5rem; padding: 0.5rem 1rem; border-bottom: var(--border-width) solid var(--light-border-color); flex-shrink: 0;">
<button id="tab-invites-received" class="submit-button blah" onclick="switchInvitesTab('received')" style="margin:0; padding: 0 1.5rem;">title.received</button>
<button id="tab-invites-sent" class="submit-button blah tab-inactive" onclick="switchInvitesTab('sent')" style="margin:0; padding: 0 1.5rem;">title.sent</button>
</div>
<div style="flex-grow: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; opacity: 0.5;">
<svg xmlns="http://www.w3.org/2000/svg" width="4rem" viewBox="0 -960 960 960" fill="var(--text-color)"><path d="M160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h640q33 0 56.5 23.5T880-720v480q0 33-23.5 56.5T800-160H160Zm320-280L160-640v400h640v-400L480-440Zm0-80 320-200H160l320 200ZM160-640v-80 480-400Z"/></svg>
<br>
<p><blah>desc.no.invites</blah></p>
</div>
</div>
`;
var notifisScreen = `
<div style="display: flex; flex-direction: column; height: 100%;">
<div style="display: flex; gap: 0.5rem; padding: 0.5rem 1rem; border-bottom: var(--border-width) solid var(--light-border-color); flex-shrink: 0;">
<button id="tab-notifis-all" class="submit-button blah" onclick="switchNotifisTab('all')" style="margin:0; padding: 0 1.5rem;">title.all</button>
<button id="tab-notifis-unread" class="submit-button blah tab-inactive" onclick="switchNotifisTab('unread')" style="margin:0; padding: 0 1.5rem;">title.unread</button>
</div>
<div style="flex-grow: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; opacity: 0.5;">
<svg xmlns="http://www.w3.org/2000/svg" width="4rem" viewBox="0 -960 960 960" fill="var(--text-color)"><path d="M160-200v-80h80v-280q0-83 50-147.5T420-792v-28q0-25 17.5-42.5T480-880q25 0 42.5 17.5T540-820v28q80 20 130 84.5T720-560v280h80v80H160Zm320-300Zm0 420q-33 0-56.5-23.5T400-160h160q0 33-23.5 56.5T480-80ZM320-280h320v-280q0-66-47-113t-113-47q-66 0-113 47t-47 113v280Z"/></svg>
<br>
<p><blah>desc.no.notifications</blah></p>
</div>
</div>
`;
//roombars
var homeRoomBar = `
<div class="sidebar-section-header">
@ -112,7 +140,7 @@ var homeRoomBar = `
var inboxRoomBar = `
<div class="sidebar-section-header">
<button class="collapse-text-button active" id="collapse-invites" onclick="gotoInvites()">
<button class="collapse-text-button" id="collapse-invites" onclick="gotoInvites()">
<svg xmlns="http://www.w3.org/2000/svg" class="chevron" viewBox="0 -960 960 960" fill="var(--text-color)"><path d="M160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h640q33 0 56.5 23.5T880-720v480q0 33-23.5 56.5T800-160H160Zm320-280L160-640v400h640v-400L480-440Zm0-80 320-200H160l320 200ZM160-640v-80 480-400Z"/></svg>
<span><blah>title.invites</blah></span>
</button>