refactor(shell): convert settings & history panels to dropdown menus
Replace full-height slide-in panels with compact dropdowns that appear beneath header icons. Both icons now grouped in header-right with mutual exclusion and click-outside-to-close behavior. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
parent
6f066f649a
commit
63c1b7c1e7
|
|
@ -227,7 +227,7 @@ export function renderShell(opts: ShellOptions): string {
|
|||
<div class="rstack-header__left">
|
||||
<a href="/" style="display:flex;align-items:center;margin-right:4px"><img src="/favicon.png" alt="rSpace" class="rstack-header__logo"></a>
|
||||
<rstack-app-switcher current="${escapeAttr(moduleId)}"></rstack-app-switcher>
|
||||
<rstack-space-switcher current="${escapeAttr(spaceSlug)}" name="${escapeAttr(spaceName || spaceSlug)}"></rstack-space-switcher>${spaceEncrypted ? '<span class="rstack-header__encrypted" title="End-to-end encrypted space">🔒</span>' : ''}<button class="rstack-header__history-btn" id="history-btn" title="History"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg></button>
|
||||
<rstack-space-switcher current="${escapeAttr(spaceSlug)}" name="${escapeAttr(spaceName || spaceSlug)}"></rstack-space-switcher>${spaceEncrypted ? '<span class="rstack-header__encrypted" title="End-to-end encrypted space">🔒</span>' : ''}
|
||||
</div>
|
||||
<div class="rstack-header__center">
|
||||
<rstack-mi></rstack-mi>
|
||||
|
|
@ -237,12 +237,17 @@ export function renderShell(opts: ShellOptions): string {
|
|||
<rstack-offline-indicator></rstack-offline-indicator>
|
||||
<rstack-notification-bell></rstack-notification-bell>
|
||||
<rstack-share-panel></rstack-share-panel>
|
||||
<button class="rstack-header__settings-btn" id="settings-btn" title="Space Settings"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg></button>
|
||||
<div class="rstack-header__dropdown-wrap">
|
||||
<button class="rstack-header__history-btn" id="history-btn" title="History"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg></button>
|
||||
<rstack-history-panel></rstack-history-panel>
|
||||
</div>
|
||||
<div class="rstack-header__dropdown-wrap">
|
||||
<button class="rstack-header__settings-btn" id="settings-btn" title="Space Settings"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg></button>
|
||||
<rstack-space-settings space="${escapeAttr(spaceSlug)}" module-id="${escapeAttr(moduleId)}"></rstack-space-settings>
|
||||
</div>
|
||||
<rstack-identity></rstack-identity>
|
||||
</div>
|
||||
</header>
|
||||
<rstack-space-settings space="${escapeAttr(spaceSlug)}" module-id="${escapeAttr(moduleId)}"></rstack-space-settings>
|
||||
<rstack-history-panel></rstack-history-panel>
|
||||
<div class="rstack-tab-row">
|
||||
<rstack-tab-bar space="${escapeAttr(spaceSlug)}" active="" view-mode="flat">
|
||||
<button class="rapp-info-btn" id="rapp-info-btn" title="About this rApp"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg></button>
|
||||
|
|
@ -281,16 +286,16 @@ export function renderShell(opts: ShellOptions): string {
|
|||
window.__rspaceInstallPrompt = () => { e.prompt(); return e.userChoice; };
|
||||
window.dispatchEvent(new CustomEvent("rspace-install-available"));
|
||||
});
|
||||
// ── Settings panel toggle ──
|
||||
// ── Settings panel toggle (close history first) ──
|
||||
document.getElementById('settings-btn')?.addEventListener('click', () => {
|
||||
const panel = document.querySelector('rstack-space-settings');
|
||||
if (panel) panel.toggle();
|
||||
document.querySelector('rstack-history-panel')?.close();
|
||||
document.querySelector('rstack-space-settings')?.toggle();
|
||||
});
|
||||
|
||||
// ── History panel toggle ──
|
||||
// ── History panel toggle (close settings first) ──
|
||||
document.getElementById('history-btn')?.addEventListener('click', () => {
|
||||
const panel = document.querySelector('rstack-history-panel');
|
||||
if (panel) panel.toggle();
|
||||
document.querySelector('rstack-space-settings')?.close();
|
||||
document.querySelector('rstack-history-panel')?.toggle();
|
||||
});
|
||||
|
||||
// Wire history panel to offline runtime doc (module pages)
|
||||
|
|
|
|||
|
|
@ -51,17 +51,28 @@ export class RStackHistoryPanel extends HTMLElement {
|
|||
}
|
||||
}
|
||||
|
||||
private _clickOutsideHandler = (e: MouseEvent) => {
|
||||
const path = e.composedPath();
|
||||
if (!path.includes(this) && !path.includes(document.getElementById("history-btn")!)) {
|
||||
this.close();
|
||||
}
|
||||
};
|
||||
|
||||
connectedCallback() {
|
||||
if (!this.shadowRoot) this.attachShadow({ mode: "open" });
|
||||
this._render();
|
||||
}
|
||||
|
||||
disconnectedCallback() {
|
||||
document.removeEventListener("click", this._clickOutsideHandler, true);
|
||||
}
|
||||
|
||||
open() {
|
||||
this._open = true;
|
||||
this._refreshHistory();
|
||||
this._render();
|
||||
// Toggle active state on button
|
||||
document.getElementById("history-btn")?.classList.add("active");
|
||||
document.addEventListener("click", this._clickOutsideHandler, true);
|
||||
}
|
||||
|
||||
close() {
|
||||
|
|
@ -69,6 +80,7 @@ export class RStackHistoryPanel extends HTMLElement {
|
|||
this._timeMachineSnapshot = null;
|
||||
this._render();
|
||||
document.getElementById("history-btn")?.classList.remove("active");
|
||||
document.removeEventListener("click", this._clickOutsideHandler, true);
|
||||
}
|
||||
|
||||
toggle() {
|
||||
|
|
@ -277,7 +289,6 @@ export class RStackHistoryPanel extends HTMLElement {
|
|||
|
||||
this.shadowRoot.innerHTML = `
|
||||
<style>${PANEL_CSS}</style>
|
||||
<div class="overlay" id="overlay"></div>
|
||||
<div class="panel">
|
||||
<div class="panel-header">
|
||||
<h2>History</h2>
|
||||
|
|
@ -354,7 +365,6 @@ export class RStackHistoryPanel extends HTMLElement {
|
|||
const sr = this.shadowRoot!;
|
||||
|
||||
sr.getElementById("close-btn")?.addEventListener("click", () => this.close());
|
||||
sr.getElementById("overlay")?.addEventListener("click", () => this.close());
|
||||
|
||||
// Tab switching
|
||||
sr.querySelectorAll(".tab").forEach(btn => {
|
||||
|
|
@ -406,37 +416,28 @@ const PANEL_CSS = `
|
|||
display: contents;
|
||||
}
|
||||
|
||||
.overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
z-index: 200000;
|
||||
animation: fadeIn 0.2s ease;
|
||||
}
|
||||
|
||||
.panel {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: min(420px, 92vw);
|
||||
max-height: calc(100vh - 72px);
|
||||
background: var(--rs-bg-surface, #1e293b);
|
||||
border-left: 1px solid var(--rs-border, #334155);
|
||||
border: 1px solid var(--rs-border, #334155);
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 8px 32px rgba(0,0,0,0.3);
|
||||
z-index: 200001;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
animation: slideIn 0.25s ease;
|
||||
animation: dropDown 0.2s ease;
|
||||
color: var(--rs-text-primary, #e2e8f0);
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
@keyframes slideIn {
|
||||
from { transform: translateX(100%); }
|
||||
to { transform: translateX(0); }
|
||||
}
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
@keyframes dropDown {
|
||||
from { opacity: 0; transform: translateY(-8px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
.panel-header {
|
||||
|
|
|
|||
|
|
@ -77,6 +77,13 @@ export class RStackSpaceSettings extends HTMLElement {
|
|||
}
|
||||
}
|
||||
|
||||
private _clickOutsideHandler = (e: MouseEvent) => {
|
||||
const path = e.composedPath();
|
||||
if (!path.includes(this) && !path.includes(document.getElementById("settings-btn")!)) {
|
||||
this.close();
|
||||
}
|
||||
};
|
||||
|
||||
connectedCallback() {
|
||||
this._space = this.getAttribute("space") || "";
|
||||
this._moduleId = this.getAttribute("module-id") || "";
|
||||
|
|
@ -84,16 +91,22 @@ export class RStackSpaceSettings extends HTMLElement {
|
|||
this._render();
|
||||
}
|
||||
|
||||
disconnectedCallback() {
|
||||
document.removeEventListener("click", this._clickOutsideHandler, true);
|
||||
}
|
||||
|
||||
open() {
|
||||
this._open = true;
|
||||
this._loadData();
|
||||
this._loadModuleConfig();
|
||||
this._render();
|
||||
document.addEventListener("click", this._clickOutsideHandler, true);
|
||||
}
|
||||
|
||||
close() {
|
||||
this._open = false;
|
||||
this._render();
|
||||
document.removeEventListener("click", this._clickOutsideHandler, true);
|
||||
}
|
||||
|
||||
toggle() {
|
||||
|
|
@ -355,7 +368,6 @@ export class RStackSpaceSettings extends HTMLElement {
|
|||
|
||||
this.shadowRoot.innerHTML = `
|
||||
<style>${PANEL_CSS}</style>
|
||||
<div class="overlay" id="overlay"></div>
|
||||
<div class="panel">
|
||||
<div class="panel-header">
|
||||
<h2>${panelTitle}</h2>
|
||||
|
|
@ -426,7 +438,6 @@ export class RStackSpaceSettings extends HTMLElement {
|
|||
const sr = this.shadowRoot!;
|
||||
|
||||
sr.getElementById("close-btn")?.addEventListener("click", () => this.close());
|
||||
sr.getElementById("overlay")?.addEventListener("click", () => this.close());
|
||||
|
||||
// Toggle add mode
|
||||
sr.querySelectorAll(".toggle-btn").forEach(btn => {
|
||||
|
|
@ -656,37 +667,28 @@ const PANEL_CSS = `
|
|||
display: contents;
|
||||
}
|
||||
|
||||
.overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
z-index: 200000;
|
||||
animation: fadeIn 0.2s ease;
|
||||
}
|
||||
|
||||
.panel {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: min(380px, 90vw);
|
||||
max-height: calc(100vh - 72px);
|
||||
background: var(--rs-bg-surface);
|
||||
border-left: 1px solid var(--rs-border);
|
||||
border: 1px solid var(--rs-border);
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 8px 32px rgba(0,0,0,0.3);
|
||||
z-index: 200001;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
animation: slideIn 0.25s ease;
|
||||
animation: dropDown 0.2s ease;
|
||||
color: var(--rs-text-primary);
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
@keyframes slideIn {
|
||||
from { transform: translateX(100%); }
|
||||
to { transform: translateX(0); }
|
||||
}
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
@keyframes dropDown {
|
||||
from { opacity: 0; transform: translateY(-8px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
.panel-header {
|
||||
|
|
|
|||
|
|
@ -105,6 +105,14 @@ body {
|
|||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
/* ── Dropdown wrapper (positions panel relative to button) ── */
|
||||
|
||||
.rstack-header__dropdown-wrap {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* ── Header icon buttons (settings gear, history clock) ── */
|
||||
|
||||
.rstack-header__settings-btn,
|
||||
|
|
@ -441,8 +449,9 @@ body.rstack-sidebar-open #toolbar {
|
|||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
}
|
||||
/* Hide settings gear on mobile — accessible via identity dropdown */
|
||||
.rstack-header__settings-btn { display: none; }
|
||||
/* Hide settings/history on mobile — accessible via identity dropdown */
|
||||
.rstack-header__settings-btn,
|
||||
.rstack-header__history-btn { display: none; }
|
||||
/* Sidebar overlays on mobile — no push offsets */
|
||||
body.rstack-sidebar-open .rstack-tab-row { left: 0; }
|
||||
body.rstack-sidebar-open #app { margin-left: 0; }
|
||||
|
|
|
|||
Loading…
Reference in New Issue