Refine aqua table toolbars and icon system
This commit is contained in:
@@ -14,6 +14,12 @@
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; }
|
||||
.icon-sprite {
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
html {
|
||||
scroll-padding-top: var(--anchor-offset);
|
||||
}
|
||||
@@ -543,7 +549,8 @@ h1 { margin: 6px 0 8px; font-size: 30px; }
|
||||
linear-gradient(180deg, #fbfbfc 0%, #efeff1 62%, #e8e8eb 100%);
|
||||
}
|
||||
.btn-secondary:hover { filter: brightness(1.01); }
|
||||
.btn-danger {
|
||||
.btn-danger,
|
||||
.tool-btn-danger {
|
||||
border-color: #c79e98;
|
||||
color: #6f2e2a;
|
||||
text-shadow: 0 1px 0 rgba(255,255,255,0.56), 0 0 1px rgba(255,255,255,0.16);
|
||||
@@ -551,7 +558,8 @@ h1 { margin: 6px 0 8px; font-size: 30px; }
|
||||
radial-gradient(160% 100% at 50% -8%, rgba(255,255,255,0.94) 0%, rgba(255,255,255,0.48) 24%, rgba(255,255,255,0.12) 38%, rgba(255,255,255,0) 39%),
|
||||
linear-gradient(180deg, #e8aea5 0%, #efc0b9 28%, #f5d3ce 58%, #fae3df 100%);
|
||||
}
|
||||
.btn-danger:hover { filter: brightness(1.01); }
|
||||
.btn-danger:hover,
|
||||
.tool-btn-danger:hover { filter: brightness(1.01); }
|
||||
.btn-ghost {
|
||||
border-color: #a8abb0;
|
||||
color: #636b78;
|
||||
@@ -768,8 +776,26 @@ code {
|
||||
inset 0 1px 0 rgba(255,255,255,0.78),
|
||||
0 1px 1px rgba(0,0,0,0.06);
|
||||
}
|
||||
.segmented.segmented-wide {
|
||||
display: flex;
|
||||
width: max-content;
|
||||
max-width: 100%;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
.segmented.segmented-wide .segment {
|
||||
flex: 0 0 auto;
|
||||
min-height: 36px;
|
||||
padding-top: 8px;
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
.segment {
|
||||
flex: 1 1 0;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-decoration: none;
|
||||
text-align: center;
|
||||
color: #2f3135;
|
||||
border: 0;
|
||||
min-height: 30px;
|
||||
@@ -826,6 +852,175 @@ code {
|
||||
margin-bottom: 12px;
|
||||
align-items: center;
|
||||
}
|
||||
.operator-toolbar {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
}
|
||||
.operator-scope-toolbar {
|
||||
margin-top: 4px;
|
||||
}
|
||||
.operator-scope-toolbar .tool-group {
|
||||
flex: 1 1 320px;
|
||||
}
|
||||
.table-toolbar {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0;
|
||||
align-items: stretch;
|
||||
padding: 6px;
|
||||
border: 1px solid #b7bdd0;
|
||||
border-radius: 12px;
|
||||
background:
|
||||
linear-gradient(180deg, rgba(255,255,255,0.78), rgba(255,255,255,0.22) 42%, rgba(255,255,255,0)),
|
||||
linear-gradient(180deg, #edf1f7 0%, #dfe5ee 100%);
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255,255,255,0.92),
|
||||
0 1px 0 rgba(255,255,255,0.38);
|
||||
}
|
||||
.table-toolbar + .table-wrap {
|
||||
margin-top: 0;
|
||||
border-top: 0;
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
.table-toolbar {
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
.toolbar-group {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 2px 10px;
|
||||
}
|
||||
.toolbar-group + .toolbar-group {
|
||||
border-left: 1px solid #b6bdd0;
|
||||
}
|
||||
.toolbar-group-title {
|
||||
margin: 0;
|
||||
font-size: 9px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.05em;
|
||||
text-transform: uppercase;
|
||||
color: #6f7088;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.toolbar-group-buttons {
|
||||
display: inline-flex;
|
||||
gap: 6px;
|
||||
padding: 0;
|
||||
}
|
||||
.tool-icon-btn {
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
border: 1px solid #a7acb7;
|
||||
border-radius: 8px;
|
||||
text-decoration: none;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #2e4f7d;
|
||||
font-size: 17px;
|
||||
line-height: 1;
|
||||
font-family: "Tahoma", "MS Sans Serif", "Lucida Grande", sans-serif;
|
||||
text-shadow: 0 1px 0 rgba(255,255,255,0.62);
|
||||
background:
|
||||
radial-gradient(155% 95% at 50% -10%, rgba(255,255,255,0.90) 0%, rgba(255,255,255,0.38) 30%, rgba(255,255,255,0.12) 44%, rgba(255,255,255,0) 45%),
|
||||
linear-gradient(180deg, #fdfdff 0%, #e7ebf3 100%);
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255,255,255,0.95),
|
||||
inset 0 -1px 0 rgba(164, 173, 188, 0.14),
|
||||
0 1px 0 rgba(255,255,255,0.28);
|
||||
}
|
||||
.tool-svg {
|
||||
width: 21px;
|
||||
height: 21px;
|
||||
stroke: currentColor;
|
||||
fill: none;
|
||||
stroke-width: 1.35;
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
shape-rendering: geometricPrecision;
|
||||
vector-effect: non-scaling-stroke;
|
||||
}
|
||||
.tool-icon-btn:hover {
|
||||
filter: brightness(1.03);
|
||||
}
|
||||
.tool-icon-btn-primary {
|
||||
border-color: #88a4d4;
|
||||
color: #244f83;
|
||||
background:
|
||||
radial-gradient(160% 100% at 50% -8%, rgba(255,255,255,0.94) 0%, rgba(255,255,255,0.34) 26%, rgba(255,255,255,0.08) 38%, rgba(255,255,255,0) 39%),
|
||||
linear-gradient(180deg, #89bdf2 0%, #99ccfe 28%, #b5deff 58%, #d3eeff 100%);
|
||||
}
|
||||
.tool-icon-btn-danger {
|
||||
border-color: #c79e98;
|
||||
color: #6f2e2a;
|
||||
text-shadow: 0 1px 0 rgba(255,255,255,0.56), 0 0 1px rgba(255,255,255,0.16);
|
||||
background:
|
||||
radial-gradient(160% 100% at 50% -8%, rgba(255,255,255,0.94) 0%, rgba(255,255,255,0.48) 24%, rgba(255,255,255,0.12) 38%, rgba(255,255,255,0) 39%),
|
||||
linear-gradient(180deg, #e8aea5 0%, #efc0b9 28%, #f5d3ce 58%, #fae3df 100%);
|
||||
}
|
||||
.tool-group {
|
||||
display: inline-flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
padding: 4px;
|
||||
border: 1px solid #b6bbca;
|
||||
border-radius: 10px;
|
||||
background:
|
||||
linear-gradient(180deg, rgba(255,255,255,0.70), rgba(255,255,255,0.18) 40%, rgba(255,255,255,0)),
|
||||
linear-gradient(180deg, #eef0f4 0%, #e2e6ed 100%);
|
||||
box-shadow: inset 0 1px 0 rgba(255,255,255,0.86);
|
||||
}
|
||||
.tool-btn {
|
||||
min-height: 30px;
|
||||
padding: 6px 10px;
|
||||
border: 1px solid #a6aab5;
|
||||
border-radius: 7px;
|
||||
text-decoration: none;
|
||||
color: #2f3135;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
line-height: 1;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
white-space: nowrap;
|
||||
background:
|
||||
linear-gradient(180deg, rgba(255,255,255,0.88), rgba(255,255,255,0.16) 42%, rgba(255,255,255,0) 43%),
|
||||
linear-gradient(180deg, #fafbfc 0%, #e8ebf1 100%);
|
||||
box-shadow: inset 0 1px 0 rgba(255,255,255,0.90);
|
||||
}
|
||||
.tool-btn:hover {
|
||||
filter: brightness(1.02);
|
||||
}
|
||||
.tool-btn.active,
|
||||
.tool-tab.active {
|
||||
border-color: #88a4d4;
|
||||
color: #244f83;
|
||||
text-shadow: 0 1px 0 rgba(255,255,255,0.48);
|
||||
background:
|
||||
radial-gradient(160% 100% at 50% -8%, rgba(255,255,255,0.94) 0%, rgba(255,255,255,0.34) 26%, rgba(255,255,255,0.08) 38%, rgba(255,255,255,0) 39%),
|
||||
linear-gradient(180deg, #89bdf2 0%, #99ccfe 28%, #b5deff 58%, #d3eeff 100%);
|
||||
}
|
||||
.tool-btn-primary {
|
||||
border-color: #88a4d4;
|
||||
color: #244f83;
|
||||
background:
|
||||
radial-gradient(160% 100% at 50% -8%, rgba(255,255,255,0.94) 0%, rgba(255,255,255,0.34) 26%, rgba(255,255,255,0.08) 38%, rgba(255,255,255,0) 39%),
|
||||
linear-gradient(180deg, #89bdf2 0%, #99ccfe 28%, #b5deff 58%, #d3eeff 100%);
|
||||
}
|
||||
.tool-icn {
|
||||
width: 14px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 12px;
|
||||
}
|
||||
.inline-menu {
|
||||
position: relative;
|
||||
}
|
||||
@@ -870,9 +1065,50 @@ code {
|
||||
background: #fdecef;
|
||||
}
|
||||
.action-cell {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.action-cell.action-icons {
|
||||
white-space: nowrap;
|
||||
}
|
||||
.action-cell > .icon-link + .icon-link,
|
||||
.action-cell > .text-link + .text-link {
|
||||
margin-left: 6px;
|
||||
}
|
||||
.action-cell.actions-col .tool-svg {
|
||||
width: 17px;
|
||||
height: 17px;
|
||||
}
|
||||
.icon-link {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border: 1px solid #a8adb8;
|
||||
border-radius: 7px;
|
||||
text-decoration: none;
|
||||
color: #365a8b;
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background:
|
||||
linear-gradient(180deg, rgba(255,255,255,0.88), rgba(255,255,255,0.16) 42%, rgba(255,255,255,0) 43%),
|
||||
linear-gradient(180deg, #fafbfc 0%, #e8ebf1 100%);
|
||||
box-shadow: inset 0 1px 0 rgba(255,255,255,0.90);
|
||||
}
|
||||
.icon-link:hover {
|
||||
filter: brightness(1.03);
|
||||
}
|
||||
.icon-link-danger {
|
||||
border-color: #c79e98;
|
||||
color: #6f2e2a;
|
||||
text-shadow: 0 1px 0 rgba(255,255,255,0.56), 0 0 1px rgba(255,255,255,0.16);
|
||||
background:
|
||||
radial-gradient(160% 100% at 50% -8%, rgba(255,255,255,0.94) 0%, rgba(255,255,255,0.48) 24%, rgba(255,255,255,0.12) 38%, rgba(255,255,255,0) 39%),
|
||||
linear-gradient(180deg, #e8aea5 0%, #efc0b9 28%, #f5d3ce 58%, #fae3df 100%);
|
||||
}
|
||||
.icon-link-danger:hover {
|
||||
filter: brightness(1.01);
|
||||
}
|
||||
.check-toggle {
|
||||
text-decoration: none;
|
||||
@@ -891,6 +1127,10 @@ code {
|
||||
background: #edf8f0;
|
||||
border-color: #b7d9c2;
|
||||
}
|
||||
.job-id-cell,
|
||||
.job-id-cell code {
|
||||
white-space: nowrap;
|
||||
}
|
||||
.table-wrap {
|
||||
overflow: auto;
|
||||
border: 1px solid var(--line);
|
||||
@@ -925,6 +1165,24 @@ code {
|
||||
.ui-table .status-col {
|
||||
text-align: center;
|
||||
}
|
||||
.ui-table th.select-col,
|
||||
.ui-table td.select-col {
|
||||
width: 1%;
|
||||
min-width: 46px;
|
||||
max-width: 46px;
|
||||
white-space: nowrap;
|
||||
text-align: center;
|
||||
padding-left: 8px;
|
||||
padding-right: 8px;
|
||||
}
|
||||
.ui-table th.actions-col,
|
||||
.ui-table td.actions-col {
|
||||
width: 1%;
|
||||
white-space: nowrap;
|
||||
text-align: right;
|
||||
padding-left: 8px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
.ui-table tbody tr:hover { background: linear-gradient(90deg, rgba(245,247,250,0.96), rgba(238,242,247,0.96)); }
|
||||
.empty-cell {
|
||||
color: var(--muted);
|
||||
@@ -3737,7 +3995,8 @@ h1, h2, h3 { color: #2f2843; }
|
||||
.btn-ghost {
|
||||
color: #5b5074;
|
||||
}
|
||||
.btn-danger {
|
||||
.btn-danger,
|
||||
.tool-btn-danger {
|
||||
color: #7a3555;
|
||||
border-color: #d3abc0;
|
||||
background:
|
||||
@@ -3979,7 +4238,7 @@ h1, h2, h3 { color: #2f2843; }
|
||||
box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), inset 0 -1px 0 rgba(59,47,108,0.24);
|
||||
}
|
||||
.btn-primary { color: #2a153f; text-shadow: 0 1px 0 rgba(255,255,255,0.28); }
|
||||
.btn-danger { color: #ffdced; border-color: #b86191; background: radial-gradient(155% 95% at 50% -10%, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0.08) 28%, rgba(255,255,255,0.02) 42%, rgba(255,255,255,0) 43%), linear-gradient(180deg, #8a2c58 0%, #6f2249 100%); }
|
||||
.btn-danger, .tool-btn-danger { color: #ffdced; border-color: #b86191; background: radial-gradient(155% 95% at 50% -10%, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0.08) 28%, rgba(255,255,255,0.02) 42%, rgba(255,255,255,0) 43%), linear-gradient(180deg, #8a2c58 0%, #6f2249 100%); }
|
||||
.segmented, .status-filter-tabs { background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0)), #38305f; border-color: #6a5fa6; }
|
||||
.segment { color: #e7e1fb; text-shadow: 0 -1px 0 rgba(0,0,0,0.20); }
|
||||
.segment.active, .pager .current { color: #2a153f; text-shadow: 0 1px 0 rgba(255,255,255,0.26); }
|
||||
@@ -4307,7 +4566,8 @@ html[data-theme="light"] .btn-primary {
|
||||
radial-gradient(155% 95% at 50% -10%, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.36) 28%, rgba(255,255,255,0.10) 42%, rgba(255,255,255,0) 43%),
|
||||
linear-gradient(180deg, #ffd9f5 0%, #e7c4ff 48%, #a7d8ff 100%);
|
||||
}
|
||||
html[data-theme="light"] .btn-danger {
|
||||
html[data-theme="light"] .btn-danger,
|
||||
html[data-theme="light"] .tool-btn-danger {
|
||||
color: #7a3555;
|
||||
border-color: #d3abc0;
|
||||
background:
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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 }}
|
||||
|
||||
@@ -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