c56d4cb97d
La barra del shell ahora se ve como las pestanas de un navegador de verdad: - La barra es una FRANJA mas oscura (claro #dee1e6 / oscuro #202124) y la pestana ACTIVA es una tarjeta del color del contenido con esquinas superiores redondeadas y las curvas concavas de Chrome en la base (dos piezas radial-gradient de 8px que "derraman" el fondo hacia los lados). El contenedor de pestanas se extiende 1px sobre el borde inferior para que la activa lo tape y quede FUNDIDA con la pagina; en oscuro su fondo es #18181b (el mismo de la app) para que no haya costura. - Favicon por pestana: mini logo Labstream (SVG inline data-URI, sin red). - Pestanas inactivas: pildora redondeada al hover y separador fino vertical entre ellas, oculto junto a la activa, al hover y en la primera (CSS puro con .active + .tab, sin :has). - El boton de cerrar es un circulito y los botones de la barra pasan a hover circular, como en Chrome. Sin cambios en Rust: TAB_BAR_H sigue en 40 y los eventos ls-* intactos. Verificado con arnes local (stub de __TAURI__ + 4 pestanas de prueba) en claro y oscuro: curvas, fusion con el contenido, separadores y favicon OK. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
333 líneas
12 KiB
HTML
333 líneas
12 KiB
HTML
<!doctype html>
|
||
<html lang="es">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<title>Labstream OS</title>
|
||
<!--
|
||
Barra de pestañas del shell de escritorio (webview "chrome", local).
|
||
Habla con Rust por eventos (__TAURI__.event):
|
||
recibe ls-tabs {tabs:[{label,title,active}], zoom}
|
||
emite ls-ready, ls-new-tab, ls-activate, ls-close-tab, ls-reload, ls-zoom, ls-cycle, ls-activate-n
|
||
-->
|
||
<style>
|
||
/* Paleta estilo Chrome: la barra es una FRANJA más oscura y la pestaña activa es una
|
||
tarjeta del color del contenido que se funde con él (sin línea debajo). */
|
||
:root {
|
||
--bg: #dee1e6; /* franja de pestañas (Chrome claro) */
|
||
--fg: #45474a;
|
||
--muted: #5f6368;
|
||
--tab-active-bg: #ffffff;
|
||
--tab-active-fg: #202124;
|
||
--accent: #6366f1; /* indigo-500, color de Labstream */
|
||
--border: #c9ccd1; /* línea bajo la barra (la tapa la pestaña activa) */
|
||
--hover: rgba(255, 255, 255, 0.55); /* píldora de hover en pestañas inactivas */
|
||
--btn-hover: rgba(0, 0, 0, 0.08);
|
||
--sep: rgba(0, 0, 0, 0.22); /* separador fino entre pestañas inactivas */
|
||
}
|
||
@media (prefers-color-scheme: dark) {
|
||
:root {
|
||
--bg: #202124; /* franja (Chrome oscuro) */
|
||
--fg: #bdc1c6;
|
||
--muted: #80868b;
|
||
--tab-active-bg: #18181b; /* mismo fondo que la app → pestaña fundida con el contenido */
|
||
--tab-active-fg: #e8eaed;
|
||
--border: #101013;
|
||
--hover: rgba(255, 255, 255, 0.08);
|
||
--btn-hover: rgba(255, 255, 255, 0.1);
|
||
--sep: rgba(255, 255, 255, 0.25);
|
||
}
|
||
}
|
||
* { box-sizing: border-box; }
|
||
html, body {
|
||
margin: 0;
|
||
height: 100%;
|
||
overflow: hidden;
|
||
background: var(--bg);
|
||
color: var(--fg);
|
||
font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
|
||
font-size: 12.5px;
|
||
user-select: none;
|
||
-webkit-user-select: none;
|
||
cursor: default;
|
||
}
|
||
#bar {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 2px;
|
||
height: 40px;
|
||
padding: 0 6px 0 8px;
|
||
border-bottom: 1px solid var(--border);
|
||
}
|
||
#tabs {
|
||
display: flex;
|
||
align-items: flex-end;
|
||
flex: 1 1 auto;
|
||
min-width: 0;
|
||
/* Se extiende 1px sobre el borde inferior de la barra para que la pestaña ACTIVA
|
||
lo tape con su propio fondo y quede FUNDIDA con el contenido (look Chrome). */
|
||
align-self: stretch;
|
||
margin-bottom: -1px;
|
||
padding: 0 4px;
|
||
overflow-x: auto;
|
||
scrollbar-width: none;
|
||
}
|
||
#tabs::-webkit-scrollbar { display: none; }
|
||
.tab {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 7px;
|
||
flex: 0 1 220px;
|
||
min-width: 100px;
|
||
height: 30px;
|
||
margin-bottom: 5px;
|
||
padding: 0 6px 0 10px;
|
||
border-radius: 9px; /* inactiva: píldora redondeada (hover) */
|
||
position: relative;
|
||
overflow: visible; /* deja asomar las curvas de la base de la activa */
|
||
}
|
||
.tab:not(.active):hover { background: var(--hover); }
|
||
/* Separador fino a la IZQUIERDA de cada inactiva; se oculta pegado a la activa,
|
||
al hover y en la primera (igual que Chrome). */
|
||
.tab:not(.active)::before {
|
||
content: "";
|
||
position: absolute;
|
||
left: -1px;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
width: 1px;
|
||
height: 16px;
|
||
background: var(--sep);
|
||
}
|
||
.tab:first-child::before,
|
||
.tab:hover::before,
|
||
.tab.active + .tab::before,
|
||
.tab:hover + .tab::before { display: none; }
|
||
.tab.active {
|
||
background: var(--tab-active-bg);
|
||
color: var(--tab-active-fg);
|
||
height: 35px;
|
||
margin-bottom: 0; /* su base cae 1px SOBRE el borde de la barra y lo tapa */
|
||
border-radius: 10px 10px 0 0;
|
||
z-index: 1;
|
||
}
|
||
/* Curvas cóncavas de Chrome en la base de la pestaña activa: dos piezas de 8px con
|
||
un cuarto de círculo transparente que "derrama" el fondo hacia los lados. */
|
||
.tab.active::before,
|
||
.tab.active::after {
|
||
content: "";
|
||
position: absolute;
|
||
bottom: 0;
|
||
width: 8px;
|
||
height: 8px;
|
||
}
|
||
.tab.active::before {
|
||
left: -8px;
|
||
background: radial-gradient(circle at 0 0, transparent 8px, var(--tab-active-bg) 8.5px);
|
||
}
|
||
.tab.active::after {
|
||
right: -8px;
|
||
background: radial-gradient(circle at 8px 0, transparent 8px, var(--tab-active-bg) 8.5px);
|
||
}
|
||
.tab .favicon {
|
||
flex: 0 0 auto;
|
||
width: 14px;
|
||
height: 14px;
|
||
border-radius: 3px;
|
||
}
|
||
.tab .titulo {
|
||
flex: 1 1 auto;
|
||
min-width: 0;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
.tab .cerrar {
|
||
flex: 0 0 auto;
|
||
width: 18px;
|
||
height: 18px;
|
||
display: grid;
|
||
place-items: center;
|
||
border-radius: 50%; /* circulito, como el × de Chrome */
|
||
color: var(--muted);
|
||
font-size: 13px;
|
||
line-height: 1;
|
||
visibility: hidden;
|
||
}
|
||
.tab:hover .cerrar, .tab.active .cerrar { visibility: visible; }
|
||
.tab .cerrar:hover { background: var(--btn-hover); color: var(--tab-active-fg); }
|
||
button {
|
||
appearance: none;
|
||
border: 0;
|
||
background: transparent;
|
||
color: var(--fg);
|
||
font: inherit;
|
||
border-radius: 50%;
|
||
cursor: default;
|
||
display: grid;
|
||
place-items: center;
|
||
}
|
||
button:hover { background: var(--btn-hover); }
|
||
.icono {
|
||
flex: 0 0 auto;
|
||
width: 30px;
|
||
margin: 2px 0 7px;
|
||
font-size: 15px;
|
||
}
|
||
#zoom {
|
||
flex: 0 0 auto;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 1px;
|
||
margin: 2px 0 7px;
|
||
}
|
||
#zoom button { height: 100%; }
|
||
#z-menos, #z-mas { width: 26px; font-size: 14px; }
|
||
#z-pct {
|
||
min-width: 44px;
|
||
padding: 0 4px;
|
||
font-variant-numeric: tabular-nums;
|
||
color: var(--muted);
|
||
font-size: 11.5px;
|
||
}
|
||
#z-pct.activo { color: var(--accent); font-weight: 600; }
|
||
#version {
|
||
flex: 0 0 auto;
|
||
margin: 2px 0 7px;
|
||
padding: 0 7px;
|
||
color: var(--muted);
|
||
font-size: 11px;
|
||
font-variant-numeric: tabular-nums;
|
||
white-space: nowrap;
|
||
}
|
||
#version:hover { color: var(--accent); }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div id="bar">
|
||
<button class="icono" id="atras" title="Atrás (⌘/Ctrl+[)">←</button>
|
||
<button class="icono" id="adelante" title="Adelante (⌘/Ctrl+])">→</button>
|
||
<div id="tabs" title=""></div>
|
||
<button class="icono" id="nueva" title="Nueva pestaña (⌘/Ctrl+T)">+</button>
|
||
<button class="icono" id="recargar" title="Recargar (⌘/Ctrl+R)">⟳</button>
|
||
<div id="zoom">
|
||
<button id="z-menos" title="Alejar (⌘/Ctrl+−)">−</button>
|
||
<button id="z-pct" title="Restablecer zoom (⌘/Ctrl+0)">100%</button>
|
||
<button id="z-mas" title="Acercar (⌘/Ctrl++)">+</button>
|
||
</div>
|
||
<button id="version" title="Versión de la app · clic: buscar actualización"></button>
|
||
<button class="icono" id="menu" title="Opciones de la app">⋮</button>
|
||
</div>
|
||
<script>
|
||
const T = window.__TAURI__;
|
||
const E = T && T.event;
|
||
let estado = { tabs: [], zoom: 100 };
|
||
|
||
function emitir(nombre, datos) {
|
||
try { E.emit(nombre, datos || {}); } catch (e) {}
|
||
}
|
||
|
||
const $tabs = document.getElementById("tabs");
|
||
const $pct = document.getElementById("z-pct");
|
||
const $ver = document.getElementById("version");
|
||
|
||
// Favicon de las pestañas (look Chrome): mini logo Labstream en SVG inline —
|
||
// cuadrado indigo con la "L" — para no depender de archivos ni de la red.
|
||
const FAVICON = "data:image/svg+xml," + encodeURIComponent(
|
||
"<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'>" +
|
||
"<rect width='16' height='16' rx='4' fill='#6366f1'/>" +
|
||
"<path d='M5.2 3.8v7h5.6' stroke='#fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' fill='none'/>" +
|
||
"</svg>",
|
||
);
|
||
|
||
function render() {
|
||
$tabs.textContent = "";
|
||
for (const t of estado.tabs) {
|
||
const el = document.createElement("div");
|
||
el.className = "tab" + (t.active ? " active" : "");
|
||
el.title = t.title;
|
||
|
||
const fav = document.createElement("img");
|
||
fav.className = "favicon";
|
||
fav.src = FAVICON;
|
||
fav.alt = "";
|
||
el.appendChild(fav);
|
||
|
||
const titulo = document.createElement("span");
|
||
titulo.className = "titulo";
|
||
titulo.textContent = t.title || "Labstream OS";
|
||
el.appendChild(titulo);
|
||
|
||
const x = document.createElement("button");
|
||
x.className = "cerrar";
|
||
x.textContent = "×";
|
||
x.title = "Cerrar pestaña (⌘/Ctrl+W)";
|
||
x.addEventListener("click", (e) => {
|
||
e.stopPropagation();
|
||
emitir("ls-close-tab", { label: t.label });
|
||
});
|
||
el.appendChild(x);
|
||
|
||
el.addEventListener("click", () => emitir("ls-activate", { label: t.label }));
|
||
// Clic central sobre la pestaña = cerrarla (como en el navegador).
|
||
el.addEventListener("auxclick", (e) => {
|
||
if (e.button === 1) emitir("ls-close-tab", { label: t.label });
|
||
});
|
||
$tabs.appendChild(el);
|
||
}
|
||
const activa = $tabs.querySelector(".tab.active");
|
||
if (activa) activa.scrollIntoView({ block: "nearest", inline: "nearest" });
|
||
|
||
$pct.textContent = estado.zoom + "%";
|
||
$pct.classList.toggle("activo", estado.zoom !== 100);
|
||
$ver.textContent = estado.version ? "v" + estado.version : "";
|
||
}
|
||
|
||
if (E) {
|
||
E.listen("ls-tabs", (ev) => {
|
||
estado = ev.payload || estado;
|
||
render();
|
||
});
|
||
}
|
||
|
||
document.getElementById("atras").addEventListener("click", () => emitir("ls-nav", { dir: -1 }));
|
||
document.getElementById("adelante").addEventListener("click", () => emitir("ls-nav", { dir: 1 }));
|
||
document.getElementById("nueva").addEventListener("click", () => emitir("ls-new-tab", {}));
|
||
document.getElementById("recargar").addEventListener("click", () => emitir("ls-reload", {}));
|
||
// Menú de OPCIONES de la app (nativo, lo pinta Rust): botón ⋮ o clic derecho en la barra.
|
||
document.getElementById("menu").addEventListener("click", () => emitir("ls-menu", {}));
|
||
$ver.addEventListener("click", () => emitir("ls-check-update", {}));
|
||
document.getElementById("bar").addEventListener("contextmenu", (e) => {
|
||
e.preventDefault();
|
||
emitir("ls-menu", {});
|
||
});
|
||
document.getElementById("z-menos").addEventListener("click", () => emitir("ls-zoom", { dir: -1 }));
|
||
document.getElementById("z-mas").addEventListener("click", () => emitir("ls-zoom", { dir: 1 }));
|
||
$pct.addEventListener("click", () => emitir("ls-zoom", { dir: 0 }));
|
||
// Doble clic en el hueco libre de la barra = pestaña nueva.
|
||
$tabs.addEventListener("dblclick", (e) => {
|
||
if (e.target === $tabs) emitir("ls-new-tab", {});
|
||
});
|
||
|
||
// Atajos también cuando el foco está en la barra.
|
||
addEventListener("keydown", (e) => {
|
||
const mod = e.metaKey || e.ctrlKey;
|
||
if (!mod) return;
|
||
const k = e.key;
|
||
if (k === "t" || k === "T") { e.preventDefault(); emitir(e.shiftKey ? "ls-reopen" : "ls-new-tab", {}); }
|
||
else if (k === "w" || k === "W") { e.preventDefault(); emitir("ls-close-tab", {}); }
|
||
else if ((k === "r" || k === "R") && !e.shiftKey) { e.preventDefault(); emitir("ls-reload", {}); }
|
||
else if (k === "[") { e.preventDefault(); emitir("ls-nav", { dir: -1 }); }
|
||
else if (k === "]") { e.preventDefault(); emitir("ls-nav", { dir: 1 }); }
|
||
else if (k === "=" || k === "+") { e.preventDefault(); emitir("ls-zoom", { dir: 1 }); }
|
||
else if (k === "-") { e.preventDefault(); emitir("ls-zoom", { dir: -1 }); }
|
||
else if (k === "0") { e.preventDefault(); emitir("ls-zoom", { dir: 0 }); }
|
||
else if (k === "Tab") { e.preventDefault(); emitir("ls-cycle", { dir: e.shiftKey ? -1 : 1 }); }
|
||
else if (k >= "1" && k <= "9") { e.preventDefault(); emitir("ls-activate-n", { n: +k }); }
|
||
});
|
||
|
||
emitir("ls-ready", {});
|
||
</script>
|
||
</body>
|
||
</html>
|