From 4c9251e9768ecd8a8058338b35b66142df0b8d0c Mon Sep 17 00:00:00 2001 From: gravel Date: Tue, 20 Aug 2024 15:50:47 +0000 Subject: [PATCH] feat: ui improvements --- output/index.css | 103 ++++++++++++++++++++++++-------- output/js/util.js | 8 ++- output/main.js | 15 ++++- sites/+components/qr-modals.php | 95 +++++++++++++++++------------ sites/+templates/index.php | 1 + 5 files changed, 152 insertions(+), 70 deletions(-) diff --git a/output/index.css b/output/index.css index b1dcb44..f4ddf40 100644 --- a/output/index.css +++ b/output/index.css @@ -118,8 +118,21 @@ html.js .noscript, .hidden { .themed-button { color: var(--primary-color); background-color: var(--secondary-color); - border-radius: 10%; - padding: var(--cell-padding-small); + border-radius: .5em; + padding: var(--cell-padding); + height: min-content; + font-size: 0.85rem; +} + +.themed-button-primary { + color: var(--secondary-color); + background-color: var(--primary-color); + font-weight: bold; +} + +.themed-button-secondary { + color: var(--primary-color); + background-color: var(--secondary-color-heading); } .badge { @@ -457,7 +470,6 @@ html.js .td_description::after { .td_users { text-align: center; - /* font-weight: bold; */ } .td_preview { @@ -589,12 +601,33 @@ footer, aside { #details-modal { padding: 0; width: 80vw; - --modal-height: calc(80vh - 8em); + --modal-height: calc(90vh - 8em); height: var(var(--modal-height)); color: var(--primary-color); background-color: var(--secondary-color); --room-icon-size: 4rem; --feather-icon-size: 2rem; + border-radius: .5em; +} + +/* disable default backdrop */ +#details-modal::backdrop { + background-color: transparent +} + +#modal-backdrop { + display: none; + position: fixed; + top: 0px; + left: 0px; + width: 100%; + height: 100%; + z-index: 50; + background: rgba(0, 0, 0, 0.5); +} + +#details-modal[open] ~ #modal-backdrop { + display: block; } #details-modal-contents { @@ -606,7 +639,7 @@ footer, aside { #details-modal-flow { display: flex; flex-direction: column; - padding: 3em; + padding: 2.5em; height: var(--modal-height); overflow: auto; box-sizing: border-box; @@ -636,12 +669,13 @@ footer, aside { #details-modal-panes { display: flex; flex-direction: row; + flex-grow: 500; } #details-modal-start { display: flex; flex-direction: column; - margin-right: 1em; + margin-right: 3em; } #details-modal-end { @@ -656,28 +690,32 @@ footer, aside { } #details-modal-title { + vertical-align: middle; margin-bottom: calc( var(--room-icon-size) * 0.1 ); } +#details-modal-community-name { + display: inline; + line-height: var(--room-icon-size); + vertical-align: top; + padding: 0; +} + #details-modal-community-icon-wrapper { position: relative; box-sizing: border-box; --strip: calc( var(--room-icon-size) / 25 ); - --padding-size: calc( var(--room-icon-size) - 1 * var(--strip) ); - top: calc(var(--room-icon-size) * 0.5 - 0.6rem); width: var(--room-icon-size); height: var(--room-icon-size); margin-right: calc( var(--room-icon-size) * 0.3 ); - /* box-shadow: var(--primary-color) 0 0 calc( var(--room-icon-size) / 10 ); */ border: var(--primary-color) var(--strip) solid; - padding: var(--strip); border-radius: 100%; + flex-shrink: 0; } -#details-modal-copy-room-details-link { - position: relative; +#details-modal-share-icon { margin-left: 0.5em; - top: calc( var(--feather-icon-size) * 0.5 - 1ex ); + height: calc( var(--room-icon-size) ); } #details-modal-community-icon-wrapper:is([data-has-icon="false"], [data-icon-safety="-1"]) { @@ -689,12 +727,10 @@ footer, aside { display: none; } -/* #details-modal-community-icon-wrapper:not(:hover) > #details-modal-community-icon[data-icon-safety="-1"] { opacity: 0.5; filter: blur(3px); } -*/ #details-modal-community-icon { position: absolute; @@ -706,17 +742,19 @@ footer, aside { transition: filter 0.15s, opacity 0.15s; } -/*#details-modal-start*/ #details-modal-description-inner:empty::after { - content: "No description"; - font-style: italic; -} - /*#details-modal-start*/ #details-modal-language-flag:empty::after { content: "Unknown"; font-style: italic; } /*#details-modal-end*/ #details-modal-qr-code { + /* alt text */ + display: flex; + align-items: center; + text-align: center; + justify-content: center; + color: var(--primary-color-50); + aspect-ratio: 1; width: 15em; height: 15em; @@ -734,6 +772,9 @@ footer, aside { flex-wrap: wrap; gap: .5em; row-gap: .5em; + flex-grow: 1000; + align-content: flex-end; + margin-top: 1em; } #details-modal-qr-code-label-name { @@ -769,14 +810,16 @@ aside > details[open] > summary:after{ color: #fff; /* White text color */ text-align: center; /* Centered text */ border-radius: 2px; /* Rounded corners */ - padding: 16px; + padding: 16px 24px; position: fixed; /* Move along as viewport scrolls */ - z-index: 1; /* Add a z-index if needed */ + z-index: 100; /* Add a z-index if needed */ left: 50%; /* Offset the snackbar by half the viewport width */ transform: translateX(-50%); /* Push the snackbar back by half its width */ bottom: 0; opacity: 0; transition: bottom 0.5s, opacity 0.5s; + box-shadow: black 0.5em 0.5em 0.5em; + border-radius: 1em; } /* Show the snackbar when clicking on a button (class added with JavaScript) */ @@ -835,7 +878,7 @@ aside > details[open] > summary:after{ } } -@media (max-height: 1100px) { +@media (max-height: 1200px) { #details-modal-language, #details-modal-users, #details-modal-created { display: inline-block; text-align: center; @@ -851,7 +894,8 @@ aside > details[open] > summary:after{ } } -@media (max-width: 1000px) { +/* mobile breakpoint */ +@media (max-width: 1100px) { #details-modal-pane-selection { display: inline-flex; flex-direction: row; @@ -864,14 +908,17 @@ aside > details[open] > summary:after{ display: none; } - #details-modal-panes[data-pane="0"] ~ #details-modal-actions .details-modal-pane-button[data-pane="0"], - #details-modal-panes[data-pane="1"] ~ #details-modal-actions .details-modal-pane-button[data-pane="1"] { + #details-modal-panes[data-pane="0"] ~ #details-modal-pane-selection .details-modal-pane-button[data-pane="0"], + #details-modal-panes[data-pane="1"] ~ #details-modal-pane-selection .details-modal-pane-button[data-pane="1"] { display:none } #details-modal-panes { flex-direction: column; align-items: stretch; + } + + .details-modal-pane { flex-grow: 500; } @@ -887,6 +934,10 @@ aside > details[open] > summary:after{ #details-modal-qr-code-label-name { display: inline; } + + #details-modal-navigation-hint { + display: none; + } } @media (max-width: 500px) { diff --git a/output/js/util.js b/output/js/util.js index edf52be..0067816 100644 --- a/output/js/util.js +++ b/output/js/util.js @@ -189,11 +189,13 @@ export const dom = { tags: () => document.querySelectorAll("#tbl_communities .tag"), } -export const JOIN_URL_PASTE = "Copied URL to clipboard. Paste into Session app to join"; +export const JOIN_URL_PASTE = "Copied URL to clipboard. Paste into Session app to join."; -export const STAFF_ID_PASTE = "Copied staff ping to clipboard. Use it in the selected Community to alert a random moderator."; +export const STAFF_ID_PASTE = "Copied staff ping to clipboard."; -export const IDENTIFIER_PASTE = "Copied internal room identifier. Use it to identify a room, such as when contributing language labels." +export const IDENTIFIER_PASTE = "Copied internal room identifier." + +export const PUBKEY_PASTE = "Copied server public key to clipboard."; export const DETAILS_LINK_PASTE = "Copied link to Community details."; diff --git a/output/main.js b/output/main.js index dc846db..93b8d48 100644 --- a/output/main.js +++ b/output/main.js @@ -17,7 +17,8 @@ import { dom, COMPARISON, ATTRIBUTES, columnAscendingByDefault, columnIsSortable, COLUMN_TRANSFORMATION, - element, JOIN_URL_PASTE, communityQRCodeURL, STAFF_ID_PASTE, IDENTIFIER_PASTE, DETAILS_LINK_PASTE, CLASSES, flagToLanguageAscii, RoomInfo, unreachable, workOnMainThread, onInteractive + element, JOIN_URL_PASTE, communityQRCodeURL, STAFF_ID_PASTE, IDENTIFIER_PASTE, DETAILS_LINK_PASTE, CLASSES, flagToLanguageAscii, RoomInfo, unreachable, onInteractive, + PUBKEY_PASTE } from './js/util.js'; // Hidden communities for transparency. @@ -270,6 +271,8 @@ function displayQRModal(communityID, pane = 0) { const qrCode = dom.details_modal_qr_code(); if (qrCode instanceof HTMLImageElement) { + // Prevent old content flashing + qrCode.src = ""; qrCode.src = communityQRCodeURL(communityID); } else console.error(`Could not find QR code `); @@ -382,11 +385,19 @@ function addQRModalHandlers() { } ) - document.querySelector('#details-modal-copy-room-details-link')?.addEventListener( + document.querySelectorAll('#details-modal-share-icon, #details-modal-share-button').forEach(btn => btn?.addEventListener( 'click', function() { shareOrCopyToClipboard(location.href, DETAILS_LINK_PASTE); } + )); + + document.querySelector('#details-modal-copy-pubkey')?.addEventListener( + 'click', + function () { + const identifier = this.getAttribute(ATTRIBUTES.ROW.PUBLIC_KEY); + copyToClipboard(identifier, PUBKEY_PASTE); + } ) for (const anchor of dom.qr_code_buttons()) { diff --git a/sites/+components/qr-modals.php b/sites/+components/qr-modals.php index aacbe22..ab81c37 100644 --- a/sites/+components/qr-modals.php +++ b/sites/+components/qr-modals.php @@ -32,11 +32,12 @@ id="details-modal-community-name" class="h2-like" data-hydrate-with="name;preview_link:href" - title="Open preview in new tab" + title="Preview Community in browser" href="#" + target="_blank" > Share

+ +
+ + + + + +
@@ -83,7 +127,7 @@ title="Community join link encoded as QR code" width="512" height="512" - alt="Community join link encoded as QR code" + alt="QR code not available" >
Scan QR code in Session to join @@ -93,44 +137,17 @@
-
+
diff --git a/sites/+templates/index.php b/sites/+templates/index.php index 5bf9a7e..4d60177 100644 --- a/sites/+templates/index.php +++ b/sites/+templates/index.php @@ -143,6 +143,7 @@
+