theater/tendrils
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Style remove button to match port label bubble

Browse Source 
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Ian Gulliver
2026-02-02 11:42:26 -08:00
parent c264969016
commit bd829eb888
3 changed files with 22 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
static/js/components.js
View File

@@ -312,7 +312,7 @@ export function createNodeElement(node, switchConnection, nodeLocation, uplinkIn
if (!removeBtn) {
removeBtn = document.createElement('button');
removeBtn.className = 'remove-node-btn';
removeBtn.textContent = '×';
removeBtn.textContent = 'X';
removeBtn.title = 'Remove node';
removeBtn.addEventListener('click', (e) => {
e.stopPropagation();

2
static/js/table.js
View File

@@ -300,7 +300,7 @@ export function renderNetworkTable() {
html += '<td class="' + statusClass + '">' + r.status + '</td>';
html += '<td>';
if (r.removable) {
html += '<button class="remove-node-btn" data-node-id="' + escapeHtml(r.nodeId) + '" title="Remove node">×</button>';
html += '<button class="remove-node-btn" data-node-id="' + escapeHtml(r.nodeId) + '" title="Remove node">X</button>';
}
html += '</td>';
html += '</tr>';

23
static/style.css
View File

@@ -1056,7 +1056,8 @@ body.sacn-mode .node:not(.sacn-out):not(.sacn-in):hover .node-info-wrapper {
.node:has(.uplink-hover:hover) .node-info-wrapper,
.node:has(.dante-hover:hover) .node-info-wrapper,
.node:has(.artnet-hover:hover) .node-info-wrapper,
.node:has(.sacn-hover:hover) .node-info-wrapper {
.node:has(.sacn-hover:hover) .node-info-wrapper,
.node:has(.remove-node-btn:hover) .node-info-wrapper {
display: none;
}
@@ -1276,8 +1277,24 @@ body.sacn-mode .node:not(.sacn-out):not(.sacn-in):hover .node-info-wrapper {
.node .remove-node-btn {
position: absolute;
bottom: 2px;
right: 2px;
top: -8px;
right: -4px;
width: auto;
height: auto;
padding: 1px 6px;
font-size: 10px;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
background: #833;
border: none;
border-radius: 8px;
color: #fff;
}
.node .remove-node-btn:hover {
background: #a44;
}
.data-table .remove-node-btn {