public/grafana
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[v11.0.x] RolePicker: Adjust dynamic position (#86542)

Browse Source 
RolePicker: Adjust dynamic position (#86424)

* Adjust dynamic position

(cherry picked from commit 1d1ebee36b)

Co-authored-by: linoman <2051016+linoman@users.noreply.github.com>
This commit is contained in:
grafana-delivery-bot[bot]
2024-04-18 18:18:10 +02:00
committed by GitHub
co-authored by linoman
parent d05587b2fd
commit 9ba76038a0
1 changed files with 16 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/app/core/components/RolePicker/RolePicker.tsx
+16 -7
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;
}