Refine aqua table toolbars and icon system

This commit is contained in:
2026-02-28 12:12:30 +03:00
parent d0cffab6a1
commit 5191e709bd
5 changed files with 726 additions and 71 deletions

View File

@@ -8,6 +8,95 @@
<link rel="stylesheet" href="/static/css/app.css">
</head>
<body>
<svg class="icon-sprite" aria-hidden="true" focusable="false" width="0" height="0">
<symbol id="ico-select-visible" viewBox="0 0 16 16">
<rect x="2.5" y="2.5" width="11" height="11" rx="2"></rect>
<path d="M5 8.2l2 2.1 4-4.3"></path>
</symbol>
<symbol id="ico-select-filtered" viewBox="0 0 16 16">
<path d="M2.5 3h11l-4.2 4.6v3.1l-2.6 1.5V7.6L2.5 3z"></path>
<path d="M11.4 10.2h3M12.9 8.7v3"></path>
</symbol>
<symbol id="ico-clear-visible" viewBox="0 0 16 16">
<rect x="2.5" y="2.5" width="11" height="11" rx="2"></rect>
<path d="M5 8h6"></path>
</symbol>
<symbol id="ico-clear-filtered" viewBox="0 0 16 16">
<path d="M2.5 3h11L9.3 7.6v3.1l-2.6 1.5V7.6L2.5 3z"></path>
<path d="M10.5 10.2l3 3M13.5 10.2l-3 3"></path>
</symbol>
<symbol id="ico-clear-selection" viewBox="0 0 16 16">
<rect x="2.5" y="2.5" width="11" height="11" rx="2"></rect>
<path d="M5 5l6 6M11 5l-6 6"></path>
</symbol>
<symbol id="ico-run" viewBox="0 0 16 16">
<path d="M5 3.5l7 4.5-7 4.5z"></path>
</symbol>
<symbol id="ico-edit" viewBox="0 0 16 16">
<path d="M3 13l1.2-3.6L10 3.6l2.4 2.4-5.8 5.8L3 13z"></path>
<path d="M8.8 4.8l2.4 2.4"></path>
</symbol>
<symbol id="ico-remove" viewBox="0 0 16 16">
<path d="M4.2 4.2l7.6 7.6M11.8 4.2l-7.6 7.6"></path>
</symbol>
<symbol id="ico-cancel" viewBox="0 0 16 16">
<circle cx="8" cy="8" r="5.5"></circle>
<path d="M5.5 5.5l5 5M10.5 5.5l-5 5"></path>
</symbol>
<symbol id="ico-archive" viewBox="0 0 16 16">
<rect x="2.5" y="3" width="11" height="2.8" rx="1"></rect>
<path d="M3.5 5.8V13h9V5.8"></path>
<path d="M6.2 8h3.6"></path>
</symbol>
<symbol id="ico-import" viewBox="0 0 16 16">
<path d="M3 4.2v8.6h10V4.2"></path>
<path d="M8 1.8v6.2"></path>
<path d="M5.8 5.8L8 8l2.2-2.2"></path>
<path d="M5 10.2h6"></path>
</symbol>
<symbol id="ico-export" viewBox="0 0 16 16">
<path d="M3 4.2v8.6h10V4.2"></path>
<path d="M8 8V1.8"></path>
<path d="M5.8 4L8 1.8 10.2 4"></path>
<path d="M5 10.2h6"></path>
</symbol>
<symbol id="ico-retry" viewBox="0 0 16 16">
<path d="M12.2 6A4.8 4.8 0 0 0 4.8 4.4"></path>
<path d="M5.6 2.9L4.1 4.6 5.9 5.8"></path>
<path d="M3.8 10A4.8 4.8 0 0 0 11.2 11.6"></path>
<path d="M10.4 13.1L11.9 11.4 10.1 10.2"></path>
</symbol>
<symbol id="ico-review" viewBox="0 0 16 16">
<circle cx="8" cy="8" r="5.5"></circle>
<path d="M8 7.2v3.6"></path>
<path d="M8 5.1h.01"></path>
</symbol>
<symbol id="ico-mark-review" viewBox="0 0 16 16">
<path d="M8 2.6l5.2 2v3.7c0 2.3-1.5 4.4-5.2 5.7-3.7-1.3-5.2-3.4-5.2-5.7V4.6l5.2-2z"></path>
<path d="M8 6.1v3.2"></path>
<path d="M8 11.1h.01"></path>
</symbol>
<symbol id="ico-confirm" viewBox="0 0 16 16">
<path d="M8 2.5l5 2v3.8c0 2.2-1.3 4.1-5 5.3-3.7-1.2-5-3.1-5-5.3V4.5l5-2z"></path>
<path d="M5.7 8.3l1.6 1.7 3-3.1"></path>
</symbol>
<symbol id="ico-inspect" viewBox="0 0 16 16">
<circle cx="7" cy="7" r="3.8"></circle>
<path d="M9.8 9.8l3.2 3.2"></path>
</symbol>
<symbol id="ico-scope" viewBox="0 0 16 16">
<rect x="2.5" y="2.5" width="4.2" height="4.2"></rect>
<rect x="9.3" y="2.5" width="4.2" height="4.2"></rect>
<rect x="2.5" y="9.3" width="4.2" height="4.2"></rect>
<rect x="9.3" y="9.3" width="4.2" height="4.2"></rect>
</symbol>
<symbol id="ico-queue" viewBox="0 0 16 16">
<path d="M5.4 4h8.1M5.4 8h8.1M5.4 12h8.1"></path>
<circle cx="3.2" cy="4" r="0.7"></circle>
<circle cx="3.2" cy="8" r="0.7"></circle>
<circle cx="3.2" cy="12" r="0.7"></circle>
</symbol>
</svg>
{{ template "demo_nav" . }}
{{ template "demo_app_shell" . }}
<main class="page">

View File

@@ -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 }}

View File

@@ -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 }}