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:
Lucas 'Paperboy' Rose-Winters
@@ -1133,7 +1133,7 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
|
||||
font-size: 0.75rem;
|
||||
border: 1px solid transparent;
|
||||
background: transparent;
|
||||
color: var(--SmartThemeBodyColor);
|
||||
color: var(--rpg-text);
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
@@ -1143,13 +1143,13 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
|
||||
}
|
||||
|
||||
.rpg-dashboard-tab:hover {
|
||||
background: var(--SmartThemeBlurTintColor);
|
||||
background: var(--rpg-accent);
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.rpg-dashboard-tab.active {
|
||||
background: var(--SmartThemeBlurTintColor);
|
||||
border-color: var(--SmartThemeBorderColor);
|
||||
background: var(--rpg-accent);
|
||||
border-color: var(--rpg-border);
|
||||
opacity: 1;
|
||||
font-weight: 600;
|
||||
}
|
||||
@@ -1182,9 +1182,9 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
padding: 0;
|
||||
border: 1px solid var(--SmartThemeBorderColor);
|
||||
background: var(--SmartThemeBlurTintColor);
|
||||
color: var(--SmartThemeBodyColor);
|
||||
border: 1px solid var(--rpg-border);
|
||||
background: var(--rpg-bg);
|
||||
color: var(--rpg-text);
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
@@ -1200,7 +1200,7 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
|
||||
|
||||
.rpg-tab-nav-arrow:hover {
|
||||
opacity: 1;
|
||||
background: var(--SmartThemeQuoteColor);
|
||||
background: var(--rpg-highlight);
|
||||
transform: translateY(-50%) scale(1.05);
|
||||
}
|
||||
|
||||
@@ -1232,7 +1232,7 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
|
||||
left: 0;
|
||||
background: linear-gradient(
|
||||
to right,
|
||||
var(--SmartThemeBlurTintColor) 0%,
|
||||
var(--rpg-bg) 0%,
|
||||
transparent 100%
|
||||
);
|
||||
}
|
||||
@@ -1241,7 +1241,7 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
|
||||
right: 0;
|
||||
background: linear-gradient(
|
||||
to left,
|
||||
var(--SmartThemeBlurTintColor) 0%,
|
||||
var(--rpg-bg) 0%,
|
||||
transparent 100%
|
||||
);
|
||||
}
|
||||
@@ -1281,16 +1281,16 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
font-size: 0.9rem;
|
||||
border: 1px solid var(--SmartThemeBorderColor);
|
||||
background: var(--SmartThemeBlurTintColor);
|
||||
color: var(--SmartThemeBodyColor);
|
||||
border: 1px solid var(--rpg-border);
|
||||
background: var(--rpg-accent);
|
||||
color: var(--rpg-text);
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.rpg-dashboard-btn:hover {
|
||||
background: var(--SmartThemeQuoteColor);
|
||||
background: var(--rpg-highlight);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
@@ -1309,10 +1309,10 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
|
||||
right: 0;
|
||||
min-width: 200px;
|
||||
max-width: 300px;
|
||||
background: var(--SmartThemeBlurTintColor);
|
||||
border: 1px solid var(--SmartThemeBorderColor);
|
||||
background: var(--rpg-bg);
|
||||
border: 1px solid var(--rpg-border);
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
|
||||
box-shadow: 0 4px 12px var(--rpg-shadow);
|
||||
z-index: 10003; /* Above modals (10000) and mobile toggle (10002) */
|
||||
overflow: hidden;
|
||||
animation: slideDown 0.2s ease-out;
|
||||
@@ -1338,7 +1338,7 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
|
||||
padding: 0.75rem 1rem;
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: var(--SmartThemeBodyColor);
|
||||
color: var(--rpg-text);
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
transition: background 0.15s;
|
||||
@@ -1347,7 +1347,7 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
|
||||
|
||||
.rpg-dropdown-item:hover,
|
||||
.rpg-dropdown-item:focus {
|
||||
background: var(--SmartThemeQuoteColor);
|
||||
background: var(--rpg-highlight);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
@@ -1444,13 +1444,13 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
|
||||
|
||||
/* Modal Content Container */
|
||||
.rpg-modal-content {
|
||||
background: var(--SmartThemeBlurTintColor);
|
||||
border: 2px solid var(--SmartThemeBorderColor);
|
||||
background: var(--rpg-bg);
|
||||
border: 2px solid var(--rpg-border);
|
||||
border-radius: 8px;
|
||||
max-width: 600px;
|
||||
max-height: 80vh;
|
||||
overflow: auto;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
|
||||
box-shadow: 0 4px 20px var(--rpg-shadow);
|
||||
}
|
||||
|
||||
/* Modal Header */
|
||||
@@ -1459,12 +1459,12 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 1rem;
|
||||
border-bottom: 1px solid var(--SmartThemeBorderColor);
|
||||
border-bottom: 1px solid var(--rpg-border);
|
||||
}
|
||||
|
||||
.rpg-modal-header h3 {
|
||||
margin: 0;
|
||||
color: var(--SmartThemeBodyColor);
|
||||
color: var(--rpg-text);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
@@ -1473,7 +1473,7 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
|
||||
.rpg-modal-close {
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: var(--SmartThemeBodyColor);
|
||||
color: var(--rpg-text);
|
||||
font-size: 1.5rem;
|
||||
cursor: pointer;
|
||||
padding: 0.25rem 0.5rem;
|
||||
@@ -1496,7 +1496,7 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
|
||||
justify-content: flex-end;
|
||||
gap: 0.5rem;
|
||||
padding: 1rem;
|
||||
border-top: 1px solid var(--SmartThemeBorderColor);
|
||||
border-top: 1px solid var(--rpg-border);
|
||||
}
|
||||
|
||||
/* Widget Grid in Modal */
|
||||
@@ -1509,9 +1509,9 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
|
||||
/* Widget Card */
|
||||
.rpg-widget-card {
|
||||
padding: 1rem;
|
||||
border: 2px solid var(--SmartThemeBorderColor);
|
||||
border: 2px solid var(--rpg-border);
|
||||
border-radius: 8px;
|
||||
background: var(--SmartThemeQuoteColor);
|
||||
background: var(--rpg-accent);
|
||||
text-align: center;
|
||||
transition: all 0.2s;
|
||||
display: flex;
|
||||
@@ -1522,7 +1522,7 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
|
||||
.rpg-widget-card:hover {
|
||||
border-color: var(--rpg-highlight);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
|
||||
box-shadow: 0 4px 12px var(--rpg-shadow);
|
||||
}
|
||||
|
||||
.rpg-widget-card-icon {
|
||||
@@ -1533,12 +1533,13 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
|
||||
.rpg-widget-card-name {
|
||||
font-size: 0.95rem;
|
||||
font-weight: 600;
|
||||
color: var(--SmartThemeBodyColor);
|
||||
color: var(--rpg-text);
|
||||
}
|
||||
|
||||
.rpg-widget-card-description {
|
||||
font-size: 0.75rem;
|
||||
color: var(--SmartThemeFastUISliderColColor);
|
||||
color: var(--rpg-text);
|
||||
opacity: 0.7;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
@@ -1587,12 +1588,12 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
|
||||
|
||||
.rpg-btn-secondary {
|
||||
background: transparent;
|
||||
border: 1px solid var(--SmartThemeBorderColor);
|
||||
color: var(--SmartThemeBodyColor);
|
||||
border: 1px solid var(--rpg-border);
|
||||
color: var(--rpg-text);
|
||||
}
|
||||
|
||||
.rpg-btn-secondary:hover {
|
||||
background: var(--SmartThemeQuoteColor);
|
||||
background: var(--rpg-accent);
|
||||
}
|
||||
|
||||
/* Tab Drop Zone Highlight */
|
||||
@@ -1603,6 +1604,87 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
|
||||
box-shadow: 0 0 12px var(--rpg-highlight);
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
Confirmation Dialog Styles
|
||||
======================================== */
|
||||
|
||||
/* Confirmation Dialog Content */
|
||||
.rpg-confirm-content {
|
||||
max-width: 450px;
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
/* Confirmation Dialog Header */
|
||||
.rpg-confirm-header-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.rpg-confirm-icon {
|
||||
font-size: 1.75rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* Confirmation Dialog Body */
|
||||
.rpg-confirm-body {
|
||||
padding: 1.5rem 1rem;
|
||||
}
|
||||
|
||||
.rpg-confirm-body p {
|
||||
margin: 0;
|
||||
line-height: 1.5;
|
||||
color: var(--rpg-text);
|
||||
}
|
||||
|
||||
/* Confirmation Dialog Footer */
|
||||
.rpg-confirm-footer {
|
||||
padding: 1rem;
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
/* Variant Styles - Danger (Red) */
|
||||
.rpg-confirm-danger .rpg-confirm-icon {
|
||||
color: #ff4444;
|
||||
}
|
||||
|
||||
.rpg-confirm-danger .rpg-btn-primary {
|
||||
background: #ff4444;
|
||||
}
|
||||
|
||||
.rpg-confirm-danger .rpg-btn-primary:hover {
|
||||
background: #cc0000;
|
||||
}
|
||||
|
||||
/* Variant Styles - Warning (Yellow/Orange) */
|
||||
.rpg-confirm-warning .rpg-confirm-icon {
|
||||
color: #ffaa00;
|
||||
}
|
||||
|
||||
.rpg-confirm-warning .rpg-btn-primary {
|
||||
background: #ffaa00;
|
||||
color: #1a1a1a;
|
||||
}
|
||||
|
||||
.rpg-confirm-warning .rpg-btn-primary:hover {
|
||||
background: #cc8800;
|
||||
}
|
||||
|
||||
/* Variant Styles - Info (Blue) */
|
||||
.rpg-confirm-info .rpg-confirm-icon {
|
||||
color: #00aaff;
|
||||
}
|
||||
|
||||
.rpg-confirm-info .rpg-btn-primary {
|
||||
background: #00aaff;
|
||||
}
|
||||
|
||||
.rpg-confirm-info .rpg-btn-primary:hover {
|
||||
background: #0088cc;
|
||||
}
|
||||
|
||||
.rpg-dashboard-grid {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
|
||||
Reference in New Issue
Block a user