Merge pull request #38 from carlosms/issue-18-resize

carlosms · web-flow · commit 5967d42c9a4c · 2018-05-23T16:03:20.000+02:00
Split panels horizontally with resize
diff --git a/.github/screenshot.png b/.github/screenshot.png
diff --git a/frontend/package.json b/frontend/package.json
@@ -12,6 +12,7 @@
     "react-dom": "^16.3.2",
     "react-helmet": "^5.2.0",
     "react-scripts": "1.1.4",
+    "react-split-pane": "^0.1.77",
     "react-table": "^6.8.2"
   },
   "scripts": {
diff --git a/frontend/src/App.js b/frontend/src/App.js
@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import { Helmet } from 'react-helmet';
 import { Grid, Row, Col } from 'react-bootstrap';
+import SplitPane from 'react-split-pane';
 import QueryBox from './components/QueryBox';
 import TabbedResults from './components/TabbedResults';
 import api from './api';
@@ -102,7 +103,7 @@ GROUP BY committer_email, month, repo_id`,
     let resultsElem = '';
     if (results.size > 0) {
       resultsElem = (
-        <Col xs={12}>
+        <Col xs={12} className="full-height">
           <TabbedResults
             results={results}
             handleRemoveResult={this.handleRemoveResult}
@@ -111,24 +112,33 @@ GROUP BY committer_email, month, repo_id`,
         </Col>
       );
     }
-
     return (
       <div className="app">
         <Helmet>
           <title>Gitbase Playground</title>
         </Helmet>
-        <Grid>
-          <Row className="query-row">
-            <Col xs={12}>
-              <QueryBox
-                sql={this.state.sql}
-                schema={this.state.schema}
-                handleTextChange={this.handleTextChange}
-                handleSubmit={this.handleSubmit}
-              />
+        <Grid className="full-height">
+          <Row className="full-height">
+            <Col xs={12} className="full-height">
+              <SplitPane split="horizontal" defaultSize={250} minSize={100}>
+                <Grid className="full-height full-width">
+                  <Row className="query-box-row">
+                    <Col xs={12} className="full-height">
+                      <QueryBox
+                        sql={this.state.sql}
+                        schema={this.state.schema}
+                        handleTextChange={this.handleTextChange}
+                        handleSubmit={this.handleSubmit}
+                      />
+                    </Col>
+                  </Row>
+                </Grid>
+                <Grid className="full-height full-width">
+                  <Row className="results-row">{resultsElem}</Row>
+                </Grid>
+              </SplitPane>
             </Col>
           </Row>
-          <Row className="results-row">{resultsElem}</Row>
         </Grid>
       </div>
     );
diff --git a/frontend/src/App.less b/frontend/src/App.less
@@ -1,12 +1,62 @@
+@import '../node_modules/bootstrap/less/variables.less';
+
+html,
+body,
+#root {
+    margin: 0;
+    padding: 0;
+    height: 100%;
+}
+
 .app {
-  margin-top: 3em;
-  margin-bottom: 3em;
+    height: 100%;
+    padding-top: 3em;
+    padding-bottom: 1em;
+}
+
+.full-height {
+    height: 100%;
+}
+
+.full-width {
+    width: 100%;
+}
+
+.query-box-row {
+    .full-height;
 }
 
 .results-row {
-  margin-top: 3em;
+    .full-height;
 }
 
 .loader-col {
-  margin-top: 3em;
+    margin-top: 3em;
+}
+
+// react-split-pane
+.SplitPane {
+    position: relative !important;
+
+    .Pane {
+        overflow: auto;
+    }
+
+    .Resizer {
+        margin-top: 1em;
+        margin-bottom: 1em;
+        padding: 2px 0;
+
+        color: @gray;
+        background: @gray-lighter;
+
+        cursor: row-resize;
+
+        &:before {
+            display: block;
+            content: '● ● ●';
+            text-align: center;
+            line-height: 11px;
+        }
+    }
 }
diff --git a/frontend/src/components/QueryBox.js b/frontend/src/components/QueryBox.js
@@ -69,8 +69,8 @@ class QueryBox extends Component {
 
     return (
       <div className="query-box">
-        <Row>
-          <Col xs={12}>
+        <Row className="codemirror-row">
+          <Col xs={12} className="codemirror-col">
             <CodeMirror
               value={this.props.sql}
               options={options}
@@ -80,7 +80,7 @@ class QueryBox extends Component {
             />
           </Col>
         </Row>
-        <Row>
+        <Row className="button-row">
           <Col xsOffset={9} xs={3}>
             <Button
               className="pull-right"
diff --git a/frontend/src/components/QueryBox.less b/frontend/src/components/QueryBox.less
@@ -1,15 +1,32 @@
+@import '../../node_modules/bootstrap/less/variables.less';
+
 .query-box {
-  width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+
+    .codemirror-row {
+        flex-grow: 1;
+        display: flex;
+    }
+
+    .codemirror-col {
+        flex: 1;
+    }
+
+    .react-codemirror2 {
+        height: 100%;
+    }
 }
 
 button {
-  width: 100%;
+    width: 100%;
 }
 
 .CodeMirror {
-  height: 150px;
+    height: 100%;
 }
 
 .CodeMirror-empty {
-  color: dimgrey;
+    color: @gray-light;
 }
diff --git a/frontend/src/components/ResultsTable.js b/frontend/src/components/ResultsTable.js
@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import ReactTable from 'react-table';
 import 'react-table/react-table.css';
+import './ResultsTable.less';
 
 class ResultsTable extends Component {
   render() {
@@ -26,6 +27,7 @@ class ResultsTable extends Component {
         className="results-table"
         data={this.props.response.data}
         columns={columns}
+        defaultPageSize={10}
       />
     );
   }
diff --git a/frontend/src/components/ResultsTable.less b/frontend/src/components/ResultsTable.less
@@ -0,0 +1,9 @@
+.results-table {
+    flex-grow: 1;
+    flex-basis: 150px;
+    min-height: 150px;
+
+    .rt-tr-group {
+        flex: 0 0 auto !important;
+    }
+}
diff --git a/frontend/src/components/TabbedResults.js b/frontend/src/components/TabbedResults.js
@@ -46,6 +46,7 @@ class TabbedResults extends Component {
     return (
       <Tabs
         id="tabbed-results"
+        className="full-height"
         activeKey={this.state.activeKey}
         onSelect={this.handleSelect}
       >
diff --git a/frontend/src/components/TabbedResults.less b/frontend/src/components/TabbedResults.less
@@ -1,36 +1,53 @@
-
 .close {
-  width: auto;
-  margin-left: 1ex;
+    width: auto;
+    margin-left: 1ex;
+}
+
+#tabbed-results {
+    display: flex;
+    flex-direction: column;
 }
 
-.tab-content > .tab-pane {
-  margin-top: 2em;
+.tab-content {
+    flex: 1 1 auto;
+
+    display: flex;
+    flex-direction: column;
+
+    > .tab-pane {
+        flex: 1 1 auto;
+        padding-top: 2em;
+
+        &[aria-hidden='false'] {
+            display: flex;
+            flex-direction: column;
+        }
+    }
 }
 
 .query-row {
-  margin-bottom: 2em;
+    margin-bottom: 2em;
 
-  .query-text {
-    white-space: pre;
-    font-family: monospace;
-    float: left;
-    max-width: 85%;
-    overflow: auto;
-  }
+    .query-text {
+        white-space: pre;
+        font-family: monospace;
+        float: left;
+        max-width: 85%;
+        overflow: auto;
+    }
 }
 
 button.edit-query {
-  width: auto;
-  float: left;
-  padding-top: 0px;
-  margin-left: 1ex;
+    width: auto;
+    float: left;
+    padding-top: 0px;
+    margin-left: 1ex;
 }
 
 .tab-title {
-  width: 150px;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: inline-block;
+    width: 150px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: inline-block;
 }
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
@@ -1117,6 +1117,10 @@ bootstrap@3:
   version "3.3.7"
   resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-3.3.7.tgz#5a389394549f23330875a3b150656574f8a9eb71"
 
+bowser@^1.7.3:
+  version "1.9.3"
+  resolved "https://registry.yarnpkg.com/bowser/-/bowser-1.9.3.tgz#6643ae4d783f31683f6d23156976b74183862162"
+
 boxen@^1.2.1:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/boxen/-/boxen-1.3.0.tgz#55c6c39a8ba58d9c61ad22cd877532deb665a20b"
@@ -1787,6 +1791,13 @@ css-color-names@0.0.4:
   version "0.0.4"
   resolved "https://registry.yarnpkg.com/css-color-names/-/css-color-names-0.0.4.tgz#808adc2e79cf84738069b646cb20ec27beb629e0"
 
+css-in-js-utils@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/css-in-js-utils/-/css-in-js-utils-2.0.1.tgz#3b472b398787291b47cfe3e44fecfdd9e914ba99"
+  dependencies:
+    hyphenate-style-name "^1.0.2"
+    isobject "^3.0.1"
+
 css-loader@0.28.7:
   version "0.28.7"
   resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-0.28.7.tgz#5f2ee989dd32edd907717f953317656160999c1b"
@@ -3393,6 +3404,10 @@ https-browserify@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/https-browserify/-/https-browserify-1.0.0.tgz#ec06c10e0a34c0f2faf199f7fd7fc78fffd03c73"
 
+hyphenate-style-name@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/hyphenate-style-name/-/hyphenate-style-name-1.0.2.tgz#31160a36930adaf1fc04c6074f7eb41465d4ec4b"
+
 iconv-lite@0.4.19:
   version "0.4.19"
   resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.19.tgz#f7468f60135f5e5dad3399c0a81be9a1603a082b"
@@ -3479,6 +3494,13 @@ ini@^1.3.4, ini@~1.3.0:
   version "1.3.5"
   resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.5.tgz#eee25f56db1c9ec6085e0c22778083f596abf927"
 
+inline-style-prefixer@^3.0.6:
+  version "3.0.8"
+  resolved "https://registry.yarnpkg.com/inline-style-prefixer/-/inline-style-prefixer-3.0.8.tgz#8551b8e5b4d573244e66a34b04f7d32076a2b534"
+  dependencies:
+    bowser "^1.7.3"
+    css-in-js-utils "^2.0.0"
+
 inquirer@3.3.0, inquirer@^3.0.6:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-3.3.0.tgz#9dd2f2ad765dcab1ff0443b491442a20ba227dc9"
@@ -5873,6 +5895,20 @@ react-side-effect@^1.1.0:
     exenv "^1.2.1"
     shallowequal "^1.0.1"
 
+react-split-pane@^0.1.77:
+  version "0.1.77"
+  resolved "https://registry.yarnpkg.com/react-split-pane/-/react-split-pane-0.1.77.tgz#f0c8cd18d076bbac900248dcf6dbcec02d5340db"
+  dependencies:
+    inline-style-prefixer "^3.0.6"
+    prop-types "^15.5.10"
+    react-style-proptype "^3.0.0"
+
+react-style-proptype@^3.0.0:
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/react-style-proptype/-/react-style-proptype-3.2.1.tgz#7cfeb9b87ec7ab9dcbde9715170ed10c11fb86aa"
+  dependencies:
+    prop-types "^15.5.4"
+
 react-table@^6.8.2:
   version "6.8.2"
   resolved "https://registry.yarnpkg.com/react-table/-/react-table-6.8.2.tgz#3a5aefabc85953300d16786fa307c30610db9adc"

Original file line number	Diff line number	Diff line change
`@@ -46,6 +46,7 @@ class TabbedResults extends Component {`
`46`	`46`	`return (`
`47`	`47`	`<Tabs`
`48`	`48`	`id="tabbed-results"`
	`49`	`+ className="full-height"`
`49`	`50`	`activeKey={this.state.activeKey}`
`50`	`51`	`onSelect={this.handleSelect}`
`51`	`52`	`>`