feat: add draggable mobile refresh button with improved UX

- Repositioned mobile refresh button to bottom-right (80px from bottom)
- Implemented full drag-to-reposition functionality
  * Touch and mouse support with 200ms/10px threshold
  * RequestAnimationFrame for smooth dragging
  * Position saved to extensionSettings.mobileRefreshPosition
  * Viewport constraints with 10px padding
- Fixed sticky tap highlight issue
  * Added -webkit-tap-highlight-color: transparent
  * Added blur() on click to remove focus
  * Set user-select: none and touch-action: none
- Show/hide based on panel state
  * Only visible when panel is expanded (rpg-mobile-open)
  * Listens to rpg-panel-toggled events
  * Auto-hides when panel closes
- Prevent accidental refresh after drag
  * just-dragged flag prevents click for 100ms
  * Click handler checks flag before executing
- Changed from absolute to fixed positioning for viewport-wide dragging
- Added mobileRefreshPosition to default settings (bottom: 80px, right: 20px)
- z-index: 99 (below FAB toggle at 100)
This commit is contained in:
Lucas 'Paperboy' Rose-Winters
2025-10-21 21:39:56 +11:00
parent dd392e50d1
commit e345715090
6 changed files with 279 additions and 11 deletions
+6
View File
@@ -34,6 +34,9 @@ export function closeMobilePanelWithAnimation() {
$panel.removeClass('rpg-mobile-open').addClass('rpg-mobile-closing');
$mobileToggle.removeClass('active');
// Trigger event for other components (like refresh button)
$(document).trigger('rpg-panel-toggled', { isOpen: false });
// Wait for animation to complete before hiding
$panel.one('animationend', function() {
$panel.removeClass('rpg-mobile-closing');
@@ -127,6 +130,9 @@ export function setupCollapseToggle() {
const $overlay = $('<div class="rpg-mobile-overlay"></div>');
$('body').append($overlay);
// Trigger event for other components (like refresh button)
$(document).trigger('rpg-panel-toggled', { isOpen: true });
// Debug: Check state after animation should complete
setTimeout(() => {
console.log('[RPG Mobile] 500ms after opening:', {