diff --git a/css/app.css b/css/app.css index bee47931619..94618a265ad 100644 --- a/css/app.css +++ b/css/app.css @@ -215,6 +215,21 @@ html, body { padding-left: 3px; } +#graphiql-container .tool-button { + cursor: pointer; + text-decoration: none; + font-family: sans-serif; + color: #333; + padding: 2px 4px; + margin: 0 4px; +} +#graphiql-container .tool-button:active { + color: #999; +} +#graphiql-container .tool-button.error { + color: #c00; +} + #graphiql-container .execute-button { background: -webkit-linear-gradient(#fdfdfd, #d2d3d6); background: linear-gradient(#fdfdfd, #d2d3d6); diff --git a/src/components/GraphiQL.js b/src/components/GraphiQL.js index a4e3f956a4b..6ef6f1311c9 100644 --- a/src/components/GraphiQL.js +++ b/src/components/GraphiQL.js @@ -8,10 +8,13 @@ import React, { PropTypes } from 'react'; import ReactDOM from 'react-dom'; +import { print } from 'graphql/language/printer'; +import { parse } from 'graphql/language/parser'; import { GraphQLSchema } from 'graphql/type'; import { buildClientSchema } from 'graphql/utilities'; import find from 'graphql/jsutils/find'; import { ExecuteButton } from './ExecuteButton'; +import { PrettifyButton } from './PrettifyButton'; import { QueryEditor } from './QueryEditor'; import { VariableEditor } from './VariableEditor'; import { ResultViewer } from './ResultViewer'; @@ -261,6 +264,7 @@ export class GraphiQL extends React.Component {