Provide generic toolbar button

README.md

@@ -111,4 +111,6 @@ and children.
 
 * `<GraphiQL.Toolbar>`: Add a custom toolbar above GraphiQL.
 
+* `<GraphiQL.ToolbarButton>`: Add a button to the toolbar above GraphiQL.
+
 * `<GraphiQL.Footer>`: Add a custom footer below GraphiQL Results.

css/app.css

@@ -213,19 +213,34 @@
   padding-left: 3px;
 }
 
-#graphiql-container .tool-button {
+#graphiql-container .toolbar-button {
+  background: #fdfdfd;
+  background: -webkit-linear-gradient(#fbfbfb, #f8f8f8);
+  background:         linear-gradient(#fbfbfb, #f8f8f8);
+  border: solid 0.5px;
+  border-color: #d3d3d3 #d0d0d0 #bababa;
+  border-radius: 4px;
+  box-shadow: 0 1px 1px -1px rgba(0, 0, 0, 0.13), inset 0 1px #fff;
+  color: #444;
   cursor: pointer;
-  text-decoration: none;
-  font-family: sans-serif;
-  color: #333;
-  padding: 2px 4px;
-  margin: 0 4px;
+  margin: 0 5px 0;
+  padding: 2px 8px 4px;
 }
-#graphiql-container .tool-button:active {
-  color: #999;
+
+#graphiql-container .toolbar-button:active {
+  background: -webkit-linear-gradient(#ececec, #d8d8d8);
+  background:         linear-gradient(#ececec, #d8d8d8);
+  border-color: #cacaca #c9c9c9 #b0b0b0;
+  box-shadow:
+    0 1px 0 #fff,
+    inset 0 1px rgba(255, 255, 255, 0.2),
+    inset 0 1px 1px rgba(0, 0, 0, 0.08);
 }
-#graphiql-container .tool-button.error {
-  color: #c00;
+
+#graphiql-container .toolbar-button.error {
+  background: -webkit-linear-gradient(#fdf3f3, #e6d6d7);
+  background:         linear-gradient(#fdf3f3, #e6d6d7);
+  color: #b00;
 }
 
 #graphiql-container .execute-button {

resources/build.sh

@@ -3,5 +3,5 @@
 rm -rf dist/ && mkdir -p dist/ &&
 babel src --ignore __tests__ --out-dir dist/ &&
 browserify -g browserify-shim -s GraphiQL dist/index.js > graphiql.js &&
-browserify -g browserify-shim -g uglifyify -s GraphiQL dist/index.js | uglifyjs -c --screw-ie8 > graphiql.min.js &&
+#browserify -g browserify-shim -g uglifyify -s GraphiQL dist/index.js | uglifyjs -c --screw-ie8 > graphiql.min.js &&
 cat css/*.css > graphiql.css

src/components/GraphiQL.js

@@ -16,7 +16,7 @@ import {
 } from 'graphql';
 
 import { ExecuteButton } from './ExecuteButton';
-import { PrettifyButton } from './PrettifyButton';
+import { ToolbarButton } from './ToolbarButton';
 import { QueryEditor } from './QueryEditor';
 import { VariableEditor } from './VariableEditor';
 import { ResultViewer } from './ResultViewer';
@@ -81,6 +81,8 @@ import {
  *
  *   - <GraphiQL.Toolbar> Add a custom toolbar above GraphiQL.
  *
+ *   - <GraphiQL.ToolbarButton> Add a button to the toolbar above GraphiQL.
+ *
  *   - <GraphiQL.Footer> Add a custom footer below GraphiQL Results.
  *
  *
@@ -264,7 +266,15 @@ export class GraphiQL extends React.Component {
     var logo = find(children, child => child.type === GraphiQL.Logo) ||
       <GraphiQL.Logo />;
 
-    var toolbar = find(children, child => child.type === GraphiQL.Toolbar);
+    var toolbar = find(children, child => child.type === GraphiQL.Toolbar) ||
+      <GraphiQL.Toolbar>
+        <GraphiQL.ToolbarButton
+          onClick={this._prettifyQuery}
+          title="Prettify Query"
+          label="Prettify"
+        />
+      </GraphiQL.Toolbar>;
+
     var footer = find(children, child => child.type === GraphiQL.Footer);
 
     var queryWrapStyle = {
@@ -289,7 +299,6 @@ export class GraphiQL extends React.Component {
             <div className="topBar">
               {logo}
               <ExecuteButton onClick={this._runEditorQuery} />
-              <PrettifyButton onClick={this._prettifyQuery} />
               {toolbar}
             </div>
             {!this.state.docsOpen &&
@@ -615,6 +624,9 @@ GraphiQL.Toolbar = class GraphiQLToolbar extends React.Component {
   }
 };
 
+// Add a buttom to the Toolbar.
+GraphiQL.ToolbarButton = ToolbarButton;
+
 // Configure the UI by providing this Component as a child of GraphiQL.
 GraphiQL.Footer = class GraphiQLFooter extends React.Component {
   render() {

src/components/PrettifyButton.js → src/components/ToolbarButton.js

@@ -10,20 +10,20 @@ import React, { PropTypes } from 'react';
 
 
 /**
- * PrettifyButton
+ * ToolbarButton
  *
- * A {} button that allows to unminify a graphql query
+ * A button to use within the Toolbar.
  */
-export class PrettifyButton extends React.Component {
+export class ToolbarButton extends React.Component {
   static propTypes = {
-    onClick: PropTypes.func
+    onClick: PropTypes.func,
+    title: PropTypes.string,
+    label: PropTypes.string,
   }
 
   constructor(props) {
     super(props);
-    this.state = {
-      error: null
-    };
+    this.state = { error: null };
   }
 
   onClick = e => {
@@ -40,10 +40,10 @@ export class PrettifyButton extends React.Component {
     const { error } = this.state;
     return (
       <a
-        className={'tool-button' + (error ? ' error' : '')}
+        className={'toolbar-button' + (error ? ' error' : '')}
         onClick={this.onClick}
-        title={error ? error.message : 'Prettify Query'}>
-        {'{ }'}
+        title={error ? error.message : this.props.title}>
+        {this.props.label}
       </a>
     );
   }