Merge pull request #31 from qlik-oss/QPE-637-header-format-fixes

[QPE 637] Header format fixes

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
     }
   }
 };

src/definition/index.js

@@ -1,6 +1,6 @@
 import pagination from './pagination';
 import header from './header';
-import formatted from './formatted';
+import tableFormat from './table-format';
 import conceptSemaphores from './concept-semaphores';
 import metricSemaphores from './metric-semaphores';
 
@@ -21,7 +21,7 @@ const definition = {
     settings: {
       items: {
         ConceptSemaphores: conceptSemaphores,
-        Formatted: formatted,
+        Formatted: tableFormat,
         Header: header,
         MetricSemaphores: metricSemaphores,
         Pagination: pagination

src/definition/table-format.js

@@ -1,4 +1,4 @@
-const formatted = {
+const tableFormat = {
   type: 'items',
   label: 'Table Format',
   items: {
@@ -35,10 +35,10 @@ const formatted = {
         color: '#fff',
         index: 1
       },
-      dualOutput: true,
       label: 'Even row background color',
       ref: 'rowEvenBGColor',
-      type: 'object'
+      type: 'object',
+      dualOutput: true
     },
     rowOddBGColor: {
       component: 'color-picker',
@@ -46,10 +46,10 @@ const formatted = {
         color: '#b6d7ea',
         index: 4
       },
-      dualOutput: true,
       label: 'Odd row background color',
       ref: 'rowOddBGColor',
-      type: 'object'
+      type: 'object',
+      dualOutput: true
     },
     BodyTextColor: {
       ref: 'BodyTextColorSchema',
@@ -110,35 +110,35 @@ const formatted = {
       label: 'FontFamily',
       options: [
         {
-          value: 'QlikView Sans',
+          value: 'QlikView Sans, -apple-system, sans-serif',
           label: 'QlikView Sans'
         },
         {
-          value: 'Arial',
+          value: 'Arial, -apple-system, sans-serif',
           label: 'Arial'
         },
         {
-          value: 'Calibri',
+          value: 'Calibri, -apple-system, sans-serif',
           label: 'Calibri'
         },
         {
-          value: 'Comic Sans MS',
+          value: 'Comic Sans MS, -apple-system, sans-serif',
           label: 'Comic Sans MS'
         },
         {
-          value: 'MS Sans Serif',
+          value: 'MS Sans Serif, -apple-system, sans-serif',
           label: 'MS Sans Serif'
         },
         {
-          value: 'Tahoma',
+          value: 'Tahoma, -apple-system, sans-serif',
           label: 'Tahoma'
         },
         {
-          value: 'Verdana',
+          value: 'Verdana, -apple-system, sans-serif',
           label: 'Verdana'
         }
       ],
-      defaultValue: 'QlikView Sans'
+      defaultValue: 'QlikView Sans, -apple-system, sans-serif'
     },
     DataFontSize: {
       ref: 'lettersize',
@@ -230,4 +230,4 @@ const formatted = {
   }
 };
 
-export default formatted;
+export default tableFormat;

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'
     };

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'
   };

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;
@@ -15,8 +19,8 @@ const MeasurementColumnHeader = ({ baseCSS, general, hasSecondDimension, measure
     const cellStyle = {
       ...baseCSS,
       cursor: 'default',
-      fontSize: `${baseFontSize + fontSizeAdjustment} px`,
-      height: '25px',
+      fontSize: `${baseFontSize + fontSizeAdjustment}px`,
+      height: isMediumFontSize ? '50px' : '25px',
       verticalAlign: 'middle'
     };
     return (
@@ -25,18 +29,23 @@ const MeasurementColumnHeader = ({ baseCSS, general, hasSecondDimension, measure
         style={cellStyle}
       >
         <span className="wrapclass25">
-          {title}
+          <Tooltip
+            tooltipText={title}
+          >
+            {title}
+          </Tooltip>
         </span>
       </th>
     );
   }
+
   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 (

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
   };
 

src/main.less

@@ -56,6 +56,7 @@
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
+      font-family: inherit;
     }
   }
 
@@ -79,10 +80,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 {

src/tooltip/index.jsx

@@ -2,11 +2,12 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 const handleCalculateTooltipPosition = (event) => {
-  const tooltipClassName = 'tooltip-wrapper';
-  const tooltip = document.getElementsByClassName(tooltipClassName);
-
-  tooltip[0].style.left = event.clientX + 'px';
-  tooltip[0].style.top = event.clientY + 'px';
+  const tooltip = document.querySelector('.tooltip-wrapper');
+  if (!tooltip) {
+    return;
+  }
+  tooltip.style.left = `${event.clientX}px`;
+  tooltip.style.top = `${event.clientY}px`;
 };
 class Tooltip extends React.Component {
   constructor (props) {