feat: Share/Publish dialog — Notion-style with tabs, permissions, publish
Complete redesign per Bruno's spec: - Floating dialog (440px, 18px radius) under Share button - Header: Share | Publish tabs with active underline, close button - Share tab: invite input, participants list with role dropdowns, General Access (Only invited / Anyone with link), footer with Copy link - Publish tab: preview card, Publish button (before), URL bar + settings rows (link expiry, SEO, duplicate, edit, comments) + Unpublish (after) - Toast notification for copy link (bottom centered, 2500ms) - Colors: #1F1F1F surface, #2A2A2A secondary, #2383E2 accent - Toggle: OFF=#555, ON=#2383E2, thumb=white 16px
This commit is contained in:
+205
-60
@@ -2218,78 +2218,222 @@ input, select, textarea { font-family: inherit; color: inherit; }
|
||||
.star-btn { font-size: 16px; padding: 4px 8px; }
|
||||
.star-btn .starred { color: #f5c542; }
|
||||
|
||||
/* ── Share dropdown ── */
|
||||
.share-dropdown {
|
||||
position: absolute; top: calc(100% + 4px); right: 0;
|
||||
background: var(--bg-secondary); border: 1px solid var(--border);
|
||||
border-radius: 10px; box-shadow: 0 8px 32px rgba(0,0,0,0.5);
|
||||
min-width: 360px; z-index: 200; padding: 8px 0;
|
||||
/* ═══════════ Share / Publish Dialog ═══════════ */
|
||||
.share-dialog {
|
||||
position: absolute; top: calc(100% + 8px); right: 0;
|
||||
width: 440px; max-height: 70vh; overflow-y: auto;
|
||||
background: #1F1F1F; border: 1px solid rgba(255,255,255,.08);
|
||||
border-radius: 18px; box-shadow: 0 12px 48px rgba(0,0,0,0.6);
|
||||
z-index: 200;
|
||||
}
|
||||
.share-dd-section { padding: 8px 16px; }
|
||||
.share-dd-row {
|
||||
display: flex; align-items: center; gap: 8px;
|
||||
font-size: 14px; color: var(--text-primary);
|
||||
/* Header with tabs */
|
||||
.sd-header {
|
||||
display: flex; align-items: center; height: 56px;
|
||||
padding: 0 8px; border-bottom: 1px solid rgba(255,255,255,.06);
|
||||
}
|
||||
.share-dd-row.clickable { cursor: pointer; }
|
||||
.share-dd-row.clickable:hover { opacity: 0.8; }
|
||||
.share-dd-hint { font-size: 12px; color: var(--text-dim); }
|
||||
.share-dd-desc { font-size: 12px; color: var(--text-dim); margin: 4px 0 0; line-height: 1.4; }
|
||||
.share-dd-sep { height: 1px; background: var(--border); margin: 4px 0; }
|
||||
.share-dd-label { font-size: 12px; color: var(--text-dim); margin-bottom: 6px; }
|
||||
.share-dd-invite-row { display: flex; gap: 6px; }
|
||||
.share-dd-input {
|
||||
flex: 1; padding: 7px 10px; background: var(--bg-primary);
|
||||
border: 1px solid var(--border); border-radius: 6px;
|
||||
color: var(--text-primary); font-size: 13px; outline: none;
|
||||
.sd-tab {
|
||||
height: 56px; padding: 0 14px; display: flex; align-items: center; gap: 6px;
|
||||
font-size: 14px; font-weight: 500; cursor: pointer;
|
||||
background: none; border: none;
|
||||
color: rgba(255,255,255,.5); position: relative;
|
||||
transition: color 150ms ease;
|
||||
}
|
||||
.share-dd-input::placeholder { color: var(--text-dim); }
|
||||
.share-dd-select {
|
||||
padding: 7px 10px; background: var(--bg-primary);
|
||||
border: 1px solid var(--border); border-radius: 6px;
|
||||
color: var(--text-primary); font-size: 13px; outline: none;
|
||||
.sd-tab.active { color: #fff; }
|
||||
.sd-tab.active::after {
|
||||
content: ''; position: absolute; bottom: 0; left: 14px; right: 14px;
|
||||
height: 2px; background: #fff; transition: 200ms ease;
|
||||
}
|
||||
.share-dd-btn {
|
||||
padding: 7px 14px; background: var(--blue); color: #fff;
|
||||
border: none; border-radius: 6px; cursor: pointer; font-size: 13px;
|
||||
.sd-tab:hover { color: rgba(255,255,255,.8); }
|
||||
.sd-badge {
|
||||
width: 6px; height: 6px; border-radius: 999px; background: #2383E2;
|
||||
display: inline-block;
|
||||
}
|
||||
.share-dd-btn:hover { opacity: 0.9; }
|
||||
.sd-close {
|
||||
margin-left: auto; background: none; border: none;
|
||||
color: rgba(255,255,255,.5); font-size: 16px; cursor: pointer;
|
||||
padding: 8px; border-radius: 6px;
|
||||
}
|
||||
.sd-close:hover { background: rgba(255,255,255,.06); color: #fff; }
|
||||
|
||||
/* ── 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;
|
||||
/* Body */
|
||||
.sd-body { padding: 16px 20px; }
|
||||
|
||||
/* Invite row */
|
||||
.sd-invite-row { display: flex; gap: 8px; margin-bottom: 12px; }
|
||||
.sd-input {
|
||||
flex: 1; height: 40px; padding: 0 14px;
|
||||
background: #262626; border: 1px solid rgba(255,255,255,.06);
|
||||
border-radius: 10px; color: #fff; font-size: 13px; outline: none;
|
||||
transition: border-color 150ms, box-shadow 150ms;
|
||||
}
|
||||
.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);
|
||||
.sd-input::placeholder { color: rgba(255,255,255,.45); }
|
||||
.sd-input:focus { border-color: #2383E2; box-shadow: 0 0 0 1px #2383E2; }
|
||||
.sd-btn-primary {
|
||||
height: 40px; padding: 0 16px; background: #2383E2; color: #fff;
|
||||
border: none; border-radius: 10px; font-size: 13px; font-weight: 500;
|
||||
cursor: pointer; transition: background 150ms ease; white-space: nowrap;
|
||||
}
|
||||
.sd-btn-primary:hover { background: #2C8CEB; }
|
||||
.sd-btn-full { width: 100%; height: 46px; font-size: 14px; }
|
||||
|
||||
/* Context card */
|
||||
.sd-context-card {
|
||||
background: #2B2B2B; border-radius: 12px;
|
||||
padding: 12px; font-size: 13px; color: rgba(255,255,255,.55);
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
/* Section */
|
||||
.sd-section { margin: 8px 0; }
|
||||
.sd-section-title {
|
||||
font-size: 12px; color: rgba(255,255,255,.55); margin-bottom: 6px;
|
||||
}
|
||||
.sd-sep { height: 1px; background: rgba(255,255,255,.06); margin: 12px 0; }
|
||||
|
||||
/* Access button */
|
||||
.sd-access-btn {
|
||||
width: 100%; display: flex; align-items: center; justify-content: space-between;
|
||||
padding: 10px 14px; background: rgba(255,255,255,.04);
|
||||
border: 1px solid rgba(255,255,255,.06); border-radius: 10px;
|
||||
color: #fff; font-size: 13px; cursor: pointer;
|
||||
}
|
||||
.sd-access-btn:hover { background: rgba(255,255,255,.08); }
|
||||
.sd-access-menu {
|
||||
position: absolute; top: calc(100% + 2px); left: 0; right: 0;
|
||||
background: #2A2A2A; border: 1px solid rgba(255,255,255,.08);
|
||||
border-radius: 14px; box-shadow: 0 8px 24px rgba(0,0,0,0.5);
|
||||
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;
|
||||
|
||||
/* Permissions */
|
||||
.sd-select-sm {
|
||||
padding: 4px 8px; background: rgba(255,255,255,.04);
|
||||
border: 1px solid rgba(255,255,255,.06); border-radius: 6px;
|
||||
color: #fff; font-size: 12px; outline: none;
|
||||
}
|
||||
|
||||
/* Participants */
|
||||
.sd-participants { margin-bottom: 8px; }
|
||||
.sd-participant {
|
||||
display: flex; align-items: center; justify-content: space-between;
|
||||
padding: 8px 0;
|
||||
}
|
||||
.sd-participant-info { display: flex; align-items: center; gap: 10px; }
|
||||
.sd-avatar {
|
||||
width: 32px; height: 32px; border-radius: 50%;
|
||||
background: #2383E2; color: #fff;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
font-size: 13px; font-weight: 600;
|
||||
}
|
||||
.sd-participant-name { font-size: 14px; font-weight: 500; color: #fff; }
|
||||
.sd-participant-email { font-size: 13px; color: rgba(255,255,255,.6); }
|
||||
.sd-perm-btn {
|
||||
padding: 4px 10px; background: rgba(255,255,255,.04);
|
||||
border: 1px solid rgba(255,255,255,.06); border-radius: 6px;
|
||||
color: rgba(255,255,255,.6); font-size: 12px; cursor: pointer;
|
||||
}
|
||||
.sd-perm-btn:hover { background: rgba(255,255,255,.08); }
|
||||
.sd-perm-menu {
|
||||
position: absolute; top: 100%; right: 0; width: 280px;
|
||||
background: #2A2A2A; border: 1px solid rgba(255,255,255,.08);
|
||||
border-radius: 14px; box-shadow: 0 8px 24px rgba(0,0,0,0.5);
|
||||
z-index: 211; padding: 4px 0;
|
||||
}
|
||||
.sd-perm-option {
|
||||
padding: 10px 16px; cursor: pointer;
|
||||
display: flex; flex-direction: column;
|
||||
}
|
||||
.sd-perm-option span:first-child { font-size: 14px; color: #fff; }
|
||||
.sd-perm-option:hover { background: #343434; }
|
||||
.sd-perm-option.active { background: rgba(35,131,226,.15); }
|
||||
.sd-perm-option.danger:hover { background: rgba(224,62,62,.15); }
|
||||
.sd-perm-option.danger span:first-child { color: #e03e3e; }
|
||||
.sd-perm-desc { font-size: 12px !important; color: rgba(255,255,255,.45) !important; margin-top: 2px; }
|
||||
.sd-perm-sep { height: 1px; background: rgba(255,255,255,.06); margin: 4px 0; }
|
||||
|
||||
/* Footer */
|
||||
.sd-footer {
|
||||
display: flex; align-items: center; justify-content: space-between;
|
||||
}
|
||||
.sd-footer-link { font-size: 13px; color: rgba(255,255,255,.55); text-decoration: none; }
|
||||
.sd-footer-link:hover { color: #fff; }
|
||||
.sd-footer-action {
|
||||
padding: 6px 14px; background: rgba(255,255,255,.06);
|
||||
border: 1px solid rgba(255,255,255,.06); border-radius: 10px;
|
||||
color: #fff; font-size: 13px; cursor: pointer;
|
||||
display: flex; align-items: center; gap: 6px;
|
||||
}
|
||||
.sd-footer-action:hover { background: rgba(255,255,255,.1); }
|
||||
|
||||
/* Publish tab */
|
||||
.sd-publish-hero {
|
||||
display: flex; flex-direction: column; align-items: center;
|
||||
text-align: center; padding: 16px 0;
|
||||
}
|
||||
.sd-publish-preview {
|
||||
width: 100%; height: 200px; background: #262626;
|
||||
border-radius: 12px; margin-bottom: 20px;
|
||||
display: flex; flex-direction: column; align-items: center; justify-content: center;
|
||||
}
|
||||
.sd-preview-bar {
|
||||
width: 100%; height: 32px; background: rgba(255,255,255,.04);
|
||||
border-radius: 12px 12px 0 0; display: flex; align-items: center; padding: 0 12px;
|
||||
gap: 6px;
|
||||
}
|
||||
.sd-preview-title { font-size: 16px; color: rgba(255,255,255,.6); margin-top: 20px; }
|
||||
.sd-publish-heading { font-size: 18px; font-weight: 600; color: #fff; margin: 0 0 8px; }
|
||||
.sd-publish-desc { font-size: 13px; color: rgba(255,255,255,.55); margin: 0 0 16px; line-height: 1.5; }
|
||||
.sd-publish-note { font-size: 12px; color: rgba(255,255,255,.35); margin-top: 12px; }
|
||||
|
||||
/* URL bar (after publish) */
|
||||
.sd-url-bar {
|
||||
display: flex; align-items: center; gap: 8px;
|
||||
padding: 8px; background: rgba(255,255,255,.04);
|
||||
border-radius: 10px;
|
||||
}
|
||||
.sd-url-input {
|
||||
flex: 1; height: 32px; padding: 0 10px;
|
||||
background: transparent; border: none;
|
||||
color: rgba(255,255,255,.6); font-size: 13px; outline: none;
|
||||
}
|
||||
|
||||
/* Settings rows */
|
||||
.sd-settings { margin: 4px 0; }
|
||||
.sd-setting-row {
|
||||
display: flex; align-items: center; justify-content: space-between;
|
||||
height: 40px; padding: 0 4px;
|
||||
font-size: 14px; color: #fff; cursor: pointer;
|
||||
border-radius: 6px;
|
||||
}
|
||||
.sd-setting-row:hover { background: #2F2F2F; }
|
||||
.sd-danger-btn {
|
||||
width: 100%; padding: 10px; background: none;
|
||||
border: 1px solid rgba(255,255,255,.08); border-radius: 10px;
|
||||
color: rgba(255,255,255,.55); font-size: 13px; cursor: pointer;
|
||||
}
|
||||
.sd-danger-btn:hover { background: rgba(224,62,62,.1); color: #e03e3e; }
|
||||
|
||||
/* Toast */
|
||||
.sd-toast {
|
||||
position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
|
||||
background: #111; color: #fff; padding: 10px 18px;
|
||||
border-radius: 10px; font-size: 13px; z-index: 300;
|
||||
}
|
||||
.share-access-option:hover { background: var(--bg-hover); }
|
||||
|
||||
/* ── More menu dropdown ── */
|
||||
.more-menu {
|
||||
position: absolute; top: calc(100% + 4px); right: 0;
|
||||
background: var(--bg-secondary); border: 1px solid var(--border);
|
||||
border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,0.4);
|
||||
background: #2A2A2A; border: 1px solid rgba(255,255,255,.08);
|
||||
border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,0.4);
|
||||
min-width: 200px; z-index: 100; padding: 4px 0;
|
||||
}
|
||||
.more-menu-item {
|
||||
padding: 8px 14px; font-size: 13px; color: var(--text-primary);
|
||||
padding: 8px 14px; font-size: 13px; color: #fff;
|
||||
cursor: pointer; display: flex; align-items: center; gap: 8px;
|
||||
}
|
||||
.more-menu-item:hover { background: var(--bg-hover); }
|
||||
.more-menu-item:hover { background: rgba(255,255,255,.06); }
|
||||
.more-menu-item.danger { color: #e03e3e; }
|
||||
.more-menu-sep { height: 1px; background: var(--border); margin: 4px 0; }
|
||||
.more-menu-sep { height: 1px; background: rgba(255,255,255,.06); margin: 4px 0; }
|
||||
|
||||
/* ── Toggle switch ── */
|
||||
.toggle-switch { position: relative; display: inline-block; width: 36px; height: 20px; }
|
||||
@@ -2297,17 +2441,18 @@ input, select, textarea { font-family: inherit; color: inherit; }
|
||||
.toggle-switch input { opacity: 0; width: 0; height: 0; }
|
||||
.toggle-slider {
|
||||
position: absolute; inset: 0; cursor: pointer;
|
||||
background: var(--bg-hover); border-radius: 20px;
|
||||
transition: 0.2s; border: 1px solid var(--border);
|
||||
background: #555; border-radius: 20px;
|
||||
transition: background 150ms ease;
|
||||
}
|
||||
.toggle-slider:before {
|
||||
content: ''; position: absolute; height: 14px; width: 14px;
|
||||
left: 2px; bottom: 2px; background: var(--text-dim);
|
||||
border-radius: 50%; transition: 0.2s;
|
||||
content: ''; position: absolute; height: 16px; width: 16px;
|
||||
left: 2px; bottom: 2px; background: #fff;
|
||||
border-radius: 50%; transition: transform 150ms ease;
|
||||
}
|
||||
.toggle-switch input:checked + .toggle-slider { background: var(--blue); }
|
||||
.toggle-switch input:checked + .toggle-slider:before { transform: translateX(16px); background: #fff; }
|
||||
.toggle-switch.sm .toggle-slider:before { height: 12px; width: 12px; bottom: 2px; }
|
||||
.toggle-switch input:checked + .toggle-slider { background: #2383E2; }
|
||||
.toggle-switch input:checked + .toggle-slider:before { transform: translateX(16px); }
|
||||
.toggle-switch.sm { width: 32px; height: 18px; }
|
||||
.toggle-switch.sm .toggle-slider:before { height: 14px; width: 14px; }
|
||||
.toggle-switch.sm input:checked + .toggle-slider:before { transform: translateX(14px); }
|
||||
|
||||
/* ═══════════ Empty Page Toolbar ═══════════ */
|
||||
|
||||
Reference in New Issue
Block a user