Merge pull request #1755 from ONLYOFFICE/feature/Bug_46686

Feature/bug 46686
2022-05-23 23:59:55 +03:00 · 2022-05-23 23:59:55 +03:00 · a8afe5ce92
parent a3d90a727a b51fd11bf2
commit a8afe5ce92
8 changed files with 221 additions and 9 deletions
--- a/apps/common/mobile/resources/less/common.less
+++ b/apps/common/mobile/resources/less/common.less
@ -93,6 +93,10 @@
 }

 .list {
+    max-width: 100%;
+    ul {
+        width: 100%;
+    }
    li.no-indicator {
        .item-link {
            .item-inner{
@ -123,6 +127,9 @@
            background-color: @autoColor;
        }
    }
+    .item-link .item-inner {
+        width: 100%;
+    }
 }

 // Bullets, numbers and multilevels
--- a/apps/common/mobile/resources/less/icons.less
+++ b/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 
    
--- a/apps/documenteditor/mobile/locale/en.json
+++ b/apps/documenteditor/mobile/locale/en.json
@ -292,7 +292,14 @@
    "textPageBreakBefore": "Page Break Before",
    "textPageNumbering": "Page Numbering",
    "textParagraph": "Paragraph",
-    "textParagraphStyles": "Paragraph Styles",
+    "textCreateTextStyle": "Create new text style",
+    "textDone": "Done",
+    "textTitle": "Title",
+    "textEnterTitleNewStyle": "Enter title of a new style",
+    "textNextParagraphStyle": "Next paragraph style",
+    "textSameCreatedNewStyle": "Same as created new style",
+    "del_textParagraphStyles": "Paragraph Styles",
+    "textParagraphStyle": "Paragraph Style",
    "textPictureFromLibrary": "Picture from Library",
    "textPictureFromURL": "Picture from URL",
    "textPt": "pt",
--- a/apps/documenteditor/mobile/src/controller/edit/EditParagraph.jsx
+++ b/apps/documenteditor/mobile/src/controller/edit/EditParagraph.jsx
@ -6,7 +6,10 @@ class EditParagraphController extends Component {
    constructor (props) {
        super(props);
        props.storeParagraphSettings.setBackColor(undefined);
+
        this.onStyleClick = this.onStyleClick.bind(this);
+        this.onSaveStyle = this.onSaveStyle.bind(this);
+        this.onStyleMenuDelete = this.onStyleMenuDelete.bind(this);
    }

    onStyleClick (name) {
@ -17,6 +20,22 @@ class EditParagraphController extends Component {
        }
    }

+    onSaveStyle(title, nextParagraphStyle) {
+        const api = Common.EditorApi.get();
+        const style = api.asc_GetStyleFromFormatting();
+
+        style.put_Name(title);
+        style.put_Next(nextParagraphStyle ? nextParagraphStyle : null);
+        
+        api.asc_AddNewStyle(style);
+        this.props.storeParagraphSettings.changeParaStyleName(title);
+    }
+
+    onStyleMenuDelete(styleName) {
+        const api = Common.EditorApi.get();
+        api.asc_RemoveStyle(styleName);
+    }
+
    onDistanceBefore (distance, isDecrement) {
        const api = Common.EditorApi.get();
        if (api) {
@ -156,6 +175,8 @@ class EditParagraphController extends Component {
                           onKeepTogether={this.onKeepTogether}
                           onKeepNext={this.onKeepNext}
                           onBackgroundColor={this.onBackgroundColor}
+                           onSaveStyle={this.onSaveStyle}
+                           onStyleMenuDelete={this.onStyleMenuDelete}
            />
        )
    }
--- a/apps/documenteditor/mobile/src/less/app.less
+++ b/apps/documenteditor/mobile/src/less/app.less
@ -314,3 +314,12 @@
        border-top: 1px solid var(--background-menu-divider);
    }
 }
+
+.create-style-link {
+    .item-link .item-inner:before {
+        display: none;
+    }
+    .item-title {
+        color: @brandColor;
+    }
+}
--- a/apps/documenteditor/mobile/src/less/icons-material.less
+++ b/apps/documenteditor/mobile/src/less/icons-material.less
@ -215,6 +215,11 @@
      height: 22px;
      .encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 22 22" fill="@{brandColor}"><g><path d="M21,19h-6h-1h-1.6c-0.9,1.8-2.7,3-4.9,3s-4-1.2-4.9-3H1H0v-1v-3v-1v-3v-1V7V6V3V2h7h1h6h1h6h1v1v3v1v3v1v3v1v3v1H21z M1,18h1.2C2.1,17.5,2,17,2,16.5c0-0.5,0.1-1,0.2-1.5H1V18z M7,3H1v3h6V3z M7,7H1v3h6V7z M7.5,12C5,12,3,14,3,16.5S5,21,7.5,21s4.5-2,4.5-4.5S10,12,7.5,12z M14,3H8v3h6V3z M14,7H8v3h6V7z M14,15h-1.2c0.1,0.5,0.2,1,0.2,1.5c0,0.5-0.1,1-0.2,1.5H14V15z M21,3h-6v3h6V3z M21,7h-6v3h6V7z M21,15h-6v3h6V15z M9.6,19.3l-2.1-2.1l-2.1,2.1l-0.7-0.7l2.1-2.1l-2.1-2.1l0.7-0.7l2.1,2.1l2.1-2.1l0.7,0.7l-2.1,2.1l2.1,2.1L9.6,19.3z"/></g></svg>');
    }
+    &.icon-create-style {
+      width: 24px;
+      height: 24px;
+      .encoded-svg-mask('<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M18.9844 12C18.9844 12.5437 18.5437 12.9844 18 12.9844H12.9844V18C12.9844 18.5437 12.5437 18.9844 12 18.9844C11.4563 18.9844 11.0156 18.5437 11.0156 18V12.9844H6C5.45634 12.9844 5.01562 12.5437 5.01562 12C5.01562 11.4563 5.45634 11.0156 6 11.0156H11.0156V6C11.0156 5.45634 11.4563 5.01562 12 5.01562C12.5437 5.01562 12.9844 5.45634 12.9844 6V11.0156H18C18.5437 11.0156 18.9844 11.4563 18.9844 12Z" fill="@{brandColor}"/></svg>')
+    }
    // Presets of table borders
    &.icon-table-borders-all {
      width: 28px;
--- a/apps/documenteditor/mobile/src/view/edit/Edit.jsx
+++ b/apps/documenteditor/mobile/src/view/edit/Edit.jsx
@ -16,7 +16,7 @@ import EditHeaderController from "../../controller/edit/EditHeader";
 import EditTableContentsController from "../../controller/edit/EditTableContents";

 import {PageTextFonts, PageTextAddFormatting, PageTextBulletsAndNumbers, PageTextLineSpacing, PageTextFontColor, PageTextCustomFontColor, PageTextHighlightColor} from "./EditText";
-import {ParagraphAdvSettings, PageParagraphBackColor, PageParagraphCustomColor} from "./EditParagraph";
+import {ParagraphAdvSettings, PageParagraphBackColor, PageParagraphCustomColor, PageParagraphStyle, PageCreateTextStyle, PageChangeNextParagraphStyle} from "./EditParagraph";
 import {PageShapeStyleNoFill, PageShapeStyle, PageShapeCustomFillColor, PageShapeBorderColor, PageShapeCustomBorderColor, PageWrap, PageReorder, PageReplace} from "./EditShape";
 import {PageImageReorder, PageImageReplace, PageImageWrap, PageLinkSettings} from "./EditImage";
 import {PageTableOptions, PageTableWrap, PageTableStyle, PageTableStyleOptions, PageTableCustomFillColor, PageTableBorderColor, PageTableCustomBorderColor} from "./EditTable";
@ -66,6 +66,18 @@ const routes = [
        path: '/edit-paragraph-custom-color/',
        component: PageParagraphCustomColor,
    },
+    {
+        path: '/edit-paragraph-style/',
+        component: PageParagraphStyle
+    },
+    {
+        path: '/create-text-style/',
+        component: PageCreateTextStyle
+    },
+    {
+        path: '/change-next-paragraph-style/',
+        component: PageChangeNextParagraphStyle
+    },
    //Edit shape
    {
        path: '/edit-shape-style/',
--- a/apps/documenteditor/mobile/src/view/edit/EditParagraph.jsx
+++ b/apps/documenteditor/mobile/src/view/edit/EditParagraph.jsx
@ -1,6 +1,6 @@
 import React, {Fragment, useState} from 'react';
 import {observer, inject} from "mobx-react";
-import {f7, List, ListItem, Icon, Button, Page, Navbar, NavRight, Segmented, BlockTitle, Toggle, Link} from 'framework7-react';
+import {f7, List, ListItem, Icon, Button, Page, Navbar, NavRight, Segmented, BlockTitle, Toggle, Link, NavLeft, NavTitle, ListInput} 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';
@ -191,6 +191,7 @@ const EditParagraph = props => {
    const storeParagraphSettings = props.storeParagraphSettings;
    const paragraphStyles = storeParagraphSettings.paragraphStyles;
    const curStyleName = storeParagraphSettings.styleName;
+    const curStyle = paragraphStyles.find(style => style.name === curStyleName);
    const thumbSize = storeParagraphSettings.styleThumbSize;

    const paragraph = props.storeFocusObjects.paragraphObject;
@ -200,6 +201,18 @@ const EditParagraph = props => {
    
    return (
        <Fragment>
+            <BlockTitle>{t('Edit.textParagraphStyle')}</BlockTitle>
+            <List className={activeStyle} style={{marginBottom: 0}}>
+                <ListItem link="/edit-paragraph-style/" routeProps={{
+                    onStyleClick: props.onStyleClick,
+                    onSaveStyle: props.onSaveStyle,
+                    onStyleMenuDelete: props.onStyleMenuDelete
+                }}>
+                    <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>
+                </ListItem>
+            </List>
            <List>
                <ListItem title={_t.textBackground} link='/edit-paragraph-back-color/' routeProps={{
                    onBackgroundColor: props.onBackgroundColor
@ -222,12 +235,44 @@ const EditParagraph = props => {
                    onKeepNext: props.onKeepNext
                }}></ListItem>
            </List>
-            <BlockTitle>{_t.textParagraphStyles}</BlockTitle>
+        </Fragment>
+    )
+};
+
+const EditParagraphStyle = props => {
+    const { t } = useTranslation();
+    const api = Common.EditorApi.get();
+    const _t = t('Edit', {returnObjects: true});
+    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';
+
+    return (
+        <Page>
+            <Navbar title={t('Edit.textParagraphStyle')} backLink={_t.textBack}>
+                {Device.phone &&
+                    <NavRight>
+                        <Link sheetClose='#edit-sheet'>
+                            <Icon icon='icon-expand-down'/>
+                        </Link>
+                    </NavRight>
+                }
+            </Navbar>
+            <List style={{marginBottom: 0}}>
+                <ListItem className="create-style-link" title={t('Edit.textCreateTextStyle')} href="/create-text-style/" routeProps={{
+                    onSaveStyle: props.onSaveStyle
+                }}>
+                    {Device.android && <Icon slot="media" icon="icon-create-style"></Icon>}
+                </ListItem>
+            </List>
            <List className={activeStyle}>
                {paragraphStyles.map((style, index) => (
                    <ListItem
                        key={index}
                        radio
+                        radioIcon="start"
                        checked={curStyleName === style.name}
                        onClick={() => {
                            if(curStyleName !== style.name) {
@ -236,21 +281,122 @@ const EditParagraph = props => {
                        }}
                    >
                        <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'}}
+                            style={{backgroundImage: 'url(' + style.image + ')', width: thumbSize.width + 'px', height: thumbSize.height + 'px', backgroundSize: thumbSize.width + 'px ' + thumbSize.height + 'px', backgroundRepeat: 'no-repeat'}}
+                        ></div>
+                        {!api.asc_IsStyleDefault(style.name) && (
+                            <div slot="inner-end">
+                                <Link onClick={async () => {
+                                    await storeParagraphSettings.changeParaStyleName('Normal');
+                                    await props.onStyleMenuDelete(style.name);
+                                }}>
+                                    <Icon icon="icon-remove-style" />
+                                </Link>
+                            </div>
+                        )}
+                    </ListItem>
+                ))}
+            </List>
+        </Page>
+    )
+}
+
+const CreateTextStyle = props => {
+    const { t } = useTranslation();
+    const _t = t('Edit', {returnObjects: true});
+    const [titleNewStyle, setTitle] = useState('');
+    const [nextParagraphStyle, setParagraph] = useState('');
+
+    return (
+        <Page>
+            <Navbar title={t('Edit.textCreateTextStyle')} backLink={t('Edit.textBack')}>
+                <Link slot="right" className={`${!titleNewStyle.trim() && 'disabled'}`} onClick={() => {
+                    let title = titleNewStyle.trim();
+                    if(title) {
+                        props.onSaveStyle(title, nextParagraphStyle);
+                        props.f7router.back();
+                    }
+                }}>{t('Edit.textDone')}</Link>
+            </Navbar>
+            <List inlineLabels className='inputs-list'>
+                <ListInput
+                    label={_t.textTitle}
+                    type="text"
+                    placeholder={_t.textEnterTitleNewStyle}
+                    value={titleNewStyle}
+                    onChange={(event) => {
+                        setTitle(event.target.value)
+                    }}
+                ></ListInput>
+            </List>
+            <BlockTitle>{t('Edit.textNextParagraphStyle')}</BlockTitle>
+            <List>
+                <ListItem title={!nextParagraphStyle ? t('Edit.textSameCreatedNewStyle') : nextParagraphStyle} href="/change-next-paragraph-style/" routeProps={{
+                    nextParagraphStyle,
+                    setParagraph
+                }}></ListItem>
+            </List>
+        </Page>
+    )
+}
+
+const ChangeNextParagraphStyle = props => {
+    const { t } = useTranslation();
+    const _t = t('Edit', {returnObjects: true});
+    const nextParagraphStyle = props.nextParagraphStyle;
+    const storeParagraphSettings = props.storeParagraphSettings;
+    const paragraphStyles = storeParagraphSettings.paragraphStyles;
+    const thumbSize = storeParagraphSettings.styleThumbSize;
+    const activeStyle = Device.android ? 'link no-active-state' : 'no-active-state';
+    const [newParagraph, setParagraph] = useState(nextParagraphStyle);
+
+    return (
+        <Page>
+            <Navbar title={t('Edit.textNextParagraphStyle')} backLink={_t.textBack}></Navbar>
+            <List className={activeStyle}>
+                <ListItem style={{paddingLeft: '5px'}} radio radioIcon="start" checked={!newParagraph} onClick={() => {
+                    if(newParagraph) {
+                        setParagraph('');
+                        props.setParagraph('');
+                    }
+                }} title={t('Edit.textSameCreatedNewStyle')}></ListItem>
+                {paragraphStyles.map((style, index) => (
+                    <ListItem
+                        key={index}
+                        radio
+                        radioIcon="start"
+                        checked={newParagraph === style.name}
+                        onClick={() => {
+                            if(newParagraph !== style.name) {
+                                setParagraph(style.name);
+                                props.setParagraph(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>
-        </Fragment>
+        </Page>
    )
-};
+
+}

 const EditParagraphContainer = inject("storeParagraphSettings", "storeFocusObjects")(observer(EditParagraph));
 const ParagraphAdvSettings = inject("storeParagraphSettings", "storeFocusObjects")(observer(PageAdvancedSettings));
 const PageParagraphBackColor = inject("storeParagraphSettings", "storePalette")(observer(PageBackgroundColor));
 const PageParagraphCustomColor = inject("storeParagraphSettings", "storePalette")(observer(PageCustomBackColor));
+const PageParagraphStyle = inject("storeParagraphSettings")(observer(EditParagraphStyle));
+const PageCreateTextStyle = inject("storeParagraphSettings")(observer(CreateTextStyle));
+const PageChangeNextParagraphStyle = inject("storeParagraphSettings")(observer(ChangeNextParagraphStyle));

-export {EditParagraphContainer as EditParagraph,
+export {
+        EditParagraphContainer as EditParagraph,
        ParagraphAdvSettings,
        PageParagraphBackColor,
-        PageParagraphCustomColor};
+        PageParagraphCustomColor,
+        PageParagraphStyle,
+        PageCreateTextStyle,
+        PageChangeNextParagraphStyle
+};