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
: isFixedRow
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 isHighlightedRow =
rowIndex === parent.props.scrollToRow ||
(rowIndex === hoveredRowIndex && hoveredRowIndex !== 0)
const isHighlightedColumn =
columnIndex === parent.props.scrollToColumn ||
(columnIndex === hoveredColumnIndex && hoveredColumnIndex !== 0)
let cellStyle = style
@ -135,9 +134,8 @@ class TableGraph extends Component {
'table-graph-cell__fixed-row': isFixedRow,
'table-graph-cell__fixed-column': isFixedColumn,
'table-graph-cell__fixed-corner': isFixedCorner,
'table-graph-cell__last-row': isLastRow,
'table-graph-cell__last-column': isLastColumn,
'table-graph-cell__highlight': isHighlighted,
'table-graph-cell__highlight-row': isHighlightedRow,
'table-graph-cell__highlight-column': isHighlightedColumn,
'table-graph-cell__numerical': dataIsNumerical,
})

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

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