feat(dashboard): replace emojis with Font Awesome, add theme support, and styled dialogs
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
This commit is contained in:
@@ -16,6 +16,7 @@
|
||||
|
||||
import { parseItems, serializeItems } from '../../../utils/itemParser.js';
|
||||
import { sanitizeItemName, sanitizeLocationName } from '../../../utils/security.js';
|
||||
import { showAlertDialog } from '../confirmDialog.js';
|
||||
|
||||
/**
|
||||
* Convert location name to safe HTML ID
|
||||
@@ -663,7 +664,11 @@ export function registerInventoryWidget(registry, dependencies) {
|
||||
|
||||
const itemName = sanitizeItemName(rawItemName);
|
||||
if (!itemName) {
|
||||
alert('Invalid item name.');
|
||||
showAlertDialog({
|
||||
title: 'Invalid Item',
|
||||
message: 'Please enter a valid item name.',
|
||||
variant: 'warning'
|
||||
});
|
||||
hideAddItemForm(widget, field, location);
|
||||
return;
|
||||
}
|
||||
@@ -819,7 +824,11 @@ export function registerInventoryWidget(registry, dependencies) {
|
||||
|
||||
const locationName = sanitizeLocationName(rawLocationName);
|
||||
if (!locationName) {
|
||||
alert('Invalid location name.');
|
||||
showAlertDialog({
|
||||
title: 'Invalid Location',
|
||||
message: 'Please enter a valid location name.',
|
||||
variant: 'warning'
|
||||
});
|
||||
hideAddLocationForm(widget);
|
||||
return;
|
||||
}
|
||||
@@ -829,7 +838,11 @@ export function registerInventoryWidget(registry, dependencies) {
|
||||
|
||||
// Check if location already exists
|
||||
if (inventory.stored[locationName]) {
|
||||
alert('A location with this name already exists.');
|
||||
showAlertDialog({
|
||||
title: 'Duplicate Location',
|
||||
message: 'A location with this name already exists.',
|
||||
variant: 'warning'
|
||||
});
|
||||
hideAddLocationForm(widget);
|
||||
return;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user