From 55768c8ebcaef4631a83f6f227534c095daa88ba Mon Sep 17 00:00:00 2001 From: Kyle Doherty <kyle.l.doherty@gmail.com> Date: Wed, 10 Jun 2015 22:50:42 -0700 Subject: [PATCH] first stabs at table styling --- .../components/mb_data_table/mb_data_table.css | 18 ++++++++++++++++++ .../query_builder/visualization_table.react.js | 15 ++++++++++++--- 2 files changed, 30 insertions(+), 3 deletions(-) create mode 100644 resources/frontend_client/app/components/mb_data_table/mb_data_table.css diff --git a/resources/frontend_client/app/components/mb_data_table/mb_data_table.css b/resources/frontend_client/app/components/mb_data_table/mb_data_table.css new file mode 100644 index 00000000000..620a00403e6 --- /dev/null +++ b/resources/frontend_client/app/components/mb_data_table/mb_data_table.css @@ -0,0 +1,18 @@ +.MB-DataTable-header { + background-color: #fff; + background-image: none; +} + + +.MB-DataTable-header .Icon-chevrondown { opacity: 0; } +.MB-DataTable-header:hover .Icon-chevrondown { opacity: 1; } + +/* what follows is a war crime but such is the state of FE development */ +.Visualization .public_fixedDataTable_main { + border-color: red; +} + +.Visualization .public_fixedDataTableRow_highlighted, +.Visualization .public_fixedDataTableRow_highlighted .public_fixedDataTableCell_main { + background-color: #fff; +} diff --git a/resources/frontend_client/app/query_builder/visualization_table.react.js b/resources/frontend_client/app/query_builder/visualization_table.react.js index 571d687062e..b1dd60d6e60 100644 --- a/resources/frontend_client/app/query_builder/visualization_table.react.js +++ b/resources/frontend_client/app/query_builder/visualization_table.react.js @@ -1,6 +1,7 @@ 'use strict'; import FixedDataTable from 'fixed-data-table'; +import Icon from './icon.react'; var Table = FixedDataTable.Table; var Column = FixedDataTable.Column; @@ -78,12 +79,18 @@ export default React.createClass({ tableHeaderRenderer: function(columnIndex) { var column = this.props.data.cols[columnIndex], - colVal = (column !== null) ? column.name.toString() : null; + colVal = (column !== null) ? column.name.toString() : null, + headerClasses = 'MB-DataTable-header flex align-center'; if (this.isSortable()) { - return (<div onClick={this.setSort.bind(null, column.id)}>{colVal}</div>); + return ( + <div className={headerClasses} onClick={this.setSort.bind(null, column.id)}> + {colVal} + <Icon className="flex-align-right" name="chevrondown" width="12px" height="12px"></Icon> + </div> + ); } else { - return (<div>{colVal}</div>); + return (<div className={headerClasses}>{colVal}</div>); } }, @@ -113,6 +120,7 @@ export default React.createClass({ return ( <Column + className="MB-DataTable-column" width={colWidth} isResizable={true} headerRenderer={component.tableHeaderRenderer.bind(null, idx)} @@ -125,6 +133,7 @@ export default React.createClass({ return ( <Table + className="MB-DataTable" rowHeight={35} rowGetter={this.rowGetter} rowsCount={rowCount} -- GitLab