[PE mobile] Maked Text Settings

apps/common/mobile/resources/less/common.less

@@ -387,3 +387,19 @@
         }
     }
 }
+
+.bullets, .numbers {
+    li {
+        position: relative;
+        z-index: 1;
+    }
+    li.active::after {
+        content: '';
+        position: absolute;
+        width: 22px;
+        height: 22px;
+        right: -5px;
+        bottom: -5px;
+        .encoded-svg-background('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 22 22" fill="#aa5252"><g><circle fill="#fff" cx="11" cy="11" r="11"/><path d="M11,21A10,10,0,1,1,21,11,10,10,0,0,1,11,21h0ZM17.4,7.32L17.06,7a0.48,0.48,0,0,0-.67,0l-7,6.84L6.95,11.24a0.51,0.51,0,0,0-.59.08L6,11.66a0.58,0.58,0,0,0,0,.65l3.19,3.35a0.38,0.38,0,0,0,.39,0L17.4,8a0.48,0.48,0,0,0,0-.67h0Z"/></g></svg>');
+    }
+}

apps/presentationeditor/mobile/locale/en.json

@@ -153,7 +153,8 @@
       "textLetterSpacing": "Letter Spacing",
       "textDistanceFromText": "Distance From Text",
       "textBefore": "Before",
-      "textAfter": "After"
+      "textAfter": "After",
+      "textFontColors": "Font Colors"
     }
   },
   "Common": {

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

@@ -257,9 +257,11 @@ class MainController extends Component {
         });
 
         this.api.asc_registerCallback('asc_onListType', (data) => {
-            let type    = data.get_ListType();
+            let type = data.get_ListType();
             let subtype = data.get_ListSubType();
+
             storeTextSettings.resetListType(type);
+
             switch (type) {
                 case 0:
                     storeTextSettings.resetBullets(subtype);
@@ -267,6 +269,9 @@ class MainController extends Component {
                 case 1:
                     storeTextSettings.resetNumbers(subtype);
                     break;
+                default: 
+                    storeTextSettings.resetBullets(-1);
+                    storeTextSettings.resetNumbers(-1);
             }
         });
 

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

@@ -81,6 +81,149 @@ class EditTextController extends Component {
         }
     };
 
+    onDistanceBefore(distance, isDecrement) {
+        const api = Common.EditorApi.get();
+        let step;
+        let newDistance;
+
+        if (Common.Utils.Metric.getCurrentMetric() == Common.Utils.Metric.c_MetricUnits.pt) {
+            step = 1;
+        } else {
+            step = 0.01;
+        }
+
+        const maxValue = Common.Utils.Metric.fnRecalcFromMM(558.8);
+
+        if(isDecrement) {
+            newDistance = Math.max(-1, distance - step);
+        } else {
+            newDistance = (distance < 0) ? 0 : Math.min(maxValue, distance + step);
+        }
+
+        api.put_LineSpacingBeforeAfter(0, (newDistance < 0) ? -1 : Common.Utils.Metric.fnRecalcToMM(newDistance));
+    };
+
+    onDistanceAfter(distance, isDecrement) {
+        const api = Common.EditorApi.get();
+        let step;
+        let newDistance;
+
+        if (Common.Utils.Metric.getCurrentMetric() == Common.Utils.Metric.c_MetricUnits.pt) {
+            step = 1;
+        } else {
+            step = 0.01;
+        }
+
+        const maxValue = Common.Utils.Metric.fnRecalcFromMM(558.8);
+
+        if(isDecrement) {
+            newDistance = Math.max(-1, distance - step);
+        } else {
+            newDistance = (distance < 0) ? 0 : Math.min(maxValue, distance + step);
+        }
+
+        api.put_LineSpacingBeforeAfter(1, (newDistance < 0) ? -1 : Common.Utils.Metric.fnRecalcToMM(newDistance));
+    };
+
+    changeFontSize(curSize, isDecrement) {
+        const api = Common.EditorApi.get();
+        let size = curSize;
+
+        if (isDecrement) {
+            typeof size === 'undefined' ? api.FontSizeOut() : size = Math.max(1, --size);
+        } else {
+            typeof size === 'undefined' ? api.FontSizeIn : size = Math.min(100, ++size);
+        }
+        if (typeof size !== 'undefined') {
+            api.put_TextPrFontSize(size);
+        }
+    };
+
+    changeFontFamily(name) {
+        const api = Common.EditorApi.get();
+        if (name) {
+            api.put_TextPrFontName(name);
+        }
+    }
+
+    onTextColor(color) {
+        const api = Common.EditorApi.get();
+        api.put_TextColor(Common.Utils.ThemeColor.getRgbColor(color));
+    }
+
+    // Additional
+
+    onAdditionalStrikethrough(type, value) {
+        const api = Common.EditorApi.get();
+        const paragraphProps = new Asc.asc_CParagraphProperty();
+
+        if ('strikethrough' === type) {
+            paragraphProps.put_DStrikeout(false);
+            paragraphProps.put_Strikeout(value);
+        } else {
+            paragraphProps.put_DStrikeout(value);
+            paragraphProps.put_Strikeout(false);
+        }
+
+        api.paraApply(paragraphProps);
+    }
+
+    onAdditionalCaps(type, value) {
+        const api = Common.EditorApi.get();
+        const paragraphProps = new Asc.asc_CParagraphProperty();
+
+        if ('small' === type) {
+            paragraphProps.put_AllCaps(false);
+            paragraphProps.put_SmallCaps(value);
+        } else {
+            paragraphProps.put_AllCaps(value);
+            paragraphProps.put_SmallCaps(false);
+        }
+
+        api.paraApply(paragraphProps);
+    }
+
+    onAdditionalScript(type, value) {
+        const api = Common.EditorApi.get();
+        
+        if ('superscript' === type) {
+            api.put_TextPrBaseline(value ? 1 : 0);
+        } else {
+            api.put_TextPrBaseline(value ? 2 : 0);
+        }   
+    }
+
+    changeLetterSpacing(curSpacing, isDecrement) {
+        const api = Common.EditorApi.get();
+        let spacing = curSpacing;
+
+        if (isDecrement) {
+            spacing = (spacing === null || spacing === undefined) ? 0 : Math.max(-100, --spacing);
+        } else {
+            spacing = (spacing === null || spacing === undefined) ? 0 : Math.min(100, ++spacing);
+        }
+    
+        const properties = new Asc.asc_CParagraphProperty();
+        properties.put_TextSpacing(Common.Utils.Metric.fnRecalcToMM(spacing));
+        api.paraApply(properties);
+    }
+
+    onBullet(type) {
+        const api = Common.EditorApi.get();
+        api.put_ListType(0, parseInt(type));
+    }
+
+    onNumber(type) {
+        const api = Common.EditorApi.get();
+        api.put_ListType(1, parseInt(type));
+    }
+
+    onLineSpacing(value) {
+        const api = Common.EditorApi.get();
+        const LINERULE_AUTO = 1;
+        api.put_PrLineSpacing(LINERULE_AUTO, value);
+    }
+
     render () {
         return (
             <EditText
@@ -91,6 +234,18 @@ class EditTextController extends Component {
                 onParagraphAlign={this.onParagraphAlign}
                 onParagraphValign={this.onParagraphValign}
                 onParagraphMove={this.onParagraphMove}
+                onDistanceBefore={this.onDistanceBefore}
+                onDistanceAfter={this.onDistanceAfter}
+                changeFontSize={this.changeFontSize}
+                changeFontFamily={this.changeFontFamily}
+                onTextColor={this.onTextColor}
+                onAdditionalStrikethrough={this.onAdditionalStrikethrough}
+                onAdditionalCaps={this.onAdditionalCaps}
+                onAdditionalScript={this.onAdditionalScript}
+                changeLetterSpacing={this.changeLetterSpacing}
+                onBullet={this.onBullet}
+                onNumber={this.onNumber}
+                onLineSpacing={this.onLineSpacing}
             />
         )
     }

apps/presentationeditor/mobile/src/store/applicationSettings.js

@@ -2,7 +2,7 @@ import {action, observable} from 'mobx';
 
 export class storeApplicationSettings {
    
-    @observable unitMeasurement = 0;
+    @observable unitMeasurement = 1;
     @observable isSpellChecking = true;
     @observable macrosMode = 0;
     

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

@@ -21,9 +21,6 @@ export class storeTextSettings {
     @observable customTextColors = [];
     @observable lineSpacing = undefined;
 
-    // @observable backgroundColor = undefined;
-
-
     @action initEditorFonts (fonts, select) {
         let array = [];
         for (let font of fonts) {
@@ -153,16 +150,4 @@ export class storeTextSettings {
         this.lineSpacing = line;
     }
 
-    // @action resetBackgroundColor (color) {
-    //     let value;
-    //     if (color.get_type() == Asc.c_oAscColor.COLOR_TYPE_SCHEME) {
-    //         value = {
-    //             color: Common.Utils.ThemeColor.getHexColor(color.get_r(), color.get_g(), color.get_b()),
-    //             effectValue: color.get_value()
-    //         }
-    //     } else {
-    //         value = Common.Utils.ThemeColor.getHexColor(color.get_r(), color.get_g(), color.get_b());
-    //     }
-    //     this.backgroundColor = value;
-    // }
 }

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

@@ -8,7 +8,7 @@ import {Device} from '../../../../../common/mobile/utils/device';
 import EditSlideController from "../../controller/edit/EditSlide";
 import EditTextController from "../../controller/edit/EditText";
 import { Theme, Layout, Transition, Type, Effect, StyleFillColor, CustomFillColor } from './EditSlide';
-
+import { PageTextFonts, PageTextFontColor, PageTextCustomFontColor, PageTextAddFormatting, PageTextBullets, PageTextNumbers, PageTextLineSpacing } from './EditText';
 //import EditShapeController from "../../controller/edit/EditShape";
 //import EditImageController from "../../controller/edit/EditImage";
 //import EditTableController from "../../controller/edit/EditTable";
@@ -43,6 +43,34 @@ const routes = [
     {
         path: '/edit-custom-color/',
         component: CustomFillColor
+    },
+    {
+        path: '/edit-text-fonts/',
+        component: PageTextFonts
+    },
+    {
+        path: '/edit-text-font-color/',
+        component: PageTextFontColor
+    },
+    {
+        path: '/edit-text-custom-font-color/',
+        component: PageTextCustomFontColor
+    },
+    {
+        path: '/edit-text-add-formatting/',
+        component: PageTextAddFormatting
+    },
+    {
+        path: '/edit-text-bullets/',
+        component: PageTextBullets
+    },
+    {
+        path: '/edit-text-numbers/',
+        component: PageTextNumbers
+    },
+    {
+        path: '/edit-text-line-spacing/',
+        component: PageTextLineSpacing
     }
 ];
 

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

@@ -24,23 +24,17 @@ const EditText = props => {
     const paragraphValign = storeTextSettings.paragraphValign;
     const canIncreaseIndent = storeTextSettings.canIncreaseIndent;
     const canDecreaseIndent = storeTextSettings.canDecreaseIndent;
-
     const paragraphObj = storeFocusObjects.paragraphObject;
+    let spaceBefore;
+    let spaceAfter;
 
-    // if (paragraphObj.get_Ind()===null || paragraphObj.get_Ind()===undefined) {
+    if(paragraphObj) {
-    //     paragraphObj.get_Ind().put_FirstLine(0);
+        spaceBefore = paragraphObj.get_Spacing().get_Before() < 0 ? paragraphObj.get_Spacing().get_Before() : Common.Utils.Metric.fnRecalcFromMM(paragraphObj.get_Spacing().get_Before());
-    // }
+        spaceAfter  = paragraphObj.get_Spacing().get_After() < 0 ? paragraphObj.get_Spacing().get_After() : Common.Utils.Metric.fnRecalcFromMM(paragraphObj.get_Spacing().get_After());
+    }
 
-    // const firstLine = parseFloat(Common.Utils.Metric.fnRecalcFromMM(paragraphObj.get_Ind().get_FirstLine()).toFixed(2));
+    const displayBefore = spaceBefore && spaceBefore < 0 ? _t.textAuto : spaceBefore + ' ' + metricText;
-
+    const displayAfter = spaceAfter && spaceAfter < 0 ? _t.textAuto : spaceAfter + ' ' + metricText;
-    const spaceBefore = paragraphObj.get_Spacing().get_Before() < 0 ? paragraphObj.get_Spacing().get_Before() : Common.Utils.Metric.fnRecalcFromMM(paragraphObj.get_Spacing().get_Before());
-    const spaceAfter  = paragraphObj.get_Spacing().get_After() < 0 ? paragraphObj.get_Spacing().get_After() : Common.Utils.Metric.fnRecalcFromMM(paragraphObj.get_Spacing().get_After());
-
-    const spaceBeforeFix = parseFloat(spaceBefore.toFixed(2));
-    const spaceAfterFix = parseFloat(spaceAfter.toFixed(2));
-
-    const displayBefore = spaceBefore < 0 ? _t.textAuto : spaceBeforeFix + ' ' + metricText;
-    const displayAfter = spaceAfter < 0 ? _t.textAuto : spaceAfterFix + ' ' + metricText;
 
     const fontColorPreview = fontColor !== 'auto' ?
         <span className="color-preview" style={{ background: `#${(typeof fontColor === "object" ? fontColor.color : fontColor)}`}}></span> :
@@ -62,7 +56,6 @@ const EditText = props => {
                     </Row>
                 </ListItem>
                 <ListItem title={_t.textFontColor} link="/edit-text-font-color/" routeProps={{
-                    onTextColorAuto: props.onTextColorAuto,
                     onTextColor: props.onTextColor
                 }}>
                     {!isAndroid ?
@@ -79,99 +72,399 @@ const EditText = props => {
                     {!isAndroid && <Icon slot="media" icon="icon-text-additional"></Icon>}
                 </ListItem>
             </List>
-            <List>
+            {paragraphObj ? (
-                <ListItem className='buttons'>
+                <Fragment>
-                    <Row>
+                    <List>
-                        <a className={'button' + (paragraphAlign === 'left' ? ' active' : '')} onClick={() => {props.onParagraphAlign('left')}}>
+                        <ListItem className='buttons'>
-                            <Icon slot="media" icon="icon-text-align-left"></Icon>
+                            <Row>
-                        </a>
+                                <a className={'button' + (paragraphAlign === 'left' ? ' active' : '')} onClick={() => {props.onParagraphAlign('left')}}>
-                        <a className={'button' + (paragraphAlign === 'center' ? ' active' : '')} onClick={() => {props.onParagraphAlign('center')}}>
+                                    <Icon slot="media" icon="icon-text-align-left"></Icon>
-                            <Icon slot="media" icon="icon-text-align-center"></Icon>
+                                </a>
-                        </a>
+                                <a className={'button' + (paragraphAlign === 'center' ? ' active' : '')} onClick={() => {props.onParagraphAlign('center')}}>
-                        <a className={'button' + (paragraphAlign === 'right' ? ' active' : '')} onClick={() => {props.onParagraphAlign('right')}}>
+                                    <Icon slot="media" icon="icon-text-align-center"></Icon>
-                            <Icon slot="media" icon="icon-text-align-right"></Icon>
+                                </a>
-                        </a>
+                                <a className={'button' + (paragraphAlign === 'right' ? ' active' : '')} onClick={() => {props.onParagraphAlign('right')}}>
-                        <a className={'button' + (paragraphAlign === 'just' ? ' active' : '')} onClick={() => {props.onParagraphAlign('just')}}>
+                                    <Icon slot="media" icon="icon-text-align-right"></Icon>
-                            <Icon slot="media" icon="icon-text-align-just"></Icon>
+                                </a>
-                        </a>
+                                <a className={'button' + (paragraphAlign === 'just' ? ' active' : '')} onClick={() => {props.onParagraphAlign('just')}}>
-                    </Row>
+                                    <Icon slot="media" icon="icon-text-align-just"></Icon>
-                </ListItem>
+                                </a>
-                <ListItem className='buttons'>
+                            </Row>
-                    <Row>
+                        </ListItem>
-                        <a className={'button' + (paragraphValign === 'top' ? ' active' : '')} onClick={() => {props.onParagraphValign('top')}}>
+                        <ListItem className='buttons'>
-                            <Icon slot="media" icon="icon-text-valign-top"></Icon>
+                            <Row>
-                        </a>
+                                <a className={'button' + (paragraphValign === 'top' ? ' active' : '')} onClick={() => {props.onParagraphValign('top')}}>
-                        <a className={'button' + (paragraphValign === 'center' ? ' active' : '')} onClick={() => {props.onParagraphValign('center')}}>
+                                    <Icon slot="media" icon="icon-text-valign-top"></Icon>
-                            <Icon slot="media" icon="icon-text-valign-middle"></Icon>
+                                </a>
-                        </a>
+                                <a className={'button' + (paragraphValign === 'center' ? ' active' : '')} onClick={() => {props.onParagraphValign('center')}}>
-                        <a className={'button' + (paragraphValign === 'bottom' ? ' active' : '')} onClick={() => {props.onParagraphValign('bottom')}}>
+                                    <Icon slot="media" icon="icon-text-valign-middle"></Icon>
-                            <Icon slot="media" icon="icon-text-valign-bottom"></Icon>
+                                </a>
-                        </a>
+                                <a className={'button' + (paragraphValign === 'bottom' ? ' active' : '')} onClick={() => {props.onParagraphValign('bottom')}}>
-                    </Row>
+                                    <Icon slot="media" icon="icon-text-valign-bottom"></Icon>
-                </ListItem>
+                                </a>
-                <ListItem className='buttons'>
+                            </Row>
-                    <Row>
+                        </ListItem>
-                        <a className={'button item-link' + (!canDecreaseIndent ? ' disabled' : '') } onClick={() => {props.onParagraphMove('left')}}>
+                        <ListItem className='buttons'>
-                            <Icon slot="media" icon="icon-de-indent"></Icon>
+                            <Row>
-                        </a>
+                                <a className={'button item-link' + (!canDecreaseIndent ? ' disabled' : '') } onClick={() => {props.onParagraphMove('left')}}>
-                        <a className={'button item-link' + (!canIncreaseIndent ? ' disabled' : '') } onClick={() => {props.onParagraphMove('right')}}>
+                                    <Icon slot="media" icon="icon-de-indent"></Icon>
-                            <Icon slot="media" icon="icon-in-indent"></Icon>
+                                </a>
-                        </a>
+                                <a className={'button item-link' + (!canIncreaseIndent ? ' disabled' : '') } onClick={() => {props.onParagraphMove('right')}}>
-                    </Row>
+                                    <Icon slot="media" icon="icon-in-indent"></Icon>
-                </ListItem>
+                                </a>
-                <ListItem title={_t.textBullets} link='/edit-text-bullets/' routeProps={{
+                            </Row>
-                    onBullet: props.onBullet
+                        </ListItem>
-                }}>
+                        <ListItem title={_t.textBullets} link='/edit-text-bullets/' routeProps={{
-                    {!isAndroid && <Icon slot="media" icon="icon-bullets"></Icon>}
+                            onBullet: props.onBullet
-                </ListItem>
+                        }}>
-                <ListItem title={_t.textNumbers} link='/edit-text-numbers/' routeProps={{
+                            {!isAndroid && <Icon slot="media" icon="icon-bullets"></Icon>}
-                    onNumber: props.onNumber
+                        </ListItem>
-                }}>
+                        <ListItem title={_t.textNumbers} link='/edit-text-numbers/' routeProps={{
-                    {!isAndroid && <Icon slot="media" icon="icon-numbers"></Icon>}
+                            onNumber: props.onNumber
-                </ListItem>
+                        }}>
-                <ListItem title={_t.textLineSpacing} link='/edit-text-line-spacing/' routeProps={{
+                            {!isAndroid && <Icon slot="media" icon="icon-numbers"></Icon>}
-                    onLineSpacing: props.onLineSpacing
+                        </ListItem>
-                }}>
+                        <ListItem title={_t.textLineSpacing} link='/edit-text-line-spacing/' routeProps={{
-                    {!isAndroid && <Icon slot="media" icon="icon-linespacing"></Icon>}
+                            onLineSpacing: props.onLineSpacing
-                </ListItem>
+                        }}>
-            </List>
+                            {!isAndroid && <Icon slot="media" icon="icon-linespacing"></Icon>}
-            <BlockTitle>{_t.textDistanceFromText}</BlockTitle>
+                        </ListItem>
-            <List>
+                    </List>
-                <ListItem title={_t.textBefore}>
+                    <BlockTitle>{_t.textDistanceFromText}</BlockTitle>
-                    {!isAndroid && <div slot='after-start'>{displayBefore}</div>}
+                    <List>
-                    <div slot='after'>
+                        <ListItem title={_t.textBefore}>
-                        <Segmented>
+                            {!isAndroid && <div slot='after-start'>{displayBefore}</div>}
-                            <Button outline className='decrement item-link' onClick={() => {props.onDistanceBefore(spaceBefore, true)}}>
+                            <div slot='after'>
-                                {isAndroid ? <Icon icon="icon-expand-down"></Icon> : ' - '}
+                                <Segmented>
-                            </Button>
+                                    <Button outline className='decrement item-link' onClick={() => {props.onDistanceBefore(spaceBefore, true)}}>
-                            {isAndroid && <label>{displayBefore}</label>}
+                                        {isAndroid ? <Icon icon="icon-expand-down"></Icon> : ' - '}
-                            <Button outline className='increment item-link' onClick={() => {props.onDistanceBefore(spaceBefore, false)}}>
+                                    </Button>
-                                {isAndroid ? <Icon icon="icon-expand-up"></Icon> : ' + '}
+                                    {isAndroid && <label>{displayBefore}</label>}
-                            </Button>
+                                    <Button outline className='increment item-link' onClick={() => {props.onDistanceBefore(spaceBefore, false)}}>
-                        </Segmented>
+                                        {isAndroid ? <Icon icon="icon-expand-up"></Icon> : ' + '}
-                    </div>
+                                    </Button>
-                </ListItem>
+                                </Segmented>
-                <ListItem title={_t.textAfter}>
+                            </div>
-                    {!isAndroid && <div slot='after-start'>{displayAfter}</div>}
+                        </ListItem>
-                    <div slot='after'>
+                        <ListItem title={_t.textAfter}>
-                        <Segmented>
+                            {!isAndroid && <div slot='after-start'>{displayAfter}</div>}
-                            <Button outline className='decrement item-link' onClick={() => {props.onDistanceAfter(spaceAfter, true)}}>
+                            <div slot='after'>
-                                {isAndroid ? <Icon icon="icon-expand-down"></Icon> : ' - '}
+                                <Segmented>
-                            </Button>
+                                    <Button outline className='decrement item-link' onClick={() => {props.onDistanceAfter(spaceAfter, true)}}>
-                            {isAndroid && <label>{displayAfter}</label>}
+                                        {isAndroid ? <Icon icon="icon-expand-down"></Icon> : ' - '}
-                            <Button outline className='increment item-link' onClick={() => {props.onDistanceAfter(spaceAfter, false)}}>
+                                    </Button>
-                                {isAndroid ? <Icon icon="icon-expand-up"></Icon> : ' + '}
+                                    {isAndroid && <label>{displayAfter}</label>}
-                            </Button>
+                                    <Button outline className='increment item-link' onClick={() => {props.onDistanceAfter(spaceAfter, false)}}>
-                        </Segmented>
+                                        {isAndroid ? <Icon icon="icon-expand-up"></Icon> : ' + '}
-                    </div>
+                                    </Button>
-                </ListItem>
+                                </Segmented>
-            </List>
+                            </div>
+                        </ListItem>
+                    </List>
+                </Fragment>
+            ) : null}
         </Fragment>
+    );
+};
+
+const PageFonts = props => {
+    const isAndroid = Device.android;
+    const { t } = useTranslation();
+    const _t = t('View.Edit', {returnObjects: true});
+    const storeTextSettings = props.storeTextSettings;
+    const size = storeTextSettings.fontSize;
+    const displaySize = typeof size === 'undefined' ? _t.textAuto : size + ' ' + _t.textPt;
+    const curFontName = storeTextSettings.fontName;
+    const fonts = storeTextSettings.fontsArray;
+
+    const [vlFonts, setVlFonts] = useState({
+        vlData: {
+            items: [],
+        }
+    });
+
+    const renderExternal = (vl, vlData) => {
+        setVlFonts((prevState) => {
+            let fonts = [...prevState.vlData.items];
+            fonts.splice(vlData.fromIndex, vlData.toIndex, ...vlData.items);
+            return {vlData: {
+                items: fonts,
+            }};
+        });
+    };
+
+    return (
+        <Page>
+            <Navbar title={_t.textFonts} backLink={_t.textBack} />
+            <List>
+                <ListItem title={_t.textSize}>
+                    {!isAndroid && <div slot='after-start'>{displaySize}</div>}
+                    <div slot='after'>
+                        <Segmented>
+                            <Button outline className='decrement item-link' onClick={() => {props.changeFontSize(size, true)}}>
+                                {isAndroid ? <Icon icon="icon-expand-down"></Icon> : ' - '}
+                            </Button>
+                            {isAndroid && <label>{displaySize}</label>}
+                            <Button outline className='increment item-link' onClick={() => {props.changeFontSize(size, false)}}>
+                                {isAndroid ? <Icon icon="icon-expand-up"></Icon> : ' + '}
+                            </Button>
+                        </Segmented>
+                    </div>
+                </ListItem>
+            </List>
+            <BlockTitle>{_t.textFonts}</BlockTitle>
+            <List virtualList virtualListParams={{
+                items: fonts,
+                renderExternal: renderExternal
+            }}>
+                <ul>
+                    {vlFonts.vlData.items.map((item, index) => (
+                        <ListItem
+                            key={index}
+                            radio
+                            checked={curFontName === item.name}
+                            title={item.name}
+                            style={{fontFamily: `${item.name}`}}
+                            onClick={() => {props.changeFontFamily(item.name)}}
+                        ></ListItem>
+                    ))}
+                </ul>
+            </List>
+        </Page>
+    );
+};
+
+const PageFontColor = props => {
+    const { t } = useTranslation();
+    const _t = t('View.Edit', {returnObjects: true});
+    const textColor = props.storeTextSettings.textColor;
+    const customColors = props.storePalette.customColors;
+
+    const changeColor = (color, effectId) => {
+        if (color !== 'empty') {
+            if (effectId !== undefined ) {
+                props.onTextColor({color: color, effectId: effectId});
+            } else {
+                props.onTextColor(color);
+            }
+        } else {
+            // open custom color menu
+            props.f7router.navigate('/edit-text-custom-font-color/');
+        }
+    };
+
+    return (
+        <Page>
+            <Navbar title={_t.textFontColors} backLink={_t.textBack} />
+            <ThemeColorPalette changeColor={changeColor} curColor={textColor} customColors={customColors}/>
+            <List>
+                <ListItem title={_t.textAddCustomColor} link={'/edit-text-custom-font-color/'} routeProps={{
+                    onTextColor: props.onTextColor
+                }}></ListItem>
+            </List>
+        </Page>
+    );
+};
+
+const PageCustomFontColor = props => {
+    const { t } = useTranslation();
+    const _t = t('View.Edit', {returnObjects: true});
+    const store = props.storeTextSettings;
+    let textColor = store.textColor;
+
+    if (typeof textColor === 'object') {
+        textColor = textColor.color;
+    }
+
+    const autoColor = textColor === 'auto' ? window.getComputedStyle(document.getElementById('font-color-auto')).backgroundColor : null;
+
+    const onAddNewColor = (colors, color) => {
+        props.storePalette.changeCustomColors(colors);
+        props.onTextColor(color);
+        props.f7router.back();
+    };
+    return(
+        <Page>
+            <Navbar title={_t.textCustomColor} backLink={_t.textBack} />
+            <CustomColorPicker autoColor={autoColor} currentColor={textColor} onAddNewColor={onAddNewColor}/>
+        </Page>
+    )
+};
+
+const PageAdditionalFormatting = props => {
+    const isAndroid = Device.android;
+    const { t } = useTranslation();
+    const _t = t('View.Edit', {returnObjects: true});
+    const storeTextSettings = props.storeTextSettings;
+    const storeFocusObjects = props.storeFocusObjects;
+    const paragraphObj = storeFocusObjects.paragraphObject;
+    const isSuperscript = storeTextSettings.isSuperscript;
+    const isSubscript = storeTextSettings.isSubscript;
+    let isStrikeout = false;
+    let isDStrikeout = false;
+    let isSmallCaps = false;
+    let isAllCaps = false;
+    let letterSpacing = 0;
+
+    if(paragraphObj) {
+        isStrikeout = paragraphObj.get_Strikeout();
+        isDStrikeout = paragraphObj.get_DStrikeout();
+        isSmallCaps = paragraphObj.get_SmallCaps();
+        isAllCaps = paragraphObj.get_AllCaps();
+        letterSpacing = (paragraphObj.get_TextSpacing() === null || paragraphObj.get_TextSpacing() === undefined) ? paragraphObj.get_TextSpacing() : Common.Utils.Metric.fnRecalcFromMM(paragraphObj.get_TextSpacing());
+    }
+
+    return (
+        <Page>
+            <Navbar title={_t.textAdditional} backLink={_t.textBack} />
+            <List>
+                <ListItem title={_t.textStrikethrough} radio checked={isStrikeout} onClick={() => {props.onAdditionalStrikethrough('strikethrough', !isStrikeout)}}/>
+                <ListItem title={_t.textDoubleStrikethrough} radio checked={isDStrikeout} onClick={() => {props.onAdditionalStrikethrough('dbStrikethrough', !isDStrikeout)}}/>
+                <ListItem title={_t.textSuperscript} radio checked={isSuperscript} onClick={() => {props.onAdditionalScript('superscript', !isSuperscript)}}/>
+                <ListItem title={_t.textSubscript} radio checked={isSubscript} onClick={() => {props.onAdditionalScript('subscript', !isSubscript)}}/>
+                <ListItem title={_t.textSmallCaps} radio checked={isSmallCaps} onClick={() => {props.onAdditionalCaps('small', !isSmallCaps)}}/>
+                <ListItem title={_t.textAllCaps} radio checked={isAllCaps} onClick={() => {props.onAdditionalCaps('all', !isAllCaps)}}/>
+            </List>
+            <List>
+                <ListItem title={_t.textLetterSpacing}>
+                    {!isAndroid && <div slot='after-start'>{letterSpacing + ' ' + Common.Utils.Metric.getCurrentMetricName()}</div>}
+                    <div slot='after'>
+                        <Segmented>
+                            <Button outline className='decrement item-link' onClick={() => {props.changeLetterSpacing(letterSpacing, true)}}>
+                                {isAndroid ? <Icon icon="icon-expand-down"></Icon> : ' - '}
+                            </Button>
+                            {isAndroid && <label>{letterSpacing + ' ' + Common.Utils.Metric.getCurrentMetricName()}</label>}
+                            <Button outline className='increment item-link' onClick={() => {props.changeLetterSpacing(letterSpacing, false)}}>
+                                {isAndroid ? <Icon icon="icon-expand-up"></Icon> : ' + '}
+                            </Button>
+                        </Segmented>
+                    </div>
+                </ListItem>
+            </List>
+        </Page>
+    )
+};
+
+const PageBullets = 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 typeBullets = storeTextSettings.typeBullets;
+
+    return (
+        <Page className='bullets'>
+            <Navbar title={_t.textBullets} backLink={_t.textBack} />
+            {bulletArrays.map((bullets, index) => (
+                    <ul 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)}}>
+                                {bullet.thumb.length < 1 ?
+                                    <div className="thumb" style={{position: 'relative'}}>
+                                        <label>{_t.textNone}</label>
+                                    </div> :
+                                    <div className="thumb" style={{backgroundImage: `url('resources/img/bullets/${bullet.thumb}')`}}></div>
+                                }
+                            </li>
+                        ))}
+                    </ul>
+            ))}
+        </Page>
+    )
+};
+
+const PageNumbers = 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 typeNumbers = storeTextSettings.typeNumbers;
+
+    return (
+        <Page className='numbers'>
+            <Navbar title={_t.textNumbers} backLink={_t.textBack} />
+            {numberArrays.map((numbers, index) => (
+                <ul className="row" style={{listStyle: 'none'}} key={'numbers-' + index}>
+                    {numbers.map((number) => (
+                        <li key={'number-' + number.type} data-type={number.type} className={number.type === typeNumbers ? 'active' : ''} onClick={() => {props.onNumber(number.type)}}>
+                            {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();
+    const _t = t('View.Edit', {returnObjects: true});
+    const storeTextSettings = props.storeTextSettings;
+    const lineSpacing = storeTextSettings.lineSpacing;
+
+    return (
+        <Page>
+            <Navbar title={_t.textLineSpacing} backLink={_t.textBack} />
+            <List>
+                <ListItem radio checked={lineSpacing === 1.0} title={1.0} onClick={() => {props.onLineSpacing(1.0)}}></ListItem>
+                <ListItem radio checked={lineSpacing === 1.15} title={1.15} onClick={() => {props.onLineSpacing(1.15)}}></ListItem>
+                <ListItem radio checked={lineSpacing === 1.5} title={1.5} onClick={() => {props.onLineSpacing(1.5)}}></ListItem>
+                <ListItem radio checked={lineSpacing === 2.0} title={2.0} onClick={() => {props.onLineSpacing(2.0)}}></ListItem>
+                <ListItem radio checked={lineSpacing === 2.5} title={2.5} onClick={() => {props.onLineSpacing(2.5)}}></ListItem>
+                <ListItem radio checked={lineSpacing === 3.0} title={3.0} onClick={() => {props.onLineSpacing(3.0)}}></ListItem>
+            </List>
+        </Page>
     )
 };
 
 const EditTextContainer = inject("storeTextSettings", "storeFocusObjects")(observer(EditText));
+const PageTextFonts = inject("storeTextSettings", "storeFocusObjects")(observer(PageFonts));
+const PageTextFontColor = inject("storeTextSettings", "storePalette")(observer(PageFontColor));
+const PageTextCustomFontColor = inject("storeTextSettings", "storePalette")(observer(PageCustomFontColor));
+const PageTextAddFormatting = inject("storeTextSettings", "storeFocusObjects")(observer(PageAdditionalFormatting));
+const PageTextBullets = inject("storeTextSettings")(observer(PageBullets));
+const PageTextNumbers = inject("storeTextSettings")(observer(PageNumbers));
+const PageTextLineSpacing = inject("storeTextSettings")(observer(PageLineSpacing));
 
 export {
-    EditTextContainer as EditText
+    EditTextContainer as EditText,
+    PageTextFonts,
+    PageTextFontColor,
+    PageTextCustomFontColor,
+    PageTextAddFormatting,
+    PageTextBullets,
+    PageTextNumbers,
+    PageTextLineSpacing
 };