feat: add reset button positions to settings

PROBLEM:
- Existing users with saved off-screen FAB positions can't see buttons
- No way to reset positions without clearing all extension settings
- Salixfire and other users on Xiaomi/other devices need safe positions

SOLUTION:
Added "Reset Button Positions" button in Advanced settings section

IMPLEMENTATION:

1. template.html (lines 241-249):
   - Added reset button in Advanced section after Clear Cache button
   - Blue-styled button with rotate icon
   - Help text explains it resets FAB positions to top-left

2. index.js (lines 361-390):
   - Added click handler for reset button
   - Resets all 3 FAB positions to safe top-left defaults:
     * Mobile toggle: top + 20px, left: 12px
     * Refresh: top + 80px, left: 12px
     * Debug: top + 140px, left: 12px
   - Saves settings immediately
   - Applies CSS positions to visible buttons (no page refresh needed)
   - Shows success toast notification

3. style.css (lines 2057-2083, 4123-4125):
   - Added .rpg-btn-reset-fab styles matching clear cache pattern
   - Blue color scheme (vs red for destructive clear cache)
   - Same sizing, padding, transitions as other buttons
   - Mobile responsive font-size with clamp()

USAGE:
Users experiencing off-screen buttons can now:
1. Open RPG Companion settings (gear icon)
2. Scroll to Advanced section
3. Click "Reset Button Positions"
4. All FAB buttons instantly move to safe top-left positions

This fixes the issue for Salixfire and any other users who:
- Have buttons saved in off-screen positions
- Can't scroll to find buttons
- Need to reset without clearing all settings

Works immediately without page refresh or extension reload.
This commit is contained in:
Lucas 'Paperboy' Rose-Winters
2025-10-22 09:22:12 +11:00
parent 4b37d9965a
commit f7d8597f24
3 changed files with 73 additions and 0 deletions
+32
View File
@@ -2054,6 +2054,34 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
transform: translateY(0);
}
.rpg-btn-reset-fab {
width: 100%;
padding: 0.625em;
background: rgba(52, 152, 219, 0.2);
border: 2px solid rgba(52, 152, 219, 0.5);
border-radius: 0.5em;
color: #5dade2;
font-size: 1.2vw;
font-weight: 600;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5em;
transition: all 0.3s ease;
}
.rpg-btn-reset-fab:hover {
background: rgba(52, 152, 219, 0.3);
border-color: rgba(52, 152, 219, 0.8);
color: #85c1e9;
transform: translateY(-0.062rem);
}
.rpg-btn-reset-fab:active {
transform: translateY(0);
}
/* ============================================
THEME VARIATIONS
============================================ */
@@ -4091,6 +4119,10 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
.rpg-btn-clear-cache {
font-size: clamp(13px, 3.3vw, 17px) !important;
}
.rpg-btn-reset-fab {
font-size: clamp(13px, 3.3vw, 17px) !important;
}
}
/* Very narrow screens - single column layout for all stats */