oleh/astrolabe
1
0
Fork 0
mirror of https://github.com/olehomelchenko/astrolabe.git synced 2026-08-08 02:02:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add in-app confirmation dialog replacing window.confirm

Browse Source
This commit is contained in:
Oleh Omelchenko
2026-06-05 02:28:37 +03:00
parent edadc2a3fa
commit 7d7034ef1a
12 changed files with 554 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/architecture/visual-specimen.html
+75
View File
@@ -696,6 +696,52 @@
border-left-color: var(--support-error);
}
/* ----- Overlay dialog (confirm / alert) ----- */
/* Shown inline on a dimmed stage — the real one is a fixed full-screen
overlay (src/app/components/ConfirmDialog). Mirror its look only. */
.dialog-stage {
display: flex;
align-items: flex-start; /* each card sizes to its own content, not the tallest */
gap: var(--space-5);
flex-wrap: wrap;
padding: var(--space-7) var(--space-6);
background: rgb(0 0 0 / 0.5);
}
.dialog {
width: 100%;
max-width: 28rem;
display: flex;
flex-direction: column;
gap: var(--space-4);
padding: var(--space-6);
background: var(--layer-01);
border: var(--border-width) solid var(--border);
box-shadow: 0 2px 12px rgb(0 0 0 / 0.3);
}
.dialog h3 {
margin: 0;
font-size: 16px;
font-weight: 600;
color: var(--text);
}
.dialog p {
margin: 0;
font-size: 14px;
line-height: 1.4;
color: var(--text-secondary);
}
.dialog .actions {
display: flex;
justify-content: flex-end;
gap: var(--space-3);
margin-top: var(--space-2);
}
/* Secondary's default hover fill (--layer-01) equals the card bg, so it
would read as dead. Mirror the real ConfirmDialog: hover to --layer-02. */
.dialog .btn-secondary:hover {
background: var(--layer-02);
}
/* ----- Code surface ----- */
.code {
background: var(--layer-01);
@@ -1052,6 +1098,35 @@
</div>
</section>
<!-- OVERLAY DIALOG -->
<section>
<h2>Overlay dialog — confirm / alert</h2>
<p class="cap">
The in-app replacement for <code>window.confirm</code>. Backdrop dims but does NOT
dismiss (Carbon transactional rule); danger variant for destructive intent, with Cancel
taking focus. Behavior lives in
<code>docs/architecture/03 → Confirmation &amp; alert dialogs</code>.
</p>
<div class="dialog-stage">
<div class="dialog" role="alertdialog" aria-label="Danger confirm example">
<h3>Delete snippet</h3>
<p>Delete “Quarterly revenue”? This cannot be undone.</p>
<div class="actions">
<button class="btn btn-secondary">Cancel</button>
<button class="btn btn-danger">Delete</button>
</div>
</div>
<div class="dialog" role="alertdialog" aria-label="Default confirm example">
<h3>Discard changes?</h3>
<p>You have unsaved edits — leaving will discard them.</p>
<div class="actions">
<button class="btn btn-secondary">Keep editing</button>
<button class="btn btn-primary">Discard</button>
</div>
</div>
</div>
</section>
<!-- CODE -->
<section>
<h2>Code / editor surface — IBM Plex Mono</h2>