diff --git a/CHANGELOG.md b/CHANGELOG.md index 9dab322..d57189c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,9 @@ # Changelog +## 0.10.5 — 2026-11-08 + +- **Sync button fixed.** It is now an icon only (a cloud; green with a broadcast icon once the model is shared), the same size on every page and theme. On a diagram it sits in the toolbar after **Export** instead of over it; in narrow windows and high contrast themes it no longer shrinks or loses its colour. + ## 0.10.4 — 2026-11-07 - **A real Sync button.** Every Archify page (diagram, model, graph, registry, decision, and in Source) shows a **Sync** button top right. It opens the Sync menu: sign in, share the model, join one, set the server address. On a model that is shared it turns green and reads **Shared**. diff --git a/README.md b/README.md index 3b277e7..6d6c130 100644 --- a/README.md +++ b/README.md @@ -140,7 +140,7 @@ Optional. Without a sync server the extension works exactly as described above a [Archify Sync](https://gitea.lego-cloud.eu/vscode-extensions/archify-vscode-ext-sync) is a small server you run yourself (one container and PostgreSQL; a Helm chart is included). With it, a model is edited by several people at once, like a shared document, and its files stay ordinary files on each person's disk, so Git, agents and every page of this extension keep working. -- **Where.** Every Archify page (diagram, model, graph, registry, decision, also in Source) has a **Sync** button top right. It opens the Sync menu: sign in, share the model, join one, the server address, settings. On a shared model it turns green and reads **Shared**. The same menu is *Archify | Sync…* in the Command Palette. +- **Where.** Every Archify page (diagram, model, graph, registry, decision, also in Source) has a Sync button (a cloud) top right; on a diagram it sits after **Export**. It opens the Sync menu: sign in, share the model, join one, the server address, settings. On a shared model it turns green with a broadcast icon. The same menu is *Archify | Sync…* in the Command Palette. - **Server address.** Set `archify.sync.server` once (Settings › Archify › Sync, or *Archify | Set Sync Server Address…*), for example `https://archify.example.com`. Put it in the workspace settings and everyone in the project uses the same server. Left empty, the address is asked for once and remembered. - **Sign in.** *Archify | Sign in to Sync Server…* uses that address (or asks for it) and signs in through the browser; the session is kept in VS Code's secret storage and shows under **Accounts** as *Archify Sync*. A new server is set up first on its `/setup` page with the code from its log. - **Share.** *Archify | Share Model…* (also on `main.archify` in the Explorer) puts the model on the server and writes a small `.archify-sync` file next to `main.archify`: the server and the model's id, no secrets. Commit it, and everyone who clones the repository and is a member opens the shared model. diff --git a/package-lock.json b/package-lock.json index b353b1c..cc73539 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "archify-vscode-ext", - "version": "0.10.4", + "version": "0.10.5", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "archify-vscode-ext", - "version": "0.10.4", + "version": "0.10.5", "license": "MIT", "dependencies": { "@codemirror/autocomplete": "^6.20.4", diff --git a/package.json b/package.json index 5cdfc50..25c402e 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "archify-vscode-ext", "displayName": "Archify Diagram Viewer", "description": "Archify diagrams in VS Code. Write diagrams as .archify files in YAML: they open as the interactive diagram, with live updates, validation, templates and completion. Also previews Archify's own JSON files (*.architecture.json, …) and opens rendered Archify HTML.", - "version": "0.10.4", + "version": "0.10.5", "publisher": "root-at-skic", "license": "MIT", "sponsor": { diff --git a/src/webview/page.ts b/src/webview/page.ts index 24434e1..3da6df2 100644 --- a/src/webview/page.ts +++ b/src/webview/page.ts @@ -888,7 +888,7 @@ function bridgeScript(options: PageOptions): string { onReady(describeElements); onReady(renderModeSwitch); - // Archify Sync: one labelled button, top right, on every page of an Archify + // Archify Sync: one icon button, top right, on every page of an Archify // file (diagram, model, graph, registry, decision). It opens the Sync menu. function renderSyncButton() { if (!(config.source || config.model || config.registry || config.decision || config.graph)) return; @@ -901,35 +901,51 @@ function bridgeScript(options: PageOptions): string { button.type = 'button'; button.title = 'Archify Sync: sign in, share this model with others, or join one'; button.addEventListener('click', function (event) { event.stopPropagation(); post({ type: 'syncMenu' }); }); - document.body.appendChild(button); + // A diagram page has Archify's toolbar at the top right: the button goes + // last in it, after Export. Other pages have nothing there; it floats. + var toolbar = document.querySelector('body > .toolbar'); + if (toolbar) { + button.classList.add('in-toolbar'); + toolbar.appendChild(button); + } else { + document.body.appendChild(button); + } showSyncState(false); post({ type: 'syncReady' }); } - // Not shared: a cloud, "Sync". Shared (the model has an .archify-sync file): broadcast waves, "Shared". + // Not shared: a cloud. Shared (the model has an .archify-sync file): broadcast waves on green. var SYNC_ICONS = { - off: '', - on: '', + off: '', + on: '', }; function showSyncState(shared) { var button = document.getElementById('archify-sync-button'); if (!button) return; button.classList.toggle('is-shared', !!shared); - button.innerHTML = (shared ? SYNC_ICONS.on : SYNC_ICONS.off) + '' + (shared ? 'Shared' : 'Sync') + ''; + button.innerHTML = shared ? SYNC_ICONS.on : SYNC_ICONS.off; button.title = shared - ? 'This model is shared with Archify Sync: invite people, publish a version, see versions' + ? 'Archify Sync: this model is shared. Invite people, publish a version, see versions' : 'Archify Sync: sign in, share this model with others, or join one'; + button.setAttribute('aria-label', shared ? 'Archify Sync (shared)' : 'Archify Sync'); } window.addEventListener('message', function (event) { var message = event.data || {}; if (message.type === 'syncState') showSyncState(message.shared); }); - var SYNC_BUTTON_STYLE = '#archify-sync-button { position: fixed; top: 12px; right: 18px; z-index: 1001; display: inline-flex; align-items: center; gap: 6px;' - + ' padding: 6px 12px; border-radius: 8px; cursor: pointer; font: 600 13px/1 var(--vscode-font-family, system-ui, sans-serif);' - + ' color: var(--vscode-button-foreground, #fff); background: var(--vscode-button-background, #0e639c); border: 1px solid var(--vscode-button-border, transparent); }' - + ' #archify-sync-button:hover { background: var(--vscode-button-hoverBackground, #1177bb); }' - + ' #archify-sync-button.is-shared { color: #fff; background: #1f8f5f; }' - + ' #archify-sync-button.is-shared:hover { background: #23a36c; }' - + ' #archify-sync-button:focus-visible { outline: 2px solid var(--vscode-focusBorder, #007fd4); outline-offset: 2px; }'; + // Every rule is !important: the page's own button styles (Archify's toolbar, + // VS Code's high contrast themes) must not resize or recolour it. + var SYNC_BUTTON_STYLE = '#archify-sync-button { all: unset; position: fixed !important; top: 12px !important; right: 28px !important; z-index: 1001 !important;' + + ' box-sizing: border-box !important; width: 30px !important; height: 30px !important; min-width: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important;' + + ' display: flex !important; align-items: center !important; justify-content: center !important; border-radius: 8px !important; cursor: pointer !important;' + + ' color: #fff !important; background: var(--vscode-button-background, #0e639c) !important; border: 1px solid var(--vscode-contrastBorder, transparent) !important;' + + ' box-shadow: 0 1px 4px rgba(0,0,0,.35) !important; }' + + ' #archify-sync-button.in-toolbar { position: relative !important; top: auto !important; right: auto !important; align-self: center !important; flex: none !important; width: 36px !important; height: 36px !important; }' + + ' body.vscode-high-contrast #archify-sync-button { background: #0e639c !important; }' + + ' #archify-sync-button svg { display: block !important; width: 16px !important; height: 16px !important; flex: none !important; }' + + ' #archify-sync-button:hover { background: var(--vscode-button-hoverBackground, #1177bb) !important; }' + + ' #archify-sync-button.is-shared { background: #1f8f5f !important; }' + + ' #archify-sync-button.is-shared:hover { background: #23a36c !important; }' + + ' #archify-sync-button:focus-visible { outline: 2px solid var(--vscode-focusBorder, #007fd4) !important; outline-offset: 2px !important; }'; onReady(renderSyncButton); if (config.source) { // The host answers with the problem count for the Source badge.