Add fetching invites
This commit is contained in:
parent
81145968a1
commit
81e222250d
10 changed files with 690 additions and 262 deletions
|
|
@ -73,30 +73,58 @@ var joinSpaceScreen = `
|
|||
</div>
|
||||
`;
|
||||
|
||||
var invitesEmptyState = `
|
||||
<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>
|
||||
`;
|
||||
var invitesLoadingState = `
|
||||
<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.fetching.invites</blah></p>
|
||||
`;
|
||||
|
||||
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 tab-inactive" 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 id="invites-container" 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 id="invites-container" class="list-container empty">
|
||||
${invitesLoadingState}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
var notifisEmptyState = `
|
||||
<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>
|
||||
`;
|
||||
|
||||
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 tab-inactive" 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 id="notifis-container" 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 id="notifis-container" class="list-container empty">
|
||||
${notifisEmptyState}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
var invitesEntry = `
|
||||
<div class="invite-entry">
|
||||
<div class="invite-info">
|
||||
<img src="{pfp}" class="invite-pfp">
|
||||
<div class="invite-details">
|
||||
<span class="invite-name">{username}</span>
|
||||
<span class="invite-desc"><blah>{desc}</blah></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="invite-actions">
|
||||
{actions}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
|
@ -171,5 +199,3 @@ var addSpaceMenu = `
|
|||
//elements
|
||||
var detailsBtn = `<button class="mobile-nav-btn right" onclick="mobileNavDetails()"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="var(--text-color)"><path d="M120-240v-80h720v80H120Zm0-200v-80h720v80H120Zm0-200v-80h720v80H120Z"/></svg></button>`;
|
||||
var backBtnHtml = `<button class="mobile-nav-btn" onclick="mobileNavBack()"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="var(--text-color)"><path d="m313-440 224 224-57 56-320-320 320-320 57 56-224 224h487v80H313Z"/></svg></button>`;
|
||||
|
||||
var invitesEntry = `???`;
|
||||
Loading…
Add table
Add a link
Reference in a new issue