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

Merge pull request #1431 from ONLYOFFICE/feature/change-cell-styles

Browse source 
[SSE mobile] Change styles slides
This commit is contained in:
maxkadushkin 2021-12-22 13:16:25 +03:00 committed by GitHub
parent 0d62988f44 da26003071
commit cebb400c34
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
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 React, {Fragment, useState, useEffect} from 'react';
import {observer, inject} from "mobx-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 { useTranslation } from 'react-i18next';
import {Device} from '../../../../../common/mobile/utils/device'; import {Device} from '../../../../../common/mobile/utils/device';
import { ThemeColorPalette, CustomColorPicker } from '../../../../../common/mobile/lib/component/ThemeColorPalette.jsx'; import { ThemeColorPalette, CustomColorPicker } from '../../../../../common/mobile/lib/component/ThemeColorPalette.jsx';
@ -14,6 +14,8 @@ const EditCell = props => {
const storeWorksheets = props.storeWorksheets; const storeWorksheets = props.storeWorksheets;
const wsProps = storeWorksheets.wsProps; const wsProps = storeWorksheets.wsProps;
const cellStyles = storeCellSettings.cellStyles; const cellStyles = storeCellSettings.cellStyles;
const countSlides = Math.floor(cellStyles.length / 9);
const arraySlides = Array(countSlides).fill(countSlides);
const styleName = storeCellSettings.styleName; const styleName = storeCellSettings.styleName;
const fontInfo = storeCellSettings.fontInfo; const fontInfo = storeCellSettings.fontInfo;
@ -108,16 +110,22 @@ const EditCell = props => {
</List> </List>
<BlockTitle>{_t.textCellStyles}</BlockTitle> <BlockTitle>{_t.textCellStyles}</BlockTitle>
{cellStyles.length ? ( {cellStyles.length ? (
<List className="cell-styles-list"> <Swiper pagination>
{cellStyles.map((elem, index) => { {arraySlides.map((_, indexSlide) => {
let stylesSlide = cellStyles.slice(indexSlide * 9, (indexSlide * 9) + 9);
return ( return (
<ListItem key={index} <SwiperSlide key={indexSlide}>
className={elem.name === styleName ? "item-theme active" : "item-theme"} onClick={() => props.onStyleClick(elem.name)}> <List className="cell-styles-list">
<div className='thumb' style={{backgroundImage: `url(${elem.image})`}}></div> {stylesSlide.map((elem, index) => (
</ListItem> <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> ))}
</List>
</SwiperSlide>
)})}
</Swiper>
) : null} ) : null}
</>} </>}
</List> </List>