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

[SSE mobile] Change styles slides

Browse source
This commit is contained in:
SergeyEzhin 2021-12-21 01:14:02 +03:00
parent e79216b581
commit da26003071
1 changed files with 18 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,6 +1,6 @@
import React, {Fragment, useState, useEffect} from 'react';
import {observer, inject} from "mobx-react";
import {f7, List, ListItem, Icon, Row, Button, Page, Navbar, Segmented, BlockTitle, NavRight, Link, Toggle} from 'framework7-react';
import {f7, List, ListItem, Icon, Row, Button, Page, Navbar, Segmented, BlockTitle, NavRight, Link, Toggle, Swiper, SwiperSlide} from 'framework7-react';
import { useTranslation } from 'react-i18next';
import {Device} from '../../../../../common/mobile/utils/device';
import { ThemeColorPalette, CustomColorPicker } from '../../../../../common/mobile/lib/component/ThemeColorPalette.jsx';
@ -14,6 +14,8 @@ const EditCell = props => {
const storeWorksheets = props.storeWorksheets;
const wsProps = storeWorksheets.wsProps;
const cellStyles = storeCellSettings.cellStyles;
const countSlides = Math.floor(cellStyles.length / 9);
const arraySlides = Array(countSlides).fill(countSlides);
const styleName = storeCellSettings.styleName;
const fontInfo = storeCellSettings.fontInfo;
@ -108,16 +110,22 @@ const EditCell = props => {
</List>
<BlockTitle>{_t.textCellStyles}</BlockTitle>
{cellStyles.length ? (
<List className="cell-styles-list">
{cellStyles.map((elem, index) => {
<Swiper pagination>
{arraySlides.map((_, indexSlide) => {
let stylesSlide = cellStyles.slice(indexSlide * 9, (indexSlide * 9) + 9);
return (
<ListItem key={index}
className={elem.name === styleName ? "item-theme active" : "item-theme"} onClick={() => props.onStyleClick(elem.name)}>
<div className='thumb' style={{backgroundImage: `url(${elem.image})`}}></div>
</ListItem>
)
})}
</List>
<SwiperSlide key={indexSlide}>
<List className="cell-styles-list">
{stylesSlide.map((elem, index) => (
<ListItem key={index} className={elem.name === styleName ? "item-theme active" : "item-theme"} onClick={() => props.onStyleClick(elem.name)}>
<div className='thumb' style={{backgroundImage: `url(${elem.image})`}}></div>
</ListItem>
))}
</List>
</SwiperSlide>
)})}
</Swiper>
) : null}
</>}
</List>