mirror of
https://github.com/arsvendg/Stirling-PDF.git
synced 2026-07-14 10:34:06 +02:00
Fix z-index conflicts: Google Drive picker, automate dropdowns, tooltips (#6513)
## Summary ## What changed ### 1. Google Drive Picker now renders above the FileManager modal `frontend/editor/src/core/services/googleDrivePickerService.ts` The picker is opened from inside the FileManager modal (`Z_INDEX_FILE_MANAGER_MODAL = 1200`), but Google's Picker defaults to z-index ~1001 - so it landed *behind* the modal that invoked it. Added `setZIndex(Z_INDEX_OVER_FILE_MANAGER_MODAL)` to the builder. ### 2. `Z_INDEX_AUTOMATE_DROPDOWN` no longer collides with `Z_INDEX_FILE_MANAGER_MODAL` `frontend/editor/src/core/styles/zIndex.ts` Both constants were `1200`. The automate dropdown only needs to sit above the automate modal (1100), so dropped it to `1150`. This keeps automate dropdowns above their parent modal but reliably below the file manager scrim when the two overlap. Confirmed callers - all are dropdowns inside automate-modal tool settings: - `DropdownListWithFooter.tsx` - `AddPageNumbersAppearanceSettings.tsx` - `AddPasswordSettings.tsx` - `StampPositionFormattingSettings.tsx` - and several other `*Settings.tsx` files All keep working as intended (1150 > 1100). ### 3. Tooltip z-index honours the documented hierarchy again `frontend/editor/src/core/components/shared/tooltip/Tooltip.module.css` `Tooltip.tsx` sets `zIndex: Z_INDEX_OVER_FULLSCREEN_SURFACE` (1300) inline, but the CSS module had a hardcoded `z-index: 9999` that overrode it. Removed the stale CSS rule so tooltips render at the intended 1300 level rather than floating above almost everything.
This commit is contained in:
@@ -10,7 +10,6 @@
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.5;
|
||||
pointer-events: auto;
|
||||
z-index: 9999;
|
||||
transition:
|
||||
opacity 100ms ease-out,
|
||||
transform 100ms ease-out;
|
||||
|
||||
@@ -4,6 +4,7 @@
|
||||
*/
|
||||
|
||||
import { loadScript } from "@app/utils/scriptLoader";
|
||||
import { Z_INDEX_OVER_FILE_MANAGER_MODAL } from "@app/styles/zIndex";
|
||||
|
||||
const SCOPES = "https://www.googleapis.com/auth/drive.readonly";
|
||||
const SESSION_STORAGE_ID = "googleDrivePickerAccessToken";
|
||||
@@ -202,6 +203,10 @@ class GoogleDrivePickerService {
|
||||
.addView(view2)
|
||||
.setCallback((data: any) => this.pickerCallback(data, resolve, reject));
|
||||
|
||||
(builder as unknown as { setZIndex(z: number): void }).setZIndex(
|
||||
Z_INDEX_OVER_FILE_MANAGER_MODAL,
|
||||
);
|
||||
|
||||
if (options.multiple) {
|
||||
builder.enableFeature(window.google.picker.Feature.MULTISELECT_ENABLED);
|
||||
}
|
||||
|
||||
@@ -12,7 +12,7 @@ export const Z_INDEX_OVER_FILE_MANAGER_MODAL = 1300;
|
||||
|
||||
export const Z_INDEX_AUTOMATE_MODAL = 1100;
|
||||
// Dropdowns/Popovers inside automation modals need to be above the modal
|
||||
export const Z_INDEX_AUTOMATE_DROPDOWN = 1200;
|
||||
export const Z_INDEX_AUTOMATE_DROPDOWN = 1150;
|
||||
|
||||
// page editor Zindexes
|
||||
export const Z_INDEX_HOVER_ACTION_MENU = 100;
|
||||
|
||||
Reference in New Issue
Block a user