feat: style selected column header when stats are displayed

qri-io · Nov 15, 2019 · 439cff5 · 439cff5
1 parent 4d2bc8b
commit 439cff5
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 10 deletions.
diff --git a/app/components/Body.tsx b/app/components/Body.tsx
@@ -115,8 +115,9 @@ const Body: React.FunctionComponent<BodyProps> = (props) => {
               ? <BodyTable
                 headers={headers}
                 body={value}
-                onFetch={onFetch}
                 pageInfo={pageInfo}
+                highlighedColumnIndex={details.type !== DetailsType.NoDetails ? details.index : undefined}
+                onFetch={onFetch}
                 setDetailsBar={handleToggleDetailsBar}
               />
               : <BodyJson

diff --git a/app/components/BodyTable.tsx b/app/components/BodyTable.tsx
@@ -10,6 +10,7 @@ import { ApiAction } from '../store/api'
 interface BodyTableProps {
   headers?: any[]
   body: any[]
+  highlighedColumnIndex: number | undefined
   onFetch: (page?: number, pageSize?: number) => Promise<ApiAction>
   setDetailsBar: (index: number) => void
   pageInfo: PageInfo
@@ -95,7 +96,7 @@ export default class BodyTable extends React.Component<BodyTableProps> {
   }
 
   render () {
-    const { body, headers, pageInfo, setDetailsBar } = this.props
+    const { body, headers, pageInfo, highlighedColumnIndex, setDetailsBar } = this.props
     const { fetchedAll } = pageInfo
 
     const tableRows = body.map((row, i) => {
@@ -128,7 +129,7 @@ export default class BodyTable extends React.Component<BodyTableProps> {
               </th>
               {headers && headers.map((d: any, j: number) => {
                 return (
-                  <th key={j}>
+                  <th key={j} className={(j === highlighedColumnIndex) ? 'highlighted' : '' }>
                     <div className='cell' onClick={() => setDetailsBar(j)}>{d}</div>
                   </th>
                 )

diff --git a/app/components/DetailsBar.tsx b/app/components/DetailsBar.tsx
@@ -2,7 +2,7 @@ import * as React from 'react'
 import { Details, DetailsType, StatsDetails } from '../models/details'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faTimes } from '@fortawesome/free-solid-svg-icons'
-import Stat from './stats/Stat'
+import Stat from './StatsChart'
 
 export interface DetailsBarProps {
   details: Details
@@ -19,7 +19,7 @@ const DetailsBar: React.FunctionComponent<DetailsBarProps> = (props) => {
     return (
       <div>
         <h4>{statsDetails.title}</h4>
-        <Stat data={details.stats} />
+        <Stat data={statsDetails.stats} />
       </div>
     )
   }

diff --git a/app/scss/_body.scss b/app/scss/_body.scss
@@ -42,6 +42,15 @@
 // body table
 
 #body-table-container {
+  th:hover:not(.highlighted) {
+    background: #dcdcdc;
+  }
+
+  .highlighted {
+    background: #cdcdcd;
+    font-weight: 600;
+    text-decoration: underline;
+  }
 
   .cell {
     display: block;
@@ -56,7 +65,7 @@
     white-space: nowrap;
   }
 
-  th:first-child .cell, td:first-child .cell {
+  th:first-child .cell, td:first-child .cell, td:nth-child(2) .cell {
     border-left: none;
   }
 
@@ -71,10 +80,7 @@
     top: 0;
     background: #e6e6e6;
     font-weight: 500;
-  }
-
-  thead .cell {
-    border-bottom: 1px solid #ECECEC;
+    cursor: pointer;
   }
 
   tfoot {