[DE mobile] Add edit paragraph settings (paragraph styles, advanced settings)

apps/documenteditor/mobile/locale/en.json

@@ -45,7 +45,6 @@
     "textAuto": "Auto",
     "textPt": "pt",
     "textSize": "Size",
-    "textAuto": "Auto",
     "textStrikethrough": "Strikethrough",
     "textDoubleStrikethrough": "Double Strikethrough",
     "textSuperscript": "Superscript",
@@ -53,6 +52,19 @@
     "textSmallCaps": "Small Caps",
     "textAllCaps": "All Caps",
     "textLetterSpacing": "Letter Spacing",
-    "textNone": "None"
+    "textNone": "None",
+    "textBackground": "Background",
+    "textAdvancedSettings": "Advanced Settings",
+    "textParagraphStyles": "Paragraph Styles",
+    "textAdvanced": "Advanced",
+    "textDistanceFromText": "Distance from text",
+    "textBefore": "Before",
+    "textAfter": "After",
+    "textFirstLine": "FirstLine",
+    "textSpaceBetweenParagraphs": "Space Between Paragraphs",
+    "textPageBreakBefore": "Page Break Before",
+    "textOrphanControl": "Orphan Control",
+    "textKeepLinesTogether": "Keep Lines Together",
+    "textKeepWithNext": "Keep with Next"
   }
 }

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

@@ -4,7 +4,7 @@ import { Page, Navbar, NavRight, NavLeft, NavTitle, Link, Sheet, Tabs, Tab, View
 import { f7 } from 'framework7-react';
 import { useTranslation } from 'react-i18next';
 import EditTextController from "./controller/EditText";
-import EditParagraph from "./EditParagraph";
+import EditParagraphController from "./controller/EditParagraph";
 
 const EmptyEditLayout = () => {
     const { t } = useTranslation();
@@ -80,7 +80,7 @@ const EditSheet = props => {
             editors.push({
                 caption: t("Edit.textParagraph"),
                 id: 'edit-paragraph',
-                component: <EditParagraph />
+                component: <EditParagraphController />
             })
         }
         /*if (settings.indexOf('table') > -1) {

apps/documenteditor/mobile/src/components/edit/EditParagraph.jsx

@@ -1,33 +1,133 @@
-import React, {Component, Fragment} from 'react';
+import React, {Fragment, useState} from 'react';
-import {
+import {observer, inject} from "mobx-react";
-    List,
+import {List, ListItem, Icon, Row, Col, Button, Page, Navbar, Segmented, BlockTitle, Toggle} from 'framework7-react';
-    ListItem,
+import { useTranslation } from 'react-i18next';
-    BlockTitle
-} from 'framework7-react';
 
-export default class EditText extends Component {
+const PageAdvancedSettings = props => {
-    constructor(props) {
+    const { t } = useTranslation();
-        super(props);
+    const metricText = Common.Utils.Metric.getCurrentMetricName();
+    const storeFocusObjects = props.storeFocusObjects;
+    const paragraphObj = storeFocusObjects.paragraphObject;
+    if (paragraphObj.get_Ind()===null || paragraphObj.get_Ind()===undefined) {
+        paragraphObj.get_Ind().put_FirstLine(0);
     }
-    render() {
+    const firstLine = parseFloat(Common.Utils.Metric.fnRecalcFromMM(paragraphObj.get_Ind().get_FirstLine()).toFixed(2));
-        const textBackground = "Background";
-        const textAdvancedSettings = "Advanced settings";
-        const textParagraphStyles = "Paragraph styles";
 
-        return (
+    const spaceBefore = paragraphObj.get_Spacing().get_Before() < 0 ? paragraphObj.get_Spacing().get_Before() : Common.Utils.Metric.fnRecalcFromMM(paragraphObj.get_Spacing().get_Before());
-            <Fragment>
+    const spaceAfter  = paragraphObj.get_Spacing().get_After() < 0 ? paragraphObj.get_Spacing().get_After() : Common.Utils.Metric.fnRecalcFromMM(paragraphObj.get_Spacing().get_After());
-                <List>
+    const spaceBeforeFix = parseFloat(spaceBefore.toFixed(2));
-                    <ListItem title={textBackground} link="#">
+    const spaceAfterFix = parseFloat(spaceAfter.toFixed(2));
-                        <span className="color-preview" slot="after"></span>
+    const displayBefore = spaceBefore < 0 ? t('Edit.textAuto') : spaceBeforeFix + ' ' + metricText;
+    const displayAfter = spaceAfter < 0 ? t('Edit.textAuto') : spaceAfterFix + ' ' + metricText;
+
+    const spaceBetween = paragraphObj.get_ContextualSpacing();
+    const breakBefore = paragraphObj.get_PageBreakBefore();
+    const orphanControl = paragraphObj.get_WidowControl();
+    const keepTogether = paragraphObj.get_KeepLines();
+    const keepWithNext = paragraphObj.get_KeepNext();
+
+    return(
+        <Page>
+            <Navbar title={t('Edit.textAdvanced')} backLink={t('Edit.textBack')} />
+            <BlockTitle>{t('Edit.textDistanceFromText')}</BlockTitle>
+            <List>
+                <ListItem title={t('Edit.textBefore')}>
+                    <div slot='after-start'>{displayBefore}</div>
+                    <div slot='after'>
+                        <Segmented>
+                            <Button outline className='decrement' onClick={() => {props.onDistanceBefore(spaceBefore, true)}}> - </Button>
+                            <Button outline className='increment' onClick={() => {props.onDistanceBefore(spaceBefore, false)}}> + </Button>
+                        </Segmented>
+                    </div>
+                </ListItem>
+                <ListItem title={t('Edit.textAfter')}>
+                    <div slot='after-start'>{displayAfter}</div>
+                    <div slot='after'>
+                        <Segmented>
+                            <Button outline className='decrement' onClick={() => {props.onDistanceAfter(spaceAfter, true)}}> - </Button>
+                            <Button outline className='increment' onClick={() => {props.onDistanceAfter(spaceAfter, false)}}> + </Button>
+                        </Segmented>
+                    </div>
+                </ListItem>
+                <ListItem title={t('Edit.textFirstLine')}>
+                    <div slot='after-start'>{firstLine + ' ' + metricText}</div>
+                    <div slot='after'>
+                        <Segmented>
+                            <Button outline className='decrement' onClick={() => {props.onSpinFirstLine(paragraphObj, true)}}> - </Button>
+                            <Button outline className='increment' onClick={() => {props.onSpinFirstLine(paragraphObj, false)}}> + </Button>
+                        </Segmented>
+                    </div>
+                </ListItem>
+            </List>
+            <List>
+                <ListItem title={t('Edit.textSpaceBetweenParagraphs')}>
+                    <Toggle checked={spaceBetween} onToggleChange={() => {props.onSpaceBetween(!spaceBetween)}}/>
+                </ListItem>
+            </List>
+            <List>
+                <ListItem title={t('Edit.textPageBreakBefore')}>
+                    <Toggle checked={breakBefore} onToggleChange={() => {props.onBreakBefore(!breakBefore)}}/>
+                </ListItem>
+                <ListItem title={t('Edit.textOrphanControl')}>
+                    <Toggle checked={orphanControl} onToggleChange={() => {props.onOrphan(!orphanControl)}}/>
+                </ListItem>
+                <ListItem title={t('Edit.textKeepLinesTogether')}>
+                    <Toggle checked={keepTogether} onToggleChange={() => {props.onKeepTogether(!keepTogether)}}/>
+                </ListItem>
+                <ListItem title={t('Edit.textKeepWithNext')}>
+                    <Toggle checked={keepWithNext} onToggleChange={() => {props.onKeepNext(!keepWithNext)}}/>
+                </ListItem>
+            </List>
+        </Page>
+    )
+};
+
+const EditParagraph = props => {
+    const { t } = useTranslation();
+    const storeParagraphSettings = props.storeParagraphSettings;
+    const paragraphStyles = storeParagraphSettings.paragraphStyles;
+    const curStyleName = storeParagraphSettings.styleName;
+    const thumbSize = storeParagraphSettings.styleThumbSize;
+    return (
+        <Fragment>
+            <List>
+                <ListItem title={t('Edit.textBackground')} link=''>
+                    <span className="color-preview" slot="after"></span>
+                </ListItem>
+            </List>
+            <List>
+                <ListItem title={t('Edit.textAdvancedSettings')} link='/edit-paragraph-adv/' routeProps={{
+                    onDistanceBefore: props.onDistanceBefore,
+                    onDistanceAfter: props.onDistanceAfter,
+                    onSpinFirstLine: props.onSpinFirstLine,
+                    onSpaceBetween: props.onSpaceBetween,
+                    onBreakBefore: props.onBreakBefore,
+                    onOrphan: props.onOrphan,
+                    onKeepTogether: props.onKeepTogether,
+                    onKeepNext: props.onKeepNext
+                }}></ListItem>
+            </List>
+            <BlockTitle>{t('Edit.textParagraphStyles')}</BlockTitle>
+            <List>
+                {paragraphStyles.map((style, index) => (
+                    <ListItem
+                        key={index}
+                        radio
+                        checked={curStyleName === style.name}
+                        onClick={() => {props.onStyleClick(style.name)}}
+                    >
+                        <div slot="inner"
+                             style={{backgroundImage: 'url(' + style.image + ')', width: thumbSize.width + 'px', height: thumbSize.height + 'px', backgroundSize: thumbSize.width + 'px ' + thumbSize.height + 'px', backgroundRepeat: 'no-repeat'}}
+                        ></div>
                     </ListItem>
-                </List>
+                ))}
-                <List>
+            </List>
-                    <ListItem title={textAdvancedSettings} link="#"></ListItem>
+        </Fragment>
-                </List>
+    )
-                <BlockTitle>{textParagraphStyles}</BlockTitle>
+};
-                <List>
+
-                </List>
+const EditParagraphContainer = inject("storeParagraphSettings", "storeFocusObjects")(observer(EditParagraph));
-            </Fragment>
+const AdvSettingsContainer = inject("storeParagraphSettings", "storeFocusObjects")(observer(PageAdvancedSettings));
-        )
+
-    }
+export {EditParagraphContainer as EditParagraph,
-};
+        AdvSettingsContainer as PageAdvancedSettings};

apps/documenteditor/mobile/src/components/edit/controller/EditParagraph.jsx

@@ -0,0 +1,148 @@
+import React, {Component} from 'react';
+import { EditParagraph } from '../EditParagraph'
+
+class EditParagraphController extends Component {
+    constructor (props) {
+        super(props);
+    }
+
+    onStyleClick (name) {
+        const api = Common.EditorApi.get();
+        if (api) {
+            api.put_Style(name);
+        }
+    }
+
+    onDistanceBefore (distance, isDecrement) {
+        const api = Common.EditorApi.get();
+        if (api) {
+            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 = 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();
+        if (api) {
+            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 = Math.min(maxValue, distance + step);
+            }
+
+            api.put_LineSpacingBeforeAfter(1, (newDistance < 0) ? -1 : Common.Utils.Metric.fnRecalcToMM(newDistance));
+        }
+    }
+
+    onSpinFirstLine (paragraphProperty, isDecrement) {
+        const api = Common.EditorApi.get();
+        if (api) {
+            let distance = paragraphProperty.get_Ind().get_FirstLine();
+            let step;
+            distance = Common.Utils.Metric.fnRecalcFromMM(distance);
+
+            if (Common.Utils.Metric.getCurrentMetric() === Common.Utils.Metric.c_MetricUnits.pt) {
+                step = 1;
+            } else {
+                step = 0.1;
+            }
+
+            const minValue = Common.Utils.Metric.fnRecalcFromMM(-558.7);
+            const maxValue = Common.Utils.Metric.fnRecalcFromMM(558.7);
+
+            if (isDecrement) {
+                distance = Math.max(minValue, distance - step);
+            } else {
+                distance = Math.min(maxValue, distance + step);
+            }
+
+            var newParagraphProp = new Asc.asc_CParagraphProperty();
+            newParagraphProp.get_Ind().put_FirstLine(Common.Utils.Metric.fnRecalcToMM(distance));
+            api.paraApply(newParagraphProp);
+        }
+    }
+
+    onSpaceBetween (checked) {
+        const api = Common.EditorApi.get();
+        if (api) {
+            api.put_AddSpaceBetweenPrg(checked);
+        }
+    }
+
+    onBreakBefore (checked) {
+        const api = Common.EditorApi.get();
+        if (api) {
+            const properties = new Asc.asc_CParagraphProperty();
+            properties.put_PageBreakBefore(checked);
+            api.paraApply(properties);
+        }
+    }
+
+    onOrphan (checked) {
+        const api = Common.EditorApi.get();
+        if (api) {
+            const properties = new Asc.asc_CParagraphProperty();
+            properties.put_WidowControl(checked);
+            api.paraApply(properties);
+        }
+    }
+
+    onKeepTogether (checked) {
+        const api = Common.EditorApi.get();
+        if (api) {
+            const properties = new Asc.asc_CParagraphProperty();
+            properties.put_KeepLines(checked);
+            api.paraApply(properties);
+        }
+    }
+
+    onKeepNext (checked) {
+        const api = Common.EditorApi.get();
+        if (api) {
+            const properties = new Asc.asc_CParagraphProperty();
+            properties.put_KeepNext(checked);
+            api.paraApply(properties);
+        }
+    }
+
+    render () {
+        return (
+            <EditParagraph onStyleClick={this.onStyleClick}
+                           onDistanceBefore={this.onDistanceBefore}
+                           onDistanceAfter={this.onDistanceAfter}
+                           onSpinFirstLine={this.onSpinFirstLine}
+                           onSpaceBetween={this.onSpaceBetween}
+                           onBreakBefore={this.onBreakBefore}
+                           onOrphan={this.onOrphan}
+                           onKeepTogether={this.onKeepTogether}
+                           onKeepNext={this.onKeepNext}
+            />
+        )
+    }
+}
+
+export default EditParagraphController;

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

@@ -3,7 +3,7 @@ import React, {Component} from 'react'
 import {inject} from "mobx-react";
 import CollaborationController from '../../../../common/mobile/lib/controller/Collaboration.jsx'
 
-@inject("storeDocumentSettings", "storeFocusObjects", "storeTextSettings")
+@inject("storeDocumentSettings", "storeFocusObjects", "storeTextSettings", "storeParagraphSettings")
 class MainController extends Component {
     constructor(props) {
         super(props)
@@ -167,6 +167,7 @@ class MainController extends Component {
             storeFocusObjects.resetFocusObjects(objects);
         });
 
+        //text settings
         const storeTextSettings = this.props.storeTextSettings;
         this.api.asc_registerCallback('asc_onInitEditorFonts', (fonts, select) => {
             storeTextSettings.initEditorFonts(fonts, select);
@@ -218,6 +219,16 @@ class MainController extends Component {
             let color = shd.get_Color();
             storeTextSettings.resetBackgroundColor(color);
         });
+
+        //paragraph settings
+        const storeParagraphSettings = this.props.storeParagraphSettings;
+        this.api.asc_registerCallback('asc_onInitEditorStyles', (styles) => {
+            storeParagraphSettings.initEditorStyles(styles);
+        });
+        this.api.asc_registerCallback('asc_onParaStyleName', (name) => {
+            storeParagraphSettings.changeParaStyleName(name);
+        });
+
     }
 
     render() {

apps/documenteditor/mobile/src/js/routes.js

@@ -8,8 +8,9 @@ import RequestAndLoad from '../pages/request-and-load.jsx';
 
 import { PageCollaboration, PageUsers } from '../../../../common/mobile/lib/view/Collaboration.jsx';
 
-// Edit text
+// Edit
 import { PageFonts, PageAdditionalFormatting, PageBullets, PageNumbers, PageLineSpacing } from "../components/edit/EditText";
+import { PageAdvancedSettings } from "../components/edit/EditParagraph";
 
 var routes = [
   {
@@ -36,6 +37,11 @@ var routes = [
   {
     path: '/edit-text-line-spacing/',
     component: PageLineSpacing,
+  },
+    //Edit paragraph
+  {
+    path: '/edit-paragraph-adv/',
+    component: PageAdvancedSettings,
   },
   {
     path: '/users/',

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

@@ -3,11 +3,13 @@ import {storeDocumentSettings} from './documentSettings';
 import {storeFocusObjects} from "./focusObjects";
 import {storeUsers} from '../../../../common/mobile/lib/store/users';
 import {storeTextSettings} from "./textSettings";
+import {storeParagraphSettings} from "./paragraphSettings";
 
 export const stores = {
     storeFocusObjects: new storeFocusObjects(),
     storeDocumentSettings: new storeDocumentSettings(),
     users: new storeUsers(),
-    storeTextSettings: new storeTextSettings()
+    storeTextSettings: new storeTextSettings(),
+    storeParagraphSettings: new storeParagraphSettings()
 };
 

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

@@ -0,0 +1,28 @@
+import {action, observable, computed} from 'mobx';
+
+export class storeParagraphSettings {
+    @observable styles = [];
+    @observable styleThumbSize = null;
+    @observable styleName = undefined;
+
+    @action initEditorStyles (styles) {
+        this.styles = styles.get_MergedStyles();
+        this.styleThumbSize = {
+            width   : styles.STYLE_THUMBNAIL_WIDTH,
+            height  : styles.STYLE_THUMBNAIL_HEIGHT
+        };
+    }
+    @computed get paragraphStyles () {
+        let _styles = [];
+        for (let style of this.styles) {
+            _styles.push({
+                image   : style.asc_getImage(),
+                name    : style.get_Name()
+            });
+        }
+        return _styles;
+    }
+    @action changeParaStyleName (name) {
+        this.styleName = name;
+    }
+}