djkato/saleor-dashboard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Overwrite variables for GraphQL playground (#3504)

Browse source 
Co-authored-by: Bartłomiej Wiaduch <tukan2can@gmail.com>
This commit is contained in:
Timur Carpeev 2023-04-25 13:16:47 +02:00 committed by GitHub
parent 2d331a15d8
commit 0cf9c1721e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 28 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
src/components/DevModePanel/DevModePanel.tsx
View file

@ -1,3 +1,4 @@
import { useDashboardTheme } from "@dashboard/components/GraphiQL/styles";
import { createGraphiQLFetcher } from "@graphiql/toolkit"; import { createGraphiQLFetcher } from "@graphiql/toolkit";
import { Dialog, DialogContent } from "@material-ui/core"; import { Dialog, DialogContent } from "@material-ui/core";
import { DialogHeader } from "@saleor/macaw-ui"; import { DialogHeader } from "@saleor/macaw-ui";
@ -26,9 +27,22 @@ export const DevModePanel: React.FC<DevModePanelProps> = ({
}); });
const intl = useIntl(); const intl = useIntl();
const { rootStyle } = useDashboardTheme();
const { devModeContent, variables } = useDevModeContext(); const { devModeContent, variables } = useDevModeContext();
const overwriteCodeMirrorCSSVariables = {
__html: `
.graphiql-container, .CodeMirror-info, .CodeMirror-lint-tooltip, reach-portal{
--font-size-hint: ${rootStyle["--font-size-hint"]} !important;
--font-size-inline-code: ${rootStyle["--font-size-inline-code"]} !important;
--font-size-body: ${rootStyle["--font-size-body"]} !important;
--font-size-h4: ${rootStyle["--font-size-h4"]} !important;
--font-size-h3: ${rootStyle["--font-size-h3"]} !important;
--font-size-h2: ${rootStyle["--font-size-h2"]} !important;
`,
};
return ( return (
<Dialog <Dialog
maxWidth="xl" maxWidth="xl"
@ -37,6 +51,7 @@ export const DevModePanel: React.FC<DevModePanelProps> = ({
style={{ zIndex: 5 }} style={{ zIndex: 5 }}
PaperProps={{ style: { height: "100%" } }} PaperProps={{ style: { height: "100%" } }}
> >
<style dangerouslySetInnerHTML={overwriteCodeMirrorCSSVariables}></style>
<DialogHeader onClose={() => setDevModeVisibility(false)}> <DialogHeader onClose={() => setDevModeVisibility(false)}>
{intl.formatMessage(messages.title)} {intl.formatMessage(messages.title)}
</DialogHeader> </DialogHeader>

13
src/components/GraphiQL/GraphiQL.tsx
View file

@ -205,12 +205,25 @@ export function GraphiQLInterface(props: GraphiQLInterfaceProps) {
} }
}; };
const overwriteCodeMirrorCSSVariables = {
__html: `
.graphiql-container, .CodeMirror-info, .CodeMirror-lint-tooltip, reach-portal{
--font-size-hint: ${rootStyle["--font-size-hint"]} !important;
--font-size-inline-code: ${rootStyle["--font-size-inline-code"]} !important;
--font-size-body: ${rootStyle["--font-size-body"]} !important;
--font-size-h4: ${rootStyle["--font-size-h4"]} !important;
--font-size-h3: ${rootStyle["--font-size-h3"]} !important;
--font-size-h2: ${rootStyle["--font-size-h2"]} !important;
`,
};
return ( return (
<div <div
data-test-id="graphiql-container" data-test-id="graphiql-container"
className="graphiql-container" className="graphiql-container"
style={rootStyle} style={rootStyle}
> >
<style dangerouslySetInnerHTML={overwriteCodeMirrorCSSVariables}></style>
<div className="graphiql-sidebar"> <div className="graphiql-sidebar">
<div className="graphiql-sidebar-section"> <div className="graphiql-sidebar-section">
{pluginContext?.plugins.map(plugin => { {pluginContext?.plugins.map(plugin => {