diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/features/messages.js | 18 | ||||
| -rw-r--r-- | src/i18n.js | 1 | ||||
| -rw-r--r-- | src/style.css | 10 |
3 files changed, 23 insertions, 6 deletions
diff --git a/src/features/messages.js b/src/features/messages.js index 0c0acf4..a52efec 100644 --- a/src/features/messages.js +++ b/src/features/messages.js @@ -8116,14 +8116,20 @@ export function messagesFeature(ctx) { class: 'btn-sm' + (feedRelays(def) ? ' on' : ''), title: t('feedMenu'), 'aria-label': t('feedMenu'), style: 'margin-left:auto;flex-shrink:0', onClick: () => { ui.feedMenu = true; render(); }, }, '\u22ef'), - visitor ? null : h('button', { - // the pencil alone wasn't read as "write a post": it says so - class: 'btn-sm feed-new-post', style: 'flex-shrink:0;display:inline-flex;align-items:center;gap:6px;white-space:nowrap', title: t('profNewPost'), 'aria-label': t('profNewPost'), - onClick: () => { ui.profCompose = ui.profCompose == null ? (draftFor(POST_DRAFT) || '') : null; render(); }, - }, h('span', { style: 'display:flex', html: '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display:block"><path d="M12 20h9"/><path d="M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z"/></svg>' }), - h('span', {}, t('profNewPost')))), + ), ui.feedRelayEdit && ui.feedRelayEdit.id === def.id ? relayPanel(def) : null, visitor ? null : feedChips(), + // floating bottom right, wherever the reader is in the feed: the + // composer opens at the top and takes the focus + visitor || ui.profCompose != null ? null : h('button', { + class: 'btn-primary feed-post-fab', 'data-key': 'feed-post-fab', type: 'button', title: t('profNewPost'), 'aria-label': t('profNewPost'), + onClick: () => { + ui.profCompose = draftFor(POST_DRAFT) || ''; + render(); + try { window.scrollTo({ top: 0, behavior: 'smooth' }); } catch { window.scrollTo(0, 0); } + setTimeout(() => document.querySelector('.post-input')?.focus(), 60); + }, + }, h('span', { style: 'display:flex', html: '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display:block"><path d="M12 20h9"/><path d="M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z"/></svg>' }), h('span', {}, t('feedPostFab'))), visitor ? null : postComposer(), def.of && !ofLoaded(def) ? h('div', { class: 'row gap6', style: 'justify-content:center;align-items:center;padding:12px 0' }, diff --git a/src/i18n.js b/src/i18n.js index 9932ced..02584b2 100644 --- a/src/i18n.js +++ b/src/i18n.js @@ -245,6 +245,7 @@ const STR = { feedDelete: 'Delete feed', feedSaveAdhoc: 'Save feed', feedSaved: 'Feed saved', + feedPostFab: 'Post', mediaShrinking: 'Shrinking video for streaming', mediaUploading: 'Uploading', feedNoQuery: 'Add people or topics to this feed.', diff --git a/src/style.css b/src/style.css index 60d850c..86d5d45 100644 --- a/src/style.css +++ b/src/style.css @@ -827,6 +827,16 @@ html.no-scroll { overflow: hidden; scrollbar-gutter: auto; } content: ''; position: absolute; top: -2px; right: -4px; width: 7px; height: 7px; border-radius: 50%; background: var(--green); border: 1px solid var(--paper); } +.feed-post-fab { + /* the "write a post" button floats over the feed's bottom right, above + the nav, inside the page column */ + position: fixed; z-index: 25; + bottom: calc(env(safe-area-inset-bottom, 0px) + 82px); + right: max(16px, calc((100% - 560px) / 2 + 16px)); + display: inline-flex; align-items: center; gap: 7px; width: auto; + padding: 12px 18px; border-radius: 999px; font-weight: 600; + box-shadow: 0 4px 14px rgba(0, 0, 0, .22); +} .feed-page .feed-new-pill { bottom: calc(env(safe-area-inset-bottom, 0px) + 82px); } |