Merge branch 'develop' into feature/sse-protection

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

@@ -123,25 +123,44 @@
         }
     }
 
-    // Bullets and numbers
+    // Bullets, numbers and multilevels
     .bullets,
-    .numbers {
+    .numbers,
-        .page-content {
+    .multilevels {
-            background: @white;
+        .list{
+            margin: 5px;
+            ul {
+                &:before, &:after {
+                    display: none;
+                }
+                display: flex;
+                justify-content: space-around;
+                width: 100%;
+                margin-top: 10px;
+                padding:  0 5px;
+            }
+            &:first-child li:first-child, &:last-child li:last-child {
+                border-radius: 0;
+            }
+            &:last-child li:last-child:after {
+                display: none;
+            }
         }
 
-        .row {
+        .list .item-content {
-            justify-content: space-around;
+            padding-left: 0;
-        }
+            min-height: 68px;
-
+            .item-inner{
-        ul {
+                padding: 0;
-            margin-top: 10px;
+                &:after {
+                    display: none;
+                }
+            }
         }
 
         li {
             width: 70px;
             height: 70px;
-            margin-right: 1px;
             border: 1px solid #c4c4c4;
             html.pixel-ratio-2 & {
                 border: 0.5px solid #c4c4c4;

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

@@ -272,25 +272,41 @@
             }
         }
     }
-    // Bullets and numbers
+    // Bullets, numbers and multilevels
     .bullets,
-    .numbers {
+    .numbers,
-        .page-content {
+    .multilevels {
-            background: @white;
+        .list{
+            margin: 5px;
+            ul {
+                &:before, &:after {
+                    display: none;
+                }
+                display: flex;
+                justify-content: space-around;
+                width: 100%;
+                margin-top: 10px;
+                padding:  0 5px;
+            }
+            &:first-child li:first-child, &:last-child li:last-child {
+                border-radius: 0;
+            }
         }
 
-        .row {
+        .list .item-content {
-            justify-content: space-around;
+            padding-left: 0;
-        }
+            min-height: 68px;
-
+            .item-inner{
-        ul {
+                padding: 0;
-            margin-top: 10px;
+                &:after {
+                    display: none;
+                }
+            }
         }
 
         li {
             width: 70px;
             height: 70px;
-            margin-right: 1px;
             border: 1px solid @gray;
             html.pixel-ratio-2 & {
                 border: 0.5px solid @gray;

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/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-ios.less

@@ -1,7 +1,9 @@
-
+.ios {
-.device-ios {
+    .view {
-
+        .page-content{
-
+            background: #fff;
+        }
+    }
 }
 
 // Color Schemes

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

@@ -96,3 +96,21 @@
     }
 }
 
+.item-content {
+    .preview{
+        color: @gray;
+    }
+}
+
+.phone, .tablet {
+    .swiper-container{
+        position: static;
+   }
+}
+
+.swiper-pagination-bullet-active{
+    background: @black;
+}
+
+
+

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, 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";
@@ -32,12 +32,8 @@ const routes = [
         component: PageTextAddFormatting,
     },
     {
-        path: '/edit-text-bullets/',
+        path: '/edit-bullets-and-numbers/',
-        component: PageTextBullets,
+        component: PageTextBulletsAndNumbers,
-    },
-    {
-        path: '/edit-text-numbers/',
-        component: PageTextNumbers,
     },
     {
         path: '/edit-text-line-spacing/',

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, View, 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';
 
@@ -157,37 +157,30 @@ const PageBullets = props => {
     const typeBullets = storeTextSettings.typeBullets;
     
     return(
-        <Page className='bullets dataview'>
+        <View 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}>
+                    <List className="row" style={{listStyle: 'none'}} key={'bullets-' + index}>
                         {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) && 
+                                (storeTextSettings.listType === 0 || storeTextSettings.listType === -1) ? 'active' : ''}
                                 onClick={() => {
                                     if (bullet.type === -1) {
                                         storeTextSettings.resetBullets(-1);
                                     }
                                     props.onBullet(bullet.type)
+                                    props.f7router.back();
                                 }}>
                                 {bullet.thumb.length < 1 ?
-                                    <div className="thumb" style={{position: 'relative'}}>
+                                    <Icon className="thumb" style={{position: 'relative'}}>
                                         <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>
             ))}
-        </Page>
+        </View>
     )
 };
 
@@ -207,11 +200,82 @@ const PageNumbers = props => {
             {type: 7, thumb: 'number-07.png'}
         ]
     ];
+
     const storeTextSettings = props.storeTextSettings;
     const typeNumbers = storeTextSettings.typeNumbers;
+    
     return(
-        <Page className='numbers dataview'>
+        <View className='numbers dataview'>
-            <Navbar title={t('Edit.textNumbers')} backLink={t('Edit.textBack')}>
+            {numberArrays.map((numbers, index) => (
+                <List className="row" style={{listStyle: 'none'}} key={'numbers-' + index}>
+                    {numbers.map((number) => (
+                        <ListItem key={'number-' + number.type} data-type={number.type} className={(number.type === typeNumbers) && 
+                            (storeTextSettings.listType === 1 || storeTextSettings.listType === -1) ? 'active' : ''}
+                            onClick={() => {
+                                if (number.type === -1) {
+                                    storeTextSettings.resetNumbers(-1);
+                                }
+                                props.onNumber(number.type)
+                                props.f7router.back();
+                            }}>
+                            {number.thumb.length < 1 ?
+                                <Icon className="thumb" style={{position: 'relative'}}>
+                                    <label>{t('Edit.textNone')}</label>
+                                </Icon> :
+                                <Icon className="thumb" style={{backgroundImage: `url('resources/img/numbers/${number.thumb}')`}}></Icon>
+                            }
+                        </ListItem>
+                    ))}
+                </List>
+            ))}
+        </View>
+    )
+};
+
+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 = storeTextSettings.typeMultiLevel;
+
+    return(
+        <View className='multilevels dataview'>
+                <List className="row" style={{listStyle: 'none'}}>
+                    {arrayMultiLevel.map((item) => (
+                        <ListItem key={'multi-level-' + item.type} data-type={item.type} className={item.type === typeMultiLevel ? 'active' : ''}
+                        onClick={(e) => {
+                            item.type === -1 ? storeTextSettings.resetMultiLevel(-1) : storeTextSettings.resetMultiLevel(null);
+                            props.onMultiLevelList(item.type);
+                            props.f7router.back();
+                            }}>
+                            {item.thumb.length < 1 ?
+                                <Icon className="thumb" style={{position: 'relative'}}>
+                                    <label>{t('Edit.textNone')}</label>
+                                </Icon> :
+                                <Icon className="thumb" style={{backgroundImage: `url('resources/img/multilevels/${item.thumb}')`}}></Icon>
+                            }
+                        </ListItem>
+                    ))}
+                </List>
+        </View>
+    )
+        
+}
+
+const PageBulletsAndNumbers = props => {
+    const { t } = useTranslation();
+    const storeTextSettings = props.storeTextSettings;
+    
+    return (
+        <Page>
+            <Navbar title={t('Edit.textBulletsAndNumbers')} backLink={t('Edit.textBack')}>
                 {Device.phone &&
                     <NavRight>
                         <Link sheetClose='#edit-sheet'>
@@ -220,29 +284,14 @@ const PageNumbers = props => {
                     </NavRight>
                 }
             </Navbar>
-            {numberArrays.map((numbers, index) => (
+            <Swiper pagination>
-                <ul className="row" style={{listStyle: 'none'}} key={'numbers-' + index}>
+                <SwiperSlide> <PageNumbers f7router={props.f7router}  storeTextSettings={storeTextSettings} onNumber={props.onNumber}/></SwiperSlide> 
-                    {numbers.map((number) => (
+                <SwiperSlide> <PageBullets f7router={props.f7router} storeTextSettings={storeTextSettings} onBullet={props.onBullet}/></SwiperSlide>
-                        <li key={'number-' + number.type} data-type={number.type} className={number.type === typeNumbers ? 'active' : ''}
+                <SwiperSlide> <PageMultiLevel f7router={props.f7router} storeTextSettings={storeTextSettings} onMultiLevelList={props.onMultiLevelList}/> </SwiperSlide>
-                            onClick={() => {
+            </Swiper>
-                                if (number.type === -1) {
-                                    storeTextSettings.resetNumbers(-1);
-                                }
-                                props.onNumber(number.type)
-                            }}>
-                            {number.thumb.length < 1 ?
-                                <div className="thumb" style={{position: 'relative'}}>
-                                    <label>{t('Edit.textNone')}</label>
-                                </div> :
-                                <div className="thumb" style={{backgroundImage: `url('resources/img/numbers/${number.thumb}')`}}></div>
-                            }
-                        </li>
-                    ))}
-                </ul>
-            ))}
         </Page>
     )
-};
+}
 
 const PageLineSpacing = props => {
     const { t } = useTranslation();
@@ -429,6 +478,19 @@ const EditText = props => {
     const isStrikethrough = storeTextSettings.isStrikethrough;
     const paragraphAlign = storeTextSettings.paragraphAlign;
 
+    let previewList;
+    switch(storeTextSettings.listType) {
+        case -1: 
+            previewList = '';
+            break;
+        case 0: 
+            previewList = 'Bullets';
+            break;
+        case 1: 
+            previewList = 'Numbers';
+            break;
+    }
+
     const fontColorPreview = fontColor !== 'auto' ?
         <span className="color-preview" style={{ background: `#${(typeof fontColor === "object" ? fontColor.color : fontColor)}`}}></span> :
         <span className="color-preview auto"></span>;
@@ -501,16 +563,14 @@ 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
                 }}>
+                    <div className="preview">{previewList}</div>
                     {!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
                 }}>
@@ -524,8 +584,7 @@ const EditText = props => {
 const EditTextContainer = inject("storeTextSettings", "storeFocusObjects")(observer(EditText));
 const PageTextFonts = inject("storeTextSettings", "storeFocusObjects")(observer(PageFonts));
 const PageTextAddFormatting = inject("storeTextSettings", "storeFocusObjects")(observer(PageAdditionalFormatting));
-const PageTextBullets = inject("storeTextSettings")(observer(PageBullets));
+const PageTextBulletsAndNumbers = inject("storeTextSettings")(observer(PageBulletsAndNumbers));
-const PageTextNumbers = inject("storeTextSettings")(observer(PageNumbers));
 const PageTextLineSpacing = inject("storeTextSettings")(observer(PageLineSpacing));
 const PageTextFontColor = inject("storeTextSettings", "storePalette")(observer(PageFontColor));
 const PageTextCustomFontColor = inject("storeTextSettings", "storePalette")(observer(PageCustomFontColor));
@@ -537,8 +596,7 @@ export {
     EditTextContainer as EditText,
     PageTextFonts,
     PageTextAddFormatting,
-    PageTextBullets,
+    PageTextBulletsAndNumbers,
-    PageTextNumbers,
     PageTextLineSpacing,
     PageTextFontColor,
     PageTextCustomFontColor,

apps/presentationeditor/mobile/locale/en.json

@@ -1,6 +1,6 @@
 {
-  "Controller" : {
+  "Controller": {
-    "Main" : {
+    "Main": {
       "SDK": {
         "Series": "Series",
         "Diagram Title": "Chart Title",
@@ -27,7 +27,6 @@
       "closeButtonText": "Close File",
       "advDRMOptions": "Protected File",
       "advDRMPassword": "Password",
-
       "leavePageText": "You have unsaved changes in this document. Click 'Stay on this Page' to await the autosave of the document. Click 'Leave this Page' to discard all the unsaved changes.",
       "titleLicenseExp": "License expired",
       "warnLicenseExp": "Your license has expired. Please update your license and refresh the page.",
@@ -47,12 +46,10 @@
       "textPaidFeature": "Paid feature",
       "textCustomLoader": "Please note that according to the terms of the license you are not entitled to change the loader. Please contact our Sales Department to get a quote.",
       "textClose": "Close",
-
       "errorProcessSaveResult": "Saving is failed.",
       "criticalErrorTitle": "Error",
       "warnProcessRightsChange": "You have been denied the right to edit the file.",
       "errorAccessDeny": "You are trying to perform an action you do not have rights for.<br>Please contact your Document Server administrator.",
-
       "errorUpdateVersion": "The file version has been changed. The page will be reloaded.",
       "titleUpdateVersion": "Version changed",
       "textHasMacros": "The file contains automatic macros.<br>Do you want to run macros?",
@@ -303,8 +300,7 @@
       "textHighlightColor": "Highlight Color",
       "textAdditionalFormatting": "Additional Formatting",
       "textAdditional": "Additional",
-      "textBullets": "Bullets",
+      "textBulletsAndNumbers": "Bullets & Numbers",
-      "textNumbers": "Numbers",
       "textLineSpacing": "Line Spacing",
       "textFonts": "Fonts",
       "textAuto": "Auto",

apps/presentationeditor/mobile/src/less/app-ios.less

@@ -1,6 +1,8 @@
-
 .device-ios {
-
+    .view {
-    
+        .page-content{
+            background: #fff;
+        }
+    }
 }
 

apps/presentationeditor/mobile/src/less/app.less

@@ -83,3 +83,19 @@
         }
     }
 }
+
+.item-content {
+    .preview{
+        color: @gray;
+    }
+}
+
+.phone, .tablet {
+    .swiper-container{
+        position: static;
+   }
+}
+
+.swiper-pagination-bullet-active{
+    background: @black;
+}

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

@@ -14,7 +14,7 @@ import EditChartController from "../../controller/edit/EditChart";
 import { EditLinkController } from "../../controller/edit/EditLink";
 
 import { Theme, Layout, Transition, Type, Effect, StyleFillColor, CustomFillColor } from './EditSlide';
-import { PageTextFonts, PageTextFontColor, PageTextCustomFontColor, PageTextAddFormatting, PageTextBullets, PageTextNumbers, PageTextLineSpacing } from './EditText';
+import { PageTextFonts, PageTextFontColor, PageTextCustomFontColor, PageTextAddFormatting, PageTextBulletsAndNumbers, PageTextLineSpacing } from './EditText';
 import { PageShapeStyle, PageShapeStyleNoFill, PageReplaceContainer, PageReorderContainer, PageAlignContainer, PageShapeBorderColor, PageShapeCustomBorderColor, PageShapeCustomFillColor } from './EditShape';
 import { PageImageReplace, PageImageReorder, PageImageAlign, PageLinkSettings } from './EditImage';
 import { PageTableStyle, PageTableStyleOptions, PageTableCustomFillColor, PageTableBorderColor, PageTableCustomBorderColor, PageTableReorder, PageTableAlign } from './EditTable';
@@ -73,12 +73,8 @@ const routes = [
         component: PageTextAddFormatting
     },
     {
-        path: '/edit-text-bullets/',
+        path: '/edit-bullets-and-numbers/',
-        component: PageTextBullets
+        component: PageTextBulletsAndNumbers
-    },
-    {
-        path: '/edit-text-numbers/',
-        component: PageTextNumbers
     },
     {
         path: '/edit-text-line-spacing/',

apps/presentationeditor/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, Segmented, BlockTitle, NavRight, Link} from 'framework7-react';
+import {f7, Swiper, View, SwiperSlide, List, ListItem, Icon, Row,  Button, Page, Navbar, Segmented, BlockTitle, NavRight, Link} from 'framework7-react';
 import { useTranslation } from 'react-i18next';
 import {Device} from '../../../../../common/mobile/utils/device';
 import { ThemeColorPalette, CustomColorPicker } from '../../../../../common/mobile/lib/component/ThemeColorPalette.jsx';
@@ -27,6 +27,18 @@ const EditText = props => {
     const paragraphObj = storeFocusObjects.paragraphObject;
     let spaceBefore;
     let spaceAfter;
+    let previewList;
+    switch(storeTextSettings.listType) {
+        case -1: 
+            previewList = '';
+            break;
+        case 0: 
+            previewList = 'Bullets';
+            break;
+        case 1: 
+            previewList = 'Numbers';
+            break;
+    }
 
     if(paragraphObj) {
         spaceBefore = paragraphObj.get_Spacing().get_Before() < 0 ? paragraphObj.get_Spacing().get_Before() : Common.Utils.Metric.fnRecalcFromMM(paragraphObj.get_Spacing().get_Before());
@@ -114,16 +126,13 @@ const EditText = props => {
                                 </a>
                             </Row>
                         </ListItem>
-                        <ListItem title={_t.textBullets} link='/edit-text-bullets/' routeProps={{
+                        <ListItem title={_t.textBulletsAndNumbers} link='/edit-bullets-and-numbers/' routeProps={{
-                            onBullet: props.onBullet
+                            onBullet: props.onBullet,
+                            onNumber: props.onNumber,
                         }}>
+                            <div className="preview">{previewList}</div>
                             {!isAndroid && <Icon slot="media" icon="icon-bullets"></Icon>}
                         </ListItem>
-                        <ListItem title={_t.textNumbers} link='/edit-text-numbers/' routeProps={{
-                            onNumber: props.onNumber
-                        }}>
-                            {!isAndroid && <Icon slot="media" icon="icon-numbers"></Icon>}
-                        </ListItem>
                         <ListItem title={_t.textLineSpacing} link='/edit-text-line-spacing/' routeProps={{
                             onLineSpacing: props.onLineSpacing
                         }}>
@@ -421,32 +430,31 @@ const PageBullets = props => {
         return null;
     }
 
-    return (
+    return(
-        <Page className='bullets dataview'>
+        <View className='bullets dataview'>
-            <Navbar title={_t.textBullets} backLink={_t.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}>
+                    <List className="row" style={{listStyle: 'none'}} key={'bullets-' + index}>
                         {bullets.map((bullet) => (
-                            <li key={'bullet-' + bullet.type} data-type={bullet.type} className={bullet.type === typeBullets ? 'active' : ''} onClick={() => {props.onBullet(bullet.type)}}>
+                            <ListItem key={'bullet-' + bullet.type} data-type={bullet.type} className={(bullet.type === typeBullets) && 
+                                (storeTextSettings.listType === 0 || storeTextSettings.listType === -1) ? 'active' : ''}
+                                onClick={() => {
+                                    if (bullet.type === -1) {
+                                        storeTextSettings.resetBullets(-1);
+                                    }
+                                    props.onBullet(bullet.type)
+                                    props.f7router.back();
+                                }}>
                                 {bullet.thumb.length < 1 ?
-                                    <div className="thumb" style={{position: 'relative'}}>
+                                    <Icon className="thumb" style={{position: 'relative'}}>
                                         <label>{_t.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>
             ))}
-        </Page>
+        </View>
     )
 };
 
@@ -477,9 +485,43 @@ const PageNumbers = props => {
         return null;
     }
 
+    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.type} data-type={number.type} className={(number.type === typeNumbers) && 
+                            (storeTextSettings.listType === 1 || storeTextSettings.listType === -1) ? 'active' : ''}
+                            onClick={() => {
+                                if (number.type === -1) {
+                                    storeTextSettings.resetNumbers(-1);
+                                }
+                                props.onNumber(number.type)
+                                props.f7router.back();
+                            }}>
+                            {number.thumb.length < 1 ?
+                                <Icon className="thumb" style={{position: 'relative'}}>
+                                    <label>{_t.textNone}</label>
+                                </Icon> :
+                                <Icon className="thumb" style={{backgroundImage: `url('resources/img/numbers/${number.thumb}')`}}></Icon>
+                            }
+                        </ListItem>
+                    ))}
+                </List>
+            ))}
+        </View>
+    )
+};
+
+const PageBulletsAndNumbers = props => {
+    const { t } = useTranslation();
+    const _t = t('View.Edit', {returnObjects: true});
+    const storeTextSettings = props.storeTextSettings;
+    const storeFocusObjects = props.storeFocusObjects;
+    
     return (
-        <Page className='numbers dataview'>
+        <Page>
-            <Navbar title={_t.textNumbers} backLink={_t.textBack}>
+            <Navbar title={_t.textBulletsAndNumbers} backLink={_t.textBack}>
                 {Device.phone &&
                     <NavRight>
                         <Link sheetClose='#edit-sheet'>
@@ -488,23 +530,13 @@ const PageNumbers = props => {
                     </NavRight>
                 }
             </Navbar>
-            {numberArrays.map((numbers, index) => (
+            <Swiper pagination>
-                <ul className="row" style={{listStyle: 'none'}} key={'numbers-' + index}>
+                <SwiperSlide> <PageNumbers f7router={props.f7router} storeFocusObjects={storeFocusObjects} storeTextSettings={storeTextSettings} onNumber={props.onNumber}/></SwiperSlide> 
-                    {numbers.map((number) => (
+                <SwiperSlide> <PageBullets f7router={props.f7router} storeFocusObjects={storeFocusObjects} storeTextSettings={storeTextSettings} onBullet={props.onBullet}/></SwiperSlide>
-                        <li key={'number-' + number.type} data-type={number.type} className={number.type === typeNumbers ? 'active' : ''} onClick={() => {props.onNumber(number.type)}}>
+            </Swiper>
-                            {number.thumb.length < 1 ?
-                                <div className="thumb" style={{position: 'relative'}}>
-                                    <label>{_t.textNone}</label>
-                                </div> :
-                                <div className="thumb" style={{backgroundImage: `url('resources/img/numbers/${number.thumb}')`}}></div>
-                            }
-                        </li>
-                    ))}
-                </ul>
-            ))}
         </Page>
     )
-};
+}
 
 const PageLineSpacing = props => {
     const { t } = useTranslation();
@@ -546,8 +578,7 @@ const PageTextFonts = inject("storeTextSettings", "storeFocusObjects")(observer(
 const PageTextFontColor = inject("storeTextSettings", "storePalette", "storeFocusObjects")(observer(PageFontColor));
 const PageTextCustomFontColor = inject("storeTextSettings", "storePalette")(observer(PageCustomFontColor));
 const PageTextAddFormatting = inject("storeTextSettings", "storeFocusObjects")(observer(PageAdditionalFormatting));
-const PageTextBullets = inject("storeTextSettings", "storeFocusObjects")(observer(PageBullets));
+const PageTextBulletsAndNumbers = inject("storeTextSettings", "storeFocusObjects")(observer(PageBulletsAndNumbers));
-const PageTextNumbers = inject("storeTextSettings", "storeFocusObjects")(observer(PageNumbers));
 const PageTextLineSpacing = inject("storeTextSettings", "storeFocusObjects")(observer(PageLineSpacing));
 
 export {
@@ -556,7 +587,6 @@ export {
     PageTextFontColor,
     PageTextCustomFontColor,
     PageTextAddFormatting,
-    PageTextBullets,
+    PageTextBulletsAndNumbers,
-    PageTextNumbers,
     PageTextLineSpacing
 };