From 5653075089fb2627852aabd38bc4167536999063 Mon Sep 17 00:00:00 2001 From: timsuchanek Date: Fri, 24 Nov 2017 16:01:27 +0100 Subject: [PATCH] Fix light theme spacing. Closes #256 --- .../src/components/HistoryPopup.tsx | 2 +- .../components/Playground/GraphQLEditor.tsx | 17 ++++++- .../Playground/GraphQLEditorSession.tsx | 2 +- .../src/components/Playground/TabBar.tsx | 2 + .../src/styles/graphiql_light.css | 50 +++---------------- 5 files changed, 27 insertions(+), 46 deletions(-) diff --git a/packages/graphql-playground/src/components/HistoryPopup.tsx b/packages/graphql-playground/src/components/HistoryPopup.tsx index 960494d79..ec20c6152 100644 --- a/packages/graphql-playground/src/components/HistoryPopup.tsx +++ b/packages/graphql-playground/src/components/HistoryPopup.tsx @@ -3,7 +3,7 @@ import * as Modal from 'react-modal' import HistoryHeader from './HistoryPopup/HistoryHeader' import { HistoryFilter, Session } from '../types' import HistoryItems from './HistoryPopup/HistoryItems' -import { GraphQLEditor } from './Playground/GraphQLEditor' +import GraphQLEditor from './Playground/GraphQLEditor' import { $v, Icon } from 'graphcool-styles' import { modalStyle } from '../constants' import { withTheme, ThemeInterface } from './Theme' diff --git a/packages/graphql-playground/src/components/Playground/GraphQLEditor.tsx b/packages/graphql-playground/src/components/Playground/GraphQLEditor.tsx index 92d128188..ebe3d0165 100644 --- a/packages/graphql-playground/src/components/Playground/GraphQLEditor.tsx +++ b/packages/graphql-playground/src/components/Playground/GraphQLEditor.tsx @@ -37,6 +37,8 @@ import { flatMap, groupBy } from 'lodash' import Results from './Results' import ReponseTracing from './ResponseTracing' import GenerateCodeButton from './GenerateCodeButton' +import withTheme from '../Theme/withTheme' +import { ThemeInterface } from '../Theme/index' /** * The top-level React component for GraphQLEditor, intended to encompass the entire @@ -132,7 +134,10 @@ export interface ToolbarButtonProps extends SimpleProps { label: string } -export class GraphQLEditor extends React.PureComponent { +export class GraphQLEditor extends React.PureComponent< + Props & ThemeInterface, + State +> { static Logo: (props: SimpleProps) => JSX.Element static Toolbar: (props: SimpleProps) => JSX.Element static Footer: (props: SimpleProps) => JSX.Element @@ -392,6 +397,9 @@ export class GraphQLEditor extends React.PureComponent { @p: .relative; border-top: 8px solid $darkBlue; } + .queryWrap.light { + border-top: 8px solid #eeeff0; + } .graphiql-button { @p: .white50, .bgDarkBlue, .ttu, .f14, .fw6, .br2, .pointer; @@ -470,7 +478,10 @@ export class GraphQLEditor extends React.PureComponent { className="editorBar" onMouseDown={this.handleResizeStart} > -
+
{ } } +export default withTheme(GraphQLEditor) + // Duck-type promise detection. function isPromise(value) { return typeof value === 'object' && typeof value.then === 'function' diff --git a/packages/graphql-playground/src/components/Playground/GraphQLEditorSession.tsx b/packages/graphql-playground/src/components/Playground/GraphQLEditorSession.tsx index fdf965e67..a02f5c552 100644 --- a/packages/graphql-playground/src/components/Playground/GraphQLEditorSession.tsx +++ b/packages/graphql-playground/src/components/Playground/GraphQLEditorSession.tsx @@ -1,6 +1,6 @@ import * as React from 'react' import { PermissionSession, ServiceInformation, Session } from '../../types' -import { GraphQLEditor } from './GraphQLEditor' +import GraphQLEditor from './GraphQLEditor' import { Header } from './HttpHeaders/HttpHeaders' import { Viewer } from '../Playground' diff --git a/packages/graphql-playground/src/components/Playground/TabBar.tsx b/packages/graphql-playground/src/components/Playground/TabBar.tsx index b6ee27448..40d4a2201 100644 --- a/packages/graphql-playground/src/components/Playground/TabBar.tsx +++ b/packages/graphql-playground/src/components/Playground/TabBar.tsx @@ -161,6 +161,8 @@ export const TabBar = withTheme( height: 8px; background-color: #eeeff0; width: 100%; + top: -2px; + position: relative; } .tab:hover { @p: .bgDarkBlue; diff --git a/packages/graphql-playground/src/styles/graphiql_light.css b/packages/graphql-playground/src/styles/graphiql_light.css index 720621985..0dc7aaca7 100644 --- a/packages/graphql-playground/src/styles/graphiql_light.css +++ b/packages/graphql-playground/src/styles/graphiql_light.css @@ -134,7 +134,6 @@ } .docs-graphiql .graphiql-container .queryWrap { - border: none; display: -webkit-box; display: -ms-flexbox; display: flex; @@ -209,7 +208,7 @@ } .docs-graphiql .graphiql-container .variable-editor .CodeMirror { - background: rgba(0,0,0,.05) !important; + background: transparent !important; } .docs-graphiql .graphiql-container .variable-editor .CodeMirror-gutters { @@ -233,13 +232,17 @@ } .docs-graphiql .variable-editor { + background: rgba(0,0,0,.05); height: 44px; } -.docs-graphiql .graphiql-container .variable-editor-title { - padding: 12px 15px 13px; - line-height: 19px; +.docs-graphiql .graphiql-container .response-tracing { background: rgba(0,0,0,.05); +} + +.docs-graphiql .graphiql-container .variable-editor-title, +.docs-graphiql .graphiql-container .response-tracing-title { + background: none; color: rgba(0,0,0,.3); } @@ -401,38 +404,10 @@ .docs-graphiql .graphiql-container .CodeMirror { color: rgba(255,255,255,.3); - font-family: - 'Source Code Pro', - 'Consolas', - 'Inconsolata', - 'Droid Sans Mono', - 'Monaco', - monospace; - font-size: 14px; - height: 100%; - left: 0; - position: absolute; - top: 0; - width: 100%; -} - -.docs-graphiql .graphiql-container .CodeMirror-lines { - padding: 0; } .docs-graphiql .CodeMirror-hint-information .content { - box-orient: vertical; color: #141823; - display: -webkit-box; - display: -ms-flexbox; - display: flex; - font-family: system, -apple-system, 'San Francisco', '.SFNSDisplay-Regular', 'Segoe UI', Segoe, 'Segoe WP', 'Helvetica Neue', helvetica, 'Lucida Grande', arial, sans-serif; - font-size: 13px; - line-clamp: 3; - line-height: 16px; - max-height: 48px; - overflow: hidden; - text-overflow: -o-ellipsis-lastline; } .docs-graphiql .CodeMirror-hint-information .content p:first-child { @@ -632,15 +607,6 @@ height: auto; } -/* PADDING */ - -.docs-graphiql .CodeMirror-lines { - padding: 4px 0; /* Vertical padding around content */ -} -.docs-graphiql .CodeMirror pre { - padding: 0 4px; /* Horizontal padding of content */ -} - .docs-graphiql .CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler { background-color: white; /* The little square between H and V scrollbars */ }