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 {