Webstar/LibrePortal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ux(tools): play icon on the Run button

Browse Source 
Each tool row's Run button gains a small play-triangle SVG to the left
of the label, matching the iconography pattern the Services tab uses
for its Restart and Open buttons. Same green colour (currentColor), so
the icon inherits the success/destructive variants without extra CSS.

Button becomes a flex container with a 6px gap so icon + label stay
nicely centred regardless of label width.

Signed-off-by: librelad <librelad@digitalangels.vip>
This commit is contained in:
librelad 2026-05-28 01:30:46 +01:00
parent 017a521065
commit adf79db9e2
2 changed files with 10 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
containers/libreportal/frontend/css/tools.css
View File

@ -184,6 +184,10 @@
but bigger and green. The delete button uses bootstrap red var(--status-danger);
we use bootstrap green var(--status-success) for parity. */
.tool-run-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
background: rgba(var(--status-success-rgb), 0.12);
border: 1px solid rgba(var(--status-success-rgb), 0.3);
color: var(--status-success);
@ -196,6 +200,8 @@
cursor: pointer;
transition: all 0.2s ease;
}
.tool-run-btn-icon { flex-shrink: 0; }
.tool-run-btn-label { display: inline-block; }
.tool-run-btn:hover {
background: rgba(var(--status-success-rgb), 0.22);

5
containers/libreportal/frontend/js/components/app/tools-manager.js
View File

@ -377,7 +377,10 @@ class ToolsManager {
</div>
<div class="tool-action">
<button class="${btnClass}" data-action="run" title="${escapeHtml(tool.label || tool.id)}">
Run
<svg class="tool-run-btn-icon" width="12" height="12" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
<polygon points="6,4 20,12 6,20"></polygon>
</svg>
<span class="tool-run-btn-label">Run</span>
</button>
</div>
</div>`;