Lucas 'Paperboy' Rose-Winters
7628bb84c1
This commit implements three major improvements to the dashboard system: 1. **Font Awesome Icons for Tabs** - Replace emoji tab icons (📊, 🌍, 🎒) with Font Awesome classes - Update defaultLayout.js with fa-solid icon classes - Add automatic migration for existing saved dashboards with emoji icons - Implement migrateEmojiIcons() to convert old emoji icons on load - Update fallback icons throughout the system 2. **Custom Theme Support for Dashboard** - Replace all --SmartTheme* variables with --rpg-* variables - Ensure custom themes (sci-fi, fantasy, cyberpunk) apply to dashboard - Update CSS for tabs, buttons, dropdowns, modals, and widget cards - Dashboard now respects extension themes instead of main SillyTavern theme 3. **Styled Confirmation Dialogs** - Create confirmDialog.js with showConfirmDialog() and showAlertDialog() - Support three variants: danger (red), warning (yellow), info (blue) - Add keyboard navigation (Enter/Escape) and accessibility features - Replace all native confirm() and alert() calls with styled dialogs - Add confirmation dialog modal to dashboardTemplate.html Files Modified: - src/systems/dashboard/confirmDialog.js (NEW) - src/systems/dashboard/dashboardManager.js - src/systems/dashboard/defaultLayout.js - src/systems/dashboard/tabManager.js - src/systems/dashboard/dashboardIntegration.js - src/systems/dashboard/editModeManager.js - src/systems/dashboard/widgets/inventoryWidget.js - src/systems/dashboard/dashboardTemplate.html - style.css
160 lines
7.4 KiB
HTML
160 lines
7.4 KiB
HTML
<!-- RPG Companion v2 Dashboard -->
|
|
<div id="rpg-dashboard-container" class="rpg-dashboard-container">
|
|
<!-- Dashboard Header Controls -->
|
|
<div class="rpg-dashboard-header">
|
|
<div class="rpg-dashboard-header-left">
|
|
<!-- Tab Navigation Wrapper (with scroll controls) -->
|
|
<div class="rpg-tab-nav-wrapper">
|
|
<!-- Tabs container (will be populated by TabManager) -->
|
|
<div id="rpg-dashboard-tabs" class="rpg-dashboard-tabs"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="rpg-dashboard-header-right" id="rpg-dashboard-header-right">
|
|
<!-- Priority buttons (always visible) -->
|
|
<button id="rpg-dashboard-lock-widgets" class="rpg-dashboard-btn rpg-lock-widgets-btn rpg-priority-btn" title="Unlock Widgets" aria-label="Lock/Unlock widgets">
|
|
<i class="fa-solid fa-lock"></i>
|
|
</button>
|
|
|
|
<button id="rpg-dashboard-edit-mode" class="rpg-dashboard-btn rpg-edit-mode-btn rpg-priority-btn" title="Enter Edit Widget Mode" aria-label="Edit mode">
|
|
<i class="fa-solid fa-pen-to-square"></i>
|
|
</button>
|
|
|
|
<!-- Full mode buttons (hidden on overflow) -->
|
|
<button id="rpg-dashboard-reset-layout" class="rpg-dashboard-btn rpg-reset-layout-btn rpg-overflow-btn" title="Reset to Default Layout" aria-label="Reset layout">
|
|
<i class="fa-solid fa-rotate-left"></i>
|
|
</button>
|
|
|
|
<button id="rpg-dashboard-auto-layout" class="rpg-dashboard-btn rpg-auto-layout-btn rpg-overflow-btn" title="Auto-Arrange All Widgets" aria-label="Auto-arrange all">
|
|
<i class="fa-solid fa-table-cells-large"></i>
|
|
</button>
|
|
|
|
<button id="rpg-dashboard-sort-tab" class="rpg-dashboard-btn rpg-sort-tab-btn rpg-overflow-btn" title="Sort Current Tab" aria-label="Sort tab">
|
|
<i class="fa-solid fa-arrow-down-short-wide"></i>
|
|
</button>
|
|
|
|
<button id="rpg-dashboard-add-widget" class="rpg-dashboard-btn rpg-add-widget-btn rpg-overflow-btn" style="display: none;" title="Add Widget" aria-label="Add widget">
|
|
<i class="fa-solid fa-plus"></i>
|
|
</button>
|
|
|
|
<button id="rpg-dashboard-export-layout" class="rpg-dashboard-btn rpg-export-btn rpg-overflow-btn" style="display: none;" title="Export Layout" aria-label="Export layout">
|
|
<i class="fa-solid fa-download"></i>
|
|
</button>
|
|
|
|
<button id="rpg-dashboard-import-layout" class="rpg-dashboard-btn rpg-import-btn rpg-overflow-btn" style="display: none;" title="Import Layout" aria-label="Import layout">
|
|
<i class="fa-solid fa-upload"></i>
|
|
</button>
|
|
|
|
<button id="rpg-dashboard-done-edit" class="rpg-dashboard-btn rpg-done-edit-btn rpg-overflow-btn" style="display: none;" title="Exit Edit Widget Mode" aria-label="Done editing">
|
|
<i class="fa-solid fa-check"></i>
|
|
</button>
|
|
|
|
<!-- Overflow Menu Button (⋮) - shown in overflow mode -->
|
|
<button id="rpg-dashboard-overflow-menu" class="rpg-dashboard-btn rpg-overflow-menu-btn" style="display: none;" title="More Options" aria-label="More options" aria-haspopup="true" aria-expanded="false">
|
|
<i class="fa-solid fa-ellipsis-vertical"></i>
|
|
</button>
|
|
|
|
<!-- Hamburger Menu Button (☰) - shown in compact mode -->
|
|
<button id="rpg-dashboard-hamburger-menu" class="rpg-dashboard-btn rpg-hamburger-menu-btn" style="display: none;" title="Menu" aria-label="Menu" aria-haspopup="true" aria-expanded="false">
|
|
<i class="fa-solid fa-bars"></i>
|
|
</button>
|
|
|
|
<!-- Dropdown Menu (populated dynamically) -->
|
|
<div id="rpg-dashboard-dropdown-menu" class="rpg-dropdown-menu" role="menu" style="display: none;">
|
|
<!-- Menu items added dynamically -->
|
|
</div>
|
|
|
|
<input type="file" id="rpg-dashboard-import-file" accept=".json" style="display: none;" />
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Dashboard Grid (will be populated by DashboardManager) -->
|
|
<div id="rpg-dashboard-grid" class="rpg-dashboard-grid" data-edit-mode="false">
|
|
<!-- Widgets will be rendered here -->
|
|
</div>
|
|
|
|
<!-- Add Widget Modal -->
|
|
<div id="rpg-add-widget-modal" class="rpg-modal" style="display: none;">
|
|
<div class="rpg-modal-content">
|
|
<div class="rpg-modal-header">
|
|
<h3>
|
|
<i class="fa-solid fa-plus"></i>
|
|
Add Widget
|
|
</h3>
|
|
<button class="rpg-modal-close" data-close="add-widget">
|
|
<i class="fa-solid fa-times"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="rpg-modal-body">
|
|
<div class="rpg-widget-grid" id="rpg-widget-selector">
|
|
<!-- Widget cards will be populated by DashboardManager -->
|
|
</div>
|
|
</div>
|
|
|
|
<div class="rpg-modal-footer">
|
|
<button class="rpg-btn-secondary" data-close="add-widget">
|
|
<i class="fa-solid fa-times"></i>
|
|
Cancel
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Widget Configuration Modal -->
|
|
<div id="rpg-widget-config-modal" class="rpg-modal" style="display: none;">
|
|
<div class="rpg-modal-content">
|
|
<div class="rpg-modal-header">
|
|
<h3>
|
|
<i class="fa-solid fa-gear"></i>
|
|
Widget Settings
|
|
</h3>
|
|
<button class="rpg-modal-close" data-close="widget-config">
|
|
<i class="fa-solid fa-times"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="rpg-modal-body">
|
|
<div id="rpg-widget-config-form">
|
|
<!-- Widget config form will be populated dynamically -->
|
|
</div>
|
|
</div>
|
|
|
|
<div class="rpg-modal-footer">
|
|
<button class="rpg-btn-secondary" data-close="widget-config">
|
|
<i class="fa-solid fa-times"></i>
|
|
Cancel
|
|
</button>
|
|
<button class="rpg-btn-primary" id="rpg-widget-config-save">
|
|
<i class="fa-solid fa-check"></i>
|
|
Save
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Confirmation Dialog Modal -->
|
|
<div id="rpg-confirm-dialog" class="rpg-modal rpg-confirm-modal" style="display: none;">
|
|
<div class="rpg-modal-content rpg-confirm-content">
|
|
<div class="rpg-modal-header rpg-confirm-header">
|
|
<div class="rpg-confirm-header-content">
|
|
<i id="rpg-confirm-icon" class="rpg-confirm-icon"></i>
|
|
<h3 id="rpg-confirm-title"></h3>
|
|
</div>
|
|
<button class="rpg-modal-close rpg-confirm-close">
|
|
<i class="fa-solid fa-times"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="rpg-modal-body rpg-confirm-body">
|
|
<p id="rpg-confirm-message"></p>
|
|
</div>
|
|
|
|
<div class="rpg-modal-footer rpg-confirm-footer">
|
|
<button class="rpg-btn-secondary" id="rpg-confirm-cancel"></button>
|
|
<button class="rpg-btn-primary" id="rpg-confirm-confirm"></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|