Editor dynamic styles (#641)

* First styling * More transforming * More refactoring done * More refactoring * Bottom editors done * Variable and tracking editors * Dynamic colors * Almost done * More stuff done * Before last commit * Finished dark * Fix settings * Fix docs * Rebase * Fix global styles * Quicker then expected :D * Dynamic fonts, cursors, finished light theme * Result without subscriptions * Remove endpoint * disable sdl * update deps * Fix overflow and move cursor * clean deps, add default settings
graphql · May 30, 2018 · aa9dbc5 · aa9dbc5
1 parent b6a0c3b
commit aa9dbc5
Show file tree

Hide file tree

Showing 26 changed files with 1,827 additions and 587 deletions.
diff --git a/packages/graphql-playground-react/package.json b/packages/graphql-playground-react/package.json
@@ -37,13 +37,9 @@
   ],
   "devDependencies": {
     "@types/deasync": "0.1.0",
-    "@types/express": "4.11.0",
-    "@types/hapi": "16.1.12",
-    "@types/jest": "22.1.1",
-    "@types/koa": "2.0.43",
-    "@types/node": "9.4.0",
-    "@types/react": "16.0.36",
-    "@types/react-dom": "16.0.4",
+    "@types/jest": "22.2.3",
+    "@types/node": "10.1.4",
+    "@types/react": "16.3.14",
     "@types/zen-observable": "^0.5.3",
     "autoprefixer": "7.2.5",
     "babel-cli": "6.26.0",
@@ -140,7 +136,7 @@
     "postcss-modules": "^1.1.0",
     "prettier": "^1.13.0",
     "prop-types": "^15.6.0",
-    "query-string": "^6.1.0",
+    "query-string": "5",
     "react": "^16.3.1",
     "react-addons-shallow-compare": "^15.6.2",
     "react-codemirror": "^1.0.0",

diff --git a/packages/graphql-playground-react/src/components/FileEditor.tsx b/packages/graphql-playground-react/src/components/FileEditor.tsx
@@ -5,6 +5,7 @@ import { QueryEditor } from './Playground/QueryEditor'
 import { createStructuredSelector } from 'reselect'
 import { getFile } from '../state/sessions/selectors'
 import { editFile } from '../state/sessions/actions'
+import EditorWrapper, { Container } from './Playground/EditorWrapper'
 import { connect } from 'react-redux'
 
 export interface Props {
@@ -15,16 +16,18 @@ export interface Props {
 class FileEditor extends React.Component<Props, {}> {
   render() {
     return (
-      <Wrapper className="graphiql-container">
-        <div className="editorWrap">
-          <div className="queryWrap">
-            <QueryEditor
-              value={this.props.value}
-              onChange={this.props.onChange}
-            />
-          </div>
-        </div>
-      </Wrapper>
+      <Container>
+        <Wrapper>
+          <EditorWrapper>
+            <QueryWrap>
+              <QueryEditor
+                value={this.props.value}
+                onChange={this.props.onChange}
+              />
+            </QueryWrap>
+          </EditorWrapper>
+        </Wrapper>
+      </Container>
     )
   }
 }
@@ -58,7 +61,10 @@ const Wrapper = styled.div`
       color: rgba(42, 126, 210, 1);
     }
   }
-  .CodeMirror-gutters {
-    background: none !important;
-  }
+`
+
+const QueryWrap = styled.div`
+  display: flex;
+  flex-direction: column;
+  flex: 1;
 `
diff --git a/packages/graphql-playground-react/src/components/HistoryPopup.tsx b/packages/graphql-playground-react/src/components/HistoryPopup.tsx
@@ -19,6 +19,7 @@ import { duplicateSession } from '../state/sessions/actions'
 import { toggleHistoryItemStarring } from '../state/history/actions'
 import { Session } from '../state/sessions/reducers'
 import { OrderedMap } from 'immutable'
+import { Container } from './Playground/EditorWrapper'
 
 export interface ReduxProps {
   isOpen: boolean
@@ -122,11 +123,11 @@ class HistoryPopup extends React.Component<
                     'graphiql-wrapper': localTheme === 'light',
                   })}
                 >
-                  <div className="graphiql-container">
-                    <div className="queryWrap">
+                  <Container>
+                    <QueryWrap>
                       <QueryEditor value={selectedItem.query} />
-                    </div>
-                  </div>
+                    </QueryWrap>
+                  </Container>
                 </GraphiqlWrapper>
               </Big>
             </Right>
@@ -182,12 +183,6 @@ export default withTheme<{}>(
 const Wrapper = styled.div`
   display: flex;
   min-height: 500px;
-
-  & .graphiql-container.graphiql-container {
-    & .queryWrap.queryWrap {
-      border-top: none;
-    }
-  }
 `
 
 const Left = styled.div`
@@ -280,3 +275,9 @@ const GraphiqlWrapper = Big.extend`
   display: flex;
   flex: 1 1 auto;
 `
+
+const QueryWrap = styled.div`
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+`
diff --git a/packages/graphql-playground-react/src/components/Playground/ConfigEditor.tsx b/packages/graphql-playground-react/src/components/Playground/ConfigEditor.tsx
@@ -1,4 +1,6 @@
 import * as React from 'react'
+import EditorWrapper from './EditorWrapper'
+import { styled } from '../../styled'
 
 export interface Props {
   value?: string
@@ -123,7 +125,11 @@ export class ConfigEditor extends React.Component<Props, {}> {
   }
 
   render() {
-    return <div className="codemirrorWrap" ref={this.setNode} />
+    return (
+      <EditorWrapper>
+        <Editor innerRef={this.setNode} />
+      </EditorWrapper>
+    )
   }
 
   setNode = node => {
@@ -166,3 +172,9 @@ export class ConfigEditor extends React.Component<Props, {}> {
     }
   }
 }
+
+const Editor = styled.div`
+  flex: 1;
+  height: 100%;
+  position: relative;
+`
diff --git a/packages/graphql-playground-react/src/components/Playground/DocExplorer/DocsStyles.tsx b/packages/graphql-playground-react/src/components/Playground/DocExplorer/DocsStyles.tsx
@@ -0,0 +1,14 @@
+import * as React from 'react'
+import { styled } from '../../../styled'
+
+const Title = styled.div`
+  color: rgba(0, 0, 0, 0.3);
+  cursor: default;
+  font-size: 14px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  padding: 16px;
+  user-select: none;
+`
+export const CategoryTitle = ({ children }) => <Title>{children}</Title>
diff --git a/packages/graphql-playground-react/src/components/Playground/DocExplorer/FieldDoc.tsx b/packages/graphql-playground-react/src/components/Playground/DocExplorer/FieldDoc.tsx
@@ -13,6 +13,7 @@ import ScalarTypeSchema from './DocsTypes/ScalarType'
 import EnumTypeSchema from './DocsTypes/EnumTypeSchema'
 import UnionTypeSchema from './DocsTypes/UnionTypeSchema'
 import { getDeeperType, serialize } from '../util/stack'
+import { CategoryTitle } from './DocsStyles'
 
 export interface Props {
   schema: any
@@ -115,7 +116,7 @@ export default class FieldDoc extends React.Component<Props, State> {
           markdown={field.description || ''}
         />
 
-        <div className="doc-category-title">{`${typeInstance} details`}</div>
+        <CategoryTitle>{`${typeInstance} details`}</CategoryTitle>
         {type.description &&
           type.description.length > 0 && (
             <div className="markdown-content">
@@ -148,7 +149,7 @@ export default class FieldDoc extends React.Component<Props, State> {
 
         {obj.args.length > 0 && (
           <div>
-            <div className="doc-category-title">arguments</div>
+            <CategoryTitle>arguments</CategoryTitle>
             {obj.args.map((arg, index) => (
               <div key={arg.name}>
                 <div>
@@ -166,7 +167,7 @@ export default class FieldDoc extends React.Component<Props, State> {
 
         {obj.implementations.length > 0 && (
           <div>
-            <div className="doc-category-title">implementations</div>
+            <CategoryTitle>implementations</CategoryTitle>
             {obj.implementations.map((data, index) => (
               <TypeLink
                 key={data.name}

diff --git a/packages/graphql-playground-react/src/components/Playground/DocExplorer/GraphDocs.tsx b/packages/graphql-playground-react/src/components/Playground/DocExplorer/GraphDocs.tsx
@@ -26,6 +26,7 @@ import { GraphQLSchema } from 'graphql'
 import { getSessionDocs } from '../../../state/docs/selectors'
 import { getSelectedSessionIdFromRoot } from '../../../state/sessions/selectors'
 import { createStructuredSelector } from 'reselect'
+import { styled } from '../../../styled'
 
 interface StateFromProps {
   docs: {
@@ -120,19 +121,17 @@ class GraphDocs extends React.Component<
     } else if (schema === null) {
       // Schema is null when it explicitly does not exist, typically due to
       // an error during introspection.
-      emptySchema = (
-        <div className="error-container">{'No Schema Available'}</div>
-      )
+      emptySchema = <ErrorContainer>{'No Schema Available'}</ErrorContainer>
     }
 
     return (
-      <div
+      <Docs
         className={cn('graph-docs docExplorerWrap docs', { open: docsOpen })}
         style={docsStyle}
-        ref={this.setRef}
+        innerRef={this.setRef}
       >
         <style jsx={true} global={true}>{`
-          .graphiql-container .doc-category-title {
+          .graph-docs .doc-category-title {
             @p: .mh0, .ph16;
             border: none;
           }
@@ -159,13 +158,6 @@ class GraphDocs extends React.Component<
             padding: 1px 2px;
             background: rgba(0, 0, 0, 0.06);
           }
-          .graph-docs {
-            @p: .absolute, .h100;
-            right: -2px;
-          }
-          .graph-docs.open {
-            z-index: 2000;
-          }
           .docs-button {
             @p: .absolute, .white, .bgGreen, .pv6, .z2, .ttu, .fw6, .f12, .ph10,
               .pointer;
@@ -179,23 +171,11 @@ class GraphDocs extends React.Component<
             border-top-left-radius: 2px;
             border-top-right-radius: 2px;
           }
-          .doc-explorer {
-            @p: .flex, .relative, .h100;
-            letter-spacing: 0.3px;
-            outline: none;
-            box-shadow: -1px 1px 6px 0 rgba(0, 0, 0, 0.3);
-          }
           .doc-explorer-container {
             @p: .flex, .relative, .h100, .w100;
             overflow-x: auto;
             overflow-y: hidden;
           }
-          .doc-explorer:before {
-            @p: .top0, .bottom0, .bgGreen, .absolute, .z3;
-            left: 0px;
-            content: '';
-            width: 6px;
-          }
           .doc-explorer-gradient {
             @p: .z1, .absolute, .top0, .bottom0;
             pointer-events: none;
@@ -208,28 +188,17 @@ class GraphDocs extends React.Component<
               rgba(255, 255, 255, 0)
             );
           }
-          .docExplorerResizer {
-            @p: .top0, .bottom0, .absolute, .z5;
-            cursor: col-resize;
-            left: -7px;
-            content: '';
-            width: 20px;
-          }
         `}</style>
         <div className="docs-button" onClick={this.handleToggleDocs}>
           Schema
         </div>
-        <div
-          className="docExplorerResizer"
-          onMouseDown={this.handleDocsResizeStart}
-        />
+        <DocsResizer onMouseDown={this.handleDocsResizeStart} />
         <div className="doc-explorer-gradient" />
-        <div
-          className="doc-explorer"
+        <DocsExplorer
           onKeyDown={this.handleKeyDown}
           onMouseMove={this.handleMouseMove}
           tabIndex={0}
-          ref={this.setDocExplorerRef}
+          innerRef={this.setDocExplorerRef}
         >
           <div className="doc-explorer-container">
             {emptySchema && <ColumnDoc>{emptySchema}</ColumnDoc>}
@@ -257,8 +226,8 @@ class GraphDocs extends React.Component<
               </ColumnDoc>
             ))}
           </div>
-        </div>
-      </div>
+        </DocsExplorer>
+      </Docs>
     )
   }
 
@@ -453,3 +422,80 @@ export default connect<StateFromProps, DispatchFromProps, Props>(
   null,
   { withRef: true },
 )(GraphDocs)
+
+const Docs = styled.div`
+  background: white;
+  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
+  position: absolute;
+  right: -2px;
+  z-index: 3;
+  height: 100%;
+  font-family: 'Open Sans', sans-serif;
+  -webkit-font-smoothing: antialiased;
+
+  &.open {
+    z-index: 2000;
+  }
+
+  .field-name {
+    color: #1f61a0;
+  }
+  .type-name {
+    color: rgb(245, 160, 0);
+  }
+  .arg-name {
+    color: #1f61a9;
+  }
+
+  code {
+    font-family: 'Source Code Pro', monospace;
+    border-radius: 2px;
+    padding: 1px 2px;
+    background: rgba(0, 0, 0, 0.06);
+  }
+`
+
+const DocsExplorer = styled.div`
+  background: white;
+  display: flex;
+  position: relative;
+  height: 100%;
+  letter-spacing: 0.3px;
+  outline: none;
+  box-shadow: -1px 1px 6px 0 rgba(0, 0, 0, 0.3);
+
+  &::before {
+    top: 0;
+    bottom: 0;
+    background: ${props => props.theme.colours.green};
+    position: absolute;
+    z-index: 3;
+    left: 0px;
+    content: '';
+    width: 6px;
+  }
+`
+
+const DocsResizer = styled.div`
+  cursor: col-resize;
+  height: 100%;
+  left: -5px;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 10px;
+  z-index: 10;
+`
+
+const ErrorContainer = styled.div`
+  font-weight: bold;
+  left: 0;
+  letter-spacing: 1px;
+  opacity: 0.5;
+  position: absolute;
+  right: 0;
+  text-align: center;
+  text-transform: uppercase;
+  top: 50%;
+  transform: translate(0, -50%);
+`