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

Navigation: Fix broken layout at 544px (#63793)

Browse Source 
* ensure media queries transition properly

* fix unit tests
This commit is contained in:
Ashley Harrison 2023-03-01 15:31:32 +00:00 committed by GitHub
parent 78b39bb282
commit 8e9ccfc66e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 22 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/grafana-data/src/themes/breakpoints.ts
View File

@ -16,8 +16,8 @@ export interface ThemeBreakpoints {
values: ThemeBreakpointValues;
keys: string[];
unit: string;
up: (key: ThemeBreakpointsKey) => string;
down: (key: ThemeBreakpointsKey) => string;
up: (key: ThemeBreakpointsKey | number) => string;
down: (key: ThemeBreakpointsKey | number) => string;
}
/** @internal */

10
public/app/core/components/AppChrome/Organization/OrganizationSwitcher.test.tsx
View File

@ -29,6 +29,14 @@ const renderWithProvider = ({ initialState }: { initialState?: Partial<appTypes.
};
describe('OrganisationSwitcher', () => {
beforeEach(() => {
(window.matchMedia as jest.Mock).mockImplementation(() => ({
addEventListener: jest.fn(),
removeEventListener: jest.fn(),
matches: true,
}));
});
it('should only render if more than one organisations', () => {
renderWithProvider({
initialState: {
@ -75,7 +83,7 @@ describe('OrganisationSwitcher', () => {
(window.matchMedia as jest.Mock).mockImplementation(() => ({
addEventListener: jest.fn(),
removeEventListener: jest.fn(),
matches: () => true,
matches: false,
}));
renderWithProvider({
initialState: {

4
public/app/core/components/AppChrome/Organization/OrganizationSwitcher.tsx
View File

@ -31,12 +31,12 @@ export function OrganizationSwitcher() {
const breakpoint = theme.breakpoints.values.sm;
const [isSmallScreen, setIsSmallScreen] = useState(window.matchMedia(`(max-width: ${breakpoint}px)`).matches);
const [isSmallScreen, setIsSmallScreen] = useState(!window.matchMedia(`(min-width: ${breakpoint}px)`).matches);
useMediaQueryChange({
breakpoint,
onChange: (e) => {
setIsSmallScreen(e.matches);
setIsSmallScreen(!e.matches);
},
});

4
public/app/core/components/AppChrome/QuickAdd/QuickAdd.tsx
View File

@ -19,13 +19,13 @@ export const QuickAdd = ({}: Props) => {
const navBarTree = useSelector((state) => state.navBarTree);
const breakpoint = theme.breakpoints.values.sm;
const [isSmallScreen, setIsSmallScreen] = useState(window.matchMedia(`(max-width: ${breakpoint}px)`).matches);
const [isSmallScreen, setIsSmallScreen] = useState(!window.matchMedia(`(min-width: ${breakpoint}px)`).matches);
const createActions = useMemo(() => findCreateActions(navBarTree), [navBarTree]);
useMediaQueryChange({
breakpoint,
onChange: (e) => {
setIsSmallScreen(e.matches);
setIsSmallScreen(!e.matches);
},
});

4
public/app/core/components/AppChrome/TopBar/TopSearchBarSection.test.tsx
View File

@ -17,7 +17,7 @@ describe('TopSearchBarSection', () => {
(window.matchMedia as jest.Mock).mockImplementation(() => ({
addEventListener: jest.fn(),
removeEventListener: jest.fn(),
matches: () => false,
matches: true,
}));
const { container } = renderComponent();
@ -30,7 +30,7 @@ describe('TopSearchBarSection', () => {
(window.matchMedia as jest.Mock).mockImplementation(() => ({
addEventListener: jest.fn(),
removeEventListener: jest.fn(),
matches: () => true,
matches: false,
}));
const { container } = renderComponent();

4
public/app/core/components/AppChrome/TopBar/TopSearchBarSection.tsx
View File

@ -15,12 +15,12 @@ export function TopSearchBarSection({ children, align = 'left' }: TopSearchBarSe
const theme = useTheme2();
const breakpoint = theme.breakpoints.values.sm;
const [isSmallScreen, setIsSmallScreen] = useState(window.matchMedia(`(max-width: ${breakpoint}px)`).matches);
const [isSmallScreen, setIsSmallScreen] = useState(!window.matchMedia(`(min-width: ${breakpoint}px)`).matches);
useMediaQueryChange({
breakpoint,
onChange: (e: MediaQueryListEvent) => {
setIsSmallScreen(e.matches);
setIsSmallScreen(!e.matches);
},
});

4
public/app/core/components/AppChrome/TopSearchBarCommandPaletteTrigger.tsx
View File

@ -18,12 +18,12 @@ export function TopSearchBarCommandPaletteTrigger() {
const breakpoint = theme.breakpoints.values.sm;
const [isSmallScreen, setIsSmallScreen] = useState(window.matchMedia(`(max-width: ${breakpoint}px)`).matches);
const [isSmallScreen, setIsSmallScreen] = useState(!window.matchMedia(`(min-width: ${breakpoint}px)`).matches);
useMediaQueryChange({
breakpoint,
onChange: (e) => {
setIsSmallScreen(e.matches);
setIsSmallScreen(!e.matches);
},
});

2
public/app/core/hooks/useMediaQueryChange.ts
View File

@ -8,7 +8,7 @@ export function useMediaQueryChange({
onChange: (e: MediaQueryListEvent) => void;
}) {
useEffect(() => {
const mediaQuery = window.matchMedia(`(max-width: ${breakpoint}px)`);
const mediaQuery = window.matchMedia(`(min-width: ${breakpoint}px)`);
const onMediaQueryChange = (e: MediaQueryListEvent) => onChange(e);
mediaQuery.addEventListener('change', onMediaQueryChange);