[DE mobile] Changed adding and editing link

apps/documenteditor/mobile/locale/en.json

@@ -309,7 +309,8 @@
     "textPt": "pt",
     "textRemoveChart": "Remove Chart",
     "textRemoveImage": "Remove Image",
-    "textRemoveLink": "Remove Link",
+    "del_textRemoveLink": "Remove Link",
+    "textDeleteLink": "Delete Link",
     "textRemoveShape": "Remove Shape",
     "textRemoveTable": "Remove Table",
     "textReorder": "Reorder",
@@ -368,7 +369,9 @@
     "textRefreshEntireTable": "Refresh entire table",
     "textRefreshPageNumbersOnly": "Refresh page numbers only",
     "textStyles": "Styles",
-    "textAmountOfLevels": "Amount of Levels"
+    "textAmountOfLevels": "Amount of Levels",
+    "textRecommended": "Recommended",
+    "textRequired": "Required"
   },
   "Error": {
     "convertationTimeoutText": "Conversion timeout exceeded.",

apps/documenteditor/mobile/src/controller/add/AddLink.jsx

@@ -1,5 +1,5 @@
 import React, {Component} from 'react';
-import { f7 } from 'framework7-react';
+import { f7, Popup, Popover } from 'framework7-react';
 import {Device} from '../../../../../common/mobile/utils/device';
 import { withTranslation} from 'react-i18next';
 
@@ -8,14 +8,16 @@ import {PageAddLink} from '../../view/add/AddLink';
 class AddLinkController extends Component {
     constructor (props) {
         super(props);
+
         this.onInsertLink = this.onInsertLink.bind(this);
+        this.closeModal = this.closeModal.bind(this);
     }
 
     closeModal () {
         if ( Device.phone ) {
-            f7.popup.close('.add-popup', true);
+            f7.popup.close('#add-link-popup');
         } else {
-            f7.popover.close('#add-popover');
+            f7.popover.close('#add-link-popover');
         }
     }
 
@@ -60,12 +62,32 @@ class AddLinkController extends Component {
 
         api.add_Hyperlink(props);
 
-        this.closeModal();
+        // this.closeModal();
+    }
+
+    componentDidMount() {
+        if(!this.props.isNavigate) {
+            if(Device.phone) {
+                f7.popup.open('#add-link-popup', true);
+            } else {
+                f7.popover.open('#add-link-popover', '#btn-add');
+            }
+        }
     }
 
     render () {
         return (
-            <PageAddLink closeModal={this.closeModal} onInsertLink={this.onInsertLink} getDisplayLinkText={this.getDisplayLinkText} noNavbar={this.props.noNavbar}/>
+            !this.props.isNavigate ?
+                Device.phone ?
+                    <Popup id="add-link-popup" onPopupClosed={() => this.props.onClosed('add-link')}>
+                        <PageAddLink closeModal={this.closeModal} onInsertLink={this.onInsertLink} getDisplayLinkText={this.getDisplayLinkText} isNavigate={this.props.isNavigate} />
+                    </Popup>
+                :
+                    <Popover id="add-link-popover" className="popover__titled" style={{height: '410px'}} closeByOutsideClick={false} onPopoverClosed={() => this.props.onClosed('add-link')}>
+                        <PageAddLink closeModal={this.closeModal} onInsertLink={this.onInsertLink} getDisplayLinkText={this.getDisplayLinkText} isNavigate={this.props.isNavigate}/>
+                    </Popover>
+            :
+                <PageAddLink closeModal={this.closeModal} onInsertLink={this.onInsertLink} getDisplayLinkText={this.getDisplayLinkText} isNavigate={this.props.isNavigate} />
         )
     }
 }

apps/documenteditor/mobile/src/controller/add/AddOther.jsx

@@ -261,6 +261,8 @@ class AddOtherController extends Component {
                 richEditLock={this.props.richEditLock}
                 plainDelLock={this.props.plainDelLock}
                 plainEditLock={this.props.plainEditLock}   
+                onCloseLinkSettings={this.props.onCloseLinkSettings}
+                isNavigate={this.props.isNavigate}
             />
         )
     }

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

@@ -1,5 +1,5 @@
 import React, {Component} from 'react';
-import { f7 } from 'framework7-react';
+import { f7, Popover, Popup } from 'framework7-react';
 import {Device} from '../../../../../common/mobile/utils/device';
 import {observer, inject} from "mobx-react";
 import { withTranslation } from 'react-i18next';
@@ -9,19 +9,21 @@ import EditHyperlink from '../../view/edit/EditHyperlink';
 class EditHyperlinkController extends Component {
     constructor (props) {
         super(props);
+
         this.onRemoveLink = this.onRemoveLink.bind(this);
         this.onEditLink = this.onEditLink.bind(this);
+        this.closeModal = this.closeModal.bind(this);
     }
 
     closeModal () {
         if ( Device.phone ) {
-            f7.sheet.close('#edit-sheet', true);
+            f7.popup.close('#edit-link-popup');
         } else {
-            f7.popover.close('#edit-popover');
+            f7.popover.close('#edit-link-popover');
         }
     }
 
-    onEditLink (link, display, tip) {
+    onEditLink (link, display) {
         const api = Common.EditorApi.get();
         if (api) {
             const urltype = api.asc_getUrlType(link.trim());
@@ -49,13 +51,13 @@ class EditHyperlinkController extends Component {
             const props = new Asc.CHyperlinkProperty();
             props.put_Value(url);
             props.put_Text(display.trim().length < 1 ? url : display);
-            props.put_ToolTip(tip);
+            // props.put_ToolTip(tip);
             const linkObject = this.props.storeFocusObjects.linkObject;
             if (linkObject) {
                 props.put_InternalHyperlink(linkObject.get_InternalHyperlink());
             }
             api.change_Hyperlink(props);
-            this.closeModal();
+            // this.closeModal();
         }
     }
 
@@ -64,14 +66,47 @@ class EditHyperlinkController extends Component {
         if (api) {
             const linkObject = this.props.storeFocusObjects.linkObject;
             api.remove_Hyperlink(linkObject);
-            this.closeModal();
+            // this.closeModal();
+        }
+    }
+
+    componentDidMount() {
+        if(!this.props.isNavigate) {
+            if(Device.phone) {
+                f7.popup.open('#edit-link-popup', true);
+            } else {
+                f7.popover.open('#edit-link-popover', '#btn-edit');
+            }
         }
     }
 
     render () {
         return (
-            <EditHyperlink onEditLink={this.onEditLink}
+            !this.props.isNavigate ?
+                Device.phone ?
+                    <Popup id="edit-link-popup" onPopupClosed={() => this.props.onClosed('edit-link')}>
+                        <EditHyperlink 
+                            onEditLink={this.onEditLink}
                             onRemoveLink={this.onRemoveLink}
+                            closeModal={this.closeModal}
+                            isNavigate={this.props.isNavigate}
+                        />
+                    </Popup>
+                :
+                    <Popover id="edit-link-popover" className="popover__titled" style={{height: '410px'}} closeByOutsideClick={false} onPopoverClosed={() => this.props.onClosed('edit-link')}>
+                        <EditHyperlink 
+                            onEditLink={this.onEditLink}
+                            onRemoveLink={this.onRemoveLink}
+                            closeModal={this.closeModal}
+                            isNavigate={this.props.isNavigate}
+                        />
+                    </Popover>
+            :     
+                <EditHyperlink 
+                    onEditLink={this.onEditLink}
+                    onRemoveLink={this.onRemoveLink}
+                    closeModal={this.closeModal}
+                    isNavigate={this.props.isNavigate}
                 />
         )   
     }

apps/documenteditor/mobile/src/page/main.jsx

@@ -13,6 +13,8 @@ import { Search, SearchSettings } from '../controller/Search';
 import ContextMenu from '../controller/ContextMenu';
 import { Toolbar } from "../controller/Toolbar";
 import NavigationController from '../controller/settings/Navigation';
+import { AddLinkController } from '../controller/add/AddLink';
+import EditHyperlink from '../controller/edit/EditHyperlink';
 
 class MainPage extends Component {
     constructor(props) {
@@ -23,7 +25,9 @@ class MainPage extends Component {
             addShowOptions: null,
             settingsVisible: false,
             collaborationVisible: false,
-            navigationVisible: false
+            navigationVisible: false,
+            addLinkSettingsVisible: false,
+            editLinkSettingsVisible: false
         };
     }
 
@@ -49,6 +53,12 @@ class MainPage extends Component {
             } else if( opts === 'navigation') {
                 this.state.navigationVisible && (opened = true);
                 newState.navigationVisible = true;
+            } else if ( opts === 'add-link') {
+                this.state.addLinkSettingsVisible && (opened = true);
+                newState.addLinkSettingsVisible = true;
+            } else if( opts === 'edit-link') {
+                this.state.editLinkSettingsVisible && (opened = true);
+                newState.editLinkSettingsVisible = true;
             }
 
             for (let key in this.state) {
@@ -81,7 +91,11 @@ class MainPage extends Component {
                 else if ( opts == 'coauth' )
                     return {collaborationVisible: false};
                 else if( opts == 'navigation') 
-                    return {navigationVisible: false}
+                    return {navigationVisible: false};
+                else if ( opts === 'add-link') 
+                    return {addLinkSettingsVisible: false};
+                else if( opts === 'edit-link') 
+                    return {editLinkSettingsVisible: false};
             });
             if ((opts === 'edit' || opts === 'coauth') && Device.phone) {
                 f7.navbar.show('.main-navbar');
@@ -158,7 +172,15 @@ class MainPage extends Component {
                 }
                 {
                     !this.state.addOptionsVisible ? null :
-                        <AddOptions onclosed={this.handleOptionsViewClosed.bind(this, 'add')} showOptions={this.state.addShowOptions} />
+                        <AddOptions openOptions={this.handleClickToOpenOptions.bind(this)} onCloseLinkSettings={this.handleOptionsViewClosed.bind(this)} onclosed={this.handleOptionsViewClosed.bind(this, 'add')} showOptions={this.state.addShowOptions} />
+                }
+                {
+                    !this.state.addLinkSettingsVisible ? null :
+                        <AddLinkController onClosed={this.handleOptionsViewClosed.bind(this)} />
+                }
+                {
+                    !this.state.editLinkSettingsVisible ? null :
+                        <EditHyperlink onClosed={this.handleOptionsViewClosed.bind(this)} />
                 }
                 {
                     !this.state.settingsVisible ? null :

apps/documenteditor/mobile/src/view/add/Add.jsx

@@ -14,6 +14,7 @@ import {AddOtherController} from "../../controller/add/AddOther";
 import {PageImageLinkSettings} from "../add/AddImage";
 import {PageAddNumber, PageAddBreak, PageAddSectionBreak, PageAddFootnote} from "../add/AddOther";
 import AddTableContentsController from '../../controller/add/AddTableContents';
+import EditHyperlink from '../../controller/edit/EditHyperlink';
 
 const routes = [
     // Image
@@ -26,6 +27,10 @@ const routes = [
         path: '/add-link/',
         component: AddLinkController,
     },
+    {
+        path: '/edit-link/',
+        component: EditHyperlink
+    },
     {
         path: '/add-image/',
         component: AddImageController
@@ -52,12 +57,11 @@ const routes = [
     }
 ];
 
-const AddLayoutNavbar = ({ tabs, inPopover, showPanels }) => {
+const AddLayoutNavbar = ({ tabs, inPopover }) => {
     const isAndroid = Device.android;
     const { t } = useTranslation();
     const _t = t('Add', {returnObjects: true});
     return (
-        // (!showPanels || showPanels !== 'link') ?
         <Navbar>
             {tabs.length > 1 ?
                 <div className='tab-buttons tabbar'>
@@ -71,7 +75,6 @@ const AddLayoutNavbar = ({ tabs, inPopover, showPanels }) => {
             }
             {!inPopover && <NavRight><Link icon='icon-expand-down' popupClose=".add-popup"></Link></NavRight>}
         </Navbar>
-        // : null
     )
 };
 
@@ -87,7 +90,7 @@ const AddLayoutContent = ({ tabs, onGetTableStylesPreviews }) => {
     )
 };
 
-const AddTabs = inject("storeFocusObjects", "storeTableSettings")(observer(({storeFocusObjects,storeTableSettings, showPanels, style, inPopover, onOptionClick}) => {
+const AddTabs = inject("storeFocusObjects", "storeTableSettings")(observer(({storeFocusObjects,storeTableSettings, showPanels, style, inPopover, onCloseLinkSettings}) => {
     const { t } = useTranslation();
     const _t = t('Add', {returnObjects: true});
     const api = Common.EditorApi.get();
@@ -165,6 +168,7 @@ const AddTabs = inject("storeFocusObjects", "storeTableSettings")(observer(({sto
     //         });
     //     }
     // }
+
     if(!showPanels) {
         tabs.push({
             caption: _t.textOther,
@@ -180,17 +184,19 @@ const AddTabs = inject("storeFocusObjects", "storeTableSettings")(observer(({sto
                     richEditLock={richEditLock}
                     plainDelLock={plainDelLock}
                     plainEditLock={plainEditLock}     
+                    onCloseLinkSettings={onCloseLinkSettings}
+                    isNavigate={true}
                 />
         });
     }
-    if (showPanels && showPanels === 'link') {
+
-        // onOptionClick('/add-link/');
+    // if (showPanels && showPanels === 'link') {
-        tabs.push({
+    //     tabs.push({
-            caption: t('Add.textLinkSettings'),
+    //         caption: t('Add.textLinkSettings'),
-            id: 'add-link',
+    //         id: 'add-link',
-            component: <AddLinkController noNavbar={true} />
+    //         component: <AddLinkController noNavbar={true} />
-        });
+    //     });
-    }
+    // }
 
     const onGetTableStylesPreviews = () => {
         if(storeTableSettings.arrayStylesDefault.length == 0) {
@@ -202,7 +208,7 @@ const AddTabs = inject("storeFocusObjects", "storeTableSettings")(observer(({sto
     return (
         <View style={style} stackPages={true} routes={routes}>
             <Page pageContent={false}>
-                <AddLayoutNavbar tabs={tabs} showPanels={showPanels} inPopover={inPopover}/>
+                <AddLayoutNavbar tabs={tabs} inPopover={inPopover}/>
                 <AddLayoutContent tabs={tabs} onGetTableStylesPreviews={onGetTableStylesPreviews}/>
             </Page>
         </View>
@@ -223,10 +229,10 @@ class AddView extends Component {
         return (
             show_popover ?
                 <Popover id="add-popover" className="popover__titled" closeByOutsideClick={false} onPopoverClosed={() => this.props.onclosed()}>
-                    <AddTabs inPopover={true} onOptionClick={this.onoptionclick} style={{height: '410px'}} showPanels={this.props.showPanels} />
+                    <AddTabs inPopover={true} style={{height: '410px'}} onCloseLinkSettings={this.props.onCloseLinkSettings} showPanels={this.props.showPanels} />
                 </Popover> :
                 <Popup className="add-popup" onPopupClosed={() => this.props.onclosed()}>
-                    <AddTabs onOptionClick={this.onoptionclick} showPanels={this.props.showPanels} />
+                    <AddTabs onCloseLinkSettings={this.props.onCloseLinkSettings} showPanels={this.props.showPanels} />
                 </Popup>
         )
     }
@@ -249,7 +255,7 @@ const Add = props => {
             props.onclosed();
         }
     };
-    return <AddView usePopover={!Device.phone} onclosed={onviewclosed} showPanels={props.showOptions} />
+    return <AddView usePopover={!Device.phone} onCloseLinkSettings={props.onCloseLinkSettings} onclosed={onviewclosed} showPanels={props.showOptions} />
 };
 
 export default Add;

apps/documenteditor/mobile/src/view/add/AddLink.jsx

@@ -1,5 +1,5 @@
 import React, {useState} from 'react';
-import {List, Page, Navbar, Icon, ListButton, ListInput, NavRight, Link, NavLeft, f7, NavTitle} from 'framework7-react';
+import {List, Page, Navbar, Icon, ListButton, ListInput, NavRight, Link, NavLeft, f7, NavTitle, Fragment} from 'framework7-react';
 import { useTranslation } from 'react-i18next';
 import {Device} from "../../../../../common/mobile/utils/device";
 
@@ -29,17 +29,14 @@ const PageLink = props => {
                 <Navbar>
                     <NavLeft>
                         <Link text={t('Add.textCancel')} onClick={() => {
-                            if(props.noNavbar) {
+                            props.isNavigate ? f7.views.current.router.back() : props.closeModal();
-                                props.closeModal();
+                        }}></Link>
-                            } else {
-                                f7.views.current.router.back();
-                            }}}>
-                        </Link>
                     </NavLeft>
                     <NavTitle>{t('Add.textLinkSettings')}</NavTitle>
                     <NavRight>
                         <Link className={`${stateLink.length < 1 && 'disabled'}`} onClick={() => {
                             props.onInsertLink(stateLink, stateDisplay);
+                            props.isNavigate ? f7.views.current.router.back() : props.closeModal();
                         }} text={t('Add.textDone')}></Link>
                     </NavRight>
                 </Navbar>

apps/documenteditor/mobile/src/view/add/AddOther.jsx

@@ -159,7 +159,8 @@ const AddOther = props => {
 
     let isShape = storeFocusObjects.settings.indexOf('shape') > -1,
         isText = storeFocusObjects.settings.indexOf('text') > -1,
-        isChart = storeFocusObjects.settings.indexOf('chart') > -1;
+        isChart = storeFocusObjects.settings.indexOf('chart') > -1,
+        isHyperLink = storeFocusObjects.settings.indexOf('hyperlink') > -1;
 
     let disabledAddLink = false,
         disabledAddBreak = false,
@@ -190,12 +191,16 @@ const AddOther = props => {
             <ListItem title={_t.textImage} link='/add-image/'>
                 <Icon slot="media" icon="icon-image"></Icon>
             </ListItem>
-            {(isText && !disabledAddLink) && <ListItem title={_t.textLink} link={'/add-link/'} routeProps={{
+            {(isText && !disabledAddLink) && <ListItem title={_t.textLink} href={isHyperLink ? '/edit-link/' : '/add-link/'} routeProps={{
-                onInsertLink: props.onInsertLink,
+                onClosed: props.onCloseLinkSettings,
-                getDisplayLinkText: props.getDisplayLinkText
+                isNavigate: props.isNavigate
             }}>
                 <Icon slot="media" icon="icon-link"></Icon>
             </ListItem>}
+            {/* routeProps={{
+                onInsertLink: props.onInsertLink,
+                getDisplayLinkText: props.getDisplayLinkText
+            }} */}
             {!disabledAddPageNumber &&
                 <ListItem title={_t.textPageNumber} link={'/add-page-number/'} routeProps={{
                     onInsertPageNumber: props.onInsertPageNumber

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

@@ -53,6 +53,13 @@ const routes = [
         path: '/edit-text-highlight-color/',
         component: PageTextHighlightColor,
     },
+
+    // Edit link
+    // {
+    //     path: '/edit-link/',
+    //     component: EditHyperlinkController
+    // },
+
     //Edit paragraph
     {
         path: '/edit-paragraph-adv/',

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

@@ -1,50 +1,75 @@
 import React, {Fragment, useState} from 'react';
 import {observer, inject} from "mobx-react";
-import {List, ListInput, ListButton} from 'framework7-react';
+import {List, ListInput, ListButton, Page, f7, Link, Navbar, NavLeft, NavTitle, NavRight} from 'framework7-react';
 import { useTranslation } from 'react-i18next';
 
 const EditHyperlink = props => {
     const { t } = useTranslation();
     const _t = t('Edit', {returnObjects: true});
     const linkObject = props.storeFocusObjects.linkObject;
-    const link = linkObject.get_Value() ? linkObject.get_Value().replace(new RegExp(" ", 'g'), "%20") : '';
+    let link = '', display = '';
-    const display = !(linkObject.get_Text() === null) ? linkObject.get_Text() : '';
+
-    const tip = linkObject.get_ToolTip();
+    if(linkObject) {
+        link = linkObject.get_Value() ? linkObject.get_Value().replace(new RegExp(" ", 'g'), "%20") : '';
+        display = !(linkObject.get_Text() === null) ? linkObject.get_Text() : '';
+        // const tip = linkObject.get_ToolTip();
+        // const [stateTip, setTip] = useState(tip);
+    }
+
     const [stateLink, setLink] = useState(link);
     const [stateDisplay, setDisplay] = useState(display);
-    const [stateTip, setTip] = useState(tip);
+
     return (
-        <Fragment>
+        <Page>
+            {!props.noNavbar && 
+                <Navbar>
+                    <NavLeft>
+                        <Link text={t('Add.textCancel')} onClick={() => {
+                            props.isNavigate ? f7.views.current.router.back() : props.closeModal();
+                        }}></Link>
+                    </NavLeft>
+                    <NavTitle>{t('Add.textLinkSettings')}</NavTitle>
+                    <NavRight>
+                        <Link className={`${stateLink.length < 1 && 'disabled'}`} onClick={() => {
+                            props.onEditLink(stateLink, stateDisplay);
+                            props.isNavigate ? f7.views.current.router.back() : props.closeModal();
+                        }} text={t('Add.textDone')}></Link>
+                    </NavRight>
+                </Navbar>
+            }
             <List inlineLabels className='inputs-list'>
                 <ListInput
                     label={_t.textLink}
                     type="text"
-                    placeholder={_t.textLink}
+                    placeholder={t('Edit.textRequired')}
                     value={stateLink}
                     onChange={(event) => {setLink(event.target.value)}}
                 ></ListInput>
                 <ListInput
                     label={_t.textDisplay}
                     type="text"
-                    placeholder={_t.textDisplay}
+                    placeholder={t('Edit.textRecommended')}
                     value={stateDisplay}
                     onChange={(event) => {setDisplay(event.target.value)}}
                 ></ListInput>
-                <ListInput
+                {/* <ListInput
                     label={_t.textScreenTip}
                     type="text"
                     placeholder={_t.textScreenTip}
                     value={stateTip}
                     onChange={(event) => {setTip(event.target.value)}}
-                ></ListInput>
+                ></ListInput> */}
             </List>
             <List className="buttons-list">
-                <ListButton className={'button-fill button-raised' + (stateLink.length < 1 ? ' disabled' : '')} title={_t.textEditLink} onClick={() => {
+                {/* <ListButton className={'button-fill button-raised' + (stateLink.length < 1 ? ' disabled' : '')} title={_t.textEditLink} onClick={() => {
-                    props.onEditLink(stateLink, stateDisplay, stateTip)
+                    props.onEditLink(stateLink, stateDisplay)
-                }}></ListButton>
+                }}></ListButton> */}
-                <ListButton title={_t.textRemoveLink} onClick={() => {props.onRemoveLink()}} className='button-red button-fill button-raised'/>
+                <ListButton title={t('Edit.textDeleteLink')} className='button-red button-fill button-raised' onClick={() => {
+                    props.onRemoveLink();
+                    props.isNavigate ? f7.views.current.router.back() : props.closeModal();
+                }} />
             </List>
-        </Fragment>
+        </Page>
     )
 };