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

DS Picker: Use trigger width as min width (#71501)

Browse Source
This commit is contained in:
Ivan Ortega Alba
2023-07-13 17:10:38 +02:00
committed by GitHub
parent 320478760f
commit 18b4f72c7a
2 changed files with 10 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
public/app/features/datasources/components/picker/DataSourceDropdown.tsx
View File

@@ -337,7 +337,6 @@ function getStylesPickerContent(theme: GrafanaTheme2) {
container: css`
display: flex;
flex-direction: column;
max-width: 480px;
background: ${theme.colors.background.primary};
box-shadow: ${theme.shadows.z3};
`,

24
public/app/features/datasources/components/picker/popperModifiers.ts
View File

@@ -11,15 +11,17 @@ export const maxSize: Modifier<'maxSize', {}> = {
fn({ state, name, options }: ModifierArguments<{}>) {
const overflow = detectOverflow(state, options);
const { x, y } = state.modifiersData.preventOverflow || { x: 0, y: 0 };
const { width, height } = state.rects.popper;
const { width: contentW, height: contentH } = state.rects.popper;
const { width: triggerW } = state.rects.reference;
const [basePlacement] = state.placement.split('-');
const widthProp = basePlacement === 'left' ? 'left' : 'right';
const heightProp = basePlacement === 'top' ? 'top' : 'bottom';
state.modifiersData[name] = {
width: width - overflow[widthProp] - x,
height: height - overflow[heightProp] - y,
maxWidth: contentW - overflow[widthProp] - x,
maxHeight: contentH - overflow[heightProp] - y,
minWidth: triggerW,
};
},
};
@@ -30,17 +32,11 @@ export const applyMaxSize: Modifier<'applyMaxSize', {}> = {
phase: 'beforeWrite',
requires: ['maxSize'],
fn({ state }: ModifierArguments<{}>) {
const { height, width } = state.modifiersData.maxSize;
const { maxHeight, maxWidth, minWidth } = state.modifiersData.maxSize;
if (!state.styles.popper.maxHeight) {
state.styles.popper.maxHeight = `${height - MODAL_MARGIN}px`;
}
if (!state.styles.popper.minHeight) {
state.styles.popper.minHeight = `${FLIP_THRESHOLD}px`;
}
if (!state.styles.popper.maxWidth) {
state.styles.popper.maxWidth = width;
}
state.styles.popper.maxHeight ??= `${maxHeight - MODAL_MARGIN}px`;
state.styles.popper.minHeight ??= `${FLIP_THRESHOLD}px`;
state.styles.popper.maxWidth ??= maxWidth;
state.styles.popper.minWidth ??= minWidth;
},
};