mirror of
https://github.com/cassandra/home-information.git
synced 2026-04-18 13:40:25 -04:00
3d1e7f0cd3
* Implement inline SVG icon system with template tags - Add dedicated icons.py template tag with validation and accessibility - Create 10 SVG icon templates for common UI elements - Add comprehensive CSS classes integrated with existing variables - Replace HTML entities in alert banner and attribute form - Support semantic colors, multiple sizes, and accessibility attributes - Fully self-contained with no external dependencies * Fix linting issues in icons.py template tag * Complete icon standardization across all templates and JS files - Replace all HTML entities (+, ▲, ▼, 📷, ▶, ⏱) with standardized SVG icons - Replace all emojis in templates (🦊, 🎯, 🧭, 🔒, 🛡️, 💡, 📹) with proper icons or text - Replace emoji debug prefixes in JS with consistent [AUDIO] text prefixes - Add {% load icons %} to all modified templates following Django conventions - Maintain accessibility with proper aria-label attributes throughout - All templates now use consistent icon system with semantic sizing and colors * Fix missing icons template tag in event history modal Resolves template rendering errors in event history views by adding missing {% load icons %} directive to event_history.html modal template. This completes the icon standardization refactor (Issue #119) ensuring all templates properly load the icons template tag before using {% icon %}. * Add icon usage guidelines to templates documentation Documents when and how to use the standardized icon system, including requirements and basic example usage. * Improve pagination template styling and icons Replace HTML entities in pagination with standardized SVG icons and apply app primary color theming. Creates consistent button heights and responsive icon/text layout. Changes: - Add chevron-left, chevron-right, chevron-double-left, chevron-double-right icons - Update pagination template to use {% icon %} tags instead of HTML entities - Add pagination CSS overrides using app primary color variables - Fix responsive layout to show single icon per button with conditional text - Ensure consistent 24x24 viewBox and template structure for all chevron icons * Add UX-focused icon usage guidelines to templates documentation Establishes clear principles for when to use icons based on action types rather than object specificity. Emphasizes consistency and accessibility while providing practical examples for common use cases. * Add essential icons and implement high-impact UX improvements Phase 3: Add missing essential icons (edit, delete, save, cancel, close) Phase 4: Implement critical UX improvements: - Modal close buttons now use semantic close icon (icon-only) - Primary action buttons (ADD NEW RULE, EDIT) include appropriate icons - Table delete buttons use semantic delete icon (icon-only for space) - Modal cancel buttons include cancel icon - Modal submit buttons include action-specific icons Follows established UX principle: action type determines icon, with icon-only for space-constrained areas (modals, tables). * Complete UX-focused icon improvements with comprehensive documentation Phase 5: Finalize implementation and documentation - Complete modal form icon improvements (edit forms now use save icon) - Update Templates.md with comprehensive examples showing icon usage patterns - Document icon-only vs icon+text usage patterns with clear examples - Reference authoritative source for available icons list All 1,617 tests passing. UX-focused icon rationalization complete. * Add icons to remaining action buttons following UX guidelines - Add upload icon for file upload actions - Add icons to all ADD, CREATE, UPDATE buttons - Add icons to DELETE actions for consistency - Skip icons for acknowledgment buttons (OK, DONE) per guidelines - All 1617 tests passing * Remove temporary test database files * Added icon browing UI testing page. * Fixing linting newline issues.
Developer Documentation
See the markdown files in this directory for various developer-related documentation.
The code is the best documentation for lower-level details, but there are some higher-level concepts that are useful to help orient developers. This is the place for that high-level, developer-specific documentation.