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

feat: Erklärungen als Hover-Tooltip bei Harmonietypen

Browse Source
This commit is contained in:
Ferdinand
2026-04-02 13:55:43 +02:00
parent 184f3ec0c2
commit cc4d612b33
2 changed files with 58 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
js/harmonien.js
View File

@@ -1,13 +1,39 @@
import { getHarmonies, hslToHex } from './converter.js';
import { state } from './app.js';
const DESCRIPTIONS = {
'Komplementär': 'Die Farbe gegenüber auf dem Farbrad (180°). Starker Kontrast — gut für Akzente.',
'Analog': 'Zwei Nachbarfarben (±30°). Wirkt harmonisch und ruhig — gut für Hintergründe.',
'Triade': 'Drei gleichmäßig verteilte Farben (120° Abstand). Lebendig, aber ausgewogen.',
'Split-Komplementär': 'Die zwei Farben neben der Komplementärfarbe (150°/210°). Weniger Spannung als Komplementär, mehr Vielfalt.',
};
function renderHarmony(label, colors, onSaveFavorit, onSaveSchema) {
const row = document.createElement('div');
row.className = 'harmony-row';
const headerRow = document.createElement('div');
headerRow.className = 'harmony-header';
const heading = document.createElement('h3');
heading.textContent = label;
row.appendChild(heading);
const infoWrap = document.createElement('span');
infoWrap.className = 'harmony-info';
const infoIcon = document.createElement('span');
infoIcon.className = 'harmony-info-icon';
infoIcon.textContent = 'ℹ';
const tooltip = document.createElement('span');
tooltip.className = 'harmony-tooltip';
tooltip.textContent = DESCRIPTIONS[label] || '';
infoWrap.appendChild(infoIcon);
infoWrap.appendChild(tooltip);
headerRow.appendChild(heading);
headerRow.appendChild(infoWrap);
row.appendChild(headerRow);
const swatchesDiv = document.createElement('div');
swatchesDiv.className = 'harmony-swatches';

32
style.css
View File

@@ -107,8 +107,38 @@ button.action-btn:hover { background: #f0f0f0; }
/* --- Harmonien-Tab --- */
.subtitle { font-size: 0.85rem; color: #666; margin-bottom: 0.5rem; }
.harmony-row h3 { font-size: 0.9rem; margin-bottom: 0.5rem; }
.harmony-header { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.5rem; }
.harmony-row h3 { font-size: 0.9rem; margin-bottom: 0; }
.harmony-swatches { display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: flex-start; }
.harmony-info { position: relative; display: inline-flex; align-items: center; }
.harmony-info-icon {
font-size: 0.75rem;
color: #aaa;
cursor: default;
user-select: none;
line-height: 1;
}
.harmony-tooltip {
display: none;
position: absolute;
left: 1.4rem;
top: 50%;
transform: translateY(-50%);
background: #333;
color: #fff;
font-size: 0.78rem;
padding: 0.4rem 0.65rem;
border-radius: 6px;
white-space: nowrap;
z-index: 100;
pointer-events: none;
max-width: 320px;
white-space: normal;
width: max-content;
max-width: 280px;
}
.harmony-info:hover .harmony-tooltip { display: block; }
.harmony-swatch {
display: flex;
flex-direction: column;