Lea/web-apps
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

[DE PE mobile] Hide styles for combined charts

Browse source
This commit is contained in:
JuliaSvinareva 2021-02-01 20:34:07 +03:00
parent 82f29b99de
commit 9d743bd814
9 changed files with 47 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
apps/common/mobile/resources/less/common.less
View file

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

3
apps/documenteditor/mobile/locale/en.json
View file

@ -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",

12
apps/documenteditor/mobile/src/controller/edit/EditChart.jsx
View file

@ -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();
props.storeChartSettings.updateChartStyles(api.asc_getChartPreviews(props.storeFocusObjects.chartObject.get_ChartProperties().getType()));
const type = 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 () {

6
apps/documenteditor/mobile/src/store/chartSettings.js
View file

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

6
apps/documenteditor/mobile/src/view/edit/EditChart.jsx
View file

@ -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">

3
apps/presentationeditor/mobile/locale/en.json
View file

@ -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": {

12
apps/presentationeditor/mobile/src/controller/edit/EditChart.jsx
View file

@ -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();
props.storeChartSettings.updateChartStyles(api.asc_getChartPreviews(props.storeFocusObjects.chartObject.getType()));
const type = 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 () {

7
apps/presentationeditor/mobile/src/store/chartSettings.js
View file

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

6
apps/presentationeditor/mobile/src/view/edit/EditChart.jsx
View file

@ -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">