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

[DE PE] Refactoring component - 'PageBulletsAndNumbers'

Browse source
This commit is contained in:
ShimaginAndrey 2022-05-18 16:05:36 +03:00
parent c4d35e03a8
commit 146f8348a8
4 changed files with 100 additions and 150 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

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

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

@ -184,18 +184,14 @@ const PageBullets = observer( props => {
const storeTextSettings = props.storeTextSettings;
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 }
]
{ 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(() => {
@ -204,22 +200,20 @@ const PageBullets = observer( props => {
return(
<View className='bullets dataview'>
{bulletArrays.map((bullets, index) => (
<List className="row" style={{listStyle: 'none'}} key={'bullets-' + index}>
{bullets.map((bullet) => (
<ListItem key={'bullet-' + bullet.subtype} data-type={bullet.subtype} className={(bullet.subtype === typeBullets) &&
(storeTextSettings.listType === 0 || storeTextSettings.listType === -1) ? 'active' : ''}
onClick={() => {
storeTextSettings.resetBullets(bullet.subtype);
props.onBullet(bullet.subtype);
}}>
<div id={`id-markers-${bullet.subtype}`} className='item-marker'>
</div>
</ListItem>
))}
</List>
))}
<List className="row" style={{listStyle: 'none'}}>
{bulletArrays.map( bullet => (
<ListItem key={'bullet-' + bullet.subtype} data-type={bullet.subtype} className={(bullet.subtype === typeBullets) &&
(storeTextSettings.listType === 0 || storeTextSettings.listType === -1) ? 'active' : ''}
onClick={() => {
storeTextSettings.resetBullets(bullet.subtype);
props.onBullet(bullet.subtype);
}}>
<div id={`id-markers-${bullet.subtype}`} className='item-marker'>
</div>
</ListItem>
))}
</List>
</View>
)
});
@ -228,18 +222,14 @@ const PageNumbers = observer( props => {
const storeTextSettings = props.storeTextSettings;
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 }
]
{ 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(() => {
@ -248,22 +238,20 @@ const PageNumbers = observer( props => {
return(
<View className='numbers dataview'>
{numberArrays.map((numbers, index) => (
<List className="row" style={{listStyle: 'none'}} key={'numbers-' + index}>
{numbers.map((number) => (
<ListItem key={'number-' + number.subtype} data-type={number.subtype} className={(number.subtype === typeNumbers) &&
(storeTextSettings.listType === 1 || storeTextSettings.listType === -1) ? 'active' : ''}
onClick={() => {
storeTextSettings.resetNumbers(number.subtype);
props.onNumber(number.subtype);
}}>
<div id={`id-numbers-${number.subtype}`} className='item-number'>
<List className="row" style={{listStyle: 'none'}}>
{numberArrays.map(number => (
<ListItem key={'number-' + number.subtype} data-type={number.subtype} className={(number.subtype === typeNumbers) &&
(storeTextSettings.listType === 1 || storeTextSettings.listType === -1) ? 'active' : ''}
onClick={() => {
storeTextSettings.resetNumbers(number.subtype);
props.onNumber(number.subtype);
}}>
<div id={`id-numbers-${number.subtype}`} className='item-number'>
</div>
</ListItem>
))}
</List>
))}
</div>
</ListItem>
))}
</List>
</View>
)
});

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

@ -237,7 +237,14 @@ class EditTextController extends Component {
getIconsBulletsAndNumbers(arrayElements, type) {
const api = Common.EditorApi.get();
if (api) api.SetDrawImagePreviewBulletForMenu(arrayElements, type);
const arr = [];
arrayElements.forEach( item => {
let data = item.drawdata;
data['divId'] = item.id;
arr.push(data);
});
if (api) api.SetDrawImagePreviewBulletForMenu(arr, type);
}
onLineSpacing(value) {

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

@ -495,40 +495,19 @@ const PageAdditionalFormatting = props => {
const PageBullets = observer(props => {
const storeTextSettings = props.storeTextSettings;
const typeBullets = storeTextSettings.typeBullets;
const markersArr = [
{type: Asc.asc_PreviewBulletType.text, text: 'None'},
{type: Asc.asc_PreviewBulletType.char, char: String.fromCharCode(0x00B7), specialFont: 'Symbol'},
{type: Asc.asc_PreviewBulletType.char, char: 'o', specialFont: 'Courier New'},
{type: Asc.asc_PreviewBulletType.char, char: String.fromCharCode(0x00A7), specialFont: 'Wingdings'},
{type: Asc.asc_PreviewBulletType.char, char: String.fromCharCode(0x0076), specialFont: 'Wingdings'},
{type: Asc.asc_PreviewBulletType.char, char: String.fromCharCode(0x00D8), specialFont: 'Wingdings'},
{type: Asc.asc_PreviewBulletType.char, char: String.fromCharCode(0x00FC), specialFont: 'Wingdings'},
{type: Asc.asc_PreviewBulletType.char, char: String.fromCharCode(0x00A8), specialFont: 'Symbol'},
];
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 }
]
{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(() => {
const arrayItemNumber = $$('.item-marker');
const arr = [];
arrayItemNumber.forEach( (item, index) => {
arr.push({...markersArr[index], divId: item.id});
});
props.getIconsBulletsAndNumbers(arr, 0);
props.getIconsBulletsAndNumbers(bulletArrays, 0);
}, []);
const paragraph = props.storeFocusObjects.paragraphObject;
@ -540,22 +519,20 @@ const PageBullets = observer(props => {
return(
<View className='bullets dataview'>
{bulletArrays.map((bullets, index) => (
<List className="row" style={{listStyle: 'none'}} key={'bullets-' + index}>
{bullets.map((bullet) => (
<ListItem key={'bullet-' + bullet.subtype} data-type={bullet.subtype} className={(bullet.subtype === typeBullets) &&
(storeTextSettings.listType === 0 || storeTextSettings.listType === -1) ? 'active' : ''}
onClick={() => {
storeTextSettings.resetBullets(bullet.subtype);
props.onBullet(bullet.subtype);
}}>
<div id={`id-markers-${bullet.subtype}`} className='item-marker'>
</div>
</ListItem>
))}
</List>
))}
<List className="row" style={{listStyle: 'none'}}>
{bulletArrays.map( bullet => (
<ListItem key={'bullet-' + bullet.subtype} data-type={bullet.subtype} className={(bullet.subtype === typeBullets) &&
(storeTextSettings.listType === 0 || storeTextSettings.listType === -1) ? 'active' : ''}
onClick={() => {
storeTextSettings.resetBullets(bullet.subtype);
props.onBullet(bullet.subtype);
}}>
<div id={bullet.id} className='item-marker'>
</div>
</ListItem>
))}
</List>
</View>
)
});
@ -563,40 +540,19 @@ const PageBullets = observer(props => {
const PageNumbers = observer(props => {
const storeTextSettings = props.storeTextSettings;
const typeNumbers = storeTextSettings.typeNumbers;
const numbersArr = [
{type: Asc.asc_PreviewBulletType.text, text: 'None'},
{type: Asc.asc_PreviewBulletType.number, numberingType: Asc.asc_oAscNumberingLevel.UpperLetterDot_Left},
{type: Asc.asc_PreviewBulletType.number, numberingType: Asc.asc_oAscNumberingLevel.LowerLetterBracket_Left},
{type: Asc.asc_PreviewBulletType.number, numberingType: Asc.asc_oAscNumberingLevel.LowerLetterDot_Left},
{type: Asc.asc_PreviewBulletType.number, numberingType: Asc.asc_oAscNumberingLevel.DecimalDot_Right},
{type: Asc.asc_PreviewBulletType.number, numberingType: Asc.asc_oAscNumberingLevel.DecimalBracket_Right},
{type: Asc.asc_PreviewBulletType.number, numberingType: Asc.asc_oAscNumberingLevel.UpperRomanDot_Right},
{type: Asc.asc_PreviewBulletType.number, numberingType: Asc.asc_oAscNumberingLevel.LowerRomanDot_Right},
];
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}
]
{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(() => {
const arrayItemNumber = $$('.item-number');
const arr = [];
arrayItemNumber.forEach( (item, index) => {
arr.push({...numbersArr[index], divId: item.id});
});
props.getIconsBulletsAndNumbers(arr, 1);
props.getIconsBulletsAndNumbers(numberArrays, 1);
}, []);
const paragraph = props.storeFocusObjects.paragraphObject;
@ -608,22 +564,20 @@ const PageNumbers = observer(props => {
return (
<View className='numbers dataview'>
{numberArrays.map((numbers, index) => (
<List className="row" style={{listStyle: 'none'}} key={'numbers-' + index}>
{numbers.map((number) => (
<ListItem key={'number-' + number.subtype} data-type={number.subtype} className={(number.subtype === typeNumbers) &&
(storeTextSettings.listType === 1 || storeTextSettings.listType === -1) ? 'active' : ''}
onClick={() => {
storeTextSettings.resetNumbers(number.subtype);
props.onNumber(number.subtype);
}}>
<div id={`id-numbers-${number.subtype}`} className='item-number'>
<List className="row" style={{listStyle: 'none'}}>
{numberArrays.map( number => (
<ListItem key={'number-' + number.subtype} data-type={number.subtype} className={(number.subtype === typeNumbers) &&
(storeTextSettings.listType === 1 || storeTextSettings.listType === -1) ? 'active' : ''}
onClick={() => {
storeTextSettings.resetNumbers(number.subtype);
props.onNumber(number.subtype);
}}>
<div id={number.id} className='item-number'>
</div>
</ListItem>
))}
</List>
))}
</div>
</ListItem>
))}
</List>
</View>
)
});