tim/autonomous.contact
1
0
Fork 0
forked from andyburke/autonomous.contact
Code Pull requests Activity

feature: add qr codes to the invite popup

Browse source 
feature: starting work on notifications
fix: some styling updates
This commit is contained in:
Andy Burke 2026-02-04 11:28:00 -08:00
parent 7b3494cc32
commit 9ab3950502
7 changed files with 97 additions and 32 deletions
Download patch file Download diff file Expand all files Collapse all files

40
public/sidebar/sidebar.html
View file

@ -1,3 +1,4 @@
<script src="/js/external/qr-creator.min.js"></script>
<script>
function clear_invite_popup() {
document.body.querySelectorAll(".invitepopover").forEach((element) => element.remove());
@ -19,8 +20,9 @@
</form>`;
document.body.appendChild(invite_div);
invite_div.style.left = button.getBoundingClientRect().left + "px";
invite_div.style.top = button.getBoundingClientRect().top + "px";
const document_width = document.body.getBoundingClientRect().width;
invite_div.style.left = document_width > 800 ? button.getBoundingClientRect().left + "px" : '1rem';
invite_div.style.top = document_width > 800 ? button.getBoundingClientRect().top + "px" : '1rem';
}
async function create_invite(click_event) {
@ -55,6 +57,8 @@
}
const invite_code = await invite_code_response.json();
const invite_url = `${window.location.protocol}//${window.location.host}/?invite_code=${ encodeURIComponent(invite_code.code) }`;
const qr_div_id = 'qr-div-' + Math.random().toString(36).substring(2, 8);
invite_popover.innerHTML = `
<div>
@ -66,11 +70,24 @@
</div>
<div class="share-option">
<span class="name">Link</span>
<input readonly type="text" name="code" value="${window.location.protocol + "//" + window.location.host + "/?invite_code=" + encodeURIComponent(invite_code.code)}" />
<button onclick="navigator.clipboard.writeText('${window.location.protocol + "//" + window.location.host + "/?invite_code=" + encodeURIComponent(invite_code.code)}');" />Copy</button>
<input readonly type="text" name="code" value="${ invite_url }" />
<button onclick="navigator.clipboard.writeText('${ invite_url }');" />Copy</button>
</div>
<div class="share-option">
<span class="name">Scan</span>
<div id="${ qr_div_id }" class="qr-invite-container"></div>
</div>
<button onclick="( () => document.querySelectorAll( '.invitepopover' ).forEach( (element) => element.remove() ) )()">Done</button>
</div>`;
QrCreator.render({
text: invite_url,
radius: 0.5, // 0.0 to 0.5
ecLevel: 'H', // L, M, Q, H
fill: '#999999', // foreground color
background: null, // color or null for transparent
size: 256 // in pixels
}, document.querySelector(`#${ qr_div_id }`));
}
</script>
@ -238,7 +255,7 @@
.invitepopover .share-option input {
padding: 0.75rem;
margin: 0 1rem 1rem 0;
margin: 0 0.75rem 1rem 0;
background: none;
color: var(--text);
border: 1px solid var(--border-highlight);
@ -257,6 +274,12 @@
margin-left: -0.75rem;
}
.invitepopover .qr-invite-container {
width: 256px;
height: 256px;
margin: 1rem auto;
}
@media screen and (max-width: 1200px) {
.invitepopover {
margin: 0;
@ -269,9 +292,8 @@
margin-bottom: 1rem;
}
.invitepopover .share-option button {
display: block;
margin: 0 auto 1rem;
.invitepopover .share-option input {
max-width: 14rem;
}
}
</style>
@ -598,7 +620,7 @@
</summary>
<div class="notifications-settings-container">
<button class="mockup" onclick="NOTIFICATIONS.request_permission()">
<button onclick="NOTIFICATIONS.request_permission()">
Enable Notifications
</button>
</div>