UI-Redesign: AegisSight Design, Filter-Popover, Header-Umbau
- Session-Timeout auf 60 Minuten erhöht (ACCESS_TOKEN_EXPIRY + SESSION_TIMEOUT) - AegisSight Light Theme: Gold-Akzent (#C8A851) statt Indigo - Navigation-Tabs in eigene Zeile unter Header verschoben (HTML-Struktur) - Filter-Bar durch kompaktes Popover mit Checkboxen ersetzt (Mehrfachauswahl) - Archiv-Funktion repariert (lädt jetzt per API statt leerem Store) - Filter-Bugs behoben: Reset-Button ID, Default-Werte, Ohne-Datum-Filter - Mehrspalten-Layout Feature entfernt - Online-Status vom Header an User-Avatar verschoben (grüner Punkt) - Lupen-Icon entfernt - CLAUDE.md: Docker-Deploy und CSS-Tricks Regeln aktualisiert Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Dieser Commit ist enthalten in:
Server Deploy
@@ -38,6 +38,7 @@
|
||||
<link rel="stylesheet" href="css/knowledge.css">
|
||||
<link rel="stylesheet" href="css/reminders.css">
|
||||
<link rel="stylesheet" href="css/contacts.css">
|
||||
<link rel="stylesheet" href="css/contacts-modern.css">
|
||||
<link rel="stylesheet" href="css/responsive.css">
|
||||
<link rel="stylesheet" href="css/mobile.css">
|
||||
<link rel="stylesheet" href="css/pwa.css">
|
||||
@@ -182,77 +183,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="header-center">
|
||||
<!-- View Tabs -->
|
||||
<nav class="view-tabs">
|
||||
<button class="view-tab active" data-view="board">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<rect x="3" y="3" width="7" height="7" rx="1"/>
|
||||
<rect x="14" y="3" width="7" height="7" rx="1"/>
|
||||
<rect x="3" y="14" width="7" height="7" rx="1"/>
|
||||
<rect x="14" y="14" width="7" height="7" rx="1"/>
|
||||
</svg>
|
||||
Board
|
||||
</button>
|
||||
<button class="view-tab" data-view="list">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<line x1="8" y1="6" x2="21" y2="6"/>
|
||||
<line x1="8" y1="12" x2="21" y2="12"/>
|
||||
<line x1="8" y1="18" x2="21" y2="18"/>
|
||||
<circle cx="3.5" cy="6" r="1" fill="currentColor"/>
|
||||
<circle cx="3.5" cy="12" r="1" fill="currentColor"/>
|
||||
<circle cx="3.5" cy="18" r="1" fill="currentColor"/>
|
||||
</svg>
|
||||
Liste
|
||||
</button>
|
||||
<button class="view-tab" data-view="calendar">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<rect x="3" y="4" width="18" height="18" rx="2"/>
|
||||
<line x1="16" y1="2" x2="16" y2="6"/>
|
||||
<line x1="8" y1="2" x2="8" y2="6"/>
|
||||
<line x1="3" y1="10" x2="21" y2="10"/>
|
||||
<circle cx="12" cy="16" r="1" fill="currentColor"/>
|
||||
</svg>
|
||||
Kalender
|
||||
</button>
|
||||
<button class="view-tab" data-view="proposals">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M9 11l3 3L22 4"/>
|
||||
<path d="M21 12v7a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012-2h11"/>
|
||||
</svg>
|
||||
Genehmigung
|
||||
</button>
|
||||
<button class="view-tab" data-view="coding">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<polyline points="16 18 22 12 16 6"/>
|
||||
<polyline points="8 6 2 12 8 18"/>
|
||||
<line x1="12" y1="20" x2="12" y2="4" transform="rotate(-15 12 12)"/>
|
||||
</svg>
|
||||
Coding
|
||||
</button>
|
||||
<button class="view-tab" data-view="knowledge">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/>
|
||||
<path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/>
|
||||
</svg>
|
||||
Wissen
|
||||
</button>
|
||||
<button class="view-tab" data-view="contacts">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
|
||||
<circle cx="9" cy="7" r="4"/>
|
||||
<path d="M23 21v-2a4 4 0 0 0-3-3.87"/>
|
||||
<path d="M16 3.13a4 4 0 0 1 0 7.75"/>
|
||||
</svg>
|
||||
Kontakte
|
||||
</button>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<div class="header-right">
|
||||
<!-- Search -->
|
||||
<div class="search-container">
|
||||
<svg class="search-icon" viewBox="0 0 24 24"><circle cx="11" cy="11" r="8" stroke="currentColor" stroke-width="2" fill="none"/><path d="m21 21-4.35-4.35" stroke="currentColor" stroke-width="2"/></svg>
|
||||
<input type="text" id="search-input" class="search-input" placeholder="Suchen...">
|
||||
<button type="button" id="search-clear" class="search-clear hidden" title="Suche zurücksetzen (Esc)">
|
||||
<svg viewBox="0 0 24 24" width="16" height="16"><path d="M18 6L6 18M6 6l12 12" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
|
||||
@@ -260,12 +193,6 @@
|
||||
<div id="search-spinner" class="search-spinner hidden"></div>
|
||||
</div>
|
||||
|
||||
<!-- Connection Status -->
|
||||
<div id="connection-status" class="connection-status online" title="Verbunden">
|
||||
<span class="status-dot"></span>
|
||||
<span class="status-text">Online</span>
|
||||
</div>
|
||||
|
||||
<!-- Notification Bell -->
|
||||
<div class="notification-bell" id="notification-bell">
|
||||
<button id="notification-btn" class="btn btn-icon" title="Benachrichtigungen">
|
||||
@@ -321,6 +248,135 @@
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<nav class="view-tabs-bar">
|
||||
<nav class="view-tabs">
|
||||
<button class="view-tab active" data-view="board">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<rect x="3" y="3" width="7" height="7" rx="1"/>
|
||||
<rect x="14" y="3" width="7" height="7" rx="1"/>
|
||||
<rect x="3" y="14" width="7" height="7" rx="1"/>
|
||||
<rect x="14" y="14" width="7" height="7" rx="1"/>
|
||||
</svg>
|
||||
Board
|
||||
</button>
|
||||
<button class="view-tab" data-view="list">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<line x1="8" y1="6" x2="21" y2="6"/>
|
||||
<line x1="8" y1="12" x2="21" y2="12"/>
|
||||
<line x1="8" y1="18" x2="21" y2="18"/>
|
||||
<circle cx="3.5" cy="6" r="1" fill="currentColor"/>
|
||||
<circle cx="3.5" cy="12" r="1" fill="currentColor"/>
|
||||
<circle cx="3.5" cy="18" r="1" fill="currentColor"/>
|
||||
</svg>
|
||||
Liste
|
||||
</button>
|
||||
<button class="view-tab" data-view="calendar">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<rect x="3" y="4" width="18" height="18" rx="2"/>
|
||||
<line x1="16" y1="2" x2="16" y2="6"/>
|
||||
<line x1="8" y1="2" x2="8" y2="6"/>
|
||||
<line x1="3" y1="10" x2="21" y2="10"/>
|
||||
<circle cx="12" cy="16" r="1" fill="currentColor"/>
|
||||
</svg>
|
||||
Kalender
|
||||
</button>
|
||||
<button class="view-tab" data-view="proposals">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M9 11l3 3L22 4"/>
|
||||
<path d="M21 12v7a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012-2h11"/>
|
||||
</svg>
|
||||
Genehmigung
|
||||
</button>
|
||||
<button class="view-tab" data-view="coding">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<polyline points="16 18 22 12 16 6"/>
|
||||
<polyline points="8 6 2 12 8 18"/>
|
||||
<line x1="12" y1="20" x2="12" y2="4" transform="rotate(-15 12 12)"/>
|
||||
</svg>
|
||||
Coding
|
||||
</button>
|
||||
<button class="view-tab" data-view="knowledge">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/>
|
||||
<path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/>
|
||||
</svg>
|
||||
Wissen
|
||||
</button>
|
||||
<button class="view-tab" data-view="contacts">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
|
||||
<circle cx="9" cy="7" r="4"/>
|
||||
<path d="M23 21v-2a4 4 0 0 0-3-3.87"/>
|
||||
<path d="M16 3.13a4 4 0 0 1 0 7.75"/>
|
||||
</svg>
|
||||
Kontakte
|
||||
</button>
|
||||
</nav>
|
||||
<div class="filter-bar-actions">
|
||||
<button id="btn-filter-toggle" class="btn btn-outline filter-toggle-btn">
|
||||
<svg class="icon" viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"></polygon></svg>
|
||||
<span>Filter</span>
|
||||
</button>
|
||||
<button id="btn-show-archived" class="btn btn-outline filter-toggle-btn">
|
||||
<svg class="icon" viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="20" height="5" rx="1"></rect><path d="M4 8v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8"></path><path d="M10 12h4"></path></svg>
|
||||
<span>Archiv</span>
|
||||
</button>
|
||||
</div>
|
||||
<div id="filter-popover" class="filter-popover hidden">
|
||||
<div class="filter-popover-content">
|
||||
<div class="filter-popover-row">
|
||||
<label>Bearbeiter</label>
|
||||
<div id="filter-assignee-list" class="filter-checkbox-list"></div>
|
||||
</div>
|
||||
<div class="filter-popover-row">
|
||||
<label>Prioritaet</label>
|
||||
<div id="filter-priority-list" class="filter-checkbox-list">
|
||||
<label class="filter-checkbox-item">
|
||||
<input type="checkbox" name="filter-priority" value="high">
|
||||
<span>Hoch</span>
|
||||
</label>
|
||||
<label class="filter-checkbox-item">
|
||||
<input type="checkbox" name="filter-priority" value="medium">
|
||||
<span>Mittel</span>
|
||||
</label>
|
||||
<label class="filter-checkbox-item">
|
||||
<input type="checkbox" name="filter-priority" value="low">
|
||||
<span>Niedrig</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="filter-popover-row">
|
||||
<label>Labels</label>
|
||||
<div id="filter-labels-list" class="filter-checkbox-list"></div>
|
||||
</div>
|
||||
<div class="filter-popover-row">
|
||||
<label>Faelligkeit</label>
|
||||
<div id="filter-due-list" class="filter-checkbox-list">
|
||||
<label class="filter-checkbox-item">
|
||||
<input type="checkbox" name="filter-due" value="overdue">
|
||||
<span>Ueberfaellig</span>
|
||||
</label>
|
||||
<label class="filter-checkbox-item">
|
||||
<input type="checkbox" name="filter-due" value="today">
|
||||
<span>Heute</span>
|
||||
</label>
|
||||
<label class="filter-checkbox-item">
|
||||
<input type="checkbox" name="filter-due" value="week">
|
||||
<span>Diese Woche</span>
|
||||
</label>
|
||||
<label class="filter-checkbox-item">
|
||||
<input type="checkbox" name="filter-due" value="none">
|
||||
<span>Ohne Datum</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="filter-popover-footer">
|
||||
<button id="btn-clear-filters" class="btn btn-text">Filter zurücksetzen</button>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Offline Banner -->
|
||||
<div id="offline-banner" class="offline-banner hidden">
|
||||
<svg class="icon" viewBox="0 0 24 24"><path d="M1 1l22 22M16.72 11.06A10.94 10.94 0 0 1 19 12.55M5 12.55a10.94 10.94 0 0 1 5.17-2.39M10.71 5.05A16 16 0 0 1 22.58 9M1.42 9a15.91 15.91 0 0 1 4.7-2.88M8.53 16.11a6 6 0 0 1 6.95 0M12 20h.01" stroke="currentColor" stroke-width="2" fill="none"/></svg>
|
||||
@@ -332,43 +388,8 @@
|
||||
|
||||
<!-- Board View -->
|
||||
<div id="view-board" class="view view-board active">
|
||||
<!-- Filter Bar -->
|
||||
<div class="filter-bar">
|
||||
<div class="filter-group">
|
||||
<label>Filter:</label>
|
||||
<select id="filter-assignee" class="filter-select">
|
||||
<option value="">Alle Benutzer</option>
|
||||
</select>
|
||||
<select id="filter-priority" class="filter-select">
|
||||
<option value="">Alle Prioritäten</option>
|
||||
<option value="high">Hoch</option>
|
||||
<option value="medium">Mittel</option>
|
||||
<option value="low">Niedrig</option>
|
||||
</select>
|
||||
<select id="filter-labels" class="filter-select">
|
||||
<option value="">Alle Labels</option>
|
||||
</select>
|
||||
<select id="filter-due" class="filter-select">
|
||||
<option value="">Alle Fälligkeiten</option>
|
||||
<option value="overdue">Überfällig</option>
|
||||
<option value="today">Heute</option>
|
||||
<option value="week">Diese Woche</option>
|
||||
<option value="none">Ohne Datum</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-actions">
|
||||
<button id="btn-toggle-layout" class="btn btn-icon" title="Layout umschalten">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<rect x="3" y="3" width="7" height="7"/>
|
||||
<rect x="14" y="3" width="7" height="7"/>
|
||||
<rect x="3" y="14" width="7" height="7"/>
|
||||
<rect x="14" y="14" width="7" height="7"/>
|
||||
</svg>
|
||||
</button>
|
||||
<button id="btn-clear-filters" class="btn btn-text">Filter zurücksetzen</button>
|
||||
<button id="btn-show-archived" class="btn btn-text">Archiv anzeigen</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- Week Strip Calendar -->
|
||||
<div id="week-strip" class="week-strip">
|
||||
@@ -1051,6 +1072,26 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Column Select Modal -->
|
||||
<div id="column-select-modal" class="modal modal-small hidden">
|
||||
<div class="modal-header">
|
||||
<h2>Spalte auswählen</h2>
|
||||
<button class="modal-close" data-close-modal>×</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p id="column-select-message"></p>
|
||||
<div class="form-group" style="margin-top: 1rem;">
|
||||
<select id="column-select-dropdown" class="form-control">
|
||||
<!-- Spalten werden dynamisch eingefügt -->
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" id="column-select-cancel" class="btn btn-secondary">Abbrechen</button>
|
||||
<button type="button" id="column-select-ok" class="btn btn-primary">Wiederherstellen</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Archive Modal -->
|
||||
<div id="archive-modal" class="modal modal-large hidden">
|
||||
<div class="modal-header">
|
||||
@@ -2093,6 +2134,9 @@
|
||||
|
||||
<!-- Socket.io Client -->
|
||||
<script src="/socket.io/socket.io.js"></script>
|
||||
|
||||
<!-- Auth Fix -->
|
||||
<script src="js/auth-fix.js"></script>
|
||||
|
||||
<!-- Main App (ES Module) -->
|
||||
<script type="module" src="js/app.js"></script>
|
||||
|
||||
In neuem Issue referenzieren
Einen Benutzer sperren