Refine aqua table toolbars and icon system
This commit is contained in:
@@ -8,19 +8,21 @@
|
||||
<h2>Tool Scope Tabs</h2>
|
||||
<div class="meta">{{ .VisibleCount }} visible jobs · {{ .SelectedCount }} selected</div>
|
||||
</div>
|
||||
<div class="segmented">
|
||||
<a class="segment {{ if eq .Scope "assets" }}active{{ end }}" href="{{ index .ScopeURLs "assets" }}">Assets</a>
|
||||
<a class="segment {{ if eq .Scope "components" }}active{{ end }}" href="{{ index .ScopeURLs "components" }}">Components</a>
|
||||
<a class="segment {{ if eq .Scope "imports" }}active{{ end }}" href="{{ index .ScopeURLs "imports" }}">Imports</a>
|
||||
<a class="segment {{ if eq .Scope "maintenance" }}active{{ end }}" href="{{ index .ScopeURLs "maintenance" }}">Maintenance</a>
|
||||
<a class="segment {{ if eq .Scope "all" }}active{{ end }}" href="{{ index .ScopeURLs "all" }}">All</a>
|
||||
</div>
|
||||
<div class="segmented" style="margin-top:10px;">
|
||||
<a class="segment {{ if eq .Queue "all" }}active{{ end }}" href="{{ index .QueueURLs "all" }}">All queue states</a>
|
||||
<a class="segment {{ if eq .Queue "queued" }}active{{ end }}" href="{{ index .QueueURLs "queued" }}">Queued</a>
|
||||
<a class="segment {{ if eq .Queue "running" }}active{{ end }}" href="{{ index .QueueURLs "running" }}">Running</a>
|
||||
<a class="segment {{ if eq .Queue "failed" }}active{{ end }}" href="{{ index .QueueURLs "failed" }}">Failed</a>
|
||||
<a class="segment {{ if eq .Queue "done" }}active{{ end }}" href="{{ index .QueueURLs "done" }}">Done</a>
|
||||
<div class="operator-toolbar operator-scope-toolbar" role="toolbar" aria-label="Scope and queue filters">
|
||||
<div class="tool-group" role="group" aria-label="Tool scope">
|
||||
<a class="tool-btn tool-tab {{ if eq .Scope "assets" }}active{{ end }}" href="{{ index .ScopeURLs "assets" }}">Assets</a>
|
||||
<a class="tool-btn tool-tab {{ if eq .Scope "components" }}active{{ end }}" href="{{ index .ScopeURLs "components" }}">Components</a>
|
||||
<a class="tool-btn tool-tab {{ if eq .Scope "imports" }}active{{ end }}" href="{{ index .ScopeURLs "imports" }}">Imports</a>
|
||||
<a class="tool-btn tool-tab {{ if eq .Scope "maintenance" }}active{{ end }}" href="{{ index .ScopeURLs "maintenance" }}">Maintenance</a>
|
||||
<a class="tool-btn tool-tab {{ if eq .Scope "all" }}active{{ end }}" href="{{ index .ScopeURLs "all" }}">All</a>
|
||||
</div>
|
||||
<div class="tool-group" role="group" aria-label="Queue status">
|
||||
<a class="tool-btn tool-tab {{ if eq .Queue "all" }}active{{ end }}" href="{{ index .QueueURLs "all" }}">All queue states</a>
|
||||
<a class="tool-btn tool-tab {{ if eq .Queue "queued" }}active{{ end }}" href="{{ index .QueueURLs "queued" }}">Queued</a>
|
||||
<a class="tool-btn tool-tab {{ if eq .Queue "running" }}active{{ end }}" href="{{ index .QueueURLs "running" }}">Running</a>
|
||||
<a class="tool-btn tool-tab {{ if eq .Queue "failed" }}active{{ end }}" href="{{ index .QueueURLs "failed" }}">Failed</a>
|
||||
<a class="tool-btn tool-tab {{ if eq .Queue "done" }}active{{ end }}" href="{{ index .QueueURLs "done" }}">Done</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -33,19 +35,44 @@
|
||||
<p class="meta" style="margin-bottom:12px;">
|
||||
Selected on this view: {{ .SelectedVisible }}{{ if gt .SelectionOutside 0 }} · Selected outside current filter: {{ .SelectionOutside }}{{ end }}
|
||||
</p>
|
||||
<div class="bulk-bar">
|
||||
<a class="btn btn-secondary" href="{{ .SelectVisibleURL }}">Select visible</a>
|
||||
<a class="btn btn-secondary" href="{{ .ClearVisibleURL }}">Clear visible</a>
|
||||
<a class="btn btn-ghost" href="{{ .ClearSelectionURL }}">Clear selection</a>
|
||||
<a class="btn btn-primary" href="{{ .RunSelectedURL }}">Run selected</a>
|
||||
<a class="btn btn-secondary" href="{{ .RetrySelectedURL }}">Retry selected</a>
|
||||
<a class="btn btn-danger" href="{{ .CancelSelectedURL }}">Cancel selected</a>
|
||||
<a class="btn btn-secondary" href="{{ .OpenReviewModalURL }}">Open confirm modal</a>
|
||||
</div>
|
||||
<div class="button-demo-row" style="margin-top:12px;">
|
||||
<a class="btn btn-secondary" href="{{ .ImportPreviewURL }}">Import batch preview</a>
|
||||
<a class="btn btn-secondary" href="{{ .ExportFilteredURL }}">Export filtered</a>
|
||||
<a class="btn btn-secondary" href="{{ .ExportSelectedURL }}">Export selected</a>
|
||||
<div class="table-toolbar" role="toolbar" aria-label="Operator tooling actions">
|
||||
<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="{{ .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="{{ .ClearSelectionURL }}" title="Clear selection" aria-label="Clear selection"><svg class="tool-svg" aria-hidden="true"><use href="#ico-clear-selection"></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="{{ .RunSelectedURL }}" title="Run selected" aria-label="Run selected"><svg class="tool-svg" aria-hidden="true"><use href="#ico-run"></use></svg></a>
|
||||
<a class="tool-icon-btn tool-icon-btn-danger" href="{{ .CancelSelectedURL }}" title="Cancel selected" aria-label="Cancel selected"><svg class="tool-svg" aria-hidden="true"><use href="#ico-cancel"></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="{{ .ImportPreviewURL }}" title="Import batch preview" aria-label="Import batch preview"><svg class="tool-svg" aria-hidden="true"><use href="#ico-import"></use></svg></a>
|
||||
<a class="tool-icon-btn" href="{{ .ExportFilteredURL }}" title="Export filtered" aria-label="Export filtered"><svg class="tool-svg" aria-hidden="true"><use href="#ico-export"></use></svg></a>
|
||||
<a class="tool-icon-btn" href="{{ .ExportSelectedURL }}" 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="{{ .RetrySelectedURL }}" title="Retry selected" aria-label="Retry selected"><svg class="tool-svg" aria-hidden="true"><use href="#ico-retry"></use></svg></a>
|
||||
<a class="tool-icon-btn" href="{{ .OpenReviewModalURL }}" title="Open confirm modal" aria-label="Open confirm modal"><svg class="tool-svg" aria-hidden="true"><use href="#ico-confirm"></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="{{ index .ScopeURLs "all" }}" title="All scope" aria-label="All scope"><svg class="tool-svg" aria-hidden="true"><use href="#ico-scope"></use></svg></a>
|
||||
<a class="tool-icon-btn" href="{{ index .QueueURLs "all" }}" title="All queue states" aria-label="All queue states"><svg class="tool-svg" aria-hidden="true"><use href="#ico-queue"></use></svg></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -58,7 +85,7 @@
|
||||
<table class="ui-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Select</th>
|
||||
<th class="select-col" aria-label="Select"></th>
|
||||
<th>Job ID</th>
|
||||
<th>Tool</th>
|
||||
<th>Scope</th>
|
||||
@@ -66,25 +93,25 @@
|
||||
<th>Status</th>
|
||||
<th>Owner</th>
|
||||
<th>Started</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 {{ .ID }}">{{ if .Selected }}☑{{ else }}☐{{ end }}</a></td>
|
||||
<td><code>{{ .ID }}</code></td>
|
||||
<td class="select-col"><a class="check-toggle {{ if .Selected }}checked{{ end }}" href="{{ .ToggleURL }}" aria-label="Toggle {{ .ID }}">{{ if .Selected }}☑{{ else }}☐{{ end }}</a></td>
|
||||
<td class="job-id-cell"><code>{{ .ID }}</code></td>
|
||||
<td>{{ .Tool }}</td>
|
||||
<td>{{ .Scope }}</td>
|
||||
<td>{{ .Mode }}</td>
|
||||
<td><span class="status status-{{ .Status }}">{{ .Status }}</span></td>
|
||||
<td>{{ .Owner }}</td>
|
||||
<td>{{ .StartedAt }}</td>
|
||||
<td class="action-cell">
|
||||
<a class="text-link" href="{{ .RetryURL }}">Retry</a>
|
||||
<a class="text-link" href="{{ .CancelURL }}">Cancel</a>
|
||||
<a class="text-link" href="{{ .ExportURL }}">Export</a>
|
||||
<a class="text-link" href="{{ .InspectURL }}">Inspect</a>
|
||||
<td class="action-cell action-icons actions-col">
|
||||
<a class="icon-link" href="{{ .RetryURL }}" title="Retry" aria-label="Retry"><svg class="tool-svg" aria-hidden="true"><use href="#ico-retry"></use></svg></a>
|
||||
<a class="icon-link icon-link-danger" href="{{ .CancelURL }}" title="Cancel" aria-label="Cancel"><svg class="tool-svg" aria-hidden="true"><use href="#ico-cancel"></use></svg></a>
|
||||
<a class="icon-link" href="{{ .ExportURL }}" title="Export" aria-label="Export"><svg class="tool-svg" aria-hidden="true"><use href="#ico-export"></use></svg></a>
|
||||
<a class="icon-link" href="{{ .InspectURL }}" title="Inspect" aria-label="Inspect"><svg class="tool-svg" aria-hidden="true"><use href="#ico-inspect"></use></svg></a>
|
||||
</td>
|
||||
</tr>
|
||||
{{ else }}
|
||||
|
||||
Reference in New Issue
Block a user