refactor(ui): update appearance of tables (#15783)

* refactor: update appearance of variables control bar * refactor: add documentation link to variables empty state * refactor: update appearance of table cells * refactor: update appearance of raw data table * refactor: appease linter
influxdata · Nov 6, 2019 · 9e34e39 · 9e34e39
1 parent 73d185a
commit 9e34e39
Show file tree

Hide file tree

Showing 7 changed files with 117 additions and 82 deletions.
diff --git a/ui/src/dashboards/components/variablesControlBar/VariablesControlBar.scss b/ui/src/dashboards/components/variablesControlBar/VariablesControlBar.scss
@@ -1,37 +1,46 @@
 $variables-control-bar--height: $page-header-size -
   (($page-header-size - $form-sm-height) / 2);
-
 $variables-control-bar--gutter: $ix-marg-a;
 
+
 .variables-control-bar {
   min-height: $variables-control-bar--height;
   display: flex;
   align-items: center;
-  flex-wrap: wrap;
-  padding: 0 ($page-gutter - ($variables-control-bar--gutter / 2));
-  padding-bottom: (($page-header-size - $form-sm-height) / 2);
-
-  /* Adjust height of Page Contents when control bar is present */
-  & + .page-contents {
-    height: calc(
-      100% - #{$variables-control-bar--height + $page-header-size}
-    ) !important;
-  }
+  padding: 0 12px;
+  width: 100%;
 
   .variable-dropdown--container {
     margin-right: $variables-control-bar--gutter;
-    padding-bottom: 5px;
   }
 
   .variables-spinner-container {
     height: $variables-control-bar--height;
   }
 }
 
-.variables-control-bar--empty {
-  background-color: $g3-castle;
+@media only screen and (min-width: 750px) {
+  .variables-control-bar {
+    padding: 0 32px;
+  }
+}
+
+.variables-control-bar--empty,
+.variables-control-bar--full {
+  display: flex;
+  background-color: $g0-obsidian;
   border-radius: $radius;
-  height: 100%;
+  width: 100%;
+  margin-bottom: (($page-header-size - $form-sm-height) / 2);
+}
+
+.variables-control-bar--full {
+  padding: $variables-control-bar--gutter;
+  flex-wrap: wrap;
+}
+
+.variables-control-bar--empty {
+  height: $form-sm-height + ($variables-control-bar--gutter * 2);
   justify-content: center;
 }
 
@@ -40,8 +49,13 @@ $variables-control-bar--gutter: $ix-marg-a;
 }
 
 .variables-control-bar.presentation-mode {
-  padding: 8px 0px 0px 8px;
+  padding: 12px;
   min-height: 0px;
+
+  .variables-control-bar--empty,
+  .variables-control-bar--full {
+    margin-bottom: 0;
+  }
 }
 
 .variable-dropdown--container {

diff --git a/ui/src/dashboards/components/variablesControlBar/VariablesControlBar.tsx b/ui/src/dashboards/components/variablesControlBar/VariablesControlBar.tsx
@@ -95,7 +95,13 @@ class VariablesControlBar extends PureComponent<Props, State> {
         className="variables-control-bar--empty"
       >
         <EmptyState.Text>
-          To see variable controls here, use a variable in a cell query
+          This dashboard doesn't have any cells with defined variables.{' '}
+          <a
+            href="https://v2.docs.influxdata.com/v2.0/visualize-data/variables/"
+            target="_blank"
+          >
+            Learn How
+          </a>
         </EmptyState.Text>
       </EmptyState>
     )
@@ -104,7 +110,7 @@ class VariablesControlBar extends PureComponent<Props, State> {
   private get barContents(): JSX.Element {
     const {dashboardID, variables, valuesStatus} = this.props
     return (
-      <>
+      <div className="variables-control-bar--full">
         {variables.map((v, i) => (
           <ErrorBoundary key={v.id}>
             <DraggableDropdown
@@ -119,7 +125,7 @@ class VariablesControlBar extends PureComponent<Props, State> {
         {valuesStatus === RemoteDataState.Loading && (
           <TechnoSpinner diameterPixels={18} />
         )}
-      </>
+      </div>
     )
   }
 

diff --git a/ui/src/shared/components/cells/Cell.scss b/ui/src/shared/components/cells/Cell.scss
@@ -25,12 +25,8 @@ $cell--header-button-active-color: $c-pool;
     border-radius: $radius;
   }
 
-  .time-machine-tables {
-    padding-top: 0;
-  }
-
   .time-series-container {
-    padding-top: $ix-marg-a;
+    padding-top: 0;
   }
 }
 
@@ -247,10 +243,10 @@ $cell--header-button-active-color: $c-pool;
 .time-series-container {
   width: 100%;
   height: 100%;
-  padding: $ix-marg-c;
+  padding: $ix-marg-b;
 
   &.time-series-container--alert-check {
-    padding-right: $ix-marg-c + 30px;
+    padding-right: $ix-marg-b + 30px;
     overflow: hidden;
   }
 }

diff --git a/ui/src/shared/components/tables/TableGraphs.scss b/ui/src/shared/components/tables/TableGraphs.scss
@@ -1,24 +1,35 @@
+$table-graph-cell: $g0-obsidian;
+$table-graph-cell--highlight: $g2-kevlar;
+$table-graph-heading-bg: $g1-raven;
+$table-graph-heading-bg--active: $g3-castle;
+$table-graph-border: $g3-castle;
+$table-graph-font: 12px;
+
 .time-machine-tables {
   display: flex;
   align-items: stretch;
-  flex-wrap: none;
+  flex-wrap: nowrap;
   width: 100%;
   height: 100%;
-  padding: 8px;
 }
 
 .time-machine-sidebar {
-  width: 25%;
-  min-width: 180px;
-  max-width: 400px;
-  background-color: $g2-kevlar;
+  flex: 1 0 180px;
+  background-color: $g0-obsidian;
+  margin-right: $ix-marg-a;
   overflow: hidden;
-  border-radius: $radius 0 0 $radius;
+  border-radius: $ix-radius;
+  border: $ix-border solid $g3-castle;
 }
 
 .time-machine-sidebar--heading {
   padding: 10px;
-  background: $g4-onyx;
+  background: $g3-castle;
+  height: 50px;
+}
+
+.time-machine-sidebar--scroll {
+  height: calc(100% - 50px) !important;
 }
 
 .time-machines-sidebar--filter.form-control.cf-input-xs {
@@ -33,23 +44,12 @@
 .time-machine-sidebar-item {
   @include no-user-select();
   color: $g11-sidewalk;
-  font-size: 12px;
+  font-size: $table-graph-font;
   font-weight: 600;
-  padding: 7px 10px;
+  padding: 6px 12px;
   transition: color 0.25s ease, background-color 0.25s ease;
   white-space: nowrap;
 
-  &:hover {
-    background-color: $g4-onyx;
-    color: $g15-platinum;
-    cursor: pointer;
-  }
-
-  &.active {
-    background-color: $g5-pepper;
-    color: $g18-cloud;
-  }
-
   > span {
     padding-right: 1px;
     padding-left: 1px;
@@ -63,18 +63,42 @@
     padding-right: 5px;
     color: $g11-sidewalk;
   }
+
+  &:hover {
+    background-color: $g2-kevlar;
+    color: $g13-mist;
+    cursor: pointer;
+
+    > span.key {
+      color: $g13-mist;
+    }
+
+    > span.value {
+      color: $g20-white;
+    }
+  }
+
+  &.active {
+    background-color: $g3-castle;
+    color: $g18-cloud;
+
+    > span.key {
+      color: $g18-cloud;
+    }
+
+    > span.value {
+      color: $c-pool;
+    }
+  }
 }
 
 .time-machine-table {
-  width: calc(100% - 32px);
-  border: 2px solid $g5-pepper;
-  border-radius: 3px;
+  flex: 4 0 100px;
+  border: $ix-border solid $table-graph-border;
+  border-radius: $ix-radius-sm;
   overflow: hidden;
 
   &:only-child {
-    height: calc(100% - 16px);
-    top: 8px;
-    left: 16px;
     border: 1;
   }
 }
@@ -84,34 +108,25 @@
     ----------------------------------------------------------------------------
 */
 
-.table-graph-container {
-  position: absolute;
-  width: calc(100% - 32px);
-  height: calc(100% - 16px);
-  top: 8px;
-  left: 16px;
-  border: 2px solid $g5-pepper;
-  border-radius: 3px;
-  overflow: hidden;
-}
-
 .table-graph-cell {
   user-select: text !important;
   -o-user-select: text !important;
   -moz-user-select: text !important;
   -webkit-user-select: text !important;
   line-height: 28px; // Cell height - 2x border width
   padding: 0 6px;
-  font-size: 12px;
+  font-size: $table-graph-font;
+  background-color: $table-graph-cell;
   font-weight: 500;
-  color: $g12-forge;
-  border: 1px solid $g5-pepper;
+  color: $g11-sidewalk;
+  border: ($ix-border / 2) solid $table-graph-border;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
 
   &__highlight-row {
-    background-color: rgba(255, 255, 255, 0.2);
+    color: $g20-white;
+    background-color: $table-graph-cell--highlight;
   }
   &__numerical {
     font-family: $code-font;
@@ -121,7 +136,7 @@
   &__fixed-column {
     font-weight: 700;
     color: $g14-chromium;
-    background-color: $g4-onyx;
+    background-color: $table-graph-heading-bg;
   }
   &__fixed-row {
     border-top: 0;
@@ -134,7 +149,7 @@
     border-top: 0;
     border-left: 0;
     color: $g18-cloud;
-    background-color: $g5-pepper;
+    background-color: $table-graph-heading-bg--active;
   }
   &__field-name {
     padding-right: 17px;

diff --git a/ui/src/shared/components/tables/TableSidebar.tsx b/ui/src/shared/components/tables/TableSidebar.tsx
@@ -3,8 +3,7 @@ import React, {PureComponent, ChangeEvent} from 'react'
 import _ from 'lodash'
 
 // Components
-import {Input} from '@influxdata/clockface'
-import FancyScrollbar from 'src/shared/components/fancy_scrollbar/FancyScrollbar'
+import {Input, DapperScrollbars} from '@influxdata/clockface'
 import TableSidebarItem from 'src/shared/components/tables/TableSidebarItem'
 
 // Types
@@ -47,7 +46,10 @@ export default class TableSidebar extends PureComponent<Props, State> {
             />
           </div>
         )}
-        <FancyScrollbar>
+        <DapperScrollbars
+          autoHide={true}
+          className="time-machine-sidebar--scroll"
+        >
           <div className="time-machine-sidebar--items">
             {this.filteredData.map(({groupKey, id, name}) => {
               return (
@@ -62,7 +64,7 @@ export default class TableSidebar extends PureComponent<Props, State> {
               )
             })}
           </div>
-        </FancyScrollbar>
+        </DapperScrollbars>
       </div>
     )
   }

diff --git a/ui/src/timeMachine/components/RawFluxDataTable.scss b/ui/src/timeMachine/components/RawFluxDataTable.scss
@@ -1,7 +1,11 @@
 @import "src/style/modules";
 
+.raw-flux-data-table > .fancy-scroll--container,
+.raw-flux-data-table--cell {
+  border: ($ix-border / 2) solid $g2-kevlar;
+}
+
 .raw-flux-data-table--cell {
-  border: 1px solid $g4-onyx;
   font-family: $code-font;
   font-size: 12px;
   z-index: 1;
@@ -10,8 +14,8 @@
   left: 0;
 
   .raw-flux-data-table--cell-bg {
-    background: $g3-castle;
-    border: 2px solid $g3-castle;
+    background: $g0-obsidian;
+    border: 2px solid $g0-obsidian;
     position: absolute;
     padding: 5px;
     border-radius: 2px;

diff --git a/ui/src/timeMachine/components/RawFluxDataTable.tsx b/ui/src/timeMachine/components/RawFluxDataTable.tsx
@@ -20,8 +20,6 @@ interface State {
   scrollTop: number
 }
 
-const PADDING = 10
-
 class RawFluxDataTable extends PureComponent<Props, State> {
   public state = {scrollLeft: 0, scrollTop: 0}
 
@@ -32,11 +30,11 @@ class RawFluxDataTable extends PureComponent<Props, State> {
     const {scrollTop, scrollLeft} = this.state
     const {data, maxColumnCount} = this.parseFiles(files)
 
-    const tableWidth = width - PADDING * 2
-    const tableHeight = height - PADDING * 2
+    const tableWidth = width
+    const tableHeight = height
 
     return (
-      <div className="raw-flux-data-table" style={{padding: `${PADDING}px`}}>
+      <div className="raw-flux-data-table">
         <FancyScrollbar
           style={{
             overflowY: 'hidden',