fix: Share panel — General Access dropdown + Publish section
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:
@@ -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:[],
|
||||
|
||||
|
||||
Reference in New Issue
Block a user