feat(editor): language + account move to a bottom-left corner box
IDE-style: a small fixed box in the explorer's quiet bottom corner holds the language switcher and the account button (pro keeps injecting it into the same data-velxio-slot, just relocated). The autosave dot rides next to the menus, and the header's Share button is gone — File > Share/Embed already covers it. The point is width: emptying the header's right side gives the toolbar the last ~150px it needed, so the single-row layout now holds down to ~1400px WITH the chat docked — which is exactly the reported 1440x900 case. Tight-fallback thresholds drop accordingly (1400/1060/1040). Desktop-editor variant only; marketing pages and mobile keep their header untouched.
This commit is contained in:
parent
fff5823543
commit
3100d453c2
|
|
@ -542,7 +542,7 @@ body {
|
||||||
reads as intentional instead of broken. Three blocks because a media
|
reads as intentional instead of broken. Three blocks because a media
|
||||||
query cannot test a body class in its condition. */
|
query cannot test a body class in its condition. */
|
||||||
|
|
||||||
@media (max-width: 1199.9px) {
|
@media (max-width: 1039.9px) {
|
||||||
.app-header--with-toolbar .header-content {
|
.app-header--with-toolbar .header-content {
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
}
|
}
|
||||||
|
|
@ -558,7 +558,7 @@ body {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 1239.9px) {
|
@media (max-width: 1059.9px) {
|
||||||
body.velxio-agent-collapsed .app-header--with-toolbar .header-content {
|
body.velxio-agent-collapsed .app-header--with-toolbar .header-content {
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
}
|
}
|
||||||
|
|
@ -574,7 +574,7 @@ body {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 1579.9px) {
|
@media (max-width: 1399.9px) {
|
||||||
body.velxio-agent-open .app-header--with-toolbar .header-content {
|
body.velxio-agent-open .app-header--with-toolbar .header-content {
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
}
|
}
|
||||||
|
|
@ -589,3 +589,29 @@ body {
|
||||||
min-height: 38px;
|
min-height: 38px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ── Editor corner box (bottom-left) ─────────────────────────────────────
|
||||||
|
Language switcher + account button, IDE style. Moving them out of the
|
||||||
|
header is what buys the toolbar the last ~150px it needed to keep the
|
||||||
|
single-row layout on 1440px screens with the chat docked. */
|
||||||
|
.editor-corner-box {
|
||||||
|
position: fixed;
|
||||||
|
left: 8px;
|
||||||
|
bottom: 8px;
|
||||||
|
z-index: 7000; /* above the canvas, below the chat (8000) and modals */
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 6px;
|
||||||
|
padding: 4px 8px;
|
||||||
|
background: rgba(23, 26, 33, 0.95);
|
||||||
|
border: 1px solid #2f3542;
|
||||||
|
border-radius: 8px;
|
||||||
|
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* With the chat rising to the very top (agent CSS sets the header's
|
||||||
|
padding-right), the strip must NOT also pad itself — that would double
|
||||||
|
the reservation and squeeze the toolbar by another panel-width. */
|
||||||
|
.app-header--with-toolbar .header-editor-toolbar .unified-toolbar {
|
||||||
|
padding-right: 6px !important;
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -222,9 +222,21 @@ export const AppHeader: React.FC<AppHeaderProps> = ({ autoSave, editorMenu, edit
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Editor toolbar strip — fills the middle the nav vacated. */}
|
{/* Editor toolbar strip — fills the middle the nav vacated. */}
|
||||||
{editorToolbar && <div className="header-editor-toolbar">{editorToolbar}</div>}
|
{editorToolbar && (
|
||||||
|
<>
|
||||||
|
{autoSave && currentProject && <AutoSaveIndicator state={autoSave} />}
|
||||||
|
<div className="header-editor-toolbar">{editorToolbar}</div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
|
||||||
{/* Right: language + share + auth + mobile hamburger */}
|
{/* Right: language + share + auth + mobile hamburger. In the
|
||||||
|
desktop-editor variant this block does not render at all: the
|
||||||
|
language switcher and the account button move to the corner box
|
||||||
|
below (bottom-left), Share lives in File > Share/Embed, and the
|
||||||
|
autosave dot rides next to the menus — every pixel of the row
|
||||||
|
goes to the toolbar, which is what lets 1440px-with-chat keep
|
||||||
|
the single-row layout. */}
|
||||||
|
{!editorToolbar && (
|
||||||
<div className="header-right">
|
<div className="header-right">
|
||||||
<LanguageSwitcher />
|
<LanguageSwitcher />
|
||||||
|
|
||||||
|
|
@ -293,8 +305,19 @@ export const AppHeader: React.FC<AppHeaderProps> = ({ autoSave, editorMenu, edit
|
||||||
</button>
|
</button>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{/* Editor corner box — bottom-left, IDE style: the account button
|
||||||
|
(pro injects it into the auth slot) and the language switcher.
|
||||||
|
Fixed, so it floats over the explorer's quiet bottom corner. */}
|
||||||
|
{editorToolbar && (
|
||||||
|
<div className="editor-corner-box">
|
||||||
|
<LanguageSwitcher />
|
||||||
|
<div data-velxio-slot="header-auth" style={{ display: 'contents' }} />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
{showShareModal && <ShareModal onClose={() => setShowShareModal(false)} />}
|
{showShareModal && <ShareModal onClose={() => setShowShareModal(false)} />}
|
||||||
</header>
|
</header>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue