bruno/flowdeck
1
1
Fork 0
Code Issues 15 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

fix: Share panel — General Access dropdown + Publish section
FlowDeck CI / test (push) Failing after 4s
Details
FlowDeck CI / docker (push) Has been skipped
Details

Browse Source 
Share panel restructured to match Notion:
- General Access: dropdown with 'Only people invited' / 'Anyone with the link'
- Invite: email + permission selector
- Publish to web: toggle + URL input + Copy link button
- Copy page link at bottom

CSS: .share-access-btn and .share-access-menu for the access dropdown
This commit is contained in:
bruno
2026-07-10 11:05:45 -04:00
parent d92e26f01b
commit ed1b5d4193
2 changed files with 75 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/templates/page_editor.html
+53 -24
View File
@@ -24,33 +24,29 @@
<!-- Share dropdown -->
<div class="share-dropdown" x-show="shareOpen" @click.away="shareOpen = false" x-transition>
<!-- General Access -->
<div class="share-dd-section">
<div class="share-dd-row">
<span>🔒 Private</span>
<span class="share-dd-hint">Only you have access</span>
<div class="share-dd-label">General Access</div>
<div style="position:relative;">
<button class="share-access-btn" @click="accessMenuOpen = !accessMenuOpen">
<span x-text="generalAccess === 'invited' ? '🔒 Only people invited' : '🌐 Anyone with the link'"></span>
<span class="chevron-down">▾</span>
</button>
<div class="share-access-menu" x-show="accessMenuOpen" @click.away="accessMenuOpen = false" x-transition>
<div class="share-access-option" @click="generalAccess='invited'; accessMenuOpen=false">
<span>🔒</span> Only people invited
</div>
<div class="share-access-option" @click="generalAccess='anyone'; accessMenuOpen=false">
<span>🌐</span> Anyone with the link
</div>
</div>
</div>
</div>
<div class="share-dd-sep"></div>
<div class="share-dd-section">
<div class="share-dd-row clickable" @click="copyPageLink">
<span>🔗 Copy link</span>
</div>
</div>
<div class="share-dd-sep"></div>
<div class="share-dd-section">
<div class="share-dd-row" style="justify-content:space-between;">
<span>🌐 Publish to web</span>
<label class="toggle-switch sm">
<input type="checkbox" x-model="pagePublished" @change="togglePublish">
<span class="toggle-slider"></span>
</label>
</div>
<p class="share-dd-desc" x-show="pagePublished">
Anyone with the link can view.<br>
<a :href="publishedUrl" x-text="publishedUrl" target="_blank" style="color:var(--blue);font-size:12px;"></a>
</p>
</div>
<div class="share-dd-sep"></div>
<!-- Invite -->
<div class="share-dd-section">
<div class="share-dd-label">Invite</div>
<div class="share-dd-invite-row">
@@ -63,6 +59,38 @@
<button class="share-dd-btn" @click="invitePerson">Invite</button>
</div>
</div>
<div class="share-dd-sep"></div>
<!-- Publish -->
<div class="share-dd-section">
<div class="share-dd-row" style="justify-content:space-between;">
<div>
<span style="font-size:14px;">🌐 Publish to web</span>
<p class="share-dd-desc">Make this page visible to anyone on the internet.</p>
</div>
<label class="toggle-switch sm">
<input type="checkbox" x-model="pagePublished" @change="togglePublish">
<span class="toggle-slider"></span>
</label>
</div>
<div x-show="pagePublished" style="margin-top:8px;">
<div class="share-dd-row">
<input type="text" class="share-dd-input" :value="publishedUrl || pageUrl" readonly @click="$event.target.select()" style="flex:1;">
<button class="share-dd-btn" @click="copyPageLink">Copy link</button>
</div>
</div>
</div>
<div class="share-dd-sep"></div>
<!-- Copy link -->
<div class="share-dd-section">
<div class="share-dd-row clickable" @click="copyPageLink">
<span>🔗 Copy page link</span>
</div>
</div>
</div>
<!-- More menu dropdown -->
@@ -217,8 +245,9 @@ function editor(pid,title,fmt,raw,favorited){
const self={
pid,pageTitle:title,blocks:[],dirty:false,saving:false,lastSaved:'',st:null,
fmt:{open:false,top:0,left:0,idx:-1},
shareOpen:false,moreOpen:false,gsMoreOpen:false,
shareOpen:false,moreOpen:false,gsMoreOpen:false,accessMenuOpen:false,
favorited:!!favorited,pagePublished:false,
generalAccess:'invited',
pageUrl:window.location.href,publishedUrl:'',
inviteEmail:'',invitePermission:'editor',accessList:[],
static/css/app.css
+22
View File
@@ -2254,6 +2254,28 @@ input, select, textarea { font-family: inherit; color: inherit; }
}
.share-dd-btn:hover { opacity: 0.9; }
/* ── General Access dropdown ── */
.share-access-btn {
width: 100%; display: flex; align-items: center; justify-content: space-between;
padding: 8px 12px; background: var(--bg-primary);
border: 1px solid var(--border); border-radius: 6px;
color: var(--text-primary); font-size: 13px; cursor: pointer;
margin-top: 4px;
}
.share-access-btn:hover { background: var(--bg-hover); }
.share-access-btn .chevron-down { font-size: 10px; opacity: 0.5; }
.share-access-menu {
position: absolute; top: 100%; left: 0; right: 0; margin-top: 2px;
background: var(--bg-primary); border: 1px solid var(--border);
border-radius: 6px; box-shadow: 0 4px 12px rgba(0,0,0,0.3);
z-index: 210; padding: 4px 0;
}
.share-access-option {
padding: 8px 14px; font-size: 13px; color: var(--text-primary);
cursor: pointer; display: flex; align-items: center; gap: 8px;
}
.share-access-option:hover { background: var(--bg-hover); }
/* ── More menu dropdown ── */
.more-menu {
position: absolute; top: calc(100% + 4px); right: 0;