IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

RolePicker: Improve overlay positioning (#92590)

Browse Source 
* RolePicker: Improve overlay positioning

* Fix vertical position

* More fixes
This commit is contained in:
Alex Khomenko 2024-09-06 17:36:55 +03:00 committed by GitHub
parent 3111f23bf1
commit 3d6c938e59
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 30 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
public/app/core/components/RolePicker/RolePicker.tsx
View File

@ -5,7 +5,12 @@ import { Role, OrgRole } from 'app/types';
import { RolePickerInput } from './RolePickerInput';
import { RolePickerMenu } from './RolePickerMenu';
import { MENU_MAX_HEIGHT, ROLE_PICKER_MAX_MENU_WIDTH, ROLE_PICKER_WIDTH } from './constants';
import {
MENU_MAX_HEIGHT,
ROLE_PICKER_MAX_MENU_WIDTH,
ROLE_PICKER_MENU_MAX_WIDTH,
ROLE_PICKER_WIDTH,
} from './constants';
export interface Props {
basicRole?: OrgRole;
@ -79,39 +84,38 @@ export const RolePicker = ({
return {};
}
const { bottom, top, left, right } = dimensions;
const spaceBelow = window.innerHeight - bottom;
const spaceAbove = top;
const spaceRight = window.innerWidth - right;
const spaceLeft = left;
let horizontal = left;
let vertical = bottom;
let menuToLeft = false;
let menuToTop = false;
const distance = window.innerHeight - bottom;
let vertical = bottom + 5;
let ToTheSide = false;
if (distance < MENU_MAX_HEIGHT + 20) {
// move the menu above the input if there is not enough space below
vertical = top - MENU_MAX_HEIGHT - 50;
// Check vertical space
if (spaceBelow < MENU_MAX_HEIGHT && spaceAbove > spaceBelow) {
vertical = top - MENU_MAX_HEIGHT;
menuToTop = true;
}
// check if there is enough space above the input field
if (top < MENU_MAX_HEIGHT + 50) {
// if not, reset the vertical position
vertical = top;
// move the menu to the right edge of the input field
horizontal = right + 5;
// flag to align the menu to the right or left edge of the input field
ToTheSide = true;
}
/*
* This expression calculates whether there is enough place
* on the right of the RolePicker input to show/fit the role picker menu and its sub menu AND
* whether there is enough place under the RolePicker input to show/fit
* both (the role picker menu and its sub menu) aligned to the left edge of the input.
* Otherwise, it aligns the role picker menu to the right.
*/
if (horizontal + ROLE_PICKER_MAX_MENU_WIDTH > window.innerWidth) {
horizontal = window.innerWidth - (ToTheSide ? left : right);
// Check horizontal space
if (spaceRight < ROLE_PICKER_MENU_MAX_WIDTH && spaceLeft < ROLE_PICKER_MENU_MAX_WIDTH) {
horizontal = right - ROLE_PICKER_MENU_MAX_WIDTH;
menuToLeft = true;
} else {
horizontal = Math.max(0, left + (dimensions.width - ROLE_PICKER_MENU_MAX_WIDTH) / 2);
}
// Ensure the menu stays within the viewport
horizontal = Math.max(0, Math.min(horizontal, window.innerWidth - ROLE_PICKER_MAX_MENU_WIDTH));
vertical = Math.max(0, Math.min(vertical, window.innerHeight - MENU_MAX_HEIGHT));
if (menuToTop) {
// Adjust vertical position to align with the input
vertical -= 48;
}
return { horizontal, vertical, menuToLeft };
};