Improve workspace layout

resources/scss/editor.scss

@@ -1,6 +1,7 @@
 .CodeMirror {
     font: 12px/20px normal Menlo, Droidsansmono, Bitstream Vera Sans Mono, Monaco, Consolas, monospace;
-    height: auto;
+    //height: 100%;
+    height: 300px;
 }
 
 .swatch {

resources/scss/main.scss

@@ -41,6 +41,7 @@ body {
 @import "fonts";
 @import "layout";
 @import "forms";
+@import "scrollbar";
 @import "button";
 @import "modal";
 @import "workspace";

resources/scss/scrollbar.scss

@@ -0,0 +1,17 @@
+::-webkit-scrollbar {
+  width: 8px;
+  background-color: rgba(0,0,0,0);
+  -webkit-border-radius: 100px;
+}
+::-webkit-scrollbar:hover {
+  background-color: rgba(0, 0, 0, 0.09);
+}
+
+::-webkit-scrollbar-thumb:vertical {
+  background: rgba(0,0,0,0.5);
+  -webkit-border-radius: 100px;
+}
+::-webkit-scrollbar-thumb:vertical:active {
+  background: rgba(0,0,0,0.61);
+  -webkit-border-radius: 100px;
+}

resources/scss/table.scss

@@ -18,26 +18,6 @@ $table-bg-header-color: #222;
   border-bottom: 1px solid $table-border-color;
 }
 
-.FlexTable {
-	::-webkit-scrollbar {
-	  width: 8px;
-	  background-color: rgba(0,0,0,0);
-	  -webkit-border-radius: 100px;
-	}
-	::-webkit-scrollbar:hover {
-	  background-color: rgba(0, 0, 0, 0.09);
-	}
-
-	::-webkit-scrollbar-thumb:vertical {
-	  background: rgba(0,0,0,0.5);
-	  -webkit-border-radius: 100px;
-	}
-	::-webkit-scrollbar-thumb:vertical:active {
-	  background: rgba(0,0,0,0.61);
-	  -webkit-border-radius: 100px;
-	}
-}
-
 .FlexTable__truncatedColumnText {
     font-size: 12px;
     line-height: 28px;

resources/scss/workspace.scss

@@ -1,10 +1,11 @@
 .workspace {
     position: relative;
     height: 100%;
+    display: flex;
+    flex-direction: column;
 }
 
 .workspace-header {
-    //background-color: darken($bg-color, 5%);
     background-color: #404040;
 }
 
@@ -14,22 +15,13 @@
 
 .workspace-logs, .workspace-error {
     background-color: #222;
-    padding: 1.5 * $pad;
-}
-
-.workspace-bottom {
-    position: absolute;
-    bottom: 0;
-    width: 100%;
+    padding: 0 8px;
+    line-height: 28px;
 }
 
 .workspace-table {
+    flex: 1;
     width: 100%;
-    height: 400px;
-}
-
-.workspace-logs {
-    padding: 8px;
 }
 
 .workspace-error {

src/database.js

@@ -17,7 +17,6 @@ export class Database {
         }
 
         //TODO: Use promises instead of callback
-        //TODO: Deal with connection not set yet
         var transformQuery = "select ST_AsGeoJSON(ST_Transform(geometry, 4326)) AS geom, t.* from (" + subquery + ") as t";
         this.db.result(transformQuery, true).then((result) => {
             dbgeo.parse({
@@ -26,7 +25,8 @@ export class Database {
                 "geometryColumn": "geom",
                 "geometryType": "geojson"
             }, (err, geojson) => {
-		        window.events.publish('query.success', `Display ${result.rowCount} rows`);
+                console.log(result);
+		        window.events.publish('query.success', `${result.rowCount} rows in ${result.duration}ms`);
                 //TODO: This is solved some pattern somehow
                 cb(err, {
                     geojson: geojson,

src/editor.js

@@ -56,10 +56,12 @@ export class Editor extends React.Component {
 
 	render() {
 		const codeMirrorOptions = {
+            tabSize: 2,
             lineNumbers: true,
+            lineWrapping: true,
             mode: 'text/x-plsql',
             theme: 'dracula',
-            viewportMargin: Infinity
+            //viewportMargin: Infinity
 		};
 
 		return <Codemirror value={this.state.code} onChange={this.updateCode} options={codeMirrorOptions} />;

src/workspace.js

@@ -54,16 +54,14 @@ export class Workspace extends React.Component {
                 <Toolbar db={this.db} />
             </div>
             {workspaceError}
-		    <div className="workspace-editor">
+            <div className="workspace-editor">
                 <Editor db={this.db} />
             </div>
-		    <div className="workspace-bottom">
-                <div className="workspace-table">
-                    <GeoJSONTable />
-                </div>
-                <div className="workspace-logs">
-                    {this.state.message}
-                </div>
+            <div className="workspace-table">
+                <GeoJSONTable />
+            </div>
+            <div className="workspace-logs">
+                {this.state.message}
             </div>
         </div>;
 	}