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

[DE PE SSE mobile] Change chart types

Browse source
This commit is contained in:
SergeyEzhin 2021-12-23 23:30:11 +03:00
parent da26003071
commit 1e5e794c6d
5 changed files with 126 additions and 69 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,6 +1,6 @@
import React, {Fragment, useState} from 'react';
import {observer, inject} from "mobx-react";
import {List, ListItem, ListButton, Icon, Row, Page, Navbar, NavRight, BlockTitle, Toggle, Range, Link, Tabs, Tab} from 'framework7-react';
import {List, ListItem, ListButton, Icon, Row, Page, Navbar, NavRight, BlockTitle, Toggle, Range, Link, Tabs, Tab, Swiper, SwiperSlide} from 'framework7-react';
import {f7} from 'framework7-react';
import { useTranslation } from 'react-i18next';
import {Device} from '../../../../../common/mobile/utils/device';
@ -143,6 +143,8 @@ const PageChartType = props => {
const { t } = useTranslation();
const storeChartSettings = props.storeChartSettings;
const types = storeChartSettings.types;
const countSlides = Math.floor(types.length / 3);
const arraySlides = Array(countSlides).fill(countSlides);
const storeFocusObjects = props.storeFocusObjects;
const chartProperties = storeFocusObjects.chartObject && storeFocusObjects.chartObject.get_ChartProperties();
const curType = chartProperties && chartProperties.getType();
@ -153,7 +155,14 @@ const PageChartType = props => {
<div id={"edit-chart-type"} className="page-content no-padding-top dataview">
<div className="chart-types">
{types.map((row, rowIndex) => {
{types && types.length ? (
<Swiper>
{arraySlides.map((_, indexSlide) => {
let typesSlide = types.slice(indexSlide * 3, (indexSlide * 3) + 3);
return (
<SwiperSlide key={indexSlide}>
{typesSlide.map((row, rowIndex) => {
return (
<ul className="row" key={`row-${rowIndex}`}>
{row.map((type, index) => {
@ -170,6 +179,11 @@ const PageChartType = props => {
</ul>
)
})}
</SwiperSlide>
)
})}
</Swiper>
) : null}
</div>
</div>
</Page>

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

@ -1,6 +1,6 @@
import React, {Fragment, useState} from 'react';
import {observer, inject} from "mobx-react";
import {List, ListItem, ListButton, Icon, Row, Page, Navbar, BlockTitle, Toggle, Range, Link, Tabs, Tab, NavRight} from 'framework7-react';
import {List, ListItem, ListButton, Icon, Row, Page, Navbar, BlockTitle, Toggle, Range, Link, Tabs, Tab, NavRight, Swiper, SwiperSlide} from 'framework7-react';
import { useTranslation } from 'react-i18next';
import {Device} from '../../../../../common/mobile/utils/device';
import {CustomColorPicker, ThemeColorPalette} from "../../../../../common/mobile/lib/component/ThemeColorPalette.jsx";
@ -153,6 +153,8 @@ const PageChartType = props => {
const { t } = useTranslation();
const storeChartSettings = props.storeChartSettings;
const types = storeChartSettings.types;
const countSlides = Math.floor(types.length / 3);
const arraySlides = Array(countSlides).fill(countSlides);
const storeFocusObjects = props.storeFocusObjects;
const chartProperties = storeFocusObjects.chartObject && storeFocusObjects.chartObject.get_ChartProperties();
const curType = chartProperties && chartProperties.getType();
@ -163,7 +165,14 @@ const PageChartType = props => {
<div id={"edit-chart-type"} className="page-content no-padding-top dataview">
<div className="chart-types">
{types.map((row, rowIndex) => {
{types && types.length ? (
<Swiper>
{arraySlides.map((_, indexSlide) => {
let typesSlide = types.slice(indexSlide * 3, (indexSlide * 3) + 3);
return (
<SwiperSlide key={indexSlide}>
{typesSlide.map((row, rowIndex) => {
return (
<ul className="row" key={`row-${rowIndex}`}>
{row.map((type, index) => {
@ -180,6 +189,11 @@ const PageChartType = props => {
</ul>
)
})}
</SwiperSlide>
)
})}
</Swiper>
) : null}
</div>
</div>
</Page>

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

@ -1,11 +1,22 @@
import React, {Fragment, useState} from 'react';
import {observer, inject} from "mobx-react";
import {Swiper, SwiperSlide} from 'framework7-react';
const AddChart = props => {
const types = props.storeChartSettings.types;
const countSlides = Math.floor(types.length / 3);
const arraySlides = Array(countSlides).fill(countSlides);
return (
<div className={'dataview chart-types'}>
{types.map((row, indexRow) => {
{types && types.length ? (
<Swiper pagination={true}>
{arraySlides.map((_, indexSlide) => {
let typesSlide = types.slice(indexSlide * 3, (indexSlide * 3) + 3);
return (
<SwiperSlide key={indexSlide}>
{typesSlide.map((row, indexRow) => {
return (
<ul className="row" key={`row-${indexRow}`}>
{row.map((type, index) => {
@ -19,6 +30,11 @@ const AddChart = props => {
</ul>
)
})}
</SwiperSlide>
)
})}
</Swiper>
) : null}
</div>
)
};

4
apps/spreadsheeteditor/mobile/src/view/edit/EditCell.jsx
View file

@ -109,8 +109,8 @@ const EditCell = props => {
</ListItem>
</List>
<BlockTitle>{_t.textCellStyles}</BlockTitle>
{cellStyles.length ? (
<Swiper pagination>
{cellStyles && cellStyles.length ? (
<Swiper pagination={true}>
{arraySlides.map((_, indexSlide) => {
let stylesSlide = cellStyles.slice(indexSlide * 9, (indexSlide * 9) + 9);

19
apps/spreadsheeteditor/mobile/src/view/edit/EditChart.jsx
View file

@ -1,6 +1,6 @@
import React, {Fragment, useState, useEffect} from 'react';
import {observer, inject} from "mobx-react";
import {f7, List, ListItem, ListButton, ListInput, Icon, Page, Navbar, NavRight, BlockTitle, Toggle, Range, Link, Tabs, Tab} from 'framework7-react';
import {f7, List, ListItem, ListButton, ListInput, Icon, Page, Navbar, NavRight, BlockTitle, Toggle, Range, Link, Tabs, Tab, Swiper, SwiperSlide} from 'framework7-react';
import { useTranslation } from 'react-i18next';
import {Device} from '../../../../../common/mobile/utils/device';
import {CustomColorPicker, ThemeColorPalette} from "../../../../../common/mobile/lib/component/ThemeColorPalette.jsx";
@ -148,6 +148,8 @@ const PageChartType = props => {
const { t } = useTranslation();
const storeChartSettings = props.storeChartSettings;
const types = storeChartSettings.types;
const countSlides = Math.floor(types.length / 3);
const arraySlides = Array(countSlides).fill(countSlides);
const storeFocusObjects = props.storeFocusObjects;
const chartProperties = storeFocusObjects.chartObject && storeFocusObjects.chartObject.get_ChartProperties();
const curType = chartProperties && chartProperties.getType();
@ -155,10 +157,16 @@ const PageChartType = props => {
return (
<Page>
<Navbar backLink={t('View.Edit.textBack')} title={t('View.Edit.textType')} />
<div id={"edit-chart-type"} className="page-content no-padding-top dataview">
<div className="chart-types">
{types.map((row, rowIndex) => {
{types && types.length ? (
<Swiper pagination={true}>
{arraySlides.map((_, indexSlide) => {
let typesSlide = types.slice(indexSlide * 3, (indexSlide * 3) + 3);
return (
<SwiperSlide key={indexSlide}>
{typesSlide.map((row, rowIndex) => {
return (
<ul className="row" key={`row-${rowIndex}`}>
{row.map((type, index) => {
@ -173,6 +181,11 @@ const PageChartType = props => {
</ul>
)
})}
</SwiperSlide>
)
})}
</Swiper>
) : null}
</div>
</div>
</Page>