136 lines
8.5 KiB
HTML
136 lines
8.5 KiB
HTML
{{ define "controls_pattern.html" }}
|
|
{{ template "demo_doc_start" . }}
|
|
{{ template "demo_masthead" (dict "label" "Pattern Demo" "title" .Title "lead" "Canonical actions, segmented filters, row selection and bulk-action control bar." "back_url" "/" "back_text" "← Back to catalog") }}
|
|
|
|
<section class="panel" id="controls-buttons">
|
|
<div class="panel-head"><h2>Buttons</h2></div>
|
|
<div class="button-demo-row">
|
|
<button class="btn btn-primary" type="button">Apply changes</button>
|
|
<button class="btn btn-secondary" type="button">Review selection</button>
|
|
<button class="btn btn-danger" type="button">Archive selected</button>
|
|
<button class="btn btn-ghost" type="button">Reset filters</button>
|
|
<button class="btn" type="button" disabled>Disabled</button>
|
|
{{ if .SimulateLoading }}
|
|
<a class="btn btn-secondary is-loading" aria-disabled="true" href="{{ .ClearLoadingURL }}">Loading…</a>
|
|
{{ else }}
|
|
<a class="btn btn-secondary" href="{{ .SimulateLoadingURL }}">Simulate loading</a>
|
|
{{ end }}
|
|
</div>
|
|
<div class="button-demo-row">
|
|
<a class="btn btn-primary" href="/patterns/io?export_ready=1">Export</a>
|
|
<a class="btn btn-secondary" href="/patterns/io">Import</a>
|
|
<a class="btn btn-ghost" href="/patterns/modals?open=edit&stage=edit#modal-open-states">Open modal</a>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="panel panel-composite" id="controls-workbench">
|
|
<div class="panel-subsection" id="controls-segments">
|
|
<div class="panel-head">
|
|
<h2>Segmented Status Filter</h2>
|
|
<div class="meta">{{ .Pager.TotalItems }} filtered · page {{ .Pager.Page }}/{{ .Pager.TotalPages }} · {{ .SelectedCount }} selected</div>
|
|
</div>
|
|
<div class="segmented segmented-wide" role="toolbar" aria-label="Segmented status filter">
|
|
<a class="segment {{ if eq .Segment "all" }}active{{ end }}" href="{{ index .SegmentURLs "all" }}">All ({{ index .SegmentedCounts "all" }})</a>
|
|
<a class="segment {{ if eq .Segment "ready" }}active{{ end }}" href="{{ index .SegmentURLs "ready" }}">Ready ({{ index .SegmentedCounts "ready" }})</a>
|
|
<a class="segment {{ if eq .Segment "warning" }}active{{ end }}" href="{{ index .SegmentURLs "warning" }}">Warning ({{ index .SegmentedCounts "warning" }})</a>
|
|
<a class="segment {{ if eq .Segment "review" }}active{{ end }}" href="{{ index .SegmentURLs "review" }}">Review ({{ index .SegmentedCounts "review" }})</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="panel-subsection panel-subsection-divider" id="controls-selection">
|
|
<div class="panel-head">
|
|
<h2>Selection Table</h2>
|
|
<div class="meta">Checkbox rows + bulk action preview + global selection across pages</div>
|
|
</div>
|
|
|
|
{{ if .ActionMessage }}<div class="notice">{{ .ActionMessage }}</div>{{ end }}
|
|
<p class="meta" style="margin-bottom:12px;">
|
|
Visible on this page: {{ .VisibleCount }} · Selected on this page: {{ .SelectedVisible }}{{ if gt .SelectedHidden 0 }} · Selected on other page(s): {{ .SelectedHidden }}{{ end }}
|
|
</p>
|
|
|
|
<div class="table-toolbar" role="toolbar" aria-label="Selection controls">
|
|
<div class="toolbar-group" role="group" aria-label="Selection">
|
|
<div class="toolbar-group-title">Selection</div>
|
|
<div class="toolbar-group-buttons">
|
|
<a class="tool-icon-btn" href="{{ .SelectVisibleURL }}" title="Select visible" aria-label="Select visible"><svg class="tool-svg" aria-hidden="true"><use href="#ico-select-visible"></use></svg></a>
|
|
<a class="tool-icon-btn" href="{{ .SelectFilteredURL }}" title="Select filtered" aria-label="Select filtered"><svg class="tool-svg" aria-hidden="true"><use href="#ico-select-filtered"></use></svg></a>
|
|
<a class="tool-icon-btn" href="{{ .ClearVisibleURL }}" title="Clear visible" aria-label="Clear visible"><svg class="tool-svg" aria-hidden="true"><use href="#ico-clear-visible"></use></svg></a>
|
|
<a class="tool-icon-btn" href="{{ .ClearFilteredURL }}" title="Clear filtered" aria-label="Clear filtered"><svg class="tool-svg" aria-hidden="true"><use href="#ico-clear-filtered"></use></svg></a>
|
|
</div>
|
|
</div>
|
|
<div class="toolbar-group" role="group" aria-label="Actions">
|
|
<div class="toolbar-group-title">Actions</div>
|
|
<div class="toolbar-group-buttons">
|
|
<a class="tool-icon-btn tool-icon-btn-primary" href="{{ .OpenEditSelectedURL }}" title="Edit selected" aria-label="Edit selected"><svg class="tool-svg" aria-hidden="true"><use href="#ico-edit"></use></svg></a>
|
|
<a class="tool-icon-btn tool-icon-btn-danger" href="{{ .OpenDeleteSelectedURL }}" title="Remove selected" aria-label="Remove selected"><svg class="tool-svg" aria-hidden="true"><use href="#ico-remove"></use></svg></a>
|
|
</div>
|
|
</div>
|
|
<div class="toolbar-group" role="group" aria-label="Import and export">
|
|
<div class="toolbar-group-title">Import/Export</div>
|
|
<div class="toolbar-group-buttons">
|
|
<a class="tool-icon-btn" href="/patterns/io" title="Import" aria-label="Import"><svg class="tool-svg" aria-hidden="true"><use href="#ico-import"></use></svg></a>
|
|
<a class="tool-icon-btn" href="{{ .BulkExportURL }}" title="Export selected" aria-label="Export selected"><svg class="tool-svg" aria-hidden="true"><use href="#ico-export-selected"></use></svg></a>
|
|
</div>
|
|
</div>
|
|
<div class="toolbar-group" role="group" aria-label="Task actions">
|
|
<div class="toolbar-group-title">Task Actions</div>
|
|
<div class="toolbar-group-buttons">
|
|
<a class="tool-icon-btn" href="{{ .BulkReviewURL }}" title="Mark for review" aria-label="Mark for review"><svg class="tool-svg" aria-hidden="true"><use href="#ico-review"></use></svg></a>
|
|
<a class="tool-icon-btn" href="{{ .BulkRetrySyncURL }}" title="Retry sync" aria-label="Retry sync"><svg class="tool-svg" aria-hidden="true"><use href="#ico-retry"></use></svg></a>
|
|
</div>
|
|
</div>
|
|
<div class="toolbar-group" role="group" aria-label="Misc">
|
|
<div class="toolbar-group-title">Misc</div>
|
|
<div class="toolbar-group-buttons">
|
|
<a class="tool-icon-btn" href="{{ .ClearSelectionURL }}" title="Clear selection" aria-label="Clear selection"><svg class="tool-svg" aria-hidden="true"><use href="#ico-clear-selection"></use></svg></a>
|
|
<a class="tool-icon-btn tool-icon-btn-danger" href="{{ .BulkArchiveURL }}" title="Archive" aria-label="Archive"><svg class="tool-svg" aria-hidden="true"><use href="#ico-remove"></use></svg></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="table-wrap">
|
|
<table class="ui-table">
|
|
<thead>
|
|
<tr>
|
|
<th class="select-col" aria-label="Select"></th>
|
|
<th>Name</th>
|
|
<th>Category</th>
|
|
<th>Status</th>
|
|
<th class="actions-col" aria-label="Actions"></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{{ range .Rows }}
|
|
<tr>
|
|
<td class="select-col"><a class="check-toggle {{ if .Selected }}checked{{ end }}" href="{{ .ToggleURL }}" aria-label="Toggle row {{ .ID }}">{{ if .Selected }}☑{{ else }}☐{{ end }}</a></td>
|
|
<td>{{ .Name }}</td>
|
|
<td>{{ .Type }}</td>
|
|
<td><span class="status status-{{ .Status }}">{{ .Status }}</span></td>
|
|
<td class="action-cell action-icons actions-col">
|
|
<a class="icon-link" href="{{ .EditURL }}" title="Edit" aria-label="Edit"><svg class="tool-svg" aria-hidden="true"><use href="#ico-edit"></use></svg></a>
|
|
<a class="icon-link icon-link-danger" href="{{ .RemoveURL }}" title="Remove" aria-label="Remove"><svg class="tool-svg" aria-hidden="true"><use href="#ico-remove"></use></svg></a>
|
|
</td>
|
|
</tr>
|
|
{{ end }}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
{{ if gt .Pager.TotalPages 1 }}
|
|
<nav class="pager pager-dots" aria-label="Pagination">
|
|
{{ range .Pager.Links }}
|
|
{{ if .Ellipsis }}
|
|
<span class="ellipsis" aria-hidden="true">…</span>
|
|
{{ else if .Current }}
|
|
<a class="current" aria-current="page" href="{{ .URL }}" aria-label="Page {{ .Label }}, current">{{ .Label }}</a>
|
|
{{ else }}
|
|
<a href="{{ .URL }}" aria-label="Go to page {{ .Label }}">{{ .Label }}</a>
|
|
{{ end }}
|
|
{{ end }}
|
|
</nav>
|
|
{{ end }}
|
|
</div>
|
|
</section>
|
|
{{ template "demo_doc_end" . }}
|
|
{{ end }}
|