Add Data Reference hover states, pane count spacing, hide empty dbs

resources/frontend_client/app/css/core/bordered.css

@@ -8,6 +8,10 @@
   border: var(--border-size) var(--border-style) var(--border-color);
 }
 
+.border-brand-hover:hover {
+    border-color: var(--brand-color);
+}
+
 .border-bottom {
   border-bottom: var(--border-size) var(--border-style) var(--border-color);
 }

resources/frontend_client/app/css/core/colors.css

@@ -31,12 +31,12 @@
 
 .text-brand-darken,
 .text-brand-darken-hover:hover {
-    color: color(var(--brand-color) shade(20%));
+    color: color(var(--brand-color) shade(20%)) !important;
 }
 
 .text-brand-light,
 .text-brand-light-hover:hover {
-    color: var(--brand-light-color);
+    color: var(--brand-light-color) !important;
 }
 
 .bg-brand,

resources/frontend_client/app/css/query_builder.css

@@ -6,7 +6,7 @@
     display: flex;
     flex-direction: column;
     height: 100%;
-    transition: margin-right 0.5s;
+    transition: margin-right 0.35s;
     background-color: white;
     box-shadow: 0px 0px 8px rgba(0,0,0,0.1);
  }
@@ -410,3 +410,7 @@
 .DataRefererenceQueryButton-text {
     max-width: 160px;
 }
+
+.DataReference-paneCount {
+    padding-right: 0.6em;
+}

resources/frontend_client/app/query_builder/data_reference.react.js

@@ -67,7 +67,7 @@ export default React.createClass({
         var backButton;
         if (this.state.stack.length > 0) {
             backButton = (
-                <a href="#" className="flex align-center mb2 text-default no-decoration" onClick={this.back}>
+                <a href="#" className="flex align-center mb2 text-default text-brand-hover no-decoration" onClick={this.back}>
                     <Icon name="chevronleft" width="18px" height="18px" />
                     <span className="text-uppercase">Back</span>
                 </a>
@@ -75,7 +75,7 @@ export default React.createClass({
         }
 
         var closeButton = (
-            <a href="#" className="flex-align-right text-default no-decoration" onClick={this.close}>
+            <a href="#" className="flex-align-right text-default text-brand-hover no-decoration" onClick={this.close}>
                 <Icon name="close" width="18px" height="18px" />
             </a>
         );

resources/frontend_client/app/query_builder/data_reference_field.react.js

@@ -106,7 +106,7 @@ export default React.createClass({
             var useForCurrentQuestionArray = [];
             useForCurrentQuestionArray.push(
                 <li key="filter-by" className="mt1">
-                    <a className="Button Button--white text-default no-decoration" href="#" onClick={this.filterBy}>
+                    <a className="Button Button--white text-default text-brand-hover border-brand-hover no-decoration" href="#" onClick={this.filterBy}>
                         <Icon className="mr1" name="add" width="12px" height="12px"/> Filter by {name}
                         </a>
                 </li>
@@ -114,7 +114,7 @@ export default React.createClass({
             if (validBreakout) {
                 useForCurrentQuestionArray.push(
                     <li key="group-by" className="mt1">
-                        <a className="Button Button--white text-default no-decoration" href="#" onClick={this.groupBy}>
+                        <a className="Button Button--white text-default text-brand-hover border-brand-hover no-decoration" href="#" onClick={this.groupBy}>
                             <Icon className="mr2" name="add" width="12px" height="12px" /> Group by {name}
                         </a>
                     </li>

resources/frontend_client/app/query_builder/data_reference_main.react.js

@@ -35,7 +35,7 @@ export default React.createClass({
                 }
                 var tables;
                 var tableCount;
-                if (dbTables && dbTables.length !== undefined) {
+                if (dbTables && dbTables.length > 0) {
                     tableCount = dbTables.length + " " + inflection.inflect("table", dbTables.length);
                     tables = dbTables.map((table, index) => {
                         var tableName = inflection.humanize(table.name);
@@ -49,16 +49,16 @@ export default React.createClass({
                             </li>
                         );
                     });
+                    return (
+                        <li key={database.id}>
+                            <div className="my2">
+                                <h2 className="inline-block">{database.name}</h2>
+                                <span className="ml1">{tableCount}</span>
+                            </div>
+                            <ul>{tables}</ul>
+                        </li>
+                    );
                 }
-                return (
-                    <li key={database.id}>
-                        <div className="my2">
-                            <h2 className="inline-block">{database.name}</h2>
-                            <span className="ml1">{tableCount}</span>
-                        </div>
-                        <ul>{tables}</ul>
-                    </li>
-                );
             });
         }
 

resources/frontend_client/app/query_builder/data_reference_query_button.react.js

@@ -15,7 +15,7 @@ export default React.createClass({
             <div className={this.props.className}>
                 <a className="DataRefererenceQueryButton flex align-center no-decoration py1" href="#" onClick={this.props.onClick}>
                     <Icon name={this.props.icon} />
-                    <span className="DataRefererenceQueryButton-text mx2 text-default">{this.props.text}</span>
+                    <span className="DataRefererenceQueryButton-text mx2 text-default text-brand-hover">{this.props.text}</span>
                     <span className="DataRefererenceQueryButton-circle flex-align-right text-brand">
                         <Icon width="8" height="8" name="chevronright" />
                     </span>

resources/frontend_client/app/query_builder/data_reference_table.react.js

@@ -63,20 +63,27 @@ export default React.createClass({
                 var text = "Show all " + table.rows.toLocaleString() + " rows in " + name
                 queryButton = (<DataReferenceQueryButton className="border-bottom border-top mb3" icon="illustration-icon-table" text={text} onClick={this.setQueryAllRows} />);
             }
-            var connectionsCount = this.state.tableForeignKeys.length + " " + inflection.inflect("connection", this.state.tableForeignKeys.length);
-            var fieldCount = table.fields.length + " " + inflection.inflect("field", table.fields.length);
             var panes = {
-                "fields": fieldCount,
-                // "metrics": "0 Metrics",
-                "connections": connectionsCount
+                "fields": table.fields.length,
+                "metrics": 0,
+                "connections": this.state.tableForeignKeys.length
             };
             var tabs = Object.keys(panes).map((name) => {
+                var count = panes[name];
                 var classes = cx({
                     'Button': true,
                     'Button--small': true,
                     'Button--active': name === this.state.pane
                 });
-                return <a key={name} className={classes} href="#" onClick={this.showPane.bind(null, name)}>{panes[name]}</a>
+                if (count > 0) {
+                    return (
+                        <a key={name} className={classes} href="#" onClick={this.showPane.bind(null, name)}>
+                            <span className="DataReference-paneCount">{count}</span><span>{inflection.inflect(name, count)}</span>
+                        </a>
+                    );
+                } else {
+                    return null;
+                }
             });
 
             var pane;