fix: only show mobile refresh FAB when panel open AND in Separate mode
The mobile refresh button was always visible on mobile. It should only appear when BOTH conditions are met: - RPG panel is open - Generation mode is Separate (not Together) Changes: - Added opacity: 0 and pointer-events: none to base .rpg-mobile-refresh - CSS shows button when panel open AND not .rpg-hidden-mode class - Updated updateGenerationModeUI() to toggle .rpg-hidden-mode on mobile button - Together mode: adds .rpg-hidden-mode class (keeps button hidden) - Separate mode: removes .rpg-hidden-mode class (allows CSS to show it) Result: Mobile refresh FAB only appears when panel is open AND in Separate mode. Stays hidden when panel closed OR in Together mode.
This commit is contained in:
@@ -266,11 +266,15 @@ export function applyPanelPosition() {
|
|||||||
* Updates the UI based on generation mode selection.
|
* Updates the UI based on generation mode selection.
|
||||||
*/
|
*/
|
||||||
export function updateGenerationModeUI() {
|
export function updateGenerationModeUI() {
|
||||||
|
const $mobileBtn = $('#rpg-manual-update-mobile');
|
||||||
|
|
||||||
if (extensionSettings.generationMode === 'together') {
|
if (extensionSettings.generationMode === 'together') {
|
||||||
// In "together" mode, manual update button is hidden
|
// In "together" mode, hide both desktop and mobile refresh buttons
|
||||||
$('#rpg-manual-update').hide();
|
$('#rpg-manual-update').hide();
|
||||||
|
$mobileBtn.addClass('rpg-hidden-mode');
|
||||||
} else {
|
} else {
|
||||||
// In "separate" mode, manual update button is visible
|
// In "separate" mode, show both desktop and mobile refresh buttons
|
||||||
$('#rpg-manual-update').show();
|
$('#rpg-manual-update').show();
|
||||||
|
$mobileBtn.removeClass('rpg-hidden-mode');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -3328,6 +3328,9 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
|
|||||||
user-select: none;
|
user-select: none;
|
||||||
-webkit-user-select: none;
|
-webkit-user-select: none;
|
||||||
will-change: top, left;
|
will-change: top, left;
|
||||||
|
/* Hidden by default - shown when panel open AND separate mode */
|
||||||
|
opacity: 0;
|
||||||
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.rpg-mobile-refresh.dragging {
|
.rpg-mobile-refresh.dragging {
|
||||||
@@ -3387,17 +3390,23 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
|
|||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Show the mobile FAB refresh button */
|
/* Show the mobile FAB refresh button (but hidden by opacity) */
|
||||||
.rpg-mobile-refresh {
|
.rpg-mobile-refresh {
|
||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Show refresh button when panel is open AND not hidden by generation mode */
|
||||||
|
body:has(.rpg-panel.rpg-mobile-open) .rpg-mobile-refresh:not(.rpg-hidden-mode) {
|
||||||
|
opacity: 1;
|
||||||
|
pointer-events: auto;
|
||||||
|
}
|
||||||
|
|
||||||
/* Hide desktop refresh button on mobile */
|
/* Hide desktop refresh button on mobile */
|
||||||
#rpg-manual-update {
|
#rpg-manual-update {
|
||||||
display: none !important;
|
display: none !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Hide FAB when panel is open */
|
/* Hide toggle FAB when panel is open */
|
||||||
body:has(.rpg-panel.rpg-mobile-open) .rpg-mobile-toggle {
|
body:has(.rpg-panel.rpg-mobile-open) .rpg-mobile-toggle {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
|
|||||||
Reference in New Issue
Block a user