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

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

Browse source
This commit is contained in:
SergeyEzhin 2022-05-31 01:11:25 +04:00
parent 5afb147034
commit 838eac4b8c
13 changed files with 140 additions and 80 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
apps/common/mobile/resources/less/icons.less
View file

@ -35,6 +35,11 @@ i.icon {
height: 24px;
.encoded-svg-background('<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill-rule="evenodd" clip-rule="evenodd" d="M9.33333 2C8.74423 2 8.26667 2.47128 8.26667 3.05263V4H4.53333C4.23878 4 4 4.23564 4 4.52632C4 4.81699 4.23878 5.05263 4.53333 5.05263H5.06667L6.06667 20.9474C6.06667 21.5287 6.54423 22 7.13333 22H16.8667C17.4558 22 17.9333 21.5287 17.9333 20.9474L19 5H19.4667C19.7612 5 20 4.79068 20 4.5C20 4.20932 19.7612 4 19.4667 4H15.7333V3.05263C15.7333 2.47128 15.2558 2 14.6667 2H9.33333ZM14.6667 4V3.05263H9.33333V4H14.6667ZM18 5H6L6.9414 20.0624C6.97434 20.5894 7.41139 21 7.93945 21H16.0605C16.5886 21 17.0257 20.5894 17.0586 20.0624L18 5Z" fill="#FF3B30"/><path d="M8 7.0023L9 7.00239L9.5 18.9999H8.5L8 7.0023Z" fill="#FF3B30"/><path d="M11.5 7H12.5V19H11.5V7Z" fill="#FF3B30"/><path d="M15 7.00232L16 6.99988L15.5 18.9999H14.5L15 7.00232Z" fill="#FF3B30"/></svg>')
}
&.icon-image {
width: 24px;
height: 24px;
.encoded-svg-mask('<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill-rule="evenodd" clip-rule="evenodd" d="M9 9.00002C9 10.1046 8.10457 11 7 11C5.89543 11 5 10.1046 5 9.00002C5 7.89545 5.89543 7.00002 7 7.00002C8.10457 7.00002 9 7.89545 9 9.00002ZM8 9.00002C8 9.5523 7.55229 10 7 10C6.44772 10 6 9.5523 6 9.00002C6 8.44773 6.44772 8.00002 7 8.00002C7.55229 8.00002 8 8.44773 8 9.00002Z" fill="black"/><path fill-rule="evenodd" clip-rule="evenodd" d="M2 3.99997C2 9.99996 2.00005 13.9999 2 19.9999C12.4199 20.0008 22 19.9999 22 19.9999C22 19.9999 22 12.6325 22 3.99994C15.3333 4.00047 8.66667 4.00028 2 3.99997ZM21 5H3V16.2929L6.50001 12.7929L8.50001 14.7929L14.5 8.79286L21 15.2929V5ZM3.00001 19L3 17.7071L6.50001 14.2071L8.50001 16.2071L14.5 10.2071L21 16.7071L21 19H3.00001Z" fill="black"/></svg>')
}
// Formats

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

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

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

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

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

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

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

@ -26,6 +26,10 @@ const routes = [
path: '/add-link/',
component: AddLinkController,
},
{
path: '/add-image/',
component: AddImageController
},
{
path: '/add-page-number/',
component: PageAddNumber,
@ -48,24 +52,26 @@ const routes = [
}
];
const AddLayoutNavbar = ({ tabs, inPopover }) => {
const AddLayoutNavbar = ({ tabs, inPopover, showPanels }) => {
const isAndroid = Device.android;
const { t } = useTranslation();
const _t = t('Add', {returnObjects: true});
return (
<Navbar>
{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>
// (!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
)
};
@ -81,7 +87,7 @@ const AddLayoutContent = ({ tabs, onGetTableStylesPreviews }) => {
)
};
const AddTabs = inject("storeFocusObjects", "storeTableSettings")(observer(({storeFocusObjects,storeTableSettings, showPanels, style, inPopover}) => {
const AddTabs = inject("storeFocusObjects", "storeTableSettings")(observer(({storeFocusObjects,storeTableSettings, showPanels, style, inPopover, onOptionClick}) => {
const { t } = useTranslation();
const _t = t('Add', {returnObjects: true});
const api = Common.EditorApi.get();
@ -147,18 +153,18 @@ const AddTabs = inject("storeFocusObjects", "storeTableSettings")(observer(({sto
});
}
}
if(!showPanels) {
needDisable = paragraphLocked || paragraphObj && !canAddImage || controlPlain || richDelLock || plainDelLock || contentLocked;
// if(!showPanels) {
// needDisable = paragraphLocked || paragraphObj && !canAddImage || controlPlain || richDelLock || plainDelLock || contentLocked;
if(!needDisable) {
tabs.push({
caption: _t.textImage,
id: 'add-image',
icon: 'icon-add-image',
component: <AddImageController/>
});
}
}
// if(!needDisable) {
// tabs.push({
// caption: _t.textImage,
// id: 'add-image',
// icon: 'icon-add-image',
// component: <AddImageController/>
// });
// }
// }
if(!showPanels) {
tabs.push({
caption: _t.textOther,
@ -178,10 +184,11 @@ const AddTabs = inject("storeFocusObjects", "storeTableSettings")(observer(({sto
});
}
if (showPanels && showPanels === 'link') {
// onOptionClick('/add-link/');
tabs.push({
caption: _t.textAddLink,
caption: t('Add.textLinkSettings'),
id: 'add-link',
component: <AddLinkController noNavbar={true}/>
component: <AddLinkController noNavbar={true} />
});
}
@ -195,7 +202,7 @@ const AddTabs = inject("storeFocusObjects", "storeTableSettings")(observer(({sto
return (
<View style={style} stackPages={true} routes={routes}>
<Page pageContent={false}>
<AddLayoutNavbar tabs={tabs} inPopover={inPopover}/>
<AddLayoutNavbar tabs={tabs} showPanels={showPanels} inPopover={inPopover}/>
<AddLayoutContent tabs={tabs} onGetTableStylesPreviews={onGetTableStylesPreviews}/>
</Page>
</View>

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

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

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

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

@ -187,6 +187,9 @@ const AddOther = props => {
}}>
<Icon slot="media" icon="icon-insert-comment"></Icon>
</ListItem>}
<ListItem title={_t.textImage} link='/add-image/'>
<Icon slot="media" icon="icon-image"></Icon>
</ListItem>
{(isText && !disabledAddLink) && <ListItem title={_t.textLink} link={'/add-link/'} routeProps={{
onInsertLink: props.onInsertLink,
getDisplayLinkText: props.getDisplayLinkText

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

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

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

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

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

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

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

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

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

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