Merge pull request #15 from qlik-oss/feature/QPE-484

[QPE-484] Edit mode interactions

src/data-table/data-cell.jsx

@@ -90,12 +90,17 @@ class DataCell extends React.PureComponent {
     if (styleBuilder.hasComments()) {
       formattedMeasurementValue = '.';
     }
+    let textAlignment = 'Right';
+    const textAlignmentProp = styling.options.textAlignment;
+    if (textAlignmentProp) {
+      textAlignment = textAlignmentProp;
+    }
 
     let cellStyle = {
       fontFamily: styling.options.fontFamily,
       ...styleBuilder.getStyle(),
       paddingLeft: '4px',
-      textAlign: 'right'
+      textAlign: textAlignment
 
     };
     const { semaphoreColors } = styling;
@@ -109,7 +114,7 @@ class DataCell extends React.PureComponent {
         fontFamily: styling.options.fontFamily,
         fontSize: styleBuilder.getStyle().fontSize,
         paddingLeft: '4px',
-        textAlign: 'right'
+        textAlign: textAlignment
       };
     }
 

src/definition/formatted.js

@@ -187,6 +187,26 @@ const formatted = {
       ],
       defaultValue: 1
     },
+    textAlignment: {
+      ref: 'cellTextAlignment',
+      label: 'Cell Text alignment',
+      component: 'buttongroup',
+      options: [
+        {
+          value: 'left',
+          label: 'Left'
+        },
+        {
+          value: 'center',
+          label: 'Center'
+        },
+        {
+          value: 'right',
+          label: 'Right'
+        }
+      ],
+      defaultValue: 'right'
+    },
     ColumnWidthSlider: {
       type: 'number',
       component: 'slider',

src/definition/header.js

@@ -27,7 +27,7 @@ const header = {
       ref: 'HeaderColorSchema',
       type: 'string',
       component: 'dropdown',
-      label: 'BackGround Header Color',
+      label: 'Background Header Color',
       options: [
         {
           value: 'Clean',

src/definition/index.js

@@ -9,15 +9,16 @@ import pijamaColorLibrary from './pijama-color-library';
 const definition = {
   component: 'accordion',
   items: {
-    dimensions: {
-      max: 2,
-      min: 1,
-      uses: 'dimensions'
-    },
-    measures: {
-      max: 9,
-      min: 1,
-      uses: 'measures'
+    data: {
+      items: {
+        dimensions: {
+          disabledRef: ''
+        },
+        measures: {
+          disabledRef: ''
+        }
+      },
+      uses: 'data'
     },
     settings: {
       items: {

src/index.js

@@ -12,6 +12,18 @@ export default {
     '$timeout',
     function () { }
   ],
+  data: {
+    dimensions: {
+      max: 2,
+      min: 1,
+      uses: 'dimensions'
+    },
+    measures: {
+      max: 9,
+      min: 1,
+      uses: 'measures'
+    }
+  },
   definition,
   initialProperties: {
     qHyperCubeDef: {

src/initialize-transformed.js

@@ -282,7 +282,8 @@ async function initializeTransformed ({ $element, layout, component }) {
         backgroundColorOdd: colors[`vColLib${layout.ColorSchemaP}`],
         color: layout.BodyTextColorSchema,
         fontFamily: layout.FontFamily,
-        fontSizeAdjustment: getFontSizeAdjustment(layout.lettersize)
+        fontSizeAdjustment: getFontSizeAdjustment(layout.lettersize),
+        textAlignment: layout.cellTextAlignment
       },
       semaphoreColors: {
         fieldsToApplyTo: {

src/main.less

@@ -1,7 +1,9 @@
 .qv-object-qlik-smart-pivot {
   @TableBorder: 1px solid #d3d3d3;
   @KpiTableWidth: 230px;
-
+  .edit-mode{
+    pointer-events: none;
+  }
   ._cell(@Width: 50px) {
   	min-width: @Width!important;
   	max-width: @Width!important;

src/paint.jsx

@@ -11,10 +11,10 @@ export default async function paint ($element, layout, component) {
     component,
     layout
   });
-
+  const editmodeClass = component.inAnalysisState() ? '' : 'edit-mode';
   const jsx = (
     <React.Fragment>
-      <div className="kpi-table">
+      <div className={`kpi-table ${editmodeClass}`}>
         <HeadersTable
           data={state.data}
           general={state.general}
@@ -29,7 +29,7 @@ export default async function paint ($element, layout, component) {
           styling={state.styling}
         />
       </div>
-      <div className="data-table">
+      <div className={`data-table ${editmodeClass}`}>
         <HeadersTable
           data={state.data}
           general={state.general}