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

Polish table highlighting styles

pull/10616/head
Alex P 2018-03-20 19:14:47 -07:00
parent 95d6e3c738
commit 81003993c9
2 changed files with 19 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -107,14 +107,13 @@ class TableGraph extends Component {
? rowIndex > 0 && columnIndex === 0 ? rowIndex > 0 && columnIndex === 0
: isFixedRow : isFixedRow
const isFixedCorner = rowIndex === 0 && columnIndex === 0 const isFixedCorner = rowIndex === 0 && columnIndex === 0
const isLastRow = rowIndex === rowCount - 1
const isLastColumn = columnIndex === columnCount - 1
const isHighlighted =
rowIndex === parent.props.scrollToRow ||
columnIndex === parent.props.scrollToColumn ||
(rowIndex === hoveredRowIndex && hoveredRowIndex !== 0) ||
(columnIndex === hoveredColumnIndex && hoveredColumnIndex !== 0)
const dataIsNumerical = _.isNumber(data[rowIndex][columnIndex]) const dataIsNumerical = _.isNumber(data[rowIndex][columnIndex])
const isHighlightedRow =
rowIndex === parent.props.scrollToRow ||
(rowIndex === hoveredRowIndex && hoveredRowIndex !== 0)
const isHighlightedColumn =
columnIndex === parent.props.scrollToColumn ||
(columnIndex === hoveredColumnIndex && hoveredColumnIndex !== 0)
let cellStyle = style let cellStyle = style
@ -135,9 +134,8 @@ class TableGraph extends Component {
'table-graph-cell__fixed-row': isFixedRow, 'table-graph-cell__fixed-row': isFixedRow,
'table-graph-cell__fixed-column': isFixedColumn, 'table-graph-cell__fixed-column': isFixedColumn,
'table-graph-cell__fixed-corner': isFixedCorner, 'table-graph-cell__fixed-corner': isFixedCorner,
'table-graph-cell__last-row': isLastRow, 'table-graph-cell__highlight-row': isHighlightedRow,
'table-graph-cell__last-column': isLastColumn, 'table-graph-cell__highlight-column': isHighlightedColumn,
'table-graph-cell__highlight': isHighlighted,
'table-graph-cell__numerical': dataIsNumerical, 'table-graph-cell__numerical': dataIsNumerical,
}) })

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

@ -28,13 +28,12 @@
&:after { &:after {
content: ''; content: '';
position: absolute; position: absolute;
top: -1px; top: 0;
left: -1px; left: 0;
width: calc(100% + 2px); width: 100%;
height: calc(100% + 2px); height: 100%;
z-index: 5; z-index: 5;
border: 2px solid $c-pool; background-color: rgba(255,255,255,0.2);
border-radius: 3px;
visibility: hidden; visibility: hidden;
box-sizing: border-box; box-sizing: border-box;
} }
@ -60,24 +59,13 @@
color: $g18-cloud; color: $g18-cloud;
background-color: $g5-pepper; background-color: $g5-pepper;
} }
&__last-row { &__highlight-row:after,
border-bottom: 0; &__highlight-column:after {
visibility: visible;
} }
&__last-column { &__highlight-row.table-graph-cell__highlight-column {
// border-right: 0; border-color: $g20-white;
} &:after {visibility: hidden;}
&__highlight {
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;
&:after {visibility: visible;}
} }
} }