[DE PE SSE mobile] Change chart types
This commit is contained in:
SergeyEzhin
parent
da26003071
commit
1e5e794c6d
|
|
@ -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,23 +155,35 @@ const PageChartType = props => {
|
|||
|
||||
<div id={"edit-chart-type"} className="page-content no-padding-top dataview">
|
||||
<div className="chart-types">
|
||||
{types.map((row, rowIndex) => {
|
||||
return (
|
||||
<ul className="row" key={`row-${rowIndex}`}>
|
||||
{row.map((type, index)=>{
|
||||
return(
|
||||
<li key={`${rowIndex}-${index}`}
|
||||
className={curType === type.type ? ' active' : ''}
|
||||
onClick={() => {props.onType(type.type)}}>
|
||||
<div className={'thumb'}
|
||||
style={{backgroundImage: `url('resources/img/charts/${type.thumb}')`}}>
|
||||
</div>
|
||||
</li>
|
||||
)
|
||||
})}
|
||||
</ul>
|
||||
)
|
||||
})}
|
||||
{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) => {
|
||||
return (
|
||||
<li key={`${rowIndex}-${index}`}
|
||||
className={curType === type.type ? ' active' : ''}
|
||||
onClick={() => {props.onType(type.type)}}>
|
||||
<div className={'thumb'}
|
||||
style={{backgroundImage: `url('resources/img/charts/${type.thumb}')`}}>
|
||||
</div>
|
||||
</li>
|
||||
)
|
||||
})}
|
||||
</ul>
|
||||
)
|
||||
})}
|
||||
</SwiperSlide>
|
||||
)
|
||||
})}
|
||||
</Swiper>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
</Page>
|
||||
|
|
|
|||
|
|
@ -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,23 +165,35 @@ const PageChartType = props => {
|
|||
|
||||
<div id={"edit-chart-type"} className="page-content no-padding-top dataview">
|
||||
<div className="chart-types">
|
||||
{types.map((row, rowIndex) => {
|
||||
return (
|
||||
<ul className="row" key={`row-${rowIndex}`}>
|
||||
{row.map((type, index)=>{
|
||||
return(
|
||||
<li key={`${rowIndex}-${index}`}
|
||||
className={curType === type.type ? ' active' : ''}
|
||||
onClick={() => {props.onType(type.type)}}>
|
||||
<div className={'thumb'}
|
||||
style={{backgroundImage: `url('resources/img/charts/${type.thumb}')`}}>
|
||||
</div>
|
||||
</li>
|
||||
)
|
||||
})}
|
||||
</ul>
|
||||
)
|
||||
})}
|
||||
{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) => {
|
||||
return (
|
||||
<li key={`${rowIndex}-${index}`}
|
||||
className={curType === type.type ? ' active' : ''}
|
||||
onClick={() => {props.onType(type.type)}}>
|
||||
<div className={'thumb'}
|
||||
style={{backgroundImage: `url('resources/img/charts/${type.thumb}')`}}>
|
||||
</div>
|
||||
</li>
|
||||
)
|
||||
})}
|
||||
</ul>
|
||||
)
|
||||
})}
|
||||
</SwiperSlide>
|
||||
)
|
||||
})}
|
||||
</Swiper>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
</Page>
|
||||
|
|
|
|||
|
|
@ -1,24 +1,40 @@
|
|||
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) => {
|
||||
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>
|
||||
)
|
||||
})}
|
||||
{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) => {
|
||||
return (
|
||||
<li key={`${indexRow}-${index}`}
|
||||
onClick={()=>{props.onInsertChart(type.type)}}>
|
||||
<div className={`thumb ${type.thumb}`}></div>
|
||||
</li>
|
||||
)
|
||||
})}
|
||||
</ul>
|
||||
)
|
||||
})}
|
||||
</SwiperSlide>
|
||||
)
|
||||
})}
|
||||
</Swiper>
|
||||
) : null}
|
||||
</div>
|
||||
)
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
||||
|
|
|
|||
|
|
@ -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,24 +157,35 @@ 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) => {
|
||||
return (
|
||||
<ul className="row" key={`row-${rowIndex}`}>
|
||||
{row.map((type, index)=>{
|
||||
return(
|
||||
<li key={`${rowIndex}-${index}`}
|
||||
className={curType === type.type ? ' active' : ''}
|
||||
onClick={() => {props.onType(type.type)}}>
|
||||
<div className={'thumb' + ` ${type.thumb}`}></div>
|
||||
</li>
|
||||
)
|
||||
})}
|
||||
</ul>
|
||||
)
|
||||
})}
|
||||
{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) => {
|
||||
return (
|
||||
<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>
|
||||
</Page>
|
||||
|
|
|
|||
Loading…
Reference in a new issue