[DE PE SSE mobile] Change view adding and editing link

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

@@ -35,6 +35,11 @@ i.icon {
         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>')
     }
+    &.icon-image {
+        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 fill-rule="evenodd" clip-rule="evenodd" d="M9 9.00002C9 10.1046 8.10457 11 7 11C5.89543 11 5 10.1046 5 9.00002C5 7.89545 5.89543 7.00002 7 7.00002C8.10457 7.00002 9 7.89545 9 9.00002ZM8 9.00002C8 9.5523 7.55229 10 7 10C6.44772 10 6 9.5523 6 9.00002C6 8.44773 6.44772 8.00002 7 8.00002C7.55229 8.00002 8 8.44773 8 9.00002Z" fill="black"/><path fill-rule="evenodd" clip-rule="evenodd" d="M2 3.99997C2 9.99996 2.00005 13.9999 2 19.9999C12.4199 20.0008 22 19.9999 22 19.9999C22 19.9999 22 12.6325 22 3.99994C15.3333 4.00047 8.66667 4.00028 2 3.99997ZM21 5H3V16.2929L6.50001 12.7929L8.50001 14.7929L14.5 8.79286L21 15.2929V5ZM3.00001 19L3 17.7071L6.50001 14.2071L8.50001 16.2071L14.5 10.2071L21 16.7071L21 19H3.00001Z" fill="black"/></svg>')
+    }
 
     // Formats 
     

apps/documenteditor/mobile/locale/en.json

@@ -60,7 +60,10 @@
     "txtNotUrl": "This field should be a URL in the format \"http://www.example.com\"",
     "textTableContents": "Table of Contents",
     "textWithPageNumbers": "With Page Numbers",
-    "textWithBlueLinks": "With Blue Links"
+    "textWithBlueLinks": "With Blue Links",
+    "textRequired": "Required",
+    "textRecommended": "Recommended",
+    "textDone": "Done"
   },
   "Common": {
     "Collaboration": {
@@ -183,6 +186,7 @@
     "menuMerge": "Merge",
     "menuMore": "More",
     "menuOpenLink": "Open Link",
+    "menuEditLink": "Edit Link",
     "menuReview": "Review",
     "menuReviewChange": "Review Change",
     "menuSeparateList": "Separate list",

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

@@ -102,14 +102,22 @@ class ContextMenu extends ContextMenuController {
                 Common.Notifications.trigger('viewcomment');
                 break;
             case 'openlink':
+            case 'editlink': 
                 const stack = api.getSelectedElements();
-                let value;
+
-                stack.forEach((item) => {
+                if(action === 'openlink') {
-                    if (item.get_ObjectType() == Asc.c_oAscTypeSelectElement.Hyperlink) {
+                    let value;
-                        value = item.get_ObjectValue().get_Value();
+
-                    }
+                    stack.forEach((item) => {
-                });
+                        if (item.get_ObjectType() == Asc.c_oAscTypeSelectElement.Hyperlink) {
-                value && this.openLink(value);
+                            value = item.get_ObjectValue().get_Value();
+                        }
+                    });
+
+                    value && this.openLink(value);
+                } else {
+                    // console.log('edit link');
+                }
                 break;
             case 'review':
                 setTimeout(() => {
@@ -317,6 +325,10 @@ class ContextMenu extends ContextMenuController {
                     caption: _t.menuOpenLink,
                     event: 'openlink'
                 });
+                itemsText.push({
+                    caption: t('ContextMenu.menuEditLink'),
+                    event: 'editlink'
+                });
             }
 
             if(inToc) {

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

@@ -13,7 +13,7 @@ class AddLinkController extends Component {
 
     closeModal () {
         if ( Device.phone ) {
-            f7.sheet.close('.add-popup', true);
+            f7.popup.close('.add-popup', true);
         } else {
             f7.popover.close('#add-popover');
         }
@@ -56,7 +56,7 @@ class AddLinkController extends Component {
         const props = new Asc.CHyperlinkProperty();
         props.put_Value(_url);
         props.put_Text(!display ? _url : display);
-        props.put_ToolTip(tip);
+        // props.put_ToolTip(tip);
 
         api.add_Hyperlink(props);
 

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

@@ -26,6 +26,10 @@ const routes = [
         path: '/add-link/',
         component: AddLinkController,
     },
+    {
+        path: '/add-image/',
+        component: AddImageController
+    },
     {
         path: '/add-page-number/',
         component: PageAddNumber,
@@ -48,24 +52,26 @@ const routes = [
     }
 ];
 
-const AddLayoutNavbar = ({ tabs, inPopover }) => {
+const AddLayoutNavbar = ({ tabs, inPopover, showPanels }) => {
     const isAndroid = Device.android;
     const { t } = useTranslation();
     const _t = t('Add', {returnObjects: true});
     return (
-        <Navbar>
+        // (!showPanels || showPanels !== 'link') ?
-            {tabs.length > 1 ?
+            <Navbar>
-                <div className='tab-buttons tabbar'>
+                {tabs.length > 1 ?
-                    {tabs.map((item, index) =>
+                    <div className='tab-buttons tabbar'>
-                        <Link key={"de-link-" + item.id} tabLink={"#" + item.id} tabLinkActive={index === 0}>
+                        {tabs.map((item, index) =>
-                            <Icon slot="media" icon={item.icon}></Icon>
+                            <Link key={"de-link-" + item.id} tabLink={"#" + item.id} tabLinkActive={index === 0}>
-                        </Link>)}
+                                <Icon slot="media" icon={item.icon}></Icon>
-                    {isAndroid && <span className='tab-link-highlight' style={{width: 100 / tabs.lenght + '%'}}></span>}
+                            </Link>)}
-                </div> :
+                        {isAndroid && <span className='tab-link-highlight' style={{width: 100 / tabs.lenght + '%'}}></span>}
-                <NavTitle>{ tabs[0].caption }</NavTitle>
+                    </div> :
-            }
+                    <NavTitle>{ tabs[0].caption }</NavTitle>
-            { !inPopover && <NavRight><Link icon='icon-expand-down' popupClose=".add-popup"></Link></NavRight> }
+                }
-        </Navbar>
+                {!inPopover && <NavRight><Link icon='icon-expand-down' popupClose=".add-popup"></Link></NavRight>}
+            </Navbar>
+        // : null
     )
 };
 
@@ -81,7 +87,7 @@ const AddLayoutContent = ({ tabs, onGetTableStylesPreviews }) => {
     )
 };
 
-const AddTabs = inject("storeFocusObjects", "storeTableSettings")(observer(({storeFocusObjects,storeTableSettings, showPanels, style, inPopover}) => {
+const AddTabs = inject("storeFocusObjects", "storeTableSettings")(observer(({storeFocusObjects,storeTableSettings, showPanels, style, inPopover, onOptionClick}) => {
     const { t } = useTranslation();
     const _t = t('Add', {returnObjects: true});
     const api = Common.EditorApi.get();
@@ -147,18 +153,18 @@ const AddTabs = inject("storeFocusObjects", "storeTableSettings")(observer(({sto
             });
         }
     }
-    if(!showPanels) {
+    // if(!showPanels) {
-        needDisable = paragraphLocked || paragraphObj && !canAddImage || controlPlain || richDelLock || plainDelLock || contentLocked;
+    //     needDisable = paragraphLocked || paragraphObj && !canAddImage || controlPlain || richDelLock || plainDelLock || contentLocked;
 
-        if(!needDisable) {
+    //     if(!needDisable) {
-            tabs.push({
+    //         tabs.push({
-                caption: _t.textImage,
+    //             caption: _t.textImage,
-                id: 'add-image',
+    //             id: 'add-image',
-                icon: 'icon-add-image',
+    //             icon: 'icon-add-image',
-                component: <AddImageController/>
+    //             component: <AddImageController/>
-            });
+    //         });
-        }
+    //     }
-    }
+    // }
     if(!showPanels) {
         tabs.push({
             caption: _t.textOther,
@@ -178,10 +184,11 @@ const AddTabs = inject("storeFocusObjects", "storeTableSettings")(observer(({sto
         });
     }
     if (showPanels && showPanels === 'link') {
+        // onOptionClick('/add-link/');
         tabs.push({
-            caption: _t.textAddLink,
+            caption: t('Add.textLinkSettings'),
             id: 'add-link',
-            component: <AddLinkController noNavbar={true}/>
+            component: <AddLinkController noNavbar={true} />
         });
     }
 
@@ -195,7 +202,7 @@ const AddTabs = inject("storeFocusObjects", "storeTableSettings")(observer(({sto
     return (
         <View style={style} stackPages={true} routes={routes}>
             <Page pageContent={false}>
-                <AddLayoutNavbar tabs={tabs} inPopover={inPopover}/>
+                <AddLayoutNavbar tabs={tabs} showPanels={showPanels} inPopover={inPopover}/>
                 <AddLayoutContent tabs={tabs} onGetTableStylesPreviews={onGetTableStylesPreviews}/>
             </Page>
         </View>

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

@@ -33,16 +33,19 @@ const AddImage = props => {
     const { t } = useTranslation();
     const _t = t('Add', {returnObjects: true});
     return (
-        <List>
+        <Page>
-            <ListItem title={_t.textPictureFromLibrary} onClick={() => {props.onInsertByFile()}}>
+            <Navbar title={_t.textInsertImage} backLink={_t.textBack}></Navbar>
-                <Icon slot="media" icon="icon-image-library"></Icon>
+            <List>
-            </ListItem>
+                <ListItem title={_t.textPictureFromLibrary} onClick={() => {props.onInsertByFile()}}>
-            <ListItem title={_t.textPictureFromURL} link={'/add-image-from-url/'} routeProps={{
+                    <Icon slot="media" icon="icon-image-library"></Icon>
-                onInsertByUrl: props.onInsertByUrl
+                </ListItem>
-            }}>
+                <ListItem title={_t.textPictureFromURL} link={'/add-image-from-url/'} routeProps={{
-                <Icon slot="media" icon="icon-link"></Icon>
+                    onInsertByUrl: props.onInsertByUrl
-            </ListItem>
+                }}>
-        </List>
+                    <Icon slot="media" icon="icon-link"></Icon>
+                </ListItem>
+            </List>
+        </Page>
     )
 };
 

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

@@ -1,5 +1,5 @@
 import React, {useState} from 'react';
-import {List, Page, Navbar, Icon, ListButton, ListInput} from 'framework7-react';
+import {List, Page, Navbar, Icon, ListButton, ListInput, NavRight, Link, NavLeft, f7, NavTitle} from 'framework7-react';
 import { useTranslation } from 'react-i18next';
 import {Device} from "../../../../../common/mobile/utils/device";
 
@@ -12,17 +12,43 @@ const PageLink = props => {
 
     const [stateLink, setLink] = useState('');
     const [stateDisplay, setDisplay] = useState(display);
-    const [stateTip, setTip] = useState('');
+    // const [stateTip, setTip] = useState('');
     const [stateAutoUpdate, setAutoUpdate] = useState(!stateDisplay ? true : false);
    
     return (
         <Page>
-            {!props.noNavbar && <Navbar title={_t.textAddLink} backLink={_t.textBack}></Navbar>}
+            {/* {!props.noNavbar && <Navbar title={t('Add.textLinkSettings')} backLink={t('Add.textCancel')}>
+                <NavRight>
+                    <Link className={`${stateLink.length < 1 && 'disabled'}`} onClick={() => {
+                        props.onInsertLink(stateLink, stateDisplay);
+                    }} text={t('Add.textDone')}></Link>
+                </NavRight>
+            </Navbar>} */}
+            {/* backLink={t('Add.textCancel') */}
+            {!props.noNavbar && 
+                <Navbar>
+                    <NavLeft>
+                        <Link text={t('Add.textCancel')} onClick={() => {
+                            if(props.noNavbar) {
+                                props.closeModal();
+                            } 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);
+                        }} text={t('Add.textDone')}></Link>
+                    </NavRight>
+                </Navbar>
+            }
             <List inlineLabels className='inputs-list'>
                 <ListInput
                     label={_t.textLink}
                     type="text"
-                    placeholder={_t.textLink}
+                    placeholder={t('Add.textRequired')}
                     value={stateLink}
                     onChange={(event) => {
                         setLink(event.target.value); 
@@ -32,26 +58,26 @@ const PageLink = props => {
                 <ListInput
                     label={_t.textDisplay}
                     type="text"
-                    placeholder={_t.textDisplay}
+                    placeholder={t('Add.textRecommended')}
                     value={stateDisplay}
                     onChange={(event) => {
                         setDisplay(event.target.value); 
                         setAutoUpdate(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">
+            {/* <List className="buttons-list">
                 <ListButton className={'button-fill button-raised' + (stateLink.length < 1 ? ' disabled' : '')} title={_t.textInsert} onClick={() => {
-                    props.onInsertLink(stateLink, stateDisplay, stateTip)
+                    props.onInsertLink(stateLink, stateDisplay)
                 }}></ListButton>
-            </List>
+            </List> */}
         </Page>
     )
 };

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

@@ -187,6 +187,9 @@ const AddOther = props => {
             }}>
                 <Icon slot="media" icon="icon-insert-comment"></Icon>
             </ListItem>}
+            <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={{
                 onInsertLink: props.onInsertLink,
                 getDisplayLinkText: props.getDisplayLinkText

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

@@ -340,13 +340,13 @@ const EditTabs = props => {
                 component: <EditTableContentsController />
             })
         }
-        if (settings.indexOf('hyperlink') > -1) {
+        // if (settings.indexOf('hyperlink') > -1) {
-            editors.push({
+        //     editors.push({
-                caption: _t.textHyperlink,
+        //         caption: _t.textHyperlink,
-                id: 'edit-link',
+        //         id: 'edit-link',
-                component: <EditHyperlinkController />
+        //         component: <EditHyperlinkController />
-            })
+        //     })
-        }
+        // }
     }
 
     return (

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

@@ -33,7 +33,7 @@ class AddLinkController extends Component {
             WebLink: 1
         };
         const display = linkInfo.display;
-        const tip = linkInfo.tip;
+        // const tip = linkInfo.tip;
         const props = new Asc.CHyperlinkProperty();
         let def_display = '';
 
@@ -60,7 +60,7 @@ class AddLinkController extends Component {
             url = url.replace(new RegExp("%20", 'g'), " ");
 
             props.put_Value(url);
-            props.put_ToolTip(tip);
+            // props.put_ToolTip(tip);
             def_display = url;
         } else {
             let url = "ppaction://hlink";
@@ -88,7 +88,7 @@ class AddLinkController extends Component {
                     break;
             }
             props.put_Value(url);
-            props.put_ToolTip(!tip ? slidetip : tip);
+            // props.put_ToolTip(!tip ? slidetip : tip);
             def_display = slidetip;
         }
 

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

@@ -100,7 +100,7 @@ const PageLink = props => {
     const displayDisabled = display !== false && display === null;
     const [stateDisplay, setDisplay] = useState(display !== false ? ((display !== null) ? display : _t.textDefault) : "");
     const [stateAutoUpdate, setAutoUpdate] = useState(!stateDisplay ? true : false);
-    const [screenTip, setScreenTip] = useState('');
+    // const [screenTip, setScreenTip] = useState('');
 
     return (
         <Page>
@@ -135,20 +135,20 @@ const PageLink = props => {
                                 setAutoUpdate(event.target.value == ''); 
                             }}
                 />
-                <ListInput label={_t.textScreenTip}
+                {/* <ListInput label={_t.textScreenTip}
                            type="text"
                            placeholder={_t.textScreenTip}
                            value={screenTip}
                            onChange={(event) => {setScreenTip(event.target.value)}}
-                />
+                /> */}
             </List>
             <List className="buttons-list">
                 <ListButton title={_t.textInsert}
                             className={`button-fill button-raised ${typeLink === 1 && link.length < 1 && ' disabled'}`}
                             onClick={() => {
                                 props.onInsertLink(typeLink, (typeLink === 1 ?
-                                    {url: link, display: stateDisplay, tip: screenTip, displayDisabled: displayDisabled } :
+                                    {url: link, display: stateDisplay, displayDisabled: displayDisabled } :
-                                    {linkTo: linkTo, numberTo: numberTo, display: stateDisplay, tip: screenTip, displayDisabled: displayDisabled}));
+                                    {linkTo: linkTo, numberTo: numberTo, display: stateDisplay, displayDisabled: displayDisabled}));
                             }}
                 />
             </List>

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

@@ -99,7 +99,7 @@ class AddLinkController extends Component {
             link.asc_setText(args.text == null ? null : !!args.text ? args.text : display);
         }
 
-        link.asc_setTooltip(args.tooltip);
+        // link.asc_setTooltip(args.tooltip);
 
         api.asc_insertHyperlink(link);
 

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

@@ -64,7 +64,7 @@ const AddLinkView = props => {
     
     const [stateDisplayText, setDisplayText] = useState(displayText);
     const [stateAutoUpdate, setAutoUpdate] = useState(!stateDisplayText ? true : false);
-    const [screenTip, setScreenTip] = useState('');
+    // const [screenTip, setScreenTip] = useState('');
 
     const activeSheet = props.activeSheet;
     const [curSheet, setSheet] = useState(activeSheet);
@@ -122,20 +122,20 @@ const AddLinkView = props => {
                             }}
                            className={isIos ? 'list-input-right' : ''}
                 />
-                <ListInput label={_t.textScreenTip}
+                {/* <ListInput label={_t.textScreenTip}
                            type="text"
                            placeholder={_t.textScreenTip}
                            value={screenTip}
                            onChange={(event) => {setScreenTip(event.target.value)}}
                            className={isIos ? 'list-input-right' : ''}
-                />
+                /> */}
             </List>
             <List className="buttons-list">
                 <ListButton title={_t.textInsert}
                             className={`button-fill button-raised${(typeLink === 'ext' && link.length < 1 || typeLink === 'int' && range.length < 1) && ' disabled'}`}
                             onClick={() => {props.onInsertLink(typeLink === 'ext' ?
-                                {type: 'ext', url: link, text: stateDisplayText, tooltip: screenTip} :
+                                {type: 'ext', url: link, text: stateDisplayText} :
-                                {type: 'int', url: range, sheet: curSheet.caption, text: stateDisplayText, tooltip: screenTip})}}
+                                {type: 'int', url: range, sheet: curSheet.caption, text: stateDisplayText})}}
                 />
             </List>
         </Fragment>