[DE PE mobile] Hide styles for combined charts

apps/common/mobile/resources/less/common.less

@@ -28,6 +28,10 @@
     pointer-events: none;
 }
 
+.text-content {
+    padding: 14px 10px 0 10px;
+}
+
 .shapes {
     li {
         width: 70px;

apps/documenteditor/mobile/locale/en.json

@@ -217,7 +217,8 @@
     "textFirstColumn": "First Column",
     "textLastColumn": "Last Column",
     "textBandedColumn": "Banded Column",
-    "textType": "Type"
+    "textType": "Type",
+    "textNoStyles": "No styles for this type of charts."
   },
   "Add": {
     "textTable": "Table",

apps/documenteditor/mobile/src/controller/edit/EditChart.jsx

@@ -14,8 +14,16 @@ class EditChartController extends Component {
         this.onBorderColor = this.onBorderColor.bind(this);
         this.onBorderSize = this.onBorderSize.bind(this);
 
-        const api = Common.EditorApi.get();
+        const type = props.storeFocusObjects.chartObject.get_ChartProperties().getType();
-        props.storeChartSettings.updateChartStyles(api.asc_getChartPreviews(props.storeFocusObjects.chartObject.get_ChartProperties().getType()));
+        if (type==Asc.c_oAscChartTypeSettings.comboBarLine ||
+            type==Asc.c_oAscChartTypeSettings.comboBarLineSecondary ||
+            type==Asc.c_oAscChartTypeSettings.comboAreaBar ||
+            type==Asc.c_oAscChartTypeSettings.comboCustom) {
+            props.storeChartSettings.clearChartStyles();
+        } else {
+            const api = Common.EditorApi.get();
+            props.storeChartSettings.updateChartStyles(api.asc_getChartPreviews(type));
+        }
     }
 
     onRemoveChart () {

apps/documenteditor/mobile/src/store/chartSettings.js

@@ -56,11 +56,15 @@ export class storeChartSettings {
     }
 
     // style
-    @observable chartStyles;
+    @observable chartStyles = null;
+    @action clearChartStyles () {
+        this.chartStyles = null;
+    }
     @action updateChartStyles (styles) {
         this.chartStyles = styles;
     }
     @computed get styles () {
+        if (!this.chartStyles) return null;
         const widthContainer = document.querySelector(".page-content").clientWidth;
         const columns = parseInt(widthContainer / 70); // magic
         let row = -1;

apps/documenteditor/mobile/src/view/edit/EditChart.jsx

@@ -175,7 +175,7 @@ const PageStyle = props => {
                 </Tab>
                 <Tab key={"de-tab-chart-style"} id={"edit-chart-style"} className="page-content no-padding-top dataview">
                     <div className={'chart-styles'}>
-                        {styles.map((row, rowIndex) => {
+                        {styles ? styles.map((row, rowIndex) => {
                             return (
                                 <ul className="row" key={`row-${rowIndex}`}>
                                     {row.map((style, index)=>{
@@ -188,7 +188,9 @@ const PageStyle = props => {
                                     })}
                                 </ul>
                             )
-                        })}
+                        }) :
+                            <div className={'text-content'}>{_t.textNoStyles}</div>
+                        }
                     </div>
                 </Tab>
                 <Tab key={"de-tab-chart-fill"} id={"edit-chart-fill"} className="page-content no-padding-top">

apps/presentationeditor/mobile/locale/en.json

@@ -228,7 +228,8 @@
       "textStyleOptions": "Style Options",
       "textRemoveTable": "Remove Table",
       "textCellMargins": "Cell Margins",
-      "textRemoveChart": "Remove Chart"
+      "textRemoveChart": "Remove Chart",
+      "textNoStyles": "No styles for this type of charts."
     }
   },
   "Common": {

apps/presentationeditor/mobile/src/controller/edit/EditChart.jsx

@@ -12,8 +12,16 @@ class EditChartController extends Component {
         this.onBorderColor = this.onBorderColor.bind(this);
         this.onBorderSize = this.onBorderSize.bind(this);
 
-        const api = Common.EditorApi.get();
+        const type = props.storeFocusObjects.chartObject.getType();
-        props.storeChartSettings.updateChartStyles(api.asc_getChartPreviews(props.storeFocusObjects.chartObject.getType()));
+        if (type==Asc.c_oAscChartTypeSettings.comboBarLine ||
+            type==Asc.c_oAscChartTypeSettings.comboBarLineSecondary ||
+            type==Asc.c_oAscChartTypeSettings.comboAreaBar ||
+            type==Asc.c_oAscChartTypeSettings.comboCustom) {
+            props.storeChartSettings.clearChartStyles();
+        } else {
+            const api = Common.EditorApi.get();
+            props.storeChartSettings.updateChartStyles(api.asc_getChartPreviews(type));
+        }
     }
 
     onRemoveChart () {

apps/presentationeditor/mobile/src/store/chartSettings.js

@@ -4,13 +4,18 @@ export class storeChartSettings {
     
     // Style
     
-    @observable chartStyles;
+    @observable chartStyles = null;
+
+    @action clearChartStyles () {
+        this.chartStyles = null;
+    }
 
     @action updateChartStyles (styles) {
         this.chartStyles = styles;
     }
 
     @computed get styles () {
+        if (!this.chartStyles) return null;
         const widthContainer = document.querySelector(".page-content").clientWidth;
         const columns = parseInt(widthContainer / 70); // magic
         let row = -1;

apps/presentationeditor/mobile/src/view/edit/EditChart.jsx

@@ -187,7 +187,7 @@ const PageStyle = props => {
                 </Tab>
                 <Tab key={"pe-tab-chart-style"} id={"edit-chart-style"} className="page-content no-padding-top dataview">
                     <div className={'chart-styles'}>
-                        {styles.map((row, rowIndex) => {
+                        {styles ? styles.map((row, rowIndex) => {
                             return (
                                 <ul className="row" key={`row-${rowIndex}`}>
                                     {row.map((style, index)=>{
@@ -200,7 +200,9 @@ const PageStyle = props => {
                                     })}
                                 </ul>
                             )
-                        })}
+                        }) :
+                            <div className={'text-content'}>{_t.textNoStyles}</div>
+                        }
                     </div>
                 </Tab>
                 <Tab key={"pe-tab-chart-fill"} id={"edit-chart-fill"} className="page-content no-padding-top">