From 05c25c72cb2531a86867e052106a8a057da26643 Mon Sep 17 00:00:00 2001 From: Albert Backenhof Date: Tue, 16 Apr 2019 10:56:59 +0200 Subject: [PATCH] Fixed layout and styling of table -Now using flexbox to make the layout more dynamic. -Row selection of hover works as intended. -Improved the way scrollbars are shown. Issue: DEB-188, DEB-192 --- src/headers-table/column-header.jsx | 2 +- src/headers-table/index.jsx | 2 +- .../measurement-column-header.jsx | 2 - src/main.less | 90 +++++++++++++------ src/root.jsx | 74 +++++++-------- stylelint.config.js | 2 +- 6 files changed, 102 insertions(+), 70 deletions(-) diff --git a/src/headers-table/column-header.jsx b/src/headers-table/column-header.jsx index 3a546a6..4215c06 100644 --- a/src/headers-table/column-header.jsx +++ b/src/headers-table/column-header.jsx @@ -22,7 +22,7 @@ class ColumnHeader extends React.PureComponent { const style = { ...baseCSS, fontSize: `${14 + styling.headerOptions.fontSizeAdjustment}px`, - height: isMediumFontSize ? '45px' : '35px', + height: isMediumFontSize ? '43px' : '33px', verticalAlign: 'middle' }; diff --git a/src/headers-table/index.jsx b/src/headers-table/index.jsx index 6b7bc7f..0229c27 100644 --- a/src/headers-table/index.jsx +++ b/src/headers-table/index.jsx @@ -77,7 +77,7 @@ const HeadersTable = ({ data, general, qlik, styling, isKpi }) => { ); })} - {hasSecondDimension && ( + {!isKpi && hasSecondDimension && ( {injectSeparators(dimension2, styling.useSeparatorColumns).map((dimensionEntry, index) => { if (dimensionEntry.isSeparator) { diff --git a/src/headers-table/measurement-column-header.jsx b/src/headers-table/measurement-column-header.jsx index 96611d4..6d18100 100644 --- a/src/headers-table/measurement-column-header.jsx +++ b/src/headers-table/measurement-column-header.jsx @@ -18,7 +18,6 @@ const MeasurementColumnHeader = ({ baseCSS, general, hasSecondDimension, measure } const cellStyle = { ...baseCSS, - cursor: 'default', fontSize: `${baseFontSize + fontSizeAdjustment}px`, height: isMediumFontSize ? '45px' : '35px', verticalAlign: 'middle' @@ -40,7 +39,6 @@ const MeasurementColumnHeader = ({ baseCSS, general, hasSecondDimension, measure const style = { ...baseCSS, - cursor: 'default', fontSize: `${15 + fontSizeAdjustment}px`, height: isMediumFontSize ? '90px' : '70px', verticalAlign: 'middle' diff --git a/src/main.less b/src/main.less index 5d51ea1..74a9267 100644 --- a/src/main.less +++ b/src/main.less @@ -139,12 +139,7 @@ background-color: #fff; } - .fdim-cells:hover { - background-color: #808080 !important; - color: #fff; - } - - tbody tr:hover { + tbody tr:hover td { cursor: default; background-color: #808080 !important; color: #fff; @@ -171,29 +166,50 @@ border: groove; } + .root { + display: flex; + flex-direction: row; + flex-wrap: nowrap; + height: 100%; + width: 100%; + } + .kpi-table .fdim-cells, .data-table td { line-height: 1em !important; } .kpi-table { + display: flex; + flex-direction: column; + flex-wrap: nowrap; + flex: none; width: @KpiTableWidth !important; - overflow: hidden !important; - height: 100%; margin: 0; padding: 0; - position: absolute; - top: 0; - left: 0; - border-right: 1px solid #fff; - box-shadow: 4px 2px 8px #e1e1e1; + + .header-wrapper { + flex: none; + box-shadow: 4px 2px 8px #e1e1e1; + } .row-wrapper { - height: calc(~"100% - 92px"); overflow: scroll; - position: absolute; + margin: 0; + margin-bottom: 8px; padding: 0; - margin-top: 0; + box-shadow: 4px 2px 8px #e1e1e1; + min-height: 0; /* This is to make flex size-filling work */ + + /* Adapt for Edge */ + @supports (-ms-ime-align: auto) { + margin-bottom: 16px; + } + + /* Adapt for IE11 */ + @media screen and (-ms-high-contrast: none) { + margin-bottom: 16px; + } } } @@ -202,34 +218,50 @@ } .data-table { - height: 100%; - width: calc(100% - 243px); - position: absolute; - margin-left: @KpiTableWidth + 13px; + display: flex; + flex-direction: column; + flex-wrap: nowrap; + margin-left: 13px; + min-width: 0; /* This is to make flex size-filling work */ .header-wrapper { + flex: none; overflow: scroll; - width: 100%; + margin-right: 8px; } .row-wrapper { - height: calc(~"100% - 92px"); - width: 100%; - overflow: auto; + overflow: scroll; + margin: 0; padding: 0; - margin-top: 0; + min-height: 0; /* This is to make flex size-filling work */ + + /* Style scrollbar for FF */ + scrollbar-width: thin; + scrollbar-color: #d3d3d3 transparent; + } + + /* Adapt for Edge */ + @supports (-ms-ime-align: auto) { + .header-wrapper { + margin-right: 16px; + } } - // Use overlay-scrollbars for webkit-browsers - @media screen and (-webkit-min-device-pixel-ratio: 0) { - .row-wrapper { - overflow: overlay; + /* Adapt for IE11 */ + @media screen and (-ms-high-contrast: none) { + width: 100%; + height: 100%; + + .header-wrapper { + margin-right: 16px; } } } // hide scrollbars .kpi-table .header-wrapper, + .kpi-table .row-wrapper, .data-table .header-wrapper { // stylelint-disable-next-line property-no-unknown scrollbar-width: none; diff --git a/src/root.jsx b/src/root.jsx index 0eeb279..402d9e7 100644 --- a/src/root.jsx +++ b/src/root.jsx @@ -5,48 +5,50 @@ import DataTable from './data-table/index.jsx'; import { LinkedScrollWrapper, LinkedScrollSection } from './linked-scroll'; const Root = ({ state, qlik, editmodeClass }) => ( - -
- - - - -
-
- +
+ +
- - - - -
- + + + +
+
+ + + + + + +
+ +
); Root.propTypes = { diff --git a/stylelint.config.js b/stylelint.config.js index 3e5f353..83b847b 100644 --- a/stylelint.config.js +++ b/stylelint.config.js @@ -84,7 +84,7 @@ module.exports = { 'indentation': 2, 'length-zero-no-unit': true, 'max-empty-lines': 1, - 'max-nesting-depth': 3, + 'max-nesting-depth': 5, 'media-feature-colon-space-after': 'always', 'media-feature-colon-space-before': 'never', 'media-feature-name-case': 'lower',