iot/spore-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: harmonize add-label

Browse Source
This commit is contained in:
0x1d
2025-10-23 13:59:41 +02:00
parent ad268a7c13
commit 21f1029805
3 changed files with 44 additions and 134 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
public/scripts/components/FirmwareFormComponent.js
View File

@@ -150,7 +150,7 @@ class FirmwareFormComponent extends Component {
<div class="labels-section">
<div class="add-label-controls">
<input type="text" id="label-key" placeholder="Key" class="label-key-input">
<span class="label-separator">:</span>
<span class="label-separator">=</span>
<input type="text" id="label-value" placeholder="Value" class="label-value-input">
<button type="button" id="add-label-btn" class="add-label-btn">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14">

80
public/scripts/components/NodeDetailsComponent.js
View File

@@ -709,62 +709,47 @@ class NodeDetailsComponent extends Component {
const labels = nodeStatus?.labels || {};
const labelsArray = Object.entries(labels);
const labelsHTML = labelsArray.map(([key, value]) => `
<div class="label-item" data-key="${this.escapeHtml(key)}">
<div class="label-content">
<span class="label-key">${this.escapeHtml(key)}</span>
<span class="label-separator">=</span>
<span class="label-value">${this.escapeHtml(value)}</span>
</div>
<button class="label-remove-btn" data-key="${this.escapeHtml(key)}" title="Remove label">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16">
<path d="M18 6L6 18M6 6l12 12"/>
</svg>
</button>
</div>
`).join('');
let html = `
<div class="labels-section">
<div class="labels-header">
<h3>Node Labels</h3>
<p class="labels-description">Manage custom labels for this node. Labels help organize and identify nodes in your cluster.</p>
</div>
<div class="labels-list">
`;
if (labelsArray.length === 0) {
html += `
<div class="no-labels">
<div>No labels configured</div>
<div style="font-size: 0.9rem; margin-top: 0.5rem; opacity: 0.7;">Add labels to organize and identify this node</div>
</div>
`;
} else {
labelsArray.forEach(([key, value]) => {
html += `
<div class="label-item" data-key="${this.escapeHtml(key)}">
<div class="label-content">
<span class="label-key">${this.escapeHtml(key)}</span>
<span class="label-separator">=</span>
<span class="label-value">${this.escapeHtml(value)}</span>
</div>
<button class="label-remove-btn" data-key="${this.escapeHtml(key)}" title="Remove label">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16">
<path d="M18 6L6 18M6 6l12 12"/>
</svg>
</button>
</div>
`;
});
}
html += `
<div class="add-label-controls">
<input type="text" id="label-key" placeholder="Key" class="label-key-input" maxlength="50">
<span class="label-separator">=</span>
<input type="text" id="label-value" placeholder="Value" class="label-value-input" maxlength="100">
<button class="add-label-btn" type="button">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14">
<line x1="12" y1="5" x2="12" y2="19"/>
<line x1="5" y1="12" x2="19" y2="12"/>
</svg>
Add Label
</button>
</div>
<div class="add-label-section">
<div class="add-label-form">
<div class="form-group">
<label for="label-key">Key:</label>
<input type="text" id="label-key" placeholder="e.g., environment" maxlength="50">
<div class="labels-list">
${labelsArray.length === 0 ? `
<div class="no-labels">
<div>No labels configured</div>
<div style="font-size: 0.9rem; margin-top: 0.5rem; opacity: 0.7;">Add labels to organize and identify this node</div>
</div>
<div class="form-group">
<label for="label-value">Value:</label>
<input type="text" id="label-value" placeholder="e.g., production" maxlength="100">
</div>
<button class="add-label-btn" type="button">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16">
<path d="M12 5v14M5 12h14"/>
</svg>
Add Label
</button>
</div>
` : labelsHTML}
</div>
<div class="labels-actions">
@@ -1004,7 +989,6 @@ class NodeDetailsComponent extends Component {
const summaryHTML = summary ? `
<div class="tasks-summary">
<div class="tasks-summary-left">
<div class="summary-icon">${window.icon('file', { width: 16, height: 16 })}</div>
<div>
<div class="summary-title">Tasks Overview</div>
<div class="summary-subtitle">System task management and monitoring</div>

96
public/styles/main.css
View File

@@ -6805,7 +6805,13 @@ html {
margin: 0;
}
/* Node labels section - add-label-controls positioned at top */
.labels-section .add-label-controls {
margin-bottom: 1rem;
}
.labels-list {
display: block;
margin-bottom: 1.5rem;
}
@@ -6886,88 +6892,8 @@ html {
stroke-width: 2;
}
.add-label-section {
margin-bottom: 1.5rem;
}
.add-label-form {
display: flex;
align-items: end;
gap: 0.5rem;
padding: 0.75rem;
background: var(--bg-tertiary);
border: 1px solid var(--border-primary);
border-radius: 8px;
}
.add-label-form .form-group {
display: flex;
flex-direction: column;
gap: 0.25rem;
flex: 1;
min-width: 120px;
}
.add-label-form .form-group label {
font-size: 0.85rem;
font-weight: 500;
color: var(--text-secondary);
}
.add-label-form .form-group input {
background: var(--bg-secondary);
border: 1px solid var(--border-secondary);
border-radius: 6px;
padding: 0.5rem 0.75rem;
color: var(--text-primary);
font-size: 0.9rem;
transition: all 0.2s ease;
}
.add-label-form .form-group input:focus {
outline: none;
border-color: #60a5fa;
box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.2);
}
.add-label-form .form-group input::placeholder {
color: var(--text-tertiary);
}
.add-label-form .add-label-btn {
background: rgba(255, 255, 255, 0.1);
border: 1px solid var(--border-secondary);
color: var(--text-secondary);
border-radius: 8px;
padding: 0.5rem 1rem;
cursor: pointer;
font-size: 0.9rem;
font-weight: 500;
display: flex;
align-items: center;
gap: 0.5rem;
transition: all 0.2s ease;
height: fit-content;
margin-bottom: 1rem;
}
.add-label-form .add-label-btn:hover:not(:disabled) {
background: rgba(255, 255, 255, 0.15);
border-color: rgba(255, 255, 255, 0.25);
color: var(--text-primary);
}
.add-label-form .add-label-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.add-label-form .add-label-btn svg {
width: 16px;
height: 16px;
stroke: currentColor;
stroke-width: 2;
}
/* Old add-label-section and add-label-form styles removed - now using add-label-controls */
/* Node labels use the same compact add-label-controls as firmware form */
/* Add label button and save labels button inherit from base button styles */
.add-label-btn {
@@ -7040,13 +6966,13 @@ html {
/* Responsive adjustments for labels editor */
@media (max-width: 768px) {
.add-label-form {
.add-label-controls {
flex-direction: column;
align-items: stretch;
}
.form-group {
min-width: unset;
.add-label-controls .label-separator {
display: none;
}
.labels-actions {