[DE mobile] Add creating new text style

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

@@ -30,6 +30,11 @@ i.icon {
         height: 24px;
         .encoded-svg-background('<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><mask id="mask0" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="2" y="2" width="20" height="20"><circle cx="12" cy="12" r="9.5" fill="@{gray}" stroke="@{brandColor}"/></mask><g mask="url(#mask0)"><circle cx="12" cy="12" r="9.5" transform="rotate(-90 12 12)" stroke="@{brandColor}"/><line x1="5.09054" y1="19.2024" x2="19.1919" y2="5.10094" stroke="@{brandColor}"/></g></svg>');
     }
+    &.icon-remove-style {
+        width: 24px;
+        height: 24px;
+        .encoded-svg-background('<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill-rule="evenodd" clip-rule="evenodd" d="M9.33333 2C8.74423 2 8.26667 2.47128 8.26667 3.05263V4H4.53333C4.23878 4 4 4.23564 4 4.52632C4 4.81699 4.23878 5.05263 4.53333 5.05263H5.06667L6.06667 20.9474C6.06667 21.5287 6.54423 22 7.13333 22H16.8667C17.4558 22 17.9333 21.5287 17.9333 20.9474L19 5H19.4667C19.7612 5 20 4.79068 20 4.5C20 4.20932 19.7612 4 19.4667 4H15.7333V3.05263C15.7333 2.47128 15.2558 2 14.6667 2H9.33333ZM14.6667 4V3.05263H9.33333V4H14.6667ZM18 5H6L6.9414 20.0624C6.97434 20.5894 7.41139 21 7.93945 21H16.0605C16.5886 21 17.0257 20.5894 17.0586 20.0624L18 5Z" fill="#FF3B30"/><path d="M8 7.0023L9 7.00239L9.5 18.9999H8.5L8 7.0023Z" fill="#FF3B30"/><path d="M11.5 7H12.5V19H11.5V7Z" fill="#FF3B30"/><path d="M15 7.00232L16 6.99988L15.5 18.9999H14.5L15 7.00232Z" fill="#FF3B30"/></svg>')
+    }
 
     // Formats 
     

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

@@ -6,7 +6,9 @@ class EditParagraphController extends Component {
     constructor (props) {
         super(props);
         props.storeParagraphSettings.setBackColor(undefined);
+
         this.onStyleClick = this.onStyleClick.bind(this);
+        this.onSaveStyle = this.onSaveStyle.bind(this);
     }
 
     onStyleClick (name) {
@@ -17,6 +19,21 @@ class EditParagraphController extends Component {
         }
     }
 
+    onSaveStyle(title, nextParagraphStyle) {
+        const api = Common.EditorApi.get();
+        const curStyleName = this.props.storeParagraphSettings.styleName;
+        let newStyle = new Asc.asc_CStyle();
+
+        newStyle.put_Name(title);
+        // console.log(newStyle.get_Name());
+        newStyle.put_Next(nextParagraphStyle ? nextParagraphStyle : null);
+        newStyle.put_BasedOn(curStyleName);
+        // console.log(newStyle);
+
+        api.asc_AddNewStyle(newStyle);
+        this.props.storeParagraphSettings.changeParaStyleName(newStyle.get_Name());
+    }
+
     onDistanceBefore (distance, isDecrement) {
         const api = Common.EditorApi.get();
         if (api) {
@@ -156,6 +173,7 @@ class EditParagraphController extends Component {
                            onKeepTogether={this.onKeepTogether}
                            onKeepNext={this.onKeepNext}
                            onBackgroundColor={this.onBackgroundColor}
+                           onSaveStyle={this.onSaveStyle}
             />
         )
     }

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

@@ -203,7 +203,10 @@ const EditParagraph = props => {
         <Fragment>
             <BlockTitle>{t('Edit.textParagraphStyle')}</BlockTitle>
             <List className={activeStyle} style={{marginBottom: 0}}>
-                <ListItem link="/edit-paragraph-style/" routeProps={{onStyleClick: props.onStyleClick}}>
+                <ListItem link="/edit-paragraph-style/" routeProps={{
+                    onStyleClick: props.onStyleClick,
+                    onSaveStyle: props.onSaveStyle
+                }}>
                     <div slot="inner"
                         style={{backgroundImage: 'url(' + curStyle.image + ')', width: thumbSize.width + 'px', height: thumbSize.height + 'px', backgroundSize: thumbSize.width + 'px ' + thumbSize.height + 'px', backgroundRepeat: 'no-repeat'}}
                     ></div>
@@ -256,7 +259,9 @@ const EditParagraphStyle = props => {
                 }
             </Navbar>
             <List style={{marginBottom: 0}}>
-                <ListItem title="Create new text style" href="/create-text-style/"></ListItem>
+                <ListItem title={t('Edit.textCreateTextStyle')} href="/create-text-style/" routeProps={{
+                    onSaveStyle: props.onSaveStyle
+                }}></ListItem>
             </List>
             <List className={activeStyle}>
                 {paragraphStyles.map((style, index) => (
@@ -280,20 +285,21 @@ const EditParagraphStyle = props => {
     )
 }
 
-const CreateTextStyle = () => {
+const CreateTextStyle = props => {
     const { t } = useTranslation();
     const _t = t('Edit', {returnObjects: true});
     const [titleNewStyle, setTitle] = useState('');
-    const [nextParagraphStyle, setParagraph] = useState('Same');
+    const [nextParagraphStyle, setParagraph] = useState('');
 
     return (
         <Page>
             <Navbar backLink={t('Edit.textBack')}>
                 <NavTitle>{t('Edit.textCreateTextStyle')}</NavTitle>
                 <NavRight>
-                    <Link disabled onClick={() => {
-                        if(titleNewStyle.trim()) {
-                            // console.log(titleNewStyle);
+                    <Link onClick={() => {
+                        let title = titleNewStyle.trim();
+                        if(title) {
+                            props.onSaveStyle(title, nextParagraphStyle);
                         }
                     }}>{t('Edit.textDone')}</Link>
                 </NavRight>
@@ -311,7 +317,7 @@ const CreateTextStyle = () => {
             </List>
             <BlockTitle>{t('Edit.textNextParagraphStyle')}</BlockTitle>
             <List>
-                <ListItem style={{paddingLeft: '5px'}} title={nextParagraphStyle === 'Same' ? t('Edit.textSameCreatedNewStyle') : nextParagraphStyle} href="/change-next-paragraph-style/" routeProps={{
+                <ListItem title={!nextParagraphStyle ? t('Edit.textSameCreatedNewStyle') : nextParagraphStyle} href="/change-next-paragraph-style/" routeProps={{
                     nextParagraphStyle,
                     setParagraph
                 }}></ListItem>
@@ -326,7 +332,6 @@ const ChangeNextParagraphStyle = props => {
     const nextParagraphStyle = props.nextParagraphStyle;
     const storeParagraphSettings = props.storeParagraphSettings;
     const paragraphStyles = storeParagraphSettings.paragraphStyles;
-    // const curStyleName = storeParagraphSettings.styleName;
     const thumbSize = storeParagraphSettings.styleThumbSize;
     const activeStyle = Device.android ? 'link no-active-state' : 'no-active-state';
     const [newParagraph, setParagraph] = useState(nextParagraphStyle);
@@ -335,10 +340,10 @@ const ChangeNextParagraphStyle = props => {
         <Page>
             <Navbar title={t('Edit.textNextParagraphStyle')} backLink={_t.textBack}></Navbar>
             <List className={activeStyle}>
-                <ListItem radio checked={newParagraph === 'Same'} onClick={() => {
-                    if(nextParagraphStyle !== 'Same') {
-                        setParagraph('Same');
-                        props.setParagraph('Same');
+                <ListItem style={{paddingLeft: '5px'}} radio checked={!newParagraph} onClick={() => {
+                    if(nextParagraphStyle) {
+                        setParagraph('');
+                        props.setParagraph('');
                     }
                 }} title={t('Edit.textSameCreatedNewStyle')}></ListItem>
                 {paragraphStyles.map((style, index) => (