Replace emoji icons with local SVG files for consistent rendering

- Created 10 SVG icon files in app/static/icons/ (Feather Icons style) - Updated base.html with SVG icons in navigation and dark mode toggle - Updated dashboard.html with icons in stats cards and quick actions - Updated content_list_new.html (playlist management) with SVG icons - Updated upload_media.html with upload-related icons - Updated manage_player.html with player management icons - Icons use currentColor for automatic theme adaptation - Removed emoji dependency for better Raspberry Pi compatibility - Added ICON_INTEGRATION.md documentation
2025-11-13 21:00:07 +02:00
parent e5a00d19a5
commit 498c03ef00
37 changed files with 4240 additions and 840 deletions
--- a/ICON_INTEGRATION.md
+++ b/ICON_INTEGRATION.md
@@ -0,0 +1,138 @@
+# SVG Icon Integration
+
+## Overview
+Replaced all emoji icons with local SVG files to ensure consistent rendering across all systems, particularly on Raspberry Pi devices where emoji fonts may not be available.
+
+## Icon Files Created
+Location: `/app/static/icons/`
+
+1. **moon.svg** - Dark mode toggle (off state)
+2. **sun.svg** - Dark mode toggle (on state)
+3. **home.svg** - Dashboard/home navigation
+4. **monitor.svg** - Players/screens
+5. **playlist.svg** - Playlist management
+6. **edit.svg** - Edit actions
+7. **trash.svg** - Delete actions
+8. **upload.svg** - Upload/media files
+9. **info.svg** - Information/details
+10. **warning.svg** - Warnings/alerts
+
+## Icon Specifications
+- **Size**: 24x24 viewBox (scalable)
+- **Style**: Feather Icons design (minimal, stroke-based)
+- **Color**: Uses `currentColor` for automatic theme adaptation
+- **Stroke**: 2px width, round line caps and joins
+- **Format**: Clean SVG with no fills (stroke-only for consistency)
+
+## Templates Updated
+
+### 1. base.html (Navigation & Dark Mode)
+- Header logo: monitor.svg
+- Dashboard link: home.svg
+- Players link: monitor.svg
+- Playlists link: playlist.svg
+- Dark mode toggle: moon.svg ↔ sun.svg (dynamic)
+
+**CSS Changes:**
+- Added icon support to nav links with `display: flex`
+- Icons use `filter: brightness(0) invert(1)` for white color on dark header
+- Dark mode toggle icon changes via JavaScript using `src` attribute
+
+### 2. dashboard.html (Stats Cards & Quick Actions)
+- Players card: monitor.svg
+- Playlists card: playlist.svg
+- Media Library card: upload.svg
+- Storage card: info.svg
+- Quick Actions buttons: monitor.svg, playlist.svg, upload.svg
+- Workflow Guide header: info.svg
+
+### 3. content_list_new.html (Playlist Management)
+- Page header: playlist.svg
+- Playlists card header: playlist.svg
+- Delete button: trash.svg
+- Empty state: playlist.svg (64px, opacity 0.3)
+- Upload Media card header: upload.svg
+- Upload icon (large): upload.svg (96px, opacity 0.5)
+- Go to Upload button: upload.svg
+- Media library icons: info.svg (images), monitor.svg (videos)
+- Player Assignments header: monitor.svg
+
+### 4. upload_media.html (Upload Page)
+- Page header: upload.svg
+- Back button: playlist.svg
+- Select Files card: upload.svg
+- Drag-drop zone: upload.svg (96px, opacity 0.3)
+- Browse button: upload.svg
+- Upload Settings header: info.svg
+- Upload button: upload.svg
+
+### 5. manage_player.html (Player Management)
+- Page header: monitor.svg
+- Back button: monitor.svg
+- Status icons: info.svg (online), warning.svg (offline)
+- Edit Credentials card: edit.svg
+- Save button: edit.svg
+- Assign Playlist card: playlist.svg
+- Warning alert: warning.svg
+- Assign button: playlist.svg
+- Create Playlist button: playlist.svg
+- Edit Playlist button: edit.svg
+- Player Logs card: info.svg
+
+## Usage Pattern
+```html
+<!-- Standard icon in heading -->
+<h2 style="display: flex; align-items: center; gap: 0.5rem;">
+    <img src="{{ url_for('static', filename='icons/playlist.svg') }}" alt="" style="width: 24px; height: 24px;">
+    Playlists
+</h2>
+
+<!-- Icon in button (white on colored background) -->
+<button class="btn btn-success" style="display: flex; align-items: center; gap: 0.5rem;">
+    <img src="{{ url_for('static', filename='icons/upload.svg') }}" alt="" style="width: 18px; height: 18px; filter: brightness(0) invert(1);">
+    Upload Files
+</button>
+
+<!-- Large decorative icon -->
+<img src="{{ url_for('static', filename='icons/upload.svg') }}" alt="" style="width: 96px; height: 96px; opacity: 0.3;">
+```
+
+## Benefits
+1. **Reliability**: Icons always render correctly, no dependency on system fonts
+2. **Scalability**: SVG format scales cleanly to any size
+3. **Themeable**: `currentColor` allows icons to inherit text color
+4. **Performance**: Small file sizes (< 1KB each)
+5. **Consistency**: Uniform design language across entire application
+6. **Accessibility**: Clean, recognizable icons work well in both light and dark modes
+
+## Browser Compatibility
+- All modern browsers support inline SVG
+- No JavaScript required (except dark mode toggle)
+- Works on Raspberry Pi browsers (Chromium, Firefox)
+- Filter properties supported in all target browsers
+
+## Dark Mode Integration
+The dark mode toggle now uses SVG icons instead of emoji:
+- Moon icon (🌙) → moon.svg
+- Sun icon (☀️) → sun.svg
+- Icons change dynamically via JavaScript when theme is toggled
+- White color achieved via CSS filter on dark header background
+
+## Future Icon Needs
+If additional icons are needed, follow this pattern:
+1. Use Feather Icons style (https://feathericons.com/)
+2. 24x24 viewBox, stroke-width="2"
+3. Use `stroke="currentColor"` for theme compatibility
+4. Save to `/app/static/icons/`
+5. Reference via `{{ url_for('static', filename='icons/name.svg') }}`
+
+## Testing Checklist
+- [x] Header navigation icons display correctly
+- [x] Dark mode toggle icons switch properly
+- [x] Dashboard card icons visible
+- [x] Playlist management icons render
+- [x] Upload page icons functional
+- [x] Player management icons working
+- [ ] Test on actual Raspberry Pi device
+- [ ] Verify icon visibility in both light/dark modes
+- [ ] Check icon alignment across different screen sizes