From 48427df5593ab067ff13e006f0751d0bf99a3587 Mon Sep 17 00:00:00 2001 From: Balazs Gobel Date: Wed, 27 Feb 2019 21:39:31 +0100 Subject: [PATCH 1/3] enable changing font size in headers --- src/headers-table/column-header.jsx | 2 +- src/headers-table/measurement-column-header.jsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/headers-table/column-header.jsx b/src/headers-table/column-header.jsx index e698a82..8722031 100644 --- a/src/headers-table/column-header.jsx +++ b/src/headers-table/column-header.jsx @@ -19,7 +19,7 @@ class ColumnHeader extends React.PureComponent { const style = { ...baseCSS, - fontSize: `${14 + styling.headerOptions.fontSizeAdjustment} px`, + fontSize: `${14 + styling.headerOptions.fontSizeAdjustment}px`, height: '45px', verticalAlign: 'middle' }; diff --git a/src/headers-table/measurement-column-header.jsx b/src/headers-table/measurement-column-header.jsx index 0918ff0..e7f53fc 100644 --- a/src/headers-table/measurement-column-header.jsx +++ b/src/headers-table/measurement-column-header.jsx @@ -15,7 +15,7 @@ const MeasurementColumnHeader = ({ baseCSS, general, hasSecondDimension, measure const cellStyle = { ...baseCSS, cursor: 'default', - fontSize: `${baseFontSize + fontSizeAdjustment} px`, + fontSize: `${baseFontSize + fontSizeAdjustment}px`, height: '25px', verticalAlign: 'middle' }; From 03dfc0ce93546d6be9051c80a932776a83063a05 Mon Sep 17 00:00:00 2001 From: Balazs Gobel Date: Wed, 27 Feb 2019 21:39:59 +0100 Subject: [PATCH 2/3] prevent infinite loop in angular color picker - dualOutput must be the last line --- src/definition/header.js | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/src/definition/header.js b/src/definition/header.js index 1d5abd4..e0598f8 100644 --- a/src/definition/header.js +++ b/src/definition/header.js @@ -27,23 +27,23 @@ const header = { component: 'color-picker', defaultValue: { index: 6, - color: "#4477aa" + color: '#4477aa' }, - dualOutput: true, - label: 'BackGround Header Color', + label: 'Background Header Color', ref: 'HeaderColorSchema', - type: 'object' + type: 'object', + dualOutput: true }, HeaderTextColor: { ref: 'HeaderTextColorSchema', label: 'Text Header Color', component: 'color-picker', - dualOutput: true, defaultValue: { index: 1, - color: "#ffffff" + color: '#ffffff' }, - type: 'object' + type: 'object', + dualOutput: true }, HeaderFontSize: { ref: 'lettersizeheader', @@ -60,7 +60,7 @@ const header = { label: 'Medium' } ], - defaultValue: 2 + defaultValue: 1 } } }; From f255efbf5d2e870f639711cd8954557ce6ff10ee Mon Sep 17 00:00:00 2001 From: Balazs Gobel Date: Thu, 28 Feb 2019 12:40:29 +0100 Subject: [PATCH 3/3] Handle medium header font size better and prevent cutting text off --- src/headers-table/export-column-header.jsx | 6 ++++-- src/headers-table/measurement-column-header.jsx | 17 +++++++++++++---- src/initialize-transformed.js | 9 +++++++-- src/main.less | 3 ++- 4 files changed, 26 insertions(+), 9 deletions(-) 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 {