Added scroll bar and option to collapse for Sql Editor tool bar (#1532)

* Added scroll bar and option to collapse for Sql Editor tool bar Done: - Added scroll-bar to Sql Editor tool bar - Added hide/expand tool bar option to dropdown menu of tab * Add more margin to give space to scroll-bar * Add scroll to right panel independently
apache · Nov 4, 2016 · 593ac08 · 593ac08
1 parent 69f0a4e
commit 593ac08
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 24 deletions.
diff --git a/caravel/assets/javascripts/SqlLab/components/SqlEditor.jsx b/caravel/assets/javascripts/SqlLab/components/SqlEditor.jsx
@@ -11,6 +11,7 @@ import {
   OverlayTrigger,
   Row,
   Tooltip,
+  Collapse,
 } from 'react-bootstrap';
 
 import SouthPane from './SouthPane';
@@ -28,12 +29,14 @@ const propTypes = {
   editorQueries: React.PropTypes.array.isRequired,
   dataPreviewQueries: React.PropTypes.array.isRequired,
   queryEditor: React.PropTypes.object.isRequired,
+  hideLeftBar: React.PropTypes.bool,
 };
 
 const defaultProps = {
   networkOn: true,
   database: null,
   latestQuery: null,
+  hideLeftBar: false,
 };
 
 
@@ -207,29 +210,35 @@ class SqlEditor extends React.PureComponent {
     return (
       <div className="SqlEditor" style={{ minHeight: this.sqlEditorHeight() }}>
         <Row>
-          <Col md={3}>
-            <SqlEditorLeftBar
-              queryEditor={this.props.queryEditor}
-              tables={this.props.tables}
-              networkOn={this.props.networkOn}
-              actions={this.props.actions}
-            />
-          </Col>
-          <Col md={9}>
-            <AceEditorWrapper
-              tables={this.props.tables}
-              actions={this.props.actions}
-              queryEditor={this.props.queryEditor}
-              sql={this.props.queryEditor.sql}
-              onBlur={this.setQueryEditorSql.bind(this)}
-            />
-            {editorBottomBar}
-            <br />
-            <SouthPane
-              editorQueries={this.props.editorQueries}
-              dataPreviewQueries={this.props.dataPreviewQueries}
-              actions={this.props.actions}
-            />
+          <Collapse
+            in={!this.props.hideLeftBar}
+          >
+            <Col md={3}>
+              <SqlEditorLeftBar
+                queryEditor={this.props.queryEditor}
+                tables={this.props.tables}
+                networkOn={this.props.networkOn}
+                actions={this.props.actions}
+              />
+            </Col>
+          </Collapse>
+          <Col md={this.props.hideLeftBar ? 12 : 9}>
+            <div className="scrollbar">
+              <AceEditorWrapper
+                tables={this.props.tables}
+                actions={this.props.actions}
+                queryEditor={this.props.queryEditor}
+                sql={this.props.queryEditor.sql}
+                onBlur={this.setQueryEditorSql.bind(this)}
+              />
+              {editorBottomBar}
+              <br />
+              <SouthPane
+                editorQueries={this.props.editorQueries}
+                dataPreviewQueries={this.props.dataPreviewQueries}
+                actions={this.props.actions}
+              />
+            </div>
           </Col>
         </Row>
       </div>

diff --git a/caravel/assets/javascripts/SqlLab/components/SqlEditorLeftBar.jsx b/caravel/assets/javascripts/SqlLab/components/SqlEditorLeftBar.jsx
@@ -99,7 +99,7 @@ class SqlEditorLeftBar extends React.PureComponent {
     }
     const shouldShowReset = window.location.search === '?reset=1';
     return (
-      <div className="clearfix sql-toolbar">
+      <div className="clearfix sql-toolbar scrollbar">
         {networkAlert}
         <div>
           <DatabaseSelect

diff --git a/caravel/assets/javascripts/SqlLab/components/TabbedSqlEditors.jsx b/caravel/assets/javascripts/SqlLab/components/TabbedSqlEditors.jsx
@@ -36,6 +36,7 @@ class TabbedSqlEditors extends React.PureComponent {
       cleanUri,
       query,
       queriesArray: [],
+      hideLeftBar: false,
     };
   }
   componentWillMount() {
@@ -105,6 +106,9 @@ class TabbedSqlEditors extends React.PureComponent {
   removeQueryEditor(qe) {
     this.props.actions.removeQueryEditor(qe);
   }
+  toggleLeftBar() {
+    this.setState({ hideLeftBar: !this.state.hideLeftBar });
+  }
   render() {
     const editors = this.props.queryEditors.map((qe, i) => {
       const isSelected = (qe.id === this.activeQueryEditor().id);
@@ -146,6 +150,11 @@ class TabbedSqlEditors extends React.PureComponent {
                 <i className="fa fa-clipboard" /> <CopyQueryTabUrl queryEditor={qe} />
               </MenuItem>
             }
+            <MenuItem eventKey="4" onClick={this.toggleLeftBar.bind(this)}>
+              <i className="fa fa-cogs" />
+              &nbsp;
+              {this.state.hideLeftBar ? 'expand tool bar' : 'hide tool bar'}
+            </MenuItem>
           </DropdownButton>
         </div>
       );
@@ -167,6 +176,7 @@ class TabbedSqlEditors extends React.PureComponent {
                   database={database}
                   actions={this.props.actions}
                   networkOn={this.props.networkOn}
+                  hideLeftBar={this.state.hideLeftBar}
                 />
               }
             </div>

diff --git a/caravel/assets/javascripts/SqlLab/main.css b/caravel/assets/javascripts/SqlLab/main.css
@@ -28,6 +28,14 @@
     padding-top: 5px;
     padding-bottom: 5px;
 }
+
+.scrollbar {
+    position: relative;
+    width: 100%;
+    overflow-y: auto;
+    height: 100%;
+}
+
 .Workspace .btn-sm {
     box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
     margin-top: 2px;
@@ -233,6 +241,10 @@ div.tablePopover:hover {
     padding-top: 10px;
 }
 
+.TableElement {
+    margin-right: 10px;
+}
+
 .TableElement .well {
     margin-top: 5px;
     margin-bottom: 5px;