75 lines
4.0 KiB
HTML
75 lines
4.0 KiB
HTML
{{ define "modal_pattern.html" }}
|
|
{{ template "demo_doc_start" . }}
|
|
{{ template "demo_masthead" (dict "label" "Pattern Demo" "title" .Title "lead" "Single-modal workflow progression: edit → confirm → complete, with explicit cancel/close paths." "back_url" "/" "back_text" "← Back to catalog") }}
|
|
|
|
<section class="panel" id="modal-open-states">
|
|
<div class="panel-head"><h2>Open States</h2></div>
|
|
<div class="button-demo-row">
|
|
<a class="btn btn-primary" href="/patterns/modals?open=edit&stage=edit&sel=1&sel=3#modal-open-states">Open Edit Modal</a>
|
|
<a class="btn btn-secondary" href="/patterns/modals?open=delete&stage=confirm&sel=2#modal-open-states">Open Confirm Modal</a>
|
|
<a class="btn btn-ghost" href="/patterns/modals#modal-open-states">No modal open</a>
|
|
</div>
|
|
<div class="notice">{{ .Message }}</div>
|
|
</section>
|
|
|
|
<section class="panel" id="modal-context">
|
|
<div class="panel-head"><h2>Page Context</h2></div>
|
|
<div class="card">
|
|
<div class="row"><h3>Selected items</h3><span class="status status-{{ if .SelectedIDs }}ready{{ else }}review{{ end }}">{{ if .SelectedIDs }}{{ len .SelectedIDs }} selected{{ else }}none{{ end }}</span></div>
|
|
<p class="meta">{{ if .SelectedIDs }}IDs: {{ range $i, $id := .SelectedIDs }}{{ if $i }}, {{ end }}{{ $id }}{{ end }}{{ else }}Select rows on the controls page to carry context into modal demos.{{ end }}</p>
|
|
</div>
|
|
</section>
|
|
|
|
{{ if .Open }}
|
|
<div class="demo-modal-backdrop">
|
|
<section class="demo-modal">
|
|
<div class="demo-modal-titlebar">
|
|
<a class="demo-modal-close-dot" href="/patterns/modals#modal-open-states" aria-label="Close modal"></a>
|
|
<div class="demo-modal-title">{{ if eq .Open "delete" }}Confirm Destructive Action{{ else }}Edit Items{{ end }}</div>
|
|
</div>
|
|
<div class="demo-modal-body">
|
|
<p class="meta">{{ .Message }}</p>
|
|
|
|
{{ if eq .Stage "edit" }}
|
|
<div class="modal-grid">
|
|
<label>Display name <input type="text" value="Example group change"></label>
|
|
<label>Status after action
|
|
<select>
|
|
<option>ready</option>
|
|
<option selected>review</option>
|
|
<option>warning</option>
|
|
</select>
|
|
</label>
|
|
<label class="checkbox-row"><input type="checkbox" checked> Apply to all selected items</label>
|
|
<label class="checkbox-row"><input type="checkbox"> Clear optional field values</label>
|
|
</div>
|
|
<div class="button-demo-row">
|
|
<a class="btn btn-secondary" href="/patterns/modals#modal-open-states">Cancel</a>
|
|
<a class="btn btn-primary" href="/patterns/modals?open={{ .Open }}&stage=confirm{{ range .SelectedIDs }}&sel={{ . }}{{ end }}#modal-open-states">Review Changes</a>
|
|
</div>
|
|
{{ else if eq .Stage "confirm" }}
|
|
<div class="card">
|
|
<h3 style="margin:0;">Confirmation Summary</h3>
|
|
<ul>
|
|
<li>Selected rows are listed and reviewed before submit.</li>
|
|
<li>Destructive actions require explicit confirmation wording.</li>
|
|
<li>No nested modals; stay within one modal state machine.</li>
|
|
</ul>
|
|
</div>
|
|
<div class="button-demo-row">
|
|
<a class="btn btn-secondary" href="/patterns/modals?open={{ .Open }}&stage=edit{{ range .SelectedIDs }}&sel={{ . }}{{ end }}#modal-open-states">Back</a>
|
|
<a class="btn {{ if eq .Open "delete" }}btn-danger{{ else }}btn-primary{{ end }}" href="/patterns/modals?open={{ .Open }}&stage=done{{ range .SelectedIDs }}&sel={{ . }}{{ end }}#modal-open-states">Confirm</a>
|
|
</div>
|
|
{{ else }}
|
|
<div class="notice success">Action completed. Show human-readable summary and next actions.</div>
|
|
<div class="button-demo-row">
|
|
<a class="btn btn-primary" href="/patterns/modals#modal-open-states">Done</a>
|
|
</div>
|
|
{{ end }}
|
|
</div>
|
|
</section>
|
|
</div>
|
|
{{ end }}
|
|
{{ template "demo_doc_end" . }}
|
|
{{ end }}
|