AegisSight/AegisSight-Monitor
3
0
Fork 0
Code Issues Pull-Requests Actions Pakete Projekte Releases Wiki Aktivität

ui: Info-Icons auf Lucide SVG umgestellt und Tooltip-Styling aufgewertet

Quellcode durchsuchen 
- Text-i durch Lucide info SVG ersetzt (alle 6 Stellen)
- CSS-Kreis entfernt (SVG bringt eigenen mit)
- Hover-Farbe auf Accent-Gold statt Text-Secondary
- Tooltip: bg-elevated, font-body, shadow-lg, besseres Spacing
- Konsistent mit AegisSight Design-System (Navy/Gold)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Dieser Commit ist enthalten in:
Claude Dev
2026-03-16 22:38:39 +01:00
Ursprung e230248f61
Commit a365ef12a1
3 geänderte Dateien mit 83 neuen und 33 gelöschten Zeilen
Patch-Datei herunterladen Vergleichs-Datei herunterladen Alle Dateien ausklappen Alle Dateien einklappen

95
src/static/css/style.css
Datei anzeigen

@@ -4864,56 +4864,55 @@ a.map-popup-article:hover {
background: var(--bg-primary);
}
/* === Info-Icon Tooltips === */
/* === Info-Icon Tooltips (Lucide SVG) === */
.info-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 15px;
height: 15px;
border-radius: 50%;
border: 1px solid var(--text-disabled);
width: 16px;
height: 16px;
color: var(--text-disabled);
font-size: 10px;
font-weight: 400;
font-style: normal;
font-family: serif;
text-transform: none;
cursor: help;
margin-left: 5px;
margin-left: var(--sp-sm);
position: relative;
vertical-align: middle;
flex-shrink: 0;
transition: color 0.15s ease, border-color 0.15s ease;
transition: color 0.15s ease;
}
.info-icon svg {
width: 14px;
height: 14px;
stroke: currentColor;
stroke-width: 2;
}
.info-icon:hover {
color: var(--text-secondary);
border-color: var(--text-secondary);
color: var(--accent);
}
.info-icon::after {
content: attr(data-tooltip);
position: absolute;
bottom: calc(100% + 8px);
bottom: calc(100% + 10px);
left: 50%;
transform: translateX(-50%);
background: var(--bg-secondary);
background: var(--bg-elevated);
color: var(--text-primary);
font-family: inherit;
font-size: 12.5px;
font-family: var(--font-body);
font-size: 12px;
font-weight: 400;
padding: 10px 14px;
padding: var(--sp-lg) var(--sp-xl);
border-radius: var(--radius);
border: 1px solid var(--border);
white-space: pre-line;
width: max-content;
max-width: 280px;
line-height: 1.4;
max-width: 300px;
line-height: 1.55;
letter-spacing: 0.01em;
pointer-events: none;
opacity: 0;
visibility: hidden;
transition: opacity 0.15s ease, visibility 0.15s ease;
z-index: 100;
box-shadow: var(--shadow-md);
box-shadow: var(--shadow-lg);
}
.info-icon:hover::after {
opacity: 1;
@@ -4922,7 +4921,7 @@ a.map-popup-article:hover {
/* Tooltip nach unten wenn oben kein Platz (Klasse .tooltip-below) */
.info-icon.tooltip-below::after {
bottom: auto;
top: calc(100% + 8px);
top: calc(100% + 10px);
}
/* Chat UI-Highlight: Bedienelemente hervorheben */
@@ -5259,3 +5258,53 @@ body.tutorial-active .tutorial-cursor {
width: 100%;
display: block;
}
/* Tutorial Resume Dialog */
.tutorial-resume-overlay {
position: fixed;
inset: 0;
z-index: 100000;
background: rgba(0,0,0,0.6);
display: flex;
align-items: center;
justify-content: center;
backdrop-filter: blur(2px);
}
.tutorial-resume-dialog {
background: var(--bg-card);
color: var(--text-primary);
border: 2px solid var(--accent);
border-radius: var(--radius);
padding: 28px 32px;
max-width: 420px;
box-shadow: 0 8px 32px rgba(0,0,0,0.3);
text-align: center;
}
.tutorial-resume-dialog p {
margin: 0 0 20px;
font-size: 1rem;
line-height: 1.5;
}
.tutorial-resume-actions {
display: flex;
gap: 12px;
justify-content: center;
}
.tutorial-resume-actions .tutorial-btn {
border: 1px solid var(--accent);
transition: background 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.tutorial-resume-actions .tutorial-btn-next:hover {
background: var(--accent-hover);
box-shadow: 0 0 0 2px rgba(150, 121, 26, 0.25);
}
.tutorial-btn-secondary {
background: transparent;
color: var(--text-secondary);
border: 1px solid var(--accent);
}
.tutorial-btn-secondary:hover {
background: var(--bg-hover);
color: var(--text-primary);
box-shadow: 0 0 0 2px rgba(150, 121, 26, 0.25);
}

19
src/static/dashboard.html
Datei anzeigen

@@ -17,7 +17,7 @@
<link rel="stylesheet" href="/static/vendor/MarkerCluster.css">
<link rel="stylesheet" href="/static/vendor/MarkerCluster.Default.css">
<link rel="stylesheet" href="/static/css/network.css?v=20260316a">
<link rel="stylesheet" href="/static/css/style.css?v=20260316h">
<link rel="stylesheet" href="/static/css/style.css?v=20260316k">
</head>
<body>
<a href="#main-content" class="skip-link">Zum Hauptinhalt springen</a>
@@ -108,6 +108,7 @@
<div class="sidebar-sources-link">
<button class="btn btn-secondary btn-full btn-small" onclick="App.openSourceManagement()">Quellen verwalten</button>
<button class="btn btn-secondary btn-full btn-small sidebar-feedback-btn" onclick="App.openFeedback()">Feedback senden</button>
<button class="btn btn-secondary btn-full btn-small" onclick="Tutorial.start()" title="Interaktiven Rundgang starten">Rundgang starten</button>
<div class="sidebar-stats-mini">
<span id="stat-sources-count">0 Quellen</span> &middot; <span id="stat-articles-count">0 Artikel</span>
</div>
@@ -327,7 +328,7 @@
<div class="grid-stack-item-content">
<div class="card incident-analysis-factcheck" id="factcheck-card">
<div class="card-header">
<div class="card-title clickable" role="button" tabindex="0" onclick="openContentModal('Faktencheck', 'factcheck-list')">Faktencheck <span class="info-icon" data-tooltip="Gesichert/Bestätigt = durch mehrere unabhängige Quellen belegt.&#10;&#10;Unbestätigt/Ungeprüft = noch nicht ausreichend verifiziert.&#10;&#10;Widerlegt/Umstritten = Quellen widersprechen sich.">i</span></div>
<div class="card-title clickable" role="button" tabindex="0" onclick="openContentModal('Faktencheck', 'factcheck-list')">Faktencheck <span class="info-icon" data-tooltip="Gesichert/Bestätigt = durch mehrere unabhängige Quellen belegt.&#10;&#10;Unbestätigt/Ungeprüft = noch nicht ausreichend verifiziert.&#10;&#10;Widerlegt/Umstritten = Quellen widersprechen sich."><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg></span></div>
<div class="fc-filter-bar" id="fc-filters"></div>
</div>
<div class="factcheck-list" id="factcheck-list">
@@ -443,18 +444,18 @@
<label class="toggle-label">
<input type="checkbox" id="inc-international" checked>
<span class="toggle-switch"></span>
<span class="toggle-text">Internationale Quellen einbeziehen <span class="info-icon tooltip-below" data-tooltip="Aktiviert: Sucht auch in englischsprachigen und internationalen Medien.&#10;&#10;Deaktiviert: Nur deutschsprachige Quellen.">i</span></span>
<span class="toggle-text">Internationale Quellen einbeziehen <span class="info-icon tooltip-below" data-tooltip="Aktiviert: Sucht auch in englischsprachigen und internationalen Medien.&#10;&#10;Deaktiviert: Nur deutschsprachige Quellen."><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg></span></span>
</label>
</div>
<div class="toggle-group" style="margin-top: 8px;">
<label class="toggle-label">
<input type="checkbox" id="inc-telegram">
<span class="toggle-switch"></span>
<span class="toggle-text">Telegram-Kanäle einbeziehen <span class="info-icon tooltip-below" data-tooltip="Bezieht OSINT-relevante Telegram-Kanäle als zusätzliche Quelle ein. Kann die Aktualität erhöhen, aber auch unbestätigte Informationen liefern.">i</span></span>
<span class="toggle-text">Telegram-Kanäle einbeziehen <span class="info-icon tooltip-below" data-tooltip="Bezieht OSINT-relevante Telegram-Kanäle als zusätzliche Quelle ein. Kann die Aktualität erhöhen, aber auch unbestätigte Informationen liefern."><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg></span></span>
</label>
</div> </div>
<div class="form-group">
<label>Sichtbarkeit <span class="info-icon tooltip-below" data-tooltip="Öffentlich: Alle Nutzer der Organisation sehen diese Lage.&#10;&#10;Privat: Nur für dich sichtbar.">i</span></label>
<label>Sichtbarkeit <span class="info-icon tooltip-below" data-tooltip="Öffentlich: Alle Nutzer der Organisation sehen diese Lage.&#10;&#10;Privat: Nur für dich sichtbar."><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg></span></label>
<div class="toggle-group">
<label class="toggle-label">
<input type="checkbox" id="inc-visibility" checked>
@@ -483,7 +484,7 @@
</div>
</div>
<div class="form-group">
<label for="inc-retention">Aufbewahrung (Tage) <span class="info-icon tooltip-below" data-tooltip="Nach Ablauf wird die Lage automatisch archiviert. 0 = unbegrenzt aufbewahren.">i</span></label>
<label for="inc-retention">Aufbewahrung (Tage) <span class="info-icon tooltip-below" data-tooltip="Nach Ablauf wird die Lage automatisch archiviert. 0 = unbegrenzt aufbewahren."><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg></span></label>
<input type="number" id="inc-retention" min="0" max="999" value="30" placeholder="0 = Unbegrenzt">
</div>
<div class="form-group" style="margin-top: 8px;">
@@ -756,7 +757,7 @@
<script src="https://cdn.jsdelivr.net/npm/gridstack@12/dist/gridstack-all.js"></script>
<script src="/static/vendor/leaflet.js"></script>
<script src="/static/vendor/leaflet.markercluster.js"></script>
<script src="/static/js/api.js?v=20260316b"></script>
<script src="/static/js/api.js?v=20260316c"></script>
<script src="/static/js/ws.js?v=20260316b"></script>
<script src="/static/js/components.js?v=20260316d"></script>
<script src="/static/js/layout.js?v=20260316b"></script>
@@ -764,8 +765,8 @@
<script src="/static/js/api_network.js?v=20260316a"></script>
<script src="/static/js/network-graph.js?v=20260316a"></script>
<script src="/static/js/app_network.js?v=20260316a"></script>
<script src="/static/js/tutorial.js?v=20260316w"></script>
<script src="/static/js/chat.js?v=20260316f"></script>
<script src="/static/js/tutorial.js?v=20260316z"></script>
<script src="/static/js/chat.js?v=20260316i"></script>
<script>document.addEventListener("DOMContentLoaded",function(){Chat.init();Tutorial.init()});</script>
<!-- Map Fullscreen Overlay -->

2
src/static/js/components.js
Datei anzeigen

@@ -592,7 +592,7 @@ const UI = {
if (firstFeed.language) lines.push('Sprache: ' + firstFeed.language);
if (firstFeed.bias) lines.push('Ausrichtung: ' + firstFeed.bias);
const tooltipText = this.escape(lines.join('\n'));
infoButtonHtml = ` <span class="info-icon tooltip-below" data-tooltip="${tooltipText}">i</span>`;
infoButtonHtml = ` <span class="info-icon tooltip-below" data-tooltip="${tooltipText}"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg></span>`;
}
return `<div class="source-group">