Lea/web-apps
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

[DE PE SSE mobile] Changed adding and editing link

Browse source
This commit is contained in:
SergeyEzhin 2022-06-07 00:53:07 +04:00
parent 4d8fde7ea1
commit 454878d3d7
32 changed files with 753 additions and 346 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
apps/common/mobile/resources/less/common-material.less
View file

@ -523,4 +523,15 @@
margin-right: 0; margin-right: 0;
} }
} }
// Navbar link settings
.navbar-link-settings {
.navbar-inner {
background: @background-primary;
}
.title, a {
color: @text-normal;
}
}
} }

15
apps/common/mobile/resources/less/material/icons.less
View file

@ -39,6 +39,21 @@
height: 22px; height: 22px;
.encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{toolbar-icons}"><g><path d="M0,20h22v1H0V20z"/><polygon points="17.1,3.1 3.5,16.7 3,20 6.3,19.5 19.9,5.9"/><path d="M20.5,5.3L22,3.8c0,0-0.2-1.2-0.9-1.9C20.4,1.1,19.2,1,19.2,1l-1.5,1.5L20.5,5.3z"/></g></svg>', @toolbar-icons); .encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{toolbar-icons}"><g><path d="M0,20h22v1H0V20z"/><polygon points="17.1,3.1 3.5,16.7 3,20 6.3,19.5 19.9,5.9"/><path d="M20.5,5.3L22,3.8c0,0-0.2-1.2-0.9-1.9C20.4,1.1,19.2,1,19.2,1l-1.5,1.5L20.5,5.3z"/></g></svg>', @toolbar-icons);
} }
&.icon-close {
width: 24px;
height: 24px;
.encoded-svg-mask('<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M18.9844 6.42188L13.4062 12L18.9844 17.5781L17.5781 18.9844L12 13.4062L6.42188 18.9844L5.01562 17.5781L10.5938 12L5.01562 6.42188L6.42188 5.01562L12 10.5938L17.5781 5.01562L18.9844 6.42188Z"/></svg>', @text-normal);
}
&.icon-done-disabled {
width: 24px;
height: 24px;
.encoded-svg-mask('<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M9 16.2188L19.5938 5.57812L21 6.98438L9 18.9844L3.42188 13.4062L4.78125 12L9 16.2188Z"/></svg>', @text-tertiary);
}
&.icon-done {
width: 24px;
height: 24px;
.encoded-svg-mask('<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M9 16.2188L19.5938 5.57812L21 6.98438L9 18.9844L3.42188 13.4062L4.78125 12L9 16.2188Z"/></svg>');
}
} }
} }
} }

20
apps/documenteditor/mobile/src/controller/ContextMenu.jsx
View file

@ -102,22 +102,16 @@ class ContextMenu extends ContextMenuController {
Common.Notifications.trigger('viewcomment'); Common.Notifications.trigger('viewcomment');
break; break;
case 'openlink': case 'openlink':
case 'editlink':
const stack = api.getSelectedElements(); const stack = api.getSelectedElements();
let value;
if(action === 'openlink') { stack.forEach((item) => {
let value; if (item.get_ObjectType() == Asc.c_oAscTypeSelectElement.Hyperlink) {
value = item.get_ObjectValue().get_Value();
}
});
stack.forEach((item) => { value && this.openLink(value);
if (item.get_ObjectType() == Asc.c_oAscTypeSelectElement.Hyperlink) {
value = item.get_ObjectValue().get_Value();
}
});
value && this.openLink(value);
} else {
// console.log('edit link');
}
break; break;
case 'review': case 'review':
setTimeout(() => { setTimeout(() => {

16
apps/documenteditor/mobile/src/controller/add/AddLink.jsx
View file

@ -1,5 +1,5 @@
import React, {Component} from 'react'; 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 {Device} from '../../../../../common/mobile/utils/device';
import { withTranslation} from 'react-i18next'; import { withTranslation} from 'react-i18next';
@ -28,10 +28,8 @@ class AddLinkController extends Component {
onInsertLink (url, display, tip) { onInsertLink (url, display, tip) {
const api = Common.EditorApi.get(); const api = Common.EditorApi.get();
const { t } = this.props; const { t } = this.props;
const _t = t("Add", { returnObjects: true }); const _t = t("Add", { returnObjects: true });
const urltype = api.asc_getUrlType(url.trim()); const urltype = api.asc_getUrlType(url.trim());
const isEmail = (urltype == 2); const isEmail = (urltype == 2);
@ -56,13 +54,13 @@ class AddLinkController extends Component {
_url = _url.replace(new RegExp("%20",'g')," "); _url = _url.replace(new RegExp("%20",'g')," ");
const props = new Asc.CHyperlinkProperty(); const props = new Asc.CHyperlinkProperty();
props.put_Value(_url); props.put_Value(_url);
props.put_Text(!display ? _url : display); props.put_Text(!display ? _url : display);
// props.put_ToolTip(tip); props.put_ToolTip(tip);
api.add_Hyperlink(props); api.add_Hyperlink(props);
this.props.isNavigate ? f7.views.current.router.back() : this.closeModal();
// this.closeModal();
} }
componentDidMount() { componentDidMount() {
@ -83,8 +81,10 @@ class AddLinkController extends Component {
<PageAddLink closeModal={this.closeModal} onInsertLink={this.onInsertLink} getDisplayLinkText={this.getDisplayLinkText} isNavigate={this.props.isNavigate} /> <PageAddLink closeModal={this.closeModal} onInsertLink={this.onInsertLink} getDisplayLinkText={this.getDisplayLinkText} isNavigate={this.props.isNavigate} />
</Popup> </Popup>
: :
<Popover id="add-link-popover" className="popover__titled" style={{height: '410px'}} closeByOutsideClick={false} onPopoverClosed={() => this.props.onClosed('add-link')}> <Popover id="add-link-popover" className="popover__titled" closeByOutsideClick={false} onPopoverClosed={() => this.props.onClosed('add-link')}>
<PageAddLink closeModal={this.closeModal} onInsertLink={this.onInsertLink} getDisplayLinkText={this.getDisplayLinkText} isNavigate={this.props.isNavigate}/> <View style={{height: '410px'}}>
<PageAddLink closeModal={this.closeModal} onInsertLink={this.onInsertLink} getDisplayLinkText={this.getDisplayLinkText} isNavigate={this.props.isNavigate}/>
</View>
</Popover> </Popover>
: :
<PageAddLink closeModal={this.closeModal} onInsertLink={this.onInsertLink} getDisplayLinkText={this.getDisplayLinkText} isNavigate={this.props.isNavigate} /> <PageAddLink closeModal={this.closeModal} onInsertLink={this.onInsertLink} getDisplayLinkText={this.getDisplayLinkText} isNavigate={this.props.isNavigate} />

37
apps/documenteditor/mobile/src/controller/edit/EditHyperlink.jsx
View file

@ -1,5 +1,5 @@
import React, {Component} from 'react'; 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 {Device} from '../../../../../common/mobile/utils/device';
import {observer, inject} from "mobx-react"; import {observer, inject} from "mobx-react";
import { withTranslation } from 'react-i18next'; 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(); const api = Common.EditorApi.get();
if (api) { if (api) {
const urltype = api.asc_getUrlType(link.trim()); const urltype = api.asc_getUrlType(link.trim());
const isEmail = (urltype == 2); const isEmail = (urltype == 2);
if (urltype < 1) { if (urltype < 1) {
const { t } = this.props; const { t } = this.props;
@ -43,21 +45,29 @@ class EditHyperlinkController extends Component {
return; return;
} }
let url = link.replace(/^\s+|\s+$/g,''); let url = link.replace(/^\s+|\s+$/g,'');
if (! /(((^https?)|(^ftp)):\/\/)|(^mailto:)/i.test(url) ) { if (! /(((^https?)|(^ftp)):\/\/)|(^mailto:)/i.test(url) ) {
url = (isEmail ? 'mailto:' : 'http://') + url; url = (isEmail ? 'mailto:' : 'http://') + url;
} }
url = url.replace(new RegExp("%20",'g')," "); url = url.replace(new RegExp("%20",'g')," ");
const props = new Asc.CHyperlinkProperty(); const props = new Asc.CHyperlinkProperty();
props.put_Value(url); props.put_Value(url);
props.put_Text(display.trim().length < 1 ? url : display); props.put_Text(display.trim().length < 1 ? url : display);
// props.put_ToolTip(tip); props.put_ToolTip(tip);
const linkObject = this.props.storeFocusObjects.linkObject; const linkObject = this.props.storeFocusObjects.linkObject;
if (linkObject) { if (linkObject) {
props.put_InternalHyperlink(linkObject.get_InternalHyperlink()); props.put_InternalHyperlink(linkObject.get_InternalHyperlink());
} }
api.change_Hyperlink(props); 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) { if (api) {
const linkObject = this.props.storeFocusObjects.linkObject; const linkObject = this.props.storeFocusObjects.linkObject;
api.remove_Hyperlink(linkObject); api.remove_Hyperlink(linkObject);
// this.closeModal();
} }
} }
@ -75,7 +84,7 @@ class EditHyperlinkController extends Component {
if(Device.phone) { if(Device.phone) {
f7.popup.open('#edit-link-popup', true); f7.popup.open('#edit-link-popup', true);
} else { } 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 {
/> />
</Popup> </Popup>
: :
<Popover id="edit-link-popover" className="popover__titled" style={{height: '410px'}} closeByOutsideClick={false} onPopoverClosed={() => this.props.onClosed('edit-link')}> <Popover id="edit-link-popover" className="popover__titled" closeByOutsideClick={false} onPopoverClosed={() => this.props.onClosed('edit-link')}>
<EditHyperlink <View style={{height: '410px'}}>
onEditLink={this.onEditLink} <EditHyperlink
onRemoveLink={this.onRemoveLink} onEditLink={this.onEditLink}
closeModal={this.closeModal} onRemoveLink={this.onRemoveLink}
isNavigate={this.props.isNavigate} closeModal={this.closeModal}
/> isNavigate={this.props.isNavigate}
/>
</View>
</Popover> </Popover>
: :
<EditHyperlink <EditHyperlink

2
apps/documenteditor/mobile/src/page/main.jsx
View file

@ -172,7 +172,7 @@ class MainPage extends Component {
} }
{ {
!this.state.addOptionsVisible ? null : !this.state.addOptionsVisible ? null :
<AddOptions openOptions={this.handleClickToOpenOptions.bind(this)} onCloseLinkSettings={this.handleOptionsViewClosed.bind(this)} onclosed={this.handleOptionsViewClosed.bind(this, 'add')} showOptions={this.state.addShowOptions} /> <AddOptions onCloseLinkSettings={this.handleOptionsViewClosed.bind(this)} onclosed={this.handleOptionsViewClosed.bind(this, 'add')} showOptions={this.state.addShowOptions} />
} }
{ {
!this.state.addLinkSettingsVisible ? null : !this.state.addLinkSettingsVisible ? null :

1
apps/documenteditor/mobile/src/view/add/Add.jsx
View file

@ -185,7 +185,6 @@ const AddTabs = inject("storeFocusObjects", "storeTableSettings")(observer(({sto
plainDelLock={plainDelLock} plainDelLock={plainDelLock}
plainEditLock={plainEditLock} plainEditLock={plainEditLock}
onCloseLinkSettings={onCloseLinkSettings} onCloseLinkSettings={onCloseLinkSettings}
isNavigate={true}
/> />
}); });
} }

43
apps/documenteditor/mobile/src/view/add/AddLink.jsx
View file

@ -1,5 +1,5 @@
import React, {useState} from 'react'; 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 { useTranslation } from 'react-i18next';
import {Device} from "../../../../../common/mobile/utils/device"; import {Device} from "../../../../../common/mobile/utils/device";
@ -12,35 +12,28 @@ const PageLink = props => {
const [stateLink, setLink] = useState(''); const [stateLink, setLink] = useState('');
const [stateDisplay, setDisplay] = useState(display); const [stateDisplay, setDisplay] = useState(display);
// const [stateTip, setTip] = useState(''); const [stateTip, setTip] = useState('');
const [stateAutoUpdate, setAutoUpdate] = useState(!stateDisplay ? true : false); const [stateAutoUpdate, setAutoUpdate] = useState(!stateDisplay ? true : false);
return ( return (
<Page> <Page>
{/* {!props.noNavbar && <Navbar title={t('Add.textLinkSettings')} backLink={t('Add.textCancel')}> <Navbar className="navbar-link-settings">
<NavLeft>
<Link text={Device.ios ? t('Add.textCancel') : ''} onClick={() => {
props.isNavigate ? f7.views.current.router.back() : props.closeModal();
}}>
{Device.android && <Icon icon='icon-close' />}
</Link>
</NavLeft>
<NavTitle>{t('Add.textLinkSettings')}</NavTitle>
<NavRight> <NavRight>
<Link className={`${stateLink.length < 1 && 'disabled'}`} onClick={() => { <Link className={`${stateLink.length < 1 && 'disabled'}`} onClick={() => {
props.onInsertLink(stateLink, stateDisplay); props.onInsertLink(stateLink, stateDisplay, stateTip);
}} text={t('Add.textDone')}></Link> }} text={Device.ios ? t('Add.textDone') : ''}>
{Device.android && <Icon icon={stateLink.length < 1 ? 'icon-done-disabled' : 'icon-done'} />}
</Link>
</NavRight> </NavRight>
</Navbar>} */} </Navbar>
{/* backLink={t('Add.textCancel') */}
{!props.noNavbar &&
<Navbar>
<NavLeft>
<Link text={t('Add.textCancel')} onClick={() => {
props.isNavigate ? f7.views.current.router.back() : props.closeModal();
}}></Link>
</NavLeft>
<NavTitle>{t('Add.textLinkSettings')}</NavTitle>
<NavRight>
<Link className={`${stateLink.length < 1 && 'disabled'}`} onClick={() => {
props.onInsertLink(stateLink, stateDisplay);
props.isNavigate ? f7.views.current.router.back() : props.closeModal();
}} text={t('Add.textDone')}></Link>
</NavRight>
</Navbar>
}
<List inlineLabels className='inputs-list'> <List inlineLabels className='inputs-list'>
<ListInput <ListInput
label={_t.textLink} label={_t.textLink}
@ -62,13 +55,13 @@ const PageLink = props => {
setAutoUpdate(event.target.value == ''); setAutoUpdate(event.target.value == '');
}} }}
></ListInput> ></ListInput>
{/* <ListInput <ListInput
label={_t.textScreenTip} label={_t.textScreenTip}
type="text" type="text"
placeholder={_t.textScreenTip} placeholder={_t.textScreenTip}
value={stateTip} value={stateTip}
onChange={(event) => {setTip(event.target.value)}} onChange={(event) => {setTip(event.target.value)}}
></ListInput> */} ></ListInput>
</List> </List>
{/* <List className="buttons-list"> {/* <List className="buttons-list">
<ListButton className={'button-fill button-raised' + (stateLink.length < 1 ? ' disabled' : '')} title={_t.textInsert} onClick={() => { <ListButton className={'button-fill button-raised' + (stateLink.length < 1 ? ' disabled' : '')} title={_t.textInsert} onClick={() => {

6
apps/documenteditor/mobile/src/view/add/AddOther.jsx
View file

@ -193,14 +193,10 @@ const AddOther = props => {
</ListItem> </ListItem>
{(isText && !disabledAddLink) && <ListItem title={_t.textLink} href={isHyperLink ? '/edit-link/' : '/add-link/'} routeProps={{ {(isText && !disabledAddLink) && <ListItem title={_t.textLink} href={isHyperLink ? '/edit-link/' : '/add-link/'} routeProps={{
onClosed: props.onCloseLinkSettings, onClosed: props.onCloseLinkSettings,
isNavigate: props.isNavigate isNavigate: true
}}> }}>
<Icon slot="media" icon="icon-link"></Icon> <Icon slot="media" icon="icon-link"></Icon>
</ListItem>} </ListItem>}
{/* routeProps={{
onInsertLink: props.onInsertLink,
getDisplayLinkText: props.getDisplayLinkText
}} */}
{!disabledAddPageNumber && {!disabledAddPageNumber &&
<ListItem title={_t.textPageNumber} link={'/add-page-number/'} routeProps={{ <ListItem title={_t.textPageNumber} link={'/add-page-number/'} routeProps={{
onInsertPageNumber: props.onInsertPageNumber onInsertPageNumber: props.onInsertPageNumber

46
apps/documenteditor/mobile/src/view/edit/EditHyperlink.jsx
View file

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

16
apps/presentationeditor/mobile/locale/en.json
View file

@ -58,7 +58,8 @@
"textColumns": "Columns", "textColumns": "Columns",
"textCopyCutPasteActions": "Copy, Cut and Paste Actions", "textCopyCutPasteActions": "Copy, Cut and Paste Actions",
"textDoNotShowAgain": "Don't show again", "textDoNotShowAgain": "Don't show again",
"textRows": "Rows" "textRows": "Rows",
"menuEditLink": "Edit Link"
}, },
"Controller": { "Controller": {
"Main": { "Main": {
@ -242,7 +243,10 @@
"textSlideNumber": "Slide Number", "textSlideNumber": "Slide Number",
"textTable": "Table", "textTable": "Table",
"textTableSize": "Table Size", "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": { "Edit": {
"notcriticalErrorTitle": "Warning", "notcriticalErrorTitle": "Warning",
@ -349,7 +353,8 @@
"textPush": "Push", "textPush": "Push",
"textRemoveChart": "Remove Chart", "textRemoveChart": "Remove Chart",
"textRemoveImage": "Remove Image", "textRemoveImage": "Remove Image",
"textRemoveLink": "Remove Link", "del_textRemoveLink": "Remove Link",
"textDeleteLink": "Delete Link",
"textRemoveShape": "Remove Shape", "textRemoveShape": "Remove Shape",
"textRemoveTable": "Remove Table", "textRemoveTable": "Remove Table",
"textReorder": "Reorder", "textReorder": "Reorder",
@ -393,7 +398,10 @@
"textZoom": "Zoom", "textZoom": "Zoom",
"textZoomIn": "Zoom In", "textZoomIn": "Zoom In",
"textZoomOut": "Zoom Out", "textZoomOut": "Zoom Out",
"textZoomRotate": "Zoom and Rotate" "textZoomRotate": "Zoom and Rotate",
"textCancel": "Cancel",
"textRequired": "Required",
"textRecommended": "Recommended"
}, },
"Settings": { "Settings": {
"mniSlideStandard": "Standard (4:3)", "mniSlideStandard": "Standard (4:3)",

62
apps/presentationeditor/mobile/src/controller/add/AddLink.jsx
View file

@ -1,9 +1,20 @@
import React, {Component} from 'react'; 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 {Device} from '../../../../../common/mobile/utils/device';
import { withTranslation} from 'react-i18next'; 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 { class AddLinkController extends Component {
constructor (props) { constructor (props) {
@ -17,9 +28,9 @@ class AddLinkController extends Component {
closeModal () { closeModal () {
if ( Device.phone ) { if ( Device.phone ) {
f7.sheet.close('.add-popup', true); f7.popup.close('#add-link-popup');
} else { } else {
f7.popover.close('#add-popover'); f7.popover.close('#add-link-popover');
} }
} }
@ -33,14 +44,16 @@ class AddLinkController extends Component {
WebLink: 1 WebLink: 1
}; };
const display = linkInfo.display; const display = linkInfo.display;
// const tip = linkInfo.tip; const tip = linkInfo.tip;
const props = new Asc.CHyperlinkProperty(); const props = new Asc.CHyperlinkProperty();
let def_display = ''; let def_display = '';
if (type == c_oHyperlinkType.WebLink) { if (type == c_oHyperlinkType.WebLink) {
let url = linkInfo.url; let url = linkInfo.url;
const urltype = api.asc_getUrlType(url.trim()); const urltype = api.asc_getUrlType(url.trim());
const isEmail = (urltype == 2); const isEmail = (urltype == 2);
if (urltype < 1) { if (urltype < 1) {
f7.dialog.create({ f7.dialog.create({
title: _t.notcriticalErrorTitle, title: _t.notcriticalErrorTitle,
@ -60,11 +73,13 @@ class AddLinkController extends Component {
url = url.replace(new RegExp("%20", 'g'), " "); url = url.replace(new RegExp("%20", 'g'), " ");
props.put_Value(url); props.put_Value(url);
// props.put_ToolTip(tip); props.put_ToolTip(tip);
def_display = url; def_display = url;
} else { } else {
let url = "ppaction://hlink"; let url = "ppaction://hlink";
let slidetip = ''; let slidetip = '';
switch (linkInfo.linkTo) { switch (linkInfo.linkTo) {
case 0: case 0:
url = url + "showjump?jump=nextslide"; url = url + "showjump?jump=nextslide";
@ -87,8 +102,9 @@ class AddLinkController extends Component {
slidetip = _t.textSlide + ' ' + (linkInfo.numberTo + 1); slidetip = _t.textSlide + ' ' + (linkInfo.numberTo + 1);
break; break;
} }
props.put_Value(url); props.put_Value(url);
// props.put_ToolTip(!tip ? slidetip : tip); props.put_ToolTip(!tip ? slidetip : tip);
def_display = slidetip; def_display = slidetip;
} }
@ -98,20 +114,40 @@ class AddLinkController extends Component {
props.put_Text(null); props.put_Text(null);
api.add_Hyperlink(props); api.add_Hyperlink(props);
this.props.isNavigate ? f7.views.current.router.back() : this.closeModal();
this.closeModal();
} }
getTextDisplay () { getTextDisplay () {
return this.textDisplay; 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 () { render () {
return ( return (
<PageLink onInsertLink={this.onInsertLink} !this.props.isNavigate ?
getTextDisplay={this.getTextDisplay} Device.phone ?
noNavbar={this.props.noNavbar} <Popup id="add-link-popup" onPopupClosed={() => this.props.onClosed('add-link')}>
/> <View routes={routes} style={{height: '100%'}}>
<PageLink closeModal={this.closeModal} onInsertLink={this.onInsertLink} getTextDisplay={this.getTextDisplay} isNavigate={this.props.isNavigate} />
</View>
</Popup>
:
<Popover id="add-link-popover" className="popover__titled" closeByOutsideClick={false} onPopoverClosed={() => this.props.onClosed('add-link')}>
<View routes={routes} style={{height: '410px'}}>
<PageLink closeModal={this.closeModal} onInsertLink={this.onInsertLink} getTextDisplay={this.getTextDisplay} isNavigate={this.props.isNavigate}/>
</View>
</Popover>
:
<PageLink closeModal={this.closeModal} onInsertLink={this.onInsertLink} getTextDisplay={this.getTextDisplay} isNavigate={this.props.isNavigate} />
) )
} }
} }

2
apps/presentationeditor/mobile/src/controller/add/AddOther.jsx
View file

@ -9,6 +9,7 @@ import {AddOther} from '../../view/add/AddOther';
class AddOtherController extends Component { class AddOtherController extends Component {
constructor (props) { constructor (props) {
super(props); super(props);
this.onStyleClick = this.onStyleClick.bind(this); this.onStyleClick = this.onStyleClick.bind(this);
this.onGetTableStylesPreviews = this.onGetTableStylesPreviews.bind(this); this.onGetTableStylesPreviews = this.onGetTableStylesPreviews.bind(this);
} }
@ -120,6 +121,7 @@ class AddOtherController extends Component {
onStyleClick={this.onStyleClick} onStyleClick={this.onStyleClick}
hideAddComment={this.hideAddComment} hideAddComment={this.hideAddComment}
onGetTableStylesPreviews = {this.onGetTableStylesPreviews} onGetTableStylesPreviews = {this.onGetTableStylesPreviews}
onCloseLinkSettings={this.props.onCloseLinkSettings}
/> />
) )
} }

99
apps/presentationeditor/mobile/src/controller/edit/EditLink.jsx
View file

@ -1,10 +1,21 @@
import React, { Component } from 'react'; 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 { Device } from '../../../../../common/mobile/utils/device';
import {observer, inject} from "mobx-react"; import {observer, inject} from "mobx-react";
import { withTranslation } from 'react-i18next'; 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 { class EditLinkController extends Component {
constructor (props) { constructor (props) {
@ -21,9 +32,9 @@ class EditLinkController extends Component {
closeModal () { closeModal () {
if ( Device.phone ) { if ( Device.phone ) {
f7.sheet.close('#edit-sheet', true); f7.popup.close('#edit-link-popup');
} else { } else {
f7.popover.close('#edit-popover'); f7.popover.close('#edit-link-popover');
} }
} }
@ -156,30 +167,80 @@ class EditLinkController extends Component {
props.put_Text(null); props.put_Text(null);
api.change_Hyperlink(props); api.change_Hyperlink(props);
this.props.isNavigate ? f7.views.current.router.back() : this.closeModal();
this.closeModal();
} }
onRemoveLink() { onRemoveLink() {
const api = Common.EditorApi.get(); const api = Common.EditorApi.get();
api.remove_Hyperlink(); 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 () { render () {
return ( return (
<EditLink !this.props.isNavigate ?
initLink={this.initLink} Device.phone ?
typeLink={this.typeLink} <Popup id="edit-link-popup" onPopupClosed={() => this.props.onClosed('edit-link')}>
url={this.url} <View routes={routes} style={{height: '100%'}}>
display={this.display} <EditLink
tooltip={this.tooltip} initLink={this.initLink}
slideLink={this.slideLink} typeLink={this.typeLink}
slideNum={this.slideNum} url={this.url}
onEditLink={this.onEditLink} display={this.display}
onRemoveLink={this.onRemoveLink} tooltip={this.tooltip}
slidesCount={this.slidesCount} slideLink={this.slideLink}
/> slideNum={this.slideNum}
onEditLink={this.onEditLink}
onRemoveLink={this.onRemoveLink}
slidesCount={this.slidesCount}
closeModal={this.closeModal}
isNavigate={this.props.isNavigate}
/>
</View>
</Popup>
:
<Popover id="edit-link-popover" className="popover__titled" closeByOutsideClick={false} onPopoverClosed={() => this.props.onClosed('edit-link')}>
<View routes={routes} style={{height: '410px'}}>
<EditLink
initLink={this.initLink}
typeLink={this.typeLink}
url={this.url}
display={this.display}
tooltip={this.tooltip}
slideLink={this.slideLink}
slideNum={this.slideNum}
onEditLink={this.onEditLink}
onRemoveLink={this.onRemoveLink}
slidesCount={this.slidesCount}
closeModal={this.closeModal}
isNavigate={this.props.isNavigate}
/>
</View>
</Popover>
:
<EditLink
initLink={this.initLink}
typeLink={this.typeLink}
url={this.url}
display={this.display}
tooltip={this.tooltip}
slideLink={this.slideLink}
slideNum={this.slideNum}
onEditLink={this.onEditLink}
onRemoveLink={this.onRemoveLink}
slidesCount={this.slidesCount}
closeModal={this.closeModal}
isNavigate={this.props.isNavigate}
/>
) )
} }
} }

27
apps/presentationeditor/mobile/src/page/main.jsx
View file

@ -11,6 +11,8 @@ import { Preview } from "../controller/Preview";
import { Search, SearchSettings } from '../controller/Search'; import { Search, SearchSettings } from '../controller/Search';
import ContextMenu from '../controller/ContextMenu'; import ContextMenu from '../controller/ContextMenu';
import { Toolbar } from "../controller/Toolbar"; import { Toolbar } from "../controller/Toolbar";
import { AddLinkController } from '../controller/add/AddLink';
import { EditLinkController } from '../controller/edit/EditLink';
class MainPage extends Component { class MainPage extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
@ -19,7 +21,9 @@ class MainPage extends Component {
addOptionsVisible: false, addOptionsVisible: false,
settingsVisible: false, settingsVisible: false,
collaborationVisible: false, collaborationVisible: false,
previewVisible: false previewVisible: false,
addLinkSettingsVisible: false,
editLinkSettingsVisible: false
}; };
} }
@ -49,6 +53,12 @@ class MainPage extends Component {
} else if ( opts === 'preview' ) { } else if ( opts === 'preview' ) {
this.state.previewVisible && (opened = true); this.state.previewVisible && (opened = true);
newState.previewVisible = 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) { for (let key in this.state) {
@ -82,6 +92,10 @@ class MainPage extends Component {
return {collaborationVisible: false} return {collaborationVisible: false}
else if ( opts == 'preview' ) else if ( opts == 'preview' )
return {previewVisible: false}; 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) { if ((opts === 'edit' || opts === 'coauth') && Device.phone) {
f7.navbar.show('.main-navbar'); f7.navbar.show('.main-navbar');
@ -144,7 +158,15 @@ class MainPage extends Component {
} }
{ {
!this.state.addOptionsVisible ? null : !this.state.addOptionsVisible ? null :
<AddOptions onclosed={this.handleOptionsViewClosed.bind(this, 'add')} showOptions={this.state.addShowOptions} /> <AddOptions onCloseLinkSettings={this.handleOptionsViewClosed.bind(this)} onclosed={this.handleOptionsViewClosed.bind(this, 'add')} showOptions={this.state.addShowOptions} />
}
{
!this.state.addLinkSettingsVisible ? null :
<AddLinkController onClosed={this.handleOptionsViewClosed.bind(this)} />
}
{
!this.state.editLinkSettingsVisible ? null :
<EditLinkController onClosed={this.handleOptionsViewClosed.bind(this)} />
} }
{ {
!this.state.settingsVisible ? null : !this.state.settingsVisible ? null :
@ -155,7 +177,6 @@ class MainPage extends Component {
<CollaborationView onclosed={this.handleOptionsViewClosed.bind(this, 'coauth')} /> <CollaborationView onclosed={this.handleOptionsViewClosed.bind(this, 'coauth')} />
} }
{appOptions.isDocReady && <ContextMenu openOptions={this.handleClickToOpenOptions.bind(this)} />} {appOptions.isDocReady && <ContextMenu openOptions={this.handleClickToOpenOptions.bind(this)} />}
</Page> </Page>
</Fragment> </Fragment>
) )

62
apps/presentationeditor/mobile/src/view/add/Add.jsx
View file

@ -12,7 +12,9 @@ import {PageImageLinkSettings} from "./AddImage";
import {AddOtherController} from "../../controller/add/AddOther"; import {AddOtherController} from "../../controller/add/AddOther";
import {PageAddTable} from "./AddOther"; import {PageAddTable} from "./AddOther";
import {AddLinkController} from "../../controller/add/AddLink"; 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 = [ const routes = [
// Image // Image
@ -20,6 +22,7 @@ const routes = [
path: '/add-image-from-url/', path: '/add-image-from-url/',
component: PageImageLinkSettings component: PageImageLinkSettings
}, },
// Other // Other
{ {
path: '/add-table/', path: '/add-table/',
@ -36,6 +39,25 @@ const routes = [
{ {
path: '/add-link-to/', path: '/add-link-to/',
component: PageLinkTo 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', icon: 'icon-add-shape',
component: <AddShapeController/> component: <AddShapeController/>
}); });
tabs.push({
caption: _t.textImage, // tabs.push({
id: 'add-image', // caption: _t.textImage,
icon: 'icon-add-image', // id: 'add-image',
component: <AddImageController/> // icon: 'icon-add-image',
}); // component: <AddImageController/>
// });
tabs.push({ tabs.push({
caption: _t.textOther, caption: _t.textOther,
id: 'add-other', id: 'add-other',
icon: 'icon-add-other', icon: 'icon-add-other',
component: <AddOtherController/> component: <AddOtherController onCloseLinkSettings={props.onCloseLinkSettings} />
}); });
} }
if(!showPanels && !countPages) { if(!showPanels && !countPages) {
@ -111,13 +135,15 @@ const AddTabs = props => {
component: <AddSlideController /> component: <AddSlideController />
}); });
} }
if (showPanels && showPanels === 'link') {
tabs.push({ // if (showPanels && showPanels === 'link') {
caption: _t.textAddLink, // tabs.push({
id: 'add-link', // caption: _t.textAddLink,
component: <AddLinkController noNavbar={true}/> // id: 'add-link',
}); // component: <AddLinkController noNavbar={true}/>
} // });
// }
return ( return (
<View style={props.style} stackPages={true} routes={routes}> <View style={props.style} stackPages={true} routes={routes}>
<Page pageContent={false}> <Page pageContent={false}>
@ -142,10 +168,10 @@ class AddView extends Component {
return ( return (
show_popover ? show_popover ?
<Popover id="add-popover" className="popover__titled" closeByOutsideClick={false} onPopoverClosed={() => this.props.onclosed()}> <Popover id="add-popover" className="popover__titled" closeByOutsideClick={false} onPopoverClosed={() => this.props.onclosed()}>
<AddTabs inPopover={true} onOptionClick={this.onoptionclick} style={{height: '410px'}} showPanels={this.props.showPanels} /> <AddTabs inPopover={true} onOptionClick={this.onoptionclick} onCloseLinkSettings={this.props.onCloseLinkSettings} style={{height: '410px'}} showPanels={this.props.showPanels} />
</Popover> : </Popover> :
<Popup className="add-popup" onPopupClosed={() => this.props.onclosed()}> <Popup className="add-popup" onPopupClosed={() => this.props.onclosed()}>
<AddTabs onOptionClick={this.onoptionclick} showPanels={this.props.showPanels} /> <AddTabs onOptionClick={this.onoptionclick} onCloseLinkSettings={this.props.onCloseLinkSettings} showPanels={this.props.showPanels} />
</Popup> </Popup>
) )
} }
@ -166,7 +192,7 @@ const Add = props => {
props.onclosed(); props.onclosed();
} }
}; };
return <AddView usePopover={!Device.phone} onclosed={onviewclosed} showPanels={props.showOptions} /> return <AddView usePopover={!Device.phone} onCloseLinkSettings={props.onCloseLinkSettings} onclosed={onviewclosed} showPanels={props.showOptions} />
}; };
export default Add; export default Add;

23
apps/presentationeditor/mobile/src/view/add/AddImage.jsx
View file

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

94
apps/presentationeditor/mobile/src/view/add/AddLink.jsx
View file

@ -1,6 +1,6 @@
import React, {useState} from 'react'; import React, {useState} from 'react';
import {observer, inject} from "mobx-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 { useTranslation } from 'react-i18next';
import {Device} from "../../../../../common/mobile/utils/device"; import {Device} from "../../../../../common/mobile/utils/device";
@ -8,9 +8,16 @@ const PageTypeLink = props => {
const { t } = useTranslation(); const { t } = useTranslation();
const _t = t('View.Add', {returnObjects: true}); const _t = t('View.Add', {returnObjects: true});
const [typeLink, setTypeLink] = useState(props.curType); const [typeLink, setTypeLink] = useState(props.curType);
return ( return (
<Page> <Page>
<Navbar title={_t.textLinkType} backLink={_t.textBack}/> <Navbar className="navbar-link-settings" title={_t.textLinkType} backLink={_t.textBack}>
{Device.phone &&
<NavRight>
<Link icon='icon-close' popupClose="#add-link-popup"></Link>
</NavRight>
}
</Navbar>
<List> <List>
<ListItem title={_t.textExternalLink} radio checked={typeLink === 1} onClick={() => {setTypeLink(1); props.changeType(1);}}></ListItem> <ListItem title={_t.textExternalLink} radio checked={typeLink === 1} onClick={() => {setTypeLink(1); props.changeType(1);}}></ListItem>
<ListItem title={_t.textSlideInThisPresentation} radio checked={typeLink === 0} onClick={() => {setTypeLink(0); props.changeType(0);}}></ListItem> <ListItem title={_t.textSlideInThisPresentation} radio checked={typeLink === 0} onClick={() => {setTypeLink(0); props.changeType(0);}}></ListItem>
@ -42,28 +49,35 @@ const PageLinkTo = props => {
setNumberTo(value); setNumberTo(value);
props.changeTo(4, value); props.changeTo(4, value);
}; };
return ( return (
<Page> <Page>
<Navbar title={_t.textLinkTo} backLink={_t.textBack}/> <Navbar className="navbar-link-settings" title={_t.textLinkTo} backLink={_t.textBack}>
{Device.phone &&
<NavRight>
<Link icon='icon-close' popupClose="#add-link-popup"></Link>
</NavRight>
}
</Navbar>
<List> <List>
<ListItem title={_t.textNextSlide} radio checked={stateTypeTo === 0} onClick={() => {changeTypeTo(0)}}></ListItem> <ListItem title={_t.textNextSlide} radio checked={stateTypeTo === 0} onClick={() => {changeTypeTo(0)}}></ListItem>
<ListItem title={_t.textPreviousSlide} radio checked={stateTypeTo === 1} onClick={() => {changeTypeTo(1)}}></ListItem> <ListItem title={_t.textPreviousSlide} radio checked={stateTypeTo === 1} onClick={() => {changeTypeTo(1)}}></ListItem>
<ListItem title={_t.textFirstSlide} radio checked={stateTypeTo === 2} onClick={() => {changeTypeTo(2)}}></ListItem> <ListItem title={_t.textFirstSlide} radio checked={stateTypeTo === 2} onClick={() => {changeTypeTo(2)}}></ListItem>
<ListItem title={_t.textLastSlide} radio checked={stateTypeTo === 3} onClick={() => {changeTypeTo(3)}}></ListItem> <ListItem title={_t.textLastSlide} radio checked={stateTypeTo === 3} onClick={() => {changeTypeTo(3)}}></ListItem>
<ListItem title={_t.textSlideNumber}> <ListItem title={_t.textSlideNumber}>
{!isAndroid && <div slot='after-start'>{stateNumberTo + 1}</div>} {!isAndroid && <div slot='after-start'>{stateNumberTo + 1}</div>}
<div slot='after'> <div slot='after'>
<Segmented> <Segmented>
<Button outline className='decrement item-link' onClick={() => {changeNumber(stateNumberTo, true);}}> <Button outline className='decrement item-link' onClick={() => {changeNumber(stateNumberTo, true);}}>
{isAndroid ? <Icon icon="icon-expand-down"></Icon> : ' - '} {isAndroid ? <Icon icon="icon-expand-down"></Icon> : ' - '}
</Button> </Button>
{isAndroid && <label>{stateNumberTo + 1}</label>} {isAndroid && <label>{stateNumberTo + 1}</label>}
<Button outline className='increment item-link' onClick={() => {changeNumber(stateNumberTo, false);}}> <Button outline className='increment item-link' onClick={() => {changeNumber(stateNumberTo, false);}}>
{isAndroid ? <Icon icon="icon-expand-up"></Icon> : ' + '} {isAndroid ? <Icon icon="icon-expand-up"></Icon> : ' + '}
</Button> </Button>
</Segmented> </Segmented>
</div> </div>
</ListItem> </ListItem>
</List> </List>
</Page> </Page>
) )
@ -100,11 +114,29 @@ const PageLink = props => {
const displayDisabled = display !== false && display === null; const displayDisabled = display !== false && display === null;
const [stateDisplay, setDisplay] = useState(display !== false ? ((display !== null) ? display : _t.textDefault) : ""); const [stateDisplay, setDisplay] = useState(display !== false ? ((display !== null) ? display : _t.textDefault) : "");
const [stateAutoUpdate, setAutoUpdate] = useState(!stateDisplay ? true : false); const [stateAutoUpdate, setAutoUpdate] = useState(!stateDisplay ? true : false);
// const [screenTip, setScreenTip] = useState(''); const [screenTip, setScreenTip] = useState('');
return ( return (
<Page> <Page>
{!props.noNavbar && <Navbar title={_t.textLink} backLink={_t.textBack}/>} <Navbar className="navbar-link-settings">
<NavLeft>
<Link text={Device.ios ? t('View.Add.textCancel') : ''} onClick={() => {
props.isNavigate ? f7.views.current.router.back() : props.closeModal();
}}>
{Device.android && <Icon icon='icon-close' />}
</Link>
</NavLeft>
<NavTitle>{t('View.Add.textLinkSettings')}</NavTitle>
<NavRight>
<Link className={`${typeLink === 1 && link.length < 1 && 'disabled'}`} onClick={() => {
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 && <Icon icon={link.length < 1 ? 'icon-done-disabled' : 'icon-done'} />}
</Link>
</NavRight>
</Navbar>
<List inlineLabels className='inputs-list'> <List inlineLabels className='inputs-list'>
<ListItem link={'/add-link-type/'} title={_t.textLinkType} after={textType} routeProps={{ <ListItem link={'/add-link-type/'} title={_t.textLinkType} after={textType} routeProps={{
changeType: changeType, changeType: changeType,
@ -113,7 +145,7 @@ const PageLink = props => {
{typeLink === 1 ? {typeLink === 1 ?
<ListInput label={_t.textLink} <ListInput label={_t.textLink}
type="text" type="text"
placeholder={_t.textLink} placeholder={t('View.Add.textRequired')}
value={link} value={link}
onChange={(event) => { onChange={(event) => {
setLink(event.target.value); setLink(event.target.value);
@ -127,7 +159,7 @@ const PageLink = props => {
} }
<ListInput label={_t.textDisplay} <ListInput label={_t.textDisplay}
type="text" type="text"
placeholder={_t.textDisplay} placeholder={t('View.Add.textRecommended')}
value={stateDisplay} value={stateDisplay}
disabled={displayDisabled} disabled={displayDisabled}
onChange={(event) => { onChange={(event) => {
@ -135,23 +167,23 @@ const PageLink = props => {
setAutoUpdate(event.target.value == ''); setAutoUpdate(event.target.value == '');
}} }}
/> />
{/* <ListInput label={_t.textScreenTip} <ListInput label={_t.textScreenTip}
type="text" type="text"
placeholder={_t.textScreenTip} placeholder={_t.textScreenTip}
value={screenTip} value={screenTip}
onChange={(event) => {setScreenTip(event.target.value)}} onChange={(event) => {setScreenTip(event.target.value)}}
/> */} />
</List> </List>
<List className="buttons-list"> {/* <List className="buttons-list">
<ListButton title={_t.textInsert} <ListButton title={_t.textInsert}
className={`button-fill button-raised ${typeLink === 1 && link.length < 1 && ' disabled'}`} className={`button-fill button-raised ${typeLink === 1 && link.length < 1 && ' disabled'}`}
onClick={() => { onClick={() => {
props.onInsertLink(typeLink, (typeLink === 1 ? props.onInsertLink(typeLink, (typeLink === 1 ?
{url: link, display: stateDisplay, displayDisabled: displayDisabled } : {url: link, display: stateDisplay, displayDisabled: displayDisabled, tip: screenTip } :
{linkTo: linkTo, numberTo: numberTo, display: stateDisplay, displayDisabled: displayDisabled})); {linkTo: linkTo, numberTo: numberTo, display: stateDisplay, displayDisabled: displayDisabled, tip: screenTip}));
}} }}
/> />
</List> </List> */}
</Page> </Page>
) )
}; };

10
apps/presentationeditor/mobile/src/view/add/AddOther.jsx
View file

@ -45,6 +45,8 @@ const AddOther = props => {
const _t = t('View.Add', {returnObjects: true}); const _t = t('View.Add', {returnObjects: true});
const showInsertLink = props.storeLinkSettings.canAddLink && !props.storeFocusObjects.paragraphLocked; const showInsertLink = props.storeLinkSettings.canAddLink && !props.storeFocusObjects.paragraphLocked;
const hideAddComment = props.hideAddComment(); const hideAddComment = props.hideAddComment();
const isHyperLink = props.storeFocusObjects.settings.indexOf('hyperlink') > -1;
return ( return (
<List> <List>
<ListItem title={_t.textTable} link={'/add-table/'} onClick = {() => props.onGetTableStylesPreviews()} routeProps={{ <ListItem title={_t.textTable} link={'/add-table/'} onClick = {() => props.onGetTableStylesPreviews()} routeProps={{
@ -58,8 +60,14 @@ const AddOther = props => {
}}> }}>
<Icon slot="media" icon="icon-insert-comment"></Icon> <Icon slot="media" icon="icon-insert-comment"></Icon>
</ListItem>} </ListItem>}
<ListItem title={_t.textImage} link='/add-image/'>
<Icon slot="media" icon="icon-image"></Icon>
</ListItem>
{showInsertLink && {showInsertLink &&
<ListItem title={_t.textLink} link={'/add-link/'}> <ListItem title={_t.textLink} link={isHyperLink ? '/edit-link/' : '/add-link/'} routeProps={{
onClosed: props.onCloseLinkSettings,
isNavigate: true
}}>
<Icon slot="media" icon="icon-link"></Icon> <Icon slot="media" icon="icon-link"></Icon>
</ListItem> </ListItem>
} }

10
apps/presentationeditor/mobile/src/view/edit/Edit.jsx
View file

@ -19,7 +19,6 @@ import { PageShapeStyle, PageShapeStyleNoFill, PageReplaceContainer, PageReorder
import { PageImageReplace, PageImageReorder, PageImageAlign, PageLinkSettings } from './EditImage'; import { PageImageReplace, PageImageReorder, PageImageAlign, PageLinkSettings } from './EditImage';
import { PageTableStyle, PageTableStyleOptions, PageTableCustomFillColor, PageTableBorderColor, PageTableCustomBorderColor, PageTableReorder, PageTableAlign } from './EditTable'; import { PageTableStyle, PageTableStyleOptions, PageTableCustomFillColor, PageTableBorderColor, PageTableCustomBorderColor, PageTableReorder, PageTableAlign } from './EditTable';
import { PageChartDesign, PageChartDesignType, PageChartDesignStyle, PageChartDesignFill, PageChartDesignBorder, PageChartCustomFillColor, PageChartBorderColor, PageChartCustomBorderColor, PageChartReorder, PageChartAlign } from './EditChart' import { PageChartDesign, PageChartDesignType, PageChartDesignStyle, PageChartDesignFill, PageChartDesignBorder, PageChartCustomFillColor, PageChartBorderColor, PageChartCustomBorderColor, PageChartReorder, PageChartAlign } from './EditChart'
import { PageLinkTo, PageTypeLink } from './EditLink'
const routes = [ const routes = [
@ -214,14 +213,9 @@ const routes = [
}, },
// Link // Link
{ {
path: '/edit-link-type/', path: '/edit-link/',
component: PageTypeLink component: EditLinkController
},
{
path: '/edit-link-to/',
component: PageLinkTo
} }
]; ];

69
apps/presentationeditor/mobile/src/view/edit/EditLink.jsx
View file

@ -1,10 +1,10 @@
import React, {useState, useEffect} from 'react'; import React, {useState, useEffect} from 'react';
import {observer, inject} from "mobx-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 { useTranslation } from 'react-i18next';
import {Device} from "../../../../../common/mobile/utils/device"; import {Device} from "../../../../../common/mobile/utils/device";
const PageTypeLink = props => { const PageEditTypeLink = props => {
const { t } = useTranslation(); const { t } = useTranslation();
const _t = t('View.Edit', {returnObjects: true}); const _t = t('View.Edit', {returnObjects: true});
const [typeLink, setTypeLink] = useState(props.curType); const [typeLink, setTypeLink] = useState(props.curType);
@ -17,12 +17,10 @@ const PageTypeLink = props => {
return ( return (
<Page> <Page>
<Navbar title={_t.textLinkType} backLink={_t.textBack}> <Navbar className="navbar-link-settings" title={_t.textLinkType} backLink={_t.textBack}>
{Device.phone && {Device.phone &&
<NavRight> <NavRight>
<Link sheetClose='#edit-sheet'> <Link icon='icon-close' popupClose="#edit-link-popup"></Link>
<Icon icon='icon-expand-down'/>
</Link>
</NavRight> </NavRight>
} }
</Navbar> </Navbar>
@ -34,7 +32,7 @@ const PageTypeLink = props => {
) )
}; };
const PageLinkTo = props => { const PageEditLinkTo = props => {
const isAndroid = Device.android; const isAndroid = Device.android;
const { t } = useTranslation(); const { t } = useTranslation();
const _t = t('View.Edit', {returnObjects: true}); const _t = t('View.Edit', {returnObjects: true});
@ -70,12 +68,10 @@ const PageLinkTo = props => {
return ( return (
<Page> <Page>
<Navbar title={_t.textLinkTo} backLink={_t.textBack}> <Navbar className="navbar-link-settings" title={_t.textLinkTo} backLink={_t.textBack}>
{Device.phone && {Device.phone &&
<NavRight> <NavRight>
<Link sheetClose='#edit-sheet'> <Link icon='icon-close' popupClose="#edit-link-popup"></Link>
<Icon icon='icon-expand-down'/>
</Link>
</NavRight> </NavRight>
} }
</Navbar> </Navbar>
@ -150,14 +146,24 @@ const PageLink = props => {
return ( return (
<Page> <Page>
<Navbar title={_t.textLink} backLink={_t.textBack}> <Navbar className="navbar-link-settings">
{Device.phone && <NavLeft>
<NavRight> <Link text={Device.ios ? t('View.Edit.textCancel') : ''} onClick={() => {
<Link sheetClose='#edit-sheet'> props.isNavigate ? f7.views.current.router.back() : props.closeModal();
<Icon icon='icon-expand-down'/> }}>
</Link> {Device.android && <Icon icon='icon-close' />}
</NavRight> </Link>
} </NavLeft>
<NavTitle>{t('View.Edit.textLinkSettings')}</NavTitle>
<NavRight>
<Link className={`${link.length < 1 && 'disabled'}`} onClick={() => {
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 && <Icon icon={link.length < 1 ? 'icon-done-disabled' : 'icon-done'} />}
</Link>
</NavRight>
</Navbar> </Navbar>
<List inlineLabels className='inputs-list'> <List inlineLabels className='inputs-list'>
<ListItem link={'/edit-link-type/'} title={_t.textLinkType} after={textType} routeProps={{ <ListItem link={'/edit-link-type/'} title={_t.textLinkType} after={textType} routeProps={{
@ -168,7 +174,7 @@ const PageLink = props => {
{typeLink !== 0 ? {typeLink !== 0 ?
<ListInput label={_t.textLink} <ListInput label={_t.textLink}
type="text" type="text"
placeholder={_t.textLink} placeholder={t('View.Edit.textRequired')}
value={link} value={link}
onChange={(event) => {setLink(event.target.value)}} onChange={(event) => {setLink(event.target.value)}}
/> : /> :
@ -182,7 +188,7 @@ const PageLink = props => {
} }
<ListInput label={_t.textDisplay} <ListInput label={_t.textDisplay}
type="text" type="text"
placeholder={_t.textDisplay} placeholder={t('View.Edit.textRecommended')}
value={stateDisplay} value={stateDisplay}
disabled={displayDisabled} disabled={displayDisabled}
onChange={(event) => {setDisplay(event.target.value)}} onChange={(event) => {setDisplay(event.target.value)}}
@ -195,18 +201,11 @@ const PageLink = props => {
/> />
</List> </List>
<List className="buttons-list"> <List className="buttons-list">
<ListButton title={_t.textEditLink} <ListButton title={t('View.Edit.textDeleteLink')}
className={`button-fill button-raised${typeLink === 1 && link.length < 1 && ' disabled'}`}
onClick={() => {
props.onEditLink(typeLink, (typeLink === 1 ?
{url: link, display: stateDisplay, tip: screenTip, displayDisabled: displayDisabled } :
{linkTo: linkTo, numberTo: numberTo, display: stateDisplay, tip: screenTip, displayDisabled: displayDisabled}));
}}
/>
<ListButton title={_t.textRemoveLink}
className={`button-red button-fill button-raised`} className={`button-red button-fill button-raised`}
onClick={() => { onClick={() => {
props.onRemoveLink() props.onRemoveLink();
props.isNavigate ? f7.views.current.router.back() : props.closeModal();
}} }}
/> />
</List> </List>
@ -214,9 +213,9 @@ const PageLink = props => {
) )
}; };
const _PageLinkTo = inject("storeFocusObjects")(observer(PageLinkTo)); const _PageEditLinkTo = inject("storeFocusObjects")(observer(PageEditLinkTo));
const _PageTypeLink = inject("storeFocusObjects")(observer(PageTypeLink)); const _PageEditTypeLink = inject("storeFocusObjects")(observer(PageEditTypeLink));
export {PageLink as EditLink, export {PageLink as EditLink,
_PageLinkTo as PageLinkTo, _PageEditLinkTo as PageEditLinkTo,
_PageTypeLink as PageTypeLink} _PageEditTypeLink as PageEditTypeLink}

13
apps/spreadsheeteditor/mobile/locale/en.json
View file

@ -53,6 +53,7 @@
"menuMerge": "Merge", "menuMerge": "Merge",
"menuMore": "More", "menuMore": "More",
"menuOpenLink": "Open Link", "menuOpenLink": "Open Link",
"menuEditLink": "Edit Link",
"menuShow": "Show", "menuShow": "Show",
"menuUnfreezePanes": "Unfreeze Panes", "menuUnfreezePanes": "Unfreeze Panes",
"menuUnmerge": "Unmerge", "menuUnmerge": "Unmerge",
@ -367,7 +368,9 @@
"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\"",
"txtSorting": "Sorting", "txtSorting": "Sorting",
"txtSortSelected": "Sort selected", "txtSortSelected": "Sort selected",
"txtYes": "Yes" "txtYes": "Yes",
"textRecommended": "Recommended",
"textDone": "Done"
}, },
"Edit": { "Edit": {
"notcriticalErrorTitle": "Warning", "notcriticalErrorTitle": "Warning",
@ -503,7 +506,8 @@
"textRange": "Range", "textRange": "Range",
"textRemoveChart": "Remove Chart", "textRemoveChart": "Remove Chart",
"textRemoveImage": "Remove Image", "textRemoveImage": "Remove Image",
"textRemoveLink": "Remove Link", "del_textRemoveLink": "Remove Link",
"textDeleteLink": "Delete Link",
"textRemoveShape": "Remove Shape", "textRemoveShape": "Remove Shape",
"textReorder": "Reorder", "textReorder": "Reorder",
"textReplace": "Replace", "textReplace": "Replace",
@ -550,7 +554,10 @@
"textYen": "Yen", "textYen": "Yen",
"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\"",
"txtSortHigh2Low": "Sort Highest to Lowest", "txtSortHigh2Low": "Sort Highest to Lowest",
"txtSortLow2High": "Sort Lowest to Highest" "txtSortLow2High": "Sort Lowest to Highest",
"textRecommended": "Recommended",
"textDone": "Done",
"textCancel": "Cancel"
}, },
"Settings": { "Settings": {
"advCSVOptions": "Choose CSV options", "advCSVOptions": "Choose CSV options",

4
apps/spreadsheeteditor/mobile/src/controller/ContextMenu.jsx
View file

@ -255,6 +255,10 @@ class ContextMenu extends ContextMenuController {
caption: _t.menuOpenLink, caption: _t.menuOpenLink,
event: 'openlink' event: 'openlink'
}); });
itemsText.push({
caption: t("ContextMenu.menuEditLink"),
event: 'editlink'
});
} }
if(!isDisconnected) { if(!isDisconnected) {
if (canViewComments && hasComments && hasComments.length>0) { if (canViewComments && hasComments && hasComments.length>0) {

80
apps/spreadsheeteditor/mobile/src/controller/add/AddLink.jsx
View file

@ -1,9 +1,20 @@
import React, {Component} from 'react'; 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 {Device} from '../../../../../common/mobile/utils/device';
import {withTranslation} from 'react-i18next'; 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 { class AddLinkController extends Component {
constructor (props) { constructor (props) {
@ -99,30 +110,71 @@ class AddLinkController extends Component {
link.asc_setText(args.text == null ? null : !!args.text ? args.text : display); 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); api.asc_insertHyperlink(link);
this.props.isNavigate ? f7.views.current.router.back() : this.closeModal();
this.closeModal();
} }
closeModal () { closeModal () {
if ( Device.phone ) { if ( Device.phone ) {
f7.sheet.close('.add-popup', true); f7.popup.close('#add-link-popup');
} else { } 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 () { render () {
return ( return (
<AddLink inTabs={this.props.inTabs} !this.props.isNavigate ?
allowInternal={this.allowInternal} Device.phone ?
displayText={this.displayText} <Popup id="add-link-popup" onPopupClosed={() => this.props.onClosed('add-link')}>
sheets={this.sheets} <View routes={routes} style={{height: '100%'}}>
activeSheet={this.activeSheet} <AddLink
onInsertLink={this.onInsertLink} allowInternal={this.allowInternal}
/> displayText={this.displayText}
sheets={this.sheets}
activeSheet={this.activeSheet}
onInsertLink={this.onInsertLink}
closeModal={this.closeModal}
isNavigate={this.props.isNavigate}
/>
</View>
</Popup>
:
<Popover id="add-link-popover" className="popover__titled" closeByOutsideClick={false} onPopoverClosed={() => this.props.onClosed('add-link')}>
<View routes={routes} style={{height: '410px'}}>
<AddLink
allowInternal={this.allowInternal}
displayText={this.displayText}
sheets={this.sheets}
activeSheet={this.activeSheet}
onInsertLink={this.onInsertLink}
closeModal={this.closeModal}
isNavigate={this.props.isNavigate}
/>
</View>
</Popover>
:
<AddLink
allowInternal={this.allowInternal}
displayText={this.displayText}
sheets={this.sheets}
activeSheet={this.activeSheet}
onInsertLink={this.onInsertLink}
closeModal={this.closeModal}
isNavigate={this.props.isNavigate}
/>
) )
} }
} }

9
apps/spreadsheeteditor/mobile/src/controller/add/AddOther.jsx
View file

@ -23,14 +23,17 @@ class AddOtherController extends Component {
const iscelllocked = cellinfo.asc_getLocked(); const iscelllocked = cellinfo.asc_getLocked();
const seltype = cellinfo.asc_getSelectionType(); const seltype = cellinfo.asc_getSelectionType();
const isComments = !cellinfo.asc_getComments() || cellinfo.asc_getComments().length > 0; const isComments = !cellinfo.asc_getComments() || cellinfo.asc_getComments().length > 0;
return (!(seltype === Asc.c_oAscSelectionType.RangeCells && !iscelllocked) || isComments); return (!(seltype === Asc.c_oAscSelectionType.RangeCells && !iscelllocked) || isComments);
} }
render () { render () {
return ( return (
<AddOther closeModal={this.closeModal} <AddOther
hideAddComment={this.hideAddComment} closeModal={this.closeModal}
wsProps={this.props.wsProps} hideAddComment={this.hideAddComment}
wsProps={this.props.wsProps}
onCloseLinkSettings={this.props.onCloseLinkSettings}
/> />
) )
} }

82
apps/spreadsheeteditor/mobile/src/controller/edit/EditLink.jsx
View file

@ -1,10 +1,21 @@
import React, { Component } from 'react'; 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 { Device } from '../../../../../common/mobile/utils/device';
import {observer, inject} from "mobx-react"; import {observer, inject} from "mobx-react";
import { withTranslation } from 'react-i18next'; 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 { class EditLinkController extends Component {
constructor (props) { constructor (props) {
@ -40,9 +51,9 @@ class EditLinkController extends Component {
closeModal () { closeModal () {
if ( Device.phone ) { if ( Device.phone ) {
f7.sheet.close('#edit-sheet', true); f7.popup.close('#edit-link-popup');
} else { } else {
f7.popover.close('#edit-popover'); f7.popover.close('#edit-link-popover');
} }
} }
@ -117,26 +128,69 @@ class EditLinkController extends Component {
linkProps.asc_setTooltip(tip); linkProps.asc_setTooltip(tip);
api.asc_insertHyperlink(linkProps); api.asc_insertHyperlink(linkProps);
this.closeModal(); this.props.isNavigate ? f7.views.current.router.back() : this.closeModal();
} }
onRemoveLink() { onRemoveLink() {
const api = Common.EditorApi.get(); const api = Common.EditorApi.get();
api.asc_removeHyperlink(); 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 () { render () {
return ( return (
<EditLink !this.props.isNavigate ?
linkInfo={this.linkInfo} Device.phone ?
isLock={this.isLock} <Popup id="edit-link-popup" onPopupClosed={() => this.props.onClosed('edit-link')}>
sheets={this.sheets} <View routes={routes} style={{height: '100%'}}>
currentSheet={this.currentSheet} <EditLink
onEditLink={this.onEditLink} linkInfo={this.linkInfo}
onRemoveLink={this.onRemoveLink} isLock={this.isLock}
/> sheets={this.sheets}
currentSheet={this.currentSheet}
onEditLink={this.onEditLink}
onRemoveLink={this.onRemoveLink}
closeModal={this.closeModal}
isNavigate={this.props.isNavigate}
/>
</View>
</Popup>
:
<Popover id="edit-link-popover" className="popover__titled" closeByOutsideClick={false} onPopoverClosed={() => this.props.onClosed('edit-link')}>
<View routes={routes} style={{height: '410px'}}>
<EditLink
linkInfo={this.linkInfo}
isLock={this.isLock}
sheets={this.sheets}
currentSheet={this.currentSheet}
onEditLink={this.onEditLink}
onRemoveLink={this.onRemoveLink}
closeModal={this.closeModal}
isNavigate={this.props.isNavigate}
/>
</View>
</Popover>
:
<EditLink
linkInfo={this.linkInfo}
isLock={this.isLock}
sheets={this.sheets}
currentSheet={this.currentSheet}
onEditLink={this.onEditLink}
onRemoveLink={this.onRemoveLink}
closeModal={this.closeModal}
isNavigate={this.props.isNavigate}
/>
) )
} }
} }

26
apps/spreadsheeteditor/mobile/src/page/main.jsx
View file

@ -16,6 +16,8 @@ import { f7, Link } from 'framework7-react';
import {FunctionGroups} from "../controller/add/AddFunction"; import {FunctionGroups} from "../controller/add/AddFunction";
import ContextMenu from '../controller/ContextMenu'; import ContextMenu from '../controller/ContextMenu';
import { Toolbar } from "../controller/Toolbar"; import { Toolbar } from "../controller/Toolbar";
import { AddLinkController } from '../controller/add/AddLink';
import { EditLinkController } from '../controller/edit/EditLink';
class MainPage extends Component { class MainPage extends Component {
constructor(props) { constructor(props) {
@ -25,7 +27,9 @@ class MainPage extends Component {
addOptionsVisible: false, addOptionsVisible: false,
addShowOptions: null, addShowOptions: null,
settingsVisible: false, settingsVisible: false,
collaborationVisible: false collaborationVisible: false,
addLinkSettingsVisible: false,
editLinkSettingsVisible: false
}; };
} }
@ -48,6 +52,12 @@ class MainPage extends Component {
} else if ( opts === 'coauth' ) { } else if ( opts === 'coauth' ) {
this.state.collaborationVisible && (opened = true); this.state.collaborationVisible && (opened = true);
newState.collaborationVisible = 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) { for (let key in this.state) {
@ -79,6 +89,10 @@ class MainPage extends Component {
return {settingsVisible: false}; return {settingsVisible: false};
else if ( opts == 'coauth' ) else if ( opts == 'coauth' )
return {collaborationVisible: false}; 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) { if ((opts === 'edit' || opts === 'coauth') && Device.phone) {
f7.navbar.show('.main-navbar'); f7.navbar.show('.main-navbar');
@ -133,7 +147,15 @@ class MainPage extends Component {
} }
{ {
!this.state.addOptionsVisible ? null : !this.state.addOptionsVisible ? null :
<AddOptions onclosed={this.handleOptionsViewClosed.bind(this, 'add')} wsLock={wsLock} wsProps={wsProps} showOptions={this.state.addShowOptions} /> <AddOptions onCloseLinkSettings={this.handleOptionsViewClosed.bind(this)} onclosed={this.handleOptionsViewClosed.bind(this, 'add')} wsLock={wsLock} wsProps={wsProps} showOptions={this.state.addShowOptions} />
}
{
!this.state.addLinkSettingsVisible ? null :
<AddLinkController onClosed={this.handleOptionsViewClosed.bind(this)} />
}
{
!this.state.editLinkSettingsVisible ? null :
<EditLinkController onClosed={this.handleOptionsViewClosed.bind(this)} />
} }
{ {
!this.state.settingsVisible ? null : !this.state.settingsVisible ? null :

56
apps/spreadsheeteditor/mobile/src/view/add/Add.jsx
View file

@ -13,7 +13,9 @@ import {AddOtherController} from "../../controller/add/AddOther";
import {AddImageController} from "../../controller/add/AddImage"; import {AddImageController} from "../../controller/add/AddImage";
import {PageImageLinkSettings} from "./AddImage"; import {PageImageLinkSettings} from "./AddImage";
import {AddLinkController} from "../../controller/add/AddLink"; import {AddLinkController} from "../../controller/add/AddLink";
import {EditLinkController} from "../../controller/edit/EditLink";
import {PageTypeLink, PageSheet} from "./AddLink"; import {PageTypeLink, PageSheet} from "./AddLink";
import {PageEditTypeLink, PageEditSheet} from "../../view/edit/EditLink";
import AddFilterController from "../../controller/add/AddFilter"; import AddFilterController from "../../controller/add/AddFilter";
const routes = [ const routes = [
@ -48,6 +50,18 @@ const routes = [
path: '/add-link-sheet/', path: '/add-link-sheet/',
component: PageSheet component: PageSheet
}, },
{
path: '/edit-link/',
component: EditLinkController
},
{
path: '/edit-link-type/',
component: PageEditTypeLink
},
{
path: '/edit-link-sheet/',
component: PageEditSheet
},
// Other // Other
{ {
path: '/add-sort-and-filter/', path: '/add-sort-and-filter/',
@ -123,31 +137,34 @@ const AddTabs = props => {
component: <AddShapeController/> component: <AddShapeController/>
}); });
} }
if (showPanels && showPanels.indexOf('image') !== -1) {
tabs.push({ // if (showPanels && showPanels.indexOf('image') !== -1) {
caption: _t.textImage, // tabs.push({
id: 'add-image', // caption: _t.textImage,
icon: 'icon-add-image', // id: 'add-image',
component: <AddImageController inTabs={true}/> // icon: 'icon-add-image',
}); // component: <AddImageController inTabs={true}/>
} // });
// }
} }
if (!showPanels && (!wsProps.InsertHyperlinks || !wsProps.Objects || !wsProps.Sort)) { if (!showPanels && (!wsProps.InsertHyperlinks || !wsProps.Objects || !wsProps.Sort)) {
tabs.push({ tabs.push({
caption: _t.textOther, caption: _t.textOther,
id: 'add-other', id: 'add-other',
icon: 'icon-add-other', icon: 'icon-add-other',
component: <AddOtherController wsProps={wsProps} /> component: <AddOtherController wsProps={wsProps} onCloseLinkSettings={props.onCloseLinkSettings} />
});
}
if (((showPanels && showPanels === 'hyperlink') || props.isAddShapeHyperlink) && !wsProps.InsertHyperlinks) {
tabs.push({
caption: _t.textAddLink,
id: 'add-link',
icon: 'icon-link',
component: <AddLinkController/>
}); });
} }
// if (((showPanels && showPanels === 'hyperlink') || props.isAddShapeHyperlink) && !wsProps.InsertHyperlinks) {
// tabs.push({
// caption: _t.textAddLink,
// id: 'add-link',
// icon: 'icon-link',
// component: <AddLinkController/>
// });
// }
if(!tabs.length) { if(!tabs.length) {
if (Device.phone) { if (Device.phone) {
@ -183,10 +200,10 @@ class AddView extends Component {
return ( return (
show_popover ? show_popover ?
<Popover id="add-popover" className="popover__titled" closeByOutsideClick={false} onPopoverClosed={() => this.props.onclosed()}> <Popover id="add-popover" className="popover__titled" closeByOutsideClick={false} onPopoverClosed={() => this.props.onclosed()}>
<AddTabs isAddShapeHyperlink={this.props.isAddShapeHyperlink} wsLock={this.props.wsLock} wsProps={this.props.wsProps} inPopover={true} onOptionClick={this.onoptionclick} style={{height: '410px'}} showPanels={this.props.showPanels}/> <AddTabs isAddShapeHyperlink={this.props.isAddShapeHyperlink} onCloseLinkSettings={this.props.onCloseLinkSettings} wsLock={this.props.wsLock} wsProps={this.props.wsProps} inPopover={true} onOptionClick={this.onoptionclick} style={{height: '410px'}} showPanels={this.props.showPanels}/>
</Popover> : </Popover> :
<Popup className="add-popup" onPopupClosed={() => this.props.onclosed()}> <Popup className="add-popup" onPopupClosed={() => this.props.onclosed()}>
<AddTabs isAddShapeHyperlink={this.props.isAddShapeHyperlink} wsLock={this.props.wsLock} wsProps={this.props.wsProps} onOptionClick={this.onoptionclick} showPanels={this.props.showPanels}/> <AddTabs isAddShapeHyperlink={this.props.isAddShapeHyperlink} onCloseLinkSettings={this.props.onCloseLinkSettings} wsLock={this.props.wsLock} wsProps={this.props.wsProps} onOptionClick={this.onoptionclick} showPanels={this.props.showPanels}/>
</Popup> </Popup>
) )
} }
@ -245,6 +262,7 @@ const Add = props => {
isAddShapeHyperlink = {isAddShapeHyperlink} isAddShapeHyperlink = {isAddShapeHyperlink}
wsProps={props.wsProps} wsProps={props.wsProps}
wsLock={props.wsLock} wsLock={props.wsLock}
onCloseLinkSettings={props.onCloseLinkSettings}
/> />
}; };

76
apps/spreadsheeteditor/mobile/src/view/add/AddLink.jsx
View file

@ -1,5 +1,5 @@
import React, {Fragment, useState} from 'react'; 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 { useTranslation } from 'react-i18next';
import {Device} from "../../../../../common/mobile/utils/device"; import {Device} from "../../../../../common/mobile/utils/device";
@ -7,9 +7,16 @@ const PageTypeLink = ({curType, changeType}) => {
const { t } = useTranslation(); const { t } = useTranslation();
const _t = t('View.Add', {returnObjects: true}); const _t = t('View.Add', {returnObjects: true});
const [typeLink, setTypeLink] = useState(curType); const [typeLink, setTypeLink] = useState(curType);
return ( return (
<Page> <Page>
<Navbar title={_t.textLinkType} backLink={_t.textBack}/> <Navbar className="navbar-link-settings" title={_t.textLinkType} backLink={_t.textBack}>
{Device.phone &&
<NavRight>
<Link icon='icon-close' popupClose="#add-link-popup"></Link>
</NavRight>
}
</Navbar>
<List> <List>
<ListItem title={_t.textExternalLink} radio checked={typeLink === 'ext'} onClick={() => {setTypeLink('ext'); changeType('ext');}}></ListItem> <ListItem title={_t.textExternalLink} radio checked={typeLink === 'ext'} onClick={() => {setTypeLink('ext'); changeType('ext');}}></ListItem>
<ListItem title={_t.textInternalDataRange} radio checked={typeLink === 'int'} onClick={() => {setTypeLink('int'); changeType('int');}}></ListItem> <ListItem title={_t.textInternalDataRange} radio checked={typeLink === 'int'} onClick={() => {setTypeLink('int'); changeType('int');}}></ListItem>
@ -22,12 +29,19 @@ const PageSheet = ({curSheet, sheets, changeSheet}) => {
const { t } = useTranslation(); const { t } = useTranslation();
const _t = t('View.Add', {returnObjects: true}); const _t = t('View.Add', {returnObjects: true});
const [stateSheet, setSheet] = useState(curSheet.value); const [stateSheet, setSheet] = useState(curSheet.value);
return ( return (
<Page> <Page>
<Navbar title={_t.textSheet} backLink={_t.textBack}/> <Navbar className="navbar-link-settings" title={_t.textSheet} backLink={_t.textBack}>
{Device.phone &&
<NavRight>
<Link icon='icon-close' popupClose="#add-link-popup"></Link>
</NavRight>
}
</Navbar>
<List> <List>
{sheets.map((sheet) => { {sheets.map((sheet) => {
return( return (
<ListItem key={`sheet-${sheet.value}`} <ListItem key={`sheet-${sheet.value}`}
title={sheet.caption} title={sheet.caption}
radio radio
@ -45,7 +59,7 @@ const PageSheet = ({curSheet, sheets, changeSheet}) => {
) )
}; };
const AddLinkView = props => { const AddLink = props => {
const isIos = Device.ios; const isIos = Device.ios;
const { t } = useTranslation(); const { t } = useTranslation();
const _t = t('View.Add', {returnObjects: true}); const _t = t('View.Add', {returnObjects: true});
@ -64,7 +78,7 @@ const AddLinkView = props => {
const [stateDisplayText, setDisplayText] = useState(displayText); const [stateDisplayText, setDisplayText] = useState(displayText);
const [stateAutoUpdate, setAutoUpdate] = useState(!stateDisplayText ? true : false); const [stateAutoUpdate, setAutoUpdate] = useState(!stateDisplayText ? true : false);
// const [screenTip, setScreenTip] = useState(''); const [screenTip, setScreenTip] = useState('');
const activeSheet = props.activeSheet; const activeSheet = props.activeSheet;
const [curSheet, setSheet] = useState(activeSheet); const [curSheet, setSheet] = useState(activeSheet);
@ -75,7 +89,26 @@ const AddLinkView = props => {
const [range, setRange] = useState(''); const [range, setRange] = useState('');
return ( return (
<Fragment> <Page routes={props.routes}>
<Navbar className="navbar-link-settings">
<NavLeft>
<Link text={Device.ios ? t('View.Add.textCancel') : ''} onClick={() => {
props.isNavigate ? f7.views.current.router.back() : props.closeModal();
}}>
{Device.android && <Icon icon='icon-close' />}
</Link>
</NavLeft>
<NavTitle>{t('View.Add.textLinkSettings')}</NavTitle>
<NavRight>
<Link className={`${(typeLink === 'ext' && link.length < 1 || typeLink === 'int' && range.length < 1) && 'disabled'}`} onClick={() => {
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 && <Icon icon={link.length < 1 ? 'icon-done-disabled' : 'icon-done'} />}
</Link>
</NavRight>
</Navbar>
<List inlineLabels className='inputs-list'> <List inlineLabels className='inputs-list'>
{props.allowInternal && {props.allowInternal &&
<ListItem link={'/add-link-type/'} title={_t.textLinkType} after={textType} routeProps={{ <ListItem link={'/add-link-type/'} title={_t.textLinkType} after={textType} routeProps={{
@ -86,7 +119,7 @@ const AddLinkView = props => {
{typeLink === 'ext' && {typeLink === 'ext' &&
<ListInput label={_t.textLink} <ListInput label={_t.textLink}
type="text" type="text"
placeholder={_t.textLink} placeholder={_t.textRequired}
value={link} value={link}
onChange={(event) => { onChange={(event) => {
setLink(event.target.value); setLink(event.target.value);
@ -113,7 +146,7 @@ const AddLinkView = props => {
} }
<ListInput label={_t.textDisplay} <ListInput label={_t.textDisplay}
type="text" type="text"
placeholder={_t.textDisplay} placeholder={t('View.Add.textRecommended')}
value={stateDisplayText} value={stateDisplayText}
disabled={displayDisabled} disabled={displayDisabled}
onChange={(event) => { onChange={(event) => {
@ -122,36 +155,15 @@ const AddLinkView = props => {
}} }}
className={isIos ? 'list-input-right' : ''} className={isIos ? 'list-input-right' : ''}
/> />
{/* <ListInput label={_t.textScreenTip} <ListInput label={_t.textScreenTip}
type="text" type="text"
placeholder={_t.textScreenTip} placeholder={_t.textScreenTip}
value={screenTip} value={screenTip}
onChange={(event) => {setScreenTip(event.target.value)}} onChange={(event) => {setScreenTip(event.target.value)}}
className={isIos ? 'list-input-right' : ''} className={isIos ? 'list-input-right' : ''}
/> */}
</List>
<List className="buttons-list">
<ListButton title={_t.textInsert}
className={`button-fill button-raised${(typeLink === 'ext' && link.length < 1 || typeLink === 'int' && range.length < 1) && ' disabled'}`}
onClick={() => {props.onInsertLink(typeLink === 'ext' ?
{type: 'ext', url: link, text: stateDisplayText} :
{type: 'int', url: range, sheet: curSheet.caption, text: stateDisplayText})}}
/> />
</List> </List>
</Fragment> </Page>
)
};
const AddLink = props => {
const { t } = useTranslation();
const _t = t('View.Add', {returnObjects: true});
return (
props.inTabs ?
<AddLinkView allowInternal={props.allowInternal} displayText={props.displayText} sheets={props.sheets} activeSheet={props.activeSheet} onInsertLink={props.onInsertLink}/> :
<Page>
<Navbar title={_t.textAddLink} backLink={_t.textBack}/>
<AddLinkView allowInternal={props.allowInternal} displayText={props.displayText} sheets={props.sheets} activeSheet={props.activeSheet} onInsertLink={props.onInsertLink}/>
</Page>
) )
}; };

12
apps/spreadsheeteditor/mobile/src/view/add/AddOther.jsx
View file

@ -1,10 +1,13 @@
import React from 'react'; import React from 'react';
import { inject, observer } from 'mobx-react';
import {List, ListItem, Icon} from 'framework7-react'; import {List, ListItem, Icon} from 'framework7-react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
const AddOther = props => { const AddOther = inject("storeFocusObjects")(observer(props => {
const { t } = useTranslation(); const { t } = useTranslation();
const _t = t('View.Add', {returnObjects: true}); const _t = t('View.Add', {returnObjects: true});
const storeFocusObjects = props.storeFocusObjects;
const isHyperLink = storeFocusObjects.selections.indexOf('hyperlink') > -1;
const hideAddComment = props.hideAddComment(); const hideAddComment = props.hideAddComment();
const wsProps = props.wsProps; const wsProps = props.wsProps;
@ -22,11 +25,14 @@ const AddOther = props => {
<ListItem title={_t.textSortAndFilter} className={wsProps.Sort && 'disabled'} link={'/add-sort-and-filter/'}> <ListItem title={_t.textSortAndFilter} className={wsProps.Sort && 'disabled'} link={'/add-sort-and-filter/'}>
<Icon slot="media" icon="icon-sort"></Icon> <Icon slot="media" icon="icon-sort"></Icon>
</ListItem> </ListItem>
<ListItem title={_t.textLink} className={wsProps.InsertHyperlinks && 'disabled'} link={'/add-link/'}> <ListItem title={_t.textLink} className={wsProps.InsertHyperlinks && 'disabled'} link={isHyperLink ? '/edit-link/' : '/add-link/'} routeProps={{
onCloseLinkSettings: props.onCloseLinkSettings,
isNavigate: true
}}>
<Icon slot="media" icon="icon-link"></Icon> <Icon slot="media" icon="icon-link"></Icon>
</ListItem> </ListItem>
</List> </List>
) )
}; }));
export {AddOther}; export {AddOther};

6
apps/spreadsheeteditor/mobile/src/view/edit/Edit.jsx
View file

@ -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 { 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 { 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 { 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 = [ const routes = [
@ -282,11 +282,11 @@ const routes = [
{ {
path: '/edit-link-type/', path: '/edit-link-type/',
component: PageTypeLink component: PageEditTypeLink
}, },
{ {
path: '/edit-link-sheet', path: '/edit-link-sheet',
component: PageSheet component: PageEditSheet
} }

64
apps/spreadsheeteditor/mobile/src/view/edit/EditLink.jsx
View file

@ -1,10 +1,10 @@
import React, {useState, useEffect, Fragment} from 'react'; import React, {useState, useEffect, Fragment} from 'react';
import {observer, inject} from "mobx-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 { useTranslation } from 'react-i18next';
import {Device} from "../../../../../common/mobile/utils/device"; import {Device} from "../../../../../common/mobile/utils/device";
const PageTypeLink = ({curType, changeType, storeFocusObjects}) => { const PageEditTypeLink = ({curType, changeType, storeFocusObjects}) => {
const { t } = useTranslation(); const { t } = useTranslation();
const _t = t('View.Edit', {returnObjects: true}); const _t = t('View.Edit', {returnObjects: true});
const [typeLink, setTypeLink] = useState(curType); const [typeLink, setTypeLink] = useState(curType);
@ -17,10 +17,10 @@ const PageTypeLink = ({curType, changeType, storeFocusObjects}) => {
return ( return (
<Page> <Page>
<Navbar title={_t.textLinkType} backLink={_t.textBack}> <Navbar className="navbar-link-settings" title={_t.textLinkType} backLink={_t.textBack}>
{Device.phone && {Device.phone &&
<NavRight> <NavRight>
<Link icon='icon-expand-down' sheetClose></Link> <Link icon='icon-close' popupClose="#edit-link-popup"></Link>
</NavRight> </NavRight>
} }
</Navbar> </Navbar>
@ -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 } = useTranslation();
const _t = t('View.Edit', {returnObjects: true}); const _t = t('View.Edit', {returnObjects: true});
const [stateSheet, setSheet] = useState(curSheet); const [stateSheet, setSheet] = useState(curSheet);
@ -45,10 +45,10 @@ const PageSheet = ({curSheet, sheets, changeSheet, storeFocusObjects}) => {
return ( return (
<Page> <Page>
<Navbar title={_t.textSheet} backLink={_t.textBack}> <Navbar className="navbar-link-settings" title={_t.textSheet} backLink={_t.textBack}>
{Device.phone && {Device.phone &&
<NavRight> <NavRight>
<Link icon='icon-expand-down' sheetClose></Link> <Link icon='icon-close' popupClose="#edit-link-popup"></Link>
</NavRight> </NavRight>
} }
</Navbar> </Navbar>
@ -110,7 +110,27 @@ const EditLink = props => {
const [range, setRange] = useState(valueRange || 'A1'); const [range, setRange] = useState(valueRange || 'A1');
return ( return (
<Fragment> <Page>
<Navbar className="navbar-link-settings">
<NavLeft>
<Link text={Device.ios ? t('View.Edit.textCancel') : ''} onClick={() => {
props.isNavigate ? f7.views.current.router.back() : props.closeModal();
}}>
{Device.android && <Icon icon='icon-close' />}
</Link>
</NavLeft>
<NavTitle>{t('View.Edit.textLinkSettings')}</NavTitle>
<NavRight>
<Link className={`${(typeLink === 1 && !link.length) || (typeLink === 2 && (!range.length || !curSheet.length)) && 'disabled'}`} onClick={() => {
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 && <Icon icon={link.length < 1 ? 'icon-done-disabled' : 'icon-done'} />}
</Link>
</NavRight>
</Navbar>
<List inlineLabels className='inputs-list'> <List inlineLabels className='inputs-list'>
<ListItem link={'/edit-link-type/'} title={_t.textLinkType} after={textType} routeProps={{ <ListItem link={'/edit-link-type/'} title={_t.textLinkType} after={textType} routeProps={{
changeType: changeType, changeType: changeType,
@ -144,7 +164,7 @@ const EditLink = props => {
} }
<ListInput label={_t.textDisplay} <ListInput label={_t.textDisplay}
type="text" type="text"
placeholder={_t.textDisplay} placeholder={t('View.Edit.textRecommended')}
value={stateDisplayText} value={stateDisplayText}
disabled={isLock} disabled={isLock}
onChange={(event) => {setDisplayText(event.target.value)}} onChange={(event) => {setDisplayText(event.target.value)}}
@ -159,26 +179,24 @@ const EditLink = props => {
/> />
</List> </List>
<List className="buttons-list"> <List className="buttons-list">
<ListButton title={_t.textEditLink} <ListButton
className={`button-fill button-raised ${(typeLink === 1 && !link.length) || (typeLink === 2 && (!range.length || !curSheet.length)) ? 'disabled' : ''}`} title={t('View.Edit.textDeleteLink')}
onClick={() => {props.onEditLink(typeLink === 1 ? className={`button-red button-fill button-raised`}
{type: 1, url: link, text: stateDisplayText, tooltip: screenTip} : onClick={() => {
{type: 2, url: range, sheet: curSheet, text: stateDisplayText, tooltip: screenTip})}} props.onRemoveLink();
/> props.isNavigate ? f7.views.current.router.back() : props.closeModal();
<ListButton title={_t.textRemoveLink} }}
className={`button-red button-fill button-raised`}
onClick={() => props.onRemoveLink()}
/> />
</List> </List>
</Fragment> </Page>
) )
}; };
const _PageTypeLink = inject("storeFocusObjects")(observer(PageTypeLink)); const _PageEditTypeLink = inject("storeFocusObjects")(observer(PageEditTypeLink));
const _PageSheet = inject("storeFocusObjects")(observer(PageSheet)); const _PageEditSheet = inject("storeFocusObjects")(observer(PageEditSheet));
export { export {
EditLink, EditLink,
_PageTypeLink as PageTypeLink, _PageEditTypeLink as PageEditTypeLink,
_PageSheet as PageSheet _PageEditSheet as PageEditSheet
}; };