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

[DE mobile] Changed adding and editing link

Browse source
This commit is contained in:
SergeyEzhin 2022-06-01 23:24:13 +04:00
parent 838eac4b8c
commit 4d8fde7ea1
10 changed files with 202 additions and 78 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
apps/documenteditor/mobile/locale/en.json
View file

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

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

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

4
apps/documenteditor/mobile/src/controller/add/AddOther.jsx
View file

@ -260,7 +260,9 @@ class AddOtherController extends Component {
richDelLock={this.props.richDelLock}
richEditLock={this.props.richEditLock}
plainDelLock={this.props.plainDelLock}
plainEditLock={this.props.plainEditLock}
plainEditLock={this.props.plainEditLock}
onCloseLinkSettings={this.props.onCloseLinkSettings}
isNavigate={this.props.isNavigate}
/>
)
}

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

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

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

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

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

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

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

@ -1,5 +1,5 @@
import React, {useState} from 'react';
import {List, Page, Navbar, Icon, ListButton, ListInput, NavRight, Link, NavLeft, f7, NavTitle} from 'framework7-react';
import {List, Page, Navbar, Icon, ListButton, ListInput, NavRight, Link, NavLeft, f7, NavTitle, Fragment} from 'framework7-react';
import { useTranslation } from 'react-i18next';
import {Device} from "../../../../../common/mobile/utils/device";
@ -29,17 +29,14 @@ const PageLink = props => {
<Navbar>
<NavLeft>
<Link text={t('Add.textCancel')} onClick={() => {
if(props.noNavbar) {
props.closeModal();
} else {
f7.views.current.router.back();
}}}>
</Link>
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>

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

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

7
apps/documenteditor/mobile/src/view/edit/Edit.jsx
View file

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

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

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