From 82f29b99de0ed7ac11a3bf8802989a22bb29aebb Mon Sep 17 00:00:00 2001 From: JuliaSvinareva Date: Sun, 31 Jan 2021 01:19:20 +0300 Subject: [PATCH] [SSE mobile] Added the ability to insert chart --- .../mobile/resources/less/common-ios.less | 2 +- .../mobile/src/controller/add/AddChart.jsx | 11 ++++- .../mobile/src/less/app.less | 1 + .../mobile/src/store/chartSettings.js | 44 +++++++++++++++++++ .../mobile/src/store/mainStore.js | 6 +-- .../mobile/src/view/add/AddChart.jsx | 22 ++++++++-- 6 files changed, 77 insertions(+), 9 deletions(-) create mode 100644 apps/spreadsheeteditor/mobile/src/store/chartSettings.js diff --git a/apps/common/mobile/resources/less/common-ios.less b/apps/common/mobile/resources/less/common-ios.less index b153c61c5..6060c5f6b 100644 --- a/apps/common/mobile/resources/less/common-ios.less +++ b/apps/common/mobile/resources/less/common-ios.less @@ -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; } diff --git a/apps/spreadsheeteditor/mobile/src/controller/add/AddChart.jsx b/apps/spreadsheeteditor/mobile/src/controller/add/AddChart.jsx index 5e69d6d85..55d1b8e3a 100644 --- a/apps/spreadsheeteditor/mobile/src/controller/add/AddChart.jsx +++ b/apps/spreadsheeteditor/mobile/src/controller/add/AddChart.jsx @@ -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 ( - ) } diff --git a/apps/spreadsheeteditor/mobile/src/less/app.less b/apps/spreadsheeteditor/mobile/src/less/app.less index 5403bdf9d..49f02cf9f 100644 --- a/apps/spreadsheeteditor/mobile/src/less/app.less +++ b/apps/spreadsheeteditor/mobile/src/less/app.less @@ -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'; diff --git a/apps/spreadsheeteditor/mobile/src/store/chartSettings.js b/apps/spreadsheeteditor/mobile/src/store/chartSettings.js new file mode 100644 index 000000000..edda7ebe6 --- /dev/null +++ b/apps/spreadsheeteditor/mobile/src/store/chartSettings.js @@ -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; + } +} \ No newline at end of file diff --git a/apps/spreadsheeteditor/mobile/src/store/mainStore.js b/apps/spreadsheeteditor/mobile/src/store/mainStore.js index 850aea6f8..b0fea34f6 100644 --- a/apps/spreadsheeteditor/mobile/src/store/mainStore.js +++ b/apps/spreadsheeteditor/mobile/src/store/mainStore.js @@ -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() }; diff --git a/apps/spreadsheeteditor/mobile/src/view/add/AddChart.jsx b/apps/spreadsheeteditor/mobile/src/view/add/AddChart.jsx index 8eec1a782..0dcd4efa3 100644 --- a/apps/spreadsheeteditor/mobile/src/view/add/AddChart.jsx +++ b/apps/spreadsheeteditor/mobile/src/view/add/AddChart.jsx @@ -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 ( - - - +
+ {types.map((row, indexRow) => { + return ( +
    + {row.map((type, index) => { + return ( +
  • {props.onInsertChart(type.type)}}> +
    +
    • + ) + })} +
+ ) + })} +
) }; -export default AddChart; \ No newline at end of file +export default inject("storeChartSettings")(observer(AddChart)); \ No newline at end of file