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

addition to the lists

Browse source
This commit is contained in:
ShimaginAndrey 2021-06-07 18:06:55 +03:00
parent ea6a8da573
commit d57cfedc77
3 changed files with 63 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
apps/common/mobile/resources/less/common-ios.less
View file

@ -139,10 +139,22 @@
margin-top: 10px; margin-top: 10px;
} }
.list {
margin: 0;
}
.list .item-content {
padding-left: 0;
min-height: 65px;
.item-inner{
padding: 0;
}
}
li { li {
width: 70px; width: 70px;
height: 70px; height: 70px;
margin-right: 1px; margin: 0 7px auto;
border: 1px solid #c4c4c4; border: 1px solid #c4c4c4;
html.pixel-ratio-2 & { html.pixel-ratio-2 & {
border: 0.5px solid #c4c4c4; border: 0.5px solid #c4c4c4;

14
apps/common/mobile/resources/less/common-material.less
View file

@ -288,10 +288,22 @@
margin-top: 10px; margin-top: 10px;
} }
.list {
margin: 0;
}
.list .item-content {
padding-left: 0;
min-height: 65px;
.item-inner{
padding: 0;
}
}
li { li {
width: 70px; width: 70px;
height: 70px; height: 70px;
margin-right: 1px; margin: 0 7px auto;
border: 1px solid @gray; border: 1px solid @gray;
html.pixel-ratio-2 & { html.pixel-ratio-2 & {
border: 0.5px solid @gray; border: 0.5px solid @gray;

69
apps/documenteditor/mobile/src/view/edit/EditText.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 {f7, Swiper, SwiperSlide, List, ListItem, Icon, Row, Button, Page, Navbar, NavRight, Segmented, BlockTitle, Link} from 'framework7-react'; import {f7, Swiper, View, SwiperSlide, List, ListItem, Icon, Row, Button, Page, Navbar, NavRight, Segmented, BlockTitle, Link} 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';
@ -157,28 +157,30 @@ const PageBullets = props => {
const typeBullets = props.typeBullets; const typeBullets = props.typeBullets;
return( return(
<div className='bullets dataview'> <View className='bullets dataview'>
{bulletArrays.map((bullets, index) => ( {bulletArrays.map((bullets, index) => (
<ul className="row" style={{listStyle: 'none'}} key={'bullets-' + index}> <List className="row" style={{listStyle: 'none'}} key={'bullets-' + index}>
{bullets.map((bullet) => ( {bullets.map((bullet) => (
<li key={'bullet-' + bullet.type} data-type={bullet.type} className={bullet.type === typeBullets ? 'active' : ''} <ListItem key={'bullet-' + bullet.type} data-type={bullet.type} className={bullet.type === typeBullets ? 'active' : ''}
onClick={() => { onClick={() => {
if (bullet.type === -1) { if (bullet.type === -1) {
storeTextSettings.resetBullets(-1); storeTextSettings.resetBullets(-1);
props.f7router.back();
} }
props.onBullet(bullet.type) props.onBullet(bullet.type)
props.f7router.back();
}}> }}>
{bullet.thumb.length < 1 ? {bullet.thumb.length < 1 ?
<div className="thumb" style={{position: 'relative'}}> <Icon className="thumb" style={{position: 'relative'}}>
<label>{t('Edit.textNone')}</label> <label>{t('Edit.textNone')}</label>
</div> : </Icon> :
<div className="thumb" style={{backgroundImage: `url('resources/img/bullets/${bullet.thumb}')`}}></div> <Icon className="thumb" style={{backgroundImage: `url('resources/img/bullets/${bullet.thumb}')`}}></Icon>
} }
</li> </ListItem>
))} ))}
</ul> </List>
))} ))}
</div> </View>
) )
}; };
@ -203,28 +205,30 @@ const PageNumbers = props => {
const typeNumbers = props.typeNumbers; const typeNumbers = props.typeNumbers;
return( return(
<div className='numbers dataview'> <View className='numbers dataview'>
{numberArrays.map((numbers, index) => ( {numberArrays.map((numbers, index) => (
<ul className="row" style={{listStyle: 'none'}} key={'numbers-' + index}> <List className="row" style={{listStyle: 'none'}} key={'numbers-' + index}>
{numbers.map((number) => ( {numbers.map((number) => (
<li key={'number-' + number.type} data-type={number.type} className={number.type === typeNumbers ? 'active' : ''} <ListItem key={'number-' + number.type} data-type={number.type} className={number.type === typeNumbers ? 'active' : ''}
onClick={() => { onClick={() => {
if (number.type === -1) { if (number.type === -1) {
storeTextSettings.resetNumbers(-1); storeTextSettings.resetNumbers(-1);
props.f7router.back();
} }
props.onNumber(number.type) props.onNumber(number.type)
props.f7router.back();
}}> }}>
{number.thumb.length < 1 ? {number.thumb.length < 1 ?
<div className="thumb" style={{position: 'relative'}}> <Icon className="thumb" style={{position: 'relative'}}>
<label>{t('Edit.textNone')}</label> <label>{t('Edit.textNone')}</label>
</div> : </Icon> :
<div className="thumb" style={{backgroundImage: `url('resources/img/numbers/${number.thumb}')`}}></div> <Icon className="thumb" style={{backgroundImage: `url('resources/img/numbers/${number.thumb}')`}}></Icon>
} }
</li> </ListItem>
))} ))}
</ul> </List>
))} ))}
</div> </View>
) )
}; };
@ -242,24 +246,25 @@ const PageMultiLevel = props => {
const typeMultiLevel = props.typeMultiLevel; const typeMultiLevel = props.typeMultiLevel;
return( return(
<div className='multilevels dataview'> <View className='multilevels dataview'>
<ul className="row" style={{listStyle: 'none'}}> <List className="row" style={{listStyle: 'none'}}>
{arrayMultiLevel.map((item) => ( {arrayMultiLevel.map((item) => (
<li key={'multi-level-' + item.type} data-type={item.type} className={item.type === typeMultiLevel ? 'active' : ''} <ListItem key={'multi-level-' + item.type} data-type={item.type} className={item.type === typeMultiLevel ? 'active' : ''}
onClick={(e) => { onClick={(e) => {
item.type === -1 ? storeTextSettings.resetMultiLevel(-1) : storeTextSettings.resetMultiLevel(null); item.type === -1 ? storeTextSettings.resetMultiLevel(-1) : storeTextSettings.resetMultiLevel(null);
props.onMultiLevelList(item.type); props.onMultiLevelList(item.type);
props.f7router.back();
}}> }}>
{item.thumb.length < 1 ? {item.thumb.length < 1 ?
<div className="thumb" style={{position: 'relative'}}> <Icon className="thumb" style={{position: 'relative'}}>
<label>{t('Edit.textNone')}</label> <label>{t('Edit.textNone')}</label>
</div> : </Icon> :
<div className="thumb" style={{backgroundImage: `url('resources/img/multilevels/${item.thumb}')`}}></div> <Icon className="thumb" style={{backgroundImage: `url('resources/img/multilevels/${item.thumb}')`}}></Icon>
} }
</li> </ListItem>
))} ))}
</ul> </List>
</div> </View>
) )
} }
@ -283,10 +288,10 @@ const PageBulletsAndNumbers = props => {
</NavRight> </NavRight>
} }
</Navbar> </Navbar>
<Swiper pagination spaceBetween={20}> <Swiper pagination>
<SwiperSlide> <PageNumbers storeTextSettings={storeTextSettings} typeNumbers={typeNumbers} onNumber={props.onNumber}/></SwiperSlide> <SwiperSlide> <PageNumbers f7router={props.f7router} storeTextSettings={storeTextSettings} typeNumbers={typeNumbers} onNumber={props.onNumber}/></SwiperSlide>
<SwiperSlide> <PageBullets storeTextSettings={storeTextSettings} typeBullets={typeBullets} onBullet={props.onBullet}/></SwiperSlide> <SwiperSlide> <PageBullets f7router={props.f7router} storeTextSettings={storeTextSettings} typeBullets={typeBullets} onBullet={props.onBullet}/></SwiperSlide>
<SwiperSlide> <PageMultiLevel storeTextSettings={storeTextSettings} typeMultiLevel={typeMultiLevel} onMultiLevelList={props.onMultiLevelList}/> </SwiperSlide> <SwiperSlide> <PageMultiLevel f7router={props.f7router} storeTextSettings={storeTextSettings} typeMultiLevel={typeMultiLevel} onMultiLevelList={props.onMultiLevelList}/> </SwiperSlide>
</Swiper> </Swiper>
</Page> </Page>
) )