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

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

@ -1,6 +1,6 @@
import React, {Fragment, useState} from 'react'; import React, {Fragment, useState} from 'react';
import {observer, inject} from "mobx-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 {f7} from 'framework7-react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import {Device} from '../../../../../common/mobile/utils/device'; import {Device} from '../../../../../common/mobile/utils/device';
@ -143,6 +143,8 @@ const PageChartType = props => {
const { t } = useTranslation(); const { t } = useTranslation();
const storeChartSettings = props.storeChartSettings; const storeChartSettings = props.storeChartSettings;
const types = storeChartSettings.types; const types = storeChartSettings.types;
const countSlides = Math.floor(types.length / 3);
const arraySlides = Array(countSlides).fill(countSlides);
const storeFocusObjects = props.storeFocusObjects; const storeFocusObjects = props.storeFocusObjects;
const chartProperties = storeFocusObjects.chartObject && storeFocusObjects.chartObject.get_ChartProperties(); const chartProperties = storeFocusObjects.chartObject && storeFocusObjects.chartObject.get_ChartProperties();
const curType = chartProperties && chartProperties.getType(); const curType = chartProperties && chartProperties.getType();
@ -153,23 +155,35 @@ const PageChartType = props => {
<div id={"edit-chart-type"} className="page-content no-padding-top dataview"> <div id={"edit-chart-type"} className="page-content no-padding-top dataview">
<div className="chart-types"> <div className="chart-types">
{types.map((row, rowIndex) => { {types && types.length ? (
return ( <Swiper>
<ul className="row" key={`row-${rowIndex}`}> {arraySlides.map((_, indexSlide) => {
{row.map((type, index)=>{ let typesSlide = types.slice(indexSlide * 3, (indexSlide * 3) + 3);
return(
<li key={`${rowIndex}-${index}`} return (
className={curType === type.type ? ' active' : ''} <SwiperSlide key={indexSlide}>
onClick={() => {props.onType(type.type)}}> {typesSlide.map((row, rowIndex) => {
<div className={'thumb'} return (
style={{backgroundImage: `url('resources/img/charts/${type.thumb}')`}}> <ul className="row" key={`row-${rowIndex}`}>
</div> {row.map((type, index) => {
</li> return (
) <li key={`${rowIndex}-${index}`}
})} className={curType === type.type ? ' active' : ''}
</ul> onClick={() => {props.onType(type.type)}}>
) <div className={'thumb'}
})} style={{backgroundImage: `url('resources/img/charts/${type.thumb}')`}}>
</div>
</li>
)
})}
</ul>
)
})}
</SwiperSlide>
)
})}
</Swiper>
) : null}
</div> </div>
</div> </div>
</Page> </Page>

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

@ -1,6 +1,6 @@
import React, {Fragment, useState} from 'react'; import React, {Fragment, useState} from 'react';
import {observer, inject} from "mobx-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 { useTranslation } from 'react-i18next';
import {Device} from '../../../../../common/mobile/utils/device'; import {Device} from '../../../../../common/mobile/utils/device';
import {CustomColorPicker, ThemeColorPalette} from "../../../../../common/mobile/lib/component/ThemeColorPalette.jsx"; import {CustomColorPicker, ThemeColorPalette} from "../../../../../common/mobile/lib/component/ThemeColorPalette.jsx";
@ -153,6 +153,8 @@ const PageChartType = props => {
const { t } = useTranslation(); const { t } = useTranslation();
const storeChartSettings = props.storeChartSettings; const storeChartSettings = props.storeChartSettings;
const types = storeChartSettings.types; const types = storeChartSettings.types;
const countSlides = Math.floor(types.length / 3);
const arraySlides = Array(countSlides).fill(countSlides);
const storeFocusObjects = props.storeFocusObjects; const storeFocusObjects = props.storeFocusObjects;
const chartProperties = storeFocusObjects.chartObject && storeFocusObjects.chartObject.get_ChartProperties(); const chartProperties = storeFocusObjects.chartObject && storeFocusObjects.chartObject.get_ChartProperties();
const curType = chartProperties && chartProperties.getType(); const curType = chartProperties && chartProperties.getType();
@ -163,23 +165,35 @@ const PageChartType = props => {
<div id={"edit-chart-type"} className="page-content no-padding-top dataview"> <div id={"edit-chart-type"} className="page-content no-padding-top dataview">
<div className="chart-types"> <div className="chart-types">
{types.map((row, rowIndex) => { {types && types.length ? (
return ( <Swiper>
<ul className="row" key={`row-${rowIndex}`}> {arraySlides.map((_, indexSlide) => {
{row.map((type, index)=>{ let typesSlide = types.slice(indexSlide * 3, (indexSlide * 3) + 3);
return(
<li key={`${rowIndex}-${index}`} return (
className={curType === type.type ? ' active' : ''} <SwiperSlide key={indexSlide}>
onClick={() => {props.onType(type.type)}}> {typesSlide.map((row, rowIndex) => {
<div className={'thumb'} return (
style={{backgroundImage: `url('resources/img/charts/${type.thumb}')`}}> <ul className="row" key={`row-${rowIndex}`}>
</div> {row.map((type, index) => {
</li> return (
) <li key={`${rowIndex}-${index}`}
})} className={curType === type.type ? ' active' : ''}
</ul> onClick={() => {props.onType(type.type)}}>
) <div className={'thumb'}
})} style={{backgroundImage: `url('resources/img/charts/${type.thumb}')`}}>
</div>
</li>
)
})}
</ul>
)
})}
</SwiperSlide>
)
})}
</Swiper>
) : null}
</div> </div>
</div> </div>
</Page> </Page>

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

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

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

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

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

@ -1,6 +1,6 @@
import React, {Fragment, useState, useEffect} from 'react'; import React, {Fragment, useState, useEffect} from 'react';
import {observer, inject} from "mobx-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 { useTranslation } from 'react-i18next';
import {Device} from '../../../../../common/mobile/utils/device'; import {Device} from '../../../../../common/mobile/utils/device';
import {CustomColorPicker, ThemeColorPalette} from "../../../../../common/mobile/lib/component/ThemeColorPalette.jsx"; import {CustomColorPicker, ThemeColorPalette} from "../../../../../common/mobile/lib/component/ThemeColorPalette.jsx";
@ -148,6 +148,8 @@ const PageChartType = props => {
const { t } = useTranslation(); const { t } = useTranslation();
const storeChartSettings = props.storeChartSettings; const storeChartSettings = props.storeChartSettings;
const types = storeChartSettings.types; const types = storeChartSettings.types;
const countSlides = Math.floor(types.length / 3);
const arraySlides = Array(countSlides).fill(countSlides);
const storeFocusObjects = props.storeFocusObjects; const storeFocusObjects = props.storeFocusObjects;
const chartProperties = storeFocusObjects.chartObject && storeFocusObjects.chartObject.get_ChartProperties(); const chartProperties = storeFocusObjects.chartObject && storeFocusObjects.chartObject.get_ChartProperties();
const curType = chartProperties && chartProperties.getType(); const curType = chartProperties && chartProperties.getType();
@ -155,24 +157,35 @@ const PageChartType = props => {
return ( return (
<Page> <Page>
<Navbar backLink={t('View.Edit.textBack')} title={t('View.Edit.textType')} /> <Navbar backLink={t('View.Edit.textBack')} title={t('View.Edit.textType')} />
<div id={"edit-chart-type"} className="page-content no-padding-top dataview"> <div id={"edit-chart-type"} className="page-content no-padding-top dataview">
<div className="chart-types"> <div className="chart-types">
{types.map((row, rowIndex) => { {types && types.length ? (
return ( <Swiper pagination={true}>
<ul className="row" key={`row-${rowIndex}`}> {arraySlides.map((_, indexSlide) => {
{row.map((type, index)=>{ let typesSlide = types.slice(indexSlide * 3, (indexSlide * 3) + 3);
return(
<li key={`${rowIndex}-${index}`} return (
className={curType === type.type ? ' active' : ''} <SwiperSlide key={indexSlide}>
onClick={() => {props.onType(type.type)}}> {typesSlide.map((row, rowIndex) => {
<div className={'thumb' + ` ${type.thumb}`}></div> return (
</li> <ul className="row" key={`row-${rowIndex}`}>
) {row.map((type, index) => {
})} return (
</ul> <li key={`${rowIndex}-${index}`}
) className={curType === type.type ? ' active' : ''}
})} onClick={() => {props.onType(type.type)}}>
<div className={'thumb' + ` ${type.thumb}`}></div>
</li>
)
})}
</ul>
)
})}
</SwiperSlide>
)
})}
</Swiper>
) : null}
</div> </div>
</div> </div>
</Page> </Page>