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: Adjust dynamic position (#86424)

Browse Source 
* Adjust dynamic position
This commit is contained in:
linoman 2024-04-18 09:53:34 -06:00 committed by GitHub
parent 3ab361abfc
commit 1d1ebee36b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 16 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -80,15 +80,24 @@ export const RolePicker = ({
}
const { bottom, top, left, right } = dimensions;
let horizontal = left;
let vertical = bottom + 10; // Add extra 10px to offset to account for border and outline
let menuToLeft = false;
const distance = window.innerHeight - bottom;
vertical = bottom;
let vertical = bottom + 5;
let ToTheSide = false;
if (distance < MENU_MAX_HEIGHT + 20) {
// Limit the top position to 80px to avoid the menu going off the screen
vertical = top < 80 ? 80 : top;
horizontal += right - left + 8;
// move the menu above the input if there is not enough space below
vertical = top - MENU_MAX_HEIGHT - 50;
}
// 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;
}
/*
@ -98,8 +107,8 @@ export const RolePicker = ({
* 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 (left + ROLE_PICKER_MAX_MENU_WIDTH > window.innerWidth) {
horizontal = window.innerWidth - right;
if (horizontal + ROLE_PICKER_MAX_MENU_WIDTH > window.innerWidth) {
horizontal = window.innerWidth - (ToTheSide ? left : right);
menuToLeft = true;
}