[DE mobile] Added insert other page, added the ability to insert link
This commit is contained in:
JuliaSvinareva
parent
8b923f7965
commit
133f5d4675
|
|
@ -237,6 +237,15 @@
|
|||
"notcriticalErrorTitle": "Warning",
|
||||
"textAddress": "Address",
|
||||
"textImageURL": "Image URL",
|
||||
"textInsertImage": "Insert Image"
|
||||
"textInsertImage": "Insert Image",
|
||||
"textComment": "Comment",
|
||||
"textLink": "Link",
|
||||
"textPageNumber": "Page Number",
|
||||
"textBreak": "Break",
|
||||
"textFootnote": "Footnote",
|
||||
"textAddLink": "Add Link",
|
||||
"textDisplay": "Display",
|
||||
"textScreenTip": "Screen Tip",
|
||||
"textInsert": "Insert"
|
||||
}
|
||||
}
|
||||
69
apps/documenteditor/mobile/src/controller/add/AddOther.jsx
Normal file
69
apps/documenteditor/mobile/src/controller/add/AddOther.jsx
Normal file
|
|
@ -0,0 +1,69 @@
|
|||
import React, {Component} from 'react';
|
||||
import { f7 } from 'framework7-react';
|
||||
import {Device} from '../../../../../common/mobile/utils/device';
|
||||
import { withTranslation} from 'react-i18next';
|
||||
|
||||
import {AddOther} from '../../view/add/AddOther';
|
||||
|
||||
class AddOtherController extends Component {
|
||||
constructor (props) {
|
||||
super(props);
|
||||
this.onInsertLink = this.onInsertLink.bind(this);
|
||||
}
|
||||
|
||||
closeModal () {
|
||||
if ( Device.phone ) {
|
||||
f7.sheet.close('.add-popup', true);
|
||||
} else {
|
||||
f7.popover.close('#add-popover');
|
||||
}
|
||||
}
|
||||
|
||||
getDisplayLinkText () {
|
||||
const api = Common.EditorApi.get();
|
||||
return api.can_AddHyperlink();
|
||||
}
|
||||
|
||||
onInsertLink (url, display, tip) {
|
||||
const api = Common.EditorApi.get();
|
||||
|
||||
const { t } = this.props;
|
||||
const _t = t("Add", { returnObjects: true });
|
||||
|
||||
const urltype = api.asc_getUrlType(url.trim());
|
||||
const isEmail = (urltype == 2);
|
||||
|
||||
if (urltype < 1) {
|
||||
f7.dialog.alert(_t.txtNotUrl, _t.notcriticalErrorTitle);
|
||||
return;
|
||||
}
|
||||
|
||||
let _url = url.replace(/^\s+|\s+$/g,'');
|
||||
|
||||
if (! /(((^https?)|(^ftp)):\/\/)|(^mailto:)/i.test(_url) )
|
||||
_url = (isEmail ? 'mailto:' : 'http://' ) + _url;
|
||||
|
||||
_url = _url.replace(new RegExp("%20",'g')," ");
|
||||
|
||||
const props = new Asc.CHyperlinkProperty();
|
||||
props.put_Value(_url);
|
||||
props.put_Text(!display ? _url : display);
|
||||
props.put_ToolTip(tip);
|
||||
|
||||
api.add_Hyperlink(props);
|
||||
|
||||
this.closeModal();
|
||||
}
|
||||
|
||||
render () {
|
||||
return (
|
||||
<AddOther onInsertLink={this.onInsertLink}
|
||||
getDisplayLinkText={this.getDisplayLinkText}
|
||||
/>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
const AddOtherWithTranslation = withTranslation()(AddOtherController);
|
||||
|
||||
export {AddOtherWithTranslation as AddOtherController};
|
||||
|
|
@ -398,6 +398,27 @@
|
|||
height: 24px;
|
||||
.encoded-svg-background('<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M7.00049 18C7.00049 18.8284 6.32892 19.5 5.50049 19.5C4.67206 19.5 4.00049 18.8284 4.00049 18C4.00049 17.1716 4.67206 16.5 5.50049 16.5C6.32892 16.5 7.00049 17.1716 7.00049 18ZM13.5005 18C13.5005 18.8284 12.8289 19.5 12.0005 19.5C11.1721 19.5 10.5005 18.8284 10.5005 18C10.5005 17.1716 11.1721 16.5 12.0005 16.5C12.8289 16.5 13.5005 17.1716 13.5005 18ZM18.5005 19.5C19.3289 19.5 20.0005 18.8284 20.0005 18C20.0005 17.1716 19.3289 16.5 18.5005 16.5C17.6721 16.5 17.0005 17.1716 17.0005 18C17.0005 18.8284 17.6721 19.5 18.5005 19.5Z" fill="@{themeColor}"/></svg>');
|
||||
}
|
||||
|
||||
&.icon-insert-comment {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
.encoded-svg-background('<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M20.1538 9.00708H11.8462C10.8266 9.00708 10 9.83461 10 10.8554V15.1694C10 16.1902 10.8266 17.0177 11.8462 17.0177H13.8329C13.9409 17.0177 14.0454 17.0556 14.1284 17.1248L18.243 20.392C18.5436 20.6428 19 20.4288 19 20.037V17.4798C19 17.2246 19.2066 17.0177 19.4615 17.0177H20.1538C21.1734 17.0177 22 16.1902 22 15.1694V10.8554C22 9.83461 21.1734 9.00708 20.1538 9.00708ZM20 10.0083C20.5523 10.0083 21 10.4565 21 11.0095V15.0154C21 15.5683 20.5523 16.0165 20 16.0165H18.0025L18 18.8995C18 19.2912 18 19 18 19L14.5 16.0165H12C11.4477 16.0165 11 15.5683 11 15.0154V11.0095C11 10.4565 11.4477 10.0083 12 10.0083H20Z" fill="@{themeColor}"/><path d="M14.5 3H4.5C3.18908 3 2 4.2153 2 5.50295V12.0346C2 13.3222 3.18908 14.013 4.5 14.013H5.5C5.82773 14.013 6 14.1917 6 14.5136V17.5183C6 18.0125 6.6135 18.3352 7 18.0189L11 14.9858V13.5L7 16.5V13.0118H4.5C3.78992 13.0118 3 12.732 3 12.0346V5.50295C3 4.80547 3.78992 4.00118 4.5 4.00118H14.5C15.2101 4.00118 16 4.80547 16 5.50295V8.0059H17V5.50295C17 4.2153 15.8109 3 14.5 3Z" fill="@{themeColor}"/></svg>');
|
||||
}
|
||||
&.icon-pagenumber {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
.encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M8.2,1L2,7.6V22h17V1H8.2z M8,2.8V8H3.1L8,2.8z M18,21H3V9h6V2l0,0h9V21z M12,19h1v-4h-0.7c0,0.2-0.1-0.1-0.1,0c-0.1,0.1-0.2,0-0.3,0c-0.1,0.1-0.2,0.1-0.4,0.1c-0.1,0-0.3,0-0.4,0V16H12V19z M15.3,17.3C15,17.9,15.1,18.4,15,19h0.9c0-0.3,0-0.6,0.1-0.9c0.1-0.3,0.1-0.6,0.3-0.9c0.1-0.3,0.3-0.6,0.4-0.9c0.2-0.3,0.1-0.3,0.3-0.5V15h-3v1h1.9C15.6,16.4,15.5,16.7,15.3,17.3z"/></g></svg>');
|
||||
}
|
||||
&.icon-sectionbreak {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
.encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M20,14V2H3v12H2V1h19v13H20z M5,14v1H4v-1H5z M7,14v1H6v-1H7z M9,14v1H8v-1H9z M11,14v1h-1v-1H11z M13,14v1h-1v-1H13z M15,14v1h-1v-1H15z M17,14v1h-1v-1H17z M18,14h1v1h-1V14z M3,21h17v-6h1v7H2v-7h1V21z"/></g></svg>');
|
||||
}
|
||||
&.icon-footnote {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
.encoded-svg-background('<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M22 8.11133H20.9177V5.15361L20.9282 4.66765L20.9457 4.13624C20.7659 4.31571 20.641 4.43341 20.5709 4.48935L19.9825 4.96132L19.4606 4.31105L21.1103 3H22V8.11133Z" fill="@{themeColor}"/><path d="M10.3363 18.8514L8.98161 15.3968H4.61996L3.28021 18.8514H2L6.3021 7.94526H7.36646L11.6462 18.8514H10.3363ZM8.58713 14.2601L7.3218 10.8947C7.15806 10.4687 6.98935 9.94621 6.81567 9.32711C6.70651 9.80258 6.5502 10.3251 6.34676 10.8947L5.06655 14.2601H8.58713Z" fill="@{themeColor}"/><path d="M16.1425 10.5752C17.2143 10.5752 18.0454 10.9417 18.6359 11.6748C19.2313 12.4028 19.5291 13.4355 19.5291 14.7728C19.5291 16.11 19.2288 17.1501 18.6284 17.893C18.033 18.631 17.2043 19 16.1425 19C15.6115 19 15.1252 18.9034 14.6836 18.7103C14.2469 18.5121 13.8798 18.21 13.582 17.8039H13.4927L13.2322 18.8514H12.3465V7.29149H13.582V10.0997C13.582 10.7288 13.5622 11.2934 13.5225 11.7936H13.582C14.1576 10.9814 15.0111 10.5752 16.1425 10.5752ZM15.9638 11.6079C15.1203 11.6079 14.5124 11.8506 14.1403 12.336C13.7681 12.8164 13.582 13.6286 13.582 14.7728C13.582 15.9169 13.7731 16.7366 14.1551 17.2318C14.5372 17.7222 15.15 17.9673 15.9936 17.9673C16.7528 17.9673 17.3185 17.6925 17.6906 17.1427C18.0628 16.588 18.2488 15.793 18.2488 14.7579C18.2488 13.698 18.0628 12.908 17.6906 12.388C17.3185 11.8679 16.7429 11.6079 15.9638 11.6079Z" fill="@{themeColor}"/></svg>');
|
||||
}
|
||||
}
|
||||
.tab-link-active {
|
||||
i.icon {
|
||||
|
|
|
|||
|
|
@ -341,5 +341,26 @@
|
|||
height: 24px;
|
||||
.encoded-svg-background('<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0)"><path fill-rule="evenodd" clip-rule="evenodd" d="M20 5.5H4C3.72386 5.5 3.5 5.72386 3.5 6V15.5822L8.03349 11.6898C8.47476 11.3109 9.11904 11.2865 9.58778 11.6308L13.5726 14.5579L15.9619 12.6774C16.4488 12.2942 17.1428 12.3255 17.5933 12.7509L20.5 15.4962V6C20.5 5.72386 20.2761 5.5 20 5.5ZM20.5 17.5294L20.485 17.5453L16.7201 13.9895L14.3509 15.8542C13.9095 16.2016 13.2905 16.2119 12.8378 15.8793L8.85988 12.9573L3.5 17.5592V18C3.5 18.2761 3.72386 18.5 4 18.5H20C20.2761 18.5 20.5 18.2761 20.5 18V17.5294ZM4 4C2.89543 4 2 4.89543 2 6V18C2 19.1046 2.89543 20 4 20H20C21.1046 20 22 19.1046 22 18V6C22 4.89543 21.1046 4 20 4H4ZM16.5 9.5C16.5 11.1569 15.1569 12.5 13.5 12.5C11.8431 12.5 10.5 11.1569 10.5 9.5C10.5 7.84315 11.8431 6.5 13.5 6.5C15.1569 6.5 16.5 7.84315 16.5 9.5ZM13.5 11C14.3284 11 15 10.3284 15 9.5C15 8.67157 14.3284 8 13.5 8C12.6716 8 12 8.67157 12 9.5C12 10.3284 12.6716 11 13.5 11Z" fill="@{themeColor}"/></g><defs><clipPath id="clip0"><path d="M0 0H24V24H0V0Z" fill="transparent"/></clipPath></defs></svg>');
|
||||
}
|
||||
|
||||
&.icon-insert-comment {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
.encoded-svg-background('<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M19.5 3H4.5C3.18908 3 2 4.2153 2 5.50295V15.0346C2 16.3222 3.18908 17.013 4.5 17.013H5.5C5.82773 17.013 6 17.1917 6 17.5136V21L12 17H20C21.1046 17 22 16.1046 22 15V8H20.5V14.5C20.5 15.0523 20.0523 15.5 19.5 15.5H11.5L7.5 18V15.5H4.5C3.94772 15.5 3.5 15.0523 3.5 14.5V5.5C3.5 4.94772 3.94772 4.5 4.5 4.5H19.5C20.0523 4.5 20.5 4.94772 20.5 5.5V8H22V5.50295C22 4.2153 20.8109 3 19.5 3Z" fill="@{themeColor}"/><path d="M6 7.5H18V9H6L6 7.5Z" fill="@{themeColor}"/><path d="M6 11H18V12.5H6V11Z" fill="@{themeColor}"/></svg>');
|
||||
}
|
||||
&.icon-pagenumber {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
.encoded-svg-background('<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M18 4H6V20.0282L18 20V4ZM4 4.5C4 3.11929 5.11929 2 6.5 2H18C18.5302 2 18.9864 2.20344 19.3918 2.61033C19.7661 2.98592 20 3.46792 20 4V20C20 20.5321 19.7973 21.0297 19.3918 21.4366C18.9864 21.8122 18.5302 22 18 22H6C5.46979 22 5.01364 21.8122 4.60819 21.4366C4.20273 21.0297 4 20.5266 4 19.9945V4.5ZM11.5698 16H10.1836V12.2578H10.1574L9 13.0686V11.8385L10.1836 11H11.5698V16ZM14.1593 16H12.7076L14.6333 12.1365V12.1088H12.3709V11H16V12.1053L14.1593 16Z" fill="@{themeColor}"/></svg>');
|
||||
}
|
||||
&.icon-sectionbreak {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
.encoded-svg-background('<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0)"><path d="M3 11H7V13H3V11Z" fill="@{themeColor}"/><path d="M9 11H15V13H9V11Z" fill="@{themeColor}"/><path d="M17 11H21V13H17V11Z" fill="@{themeColor}"/><path fill-rule="evenodd" clip-rule="evenodd" d="M18 4H6V9H4V4C4 2.89543 4.89543 2 6 2H18C18.5302 2 18.9864 2.20344 19.3918 2.61033C19.7661 2.98592 20 3.46792 20 4V9H18V4ZM6 15V20.0282L18 20V15H20V20C20 20.5321 19.7973 21.0297 19.3918 21.4366C18.9864 21.8122 18.5302 22 18 22H6C5.46979 22 5.01364 21.8122 4.60819 21.4366C4.20273 21.0297 4 20.5266 4 19.9945V15H6Z" fill="@{themeColor}"/></g><defs><clipPath id="clip0"><path d="M0 0H24V24H0V0Z" fill="transparent"/></clipPath></defs></svg>');
|
||||
}
|
||||
&.icon-footnote {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
.encoded-svg-background('<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12.1173 18.7983H10.109L9.36904 16.6471H4.74829L4.00837 18.7983H2L5.95633 7.58823H8.161L12.1173 18.7983ZM8.87072 14.916L7.05867 9.57143L5.24661 14.916H8.87072Z" fill="@{themeColor}"/><path d="M14.7577 16.3613C14.9288 16.6639 15.1906 16.9216 15.5429 17.1345C15.9053 17.3361 16.2677 17.437 16.6301 17.437C17.2543 17.437 17.7526 17.1905 18.1251 16.6975C18.5076 16.1933 18.6989 15.5434 18.6989 14.7479C18.6989 13.9524 18.5076 13.3025 18.1251 12.7983C17.7526 12.2941 17.2543 12.042 16.6301 12.042C16.2677 12.042 15.9103 12.1485 15.558 12.3613C15.2057 12.5742 14.9389 12.8375 14.7577 13.1513V16.3613ZM14.7577 18.7983H13.1721V7.58823H14.7577V11.8067C15.3516 10.9216 16.1318 10.479 17.0982 10.479C18.0445 10.479 18.8197 10.8711 19.4237 11.6555C20.0277 12.4286 20.3298 13.4594 20.3298 14.7479C20.3298 16.0588 20.0277 17.0952 19.4237 17.8571C18.8197 18.619 18.0445 19 17.0982 19C16.1419 19 15.3617 18.563 14.7577 17.6891V18.7983Z" fill="@{themeColor}"/><path d="M24 11.7227H22.7769V6.7479L21.7651 7.90756L21.0705 7.08403L22.943 5H24V11.7227Z" fill="@{themeColor}"/></svg>');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -8,10 +8,10 @@ import {Device} from '../../../../../common/mobile/utils/device';
|
|||
import {AddTableController} from "../../controller/add/AddTable";
|
||||
import AddShapeController from "../../controller/add/AddShape";
|
||||
import {AddImageController} from "../../controller/add/AddImage";
|
||||
import {PageTextFonts} from "../edit/EditText";
|
||||
//import AddOtherController from "../../controller/add/AddOther";
|
||||
import {AddOtherController} from "../../controller/add/AddOther";
|
||||
|
||||
import {PageImageLinkSettings} from "../add/AddImage";
|
||||
import {PageAddLink} from "../add/AddOther";
|
||||
|
||||
const routes = [
|
||||
// Image
|
||||
|
|
@ -19,6 +19,11 @@ const routes = [
|
|||
path: '/add-image-from-url/',
|
||||
component: PageImageLinkSettings,
|
||||
},
|
||||
// Other
|
||||
{
|
||||
path: '/add-link/',
|
||||
component: PageAddLink,
|
||||
},
|
||||
];
|
||||
|
||||
const AddLayoutNavbar = ({ tabs, inPopover }) => {
|
||||
|
|
@ -71,12 +76,12 @@ const AddTabs = props => {
|
|||
icon: 'icon-add-image',
|
||||
component: <AddImageController />
|
||||
});
|
||||
/*tabs.push({
|
||||
tabs.push({
|
||||
caption: _t.textOther,
|
||||
id: 'add-other',
|
||||
icon: 'icon-add-other',
|
||||
component: <AddOtherController />
|
||||
});*/
|
||||
});
|
||||
return (
|
||||
<View style={props.style} stackPages={true} routes={routes}>
|
||||
<Page pageContent={false}>
|
||||
|
|
|
|||
78
apps/documenteditor/mobile/src/view/add/AddOther.jsx
Normal file
78
apps/documenteditor/mobile/src/view/add/AddOther.jsx
Normal file
|
|
@ -0,0 +1,78 @@
|
|||
import React, {useState} from 'react';
|
||||
import {observer, inject} from "mobx-react";
|
||||
import {List, ListItem, Page, Navbar, Icon, ListButton, ListInput, BlockTitle} from 'framework7-react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
const PageLink = props => {
|
||||
const { t } = useTranslation();
|
||||
const _t = t('Add', {returnObjects: true});
|
||||
|
||||
let display = props.getDisplayLinkText();
|
||||
display = typeof display === 'string' ? display : '';
|
||||
|
||||
const [stateLink, setLink] = useState('');
|
||||
const [stateDisplay, setDisplay] = useState(display);
|
||||
const [stateTip, setTip] = useState('');
|
||||
return (
|
||||
<Page>
|
||||
<Navbar title={_t.textAddLink} backLink={_t.textBack}></Navbar>
|
||||
<List inlineLabels className='inputs-list'>
|
||||
<ListInput
|
||||
label={_t.textLink}
|
||||
type="text"
|
||||
placeholder={_t.textLink}
|
||||
value={stateLink}
|
||||
onChange={(event) => {setLink(event.target.value)}}
|
||||
></ListInput>
|
||||
<ListInput
|
||||
label={_t.textDisplay}
|
||||
type="text"
|
||||
placeholder={_t.textDisplay}
|
||||
value={stateDisplay}
|
||||
onChange={(event) => {setDisplay(event.target.value)}}
|
||||
></ListInput>
|
||||
<ListInput
|
||||
label={_t.textScreenTip}
|
||||
type="text"
|
||||
placeholder={_t.textScreenTip}
|
||||
value={stateTip}
|
||||
onChange={(event) => {setTip(event.target.value)}}
|
||||
></ListInput>
|
||||
</List>
|
||||
<List>
|
||||
<ListButton className={'button-fill button-raised' + (stateLink.length < 1 ? ' disabled' : '')} title={_t.textInsert} onClick={() => {
|
||||
props.onInsertLink(stateLink, stateDisplay, stateTip)
|
||||
}}></ListButton>
|
||||
</List>
|
||||
</Page>
|
||||
)
|
||||
};
|
||||
|
||||
const AddOther = props => {
|
||||
const { t } = useTranslation();
|
||||
const _t = t('Add', {returnObjects: true});
|
||||
return (
|
||||
<List>
|
||||
<ListItem title={_t.textComment}>
|
||||
<Icon slot="media" icon="icon-insert-comment"></Icon>
|
||||
</ListItem>
|
||||
<ListItem title={_t.textLink} link={'/add-link/'} routeProps={{
|
||||
onInsertLink: props.onInsertLink,
|
||||
getDisplayLinkText: props.getDisplayLinkText
|
||||
}}>
|
||||
<Icon slot="media" icon="icon-link"></Icon>
|
||||
</ListItem>
|
||||
<ListItem title={_t.textPageNumber}>
|
||||
<Icon slot="media" icon="icon-pagenumber"></Icon>
|
||||
</ListItem>
|
||||
<ListItem title={_t.textBreak}>
|
||||
<Icon slot="media" icon="icon-sectionbreak"></Icon>
|
||||
</ListItem>
|
||||
<ListItem title={_t.textFootnote}>
|
||||
<Icon slot="media" icon="icon-footnote"></Icon>
|
||||
</ListItem>
|
||||
</List>
|
||||
)
|
||||
};
|
||||
|
||||
export {AddOther, PageLink as PageAddLink};
|
||||
Loading…
Reference in a new issue