Skip to content

fix(query-devtools): Inherit font size from parent instead of root #6246

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Oct 25, 2023
Merged

fix(query-devtools): Inherit font size from parent instead of root #6246

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3be7d9c
fix(query-devtools): Inherit font size from parent instead of root
ardeora Oct 25, 2023
1284e57
Fix setting menu portal styles
ardeora Oct 25, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
64 changes: 50 additions & 14 deletions packages/query-devtools/src/Devtools.tsx
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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