Create multi-level list

apps/common/mobile/resources/less/common-ios.less

@@ -123,9 +123,10 @@
         }
     }
 
-    // Bullets and numbers
+    // Bullets, numbers and multilevels
     .bullets,
-    .numbers {
+    .numbers,
+    .multilevels {
         .page-content {
             background: @white;
         }

apps/common/mobile/resources/less/common-material.less

@@ -272,9 +272,10 @@
             }
         }
     }
-    // Bullets and numbers
+    // Bullets, numbers and multilevels
     .bullets,
-    .numbers {
+    .numbers,
+    .multilevels {
         .page-content {
             background: @white;
         }

apps/documenteditor/mobile/locale/en.json

@@ -360,8 +360,7 @@
     "textHighlightColor": "Highlight Color",
     "textAdditionalFormatting": "Additional Formatting",
     "textAdditional": "Additional",
-    "textBullets": "Bullets",
+    "textBulletsAndNumbers": "Bullets & Numbers",
-    "textNumbers": "Numbers",
     "textLineSpacing": "Line Spacing",
     "textFonts": "Fonts",
     "textAuto": "Auto",

apps/documenteditor/mobile/src/controller/Main.jsx

@@ -544,14 +544,22 @@ class MainController extends Component {
                 case 0:
                     storeTextSettings.resetBullets(subtype);
                     storeTextSettings.resetNumbers(-1);
+                    storeTextSettings.resetMultiLevel(-1);
                     break;
                 case 1:
                     storeTextSettings.resetNumbers(subtype);
                     storeTextSettings.resetBullets(-1);
+                    storeTextSettings.resetMultiLevel(-1);
+                    break;
+                case 2:
+                    storeTextSettings.resetMultiLevel(subtype);
+                    storeTextSettings.resetBullets(-1);
+                    storeTextSettings.resetNumbers(-1);
                     break;
                 default: 
                     storeTextSettings.resetBullets(-1);
                     storeTextSettings.resetNumbers(-1);
+                    storeTextSettings.resetMultiLevel(-1);
             }
         });
         this.api.asc_registerCallback('asc_onPrAlign', (align) => {

apps/documenteditor/mobile/src/controller/edit/EditText.jsx

@@ -183,6 +183,11 @@ class EditTextController extends Component {
         }
     }
 
+    onMultiLevelList(type) {
+        const api = Common.EditorApi.get();
+        if (api) api.put_ListType(2, parseInt(type));
+    }
+
     onLineSpacing(value) {
         const api = Common.EditorApi.get();
         if (api) {
@@ -210,6 +215,7 @@ class EditTextController extends Component {
                       onParagraphMove={this.onParagraphMove}
                       onBullet={this.onBullet}
                       onNumber={this.onNumber}
+                      onMultiLevelList={this.onMultiLevelList}
                       onLineSpacing={this.onLineSpacing}
             />
         )

apps/documenteditor/mobile/src/less/app.less

@@ -96,3 +96,11 @@
     }
 }
 
+.phone, .tablet {
+    .swiper-container{
+        position: static;
+   }
+}
+
+
+

apps/documenteditor/mobile/src/store/textSettings.js

@@ -14,6 +14,7 @@ export class storeTextSettings {
             listType: observable,
             typeBullets: observable,
             typeNumbers: observable,
+            typeMultiLevel: observable,
             paragraphAlign: observable,
             textColor: observable,
             customTextColors: observable,
@@ -32,6 +33,7 @@ export class storeTextSettings {
             resetListType: action,
             resetBullets: action,
             resetNumbers: action,
+            resetMultiLevel: action,
             resetParagraphAlign: action,
             resetTextColor: action,
             changeCustomTextColors: action,
@@ -52,6 +54,7 @@ export class storeTextSettings {
     listType = undefined;
     typeBullets = undefined;
     typeNumbers = undefined;
+    typeMultiLevel = undefined;
     paragraphAlign = undefined;
     textColor = undefined;
     customTextColors = [];
@@ -115,6 +118,10 @@ export class storeTextSettings {
         this.typeNumbers = type;
     }
 
+    resetMultiLevel(type) {
+        this.typeMultiLevel = type;
+    }
+
     resetParagraphAlign (align) {
         let value;
         switch (align) {

apps/documenteditor/mobile/src/view/edit/Edit.jsx

@@ -14,7 +14,7 @@ import EditChartController from "../../controller/edit/EditChart";
 import EditHyperlinkController from "../../controller/edit/EditHyperlink";
 import EditHeaderController from "../../controller/edit/EditHeader";
 
-import {PageTextFonts, PageTextAddFormatting, PageTextBullets, PageTextNumbers, PageTextLineSpacing, PageTextFontColor, PageTextCustomFontColor, PageTextBackgroundColor, PageTextCustomBackColor} from "./EditText";
+import {PageTextFonts, PageTextAddFormatting, PageTextBullets, PageTextNumbers, PageTextBulletsAndNumbers, PageTextLineSpacing, PageTextFontColor, PageTextCustomFontColor, PageTextBackgroundColor, PageTextCustomBackColor} from "./EditText";
 import {ParagraphAdvSettings, PageParagraphBackColor, PageParagraphCustomColor} from "./EditParagraph";
 import {PageShapeStyleNoFill, PageShapeStyle, PageShapeCustomFillColor, PageShapeBorderColor, PageShapeCustomBorderColor, PageWrap, PageReorder, PageReplace} from "./EditShape";
 import {PageImageReorder, PageImageReplace, PageImageWrap, PageLinkSettings} from "./EditImage";
@@ -39,6 +39,10 @@ const routes = [
         path: '/edit-text-numbers/',
         component: PageTextNumbers,
     },
+    {
+        path: '/edit-bullets-and-numbers/',
+        component: PageTextBulletsAndNumbers,
+    },
     {
         path: '/edit-text-line-spacing/',
         component: PageTextLineSpacing,

apps/documenteditor/mobile/src/view/edit/EditText.jsx

@@ -1,6 +1,6 @@
 import React, {Fragment, useState } from 'react';
 import {observer, inject} from "mobx-react";
-import {f7, List, ListItem, Icon, Row, Button, Page, Navbar, NavRight, Segmented, BlockTitle, Link} from 'framework7-react';
+import {f7, Swiper, SwiperSlide, List, ListItem, Icon, Row, Button, Page, Navbar, NavRight, Segmented, BlockTitle, Link} from 'framework7-react';
 import { useTranslation } from 'react-i18next';
 import {Device} from '../../../../../common/mobile/utils/device';
 
@@ -154,19 +154,10 @@ const PageBullets = props => {
         ]
     ];
     const storeTextSettings = props.storeTextSettings;
-    const typeBullets = storeTextSettings.typeBullets;
+    const typeBullets = props.typeBullets;
     
     return(
-        <Page className='bullets dataview'>
+        <div className='bullets dataview'>
-            <Navbar title={t('Edit.textBullets')} backLink={t('Edit.textBack')}>
-                {Device.phone &&
-                    <NavRight>
-                        <Link sheetClose='#edit-sheet'>
-                            <Icon icon='icon-expand-down'/>
-                        </Link>
-                    </NavRight>
-                }
-            </Navbar>
             {bulletArrays.map((bullets, index) => (
                     <ul className="row" style={{listStyle: 'none'}} key={'bullets-' + index}>
                         {bullets.map((bullet) => (
@@ -187,7 +178,7 @@ const PageBullets = props => {
                         ))}
                     </ul>
             ))}
-        </Page>
+        </div>
     )
 };
 
@@ -207,19 +198,12 @@ const PageNumbers = props => {
             {type: 7, thumb: 'number-07.png'}
         ]
     ];
+
     const storeTextSettings = props.storeTextSettings;
-    const typeNumbers = storeTextSettings.typeNumbers;
+    const typeNumbers = props.typeNumbers;
+    
     return(
-        <Page className='numbers dataview'>
+        <div className='numbers dataview'>
-            <Navbar title={t('Edit.textNumbers')} backLink={t('Edit.textBack')}>
-                {Device.phone &&
-                    <NavRight>
-                        <Link sheetClose='#edit-sheet'>
-                            <Icon icon='icon-expand-down'/>
-                        </Link>
-                    </NavRight>
-                }
-            </Navbar>
             {numberArrays.map((numbers, index) => (
                 <ul className="row" style={{listStyle: 'none'}} key={'numbers-' + index}>
                     {numbers.map((number) => (
@@ -240,10 +224,78 @@ const PageNumbers = props => {
                     ))}
                 </ul>
             ))}
-        </Page>
+        </div>
     )
 };
 
+const PageMultiLevel = 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 typeMultiLevel = props.typeMultiLevel;
+
+    console.log(typeMultiLevel)
+
+    return(
+        <div className='multilevels dataview'>
+                <ul className="row" style={{listStyle: 'none'}}>
+                    {arrayMultiLevel.map((item) => (
+                        <li key={'multi-level-' + item.type} data-type={item.type}  className={item.type === typeMultiLevel ? 'active' : ''}
+                        onClick={() => {
+                            if (item.type === -1) {
+                                storeTextSettings.resetMultiLevel(-1);
+                            }
+                            props.onMultiLevelList(item.type);
+                            }}>
+                            {item.thumb.length < 1 ?
+                                <div className="thumb" style={{position: 'relative'}}>
+                                    <label>{t('Edit.textNone')}</label>
+                                </div> :
+                                <div className="thumb" style={{backgroundImage: `url('resources/img/multilevels/${item.thumb}')`}}></div>
+                            }
+                        </li>
+                    ))}
+                </ul>
+        </div>
+    )
+        
+}
+
+const PageBulletsAndNumbers = props => {
+    const { t } = useTranslation();
+
+    const storeTextSettings = props.storeTextSettings;
+    const typeNumbers = storeTextSettings.typeNumbers;
+    const typeBullets = storeTextSettings.typeBullets;
+    const typeMultiLevel = storeTextSettings.typeMultiLevel;
+    
+    return (
+        <Page>
+            <Navbar title={t('Edit.textBulletsAndNumbers')} backLink={t('Edit.textBack')}>
+                {Device.phone &&
+                    <NavRight>
+                        <Link sheetClose='#edit-sheet'>
+                            <Icon icon='icon-expand-down'/>
+                        </Link>
+                    </NavRight>
+                }
+            </Navbar>
+            <Swiper pagination spaceBetween={20}>
+                <SwiperSlide> <PageNumbers storeTextSettings={storeTextSettings} typeNumbers={typeNumbers} onNumber={props.onNumber}/></SwiperSlide> 
+                <SwiperSlide> <PageBullets storeTextSettings={storeTextSettings} typeBullets={typeBullets}  onBullet={props.onBullet}/></SwiperSlide>
+                <SwiperSlide> <PageMultiLevel storeTextSettings={storeTextSettings} typeMultiLevel={typeMultiLevel} onMultiLevelList={props.onMultiLevelList}/> </SwiperSlide>
+            </Swiper>
+        </Page>
+    )
+}
+
 const PageLineSpacing = props => {
     const { t } = useTranslation();
     const storeTextSettings = props.storeTextSettings;
@@ -501,16 +553,13 @@ const EditText = props => {
                         </a>
                     </Row>
                 </ListItem>
-                <ListItem title={t("Edit.textBullets")} link='/edit-text-bullets/' routeProps={{
+                <ListItem title={t('Edit.textBulletsAndNumbers')} link='/edit-bullets-and-numbers/' routeProps={{
-                    onBullet: props.onBullet
+                    onBullet: props.onBullet,
+                    onNumber: props.onNumber,
+                    onMultiLevelList: props.onMultiLevelList
                 }}>
                     {!isAndroid && <Icon slot="media" icon="icon-bullets"></Icon>}
                 </ListItem>
-                <ListItem title={t("Edit.textNumbers")} link='/edit-text-numbers/' routeProps={{
-                    onNumber: props.onNumber
-                }}>
-                    {!isAndroid && <Icon slot="media" icon="icon-numbers"></Icon>}
-                </ListItem>
                 <ListItem title={t("Edit.textLineSpacing")} link='/edit-text-line-spacing/' routeProps={{
                     onLineSpacing: props.onLineSpacing
                 }}>
@@ -526,6 +575,7 @@ const PageTextFonts = inject("storeTextSettings", "storeFocusObjects")(observer(
 const PageTextAddFormatting = inject("storeTextSettings", "storeFocusObjects")(observer(PageAdditionalFormatting));
 const PageTextBullets = inject("storeTextSettings")(observer(PageBullets));
 const PageTextNumbers = inject("storeTextSettings")(observer(PageNumbers));
+const PageTextBulletsAndNumbers = inject("storeTextSettings")(observer(PageBulletsAndNumbers));
 const PageTextLineSpacing = inject("storeTextSettings")(observer(PageLineSpacing));
 const PageTextFontColor = inject("storeTextSettings", "storePalette")(observer(PageFontColor));
 const PageTextCustomFontColor = inject("storeTextSettings", "storePalette")(observer(PageCustomFontColor));
@@ -539,6 +589,7 @@ export {
     PageTextAddFormatting,
     PageTextBullets,
     PageTextNumbers,
+    PageTextBulletsAndNumbers,
     PageTextLineSpacing,
     PageTextFontColor,
     PageTextCustomFontColor,