Refine aqua table toolbars and icon system
This commit is contained in:
@@ -29,7 +29,7 @@
|
||||
<h2>Segmented Status Filter</h2>
|
||||
<div class="meta">{{ .Pager.TotalItems }} filtered · page {{ .Pager.Page }}/{{ .Pager.TotalPages }} · {{ .SelectedCount }} selected</div>
|
||||
</div>
|
||||
<div class="segmented">
|
||||
<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>
|
||||
@@ -48,46 +48,67 @@
|
||||
Visible on this page: {{ .VisibleCount }} · Selected on this page: {{ .SelectedVisible }}{{ if gt .SelectedHidden 0 }} · Selected on other page(s): {{ .SelectedHidden }}{{ end }}
|
||||
</p>
|
||||
|
||||
<div class="bulk-bar">
|
||||
<a class="btn btn-secondary" href="{{ .SelectVisibleURL }}">Select visible</a>
|
||||
<a class="btn btn-secondary" href="{{ .SelectFilteredURL }}">Select filtered</a>
|
||||
<a class="btn btn-secondary" href="{{ .ClearVisibleURL }}">Clear visible</a>
|
||||
<a class="btn btn-secondary" href="{{ .ClearFilteredURL }}">Clear filtered</a>
|
||||
<a class="btn btn-primary" href="{{ .OpenEditSelectedURL }}">Edit selected</a>
|
||||
<a class="btn btn-secondary" href="{{ .OpenDeleteSelectedURL }}">Remove selected</a>
|
||||
<a class="btn btn-ghost" href="{{ .ClearSelectionURL }}">Clear selection</a>
|
||||
<details class="inline-menu">
|
||||
<summary class="btn btn-secondary">More actions</summary>
|
||||
<div class="inline-menu-list">
|
||||
<a class="menu-item" href="{{ .BulkReviewURL }}">Mark for review</a>
|
||||
<a class="menu-item" href="{{ .BulkExportURL }}">Export selected</a>
|
||||
<a class="menu-item" href="{{ .BulkRetrySyncURL }}">Retry sync</a>
|
||||
<a class="menu-item danger" href="{{ .BulkArchiveURL }}">Archive</a>
|
||||
<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>
|
||||
</details>
|
||||
</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"></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>Select</th>
|
||||
<th class="select-col" aria-label="Select"></th>
|
||||
<th>Name</th>
|
||||
<th>Category</th>
|
||||
<th>Status</th>
|
||||
<th>Actions</th>
|
||||
<th class="actions-col" aria-label="Actions"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{{ range .Rows }}
|
||||
<tr>
|
||||
<td><a class="check-toggle {{ if .Selected }}checked{{ end }}" href="{{ .ToggleURL }}" aria-label="Toggle row {{ .ID }}">{{ if .Selected }}☑{{ else }}☐{{ end }}</a></td>
|
||||
<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">
|
||||
<a class="text-link" href="{{ .EditURL }}">Edit</a>
|
||||
<a class="text-link" href="{{ .RemoveURL }}">Remove</a>
|
||||
<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 }}
|
||||
|
||||
Reference in New Issue
Block a user