ferdi2go/Pigmento
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Verlauf löschbar, Lösch-Bestätigung, HEX/RGB/HSL Tooltips

Browse Source 
- Verlauf: neuer Button 'Verlauf löschen' mit Bestätigungsdialog
- Löschen von Favoriten und Schemata erfordert jetzt Bestätigung
- HEX, RGB und HSL Labels in Picker- und Eingabe-Tab mit ℹ Tooltip

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Ferdinand
2026-04-02 15:27:08 +02:00
parent 20abe09590
commit ad04577ce2
2 changed files with 26 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
index.html
View File

@@ -30,15 +30,15 @@
<div id="picker-preview" class="color-preview"></div>
<div class="color-codes">
<div class="color-code-group">
<label for="picker-hex">Hex</label>
<label for="picker-hex">Hex <span class="harmony-info"><span class="harmony-info-icon">ℹ</span><span class="harmony-tooltip">Hexadezimale Farbnotation. Rot, Grün und Blau je als zweistellige Hex-Zahl (00–FF). Beispiel: #FF5733</span></span></label>
<input id="picker-hex" type="text" readonly>
</div>
<div class="color-code-group">
<label for="picker-rgb">RGB</label>
<label for="picker-rgb">RGB <span class="harmony-info"><span class="harmony-info-icon">ℹ</span><span class="harmony-tooltip">Rot, Grün, Blau – je 0 bis 255. Additive Mischung wie bei Bildschirmen. Beispiel: 255, 87, 51</span></span></label>
<input id="picker-rgb" type="text" readonly>
</div>
<div class="color-code-group">
<label for="picker-hsl">HSL</label>
<label for="picker-hsl">HSL <span class="harmony-info"><span class="harmony-info-icon">ℹ</span><span class="harmony-tooltip">Farbton (Hue, 0–360°), Sättigung (0–100%) und Helligkeit (Lightness, 0–100%). Intuitiver als RGB für Farbkorrekturen.</span></span></label>
<input id="picker-hsl" type="text" readonly>
</div>
</div>
@@ -53,15 +53,15 @@
<div id="eingabe-preview" class="color-preview" style="background:#3a8fc1"></div>
<div class="color-codes">
<div class="color-code-group">
<label for="eingabe-hex">Hex</label>
<label for="eingabe-hex">Hex <span class="harmony-info"><span class="harmony-info-icon">ℹ</span><span class="harmony-tooltip">Hexadezimale Farbnotation. Rot, Grün und Blau je als zweistellige Hex-Zahl (00–FF). Beispiel: #FF5733</span></span></label>
<input id="eingabe-hex" type="text" value="#3a8fc1" maxlength="7">
</div>
<div class="color-code-group">
<label for="eingabe-rgb">RGB</label>
<label for="eingabe-rgb">RGB <span class="harmony-info"><span class="harmony-info-icon">ℹ</span><span class="harmony-tooltip">Rot, Grün, Blau – je 0 bis 255. Additive Mischung wie bei Bildschirmen. Beispiel: 255, 87, 51</span></span></label>
<input id="eingabe-rgb" type="text" value="58, 143, 193">
</div>
<div class="color-code-group">
<label for="eingabe-hsl">HSL</label>
<label for="eingabe-hsl">HSL <span class="harmony-info"><span class="harmony-info-icon">ℹ</span><span class="harmony-tooltip">Farbton (Hue, 0–360°), Sättigung (0–100%) und Helligkeit (Lightness, 0–100%). Intuitiver als RGB für Farbkorrekturen.</span></span></label>
<input id="eingabe-hsl" type="text" value="204, 54%, 49%">
</div>
</div>

24
js/collection.js
View File

@@ -287,7 +287,10 @@ function renderSchemaCard(node, container, allSchemata, depth) {
delBtn.className = 'action-btn';
delBtn.textContent = 'Löschen';
delBtn.style.fontSize = '0.75rem';
delBtn.addEventListener('click', () => deleteSchema(node.name));
delBtn.addEventListener('click', () => {
if (!confirm('"' + node.name + '" wirklich löschen?')) return;
deleteSchema(node.name);
});
btnGroup.appendChild(editBtn);
btnGroup.appendChild(delBtn);
@@ -352,7 +355,10 @@ export function renderSammlung() {
del.className = 'action-btn';
del.textContent = 'Löschen';
del.style.fontSize = '0.7rem';
del.addEventListener('click', () => removeFavorit(hex));
del.addEventListener('click', () => {
if (!confirm('Favorit wirklich löschen?')) return;
removeFavorit(hex);
});
cell.appendChild(del);
favContainer.appendChild(cell);
});
@@ -369,9 +375,19 @@ export function renderSammlung() {
msg.textContent = 'Noch kein Verlauf.';
histContainer.appendChild(msg);
} else {
data.history.forEach(hsl => {
histContainer.appendChild(makeSwatch(hsl));
const clearBtn = document.createElement('button');
clearBtn.className = 'action-btn';
clearBtn.textContent = 'Verlauf löschen';
clearBtn.style.cssText = 'font-size:0.75rem;margin-bottom:0.75rem;display:block';
clearBtn.addEventListener('click', () => {
if (!confirm('Verlauf wirklich löschen?')) return;
const d = load();
d.history = [];
save(d);
renderSammlung();
});
histContainer.appendChild(clearBtn);
data.history.forEach(hsl => histContainer.appendChild(makeSwatch(hsl)));
}
}