Shell de pestañas: multiwebview, zoom persistente y documentos dentro de la app
La app deja de ser un envoltorio de una sola vista y pasa a ser un shell con pestañas (multiwebview de Tauri 2, ventana "main" = barra local "chrome" + webviews "tab-*" del servidor): - Los enlaces internos target=_blank (documentos, entregables, OnlyOffice, exportaciones) abrían nada: ahora abren pestaña dentro de la app. También Cmd/Ctrl+clic, clic central y window.open del propio origen. - Zoom de interfaz: Cmd/Ctrl +/−/0 y Ctrl+rueda (50%–250%), con indicador en la barra y persistencia entre sesiones. - Sesión restaurada: pestañas abiertas, activa, zoom y tamaño/posición de la ventana vuelven al reabrir (estado.json en app_config_dir). - Atajos: Cmd/Ctrl+T/W/R, Ctrl+Tab rota, Cmd/Ctrl+1..9; en macOS van por el menú nativo nuevo en español (Archivo/Edición/Vista/Ventana); en Windows por JS (sin barra de menú). - macOS: clic en el Dock reabre la ventana oculta (RunEvent::Reopen). - Una sola instancia en release (single-instance): reabrir enfoca la existente. - Updater: avisa con notificación nativa antes de reiniciar por actualización. - Los enlaces a OTRO origen siguen yendo al navegador del sistema y el login por Authentik sigue intacto (el init script se desactiva fuera del origen). Shell ↔ Rust por eventos ls-* (core:default cubre el origen remoto; sin ACL de comandos propios). Versión 1.1.0. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Este commit está contenido en:
Jonathan David Florez Salomón
247
dist/index.html
vendido
247
dist/index.html
vendido
@@ -4,41 +4,242 @@
|
||||
<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>
|
||||
:root {
|
||||
--bg: #f4f4f5; /* zinc-100 */
|
||||
--fg: #3f3f46; /* zinc-700 */
|
||||
--muted: #a1a1aa; /* zinc-400 */
|
||||
--tab-bg: transparent;
|
||||
--tab-active-bg: #ffffff;
|
||||
--tab-active-fg: #18181b;
|
||||
--accent: #6366f1; /* indigo-500, color de Labstream */
|
||||
--border: #e4e4e7; /* zinc-200 */
|
||||
--hover: rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--bg: #18181b;
|
||||
--fg: #d4d4d8;
|
||||
--muted: #71717a;
|
||||
--tab-active-bg: #27272a;
|
||||
--tab-active-fg: #fafafa;
|
||||
--border: #27272a;
|
||||
--hover: rgba(255, 255, 255, 0.07);
|
||||
}
|
||||
}
|
||||
* { box-sizing: border-box; }
|
||||
html, body {
|
||||
margin: 0;
|
||||
height: 100%;
|
||||
background: #6366f1;
|
||||
color: #fff;
|
||||
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: stretch;
|
||||
gap: 4px;
|
||||
height: 40px;
|
||||
padding: 5px 8px 0;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
#tabs {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
gap: 2px;
|
||||
flex: 1 1 auto;
|
||||
min-width: 0;
|
||||
overflow-x: auto;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
#tabs::-webkit-scrollbar { display: none; }
|
||||
.tab {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
gap: 6px;
|
||||
flex: 0 1 200px;
|
||||
min-width: 96px;
|
||||
padding: 0 6px 0 12px;
|
||||
border-radius: 8px 8px 0 0;
|
||||
background: var(--tab-bg);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.box { max-width: 420px; padding: 24px; }
|
||||
h1 { font-size: 20px; font-weight: 600; margin: 0 0 8px; }
|
||||
p { opacity: 0.85; font-size: 14px; line-height: 1.5; margin: 0; }
|
||||
.spinner {
|
||||
width: 28px; height: 28px; margin: 0 auto 20px;
|
||||
border: 3px solid rgba(255,255,255,0.35);
|
||||
border-top-color: #fff; border-radius: 50%;
|
||||
animation: spin 0.8s linear infinite;
|
||||
.tab:hover { background: var(--hover); }
|
||||
.tab.active {
|
||||
background: var(--tab-active-bg);
|
||||
color: var(--tab-active-fg);
|
||||
box-shadow: 0 -1px 0 var(--border), 1px 0 0 var(--border), -1px 0 0 var(--border);
|
||||
}
|
||||
@keyframes spin { to { transform: rotate(360deg); } }
|
||||
.tab.active::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0; left: 0; right: 0;
|
||||
height: 2px;
|
||||
background: var(--accent);
|
||||
border-radius: 2px 2px 0 0;
|
||||
}
|
||||
.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: 5px;
|
||||
color: var(--muted);
|
||||
font-size: 13px;
|
||||
line-height: 1;
|
||||
visibility: hidden;
|
||||
}
|
||||
.tab:hover .cerrar, .tab.active .cerrar { visibility: visible; }
|
||||
.tab .cerrar:hover { background: var(--hover); color: var(--tab-active-fg); }
|
||||
button {
|
||||
appearance: none;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: var(--fg);
|
||||
font: inherit;
|
||||
border-radius: 7px;
|
||||
cursor: default;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
}
|
||||
button:hover { background: var(--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; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!--
|
||||
Pantalla de respaldo. En condiciones normales la ventana carga directamente
|
||||
el servidor del NAS (app.windows[].url en tauri.conf.json), así que este
|
||||
archivo casi nunca se ve. Solo aparece si se cambia la config para arrancar
|
||||
en local. Es obligatorio porque Tauri exige un frontendDist existente.
|
||||
-->
|
||||
<div class="box">
|
||||
<div class="spinner"></div>
|
||||
<h1>Labstream OS</h1>
|
||||
<p>Conectando con el espacio de trabajo…</p>
|
||||
<div id="bar">
|
||||
<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>
|
||||
</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");
|
||||
|
||||
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 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);
|
||||
}
|
||||
|
||||
if (E) {
|
||||
E.listen("ls-tabs", (ev) => {
|
||||
estado = ev.payload || estado;
|
||||
render();
|
||||
});
|
||||
}
|
||||
|
||||
document.getElementById("nueva").addEventListener("click", () => emitir("ls-new-tab", {}));
|
||||
document.getElementById("recargar").addEventListener("click", () => emitir("ls-reload", {}));
|
||||
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("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 === "=" || 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>
|
||||
|
||||
Referencia en una nueva incidencia
Block a user