Influxdata
/
influxdb
mirror of https://github.com/influxdata/influxdb.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Polish highlighting cell styles

pull/10616/head
Alex P 2018-03-12 12:32:56 -07:00
parent d1207d2f03
commit 541db897aa
2 changed files with 18 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
ui/src/shared/components/TableGraph.js
View File

@ -55,10 +55,10 @@ class TableGraph extends Component {
const isFixedCorner = rowIndex === 0 && columnIndex === 0 const isFixedCorner = rowIndex === 0 && columnIndex === 0
const isLastRow = rowIndex === rowCount - 1 const isLastRow = rowIndex === rowCount - 1
const isLastColumn = columnIndex === columnCount - 1 const isLastColumn = columnIndex === columnCount - 1
const isHovered = const isHighlighted =
rowIndex === parent.props.scrollToRow || rowIndex === parent.props.scrollToRow ||
rowIndex === hoveredRowIndex || (rowIndex === hoveredRowIndex && hoveredRowIndex !== 0) ||
columnIndex === hoveredColumnIndex (columnIndex === hoveredColumnIndex && hoveredColumnIndex !== 0)
const cellClass = classnames('table-graph-cell', { const cellClass = classnames('table-graph-cell', {
'table-graph-cell__fixed-row': isFixedRow, 'table-graph-cell__fixed-row': isFixedRow,
@ -66,7 +66,7 @@ class TableGraph extends Component {
'table-graph-cell__fixed-corner': isFixedCorner, 'table-graph-cell__fixed-corner': isFixedCorner,
'table-graph-cell__last-row': isLastRow, 'table-graph-cell__last-row': isLastRow,
'table-graph-cell__last-column': isLastColumn, 'table-graph-cell__last-column': isLastColumn,
'table-graph-cell__hovered': isHovered, 'table-graph-cell__highlight': isHighlighted,
}) })
return ( return (

18
ui/src/style/components/table-graph.scss
View File

@ -18,13 +18,13 @@
line-height: 30px; line-height: 30px;
padding: 0 6px; padding: 0 6px;
font-size: 13px; font-size: 13px;
color: $g13-mist; color: $g12-forge;
border: 1px solid $g5-pepper; border: 1px solid $g5-pepper;
&__fixed-row, &__fixed-row,
&__fixed-column { &__fixed-column {
font-weight: 700; font-weight: 700;
color: $g16-pearl; color: $g14-chromium;
background-color: $g4-onyx; background-color: $g4-onyx;
} }
&__fixed-row { &__fixed-row {
@ -45,7 +45,17 @@
&__last-column { &__last-column {
border-right: 0; border-right: 0;
} }
&__hovered { &__highlight {
// TODO:add stylign here. background-color: $g6-smoke;
color: $g16-pearl;
}
&__highlight:not(.table-graph-cell__fixed-row):not(.table-graph-cell__fixed-column):not(.table-graph-cell__fixed-corner) {
color: $g14-chromium;
background-color: $g6-smoke;
}
&:hover:not(.table-graph-cell__fixed-row):not(.table-graph-cell__fixed-column):not(.table-graph-cell__fixed-corner) {
color: $g20-white;
background-color: $g0-obsidian;
border-color: $c-pool;
} }
} }