Labstream/labstream-desktop
1
0
Fork 0
Código Incidencias Pull Requests Paquetes Proyectos Lanzamientos Wiki Actividad

Barra de pestanas al estilo Chrome

Explorar el Código 
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>
Este commit está contenido en:
Jonathan David Florez Salomón
2026-07-25 07:17:06 -05:00
padre d8a35f5bae
commit c56d4cb97d
Se han modificado 1 ficheros con 97 adiciones y 37 borrados
Descargar archivo de parche Descargar archivo de diferencias Expandir todos los archivos Contraer todos los archivos

134
dist/index.html vendido
Ver fichero

@@ -11,26 +11,31 @@
emite ls-ready, ls-new-tab, ls-activate, ls-close-tab, ls-reload, ls-zoom, ls-cycle, ls-activate-n emite ls-ready, ls-new-tab, ls-activate, ls-close-tab, ls-reload, ls-zoom, ls-cycle, ls-activate-n
--> -->
<style> <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 { :root {
--bg: #f4f4f5; /* zinc-100 */ --bg: #dee1e6; /* franja de pestañas (Chrome claro) */
--fg: #3f3f46; /* zinc-700 */ --fg: #45474a;
--muted: #a1a1aa; /* zinc-400 */ --muted: #5f6368;
--tab-bg: transparent;
--tab-active-bg: #ffffff; --tab-active-bg: #ffffff;
--tab-active-fg: #18181b; --tab-active-fg: #202124;
--accent: #6366f1; /* indigo-500, color de Labstream */ --accent: #6366f1; /* indigo-500, color de Labstream */
--border: #e4e4e7; /* zinc-200 */ --border: #c9ccd1; /* línea bajo la barra (la tapa la pestaña activa) */
--hover: rgba(0, 0, 0, 0.05); --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) { @media (prefers-color-scheme: dark) {
:root { :root {
--bg: #18181b; --bg: #202124; /* franja (Chrome oscuro) */
--fg: #d4d4d8; --fg: #bdc1c6;
--muted: #71717a; --muted: #80868b;
--tab-active-bg: #27272a; --tab-active-bg: #18181b; /* mismo fondo que la app → pestaña fundida con el contenido */
--tab-active-fg: #fafafa; --tab-active-fg: #e8eaed;
--border: #27272a; --border: #101013;
--hover: rgba(255, 255, 255, 0.07); --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; } * { box-sizing: border-box; }
@@ -48,18 +53,22 @@
} }
#bar { #bar {
display: flex; display: flex;
align-items: stretch; align-items: center;
gap: 4px; gap: 2px;
height: 40px; height: 40px;
padding: 5px 8px 0; padding: 0 6px 0 8px;
border-bottom: 1px solid var(--border); border-bottom: 1px solid var(--border);
} }
#tabs { #tabs {
display: flex; display: flex;
align-items: stretch; align-items: flex-end;
gap: 2px;
flex: 1 1 auto; flex: 1 1 auto;
min-width: 0; 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; overflow-x: auto;
scrollbar-width: none; scrollbar-width: none;
} }
@@ -67,28 +76,64 @@
.tab { .tab {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 6px; gap: 7px;
flex: 0 1 200px; flex: 0 1 220px;
min-width: 96px; min-width: 100px;
padding: 0 6px 0 12px; height: 30px;
border-radius: 8px 8px 0 0; margin-bottom: 5px;
background: var(--tab-bg); padding: 0 6px 0 10px;
border-radius: 9px; /* inactiva: píldora redondeada (hover) */
position: relative; position: relative;
overflow: hidden; overflow: visible; /* deja asomar las curvas de la base de la activa */
} }
.tab:hover { background: var(--hover); } .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 { .tab.active {
background: var(--tab-active-bg); background: var(--tab-active-bg);
color: var(--tab-active-fg); color: var(--tab-active-fg);
box-shadow: 0 -1px 0 var(--border), 1px 0 0 var(--border), -1px 0 0 var(--border); 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;
} }
.tab.active::before { /* 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: ""; content: "";
position: absolute; position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
height: 2px; width: 8px;
background: var(--accent); height: 8px;
border-radius: 2px 2px 0 0; }
.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 { .tab .titulo {
flex: 1 1 auto; flex: 1 1 auto;
@@ -103,26 +148,26 @@
height: 18px; height: 18px;
display: grid; display: grid;
place-items: center; place-items: center;
border-radius: 5px; border-radius: 50%; /* circulito, como el × de Chrome */
color: var(--muted); color: var(--muted);
font-size: 13px; font-size: 13px;
line-height: 1; line-height: 1;
visibility: hidden; visibility: hidden;
} }
.tab:hover .cerrar, .tab.active .cerrar { visibility: visible; } .tab:hover .cerrar, .tab.active .cerrar { visibility: visible; }
.tab .cerrar:hover { background: var(--hover); color: var(--tab-active-fg); } .tab .cerrar:hover { background: var(--btn-hover); color: var(--tab-active-fg); }
button { button {
appearance: none; appearance: none;
border: 0; border: 0;
background: transparent; background: transparent;
color: var(--fg); color: var(--fg);
font: inherit; font: inherit;
border-radius: 7px; border-radius: 50%;
cursor: default; cursor: default;
display: grid; display: grid;
place-items: center; place-items: center;
} }
button:hover { background: var(--hover); } button:hover { background: var(--btn-hover); }
.icono { .icono {
flex: 0 0 auto; flex: 0 0 auto;
width: 30px; width: 30px;
@@ -186,6 +231,15 @@
const $pct = document.getElementById("z-pct"); const $pct = document.getElementById("z-pct");
const $ver = document.getElementById("version"); 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() { function render() {
$tabs.textContent = ""; $tabs.textContent = "";
for (const t of estado.tabs) { for (const t of estado.tabs) {
@@ -193,6 +247,12 @@
el.className = "tab" + (t.active ? " active" : ""); el.className = "tab" + (t.active ? " active" : "");
el.title = t.title; 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"); const titulo = document.createElement("span");
titulo.className = "titulo"; titulo.className = "titulo";
titulo.textContent = t.title || "Labstream OS"; titulo.textContent = t.title || "Labstream OS";