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:
@@ -358,6 +358,37 @@ async function initUI() {
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// Reset FAB positions button
|
||||||
|
$('#rpg-reset-fab-positions').on('click', function() {
|
||||||
|
console.log('[RPG Companion] Resetting FAB positions to defaults');
|
||||||
|
|
||||||
|
// Reset to defaults (top-left stacked)
|
||||||
|
extensionSettings.mobileFabPosition = {
|
||||||
|
top: 'calc(var(--topBarBlockSize) + 20px)',
|
||||||
|
left: '12px'
|
||||||
|
};
|
||||||
|
extensionSettings.mobileRefreshPosition = {
|
||||||
|
top: 'calc(var(--topBarBlockSize) + 80px)',
|
||||||
|
left: '12px'
|
||||||
|
};
|
||||||
|
extensionSettings.debugFabPosition = {
|
||||||
|
top: 'calc(var(--topBarBlockSize) + 140px)',
|
||||||
|
left: '12px'
|
||||||
|
};
|
||||||
|
|
||||||
|
// Save settings
|
||||||
|
saveSettings();
|
||||||
|
|
||||||
|
// Apply positions immediately to visible buttons
|
||||||
|
$('#rpg-mobile-toggle').css(extensionSettings.mobileFabPosition);
|
||||||
|
$('#rpg-manual-update-mobile').css(extensionSettings.mobileRefreshPosition);
|
||||||
|
$('#rpg-debug-toggle').css(extensionSettings.debugFabPosition);
|
||||||
|
|
||||||
|
// Show success feedback
|
||||||
|
toastr.success('Button positions reset to defaults', 'RPG Companion');
|
||||||
|
console.log('[RPG Companion] FAB positions reset successfully');
|
||||||
|
});
|
||||||
|
|
||||||
$('#rpg-stat-bar-color-low').on('change', function() {
|
$('#rpg-stat-bar-color-low').on('change', function() {
|
||||||
extensionSettings.statBarColorLow = String($(this).val());
|
extensionSettings.statBarColorLow = String($(this).val());
|
||||||
saveSettings();
|
saveSettings();
|
||||||
|
|||||||
@@ -2054,6 +2054,34 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
|
|||||||
transform: translateY(0);
|
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
|
THEME VARIATIONS
|
||||||
============================================ */
|
============================================ */
|
||||||
@@ -4091,6 +4119,10 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
|
|||||||
.rpg-btn-clear-cache {
|
.rpg-btn-clear-cache {
|
||||||
font-size: clamp(13px, 3.3vw, 17px) !important;
|
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 */
|
/* Very narrow screens - single column layout for all stats */
|
||||||
|
|||||||
@@ -237,6 +237,16 @@
|
|||||||
<i class="fa-solid fa-trash" aria-hidden="true"></i> Clear Extension Cache
|
<i class="fa-solid fa-trash" aria-hidden="true"></i> Clear Extension Cache
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- Reset FAB Positions Button -->
|
||||||
|
<div style="margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--rpg-border);">
|
||||||
|
<button id="rpg-reset-fab-positions" class="rpg-btn-reset-fab">
|
||||||
|
<i class="fa-solid fa-arrows-rotate" aria-hidden="true"></i> Reset Button Positions
|
||||||
|
</button>
|
||||||
|
<small style="display: block; margin-top: 8px; color: #888; font-size: 11px;">
|
||||||
|
Resets all floating action buttons (toggle, refresh, debug) to default top-left positions. Useful if buttons are off-screen.
|
||||||
|
</small>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user