Skip to content

Commit

Permalink
fix(query-devtools): Inherit font size from parent instead of root (#…
Browse files Browse the repository at this point in the history 
…6246)

This change allows setting a custom font size for the query devtools. The value is inherited from it's parent container
  • Loading branch information
@ardeora
ardeora authored Oct 25, 2023
1 parent 23f19fa commit e2a3ebd
Show file tree
Hide file tree
Showing 3 changed files with 126 additions and 90 deletions.
64 changes: 50 additions & 14 deletions packages/query-devtools/src/Devtools.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -161,8 +161,9 @@ export const Devtools: Component<DevtoolsPanelProps> = (props) => {
)
})

let transitionsContainerRef!: HTMLDivElement
createEffect(() => {
const root = document.querySelector('.tsqd-parent-container') as HTMLElement
const root = transitionsContainerRef.parentElement as HTMLElement
const height = props.localStore.height || DEFAULT_HEIGHT
const width = props.localStore.width || DEFAULT_WIDTH
const panelPosition = position()
Expand All @@ -176,6 +177,23 @@ export const Devtools: Component<DevtoolsPanelProps> = (props) => {
)
})

// Calculates the inherited font size of the parent and sets it as a CSS variable
// All the design tokens are calculated based on this variable
onMount(() => {
// This is to make sure that the font size is updated when the stylesheet is updated
// and the user focuses back on the window
const onFocus = () => {
const root = transitionsContainerRef.parentElement as HTMLElement
const fontSize = getComputedStyle(root).fontSize
root.style.setProperty('--tsqd-font-size', fontSize)
}
onFocus()
window.addEventListener('focus', onFocus)
onCleanup(() => {
window.removeEventListener('focus', onFocus)
})
})

return (
<div
// styles for animating the panel in and out
Expand Down Expand Up @@ -209,6 +227,7 @@ export const Devtools: Component<DevtoolsPanelProps> = (props) => {
`,
'tsqd-transitions-container',
)}
ref={transitionsContainerRef}
>
<TransitionGroup name="tsqd-panel-transition">
<Show when={isOpen()}>
Expand Down Expand Up @@ -444,6 +463,7 @@ const ContentView: Component<DevtoolsPanelProps> = (props) => {
setupQueryCacheSubscription()
setupMutationCacheSubscription()

let containerRef!: HTMLDivElement
const theme = useTheme()
const styles = createMemo(() => {
return theme() === 'dark' ? darkStyles : lightStyles
Expand Down Expand Up @@ -553,6 +573,13 @@ const ContentView: Component<DevtoolsPanelProps> = (props) => {
props.setLocalStore('position', pos)
}

// Sets the Font Size variable on portal menu elements since they will be outside
// the main panel container
const setComputedVariables = (el: HTMLDivElement) => {
const computedStyle = getComputedStyle(containerRef)
const variable = computedStyle.getPropertyValue('--tsqd-font-size')
el.style.setProperty('--tsqd-font-size', variable)
}
return (
<>
<div
Expand All @@ -568,6 +595,7 @@ const ContentView: Component<DevtoolsPanelProps> = (props) => {
`,
'tsqd-queries-container',
)}
ref={containerRef}
>
<div class={cx(styles().row, 'tsqd-header')}>
<div class={styles().logoAndToggleContainer}>
Expand Down Expand Up @@ -796,7 +824,9 @@ const ContentView: Component<DevtoolsPanelProps> = (props) => {
>
<Settings />
</DropdownMenu.Trigger>
<DropdownMenu.Portal>
<DropdownMenu.Portal
ref={(el) => setComputedVariables(el as HTMLDivElement)}
>
<DropdownMenu.Content
class={cx(styles().settingsMenu, 'tsqd-settings-menu')}
>
Expand All @@ -819,7 +849,9 @@ const ContentView: Component<DevtoolsPanelProps> = (props) => {
<span>Position</span>
<ChevronDown />
</DropdownMenu.SubTrigger>
<DropdownMenu.Portal>
<DropdownMenu.Portal
ref={(el) => setComputedVariables(el as HTMLDivElement)}
>
<DropdownMenu.SubContent
class={cx(
styles().settingsMenu,
Expand Down Expand Up @@ -896,7 +928,9 @@ const ContentView: Component<DevtoolsPanelProps> = (props) => {
<span>Theme</span>
<ChevronDown />
</DropdownMenu.SubTrigger>
<DropdownMenu.Portal>
<DropdownMenu.Portal
ref={(el) => setComputedVariables(el as HTMLDivElement)}
>
<DropdownMenu.SubContent
class={cx(
styles().settingsMenu,
Expand Down Expand Up @@ -1800,7 +1834,7 @@ const QueryDetails = () => {
</div>
<div
style={{
padding: '0.5rem',
padding: tokens.size[2],
}}
class="tsqd-query-details-explorer-container tsqd-query-details-data-explorer"
>
Expand All @@ -1817,7 +1851,7 @@ const QueryDetails = () => {
</div>
<div
style={{
padding: '0.5rem',
padding: tokens.size[2],
}}
class="tsqd-query-details-explorer-container tsqd-query-details-query-explorer"
>
Expand Down Expand Up @@ -1935,7 +1969,7 @@ const MutationDetails = () => {
</div>
<div
style={{
padding: '0.5rem',
padding: tokens.size[2],
}}
class="tsqd-query-details-explorer-container tsqd-query-details-query-explorer"
>
Expand All @@ -1950,7 +1984,7 @@ const MutationDetails = () => {
</div>
<div
style={{
padding: '0.5rem',
padding: tokens.size[2],
}}
class="tsqd-query-details-explorer-container tsqd-query-details-query-explorer"
>
Expand All @@ -1965,7 +1999,7 @@ const MutationDetails = () => {
</div>
<div
style={{
padding: '0.5rem',
padding: tokens.size[2],
}}
class="tsqd-query-details-explorer-container tsqd-query-details-query-explorer"
>
Expand All @@ -1980,7 +2014,7 @@ const MutationDetails = () => {
</div>
<div
style={{
padding: '0.5rem',
padding: tokens.size[2],
}}
class="tsqd-query-details-explorer-container tsqd-query-details-query-explorer"
>
Expand Down Expand Up @@ -2195,15 +2229,15 @@ const stylesFactory = (theme: 'light' | 'dark') => {
right: 0;
left: 0;
max-height: 90%;
min-height: 3.5rem;
min-height: ${size[14]};
border-bottom: ${t(colors.gray[400], colors.darkGray[300])} 1px solid;
`,
'panel-position-bottom': css`
bottom: 0;
right: 0;
left: 0;
max-height: 90%;
min-height: 3.5rem;
min-height: ${size[14]};
border-top: ${t(colors.gray[400], colors.darkGray[300])} 1px solid;
`,
'panel-position-right': css`
Expand Down Expand Up @@ -2535,6 +2569,8 @@ const stylesFactory = (theme: 'light' | 'dark') => {
outline: 2px solid ${colors.blue[800]};
}
& svg {
width: ${tokens.size[3]};
height: ${tokens.size[3]};
color: ${t(colors.gray[500], colors.gray[400])};
}
}
Expand Down Expand Up @@ -2620,8 +2656,8 @@ const stylesFactory = (theme: 'light' | 'dark') => {
border-radius: ${tokens.border.radius.sm};
background-color: ${t(colors.gray[100], colors.darkGray[400])};
border: 1px solid ${t(colors.gray[300], colors.darkGray[200])};
width: 1.625rem;
height: 1.625rem;
width: ${tokens.size[6.5]};
height: ${tokens.size[6.5]};
justify-content: center;
display: flex;
align-items: center;
Expand Down
10 changes: 5 additions & 5 deletions packages/query-devtools/src/Explorer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -517,16 +517,16 @@ const stylesFactory = (theme: 'light' | 'dark') => {
expanderButtonContainer: css`
display: flex;
align-items: center;
line-height: 1.125rem;
min-height: 1.125rem;
line-height: ${size[4]};
min-height: ${size[4]};
gap: ${size[2]};
`,
expanderButton: css`
cursor: pointer;
color: inherit;
font: inherit;
outline: inherit;
height: 1rem;
height: ${size[5]};
background: transparent;
border: none;
padding: 0;
Expand Down Expand Up @@ -568,8 +568,8 @@ const stylesFactory = (theme: 'light' | 'dark') => {
display: inline-flex;
gap: ${size[2]};
width: 100%;
margin-bottom: ${size[0.5]};
line-height: 1.125rem;
margin: ${size[0.25]} 0px;
line-height: ${size[4.5]};
align-items: center;
`,
editableInput: css`
Expand Down
142 changes: 71 additions & 71 deletions packages/query-devtools/src/theme.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -189,35 +189,35 @@ export const tokens = {
},
font: {
size: {
'2xs': '0.625rem',
xs: '0.75rem',
sm: '0.875rem',
md: '1rem',
lg: '1.125rem',
xl: '1.25rem',
'2xl': '1.5rem',
'3xl': '1.875rem',
'4xl': '2.25rem',
'5xl': '3rem',
'6xl': '3.75rem',
'7xl': '4.5rem',
'8xl': '6rem',
'9xl': '8rem',
'2xs': 'calc(var(--tsqd-font-size) * 0.625)',
xs: 'calc(var(--tsqd-font-size) * 0.75)',
sm: 'calc(var(--tsqd-font-size) * 0.875)',
md: 'var(--tsqd-font-size)',
lg: 'calc(var(--tsqd-font-size) * 1.125)',
xl: 'calc(var(--tsqd-font-size) * 1.25)',
'2xl': 'calc(var(--tsqd-font-size) * 1.5)',
'3xl': 'calc(var(--tsqd-font-size) * 1.875)',
'4xl': 'calc(var(--tsqd-font-size) * 2.25)',
'5xl': 'calc(var(--tsqd-font-size) * 3)',
'6xl': 'calc(var(--tsqd-font-size) * 3.75)',
'7xl': 'calc(var(--tsqd-font-size) * 4.5)',
'8xl': 'calc(var(--tsqd-font-size) * 6)',
'9xl': 'calc(var(--tsqd-font-size) * 8)',
},
lineHeight: {
xs: '1rem',
sm: '1.25rem',
md: '1.5rem',
lg: '1.75rem',
xl: '1.75rem',
'2xl': '2rem',
'3xl': '2.25rem',
'4xl': '2.5rem',
'5xl': '1',
'6xl': '1',
'7xl': '1',
'8xl': '1',
'9xl': '1',
xs: 'calc(var(--tsqd-font-size) * 1)',
sm: 'calc(var(--tsqd-font-size) * 1.25)',
md: 'calc(var(--tsqd-font-size) * 1.5)',
lg: 'calc(var(--tsqd-font-size) * 1.75)',
xl: 'calc(var(--tsqd-font-size) * 2)',
'2xl': 'calc(var(--tsqd-font-size) * 2.25)',
'3xl': 'calc(var(--tsqd-font-size) * 2.5)',
'4xl': 'calc(var(--tsqd-font-size) * 2.75)',
'5xl': 'calc(var(--tsqd-font-size) * 3)',
'6xl': 'calc(var(--tsqd-font-size) * 3.25)',
'7xl': 'calc(var(--tsqd-font-size) * 3.5)',
'8xl': 'calc(var(--tsqd-font-size) * 3.75)',
'9xl': 'calc(var(--tsqd-font-size) * 4)',
},
weight: {
thin: '100',
Expand All @@ -242,55 +242,55 @@ export const tokens = {
border: {
radius: {
none: '0px',
xs: '0.125rem',
sm: '0.25rem',
md: '0.375rem',
lg: '0.5rem',
xl: '0.75rem',
'2xl': '1rem',
'3xl': '1.5rem',
xs: 'calc(var(--tsqd-font-size) * 0.125)',
sm: 'calc(var(--tsqd-font-size) * 0.25)',
md: 'calc(var(--tsqd-font-size) * 0.375)',
lg: 'calc(var(--tsqd-font-size) * 0.5)',
xl: 'calc(var(--tsqd-font-size) * 0.75)',
'2xl': 'calc(var(--tsqd-font-size) * 1)',
'3xl': 'calc(var(--tsqd-font-size) * 1.5)',
full: '9999px',
},
},
size: {
0: '0px',
0.25: '0.0625rem',
0.5: '0.125rem',
1: '0.25rem',
1.5: '0.375rem',
2: '0.5rem',
2.5: '0.625rem',
3: '0.75rem',
3.5: '0.875rem',
4: '1rem',
4.5: '1.125rem',
5: '1.25rem',
5.5: '1.375rem',
6: '1.5rem',
6.5: '1.625rem',
7: '1.75rem',
8: '2rem',
9: '2.25rem',
10: '2.5rem',
11: '2.75rem',
12: '3rem',
14: '3.5rem',
16: '4rem',
20: '5rem',
24: '6rem',
28: '7rem',
32: '8rem',
36: '9rem',
40: '10rem',
44: '11rem',
48: '12rem',
52: '13rem',
56: '14rem',
60: '15rem',
64: '16rem',
72: '18rem',
80: '20rem',
96: '24rem',
0.25: 'calc(var(--tsqd-font-size) * 0.0625)',
0.5: 'calc(var(--tsqd-font-size) * 0.125)',
1: 'calc(var(--tsqd-font-size) * 0.25)',
1.5: 'calc(var(--tsqd-font-size) * 0.375)',
2: 'calc(var(--tsqd-font-size) * 0.5)',
2.5: 'calc(var(--tsqd-font-size) * 0.625)',
3: 'calc(var(--tsqd-font-size) * 0.75)',
3.5: 'calc(var(--tsqd-font-size) * 0.875)',
4: 'calc(var(--tsqd-font-size) * 1)',
4.5: 'calc(var(--tsqd-font-size) * 1.125)',
5: 'calc(var(--tsqd-font-size) * 1.25)',
5.5: 'calc(var(--tsqd-font-size) * 1.375)',
6: 'calc(var(--tsqd-font-size) * 1.5)',
6.5: 'calc(var(--tsqd-font-size) * 1.625)',
7: 'calc(var(--tsqd-font-size) * 1.75)',
8: 'calc(var(--tsqd-font-size) * 2)',
9: 'calc(var(--tsqd-font-size) * 2.25)',
10: 'calc(var(--tsqd-font-size) * 2.5)',
11: 'calc(var(--tsqd-font-size) * 2.75)',
12: 'calc(var(--tsqd-font-size) * 3)',
14: 'calc(var(--tsqd-font-size) * 3.5)',
16: 'calc(var(--tsqd-font-size) * 4)',
20: 'calc(var(--tsqd-font-size) * 5)',
24: 'calc(var(--tsqd-font-size) * 6)',
28: 'calc(var(--tsqd-font-size) * 7)',
32: 'calc(var(--tsqd-font-size) * 8)',
36: 'calc(var(--tsqd-font-size) * 9)',
40: 'calc(var(--tsqd-font-size) * 10)',
44: 'calc(var(--tsqd-font-size) * 11)',
48: 'calc(var(--tsqd-font-size) * 12)',
52: 'calc(var(--tsqd-font-size) * 13)',
56: 'calc(var(--tsqd-font-size) * 14)',
60: 'calc(var(--tsqd-font-size) * 15)',
64: 'calc(var(--tsqd-font-size) * 16)',
72: 'calc(var(--tsqd-font-size) * 18)',
80: 'calc(var(--tsqd-font-size) * 20)',
96: 'calc(var(--tsqd-font-size) * 24)',
},
shadow: Shadow,
zIndices: {
Expand Down

0 comments on commit e2a3ebd

Please sign in to comment.