diff --git a/src/headers-table/export-column-header.jsx b/src/headers-table/export-column-header.jsx index 96fe045..cde9f0f 100644 --- a/src/headers-table/export-column-header.jsx +++ b/src/headers-table/export-column-header.jsx @@ -1,14 +1,16 @@ import React from 'react'; import PropTypes from 'prop-types'; import ExportButton from '../export-button.jsx'; +import { HEADER_FONT_SIZE } from '../initialize-transformed'; const ExportColumnHeader = ({ baseCSS, general, title, allowExcelExport, hasSecondDimension, styling }) => { const rowSpan = hasSecondDimension ? 2 : 1; + const isMediumFontSize = styling.headerOptions.fontSizeAdjustment === HEADER_FONT_SIZE.MEDIUM; const style = { ...baseCSS, cursor: 'default', - fontSize: `${16 + styling.headerOptions.fontSizeAdjustment} px`, - height: '80px', + fontSize: `${16 + styling.headerOptions.fontSizeAdjustment}px`, + height: isMediumFontSize ? '100px' : '80px', verticalAlign: 'middle', width: '230px' }; diff --git a/src/headers-table/measurement-column-header.jsx b/src/headers-table/measurement-column-header.jsx index e7f53fc..69b325e 100644 --- a/src/headers-table/measurement-column-header.jsx +++ b/src/headers-table/measurement-column-header.jsx @@ -1,9 +1,13 @@ import React from 'react'; import PropTypes from 'prop-types'; +import { HEADER_FONT_SIZE } from '../initialize-transformed'; +import Tooltip from '../tooltip/index.jsx'; const MeasurementColumnHeader = ({ baseCSS, general, hasSecondDimension, measurement, styling }) => { const title = `${measurement.name} ${measurement.magnitudeLabelSuffix}`; const { fontSizeAdjustment } = styling.headerOptions; + const isMediumFontSize = styling.headerOptions.fontSizeAdjustment === HEADER_FONT_SIZE.MEDIUM; + if (hasSecondDimension) { const isPercentageFormat = measurement.format.substring(measurement.format.length - 1) === '%'; let baseFontSize = 14; @@ -16,7 +20,7 @@ const MeasurementColumnHeader = ({ baseCSS, general, hasSecondDimension, measure ...baseCSS, cursor: 'default', fontSize: `${baseFontSize + fontSizeAdjustment}px`, - height: '25px', + height: isMediumFontSize ? '50px' : '25px', verticalAlign: 'middle' }; return ( @@ -25,18 +29,23 @@ const MeasurementColumnHeader = ({ baseCSS, general, hasSecondDimension, measure style={cellStyle} > - {title} + + {title} + ); } + const isLong = (title.length > 11 && fontSizeAdjustment === 0) || (title.length > 12 && fontSizeAdjustment === -2); const suffixWrap = isLong ? '70' : 'empty'; const style = { ...baseCSS, cursor: 'default', - fontSize: `${15 + fontSizeAdjustment} px`, - height: '80px', + fontSize: `${15 + fontSizeAdjustment}px`, + height: isMediumFontSize ? '100px' : '80px', verticalAlign: 'middle' }; return ( diff --git a/src/initialize-transformed.js b/src/initialize-transformed.js index 216d107..9f485c7 100644 --- a/src/initialize-transformed.js +++ b/src/initialize-transformed.js @@ -1,6 +1,11 @@ import jQuery from 'jquery'; import { distinctArray } from './utilities'; +export const HEADER_FONT_SIZE = { + SMALL: -1, + MEDIUM: 1 +}; + function getAlignment (option) { const alignmentOptions = { 1: 'left', @@ -13,8 +18,8 @@ function getAlignment (option) { function getFontSizeAdjustment (option) { const fontSizeAdjustmentOptions = { - 1: -1, - 2: 1, + 1: HEADER_FONT_SIZE.SMALL, + 2: HEADER_FONT_SIZE.MEDIUM, 3: 2 }; diff --git a/src/main.less b/src/main.less index c950edb..f11d981 100644 --- a/src/main.less +++ b/src/main.less @@ -79,10 +79,11 @@ // This is for wrap text in headers .wrapclass25 { width: 100%; - height: 25px; + height: inherit; white-space: pre-line; overflow: hidden; display: block; + text-overflow: ellipsis; } .wrapclass45 {