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

Merge pull request #1748 from ONLYOFFICE/feature/canvas-icon-bull-numbers

Browse source 
Feature/canvas icon bull numbers
This commit is contained in:
maxkadushkin 2022-05-19 12:56:02 +03:00 committed by GitHub
parent 18211b280a 146f8348a8
commit 3eb8eb0201
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 205 additions and 176 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
apps/common/mobile/resources/less/common.less
View file

@ -137,11 +137,12 @@
&:before, &:after { &:before, &:after {
display: none; display: none;
} }
display: flex; display: grid;
grid-template-columns: repeat(4, auto);
justify-content: space-around; justify-content: space-around;
grid-gap: 10px;
width: 100%; width: 100%;
padding: 5px; padding: 5px;
li { li {
width: 70px; width: 70px;
height: 70px; height: 70px;
@ -167,6 +168,11 @@
color: @fill-black; color: @fill-black;
} }
} }
.item-number, .item-marker, .item-multilevellist {
width: 68px;
height: 68px;
}
} }
} }
} }
@ -184,7 +190,7 @@
} }
.popover { .popover {
.page .list{ .page {
ul { ul {
background-color: var(--f7-list-bg-color); background-color: var(--f7-list-bg-color);
li:first-child, li:last-child { li:first-child, li:last-child {

9
apps/documenteditor/mobile/src/controller/edit/EditText.jsx
View file

@ -193,6 +193,14 @@ class EditTextController extends Component {
if (api) api.put_ListType(2, parseInt(type)); if (api) api.put_ListType(2, parseInt(type));
} }
getIconsBulletsAndNumbers(arrayElements, type) {
const api = Common.EditorApi.get();
const arr = [];
arrayElements.forEach( item => arr.push(item.id));
if (api) api.SetDrawImagePreviewBulletForMenu(arr, type);
}
onLineSpacing(value) { onLineSpacing(value) {
const api = Common.EditorApi.get(); const api = Common.EditorApi.get();
if (api) { if (api) {
@ -221,6 +229,7 @@ class EditTextController extends Component {
onParagraphMove={this.onParagraphMove} onParagraphMove={this.onParagraphMove}
onBullet={this.onBullet} onBullet={this.onBullet}
onNumber={this.onNumber} onNumber={this.onNumber}
getIconsBulletsAndNumbers={this.getIconsBulletsAndNumbers}
onMultiLevelList={this.onMultiLevelList} onMultiLevelList={this.onMultiLevelList}
onLineSpacing={this.onLineSpacing} onLineSpacing={this.onLineSpacing}
/> />

16
apps/documenteditor/mobile/src/less/app.less
View file

@ -136,14 +136,14 @@
.swiper-pagination-bullet-active{ .swiper-pagination-bullet-active{
background: @black; background: @black;
} }
.multilevels { // .multilevels {
li:not(:first-child){ // li:not(:first-child){
border:none; // border:none;
.item-content { // .item-content {
min-height: 70px; // min-height: 70px;
} // }
} // }
} // }
} }
// Skeleton table // Skeleton table

158
apps/documenteditor/mobile/src/view/edit/EditText.jsx
View file

@ -181,122 +181,107 @@ const PageAdditionalFormatting = props => {
}; };
const PageBullets = observer( props => { const PageBullets = observer( props => {
const { t } = useTranslation();
const bulletArrays = [
[
{type: -1, thumb: ''},
{type: 1, thumb: 'bullet-01.png'},
{type: 2, thumb: 'bullet-02.png'},
{type: 3, thumb: 'bullet-03.png'}
],
[
{type: 4, thumb: 'bullet-04.png'},
{type: 5, thumb: 'bullet-05.png'},
{type: 6, thumb: 'bullet-06.png'},
{type: 7, thumb: 'bullet-07.png'}
]
];
const storeTextSettings = props.storeTextSettings; const storeTextSettings = props.storeTextSettings;
const typeBullets = storeTextSettings.typeBullets; const typeBullets = storeTextSettings.typeBullets;
const bulletArrays = [
{ type: 0, subtype: -1 },
{ type: 0, subtype: 1 },
{ type: 0, subtype: 2 },
{ type: 0, subtype: 3 },
{ type: 0, subtype: 4 },
{ type: 0, subtype: 5 },
{ type: 0, subtype: 6 },
{ type: 0, subtype: 7 }
];
useEffect(() => {
props.getIconsBulletsAndNumbers($$('.item-marker'), 0);
}, []);
return( return(
<View className='bullets dataview'> <View className='bullets dataview'>
{bulletArrays.map((bullets, index) => ( <List className="row" style={{listStyle: 'none'}}>
<List className="row" style={{listStyle: 'none'}} key={'bullets-' + index}> {bulletArrays.map( bullet => (
{bullets.map((bullet) => ( <ListItem key={'bullet-' + bullet.subtype} data-type={bullet.subtype} className={(bullet.subtype === typeBullets) &&
<ListItem key={'bullet-' + bullet.type} data-type={bullet.type} className={(bullet.type === typeBullets) &&
(storeTextSettings.listType === 0 || storeTextSettings.listType === -1) ? 'active' : ''} (storeTextSettings.listType === 0 || storeTextSettings.listType === -1) ? 'active' : ''}
onClick={() => { onClick={() => {
storeTextSettings.resetBullets(bullet.type); storeTextSettings.resetBullets(bullet.subtype);
props.onBullet(bullet.type); props.onBullet(bullet.subtype);
}}> }}>
{bullet.thumb.length < 1 ? <div id={`id-markers-${bullet.subtype}`} className='item-marker'>
<Icon className="thumb" style={{position: 'relative'}}>
<label>{t('Edit.textNone')}</label> </div>
</Icon> :
<Icon className="thumb" style={{backgroundImage: `url('resources/img/bullets/${bullet.thumb}')`}}></Icon>
}
</ListItem> </ListItem>
))} ))}
</List> </List>
))}
</View> </View>
) )
}); });
const PageNumbers = observer( props => { const PageNumbers = observer( props => {
const { t } = useTranslation();
const numberArrays = [
[
{type: -1, thumb: ''},
{type: 4, thumb: 'number-01.png'},
{type: 5, thumb: 'number-02.png'},
{type: 6, thumb: 'number-03.png'}
],
[
{type: 1, thumb: 'number-04.png'},
{type: 2, thumb: 'number-05.png'},
{type: 3, thumb: 'number-06.png'},
{type: 7, thumb: 'number-07.png'}
]
];
const storeTextSettings = props.storeTextSettings; const storeTextSettings = props.storeTextSettings;
const typeNumbers = storeTextSettings.typeNumbers; const typeNumbers = storeTextSettings.typeNumbers;
const numberArrays = [
{ type: 1, subtype: -1},
{ type: 1, subtype: 4 },
{ type: 1, subtype: 5 },
{ type: 1, subtype: 6 },
{ type: 1, subtype: 1 },
{ type: 1, subtype: 2 },
{ type: 1, subtype: 3 },
{ type: 1, subtype: 7 }
];
useEffect(() => {
props.getIconsBulletsAndNumbers($$('.item-number'), 1);
}, []);
return( return(
<View className='numbers dataview'> <View className='numbers dataview'>
{numberArrays.map((numbers, index) => ( <List className="row" style={{listStyle: 'none'}}>
<List className="row" style={{listStyle: 'none'}} key={'numbers-' + index}> {numberArrays.map(number => (
{numbers.map((number) => ( <ListItem key={'number-' + number.subtype} data-type={number.subtype} className={(number.subtype === typeNumbers) &&
<ListItem key={'number-' + number.type} data-type={number.type} className={(number.type === typeNumbers) &&
(storeTextSettings.listType === 1 || storeTextSettings.listType === -1) ? 'active' : ''} (storeTextSettings.listType === 1 || storeTextSettings.listType === -1) ? 'active' : ''}
onClick={() => { onClick={() => {
storeTextSettings.resetNumbers(number.type); storeTextSettings.resetNumbers(number.subtype);
props.onNumber(number.type); props.onNumber(number.subtype);
}}> }}>
{number.thumb.length < 1 ? <div id={`id-numbers-${number.subtype}`} className='item-number'>
<Icon className="thumb" style={{position: 'relative'}}>
<label>{t('Edit.textNone')}</label> </div>
</Icon> :
<Icon className="thumb" style={{backgroundImage: `url('resources/img/numbers/${number.thumb}')`}}></Icon>
}
</ListItem> </ListItem>
))} ))}
</List> </List>
))}
</View> </View>
) )
}); });
const PageMultiLevel = observer( props => { const PageMultiLevel = observer( props => {
const { t } = useTranslation();
const arrayMultiLevel = [
{type: -1, thumb: ''},
{type: 1, thumb: 'multi-bracket.png'},
{type: 2, thumb: 'multi-dot.png'},
{type: 3, thumb: 'multi-bullets.png'},
];
const storeTextSettings = props.storeTextSettings; const storeTextSettings = props.storeTextSettings;
const typeMultiLevel = storeTextSettings.typeMultiLevel; const typeMultiLevel = storeTextSettings.typeMultiLevel;
const arrayMultiLevel = [
{ type: 2, subtype: -1 },
{ type: 2, subtype: 1 },
{ type: 2, subtype: 2 },
{ type: 2, subtype: 3 },
];
useEffect(() => {
props.getIconsBulletsAndNumbers($$('.item-multilevellist'), 2);
}, []);
return( return(
<View className='multilevels dataview'> <View className='multilevels dataview'>
<List className="row" style={{listStyle: 'none'}}> <List className="row" style={{listStyle: 'none'}}>
{arrayMultiLevel.map((item) => ( {arrayMultiLevel.map((item) => (
<ListItem <ListItem
key={'multi-level-' + item.type} key={'multi-level-' + item.subtype}
data-type={item.type} data-type={item.subtype}
className={item.type === typeMultiLevel && storeTextSettings.listType === -1 ? 'active' : ''} className={item.subtype === typeMultiLevel && storeTextSettings.listType === -1 ? 'active' : ''}
onClick={() => props.onMultiLevelList(item.type)}> onClick={() => props.onMultiLevelList(item.subtype)}>
{item.thumb.length < 1 ? <div id={`id-multilevellists-${item.subtype}`} className='item-multilevellist'>
<Icon className="thumb" style={{position: 'relative'}}>
<label>{t('Edit.textNone')}</label> </div>
</Icon> :
<Icon className="thumb" style={{backgroundImage: `url('resources/img/multilevels/${item.thumb}')`}}></Icon>
}
</ListItem> </ListItem>
))} ))}
</List> </List>
@ -322,13 +307,25 @@ const PageBulletsAndNumbers = props => {
</Navbar> </Navbar>
<Swiper pagination> <Swiper pagination>
<SwiperSlide> <SwiperSlide>
<PageNumbers storeTextSettings={storeTextSettings} onNumber={props.onNumber} /> <PageNumbers
storeTextSettings={storeTextSettings}
onNumber={props.onNumber}
getIconsBulletsAndNumbers={props.getIconsBulletsAndNumbers}
/>
</SwiperSlide> </SwiperSlide>
<SwiperSlide> <SwiperSlide>
<PageBullets storeTextSettings={storeTextSettings} onBullet={props.onBullet} /> <PageBullets
storeTextSettings={storeTextSettings}
onBullet={props.onBullet}
getIconsBulletsAndNumbers={props.getIconsBulletsAndNumbers}
/>
</SwiperSlide> </SwiperSlide>
<SwiperSlide> <SwiperSlide>
<PageMultiLevel storeTextSettings={storeTextSettings} onMultiLevelList={props.onMultiLevelList} /> <PageMultiLevel
storeTextSettings={storeTextSettings}
onMultiLevelList={props.onMultiLevelList}
getIconsBulletsAndNumbers={props.getIconsBulletsAndNumbers}
/>
</SwiperSlide> </SwiperSlide>
</Swiper> </Swiper>
</Page> </Page>
@ -604,7 +601,8 @@ const EditText = props => {
<ListItem title={t('Edit.textBulletsAndNumbers')} link='/edit-bullets-and-numbers/' routeProps={{ <ListItem title={t('Edit.textBulletsAndNumbers')} link='/edit-bullets-and-numbers/' routeProps={{
onBullet: props.onBullet, onBullet: props.onBullet,
onNumber: props.onNumber, onNumber: props.onNumber,
onMultiLevelList: props.onMultiLevelList onMultiLevelList: props.onMultiLevelList,
getIconsBulletsAndNumbers: props.getIconsBulletsAndNumbers,
}}> }}>
<div className="preview">{previewList}</div> <div className="preview">{previewList}</div>
{!isAndroid && <Icon slot="media" icon="icon-bullets"></Icon>} {!isAndroid && <Icon slot="media" icon="icon-bullets"></Icon>}

13
apps/presentationeditor/mobile/src/controller/edit/EditText.jsx
View file

@ -235,6 +235,18 @@ class EditTextController extends Component {
api.put_ListType(1, parseInt(type)); api.put_ListType(1, parseInt(type));
} }
getIconsBulletsAndNumbers(arrayElements, type) {
const api = Common.EditorApi.get();
const arr = [];
arrayElements.forEach( item => {
let data = item.drawdata;
data['divId'] = item.id;
arr.push(data);
});
if (api) api.SetDrawImagePreviewBulletForMenu(arr, type);
}
onLineSpacing(value) { onLineSpacing(value) {
const api = Common.EditorApi.get(); const api = Common.EditorApi.get();
const LINERULE_AUTO = 1; const LINERULE_AUTO = 1;
@ -263,6 +275,7 @@ class EditTextController extends Component {
changeLetterSpacing={this.changeLetterSpacing} changeLetterSpacing={this.changeLetterSpacing}
onBullet={this.onBullet} onBullet={this.onBullet}
onNumber={this.onNumber} onNumber={this.onNumber}
getIconsBulletsAndNumbers={this.getIconsBulletsAndNumbers}
onLineSpacing={this.onLineSpacing} onLineSpacing={this.onLineSpacing}
/> />
) )

125
apps/presentationeditor/mobile/src/view/edit/EditText.jsx
View file

@ -143,6 +143,8 @@ const EditText = props => {
<ListItem title={_t.textBulletsAndNumbers} link='/edit-bullets-and-numbers/' routeProps={{ <ListItem title={_t.textBulletsAndNumbers} link='/edit-bullets-and-numbers/' routeProps={{
onBullet: props.onBullet, onBullet: props.onBullet,
onNumber: props.onNumber, onNumber: props.onNumber,
getIconsBulletsAndNumbers: props.getIconsBulletsAndNumbers
}}> }}>
<div className="preview">{previewList}</div> <div className="preview">{previewList}</div>
{!isAndroid && <Icon slot="media" icon="icon-bullets"></Icon>} {!isAndroid && <Icon slot="media" icon="icon-bullets"></Icon>}
@ -491,24 +493,22 @@ const PageAdditionalFormatting = props => {
}; };
const PageBullets = observer(props => { const PageBullets = observer(props => {
const { t } = useTranslation();
const _t = t('View.Edit', {returnObjects: true});
const bulletArrays = [
[
{type: -1, thumb: ''},
{type: 1, thumb: 'bullet-01.png'},
{type: 2, thumb: 'bullet-02.png'},
{type: 3, thumb: 'bullet-03.png'}
],
[
{type: 4, thumb: 'bullet-04.png'},
{type: 5, thumb: 'bullet-05.png'},
{type: 6, thumb: 'bullet-06.png'},
{type: 7, thumb: 'bullet-07.png'}
]
];
const storeTextSettings = props.storeTextSettings; const storeTextSettings = props.storeTextSettings;
const typeBullets = storeTextSettings.typeBullets; const typeBullets = storeTextSettings.typeBullets;
const bulletArrays = [
{id: `id-markers-0`, type: 0, subtype: -1, drawdata: {type: Asc.asc_PreviewBulletType.text, text: 'None'} },
{id: `id-markers-1`, type: 0, subtype: 1, drawdata: {type: Asc.asc_PreviewBulletType.char, char: String.fromCharCode(0x00B7), specialFont: 'Symbol'} },
{id: `id-markers-2`, type: 0, subtype: 2, drawdata: {type: Asc.asc_PreviewBulletType.char, char: 'o', specialFont: 'Courier New'} },
{id: `id-markers-3`, type: 0, subtype: 3, drawdata: {type: Asc.asc_PreviewBulletType.char, char: String.fromCharCode(0x00A7), specialFont: 'Wingdings'} },
{id: `id-markers-4`, type: 0, subtype: 4, drawdata: {type: Asc.asc_PreviewBulletType.char, char: String.fromCharCode(0x0076), specialFont: 'Wingdings'} },
{id: `id-markers-5`, type: 0, subtype: 5, drawdata: {type: Asc.asc_PreviewBulletType.char, char: String.fromCharCode(0x00D8), specialFont: 'Wingdings'} },
{id: `id-markers-6`, type: 0, subtype: 6, drawdata: {type: Asc.asc_PreviewBulletType.char, char: String.fromCharCode(0x00FC), specialFont: 'Wingdings'} },
{id: `id-markers-7`, type: 0, subtype: 7, drawdata: {type: Asc.asc_PreviewBulletType.char, char: String.fromCharCode(0x00A8), specialFont: 'Symbol'} }
];
useEffect(() => {
props.getIconsBulletsAndNumbers(bulletArrays, 0);
}, []);
const paragraph = props.storeFocusObjects.paragraphObject; const paragraph = props.storeFocusObjects.paragraphObject;
const shapeObj = props.storeFocusObjects.shapeObject; const shapeObj = props.storeFocusObjects.shapeObject;
@ -519,49 +519,41 @@ const PageBullets = observer(props => {
return( return(
<View className='bullets dataview'> <View className='bullets dataview'>
{bulletArrays.map((bullets, index) => ( <List className="row" style={{listStyle: 'none'}}>
<List className="row" style={{listStyle: 'none'}} key={'bullets-' + index}> {bulletArrays.map( bullet => (
{bullets.map((bullet) => ( <ListItem key={'bullet-' + bullet.subtype} data-type={bullet.subtype} className={(bullet.subtype === typeBullets) &&
<ListItem key={'bullet-' + bullet.type} data-type={bullet.type} className={(bullet.type === typeBullets) &&
(storeTextSettings.listType === 0 || storeTextSettings.listType === -1) ? 'active' : ''} (storeTextSettings.listType === 0 || storeTextSettings.listType === -1) ? 'active' : ''}
onClick={() => { onClick={() => {
storeTextSettings.resetBullets(bullet.type); storeTextSettings.resetBullets(bullet.subtype);
props.onBullet(bullet.type); props.onBullet(bullet.subtype);
}}> }}>
{bullet.thumb.length < 1 ? <div id={bullet.id} className='item-marker'>
<Icon className="thumb" style={{position: 'relative'}}>
<label>{_t.textNone}</label> </div>
</Icon> :
<Icon className="thumb" style={{backgroundImage: `url('resources/img/bullets/${bullet.thumb}')`}}></Icon>
}
</ListItem> </ListItem>
))} ))}
</List> </List>
))}
</View> </View>
) )
}); });
const PageNumbers = observer(props => { const PageNumbers = observer(props => {
const { t } = useTranslation();
const _t = t('View.Edit', {returnObjects: true});
const numberArrays = [
[
{type: -1, thumb: ''},
{type: 4, thumb: 'number-01.png'},
{type: 5, thumb: 'number-02.png'},
{type: 6, thumb: 'number-03.png'}
],
[
{type: 1, thumb: 'number-04.png'},
{type: 2, thumb: 'number-05.png'},
{type: 3, thumb: 'number-06.png'},
{type: 7, thumb: 'number-07.png'}
]
];
const storeTextSettings = props.storeTextSettings; const storeTextSettings = props.storeTextSettings;
const typeNumbers = storeTextSettings.typeNumbers; const typeNumbers = storeTextSettings.typeNumbers;
const numberArrays = [
{id: `id-numbers-0`, type: 1, subtype: -1, drawdata: {type: Asc.asc_PreviewBulletType.text, text: 'None'}},
{id: `id-numbers-4`, type: 1, subtype: 4, drawdata: {type: Asc.asc_PreviewBulletType.number, numberingType: Asc.asc_oAscNumberingLevel.UpperLetterDot_Left}},
{id: `id-numbers-5`, type: 1, subtype: 5, drawdata: {type: Asc.asc_PreviewBulletType.number, numberingType: Asc.asc_oAscNumberingLevel.LowerLetterBracket_Left}},
{id: `id-numbers-6`, type: 1, subtype: 6, drawdata: {type: Asc.asc_PreviewBulletType.number, numberingType: Asc.asc_oAscNumberingLevel.LowerLetterDot_Left}},
{id: `id-numbers-1`, type: 1, subtype: 1, drawdata: {type: Asc.asc_PreviewBulletType.number, numberingType: Asc.asc_oAscNumberingLevel.DecimalDot_Right}},
{id: `id-numbers-2`, type: 1, subtype: 2, drawdata: {type: Asc.asc_PreviewBulletType.number, numberingType: Asc.asc_oAscNumberingLevel.DecimalBracket_Right}},
{id: `id-numbers-3`, type: 1, subtype: 3, drawdata: {type: Asc.asc_PreviewBulletType.number, numberingType: Asc.asc_oAscNumberingLevel.UpperRomanDot_Right}},
{id: `id-numbers-7`, type: 1, subtype: 7, drawdata: {type: Asc.asc_PreviewBulletType.number, numberingType: Asc.asc_oAscNumberingLevel.LowerRomanDot_Right}}
];
useEffect(() => {
props.getIconsBulletsAndNumbers(numberArrays, 1);
}, []);
const paragraph = props.storeFocusObjects.paragraphObject; const paragraph = props.storeFocusObjects.paragraphObject;
const shapeObj = props.storeFocusObjects.shapeObject; const shapeObj = props.storeFocusObjects.shapeObject;
@ -572,25 +564,20 @@ const PageNumbers = observer(props => {
return ( return (
<View className='numbers dataview'> <View className='numbers dataview'>
{numberArrays.map((numbers, index) => ( <List className="row" style={{listStyle: 'none'}}>
<List className="row" style={{listStyle: 'none'}} key={'numbers-' + index}> {numberArrays.map( number => (
{numbers.map((number) => ( <ListItem key={'number-' + number.subtype} data-type={number.subtype} className={(number.subtype === typeNumbers) &&
<ListItem key={'number-' + number.type} data-type={number.type} className={(number.type === typeNumbers) &&
(storeTextSettings.listType === 1 || storeTextSettings.listType === -1) ? 'active' : ''} (storeTextSettings.listType === 1 || storeTextSettings.listType === -1) ? 'active' : ''}
onClick={() => { onClick={() => {
storeTextSettings.resetNumbers(number.type); storeTextSettings.resetNumbers(number.subtype);
props.onNumber(number.type); props.onNumber(number.subtype);
}}> }}>
{number.thumb.length < 1 ? <div id={number.id} className='item-number'>
<Icon className="thumb" style={{position: 'relative'}}>
<label>{_t.textNone}</label> </div>
</Icon> :
<Icon className="thumb" style={{backgroundImage: `url('resources/img/numbers/${number.thumb}')`}}></Icon>
}
</ListItem> </ListItem>
))} ))}
</List> </List>
))}
</View> </View>
) )
}); });
@ -613,8 +600,24 @@ const PageBulletsAndNumbers = props => {
} }
</Navbar> </Navbar>
<Swiper pagination> <Swiper pagination>
<SwiperSlide> <PageNumbers f7router={props.f7router} storeFocusObjects={storeFocusObjects} storeTextSettings={storeTextSettings} onNumber={props.onNumber}/></SwiperSlide> <SwiperSlide>
<SwiperSlide> <PageBullets f7router={props.f7router} storeFocusObjects={storeFocusObjects} storeTextSettings={storeTextSettings} onBullet={props.onBullet}/></SwiperSlide> <PageNumbers
f7router={props.f7router}
storeFocusObjects={storeFocusObjects}
storeTextSettings={storeTextSettings}
onNumber={props.onNumber}
getIconsBulletsAndNumbers={props.getIconsBulletsAndNumbers}
/>
</SwiperSlide>
<SwiperSlide>
<PageBullets
f7router={props.f7router}
storeFocusObjects={storeFocusObjects}
storeTextSettings={storeTextSettings}
onBullet={props.onBullet}
getIconsBulletsAndNumbers={props.getIconsBulletsAndNumbers}
/>
</SwiperSlide>
</Swiper> </Swiper>
</Page> </Page>
) )