diff --git a/apps/common/mobile/resources/less/common-material.less b/apps/common/mobile/resources/less/common-material.less index 6ed119e85..570d53285 100644 --- a/apps/common/mobile/resources/less/common-material.less +++ b/apps/common/mobile/resources/less/common-material.less @@ -526,4 +526,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/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/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/locale/en.json b/apps/documenteditor/mobile/locale/en.json index 964d969d6..44cc0f610 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", @@ -305,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", @@ -364,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/ContextMenu.jsx b/apps/documenteditor/mobile/src/controller/ContextMenu.jsx index e92ef2281..52b4f2dfb 100644 --- a/apps/documenteditor/mobile/src/controller/ContextMenu.jsx +++ b/apps/documenteditor/mobile/src/controller/ContextMenu.jsx @@ -104,11 +104,13 @@ class ContextMenu extends ContextMenuController { case 'openlink': 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); break; case 'review': @@ -317,6 +319,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..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 } from 'framework7-react'; +import { f7, Popup, Popover, View } 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.sheet.close('.add-popup', true); + f7.popup.close('#add-link-popup'); } else { - f7.popover.close('#add-popover'); + f7.popover.close('#add-link-popover'); } } @@ -26,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); @@ -54,18 +54,40 @@ 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); api.add_Hyperlink(props); + this.props.isNavigate ? f7.views.current.router.back() : 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..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 } 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'; @@ -9,23 +9,27 @@ 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) { 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; @@ -41,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); + 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(); } } @@ -64,16 +76,50 @@ class EditHyperlinkController extends Component { if (api) { const linkObject = this.props.storeFocusObjects.linkObject; api.remove_Hyperlink(linkObject); - 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/documenteditor/mobile/src/page/main.jsx b/apps/documenteditor/mobile/src/page/main.jsx index f8867cd70..dc45ce617 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 7eaf1e329..571133574 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,14 @@ const routes = [ path: '/add-link/', component: AddLinkController, }, + { + path: '/edit-link/', + component: EditHyperlink + }, + { + path: '/add-image/', + component: AddImageController + }, { path: '/add-page-number/', component: PageAddNumber, @@ -64,7 +73,7 @@ const AddLayoutNavbar = ({ tabs, inPopover }) => { : { tabs[0].caption } } - { !inPopover && } + {!inPopover && } ) }; @@ -81,7 +90,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, onCloseLinkSettings}) => { const { t } = useTranslation(); const _t = t('Add', {returnObjects: true}); const api = Common.EditorApi.get(); @@ -147,18 +156,19 @@ 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, @@ -173,17 +183,19 @@ const AddTabs = inject("storeFocusObjects", "storeTableSettings")(observer(({sto richDelLock={richDelLock} richEditLock={richEditLock} plainDelLock={plainDelLock} - plainEditLock={plainEditLock} + plainEditLock={plainEditLock} + onCloseLinkSettings={onCloseLinkSettings} /> }); } - if (showPanels && showPanels === 'link') { - tabs.push({ - caption: _t.textAddLink, - 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) { @@ -216,10 +228,10 @@ class AddView extends Component { return ( show_popover ? this.props.onclosed()}> - + : this.props.onclosed()}> - + ) } @@ -242,7 +254,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/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..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} 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"; @@ -17,12 +17,28 @@ const PageLink = props => { return ( - {!props.noNavbar && } + + + { + props.isNavigate ? f7.views.current.router.back() : props.closeModal(); + }}> + {Device.android && } + + + {t('Add.textLinkSettings')} + + { + props.onInsertLink(stateLink, stateDisplay, stateTip); + }} text={Device.ios ? t('Add.textDone') : ''}> + {Device.android && } + + + { setLink(event.target.value); @@ -32,7 +48,7 @@ const PageLink = props => { { setDisplay(event.target.value); @@ -47,11 +63,11 @@ const PageLink = props => { onChange={(event) => {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..a429aea9f 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, @@ -187,9 +188,12 @@ const AddOther = props => { }}> } - {(isText && !disabledAddLink) && + + + {(isText && !disabledAddLink) && } diff --git a/apps/documenteditor/mobile/src/view/edit/Edit.jsx b/apps/documenteditor/mobile/src/view/edit/Edit.jsx index c568acec3..907bf9b29 100644 --- a/apps/documenteditor/mobile/src/view/edit/Edit.jsx +++ b/apps/documenteditor/mobile/src/view/edit/Edit.jsx @@ -53,6 +53,13 @@ const routes = [ path: '/edit-text-highlight-color/', component: PageTextHighlightColor, }, + + // Edit link + // { + // path: '/edit-link/', + // component: EditHyperlinkController + // }, + //Edit paragraph { path: '/edit-paragraph-adv/', @@ -340,13 +347,13 @@ const EditTabs = props => { 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/documenteditor/mobile/src/view/edit/EditHyperlink.jsx b/apps/documenteditor/mobile/src/view/edit/EditHyperlink.jsx index 9509f0a54..aa29b262c 100644 --- a/apps/documenteditor/mobile/src/view/edit/EditHyperlink.jsx +++ b/apps/documenteditor/mobile/src/view/edit/EditHyperlink.jsx @@ -1,32 +1,56 @@ import React, {Fragment, useState} from 'react'; import {observer, inject} from "mobx-react"; -import {List, ListInput, ListButton} from 'framework7-react'; +import {List, ListInput, ListButton, Page, f7, Link, Navbar, NavLeft, NavTitle, NavRight, Icon} from 'framework7-react'; import { useTranslation } from 'react-i18next'; +import {Device} from "../../../../../common/mobile/utils/device"; const EditHyperlink = props => { const { t } = useTranslation(); const _t = t('Edit', {returnObjects: true}); const linkObject = props.storeFocusObjects.linkObject; - const link = linkObject.get_Value() ? linkObject.get_Value().replace(new RegExp(" ", 'g'), "%20") : ''; - const display = !(linkObject.get_Text() === null) ? linkObject.get_Text() : ''; - const tip = linkObject.get_ToolTip(); + 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() : ''; + tip = linkObject.get_ToolTip(); + } + const [stateLink, setLink] = useState(link); const [stateDisplay, setDisplay] = useState(display); const [stateTip, setTip] = useState(tip); + return ( - + + + + { + 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 && } + + + {setLink(event.target.value)}} > {setDisplay(event.target.value)}} > @@ -39,12 +63,15 @@ const EditHyperlink = props => { > - { - 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(); + }} /> - + ) }; diff --git a/apps/presentationeditor/mobile/locale/en.json b/apps/presentationeditor/mobile/locale/en.json index 8dcc852a7..70907988a 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 554ebc187..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'); } } @@ -35,12 +46,14 @@ class AddLinkController extends Component { const display = linkInfo.display; 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, @@ -61,10 +74,12 @@ class AddLinkController extends Component { props.put_Value(url); 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,6 +102,7 @@ class AddLinkController extends Component { slidetip = _t.textSlide + ' ' + (linkInfo.numberTo + 1); break; } + props.put_Value(url); 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 d00f01ace..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 && } + + +
+ ) @@ -104,7 +118,25 @@ const PageLink = props => { 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 => { } { @@ -142,16 +174,16 @@ const PageLink = props => { onChange={(event) => {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, 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 da393749d..1307384ca 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", @@ -369,7 +370,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", @@ -505,7 +508,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", @@ -552,7 +556,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 ebb52d369..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) { @@ -102,27 +113,68 @@ class AddLinkController extends Component { 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 271866175..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}); @@ -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 => { } { @@ -130,28 +163,7 @@ const AddLinkView = props => { 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})}} - /> - - - ) -}; - -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