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

[SSE mobile] Added the ability to insert chart

Browse source
This commit is contained in:
JuliaSvinareva 2021-01-31 01:19:20 +03:00
parent cb35e3c194
commit 82f29b99de
6 changed files with 77 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
apps/common/mobile/resources/less/common-ios.less
View file

@ -376,7 +376,7 @@
}
}
.dataview, #add-table, #add-shape, #add-slide {
.dataview, #add-table, #add-shape, #add-slide, #add-chart {
&.page-content, .page-content {
background-color: @white;
}

11
apps/spreadsheeteditor/mobile/src/controller/add/AddChart.jsx
View file

@ -7,6 +7,7 @@ import AddChart from '../../view/add/AddChart';
class AddChartController extends Component {
constructor (props) {
super(props);
this.onInsertChart = this.onInsertChart.bind(this);
}
closeModal () {
@ -17,9 +18,17 @@ class AddChartController extends Component {
}
}
onInsertChart (type) {
const api = Common.EditorApi.get();
const settings = api.asc_getChartObject();
settings.changeType(type);
api.asc_addChartDrawingObject(settings);
this.closeModal();
}
render () {
return (
<AddChart
<AddChart onInsertChart={this.onInsertChart}
/>
)
}

1
apps/spreadsheeteditor/mobile/src/less/app.less
View file

@ -9,6 +9,7 @@
@import '../../../../common/mobile/resources/less/common.less';
@import '../../../../common/mobile/resources/less/common-ios.less';
@import '../../../../common/mobile/resources/less/common-material.less';
@import '../../../../common/mobile/resources/less/dataview.less';
@import './app-material.less';
@import './app-ios.less';
@import './icons-ios.less';

44
apps/spreadsheeteditor/mobile/src/store/chartSettings.js Normal file
View file

@ -0,0 +1,44 @@
import {action, observable, computed} from 'mobx';
export class storeChartSettings {
@computed get types () {
const _types = [
{ type: Asc.c_oAscChartTypeSettings.barNormal, thumb: 'bar-normal'},
{ type: Asc.c_oAscChartTypeSettings.barStacked, thumb: 'bar-stacked'},
{ type: Asc.c_oAscChartTypeSettings.barStackedPer, thumb: 'bar-pstacked'},
{ type: Asc.c_oAscChartTypeSettings.lineNormal, thumb: 'line-normal'},
{ type: Asc.c_oAscChartTypeSettings.lineStacked, thumb: 'line-stacked'},
{ type: Asc.c_oAscChartTypeSettings.lineStackedPer, thumb: 'line-pstacked'},
{ type: Asc.c_oAscChartTypeSettings.hBarNormal, thumb: 'hbar-normal'},
{ type: Asc.c_oAscChartTypeSettings.hBarStacked, thumb: 'hbar-stacked'},
{ type: Asc.c_oAscChartTypeSettings.hBarStackedPer, thumb: 'hbar-pstacked'},
{ type: Asc.c_oAscChartTypeSettings.areaNormal, thumb: 'area-normal'},
{ type: Asc.c_oAscChartTypeSettings.areaStacked, thumb: 'area-stacked'},
{ type: Asc.c_oAscChartTypeSettings.areaStackedPer, thumb: 'area-pstacked'},
{ type: Asc.c_oAscChartTypeSettings.pie, thumb: 'pie'},
{ type: Asc.c_oAscChartTypeSettings.doughnut, thumb: 'doughnut'},
{ type: Asc.c_oAscChartTypeSettings.pie3d, thumb: 'pie3d'},
{ type: Asc.c_oAscChartTypeSettings.scatter, thumb: 'scatter'},
{ type: Asc.c_oAscChartTypeSettings.stock, thumb: 'stock'},
{ type: Asc.c_oAscChartTypeSettings.line3d, thumb: 'line3d'},
{ type: Asc.c_oAscChartTypeSettings.barNormal3d, thumb: 'bar3dnormal'},
{ type: Asc.c_oAscChartTypeSettings.barStacked3d, thumb: 'bar3dstack'},
{ type: Asc.c_oAscChartTypeSettings.barStackedPer3d, thumb: 'bar3dpstack'},
{ type: Asc.c_oAscChartTypeSettings.hBarNormal3d, thumb: 'hbar3dnormal'},
{ type: Asc.c_oAscChartTypeSettings.hBarStacked3d, thumb: 'hbar3dstack'},
{ type: Asc.c_oAscChartTypeSettings.hBarStackedPer3d, thumb: 'hbar3dpstack'},
{ type: Asc.c_oAscChartTypeSettings.barNormal3dPerspective, thumb: 'bar3dpsnormal'}
];
const columns = 3;
let row = -1;
const groups = [];
_types.forEach((type, index) => {
if (0 == index % columns) {
groups.push([]);
row++
}
groups[row].push(type);
});
return groups;
}
}

6
apps/spreadsheeteditor/mobile/src/store/mainStore.js
View file

@ -8,17 +8,17 @@ import {storeWorksheets} from './sheets';
// import {storeShapeSettings} from "./shapeSettings";
// import {storeImageSettings} from "./imageSettings";
// import {storeTableSettings} from "./tableSettings";
// import {storeChartSettings} from "./chartSettings";
import {storeChartSettings} from "./chartSettings";
export const stores = {
storeFocusObjects: new storeFocusObjects(),
// storeDocumentSettings: new storeDocumentSettings(),
users: new storeUsers(),
sheets: new storeWorksheets()
sheets: new storeWorksheets(),
// storeTextSettings: new storeTextSettings(),
// storeParagraphSettings: new storeParagraphSettings(),
// storeShapeSettings: new storeShapeSettings(),
// storeChartSettings: new storeChartSettings(),
storeChartSettings: new storeChartSettings(),
// storeImageSettings: new storeImageSettings(),
// storeTableSettings: new storeTableSettings()
};

22
apps/spreadsheeteditor/mobile/src/view/add/AddChart.jsx
View file

@ -2,11 +2,25 @@ import React, {Fragment, useState} from 'react';
import {observer, inject} from "mobx-react";
const AddChart = props => {
const types = props.storeChartSettings.types;
return (
<Fragment>
</Fragment>
<div className={'dataview chart-types'}>
{types.map((row, indexRow) => {
return (
<ul className="row" key={`row-${indexRow}`}>
{row.map((type, index) => {
return (
<li key={`${indexRow}-${index}`}
onClick={()=>{props.onInsertChart(type.type)}}>
<div className={`thumb ${type.thumb}`}></div>
</li>
)
})}
</ul>
)
})}
</div>
)
};
export default AddChart;
export default inject("storeChartSettings")(observer(AddChart));