a2nr
/
velxio
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
velxio/frontend/src/components/editor/EditorMenuBar.css

113 lines
2.2 KiB
CSS
Raw Normal View History

feat(editor): menus File/Edit en la cabecera y editor sin nav de marketing La queja: demasiados botones en una sola fila, y en pantallas pequenas se solapan — medido, no impresion: a 1024px Code/Both/Circuit pisaban a Compile/Run/Stop por 9-20px y Add pisaba el chat por 29px, con el idioma y el usuario cortados fuera del viewport. Tres piezas: 1. En el editor, el nav de marketing (Home/Docs/Pricing/...) sobra: ya estas dentro, y cuesta exactamente el ancho que le falta a la toolbar. AppHeader gana la variante editorMenu — mismo mecanismo que ya usa la build de escritorio (VITE_DESKTOP) — que oculta el nav y pinta un menu File/Edit junto al logo. El logo sigue llevando a inicio; idioma, autoguardado, Share y usuario se quedan. 2. File/Edit al estilo escritorio: lo que se usa cada minuto sigue siendo boton; lo que se usa unas veces por sesion va al menu. File: nuevo workspace, nuevo fichero, abrir, guardar, importar, exportar, BOM, imagen del esquema. Edit: undo/redo (con su estado real del historial), centrar vista, zoom. Las acciones viven en cierres de cuatro componentes distintos, asi que hay un registro id->handler (lib/editorCommands, mismo patron de seam que registerProExamples o registerBoardBuiltins): cada dueno registra al montar y el menu invoca por id; un item sin dueno montado se pinta deshabilitado, que ademas es la verdad. El registro sobrevive al remontaje StrictMode (el cleanup viejo no borra al sucesor) y tiene test de eso. 3. La toolbar adelgaza: fuera Undo/Redo (Ctrl+Z/Y siguen), fuera los botones inline de Import/Export y sus gemelos responsivos del More (~70px recuperados); el More queda solo con los extras pro (firmware, GitHub, share, grabacion). El CSS responsivo de los botones retirados se va con ellos. Suite en verde (2300) y build del overlay verificado desde este arbol.
2026-07-30 21:26:36 +07:00
/* EditorMenuBar — File / Edit dropdowns in the editor header.
Visual language borrowed from the toolbar's overflow menu
(tb-overflow-menu) so the two read as one system. */
.editor-menubar {
display: flex;
align-items: center;
gap: 2px;
ui(editor): one control height and one blue across the toolbar strip Every control in the unified strip is now 28px tall: tb-btn (was 30), Libraries (was 26), the C++/MicroPython select (was ~22), the board selector, Serial/Scope, canvas icon buttons, zoom and Add (all were 32). The explorer toggle moves inside the Code/Both/Circuit segmented group as its first segment, and every active-segment blue is the Libraries blue (var(--color-action-primary)) instead of the hardcoded #0e639c. The editor zone's overlap floor becomes min-width: max-content — the hardcoded 280px sat below the real content width, letting the console button paint over the board selector when the docked chat narrowed the bar. Now the zone can never shrink under its buttons; flex-wrap moves the canvas controls to a second line instead. Also closes the gap between the logo and the File menu (header gap 16->6, menubar margin-left 14->2).
2026-07-31 05:46:08 +07:00
margin-left: 2px;
feat(editor): menus File/Edit en la cabecera y editor sin nav de marketing La queja: demasiados botones en una sola fila, y en pantallas pequenas se solapan — medido, no impresion: a 1024px Code/Both/Circuit pisaban a Compile/Run/Stop por 9-20px y Add pisaba el chat por 29px, con el idioma y el usuario cortados fuera del viewport. Tres piezas: 1. En el editor, el nav de marketing (Home/Docs/Pricing/...) sobra: ya estas dentro, y cuesta exactamente el ancho que le falta a la toolbar. AppHeader gana la variante editorMenu — mismo mecanismo que ya usa la build de escritorio (VITE_DESKTOP) — que oculta el nav y pinta un menu File/Edit junto al logo. El logo sigue llevando a inicio; idioma, autoguardado, Share y usuario se quedan. 2. File/Edit al estilo escritorio: lo que se usa cada minuto sigue siendo boton; lo que se usa unas veces por sesion va al menu. File: nuevo workspace, nuevo fichero, abrir, guardar, importar, exportar, BOM, imagen del esquema. Edit: undo/redo (con su estado real del historial), centrar vista, zoom. Las acciones viven en cierres de cuatro componentes distintos, asi que hay un registro id->handler (lib/editorCommands, mismo patron de seam que registerProExamples o registerBoardBuiltins): cada dueno registra al montar y el menu invoca por id; un item sin dueno montado se pinta deshabilitado, que ademas es la verdad. El registro sobrevive al remontaje StrictMode (el cleanup viejo no borra al sucesor) y tiene test de eso. 3. La toolbar adelgaza: fuera Undo/Redo (Ctrl+Z/Y siguen), fuera los botones inline de Import/Export y sus gemelos responsivos del More (~70px recuperados); el More queda solo con los extras pro (firmware, GitHub, share, grabacion). El CSS responsivo de los botones retirados se va con ellos. Suite en verde (2300) y build del overlay verificado desde este arbol.
2026-07-30 21:26:36 +07:00
}
.emb-root {
position: relative;
}
.emb-trigger {
background: transparent;
border: none;
color: #c5cad3;
font: 400 13px system-ui, sans-serif;
padding: 4px 10px;
border-radius: 4px;
cursor: pointer;
}
.emb-trigger:hover,
.emb-trigger-open {
background: #2f3542;
color: #fff;
}
.emb-menu {
position: absolute;
top: calc(100% + 4px);
left: 0;
min-width: 230px;
background: #252526;
border: 1px solid #3c3c3c;
border-radius: 6px;
padding: 4px;
z-index: 9500; /* above the toolbar and the canvas, below modals (10000) */
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}
.emb-item {
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
width: 100%;
background: transparent;
border: none;
color: #d6dae2;
font: 400 13px system-ui, sans-serif;
padding: 6px 10px;
border-radius: 4px;
cursor: pointer;
text-align: left;
white-space: nowrap;
}
.emb-item:hover:not(:disabled) {
background: #0e639c;
color: #fff;
}
.emb-item:disabled {
opacity: 0.4;
cursor: default;
}
.emb-shortcut {
color: #8b93a1;
font-size: 11px;
}
.emb-item:hover:not(:disabled) .emb-shortcut {
color: #cfe3f5;
}
.emb-separator {
height: 1px;
background: #3c3c3c;
margin: 4px 6px;
}
feat(editor): fold the "..." menu into File — with its PRO pills The toolbar's overflow button held four leftovers (Share/Embed, Sync to GitHub, Upload firmware, Record simulation). They move into the File menu, which is where a session-frequency action belongs, and the strip loses one more button. The PRO pill travels with them — same style the overflow used (now .emb-pro) — and the two File items that were always premium (BOM, schematic image) finally show it too: users should know an item is premium BEFORE clicking, not via a surprise upgrade prompt. The pro actions keep firing the same window events the overflow items fired (share/github-sync/record prompts), so the overlay's listeners are untouched and OSS builds keep their silent no-op. Dead overflow CSS removed with the button.
2026-07-31 00:18:37 +07:00
ux(menubar): Account menu replaces the top-level Language menu The account options that only lived in the bottom-left user button (subscription, licenses, simulation history, replays, privacy) are now reachable from the header too: a new Account menu hosts the pro items via the SAME data-velxio-slot="user-menu" the corner dropdown uses — one overlay renderer, two hosts, empty in OSS builds. Language moves from its own top-level trigger into a section of that menu, so the menubar stays at five triggers and frees header room for when the AI chat docks.
2026-08-08 09:02:32 +07:00
/* Small uppercase section header inside a menu (the Account menu groups
the pro items and the Language list under one trigger). */
.emb-section-label {
padding: 6px 12px 2px;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.8px;
text-transform: uppercase;
color: #8a8f98;
user-select: none;
}
feat(editor): fold the "..." menu into File — with its PRO pills The toolbar's overflow button held four leftovers (Share/Embed, Sync to GitHub, Upload firmware, Record simulation). They move into the File menu, which is where a session-frequency action belongs, and the strip loses one more button. The PRO pill travels with them — same style the overflow used (now .emb-pro) — and the two File items that were always premium (BOM, schematic image) finally show it too: users should know an item is premium BEFORE clicking, not via a surprise upgrade prompt. The pro actions keep firing the same window events the overflow items fired (share/github-sync/record prompts), so the overlay's listeners are untouched and OSS builds keep their silent no-op. Dead overflow CSS removed with the button.
2026-07-31 00:18:37 +07:00
/* Same PRO pill the old toolbar overflow used (tb-overflow-pro) — users
should know an item is premium BEFORE clicking, not via a surprise
upgrade prompt. */
.emb-pro {
font-size: 9.5px;
font-weight: 700;
letter-spacing: 0.5px;
padding: 2px 6px;
border-radius: 3px;
background: linear-gradient(135deg, #ffd54f 0%, #ffb300 100%);
color: #1a1a1a;
flex-shrink: 0;
margin-left: 8px;
}