From 838eac4b8cdec57b4a0a57f3454edeeffdbdf797 Mon Sep 17 00:00:00 2001 From: SergeyEzhin Date: Tue, 31 May 2022 01:11:25 +0400 Subject: [PATCH 1/3] [DE PE SSE mobile] Change view adding and editing link --- apps/common/mobile/resources/less/icons.less | 5 ++ apps/documenteditor/mobile/locale/en.json | 6 +- .../mobile/src/controller/ContextMenu.jsx | 26 ++++++-- .../mobile/src/controller/add/AddLink.jsx | 4 +- .../mobile/src/view/add/Add.jsx | 65 ++++++++++--------- .../mobile/src/view/add/AddImage.jsx | 23 ++++--- .../mobile/src/view/add/AddLink.jsx | 46 ++++++++++--- .../mobile/src/view/add/AddOther.jsx | 3 + .../mobile/src/view/edit/Edit.jsx | 14 ++-- .../mobile/src/controller/add/AddLink.jsx | 6 +- .../mobile/src/view/add/AddLink.jsx | 10 +-- .../mobile/src/controller/add/AddLink.jsx | 2 +- .../mobile/src/view/add/AddLink.jsx | 10 +-- 13 files changed, 140 insertions(+), 80 deletions(-) diff --git a/apps/common/mobile/resources/less/icons.less b/apps/common/mobile/resources/less/icons.less index 1521fdcca..3ef58ee33 100644 --- a/apps/common/mobile/resources/less/icons.less +++ b/apps/common/mobile/resources/less/icons.less @@ -35,6 +35,11 @@ i.icon { height: 24px; .encoded-svg-background('') } + &.icon-image { + width: 24px; + height: 24px; + .encoded-svg-mask('') + } // Formats diff --git a/apps/documenteditor/mobile/locale/en.json b/apps/documenteditor/mobile/locale/en.json index 964d969d6..3b4dc68f8 100644 --- a/apps/documenteditor/mobile/locale/en.json +++ b/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", diff --git a/apps/documenteditor/mobile/src/controller/ContextMenu.jsx b/apps/documenteditor/mobile/src/controller/ContextMenu.jsx index e92ef2281..40282f522 100644 --- a/apps/documenteditor/mobile/src/controller/ContextMenu.jsx +++ b/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 (item.get_ObjectType() == Asc.c_oAscTypeSelectElement.Hyperlink) { - value = item.get_ObjectValue().get_Value(); - } - }); - value && this.openLink(value); + + if(action === 'openlink') { + let value; + + stack.forEach((item) => { + if (item.get_ObjectType() == Asc.c_oAscTypeSelectElement.Hyperlink) { + 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) { diff --git a/apps/documenteditor/mobile/src/controller/add/AddLink.jsx b/apps/documenteditor/mobile/src/controller/add/AddLink.jsx index ba1b1f882..0b96a53c1 100644 --- a/apps/documenteditor/mobile/src/controller/add/AddLink.jsx +++ b/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); diff --git a/apps/documenteditor/mobile/src/view/add/Add.jsx b/apps/documenteditor/mobile/src/view/add/Add.jsx index 7eaf1e329..33685aee8 100644 --- a/apps/documenteditor/mobile/src/view/add/Add.jsx +++ b/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 ( - - {tabs.length > 1 ? -
- {tabs.map((item, index) => - - - )} - {isAndroid && } -
: - { tabs[0].caption } - } - { !inPopover && } - + // (!showPanels || showPanels !== 'link') ? + + {tabs.length > 1 ? +
+ {tabs.map((item, index) => + + + )} + {isAndroid && } +
: + { tabs[0].caption } + } + {!inPopover && } + + // : 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) { - needDisable = paragraphLocked || paragraphObj && !canAddImage || controlPlain || richDelLock || plainDelLock || contentLocked; + // if(!showPanels) { + // needDisable = paragraphLocked || paragraphObj && !canAddImage || controlPlain || richDelLock || plainDelLock || contentLocked; - if(!needDisable) { - tabs.push({ - caption: _t.textImage, - id: 'add-image', - icon: 'icon-add-image', - component: - }); - } - } + // if(!needDisable) { + // tabs.push({ + // caption: _t.textImage, + // id: 'add-image', + // icon: 'icon-add-image', + // component: + // }); + // } + // } 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: + component: }); } @@ -195,7 +202,7 @@ const AddTabs = inject("storeFocusObjects", "storeTableSettings")(observer(({sto return ( - + diff --git a/apps/documenteditor/mobile/src/view/add/AddImage.jsx b/apps/documenteditor/mobile/src/view/add/AddImage.jsx index 9ae7d37fb..dfc0ee4b6 100644 --- a/apps/documenteditor/mobile/src/view/add/AddImage.jsx +++ b/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 ( - - {props.onInsertByFile()}}> - - - - - - + + + + {props.onInsertByFile()}}> + + + + + + + ) }; diff --git a/apps/documenteditor/mobile/src/view/add/AddLink.jsx b/apps/documenteditor/mobile/src/view/add/AddLink.jsx index f2bc4712b..ef3d31548 100644 --- a/apps/documenteditor/mobile/src/view/add/AddLink.jsx +++ b/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 ( - {!props.noNavbar && } + {/* {!props.noNavbar && + + { + props.onInsertLink(stateLink, stateDisplay); + }} text={t('Add.textDone')}> + + } */} + {/* backLink={t('Add.textCancel') */} + {!props.noNavbar && + + + { + if(props.noNavbar) { + props.closeModal(); + } else { + f7.views.current.router.back(); + }}}> + + + {t('Add.textLinkSettings')} + + { + props.onInsertLink(stateLink, stateDisplay); + }} text={t('Add.textDone')}> + + + } { setLink(event.target.value); @@ -32,26 +58,26 @@ const PageLink = props => { { setDisplay(event.target.value); setAutoUpdate(event.target.value == ''); }} > - {setTip(event.target.value)}} - > + > */} - + {/* { - props.onInsertLink(stateLink, stateDisplay, stateTip) + props.onInsertLink(stateLink, stateDisplay) }}> - + */} ) }; diff --git a/apps/documenteditor/mobile/src/view/add/AddOther.jsx b/apps/documenteditor/mobile/src/view/add/AddOther.jsx index 1f48b8685..0e62f1510 100644 --- a/apps/documenteditor/mobile/src/view/add/AddOther.jsx +++ b/apps/documenteditor/mobile/src/view/add/AddOther.jsx @@ -187,6 +187,9 @@ const AddOther = props => { }}> } + + + {(isText && !disabledAddLink) && { component: }) } - if (settings.indexOf('hyperlink') > -1) { - editors.push({ - caption: _t.textHyperlink, - id: 'edit-link', - component: - }) - } + // if (settings.indexOf('hyperlink') > -1) { + // editors.push({ + // caption: _t.textHyperlink, + // id: 'edit-link', + // component: + // }) + // } } return ( diff --git a/apps/presentationeditor/mobile/src/controller/add/AddLink.jsx b/apps/presentationeditor/mobile/src/controller/add/AddLink.jsx index 554ebc187..78d4d314d 100644 --- a/apps/presentationeditor/mobile/src/controller/add/AddLink.jsx +++ b/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; } diff --git a/apps/presentationeditor/mobile/src/view/add/AddLink.jsx b/apps/presentationeditor/mobile/src/view/add/AddLink.jsx index d00f01ace..2726cf04c 100644 --- a/apps/presentationeditor/mobile/src/view/add/AddLink.jsx +++ b/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 ( @@ -135,20 +135,20 @@ const PageLink = props => { setAutoUpdate(event.target.value == ''); }} /> - {setScreenTip(event.target.value)}} - /> + /> */} { props.onInsertLink(typeLink, (typeLink === 1 ? - {url: link, display: stateDisplay, tip: screenTip, displayDisabled: displayDisabled } : - {linkTo: linkTo, numberTo: numberTo, display: stateDisplay, tip: screenTip, displayDisabled: displayDisabled})); + {url: link, display: stateDisplay, displayDisabled: displayDisabled } : + {linkTo: linkTo, numberTo: numberTo, display: stateDisplay, displayDisabled: displayDisabled})); }} /> diff --git a/apps/spreadsheeteditor/mobile/src/controller/add/AddLink.jsx b/apps/spreadsheeteditor/mobile/src/controller/add/AddLink.jsx index ebb52d369..73f33865f 100644 --- a/apps/spreadsheeteditor/mobile/src/controller/add/AddLink.jsx +++ b/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); diff --git a/apps/spreadsheeteditor/mobile/src/view/add/AddLink.jsx b/apps/spreadsheeteditor/mobile/src/view/add/AddLink.jsx index 271866175..164a6e63c 100644 --- a/apps/spreadsheeteditor/mobile/src/view/add/AddLink.jsx +++ b/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' : ''} /> - {setScreenTip(event.target.value)}} className={isIos ? 'list-input-right' : ''} - /> + /> */} {props.onInsertLink(typeLink === 'ext' ? - {type: 'ext', url: link, text: stateDisplayText, tooltip: screenTip} : - {type: 'int', url: range, sheet: curSheet.caption, text: stateDisplayText, tooltip: screenTip})}} + {type: 'ext', url: link, text: stateDisplayText} : + {type: 'int', url: range, sheet: curSheet.caption, text: stateDisplayText})}} /> From 4d8fde7ea1981a8d681027f1732a4675836ca5fa Mon Sep 17 00:00:00 2001 From: SergeyEzhin Date: Wed, 1 Jun 2022 23:24:13 +0400 Subject: [PATCH 2/3] [DE mobile] Changed adding and editing link --- apps/documenteditor/mobile/locale/en.json | 7 +- .../mobile/src/controller/add/AddLink.jsx | 32 +++++++-- .../mobile/src/controller/add/AddOther.jsx | 4 +- .../src/controller/edit/EditHyperlink.jsx | 57 ++++++++++++---- apps/documenteditor/mobile/src/page/main.jsx | 28 +++++++- .../mobile/src/view/add/Add.jsx | 66 ++++++++++--------- .../mobile/src/view/add/AddLink.jsx | 11 ++-- .../mobile/src/view/add/AddOther.jsx | 13 ++-- .../mobile/src/view/edit/Edit.jsx | 7 ++ .../mobile/src/view/edit/EditHyperlink.jsx | 55 +++++++++++----- 10 files changed, 202 insertions(+), 78 deletions(-) diff --git a/apps/documenteditor/mobile/locale/en.json b/apps/documenteditor/mobile/locale/en.json index 3b4dc68f8..44cc0f610 100644 --- a/apps/documenteditor/mobile/locale/en.json +++ b/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.", diff --git a/apps/documenteditor/mobile/src/controller/add/AddLink.jsx b/apps/documenteditor/mobile/src/controller/add/AddLink.jsx index 0b96a53c1..eb32c89f4 100644 --- a/apps/documenteditor/mobile/src/controller/add/AddLink.jsx +++ b/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 ( - + !this.props.isNavigate ? + Device.phone ? + this.props.onClosed('add-link')}> + + + : + this.props.onClosed('add-link')}> + + + : + ) } } diff --git a/apps/documenteditor/mobile/src/controller/add/AddOther.jsx b/apps/documenteditor/mobile/src/controller/add/AddOther.jsx index e4de3e84f..84a264095 100644 --- a/apps/documenteditor/mobile/src/controller/add/AddOther.jsx +++ b/apps/documenteditor/mobile/src/controller/add/AddOther.jsx @@ -260,7 +260,9 @@ class AddOtherController extends Component { richDelLock={this.props.richDelLock} richEditLock={this.props.richEditLock} plainDelLock={this.props.plainDelLock} - plainEditLock={this.props.plainEditLock} + plainEditLock={this.props.plainEditLock} + onCloseLinkSettings={this.props.onCloseLinkSettings} + isNavigate={this.props.isNavigate} /> ) } diff --git a/apps/documenteditor/mobile/src/controller/edit/EditHyperlink.jsx b/apps/documenteditor/mobile/src/controller/edit/EditHyperlink.jsx index 39e0a7ad3..892f69675 100644 --- a/apps/documenteditor/mobile/src/controller/edit/EditHyperlink.jsx +++ b/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,16 +66,49 @@ 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 ( - - ) + !this.props.isNavigate ? + Device.phone ? + this.props.onClosed('edit-link')}> + + + : + this.props.onClosed('edit-link')}> + + + : + + ) } } diff --git a/apps/documenteditor/mobile/src/page/main.jsx b/apps/documenteditor/mobile/src/page/main.jsx index f8867cd70..20d26a8e8 100644 --- a/apps/documenteditor/mobile/src/page/main.jsx +++ b/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 : - + + } + { + !this.state.addLinkSettingsVisible ? null : + + } + { + !this.state.editLinkSettingsVisible ? null : + } { !this.state.settingsVisible ? null : diff --git a/apps/documenteditor/mobile/src/view/add/Add.jsx b/apps/documenteditor/mobile/src/view/add/Add.jsx index 33685aee8..1b6fa8c0b 100644 --- a/apps/documenteditor/mobile/src/view/add/Add.jsx +++ b/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,26 +57,24 @@ 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') ? - - {tabs.length > 1 ? -
- {tabs.map((item, index) => - - - )} - {isAndroid && } -
: - { tabs[0].caption } - } - {!inPopover && } - - // : null + + {tabs.length > 1 ? +
+ {tabs.map((item, index) => + + + )} + {isAndroid && } +
: + { tabs[0].caption } + } + {!inPopover && } + ) }; @@ -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, @@ -179,18 +183,20 @@ const AddTabs = inject("storeFocusObjects", "storeTableSettings")(observer(({sto richDelLock={richDelLock} richEditLock={richEditLock} plainDelLock={plainDelLock} - plainEditLock={plainEditLock} + plainEditLock={plainEditLock} + onCloseLinkSettings={onCloseLinkSettings} + isNavigate={true} /> }); } - if (showPanels && showPanels === 'link') { - // onOptionClick('/add-link/'); - tabs.push({ - caption: t('Add.textLinkSettings'), - id: 'add-link', - component: - }); - } + + // if (showPanels && showPanels === 'link') { + // tabs.push({ + // caption: t('Add.textLinkSettings'), + // id: 'add-link', + // component: + // }); + // } const onGetTableStylesPreviews = () => { if(storeTableSettings.arrayStylesDefault.length == 0) { @@ -202,7 +208,7 @@ const AddTabs = inject("storeFocusObjects", "storeTableSettings")(observer(({sto return ( - + @@ -223,10 +229,10 @@ class AddView extends Component { return ( show_popover ? this.props.onclosed()}> - + : this.props.onclosed()}> - + ) } @@ -249,7 +255,7 @@ const Add = props => { props.onclosed(); } }; - return + return }; export default Add; \ No newline at end of file diff --git a/apps/documenteditor/mobile/src/view/add/AddLink.jsx b/apps/documenteditor/mobile/src/view/add/AddLink.jsx index ef3d31548..ab5d39d80 100644 --- a/apps/documenteditor/mobile/src/view/add/AddLink.jsx +++ b/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 => { { - if(props.noNavbar) { - props.closeModal(); - } else { - f7.views.current.router.back(); - }}}> - + props.isNavigate ? f7.views.current.router.back() : props.closeModal(); + }}> {t('Add.textLinkSettings')} { props.onInsertLink(stateLink, stateDisplay); + props.isNavigate ? f7.views.current.router.back() : props.closeModal(); }} text={t('Add.textDone')}> diff --git a/apps/documenteditor/mobile/src/view/add/AddOther.jsx b/apps/documenteditor/mobile/src/view/add/AddOther.jsx index 0e62f1510..a09f16b35 100644 --- a/apps/documenteditor/mobile/src/view/add/AddOther.jsx +++ b/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 => { - {(isText && !disabledAddLink) && } + {/* routeProps={{ + onInsertLink: props.onInsertLink, + getDisplayLinkText: props.getDisplayLinkText + }} */} {!disabledAddPageNumber && { 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") : ''; - const display = !(linkObject.get_Text() === null) ? linkObject.get_Text() : ''; - const tip = linkObject.get_ToolTip(); + let link = '', display = ''; + + 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 ( - + + {!props.noNavbar && + + + { + props.isNavigate ? f7.views.current.router.back() : props.closeModal(); + }}> + + {t('Add.textLinkSettings')} + + { + props.onEditLink(stateLink, stateDisplay); + props.isNavigate ? f7.views.current.router.back() : props.closeModal(); + }} text={t('Add.textDone')}> + + + } {setLink(event.target.value)}} > {setDisplay(event.target.value)}} > - {setTip(event.target.value)}} - > + > */} - { - props.onEditLink(stateLink, stateDisplay, stateTip) - }}> - {props.onRemoveLink()}} className='button-red button-fill button-raised'/> + {/* { + props.onEditLink(stateLink, stateDisplay) + }}> */} + { + props.onRemoveLink(); + props.isNavigate ? f7.views.current.router.back() : props.closeModal(); + }} /> - + ) }; From 454878d3d73ed81bea1a21c9712ad65732ce5021 Mon Sep 17 00:00:00 2001 From: SergeyEzhin Date: Tue, 7 Jun 2022 00:53:07 +0400 Subject: [PATCH 3/3] [DE PE SSE mobile] Changed adding and editing link --- .../resources/less/common-material.less | 11 +++ .../mobile/resources/less/material/icons.less | 15 +++ .../mobile/src/controller/ContextMenu.jsx | 20 ++-- .../mobile/src/controller/add/AddLink.jsx | 16 +-- .../src/controller/edit/EditHyperlink.jsx | 37 ++++--- apps/documenteditor/mobile/src/page/main.jsx | 2 +- .../mobile/src/view/add/Add.jsx | 1 - .../mobile/src/view/add/AddLink.jsx | 43 ++++---- .../mobile/src/view/add/AddOther.jsx | 6 +- .../mobile/src/view/edit/EditHyperlink.jsx | 46 ++++----- apps/presentationeditor/mobile/locale/en.json | 16 ++- .../mobile/src/controller/add/AddLink.jsx | 62 +++++++++--- .../mobile/src/controller/add/AddOther.jsx | 2 + .../mobile/src/controller/edit/EditLink.jsx | 99 +++++++++++++++---- .../mobile/src/page/main.jsx | 27 ++++- .../mobile/src/view/add/Add.jsx | 62 ++++++++---- .../mobile/src/view/add/AddImage.jsx | 23 +++-- .../mobile/src/view/add/AddLink.jsx | 94 ++++++++++++------ .../mobile/src/view/add/AddOther.jsx | 10 +- .../mobile/src/view/edit/Edit.jsx | 10 +- .../mobile/src/view/edit/EditLink.jsx | 69 +++++++------ apps/spreadsheeteditor/mobile/locale/en.json | 13 ++- .../mobile/src/controller/ContextMenu.jsx | 4 + .../mobile/src/controller/add/AddLink.jsx | 80 ++++++++++++--- .../mobile/src/controller/add/AddOther.jsx | 9 +- .../mobile/src/controller/edit/EditLink.jsx | 82 ++++++++++++--- .../mobile/src/page/main.jsx | 26 ++++- .../mobile/src/view/add/Add.jsx | 56 +++++++---- .../mobile/src/view/add/AddLink.jsx | 76 ++++++++------ .../mobile/src/view/add/AddOther.jsx | 12 ++- .../mobile/src/view/edit/Edit.jsx | 6 +- .../mobile/src/view/edit/EditLink.jsx | 64 +++++++----- 32 files changed, 753 insertions(+), 346 deletions(-) diff --git a/apps/common/mobile/resources/less/common-material.less b/apps/common/mobile/resources/less/common-material.less index f86d8a78e..21708f3ca 100644 --- a/apps/common/mobile/resources/less/common-material.less +++ b/apps/common/mobile/resources/less/common-material.less @@ -523,4 +523,15 @@ margin-right: 0; } } + + // Navbar link settings + + .navbar-link-settings { + .navbar-inner { + background: @background-primary; + } + .title, a { + color: @text-normal; + } + } } diff --git a/apps/common/mobile/resources/less/material/icons.less b/apps/common/mobile/resources/less/material/icons.less index d047cf12d..df8e84146 100644 --- a/apps/common/mobile/resources/less/material/icons.less +++ b/apps/common/mobile/resources/less/material/icons.less @@ -39,6 +39,21 @@ height: 22px; .encoded-svg-mask('', @toolbar-icons); } + &.icon-close { + width: 24px; + height: 24px; + .encoded-svg-mask('', @text-normal); + } + &.icon-done-disabled { + width: 24px; + height: 24px; + .encoded-svg-mask('', @text-tertiary); + } + &.icon-done { + width: 24px; + height: 24px; + .encoded-svg-mask(''); + } } } } diff --git a/apps/documenteditor/mobile/src/controller/ContextMenu.jsx b/apps/documenteditor/mobile/src/controller/ContextMenu.jsx index 40282f522..52b4f2dfb 100644 --- a/apps/documenteditor/mobile/src/controller/ContextMenu.jsx +++ b/apps/documenteditor/mobile/src/controller/ContextMenu.jsx @@ -102,22 +102,16 @@ class ContextMenu extends ContextMenuController { Common.Notifications.trigger('viewcomment'); break; case 'openlink': - case 'editlink': const stack = api.getSelectedElements(); + let value; - if(action === 'openlink') { - let value; + stack.forEach((item) => { + if (item.get_ObjectType() == Asc.c_oAscTypeSelectElement.Hyperlink) { + value = item.get_ObjectValue().get_Value(); + } + }); - stack.forEach((item) => { - if (item.get_ObjectType() == Asc.c_oAscTypeSelectElement.Hyperlink) { - value = item.get_ObjectValue().get_Value(); - } - }); - - value && this.openLink(value); - } else { - // console.log('edit link'); - } + value && this.openLink(value); break; case 'review': setTimeout(() => { diff --git a/apps/documenteditor/mobile/src/controller/add/AddLink.jsx b/apps/documenteditor/mobile/src/controller/add/AddLink.jsx index eb32c89f4..c49f86223 100644 --- a/apps/documenteditor/mobile/src/controller/add/AddLink.jsx +++ b/apps/documenteditor/mobile/src/controller/add/AddLink.jsx @@ -1,5 +1,5 @@ import React, {Component} from 'react'; -import { f7, Popup, Popover } from 'framework7-react'; +import { f7, Popup, Popover, View } from 'framework7-react'; import {Device} from '../../../../../common/mobile/utils/device'; import { withTranslation} from 'react-i18next'; @@ -28,10 +28,8 @@ class AddLinkController extends Component { onInsertLink (url, display, tip) { const api = Common.EditorApi.get(); - const { t } = this.props; const _t = t("Add", { returnObjects: true }); - const urltype = api.asc_getUrlType(url.trim()); const isEmail = (urltype == 2); @@ -56,13 +54,13 @@ class AddLinkController extends Component { _url = _url.replace(new RegExp("%20",'g')," "); 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); - - // this.closeModal(); + this.props.isNavigate ? f7.views.current.router.back() : this.closeModal(); } componentDidMount() { @@ -83,8 +81,10 @@ class AddLinkController extends Component { : - this.props.onClosed('add-link')}> - + this.props.onClosed('add-link')}> + + + : diff --git a/apps/documenteditor/mobile/src/controller/edit/EditHyperlink.jsx b/apps/documenteditor/mobile/src/controller/edit/EditHyperlink.jsx index 892f69675..fe2b2c8d4 100644 --- a/apps/documenteditor/mobile/src/controller/edit/EditHyperlink.jsx +++ b/apps/documenteditor/mobile/src/controller/edit/EditHyperlink.jsx @@ -1,5 +1,5 @@ import React, {Component} from 'react'; -import { f7, Popover, Popup } from 'framework7-react'; +import { f7, Popover, Popup, View } from 'framework7-react'; import {Device} from '../../../../../common/mobile/utils/device'; import {observer, inject} from "mobx-react"; import { withTranslation } from 'react-i18next'; @@ -23,11 +23,13 @@ class EditHyperlinkController extends Component { } } - onEditLink (link, display) { + onEditLink (link, display, tip) { const api = Common.EditorApi.get(); + if (api) { const urltype = api.asc_getUrlType(link.trim()); const isEmail = (urltype == 2); + if (urltype < 1) { const { t } = this.props; @@ -43,21 +45,29 @@ class EditHyperlinkController extends Component { return; } + let url = link.replace(/^\s+|\s+$/g,''); + if (! /(((^https?)|(^ftp)):\/\/)|(^mailto:)/i.test(url) ) { url = (isEmail ? 'mailto:' : 'http://') + url; } + url = url.replace(new RegExp("%20",'g')," "); + 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.props.isNavigate ? f7.views.current.router.back() : this.closeModal(); } } @@ -66,7 +76,6 @@ class EditHyperlinkController extends Component { if (api) { const linkObject = this.props.storeFocusObjects.linkObject; api.remove_Hyperlink(linkObject); - // this.closeModal(); } } @@ -75,7 +84,7 @@ class EditHyperlinkController extends Component { if(Device.phone) { f7.popup.open('#edit-link-popup', true); } else { - f7.popover.open('#edit-link-popover', '#btn-edit'); + f7.popover.open('#edit-link-popover', '#btn-add'); } } } @@ -93,13 +102,15 @@ class EditHyperlinkController extends Component { /> : - this.props.onClosed('edit-link')}> - + this.props.onClosed('edit-link')}> + + + : + } { !this.state.addLinkSettingsVisible ? null : diff --git a/apps/documenteditor/mobile/src/view/add/Add.jsx b/apps/documenteditor/mobile/src/view/add/Add.jsx index 1b6fa8c0b..571133574 100644 --- a/apps/documenteditor/mobile/src/view/add/Add.jsx +++ b/apps/documenteditor/mobile/src/view/add/Add.jsx @@ -185,7 +185,6 @@ const AddTabs = inject("storeFocusObjects", "storeTableSettings")(observer(({sto plainDelLock={plainDelLock} plainEditLock={plainEditLock} onCloseLinkSettings={onCloseLinkSettings} - isNavigate={true} /> }); } diff --git a/apps/documenteditor/mobile/src/view/add/AddLink.jsx b/apps/documenteditor/mobile/src/view/add/AddLink.jsx index ab5d39d80..8fbba82ef 100644 --- a/apps/documenteditor/mobile/src/view/add/AddLink.jsx +++ b/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, Fragment} 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,35 +12,28 @@ 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 ( - {/* {!props.noNavbar && + + + { + props.isNavigate ? f7.views.current.router.back() : props.closeModal(); + }}> + {Device.android && } + + + {t('Add.textLinkSettings')} { - props.onInsertLink(stateLink, stateDisplay); - }} text={t('Add.textDone')}> + props.onInsertLink(stateLink, stateDisplay, stateTip); + }} text={Device.ios ? t('Add.textDone') : ''}> + {Device.android && } + - } */} - {/* backLink={t('Add.textCancel') */} - {!props.noNavbar && - - - { - props.isNavigate ? f7.views.current.router.back() : props.closeModal(); - }}> - - {t('Add.textLinkSettings')} - - { - props.onInsertLink(stateLink, stateDisplay); - props.isNavigate ? f7.views.current.router.back() : props.closeModal(); - }} text={t('Add.textDone')}> - - - } + { setAutoUpdate(event.target.value == ''); }} > - {/* {setTip(event.target.value)}} - > */} + > {/* { diff --git a/apps/documenteditor/mobile/src/view/add/AddOther.jsx b/apps/documenteditor/mobile/src/view/add/AddOther.jsx index a09f16b35..a429aea9f 100644 --- a/apps/documenteditor/mobile/src/view/add/AddOther.jsx +++ b/apps/documenteditor/mobile/src/view/add/AddOther.jsx @@ -193,14 +193,10 @@ const AddOther = props => { {(isText && !disabledAddLink) && } - {/* routeProps={{ - onInsertLink: props.onInsertLink, - getDisplayLinkText: props.getDisplayLinkText - }} */} {!disabledAddPageNumber && { const { t } = useTranslation(); const _t = t('Edit', {returnObjects: true}); const linkObject = props.storeFocusObjects.linkObject; - let link = '', display = ''; + let link = '', display = '', tip = ''; 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); + tip = linkObject.get_ToolTip(); } const [stateLink, setLink] = useState(link); const [stateDisplay, setDisplay] = useState(display); + const [stateTip, setTip] = useState(tip); return ( - {!props.noNavbar && - - - { - props.isNavigate ? f7.views.current.router.back() : props.closeModal(); - }}> - - {t('Add.textLinkSettings')} - - { - props.onEditLink(stateLink, stateDisplay); - props.isNavigate ? f7.views.current.router.back() : props.closeModal(); - }} text={t('Add.textDone')}> - - - } + + + { + props.isNavigate ? f7.views.current.router.back() : props.closeModal(); + }}> + {Device.android && } + + + {t('Add.textLinkSettings')} + + { + props.onEditLink(stateLink, stateDisplay, stateTip); + }} text={Device.ios ? t('Add.textDone') : ''}> + {Device.android && } + + + { value={stateDisplay} onChange={(event) => {setDisplay(event.target.value)}} > - {/* {setTip(event.target.value)}} - > */} + > {/* { diff --git a/apps/presentationeditor/mobile/locale/en.json b/apps/presentationeditor/mobile/locale/en.json index 6d6459902..557939129 100644 --- a/apps/presentationeditor/mobile/locale/en.json +++ b/apps/presentationeditor/mobile/locale/en.json @@ -58,7 +58,8 @@ "textColumns": "Columns", "textCopyCutPasteActions": "Copy, Cut and Paste Actions", "textDoNotShowAgain": "Don't show again", - "textRows": "Rows" + "textRows": "Rows", + "menuEditLink": "Edit Link" }, "Controller": { "Main": { @@ -242,7 +243,10 @@ "textSlideNumber": "Slide Number", "textTable": "Table", "textTableSize": "Table Size", - "txtNotUrl": "This field should be a URL in the format \"http://www.example.com\"" + "txtNotUrl": "This field should be a URL in the format \"http://www.example.com\"", + "textDone": "Done", + "textRequired": "Required", + "textRecommended": "Recommended" }, "Edit": { "notcriticalErrorTitle": "Warning", @@ -349,7 +353,8 @@ "textPush": "Push", "textRemoveChart": "Remove Chart", "textRemoveImage": "Remove Image", - "textRemoveLink": "Remove Link", + "del_textRemoveLink": "Remove Link", + "textDeleteLink": "Delete Link", "textRemoveShape": "Remove Shape", "textRemoveTable": "Remove Table", "textReorder": "Reorder", @@ -393,7 +398,10 @@ "textZoom": "Zoom", "textZoomIn": "Zoom In", "textZoomOut": "Zoom Out", - "textZoomRotate": "Zoom and Rotate" + "textZoomRotate": "Zoom and Rotate", + "textCancel": "Cancel", + "textRequired": "Required", + "textRecommended": "Recommended" }, "Settings": { "mniSlideStandard": "Standard (4:3)", diff --git a/apps/presentationeditor/mobile/src/controller/add/AddLink.jsx b/apps/presentationeditor/mobile/src/controller/add/AddLink.jsx index 78d4d314d..6060854bb 100644 --- a/apps/presentationeditor/mobile/src/controller/add/AddLink.jsx +++ b/apps/presentationeditor/mobile/src/controller/add/AddLink.jsx @@ -1,9 +1,20 @@ import React, {Component} from 'react'; -import { f7 } from 'framework7-react'; +import { f7, Popup, Popover, View } from 'framework7-react'; import {Device} from '../../../../../common/mobile/utils/device'; import { withTranslation} from 'react-i18next'; -import {PageLink} from '../../view/add/AddLink'; +import {PageLink, PageTypeLink, PageLinkTo} from '../../view/add/AddLink'; + +const routes = [ + { + path: '/add-link-type/', + component: PageTypeLink + }, + { + path: '/add-link-to/', + component: PageLinkTo + } +]; class AddLinkController extends Component { constructor (props) { @@ -17,9 +28,9 @@ class AddLinkController extends Component { closeModal () { if ( Device.phone ) { - f7.sheet.close('.add-popup', true); + f7.popup.close('#add-link-popup'); } else { - f7.popover.close('#add-popover'); + f7.popover.close('#add-link-popover'); } } @@ -33,14 +44,16 @@ 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 = ''; if (type == c_oHyperlinkType.WebLink) { let url = linkInfo.url; const urltype = api.asc_getUrlType(url.trim()); const isEmail = (urltype == 2); + if (urltype < 1) { f7.dialog.create({ title: _t.notcriticalErrorTitle, @@ -60,11 +73,13 @@ 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"; let slidetip = ''; + switch (linkInfo.linkTo) { case 0: url = url + "showjump?jump=nextslide"; @@ -87,8 +102,9 @@ class AddLinkController extends Component { slidetip = _t.textSlide + ' ' + (linkInfo.numberTo + 1); break; } + props.put_Value(url); - // props.put_ToolTip(!tip ? slidetip : tip); + props.put_ToolTip(!tip ? slidetip : tip); def_display = slidetip; } @@ -98,20 +114,40 @@ class AddLinkController extends Component { props.put_Text(null); api.add_Hyperlink(props); - - this.closeModal(); + this.props.isNavigate ? f7.views.current.router.back() : this.closeModal(); } getTextDisplay () { return this.textDisplay; } + 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 ( - + !this.props.isNavigate ? + Device.phone ? + this.props.onClosed('add-link')}> + + + + + : + this.props.onClosed('add-link')}> + + + + + : + ) } } diff --git a/apps/presentationeditor/mobile/src/controller/add/AddOther.jsx b/apps/presentationeditor/mobile/src/controller/add/AddOther.jsx index e6060381d..43417b77d 100644 --- a/apps/presentationeditor/mobile/src/controller/add/AddOther.jsx +++ b/apps/presentationeditor/mobile/src/controller/add/AddOther.jsx @@ -9,6 +9,7 @@ import {AddOther} from '../../view/add/AddOther'; class AddOtherController extends Component { constructor (props) { super(props); + this.onStyleClick = this.onStyleClick.bind(this); this.onGetTableStylesPreviews = this.onGetTableStylesPreviews.bind(this); } @@ -120,6 +121,7 @@ class AddOtherController extends Component { onStyleClick={this.onStyleClick} hideAddComment={this.hideAddComment} onGetTableStylesPreviews = {this.onGetTableStylesPreviews} + onCloseLinkSettings={this.props.onCloseLinkSettings} /> ) } diff --git a/apps/presentationeditor/mobile/src/controller/edit/EditLink.jsx b/apps/presentationeditor/mobile/src/controller/edit/EditLink.jsx index 037916bd7..2d376677d 100644 --- a/apps/presentationeditor/mobile/src/controller/edit/EditLink.jsx +++ b/apps/presentationeditor/mobile/src/controller/edit/EditLink.jsx @@ -1,10 +1,21 @@ import React, { Component } from 'react'; -import { f7 } from 'framework7-react'; +import { f7, View, Popup, Popover } from 'framework7-react'; import { Device } from '../../../../../common/mobile/utils/device'; import {observer, inject} from "mobx-react"; import { withTranslation } from 'react-i18next'; -import { EditLink } from '../../view/edit/EditLink'; +import { EditLink, PageEditTypeLink, PageEditLinkTo } from '../../view/edit/EditLink'; + +const routes = [ + { + path: '/edit-link-type/', + component: PageEditTypeLink + }, + { + path: '/edit-link-to/', + component: PageEditLinkTo + } +]; class EditLinkController extends Component { constructor (props) { @@ -21,9 +32,9 @@ class EditLinkController extends Component { 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'); } } @@ -156,30 +167,80 @@ class EditLinkController extends Component { props.put_Text(null); api.change_Hyperlink(props); - - this.closeModal(); + this.props.isNavigate ? f7.views.current.router.back() : this.closeModal(); } onRemoveLink() { const api = Common.EditorApi.get(); api.remove_Hyperlink(); - 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-add'); + } + } } render () { return ( - + !this.props.isNavigate ? + Device.phone ? + this.props.onClosed('edit-link')}> + + + + + : + this.props.onClosed('edit-link')}> + + + + + : + ) } } diff --git a/apps/presentationeditor/mobile/src/page/main.jsx b/apps/presentationeditor/mobile/src/page/main.jsx index d1f099a0b..d3012f5c7 100644 --- a/apps/presentationeditor/mobile/src/page/main.jsx +++ b/apps/presentationeditor/mobile/src/page/main.jsx @@ -11,6 +11,8 @@ import { Preview } from "../controller/Preview"; import { Search, SearchSettings } from '../controller/Search'; import ContextMenu from '../controller/ContextMenu'; import { Toolbar } from "../controller/Toolbar"; +import { AddLinkController } from '../controller/add/AddLink'; +import { EditLinkController } from '../controller/edit/EditLink'; class MainPage extends Component { constructor(props) { super(props); @@ -19,7 +21,9 @@ class MainPage extends Component { addOptionsVisible: false, settingsVisible: false, collaborationVisible: false, - previewVisible: false + previewVisible: false, + addLinkSettingsVisible: false, + editLinkSettingsVisible: false }; } @@ -49,6 +53,12 @@ class MainPage extends Component { } else if ( opts === 'preview' ) { this.state.previewVisible && (opened = true); newState.previewVisible = 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) { @@ -82,6 +92,10 @@ class MainPage extends Component { return {collaborationVisible: false} else if ( opts == 'preview' ) return {previewVisible: 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'); @@ -144,7 +158,15 @@ class MainPage extends Component { } { !this.state.addOptionsVisible ? null : - + + } + { + !this.state.addLinkSettingsVisible ? null : + + } + { + !this.state.editLinkSettingsVisible ? null : + } { !this.state.settingsVisible ? null : @@ -155,7 +177,6 @@ class MainPage extends Component { } {appOptions.isDocReady && } - ) diff --git a/apps/presentationeditor/mobile/src/view/add/Add.jsx b/apps/presentationeditor/mobile/src/view/add/Add.jsx index 647d86ea7..0f0f3810c 100644 --- a/apps/presentationeditor/mobile/src/view/add/Add.jsx +++ b/apps/presentationeditor/mobile/src/view/add/Add.jsx @@ -12,7 +12,9 @@ import {PageImageLinkSettings} from "./AddImage"; import {AddOtherController} from "../../controller/add/AddOther"; import {PageAddTable} from "./AddOther"; import {AddLinkController} from "../../controller/add/AddLink"; -import {PageTypeLink, PageLinkTo} from "./AddLink"; +import { PageTypeLink, PageLinkTo } from "./AddLink"; +import { EditLinkController } from '../../controller/edit/EditLink'; +import { PageEditTypeLink, PageEditLinkTo } from '../../view/edit/EditLink'; const routes = [ // Image @@ -20,6 +22,7 @@ const routes = [ path: '/add-image-from-url/', component: PageImageLinkSettings }, + // Other { path: '/add-table/', @@ -36,6 +39,25 @@ const routes = [ { path: '/add-link-to/', component: PageLinkTo + }, + { + path: '/edit-link/', + component: EditLinkController + }, + { + path: '/edit-link-type/', + component: PageEditTypeLink + }, + { + path: '/edit-link-to/', + component: PageEditLinkTo + }, + + // Image + + { + path: '/add-image/', + component: AddImageController } ]; @@ -90,17 +112,19 @@ const AddTabs = props => { icon: 'icon-add-shape', component: }); - tabs.push({ - caption: _t.textImage, - id: 'add-image', - icon: 'icon-add-image', - component: - }); + + // tabs.push({ + // caption: _t.textImage, + // id: 'add-image', + // icon: 'icon-add-image', + // component: + // }); + tabs.push({ caption: _t.textOther, id: 'add-other', icon: 'icon-add-other', - component: + component: }); } if(!showPanels && !countPages) { @@ -111,13 +135,15 @@ const AddTabs = props => { component: }); } - if (showPanels && showPanels === 'link') { - tabs.push({ - caption: _t.textAddLink, - id: 'add-link', - component: - }); - } + + // if (showPanels && showPanels === 'link') { + // tabs.push({ + // caption: _t.textAddLink, + // id: 'add-link', + // component: + // }); + // } + return ( @@ -142,10 +168,10 @@ class AddView extends Component { return ( show_popover ? this.props.onclosed()}> - + : this.props.onclosed()}> - + ) } @@ -166,7 +192,7 @@ const Add = props => { props.onclosed(); } }; - return + return }; export default Add; \ No newline at end of file diff --git a/apps/presentationeditor/mobile/src/view/add/AddImage.jsx b/apps/presentationeditor/mobile/src/view/add/AddImage.jsx index d2809544e..474327217 100644 --- a/apps/presentationeditor/mobile/src/view/add/AddImage.jsx +++ b/apps/presentationeditor/mobile/src/view/add/AddImage.jsx @@ -33,16 +33,19 @@ const AddImage = props => { const { t } = useTranslation(); const _t = t('View.Add', {returnObjects: true}); return ( - - {props.onInsertByFile()}}> - - - - - - + + + + {props.onInsertByFile()}}> + + + + + + + ) }; diff --git a/apps/presentationeditor/mobile/src/view/add/AddLink.jsx b/apps/presentationeditor/mobile/src/view/add/AddLink.jsx index 2726cf04c..849588879 100644 --- a/apps/presentationeditor/mobile/src/view/add/AddLink.jsx +++ b/apps/presentationeditor/mobile/src/view/add/AddLink.jsx @@ -1,6 +1,6 @@ import React, {useState} from 'react'; import {observer, inject} from "mobx-react"; -import {List, ListItem, Page, Navbar, Icon, ListButton, ListInput, Segmented, Button} from 'framework7-react'; +import {List, ListItem, Page, Navbar, Icon, ListButton, ListInput, Segmented, Button, Link, NavLeft, NavRight, NavTitle, f7} from 'framework7-react'; import { useTranslation } from 'react-i18next'; import {Device} from "../../../../../common/mobile/utils/device"; @@ -8,9 +8,16 @@ const PageTypeLink = props => { const { t } = useTranslation(); const _t = t('View.Add', {returnObjects: true}); const [typeLink, setTypeLink] = useState(props.curType); + return ( - + + {Device.phone && + + + + } + {setTypeLink(1); props.changeType(1);}}> {setTypeLink(0); props.changeType(0);}}> @@ -42,28 +49,35 @@ const PageLinkTo = props => { setNumberTo(value); props.changeTo(4, value); }; + return ( - + + {Device.phone && + + + + } + - {changeTypeTo(0)}}> - {changeTypeTo(1)}}> - {changeTypeTo(2)}}> - {changeTypeTo(3)}}> - - {!isAndroid &&
{stateNumberTo + 1}
} -
- - - {isAndroid && } - - -
- + {changeTypeTo(0)}}> + {changeTypeTo(1)}}> + {changeTypeTo(2)}}> + {changeTypeTo(3)}}> + + {!isAndroid &&
{stateNumberTo + 1}
} +
+ + + {isAndroid && } + + +
+ ) @@ -100,11 +114,29 @@ 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 ( - {!props.noNavbar && } + + + { + props.isNavigate ? f7.views.current.router.back() : props.closeModal(); + }}> + {Device.android && } + + + {t('View.Add.textLinkSettings')} + + { + props.onInsertLink(typeLink, (typeLink === 1 ? + {url: link, display: stateDisplay, displayDisabled, tip: screenTip } : + {linkTo: linkTo, numberTo: numberTo, display: stateDisplay, displayDisabled, tip: screenTip})); + }} text={Device.ios ? t('View.Add.textDone') : ''}> + {Device.android && } + + + { {typeLink === 1 ? { setLink(event.target.value); @@ -127,7 +159,7 @@ const PageLink = props => { } { @@ -135,23 +167,23 @@ const PageLink = props => { setAutoUpdate(event.target.value == ''); }} /> - {/* {setScreenTip(event.target.value)}} - /> */} + /> - + {/* { props.onInsertLink(typeLink, (typeLink === 1 ? - {url: link, display: stateDisplay, displayDisabled: displayDisabled } : - {linkTo: linkTo, numberTo: numberTo, display: stateDisplay, displayDisabled: displayDisabled})); + {url: link, display: stateDisplay, displayDisabled: displayDisabled, tip: screenTip } : + {linkTo: linkTo, numberTo: numberTo, display: stateDisplay, displayDisabled: displayDisabled, tip: screenTip})); }} /> - + */} ) }; diff --git a/apps/presentationeditor/mobile/src/view/add/AddOther.jsx b/apps/presentationeditor/mobile/src/view/add/AddOther.jsx index 2eb8d5f4a..43f4e9ec4 100644 --- a/apps/presentationeditor/mobile/src/view/add/AddOther.jsx +++ b/apps/presentationeditor/mobile/src/view/add/AddOther.jsx @@ -45,6 +45,8 @@ const AddOther = props => { const _t = t('View.Add', {returnObjects: true}); const showInsertLink = props.storeLinkSettings.canAddLink && !props.storeFocusObjects.paragraphLocked; const hideAddComment = props.hideAddComment(); + const isHyperLink = props.storeFocusObjects.settings.indexOf('hyperlink') > -1; + return ( props.onGetTableStylesPreviews()} routeProps={{ @@ -58,8 +60,14 @@ const AddOther = props => { }}> } + + + {showInsertLink && - + } diff --git a/apps/presentationeditor/mobile/src/view/edit/Edit.jsx b/apps/presentationeditor/mobile/src/view/edit/Edit.jsx index b29d68abd..863f789df 100644 --- a/apps/presentationeditor/mobile/src/view/edit/Edit.jsx +++ b/apps/presentationeditor/mobile/src/view/edit/Edit.jsx @@ -19,7 +19,6 @@ import { PageShapeStyle, PageShapeStyleNoFill, PageReplaceContainer, PageReorder import { PageImageReplace, PageImageReorder, PageImageAlign, PageLinkSettings } from './EditImage'; import { PageTableStyle, PageTableStyleOptions, PageTableCustomFillColor, PageTableBorderColor, PageTableCustomBorderColor, PageTableReorder, PageTableAlign } from './EditTable'; import { PageChartDesign, PageChartDesignType, PageChartDesignStyle, PageChartDesignFill, PageChartDesignBorder, PageChartCustomFillColor, PageChartBorderColor, PageChartCustomBorderColor, PageChartReorder, PageChartAlign } from './EditChart' -import { PageLinkTo, PageTypeLink } from './EditLink' const routes = [ @@ -214,14 +213,9 @@ const routes = [ }, // Link - { - path: '/edit-link-type/', - component: PageTypeLink - }, - { - path: '/edit-link-to/', - component: PageLinkTo + path: '/edit-link/', + component: EditLinkController } ]; diff --git a/apps/presentationeditor/mobile/src/view/edit/EditLink.jsx b/apps/presentationeditor/mobile/src/view/edit/EditLink.jsx index 00f233d6c..5a0844f37 100644 --- a/apps/presentationeditor/mobile/src/view/edit/EditLink.jsx +++ b/apps/presentationeditor/mobile/src/view/edit/EditLink.jsx @@ -1,10 +1,10 @@ import React, {useState, useEffect} from 'react'; import {observer, inject} from "mobx-react"; -import {f7, List, ListItem, Page, Navbar, Icon, ListButton, ListInput, Segmented, Button, NavRight, Link} from 'framework7-react'; +import {f7, List, ListItem, Page, Navbar, Icon, ListButton, ListInput, Segmented, Button, NavRight, Link, NavLeft, NavTitle} from 'framework7-react'; import { useTranslation } from 'react-i18next'; import {Device} from "../../../../../common/mobile/utils/device"; -const PageTypeLink = props => { +const PageEditTypeLink = props => { const { t } = useTranslation(); const _t = t('View.Edit', {returnObjects: true}); const [typeLink, setTypeLink] = useState(props.curType); @@ -17,12 +17,10 @@ const PageTypeLink = props => { return ( - + {Device.phone && - - - + } @@ -34,7 +32,7 @@ const PageTypeLink = props => { ) }; -const PageLinkTo = props => { +const PageEditLinkTo = props => { const isAndroid = Device.android; const { t } = useTranslation(); const _t = t('View.Edit', {returnObjects: true}); @@ -70,12 +68,10 @@ const PageLinkTo = props => { return ( - + {Device.phone && - - - + } @@ -150,14 +146,24 @@ const PageLink = props => { return ( - - {Device.phone && - - - - - - } + + + { + props.isNavigate ? f7.views.current.router.back() : props.closeModal(); + }}> + {Device.android && } + + + {t('View.Edit.textLinkSettings')} + + { + props.onEditLink(typeLink, (typeLink === 1 ? + {url: link, display: stateDisplay, tip: screenTip, displayDisabled } : + {linkTo: linkTo, numberTo: numberTo, display: stateDisplay, tip: screenTip, displayDisabled})); + }} text={Device.ios ? t('View.Edit.textDone') : ''}> + {Device.android && } + + { {typeLink !== 0 ? {setLink(event.target.value)}} /> : @@ -182,7 +188,7 @@ const PageLink = props => { } {setDisplay(event.target.value)}} @@ -195,18 +201,11 @@ const PageLink = props => { /> - { - props.onEditLink(typeLink, (typeLink === 1 ? - {url: link, display: stateDisplay, tip: screenTip, displayDisabled: displayDisabled } : - {linkTo: linkTo, numberTo: numberTo, display: stateDisplay, tip: screenTip, displayDisabled: displayDisabled})); - }} - /> - { - props.onRemoveLink() + props.onRemoveLink(); + props.isNavigate ? f7.views.current.router.back() : props.closeModal(); }} /> @@ -214,9 +213,9 @@ const PageLink = props => { ) }; -const _PageLinkTo = inject("storeFocusObjects")(observer(PageLinkTo)); -const _PageTypeLink = inject("storeFocusObjects")(observer(PageTypeLink)); +const _PageEditLinkTo = inject("storeFocusObjects")(observer(PageEditLinkTo)); +const _PageEditTypeLink = inject("storeFocusObjects")(observer(PageEditTypeLink)); export {PageLink as EditLink, - _PageLinkTo as PageLinkTo, - _PageTypeLink as PageTypeLink} \ No newline at end of file + _PageEditLinkTo as PageEditLinkTo, + _PageEditTypeLink as PageEditTypeLink} \ No newline at end of file diff --git a/apps/spreadsheeteditor/mobile/locale/en.json b/apps/spreadsheeteditor/mobile/locale/en.json index 7d19d74b2..e501f95ac 100644 --- a/apps/spreadsheeteditor/mobile/locale/en.json +++ b/apps/spreadsheeteditor/mobile/locale/en.json @@ -53,6 +53,7 @@ "menuMerge": "Merge", "menuMore": "More", "menuOpenLink": "Open Link", + "menuEditLink": "Edit Link", "menuShow": "Show", "menuUnfreezePanes": "Unfreeze Panes", "menuUnmerge": "Unmerge", @@ -367,7 +368,9 @@ "txtNotUrl": "This field should be a URL in the format \"http://www.example.com\"", "txtSorting": "Sorting", "txtSortSelected": "Sort selected", - "txtYes": "Yes" + "txtYes": "Yes", + "textRecommended": "Recommended", + "textDone": "Done" }, "Edit": { "notcriticalErrorTitle": "Warning", @@ -503,7 +506,8 @@ "textRange": "Range", "textRemoveChart": "Remove Chart", "textRemoveImage": "Remove Image", - "textRemoveLink": "Remove Link", + "del_textRemoveLink": "Remove Link", + "textDeleteLink": "Delete Link", "textRemoveShape": "Remove Shape", "textReorder": "Reorder", "textReplace": "Replace", @@ -550,7 +554,10 @@ "textYen": "Yen", "txtNotUrl": "This field should be a URL in the format \"http://www.example.com\"", "txtSortHigh2Low": "Sort Highest to Lowest", - "txtSortLow2High": "Sort Lowest to Highest" + "txtSortLow2High": "Sort Lowest to Highest", + "textRecommended": "Recommended", + "textDone": "Done", + "textCancel": "Cancel" }, "Settings": { "advCSVOptions": "Choose CSV options", diff --git a/apps/spreadsheeteditor/mobile/src/controller/ContextMenu.jsx b/apps/spreadsheeteditor/mobile/src/controller/ContextMenu.jsx index 8deb76aa2..8605b4e89 100644 --- a/apps/spreadsheeteditor/mobile/src/controller/ContextMenu.jsx +++ b/apps/spreadsheeteditor/mobile/src/controller/ContextMenu.jsx @@ -255,6 +255,10 @@ class ContextMenu extends ContextMenuController { caption: _t.menuOpenLink, event: 'openlink' }); + itemsText.push({ + caption: t("ContextMenu.menuEditLink"), + event: 'editlink' + }); } if(!isDisconnected) { if (canViewComments && hasComments && hasComments.length>0) { diff --git a/apps/spreadsheeteditor/mobile/src/controller/add/AddLink.jsx b/apps/spreadsheeteditor/mobile/src/controller/add/AddLink.jsx index 73f33865f..c5576815a 100644 --- a/apps/spreadsheeteditor/mobile/src/controller/add/AddLink.jsx +++ b/apps/spreadsheeteditor/mobile/src/controller/add/AddLink.jsx @@ -1,9 +1,20 @@ import React, {Component} from 'react'; -import { f7 } from 'framework7-react'; +import { f7, Popup, Popover, View } from 'framework7-react'; import {Device} from '../../../../../common/mobile/utils/device'; import {withTranslation} from 'react-i18next'; -import {AddLink} from '../../view/add/AddLink'; +import {AddLink, PageTypeLink, PageSheet} from '../../view/add/AddLink'; + +const routes = [ + { + path: '/add-link-type/', + component: PageTypeLink + }, + { + path: '/add-link-sheet/', + component: PageSheet + } +]; class AddLinkController extends Component { constructor (props) { @@ -99,30 +110,71 @@ 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); - - this.closeModal(); + this.props.isNavigate ? f7.views.current.router.back() : this.closeModal(); } closeModal () { if ( Device.phone ) { - f7.sheet.close('.add-popup', true); + f7.popup.close('#add-link-popup'); } else { - f7.popover.close('#add-popover'); + f7.popover.close('#add-link-popover'); + } + } + + 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 ( - + !this.props.isNavigate ? + Device.phone ? + this.props.onClosed('add-link')}> + + + + + : + this.props.onClosed('add-link')}> + + + + + : + ) } } diff --git a/apps/spreadsheeteditor/mobile/src/controller/add/AddOther.jsx b/apps/spreadsheeteditor/mobile/src/controller/add/AddOther.jsx index 36250ffc7..4ae33cbb7 100644 --- a/apps/spreadsheeteditor/mobile/src/controller/add/AddOther.jsx +++ b/apps/spreadsheeteditor/mobile/src/controller/add/AddOther.jsx @@ -23,14 +23,17 @@ class AddOtherController extends Component { const iscelllocked = cellinfo.asc_getLocked(); const seltype = cellinfo.asc_getSelectionType(); const isComments = !cellinfo.asc_getComments() || cellinfo.asc_getComments().length > 0; + return (!(seltype === Asc.c_oAscSelectionType.RangeCells && !iscelllocked) || isComments); } render () { return ( - ) } diff --git a/apps/spreadsheeteditor/mobile/src/controller/edit/EditLink.jsx b/apps/spreadsheeteditor/mobile/src/controller/edit/EditLink.jsx index 523739b7c..1a3f3663e 100644 --- a/apps/spreadsheeteditor/mobile/src/controller/edit/EditLink.jsx +++ b/apps/spreadsheeteditor/mobile/src/controller/edit/EditLink.jsx @@ -1,10 +1,21 @@ import React, { Component } from 'react'; -import { f7 } from 'framework7-react'; +import { f7, Popup, Popover, View } from 'framework7-react'; import { Device } from '../../../../../common/mobile/utils/device'; import {observer, inject} from "mobx-react"; import { withTranslation } from 'react-i18next'; -import { EditLink } from '../../view/edit/EditLink'; +import { EditLink, PageEditTypeLink, PageEditSheet} from '../../view/edit/EditLink'; + +const routes = [ + { + path: '/edit-link-type/', + component: PageEditTypeLink + }, + { + path: '/edit-link-sheet/', + component: PageEditSheet + } +]; class EditLinkController extends Component { constructor (props) { @@ -40,9 +51,9 @@ class EditLinkController extends Component { 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'); } } @@ -117,26 +128,69 @@ class EditLinkController extends Component { linkProps.asc_setTooltip(tip); api.asc_insertHyperlink(linkProps); - this.closeModal(); + this.props.isNavigate ? f7.views.current.router.back() : this.closeModal(); } onRemoveLink() { const api = Common.EditorApi.get(); api.asc_removeHyperlink(); - 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-add'); + } + } } render () { return ( - + !this.props.isNavigate ? + Device.phone ? + this.props.onClosed('edit-link')}> + + + + + : + this.props.onClosed('edit-link')}> + + + + + : + ) } } diff --git a/apps/spreadsheeteditor/mobile/src/page/main.jsx b/apps/spreadsheeteditor/mobile/src/page/main.jsx index 951bcc33b..a8273ad6f 100644 --- a/apps/spreadsheeteditor/mobile/src/page/main.jsx +++ b/apps/spreadsheeteditor/mobile/src/page/main.jsx @@ -16,6 +16,8 @@ import { f7, Link } from 'framework7-react'; import {FunctionGroups} from "../controller/add/AddFunction"; import ContextMenu from '../controller/ContextMenu'; import { Toolbar } from "../controller/Toolbar"; +import { AddLinkController } from '../controller/add/AddLink'; +import { EditLinkController } from '../controller/edit/EditLink'; class MainPage extends Component { constructor(props) { @@ -25,7 +27,9 @@ class MainPage extends Component { addOptionsVisible: false, addShowOptions: null, settingsVisible: false, - collaborationVisible: false + collaborationVisible: false, + addLinkSettingsVisible: false, + editLinkSettingsVisible: false }; } @@ -48,6 +52,12 @@ class MainPage extends Component { } else if ( opts === 'coauth' ) { this.state.collaborationVisible && (opened = true); newState.collaborationVisible = 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) { @@ -79,6 +89,10 @@ class MainPage extends Component { return {settingsVisible: false}; else if ( opts == 'coauth' ) return {collaborationVisible: 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'); @@ -133,7 +147,15 @@ class MainPage extends Component { } { !this.state.addOptionsVisible ? null : - + + } + { + !this.state.addLinkSettingsVisible ? null : + + } + { + !this.state.editLinkSettingsVisible ? null : + } { !this.state.settingsVisible ? null : diff --git a/apps/spreadsheeteditor/mobile/src/view/add/Add.jsx b/apps/spreadsheeteditor/mobile/src/view/add/Add.jsx index 95762db4f..7807ada67 100644 --- a/apps/spreadsheeteditor/mobile/src/view/add/Add.jsx +++ b/apps/spreadsheeteditor/mobile/src/view/add/Add.jsx @@ -13,7 +13,9 @@ import {AddOtherController} from "../../controller/add/AddOther"; import {AddImageController} from "../../controller/add/AddImage"; import {PageImageLinkSettings} from "./AddImage"; import {AddLinkController} from "../../controller/add/AddLink"; +import {EditLinkController} from "../../controller/edit/EditLink"; import {PageTypeLink, PageSheet} from "./AddLink"; +import {PageEditTypeLink, PageEditSheet} from "../../view/edit/EditLink"; import AddFilterController from "../../controller/add/AddFilter"; const routes = [ @@ -48,6 +50,18 @@ const routes = [ path: '/add-link-sheet/', component: PageSheet }, + { + path: '/edit-link/', + component: EditLinkController + }, + { + path: '/edit-link-type/', + component: PageEditTypeLink + }, + { + path: '/edit-link-sheet/', + component: PageEditSheet + }, // Other { path: '/add-sort-and-filter/', @@ -123,31 +137,34 @@ const AddTabs = props => { component: }); } - if (showPanels && showPanels.indexOf('image') !== -1) { - tabs.push({ - caption: _t.textImage, - id: 'add-image', - icon: 'icon-add-image', - component: - }); - } + + // if (showPanels && showPanels.indexOf('image') !== -1) { + // tabs.push({ + // caption: _t.textImage, + // id: 'add-image', + // icon: 'icon-add-image', + // component: + // }); + // } } + if (!showPanels && (!wsProps.InsertHyperlinks || !wsProps.Objects || !wsProps.Sort)) { tabs.push({ caption: _t.textOther, id: 'add-other', icon: 'icon-add-other', - component: - }); - } - if (((showPanels && showPanels === 'hyperlink') || props.isAddShapeHyperlink) && !wsProps.InsertHyperlinks) { - tabs.push({ - caption: _t.textAddLink, - id: 'add-link', - icon: 'icon-link', - component: + component: }); } + + // if (((showPanels && showPanels === 'hyperlink') || props.isAddShapeHyperlink) && !wsProps.InsertHyperlinks) { + // tabs.push({ + // caption: _t.textAddLink, + // id: 'add-link', + // icon: 'icon-link', + // component: + // }); + // } if(!tabs.length) { if (Device.phone) { @@ -183,10 +200,10 @@ class AddView extends Component { return ( show_popover ? this.props.onclosed()}> - + : this.props.onclosed()}> - + ) } @@ -245,6 +262,7 @@ const Add = props => { isAddShapeHyperlink = {isAddShapeHyperlink} wsProps={props.wsProps} wsLock={props.wsLock} + onCloseLinkSettings={props.onCloseLinkSettings} /> }; diff --git a/apps/spreadsheeteditor/mobile/src/view/add/AddLink.jsx b/apps/spreadsheeteditor/mobile/src/view/add/AddLink.jsx index 164a6e63c..298629fdb 100644 --- a/apps/spreadsheeteditor/mobile/src/view/add/AddLink.jsx +++ b/apps/spreadsheeteditor/mobile/src/view/add/AddLink.jsx @@ -1,5 +1,5 @@ import React, {Fragment, useState} from 'react'; -import {Page, Navbar, BlockTitle, List, ListItem, ListInput, ListButton, Icon} from 'framework7-react'; +import {Page, Navbar, BlockTitle, List, ListItem, ListInput, ListButton, Icon, Link, NavLeft, NavRight, NavTitle, f7} from 'framework7-react'; import { useTranslation } from 'react-i18next'; import {Device} from "../../../../../common/mobile/utils/device"; @@ -7,9 +7,16 @@ const PageTypeLink = ({curType, changeType}) => { const { t } = useTranslation(); const _t = t('View.Add', {returnObjects: true}); const [typeLink, setTypeLink] = useState(curType); + return ( - + + {Device.phone && + + + + } + {setTypeLink('ext'); changeType('ext');}}> {setTypeLink('int'); changeType('int');}}> @@ -22,12 +29,19 @@ const PageSheet = ({curSheet, sheets, changeSheet}) => { const { t } = useTranslation(); const _t = t('View.Add', {returnObjects: true}); const [stateSheet, setSheet] = useState(curSheet.value); + return ( - + + {Device.phone && + + + + } + {sheets.map((sheet) => { - return( + return ( { ) }; -const AddLinkView = props => { +const AddLink = props => { const isIos = Device.ios; const { t } = useTranslation(); const _t = t('View.Add', {returnObjects: true}); @@ -64,7 +78,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); @@ -75,7 +89,26 @@ const AddLinkView = props => { const [range, setRange] = useState(''); return ( - + + + + { + props.isNavigate ? f7.views.current.router.back() : props.closeModal(); + }}> + {Device.android && } + + + {t('View.Add.textLinkSettings')} + + { + props.onInsertLink(typeLink === 'ext' ? + {type: 'ext', url: link, text: stateDisplayText} : + {type: 'int', url: range, sheet: curSheet.caption, text: stateDisplayText}); + }} text={Device.ios ? t('View.Add.textDone') : ''}> + {Device.android && } + + + {props.allowInternal && { {typeLink === 'ext' && { setLink(event.target.value); @@ -113,7 +146,7 @@ const AddLinkView = props => { } { @@ -122,36 +155,15 @@ const AddLinkView = props => { }} className={isIos ? 'list-input-right' : ''} /> - {/* {setScreenTip(event.target.value)}} className={isIos ? 'list-input-right' : ''} - /> */} - - - {props.onInsertLink(typeLink === 'ext' ? - {type: 'ext', url: link, text: stateDisplayText} : - {type: 'int', url: range, sheet: curSheet.caption, text: stateDisplayText})}} /> - - ) -}; - -const AddLink = props => { - const { t } = useTranslation(); - const _t = t('View.Add', {returnObjects: true}); - return ( - props.inTabs ? - : - - - - + ) }; diff --git a/apps/spreadsheeteditor/mobile/src/view/add/AddOther.jsx b/apps/spreadsheeteditor/mobile/src/view/add/AddOther.jsx index 592929673..f793a0d46 100644 --- a/apps/spreadsheeteditor/mobile/src/view/add/AddOther.jsx +++ b/apps/spreadsheeteditor/mobile/src/view/add/AddOther.jsx @@ -1,10 +1,13 @@ import React from 'react'; +import { inject, observer } from 'mobx-react'; import {List, ListItem, Icon} from 'framework7-react'; import { useTranslation } from 'react-i18next'; -const AddOther = props => { +const AddOther = inject("storeFocusObjects")(observer(props => { const { t } = useTranslation(); const _t = t('View.Add', {returnObjects: true}); + const storeFocusObjects = props.storeFocusObjects; + const isHyperLink = storeFocusObjects.selections.indexOf('hyperlink') > -1; const hideAddComment = props.hideAddComment(); const wsProps = props.wsProps; @@ -22,11 +25,14 @@ const AddOther = props => { - + ) -}; +})); export {AddOther}; \ No newline at end of file diff --git a/apps/spreadsheeteditor/mobile/src/view/edit/Edit.jsx b/apps/spreadsheeteditor/mobile/src/view/edit/Edit.jsx index 89d408d9d..7ae2ed12f 100644 --- a/apps/spreadsheeteditor/mobile/src/view/edit/Edit.jsx +++ b/apps/spreadsheeteditor/mobile/src/view/edit/Edit.jsx @@ -17,7 +17,7 @@ import { PageImageReplace, PageImageReorder, PageLinkSettings } from './EditImag import { TextColorCell, FillColorCell, CustomTextColorCell, CustomFillColorCell, FontsCell, TextFormatCell, TextOrientationCell, BorderStyleCell, BorderColorCell, CustomBorderColorCell, BorderSizeCell, PageFormatCell, PageAccountingFormatCell, PageCurrencyFormatCell, PageDateFormatCell, PageTimeFormatCell, CellStyle } from './EditCell'; import { PageTextFonts, PageTextFontColor, PageTextCustomFontColor } from './EditText'; import { PageChartDesign, PageChartDesignType, PageChartDesignStyle, PageChartDesignFill, PageChartDesignBorder, PageChartCustomFillColor, PageChartBorderColor, PageChartCustomBorderColor, PageChartReorder, PageChartLayout, PageLegend, PageChartTitle, PageHorizontalAxisTitle, PageVerticalAxisTitle, PageHorizontalGridlines, PageVerticalGridlines, PageDataLabels, PageChartVerticalAxis, PageVertAxisCrosses, PageDisplayUnits, PageVertMajorType, PageVertMinorType, PageVertLabelPosition, PageChartHorizontalAxis, PageHorAxisCrosses, PageHorAxisPosition, PageHorMajorType, PageHorMinorType, PageHorLabelPosition } from './EditChart'; -import { PageTypeLink, PageSheet } from './EditLink'; +import { PageEditTypeLink, PageEditSheet } from './EditLink'; const routes = [ @@ -282,11 +282,11 @@ const routes = [ { path: '/edit-link-type/', - component: PageTypeLink + component: PageEditTypeLink }, { path: '/edit-link-sheet', - component: PageSheet + component: PageEditSheet } diff --git a/apps/spreadsheeteditor/mobile/src/view/edit/EditLink.jsx b/apps/spreadsheeteditor/mobile/src/view/edit/EditLink.jsx index 9d09846b1..9ccd0f584 100644 --- a/apps/spreadsheeteditor/mobile/src/view/edit/EditLink.jsx +++ b/apps/spreadsheeteditor/mobile/src/view/edit/EditLink.jsx @@ -1,10 +1,10 @@ import React, {useState, useEffect, Fragment} from 'react'; import {observer, inject} from "mobx-react"; -import {f7, List, ListItem, Page, Navbar, NavRight, Icon, ListButton, ListInput, Link} from 'framework7-react'; +import {f7, List, ListItem, Page, Navbar, NavRight, Icon, ListButton, ListInput, Link, NavLeft, NavTitle} from 'framework7-react'; import { useTranslation } from 'react-i18next'; import {Device} from "../../../../../common/mobile/utils/device"; -const PageTypeLink = ({curType, changeType, storeFocusObjects}) => { +const PageEditTypeLink = ({curType, changeType, storeFocusObjects}) => { const { t } = useTranslation(); const _t = t('View.Edit', {returnObjects: true}); const [typeLink, setTypeLink] = useState(curType); @@ -17,10 +17,10 @@ const PageTypeLink = ({curType, changeType, storeFocusObjects}) => { return ( - + {Device.phone && - + } @@ -32,7 +32,7 @@ const PageTypeLink = ({curType, changeType, storeFocusObjects}) => { ) }; -const PageSheet = ({curSheet, sheets, changeSheet, storeFocusObjects}) => { +const PageEditSheet = ({curSheet, sheets, changeSheet, storeFocusObjects}) => { const { t } = useTranslation(); const _t = t('View.Edit', {returnObjects: true}); const [stateSheet, setSheet] = useState(curSheet); @@ -45,10 +45,10 @@ const PageSheet = ({curSheet, sheets, changeSheet, storeFocusObjects}) => { return ( - + {Device.phone && - + } @@ -110,7 +110,27 @@ const EditLink = props => { const [range, setRange] = useState(valueRange || 'A1'); return ( - + + + + { + props.isNavigate ? f7.views.current.router.back() : props.closeModal(); + }}> + {Device.android && } + + + {t('View.Edit.textLinkSettings')} + + { + props.onEditLink(typeLink === 1 ? + {type: 1, url: link, text: stateDisplayText, tooltip: screenTip} : + {type: 2, url: range, sheet: curSheet, text: stateDisplayText, tooltip: screenTip}); + }} text={Device.ios ? t('View.Edit.textDone') : ''}> + {Device.android && } + + + + { } {setDisplayText(event.target.value)}} @@ -159,26 +179,24 @@ const EditLink = props => { /> - {props.onEditLink(typeLink === 1 ? - {type: 1, url: link, text: stateDisplayText, tooltip: screenTip} : - {type: 2, url: range, sheet: curSheet, text: stateDisplayText, tooltip: screenTip})}} - /> - props.onRemoveLink()} + { + props.onRemoveLink(); + props.isNavigate ? f7.views.current.router.back() : props.closeModal(); + }} /> - + ) }; -const _PageTypeLink = inject("storeFocusObjects")(observer(PageTypeLink)); -const _PageSheet = inject("storeFocusObjects")(observer(PageSheet)); +const _PageEditTypeLink = inject("storeFocusObjects")(observer(PageEditTypeLink)); +const _PageEditSheet = inject("storeFocusObjects")(observer(PageEditSheet)); export { EditLink, - _PageTypeLink as PageTypeLink, - _PageSheet as PageSheet + _PageEditTypeLink as PageEditTypeLink, + _PageEditSheet as PageEditSheet }; \ No newline at end of file