diff --git a/src/components/TiledDemo.astro b/src/components/TiledDemo.astro new file mode 100644 index 0000000..fc33e6b --- /dev/null +++ b/src/components/TiledDemo.astro @@ -0,0 +1,76 @@ +--- +import { messages, tokens, type Lang } from '../i18n'; + +interface Props { lang: Lang } +const { lang } = Astro.props; +const t = messages[lang].tiled; +const keys = tokens(lang); + +type Rect = [left: number, top: number, width: number, height: number]; + +// Glide's tiled layout, in percent of the screen: the first columns split the width evenly, +// and the last one keeps splitting what's left, top and bottom, then side by side. +function spiral(count: number, columns: number): Rect[] { + const cols = Math.min(count, columns); + const w = 100 / cols; + const rects: Rect[] = []; + for (let i = 0; i < cols - 1; i++) rects.push([i * w, 0, w, 100]); + let rest: Rect = [(cols - 1) * w, 0, w, 100]; + for (let i = cols - 1; i < count; i++) { + const [x, y, rw, rh] = rest; + if (i === count - 1) { rects.push(rest); break; } + const horizontal = (i - cols + 1) % 2 === 0; + if (horizontal) { rects.push([x, y, rw, rh / 2]); rest = [x, y + rh / 2, rw, rh / 2]; } + else { rects.push([x, y, rw / 2, rh]); rest = [x + rw / 2, y, rw / 2, rh]; } + } + return rects; +} + +const tiles = 5; +// Windows open one by one on 2 columns, then the workspace switches to 3. +const steps = [1, 2, 3, 4, 5].map((n) => ({ n, columns: 2 })).concat([{ n: 5, columns: 3 }]); +const frames = steps.map(({ n, columns }) => { + const rects = spiral(n, columns); + // Windows yet to open wait inside the last tile, so they seem to split out of it. + return Array.from({ length: tiles }, (_, i) => ({ rect: rects[Math.min(i, n - 1)], shown: i < n, focus: i === n - 1 })); +}); +const still = frames[4]; +const pos = ([l, tp, w, h]: Rect) => `left:${l}%;top:${tp}%;width:${w}%;height:${h}%`; +--- +
+ +
+ {keys.macTiled} {keys.winTiled} {t.toggle} + {keys.macTiledColumns} {keys.winTiledColumns} {t.columns} +
+
+ + diff --git a/src/data/features.ts b/src/data/features.ts index d947750..ea9bca2 100644 --- a/src/data/features.ts +++ b/src/data/features.ts @@ -38,6 +38,8 @@ export const groups = [ { id: 'tabs', mac: 'yes', windows: 'yes' }, { id: 'widths', mac: 'yes', windows: 'yes' }, { id: 'tiledLayout', mac: 'yes', windows: 'yes', note: true }, + { id: 'tiledColumns', mac: 'yes', windows: 'yes' }, + { id: 'tiledMoves', mac: 'yes', windows: 'yes' }, { id: 'resize', mac: 'yes', windows: 'yes' }, { id: 'floating', mac: 'yes', windows: 'yes' }, { id: 'slideAnimation', mac: 'yes', windows: 'yes' }, diff --git a/src/i18n.ts b/src/i18n.ts index dc7a178..b612953 100644 --- a/src/i18n.ts +++ b/src/i18n.ts @@ -77,6 +77,8 @@ export function formatDate(iso: string, lang: Lang): string { * messages, so translators can't break them. Documented at the top of src/i18n/en.ts. */ export function tokens(lang: Lang): Record { + // German Windows keyboards label Ctrl as Strg. + const ctrl = lang === 'de' ? 'Strg' : 'Ctrl'; return { mac: github(repos.mac), windows: github(repos.windows), @@ -92,8 +94,12 @@ export function tokens(lang: Lang): Record { aepd: 'https://www.aepd.es/', macMod: '⌃⌥', macOverview: '⌃⌥O', + macTiled: '⌃⌥T', + macTiledColumns: '⌃⌥G', winKey: 'Win', winOverview: 'Win+Tab', + winTiled: `Win+${ctrl}+T`, + winTiledColumns: `Win+${ctrl}+G`, appData: '%APPDATA%\\Glide', localAppData: '%LOCALAPPDATA%\\Glide', }; diff --git a/src/i18n/de.ts b/src/i18n/de.ts index bd7a20f..7aceb6b 100644 --- a/src/i18n/de.ts +++ b/src/i18n/de.ts @@ -21,14 +21,14 @@ export const de: Messages = { }, home: { - title: 'Glide: ein scrollender Fenstermanager für Mac und Windows', + title: 'Glide: ein scrollender und kachelnder Fenstermanager für Mac und Windows', description: 'Glide ordnet deine Fenster als Spalten auf einem endlosen horizontalen Band an, über das du mit der Tastatur gleitest, oder kachelt sie alle auf einem Bildschirm. Kostenlos und Open Source.', hero: { title: 'Deine Fenster in einer Reihe. Glide.', - lede: 'Glide setzt jedes Fenster in eine Spalte auf einem endlosen horizontalen Band und bringt dich per Tastatur oder Trackpad von Fenster zu Fenster. Schluss mit Fenstern, die sich gegenseitig verdecken. Für Mac und Windows.', + lede: 'Glide setzt jedes Fenster in eine Spalte auf einem endlosen horizontalen Band und bringt dich per Tastatur oder Trackpad von Fenster zu Fenster. Oder kachle einen Arbeitsbereich, damit alle Fenster auf den Bildschirm passen. Für Mac und Windows.', download: 'Kostenlos herunterladen', - meta: 'Open Source, MIT-Lizenz. Im Stil von niri und PaperWM.', + meta: 'Open Source, MIT-Lizenz. Scrollt wie niri und PaperWM, kachelt spiralförmig wie ein Dwindle-Layout.', }, how: { title: 'So funktioniert es', @@ -47,6 +47,32 @@ export const de: Messages = { }, ], }, + tiling: { + title: "Oder alles gekachelt auf einem Bildschirm", + lede: "Alle Fenster im Blick? Schalte einen beliebigen Arbeitsbereich auf die gekachelte Anordnung, und Glide bringt sie alle auf den Bildschirm, ohne Scrollen. Schaltest du zurück, bleibt ihre Reihenfolge erhalten.", + points: [ + { + title: "Eine Spirale, die sich selbst kachelt", + bodyHtml: + "Ein Fenster füllt den Bildschirm, zwei teilen ihn sich. Ab dem dritten teilt sich die letzte Kachel erneut, oben und unten, dann nebeneinander. Keine Bäume zu verwalten.", + }, + { + title: "Zwei Spalten oder drei", + bodyHtml: + "{macTiledColumns} oder {winTiledColumns} wechselt zwischen 2 und 3 Spalten. Auf einem Ultrawide-Bildschirm wählt Glide 3 für dich.", + }, + { + title: "Nach Richtung bewegen", + bodyHtml: + "Die Pfeiltasten fokussieren die Kachel auf dieser Seite, mit Umschalt tauschst du sie dorthin. Stelle eine Teilung auf ⅓, ½ oder ⅔, zoome eine Kachel auf den ganzen Bildschirm und fasse Fenster als Tabs zusammen.", + }, + { + title: "Eine Anordnung pro Arbeitsbereich", + bodyHtml: + "Jeder Arbeitsbereich auf jedem Bildschirm behält seine Anordnung, auch nach einem Neustart: Editor und Terminals gekachelt auf dem einen, ein scrollendes Band voller Browser auf dem nächsten.", + }, + ], + }, keyboard: { title: 'Für die Tastatur gemacht', points: [ @@ -94,6 +120,12 @@ export const de: Messages = { swipe: 'oder mit drei Fingern wischen', }, + tiled: { + label: "Fenster, die sich spiralförmig selbst kacheln: Jedes neue Fenster teilt die letzte Kachel in zwei", + toggle: "scrollend ⇄ gekachelt", + columns: "2 oder 3 Spalten", + }, + downloads: { macNote: 'macOS 27 oder neuer, Apple Silicon. Von Apple signiert und notarisiert.', macButton: 'Für Mac herunterladen', @@ -131,7 +163,9 @@ export const de: Messages = { stacks: 'Stapel: mehrere Fenster in einer Spalte', tabs: 'Spalten mit Tabs', widths: 'Breitenvorgaben, volle Breite und Zentrieren', - tiledLayout: 'Gekachelte Anordnung oder scrollendes Band, pro Arbeitsbereich', + tiledLayout: "Gekachelte Spirale oder scrollendes Band, pro Arbeitsbereich", + tiledColumns: "Gekachelt mit 2 oder 3 Spalten, 3 auf Ultrawide-Bildschirmen", + tiledMoves: "Gekachelt: nach Richtung fokussieren und tauschen, Teilungen ändern, eine Kachel zoomen", resize: 'Spaltengröße durch Ziehen am Rand ändern', floating: 'Schwebende Fenster', slideAnimation: 'Gleitanimation', @@ -161,7 +195,7 @@ export const de: Messages = { }, notes: { tiledLayout: - 'Unter Windows schaltet Win+Strg+T den Arbeitsbereich um, am Mac ⌃⌥T. In der gekachelten Anordnung teilen sich alle Spalten den Bildschirm, ohne Scrollen. Jeder Arbeitsbereich behält seine Anordnung; unter Einstellungen › Allgemein › Anordnung legst du fest, womit neue starten.', + 'Unter Windows schaltet Win+Strg+T den Arbeitsbereich um, am Mac ⌃⌥T. In der gekachelten Anordnung passen alle Fenster spiralförmig auf den Bildschirm, ohne Scrollen. Jeder Arbeitsbereich behält seine Anordnung; unter Einstellungen › Allgemein › Anordnung legst du fest, womit neue starten.', workspacesInUse: 'Unter Windows zeigt das Symbol im Infobereich ein 3×3-Raster der neun Arbeitsbereiche, wobei die genutzten leuchten. Glide für Mac zeigt ihre Nummern in der Menüleiste.', livePreviews: 'Auf dem Mac mit der Berechtigung „Bildschirmaufnahme“; ohne sie werden App-Symbole angezeigt.', diff --git a/src/i18n/en.ts b/src/i18n/en.ts index b3defff..74da939 100644 --- a/src/i18n/en.ts +++ b/src/i18n/en.ts @@ -26,6 +26,8 @@ // {githubPrivacy} {aepd} external privacy pages // {macMod} {macOverview} ⌃⌥ and ⌃⌥O // {winKey} {winOverview} Win and Win+Tab +// {macTiled} {macTiledColumns} ⌃⌥T and ⌃⌥G +// {winTiled} {winTiledColumns} Win+Ctrl+T and Win+Ctrl+G // {appData} {localAppData} Windows folders shown in the privacy policy // {date} only in privacy.updated: the formatted date // @@ -54,14 +56,14 @@ export const en = { }, home: { - title: 'Glide: a scrolling window manager for Mac and Windows', + title: 'Glide: a scrolling and tiling window manager for Mac and Windows', description: 'Glide lays your windows out as columns on an endless horizontal strip that you glide through with the keyboard, or tiles them all on one screen. Free and open source.', hero: { title: 'Your windows, in a row. Glide.', - lede: 'Glide puts every window in a column on an endless horizontal strip and moves you through them with the keyboard or trackpad. No more windows piled on windows. For Mac and Windows.', + lede: 'Glide puts every window in a column on an endless horizontal strip and moves you through them with the keyboard or trackpad. Or tile a workspace so every window fits on screen. For Mac and Windows.', download: 'Download free', - meta: 'Open source, MIT license. In the style of niri and PaperWM.', + meta: 'Open source, MIT license. Scrolls like niri and PaperWM, tiles like a dwindle layout.', }, how: { title: 'How it works', @@ -80,6 +82,32 @@ export const en = { }, ], }, + tiling: { + title: 'Or tile it all on one screen', + lede: 'Want every window in sight? Switch any workspace to the tiled layout and Glide fits them all on screen, with nothing to scroll. Switch back and they keep their order.', + points: [ + { + title: 'A spiral that tiles itself', + bodyHtml: + 'One window fills the screen and two share it. From the third on, the last tile splits again, top and bottom, then side by side. No trees to manage.', + }, + { + title: 'Two columns, or three', + bodyHtml: + '{macTiledColumns} or {winTiledColumns} switches between 2 and 3 columns. On an ultrawide display, Glide picks 3 for you.', + }, + { + title: 'Move by direction', + bodyHtml: + 'The arrows focus the tile on that side, and Shift swaps it there. Resize a split to ⅓, ½ or ⅔, zoom a tile to fill the screen, and keep windows together as tabs.', + }, + { + title: 'One layout per workspace', + bodyHtml: + 'Each workspace on each display keeps its own layout, even after a restart: your editor and terminals tiled on one, a scrolling strip of browsers on the next.', + }, + ], + }, keyboard: { title: 'Made for the keyboard', points: [ @@ -127,6 +155,12 @@ export const en = { swipe: 'or swipe three fingers', }, + tiled: { + label: 'Windows tiling themselves in a spiral: each new window splits the last tile in two', + toggle: 'scrolling ⇄ tiled', + columns: '2 or 3 columns', + }, + downloads: { macNote: 'macOS 27 or later, Apple silicon. Signed and notarized by Apple.', macButton: 'Download for Mac', @@ -164,7 +198,9 @@ export const en = { stacks: 'Stacks: several windows in one column', tabs: 'Tabbed columns', widths: 'Width presets, full width and centering', - tiledLayout: 'Tiled layout, or the scrolling strip, per workspace', + tiledLayout: 'Tiled spiral layout, or the scrolling strip, per workspace', + tiledColumns: 'Tiled with 2 or 3 columns, 3 on ultrawide displays', + tiledMoves: 'Tiled: focus and swap by direction, resize splits, zoom a tile', resize: 'Resize a column by dragging its edge', floating: 'Floating windows', slideAnimation: 'Slide animation', @@ -194,7 +230,7 @@ export const en = { } satisfies Record, notes: { tiledLayout: - 'On Windows, Win+Ctrl+T switches the workspace; on Mac, ⌃⌥T. In the tiled layout every column shares the screen, with no scrolling. Each workspace keeps its own layout, and Settings › General › Layout sets what new ones start with.', + 'On Windows, Win+Ctrl+T switches the workspace; on Mac, ⌃⌥T. In the tiled layout every window fits on screen in a spiral, with no scrolling. Each workspace keeps its own layout, and Settings › General › Layout sets what new ones start with.', workspacesInUse: 'On Windows the tray icon shows a 3×3 grid of the nine workspaces, with the ones in use lit. Glide for Mac shows their numbers in the menu bar.', livePreviews: 'On Mac, with the Screen Recording permission; app icons without it.', diff --git a/src/i18n/es.ts b/src/i18n/es.ts index 3a3540d..11c5b55 100644 --- a/src/i18n/es.ts +++ b/src/i18n/es.ts @@ -20,14 +20,14 @@ export const es: Messages = { }, home: { - title: 'Glide: gestor de ventanas con desplazamiento para Mac y Windows', + title: 'Glide: gestor de ventanas con desplazamiento y mosaico para Mac y Windows', description: 'Glide coloca tus ventanas en columnas sobre una tira horizontal sin fin y te deslizas por ellas con el teclado, o las reparte todas en una pantalla. Gratis y de código abierto.', hero: { title: 'Tus ventanas, en fila. Deslízate.', - lede: 'Glide coloca cada ventana en una columna de una tira horizontal sin fin y te mueve por ellas con el teclado o el trackpad. Sin ventanas encima de otras. Para Mac y Windows.', + lede: 'Glide coloca cada ventana en una columna de una tira horizontal sin fin y te mueve por ellas con el teclado o el trackpad. O pon un escritorio en mosaico para que todas las ventanas quepan en la pantalla. Para Mac y Windows.', download: 'Descargar gratis', - meta: 'Código abierto, licencia MIT. Al estilo de niri y PaperWM.', + meta: 'Código abierto, licencia MIT. Se desplaza como niri y PaperWM, y hace mosaico en espiral como un layout dwindle.', }, how: { title: 'Cómo funciona', @@ -46,6 +46,32 @@ export const es: Messages = { }, ], }, + tiling: { + title: "O todo en mosaico en una pantalla", + lede: "¿Quieres ver todas las ventanas? Pon cualquier escritorio en mosaico y Glide las encaja todas en la pantalla, sin nada que desplazar. Vuelve atrás y conservan su orden.", + points: [ + { + title: "Una espiral que se ordena sola", + bodyHtml: + "Una ventana llena la pantalla y dos la comparten. A partir de la tercera, el último mosaico se vuelve a dividir, arriba y abajo y luego lado a lado. Sin árboles que gestionar.", + }, + { + title: "Dos columnas, o tres", + bodyHtml: + "{macTiledColumns} o {winTiledColumns} cambia entre 2 y 3 columnas. En una pantalla ultrapanorámica, Glide elige 3 por ti.", + }, + { + title: "Muévete por dirección", + bodyHtml: + "Las flechas enfocan el mosaico de ese lado, y con Mayús lo intercambias. Ajusta una división a ⅓, ½ o ⅔, amplía un mosaico a toda la pantalla y agrupa ventanas en pestañas.", + }, + { + title: "Una disposición por escritorio", + bodyHtml: + "Cada escritorio de cada pantalla conserva su disposición, incluso tras reiniciar: el editor y las terminales en mosaico en uno, una tira de navegadores en el siguiente.", + }, + ], + }, keyboard: { title: 'Hecho para el teclado', points: [ @@ -93,6 +119,12 @@ export const es: Messages = { swipe: 'o desliza tres dedos', }, + tiled: { + label: "Ventanas que se colocan solas en espiral: cada ventana nueva divide en dos el último mosaico", + toggle: "desplazamiento ⇄ mosaico", + columns: "2 o 3 columnas", + }, + downloads: { macNote: 'macOS 27 o posterior, Apple silicon. Firmada y notarizada por Apple.', macButton: 'Descargar para Mac', @@ -131,7 +163,9 @@ export const es: Messages = { stacks: 'Pilas: varias ventanas en una columna', tabs: 'Columnas con pestañas', widths: 'Anchos predefinidos, ancho completo y centrado', - tiledLayout: 'Disposición en mosaico o en tira desplazable, por escritorio', + tiledLayout: "Mosaico en espiral o tira desplazable, por escritorio", + tiledColumns: "Mosaico de 2 o 3 columnas, 3 en pantallas ultrapanorámicas", + tiledMoves: "Mosaico: enfocar e intercambiar por dirección, ajustar divisiones, ampliar un mosaico", resize: 'Cambiar el ancho arrastrando el borde', floating: 'Ventanas flotantes', slideAnimation: 'Animación de deslizamiento', @@ -161,7 +195,7 @@ export const es: Messages = { }, notes: { tiledLayout: - 'En Windows, Win+Ctrl+T cambia el escritorio; en Mac, ⌃⌥T. En el mosaico todas las columnas comparten la pantalla, sin desplazarte. Cada escritorio conserva su disposición, y Configuración › General › Disposición define la de los nuevos.', + 'En Windows, Win+Ctrl+T cambia el escritorio; en Mac, ⌃⌥T. En el mosaico todas las ventanas caben en la pantalla en espiral, sin desplazarte. Cada escritorio conserva su disposición, y Configuración › General › Disposición define la de los nuevos.', workspacesInUse: 'En Windows, el icono de la bandeja muestra una cuadrícula de 3×3 con los nueve escritorios, iluminando los que están en uso. Glide para Mac muestra sus números en la barra de menús.', livePreviews: 'En Mac, con el permiso de Grabación de pantalla; iconos de app sin él.', diff --git a/src/i18n/fr.ts b/src/i18n/fr.ts index 6ae8223..c4f0483 100644 --- a/src/i18n/fr.ts +++ b/src/i18n/fr.ts @@ -21,14 +21,14 @@ export const fr: Messages = { }, home: { - title: 'Glide : un gestionnaire de fenêtres à défilement pour Mac et Windows', + title: 'Glide : un gestionnaire de fenêtres à défilement et en mosaïque pour Mac et Windows', description: 'Glide dispose vos fenêtres en colonnes sur une bande horizontale sans fin que vous parcourez au clavier, ou les met toutes en mosaïque sur un seul écran. Gratuit et open source.', hero: { title: 'Vos fenêtres, en file. Glide.', - lede: 'Glide place chaque fenêtre dans une colonne sur une bande horizontale sans fin et vous fait passer de l’une à l’autre au clavier ou au trackpad. Fini les fenêtres empilées les unes sur les autres. Pour Mac et Windows.', + lede: 'Glide place chaque fenêtre dans une colonne sur une bande horizontale sans fin et vous fait passer de l’une à l’autre au clavier ou au trackpad. Ou passez un bureau en mosaïque pour que toutes les fenêtres tiennent à l’écran. Pour Mac et Windows.', download: 'Télécharger gratuitement', - meta: 'Open source, licence MIT. Dans l’esprit de niri et PaperWM.', + meta: 'Open source, licence MIT. Défile dans l’esprit de niri et PaperWM, se met en mosaïque en spirale comme une disposition dwindle.', }, how: { title: 'Comment ça marche', @@ -47,6 +47,32 @@ export const fr: Messages = { }, ], }, + tiling: { + title: "Ou tout en mosaïque sur un écran", + lede: "Envie de voir toutes vos fenêtres ? Passez n’importe quel bureau en mosaïque et Glide les fait toutes tenir à l’écran, sans rien à faire défiler. Revenez en arrière et elles gardent leur ordre.", + points: [ + { + title: "Une spirale qui s’organise toute seule", + bodyHtml: + "Une fenêtre remplit l’écran, deux se le partagent. À partir de la troisième, la dernière tuile se divise à nouveau, en haut et en bas, puis côte à côte. Aucun arbre à gérer.", + }, + { + title: "Deux colonnes, ou trois", + bodyHtml: + "{macTiledColumns} ou {winTiledColumns} bascule entre 2 et 3 colonnes. Sur un écran ultra-large, Glide en choisit 3 pour vous.", + }, + { + title: "Déplacez-vous par direction", + bodyHtml: + "Les flèches activent la tuile de ce côté, et avec Maj vous l’échangez. Réglez une division sur ⅓, ½ ou ⅔, agrandissez une tuile en plein écran et regroupez des fenêtres en onglets.", + }, + { + title: "Une disposition par bureau", + bodyHtml: + "Chaque bureau de chaque écran garde sa disposition, même après un redémarrage : éditeur et terminaux en mosaïque sur l’un, une bande de navigateurs sur le suivant.", + }, + ], + }, keyboard: { title: 'Conçu pour le clavier', points: [ @@ -94,6 +120,12 @@ export const fr: Messages = { swipe: 'ou balayez avec trois doigts', }, + tiled: { + label: "Des fenêtres qui se placent en spirale : chaque nouvelle fenêtre coupe la dernière tuile en deux", + toggle: "défilement ⇄ mosaïque", + columns: "2 ou 3 colonnes", + }, + downloads: { macNote: 'macOS 27 ou version ultérieure, puce Apple. Signé et notarisé par Apple.', macButton: 'Télécharger pour Mac', @@ -131,7 +163,9 @@ export const fr: Messages = { stacks: 'Piles : plusieurs fenêtres dans une colonne', tabs: 'Colonnes en onglets', widths: 'Largeurs prédéfinies, pleine largeur et centrage', - tiledLayout: 'Disposition en mosaïque ou bande à défilement, par bureau', + tiledLayout: "Mosaïque en spirale ou bande à défilement, par bureau", + tiledColumns: "Mosaïque sur 2 ou 3 colonnes, 3 sur les écrans ultra-larges", + tiledMoves: "Mosaïque : activer et échanger par direction, régler les divisions, agrandir une tuile", resize: 'Redimensionner une colonne en faisant glisser son bord', floating: 'Fenêtres flottantes', slideAnimation: 'Animation de glissement', @@ -161,7 +195,7 @@ export const fr: Messages = { }, notes: { tiledLayout: - 'Sous Windows, Win+Ctrl+T bascule le bureau ; sur Mac, ⌃⌥T. En mosaïque, toutes les colonnes se partagent l’écran, sans défilement. Chaque bureau garde sa disposition, et Paramètres › Général › Disposition choisit celle des nouveaux.', + 'Sous Windows, Win+Ctrl+T bascule le bureau ; sur Mac, ⌃⌥T. En mosaïque, toutes les fenêtres tiennent à l’écran en spirale, sans défilement. Chaque bureau garde sa disposition, et Paramètres › Général › Disposition choisit celle des nouveaux.', workspacesInUse: 'Sous Windows, l’icône de la zone de notification affiche une grille 3×3 des neuf bureaux, ceux qui sont utilisés étant allumés. Glide pour Mac affiche leurs numéros dans la barre des menus.', livePreviews: 'Sur Mac, avec l’autorisation d’enregistrement de l’écran ; sans elle, des icônes d’apps.', diff --git a/src/i18n/ja.ts b/src/i18n/ja.ts index 67b5b1c..e6413b7 100644 --- a/src/i18n/ja.ts +++ b/src/i18n/ja.ts @@ -21,14 +21,14 @@ export const ja: Messages = { }, home: { - title: 'Glide：MacとWindows向けのスクロール式ウィンドウマネージャー', + title: 'Glide：MacとWindows向けのスクロール式・タイル型ウィンドウマネージャー', description: 'Glideは、ウィンドウを果てしなく続く横長のストリップ上に列として並べ、キーボードですべるように移動できるようにします。すべてを1つの画面にタイル表示することもできます。無料のオープンソースです。', hero: { title: 'ウィンドウを、一列に。Glide。', - lede: 'Glideは、すべてのウィンドウを果てしなく続く横長のストリップ上の列に並べ、キーボードやトラックパッドで行き来できるようにします。ウィンドウが重なり合うことはもうありません。MacとWindowsに対応。', + lede: 'Glideは、すべてのウィンドウを果てしなく続く横長のストリップ上の列に並べ、キーボードやトラックパッドで行き来できるようにします。ワークスペースをタイル表示にして、すべてのウィンドウを画面に収めることもできます。MacとWindowsに対応。', download: '無料でダウンロード', - meta: 'オープンソース、MITライセンス。niriとPaperWMのスタイルを踏襲しています。', + meta: 'オープンソース、MITライセンス。スクロールはniriやPaperWM、らせん状のタイル表示はdwindleレイアウトのスタイルです。', }, how: { title: '仕組み', @@ -47,6 +47,32 @@ export const ja: Messages = { }, ], }, + tiling: { + title: "または、すべてを1つの画面にタイル表示", + lede: "すべてのウィンドウを見渡したいときは、どのワークスペースでもタイル レイアウトに切り替えれば、Glideがすべてを画面に収めます。スクロールは不要です。元に戻しても、ウィンドウの順序はそのままです。", + points: [ + { + title: "自動で並ぶらせん", + bodyHtml: + "1つのウィンドウは画面いっぱいに、2つなら半分ずつ。3つ目からは最後のタイルがさらに分割され、上下、次に左右と交互に分かれます。ツリーを管理する必要はありません。", + }, + { + title: "2列、または3列", + bodyHtml: + "{macTiledColumns} または {winTiledColumns} で2列と3列を切り替えます。ウルトラワイド ディスプレイでは、Glideが自動で3列を選びます。", + }, + { + title: "方向で移動", + bodyHtml: + "矢印キーでその方向のタイルにフォーカスし、Shiftを加えると入れ替えます。分割を⅓、½、⅔に変えたり、タイルを画面いっぱいにズームしたり、ウィンドウをタブにまとめたりできます。", + }, + { + title: "ワークスペースごとのレイアウト", + bodyHtml: + "各ディスプレイの各ワークスペースが、再起動後も自分のレイアウトを保ちます。あるワークスペースではエディタとターミナルをタイル表示に、次のワークスペースではブラウザをスクロール ストリップに。", + }, + ], + }, keyboard: { title: 'キーボードのために', points: [ @@ -94,6 +120,12 @@ export const ja: Messages = { swipe: 'または3本指でスワイプ', }, + tiled: { + label: "らせん状に自動で並ぶウィンドウ：新しいウィンドウが最後のタイルを2つに分割します", + toggle: "スクロール ⇄ タイル", + columns: "2列または3列", + }, + downloads: { macNote: 'macOS 27以降、Apple silicon。Appleによる署名と公証済み。', macButton: 'Mac版をダウンロード', @@ -132,7 +164,9 @@ export const ja: Messages = { stacks: 'スタック：1つの列に複数のウィンドウ', tabs: 'タブ付きの列', widths: '幅のプリセット、全幅、中央配置', - tiledLayout: 'タイル レイアウトとスクロール ストリップ、ワークスペースごと', + tiledLayout: "らせん状のタイル レイアウトとスクロール ストリップ、ワークスペースごと", + tiledColumns: "タイル レイアウトは2列または3列、ウルトラワイドでは3列", + tiledMoves: "タイル：方向でフォーカスと入れ替え、分割の変更、タイルのズーム", resize: '端をドラッグして列の幅を変更', floating: 'フローティングウィンドウ', slideAnimation: 'スライドアニメーション', @@ -162,7 +196,7 @@ export const ja: Messages = { }, notes: { tiledLayout: - 'Windowsでは Win+Ctrl+T、Macでは ⌃⌥T でワークスペースを切り替えます。タイル レイアウトでは、すべての列が画面を分け合い、スクロールは不要です。レイアウトはワークスペースごとに保たれ、「設定 › 全般 › レイアウト」で新しいワークスペースの開始時のレイアウトを選べます。', + 'Windowsでは Win+Ctrl+T、Macでは ⌃⌥T でワークスペースを切り替えます。タイル レイアウトでは、すべてのウィンドウがらせん状に画面に収まり、スクロールは不要です。レイアウトはワークスペースごとに保たれ、「設定 › 全般 › レイアウト」で新しいワークスペースの開始時のレイアウトを選べます。', workspacesInUse: 'Windowsでは、通知領域のアイコンに9つのワークスペースを3×3のグリッドで表示し、使用中のものが点灯します。Mac版Glideでは、メニューバーに番号を表示します。', livePreviews: 'Macでは画面収録の許可が必要です。許可がない場合は、アプリのアイコンを表示します。', diff --git a/src/i18n/ko.ts b/src/i18n/ko.ts index 20355a5..769ba72 100644 --- a/src/i18n/ko.ts +++ b/src/i18n/ko.ts @@ -21,14 +21,14 @@ export const ko: Messages = { }, home: { - title: 'Glide: Mac과 Windows를 위한 스크롤형 창 관리자', + title: 'Glide: Mac과 Windows를 위한 스크롤형·타일형 창 관리자', description: 'Glide는 창을 끝없이 이어진 가로 스트립 위에 열로 배치하고, 키보드로 그 사이를 미끄러지듯 이동하게 해 주고, 원한다면 한 화면에 모두 타일로 배치합니다. 무료 오픈 소스입니다.', hero: { title: '창을 한 줄로. Glide.', - lede: 'Glide는 모든 창을 끝없이 이어진 가로 스트립의 열에 놓고, 키보드나 트랙패드로 창 사이를 이동하게 해 줍니다. 창 위에 창이 겹쳐 쌓일 일이 없습니다. Mac과 Windows에서 사용할 수 있습니다.', + lede: 'Glide는 모든 창을 끝없이 이어진 가로 스트립의 열에 놓고, 키보드나 트랙패드로 창 사이를 이동하게 해 줍니다. 워크스페이스를 타일로 바꿔 모든 창을 한 화면에 담을 수도 있습니다. Mac과 Windows에서 사용할 수 있습니다.', download: '무료 다운로드', - meta: '오픈 소스, MIT 라이선스. niri와 PaperWM 스타일.', + meta: '오픈 소스, MIT 라이선스. 스크롤은 niri와 PaperWM, 나선형 타일은 dwindle 레이아웃 스타일.', }, how: { title: '작동 방식', @@ -47,6 +47,32 @@ export const ko: Messages = { }, ], }, + tiling: { + title: "또는 한 화면에 모두 타일로", + lede: "모든 창을 한눈에 보고 싶다면 아무 워크스페이스나 타일 레이아웃으로 바꾸세요. Glide가 모든 창을 화면에 맞춰 주므로 스크롤할 필요가 없습니다. 되돌려도 창 순서는 그대로입니다.", + points: [ + { + title: "스스로 정렬되는 나선", + bodyHtml: + "창 하나는 화면을 가득 채우고, 둘은 화면을 나눠 씁니다. 세 번째부터는 마지막 타일이 다시 나뉘며, 위아래와 좌우가 번갈아 갈라집니다. 관리할 트리가 없습니다.", + }, + { + title: "2열 또는 3열", + bodyHtml: + "{macTiledColumns} 또는 {winTiledColumns}로 2열과 3열을 전환합니다. 울트라와이드 디스플레이에서는 Glide가 3열을 골라 줍니다.", + }, + { + title: "방향으로 이동", + bodyHtml: + "화살표 키로 그 방향의 타일에 포커스를 옮기고, Shift를 더하면 자리를 바꿉니다. 분할을 ⅓, ½, ⅔로 조절하고, 타일을 화면 가득 확대하고, 창을 탭으로 묶을 수 있습니다.", + }, + { + title: "워크스페이스마다 레이아웃", + bodyHtml: + "각 디스플레이의 각 워크스페이스가 재시작 후에도 자신의 레이아웃을 유지합니다. 한 곳에는 편집기와 터미널을 타일로, 다음 곳에는 브라우저를 스크롤 스트립으로.", + }, + ], + }, keyboard: { title: '키보드를 위해 만들었습니다', points: [ @@ -94,6 +120,12 @@ export const ko: Messages = { swipe: '또는 세 손가락으로 쓸어넘기기', }, + tiled: { + label: "나선형으로 스스로 배치되는 창: 새 창이 마지막 타일을 둘로 나눕니다", + toggle: "스크롤 ⇄ 타일", + columns: "2열 또는 3열", + }, + downloads: { macNote: 'macOS 27 이상, Apple 실리콘. Apple의 서명 및 공증을 받았습니다.', macButton: 'Mac용 다운로드', @@ -131,7 +163,9 @@ export const ko: Messages = { stacks: '스택: 한 열에 여러 창', tabs: '탭 열', widths: '너비 프리셋, 전체 너비, 가운데 맞춤', - tiledLayout: '타일 레이아웃 또는 스크롤 스트립, 워크스페이스별', + tiledLayout: "나선형 타일 레이아웃 또는 스크롤 스트립, 워크스페이스별", + tiledColumns: "2열 또는 3열 타일, 울트라와이드에서는 3열", + tiledMoves: "타일: 방향으로 포커스 및 교환, 분할 조절, 타일 확대", resize: '가장자리를 드래그하여 열 크기 조절', floating: '플로팅 창', slideAnimation: '슬라이드 애니메이션', @@ -161,7 +195,7 @@ export const ko: Messages = { } satisfies Record, notes: { tiledLayout: - 'Windows에서는 Win+Ctrl+T, Mac에서는 ⌃⌥T로 워크스페이스를 전환합니다. 타일 레이아웃에서는 모든 열이 화면을 나눠 쓰므로 스크롤이 필요 없습니다. 각 워크스페이스는 자신의 레이아웃을 유지하며, 설정 › 일반 › 레이아웃에서 새 워크스페이스의 시작 레이아웃을 고릅니다.', + 'Windows에서는 Win+Ctrl+T, Mac에서는 ⌃⌥T로 워크스페이스를 전환합니다. 타일 레이아웃에서는 모든 창이 나선형으로 화면에 들어가므로 스크롤이 필요 없습니다. 각 워크스페이스는 자신의 레이아웃을 유지하며, 설정 › 일반 › 레이아웃에서 새 워크스페이스의 시작 레이아웃을 고릅니다.', workspacesInUse: 'Windows에서는 알림 영역 아이콘에 워크스페이스 아홉 개가 3×3 격자로 표시되며 사용 중인 워크스페이스에 불이 켜집니다. Mac용 Glide는 메뉴 막대에 워크스페이스 번호를 표시합니다.', livePreviews: 'Mac에서는 화면 기록 권한이 있을 때만 제공되며, 권한이 없으면 앱 아이콘이 표시됩니다.', diff --git a/src/i18n/pt.ts b/src/i18n/pt.ts index 55604f9..4992db5 100644 --- a/src/i18n/pt.ts +++ b/src/i18n/pt.ts @@ -21,14 +21,14 @@ export const pt: Messages = { }, home: { - title: 'Glide: um gerenciador de janelas com rolagem para Mac e Windows', + title: 'Glide: um gerenciador de janelas com rolagem e mosaico para Mac e Windows', description: 'O Glide organiza suas janelas em colunas numa faixa horizontal sem fim, pela qual você desliza com o teclado, ou as organiza todas em mosaico numa tela. Gratuito e de código aberto.', hero: { title: 'Suas janelas, em fila. Glide.', - lede: 'O Glide coloca cada janela em uma coluna numa faixa horizontal sem fim e leva você de uma a outra com o teclado ou o trackpad. Chega de janelas empilhadas umas sobre as outras. Para Mac e Windows.', + lede: 'O Glide coloca cada janela em uma coluna numa faixa horizontal sem fim e leva você de uma a outra com o teclado ou o trackpad. Ou coloque um espaço de trabalho em mosaico para que todas as janelas caibam na tela. Para Mac e Windows.', download: 'Baixar grátis', - meta: 'Código aberto, licença MIT. No estilo do niri e do PaperWM.', + meta: 'Código aberto, licença MIT. Rola como o niri e o PaperWM, e organiza em mosaico espiral como um layout dwindle.', }, how: { title: 'Como funciona', @@ -47,6 +47,32 @@ export const pt: Messages = { }, ], }, + tiling: { + title: "Ou tudo em mosaico numa tela", + lede: "Quer ver todas as janelas? Coloque qualquer espaço de trabalho em mosaico e o Glide encaixa todas na tela, sem nada para rolar. Volte atrás e elas mantêm a ordem.", + points: [ + { + title: "Uma espiral que se organiza sozinha", + bodyHtml: + "Uma janela ocupa a tela e duas a dividem. A partir da terceira, o último bloco se divide de novo, em cima e embaixo, depois lado a lado. Nenhuma árvore para gerenciar.", + }, + { + title: "Duas colunas, ou três", + bodyHtml: + "{macTiledColumns} ou {winTiledColumns} alterna entre 2 e 3 colunas. Numa tela ultrawide, o Glide escolhe 3 para você.", + }, + { + title: "Mova-se por direção", + bodyHtml: + "As setas focam o bloco daquele lado, e com Shift você troca de lugar com ele. Ajuste uma divisão para ⅓, ½ ou ⅔, amplie um bloco para a tela inteira e agrupe janelas em abas.", + }, + { + title: "Um layout por espaço de trabalho", + bodyHtml: + "Cada espaço de trabalho de cada tela mantém o próprio layout, mesmo depois de reiniciar: editor e terminais em mosaico num, uma faixa de navegadores no seguinte.", + }, + ], + }, keyboard: { title: 'Feito para o teclado', points: [ @@ -94,6 +120,12 @@ export const pt: Messages = { swipe: 'ou deslize com três dedos', }, + tiled: { + label: "Janelas que se organizam sozinhas em espiral: cada nova janela divide o último bloco em dois", + toggle: "rolagem ⇄ mosaico", + columns: "2 ou 3 colunas", + }, + downloads: { macNote: 'macOS 27 ou posterior, Apple silicon. Assinado e notarizado pela Apple.', macButton: 'Baixar para Mac', @@ -131,7 +163,9 @@ export const pt: Messages = { stacks: 'Pilhas: várias janelas em uma coluna', tabs: 'Colunas com abas', widths: 'Larguras predefinidas, largura total e centralização', - tiledLayout: 'Layout em mosaico ou faixa com rolagem, por espaço de trabalho', + tiledLayout: "Mosaico em espiral ou faixa com rolagem, por espaço de trabalho", + tiledColumns: "Mosaico com 2 ou 3 colunas, 3 em telas ultrawide", + tiledMoves: "Mosaico: focar e trocar por direção, ajustar divisões, ampliar um bloco", resize: 'Redimensionar uma coluna arrastando a borda', floating: 'Janelas flutuantes', slideAnimation: 'Animação de deslize', @@ -161,7 +195,7 @@ export const pt: Messages = { }, notes: { tiledLayout: - 'No Windows, Win+Ctrl+T alterna o espaço de trabalho; no Mac, ⌃⌥T. No mosaico, todas as colunas dividem a tela, sem rolagem. Cada espaço de trabalho mantém o próprio layout, e Configurações › Geral › Layout define o dos novos.', + 'No Windows, Win+Ctrl+T alterna o espaço de trabalho; no Mac, ⌃⌥T. No mosaico, todas as janelas cabem na tela em espiral, sem rolagem. Cada espaço de trabalho mantém o próprio layout, e Configurações › Geral › Layout define o dos novos.', workspacesInUse: 'No Windows, o ícone da bandeja mostra uma grade 3×3 dos nove espaços de trabalho, com os que estão em uso acesos. O Glide para Mac mostra os números na barra de menus.', livePreviews: 'No Mac, com a permissão de Gravação de Tela; sem ela, aparecem os ícones dos apps.', diff --git a/src/i18n/zh.ts b/src/i18n/zh.ts index 522653a..ca8f791 100644 --- a/src/i18n/zh.ts +++ b/src/i18n/zh.ts @@ -21,14 +21,14 @@ export const zh: Messages = { }, home: { - title: 'Glide：适用于 Mac 和 Windows 的滚动式窗口管理器', + title: 'Glide：适用于 Mac 和 Windows 的滚动式与平铺式窗口管理器', description: 'Glide 把窗口排成一条无限延伸的横向条带上的多个列，用键盘就能在其中滑动穿梭，也可以把它们全部平铺在一个屏幕上。免费且开源。', hero: { title: '窗口排成一行，轻松滑动。Glide。', - lede: 'Glide 把每个窗口放进无限延伸的横向条带上的一列，让你用键盘或触控板在窗口间穿梭。再也没有窗口层层堆叠的烦恼。适用于 Mac 和 Windows。', + lede: 'Glide 把每个窗口放进无限延伸的横向条带上的一列，让你用键盘或触控板在窗口间穿梭。也可以把工作区切换为平铺，让所有窗口都显示在屏幕上。适用于 Mac 和 Windows。', download: '免费下载', - meta: '开源，MIT 许可证。灵感来自 niri 和 PaperWM。', + meta: '开源，MIT 许可证。滚动灵感来自 niri 和 PaperWM，螺旋平铺则类似 dwindle 布局。', }, how: { title: '工作原理', @@ -47,6 +47,32 @@ export const zh: Messages = { }, ], }, + tiling: { + title: "或者，全部平铺在一个屏幕上", + lede: "想一眼看到所有窗口？把任意工作区切换为平铺布局，Glide 会让它们全部显示在屏幕上，无需滚动。切换回来，窗口顺序保持不变。", + points: [ + { + title: "自动排列的螺旋", + bodyHtml: + "一个窗口占满屏幕，两个窗口平分屏幕。从第三个开始，最后一个图块会再次分割，先上下，再左右，交替进行。无需管理任何树结构。", + }, + { + title: "两列或三列", + bodyHtml: + "{macTiledColumns} 或 {winTiledColumns} 可在 2 列和 3 列之间切换。在超宽显示器上，Glide 会自动选择 3 列。", + }, + { + title: "按方向移动", + bodyHtml: + "方向键聚焦该方向上的图块，加上 Shift 则与其交换位置。可将分割调整为 ⅓、½ 或 ⅔，把图块放大到全屏，还能把窗口合并为标签页。", + }, + { + title: "每个工作区一种布局", + bodyHtml: + "每个显示器上的每个工作区都保留自己的布局，重启后也不变：一个工作区平铺编辑器和终端，下一个则是一排可滚动的浏览器。", + }, + ], + }, keyboard: { title: '为键盘而生', points: [ @@ -94,6 +120,12 @@ export const zh: Messages = { swipe: '或用三指轻扫', }, + tiled: { + label: "以螺旋方式自动平铺的窗口：每个新窗口把最后一个图块一分为二", + toggle: "滚动 ⇄ 平铺", + columns: "2 列或 3 列", + }, + downloads: { macNote: 'macOS 27 或更高版本，Apple 芯片。已由 Apple 签名并公证。', macButton: '下载 Mac 版', @@ -131,7 +163,9 @@ export const zh: Messages = { stacks: '堆叠：多个窗口放在同一列', tabs: '标签页列', widths: '预设宽度、全宽和居中', - tiledLayout: '平铺布局或滚动条带，按工作区设置', + tiledLayout: "螺旋平铺布局或滚动条带，按工作区设置", + tiledColumns: "平铺为 2 列或 3 列，超宽显示器上为 3 列", + tiledMoves: "平铺：按方向聚焦和交换、调整分割、放大图块", resize: '拖动列的边缘来调整大小', floating: '浮动窗口', slideAnimation: '滑动动画', @@ -161,7 +195,7 @@ export const zh: Messages = { }, notes: { tiledLayout: - '在 Windows 上按 Win+Ctrl+T 切换工作区，在 Mac 上按 ⌃⌥T。平铺布局中所有列共享屏幕，无需滚动。每个工作区都会保留自己的布局，“设置 › 常规 › 布局”可决定新工作区的初始布局。', + '在 Windows 上按 Win+Ctrl+T 切换工作区，在 Mac 上按 ⌃⌥T。平铺布局中所有窗口以螺旋方式排满屏幕，无需滚动。每个工作区都会保留自己的布局，“设置 › 常规 › 布局”可决定新工作区的初始布局。', workspacesInUse: '在 Windows 上，通知区域图标会以 3×3 网格显示九个工作区，正在使用的会亮起。Mac 版 Glide 则在菜单栏中显示它们的编号。', livePreviews: '在 Mac 上需要屏幕录制权限；没有该权限时显示 App 图标。', diff --git a/src/styles/global.css b/src/styles/global.css index 8082efc..2533f08 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -188,6 +188,30 @@ details p { margin: 0.75rem 0 0; color: var(--ink-soft); } 92%, 100% { left: 4%; } } +/* Tiled demo: the same screen, with every window on it */ +.tiled { + position: relative; aspect-ratio: 16 / 10; overflow: hidden; + background: var(--midnight); border-radius: 18px; + box-shadow: 0 24px 48px -24px rgb(27 31 43 / 0.55); +} +.tiled-area { position: absolute; inset: 5%; } +.tiled-tile { + position: absolute; padding: 0.8%; box-sizing: border-box; + transition-property: left, top, width, height, opacity; + transition-duration: 420ms; transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1); +} +.tiled-tile > i { display: block; height: 100%; border-radius: 10px; background: #48516f; transition: background-color 200ms, box-shadow 200ms; } +.tiled-tile.is-focus > i { background: var(--paper); box-shadow: 0 0 0 3px var(--orange); } +.tiled-tile.is-hidden { opacity: 0; } + +/* The tiling band: the demo beside what it shows */ +.tiling { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; } +@media (min-width: 60rem) { .tiling { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); } } +.tiling .lede { font-size: var(--step-1); line-height: 1.45; color: var(--ink-soft); max-width: 40ch; margin: 0 0 2rem; } +.points--two { gap: 1.75rem 2rem; } +.points--two h3 { font-size: var(--step-0); } +@media (min-width: 52rem) { .points--two { grid-template-columns: repeat(2, minmax(0, 1fr)); } } + kbd { font-family: var(--mono); font-size: 0.85em; background: var(--paper); padding: 0.1em 0.45em; border-radius: 5px; box-shadow: 0 2px 0 var(--key-side); white-space: nowrap; @@ -228,6 +252,7 @@ kbd { @media (prefers-reduced-motion: reduce) { .strip-track, .strip-thumb { animation: none; } + .tiled-tile, .tiled-tile > i { transition: none; } } /* Language picker (a
disclosure, no JavaScript) */ diff --git a/src/views/Home.astro b/src/views/Home.astro index f28b9bd..e29d3ba 100644 --- a/src/views/Home.astro +++ b/src/views/Home.astro @@ -1,6 +1,7 @@ --- import Base from '../layouts/Base.astro'; import StripDemo from '../components/StripDemo.astro'; +import TiledDemo from '../components/TiledDemo.astro'; import Downloads from '../components/Downloads.astro'; import Parity from '../components/Parity.astro'; import { repos, github } from '../config'; @@ -37,6 +38,24 @@ const fill = filler(lang); +
+
+ +
+

{t.tiling.title}

+

{t.tiling.lede}

+
+ {t.tiling.points.map((point) => ( +
+

{point.title}

+

+

+ ))} +
+
+
+
+

{t.keyboard.title}