Compare commits
21 commits
master
...
feature/fi
| Author | SHA1 | Date | |
|---|---|---|---|
|
ca4f8b99d0 | ||
|
|
8090d9d92c | ||
|
f8d4a3c93b | ||
|
|
e848d63afd | ||
|
6394f4e110 | ||
|
09512d4c4f | ||
|
|
b6ffd88e79 | ||
|
|
de58289ceb | ||
|
|
c61a957ec7 | ||
|
|
454878d3d7 | ||
|
f15891cd04 | ||
|
|
9ffbcf8e9a | ||
|
|
f60c3552c6 | ||
|
0f5a22ebe7 | ||
|
|
4d8fde7ea1 | ||
|
|
838eac4b8c | ||
|
|
0dd313c7d0 | ||
|
|
49ded5c542 | ||
|
|
d460ee980c | ||
|
|
284e697090 | ||
|
|
830b4944ce |
|
|
@ -53,7 +53,7 @@ const PageAbout = props => {
|
|||
{addressCustomer && addressCustomer.length ? (
|
||||
<p>
|
||||
<label>{_t.textAddress}:</label>
|
||||
<Link id="settings-about-address" className="external">{addressCustomer}</Link>
|
||||
<Link id="settings-about-address" external={true}>{addressCustomer}</Link>
|
||||
</p>
|
||||
) : null}
|
||||
{mailCustomer && mailCustomer.length ? (
|
||||
|
|
@ -71,7 +71,7 @@ const PageAbout = props => {
|
|||
|
||||
{urlCustomer && urlCustomer.length ? (
|
||||
<p>
|
||||
<Link id="settings-about-url" className="external" target="_blank"
|
||||
<Link id="settings-about-url" external={true} target="_blank"
|
||||
href={!/^https?:\/{2}/i.test(urlCustomer) ? "http:\/\/" : '' + urlCustomer}>
|
||||
{urlCustomer}
|
||||
</Link>
|
||||
|
|
@ -90,7 +90,7 @@ const PageAbout = props => {
|
|||
</p>
|
||||
<h3 className="vendor">{publisherName}</h3>
|
||||
<p>
|
||||
<Link className="external" target="_blank" href={publisherUrl}>{publisherPrintUrl}</Link>
|
||||
<Link external={true} target="_blank" href={publisherUrl}>{publisherPrintUrl}</Link>
|
||||
</p>
|
||||
</div>
|
||||
</Fragment>
|
||||
|
|
@ -118,7 +118,7 @@ const PageAbout = props => {
|
|||
<Link id="settings-about-tel" external={true} href={`tel:${__PUBLISHER_PHONE__}`}>{__PUBLISHER_PHONE__}</Link>
|
||||
</p>
|
||||
<p>
|
||||
<a id="settings-about-url" className="external" target="_blank" href={publisherUrl}>{publisherPrintUrl}</a>
|
||||
<Link id="settings-about-url" external={true} target="_blank" href={publisherUrl}>{publisherPrintUrl}</Link>
|
||||
</p>
|
||||
</div>
|
||||
</Fragment>
|
||||
|
|
|
|||
|
|
@ -25,7 +25,6 @@ const PageUsers = inject("users")(observer(props => {
|
|||
</NavRight>
|
||||
}
|
||||
</Navbar>
|
||||
<BlockTitle>{_t.textEditUser}</BlockTitle>
|
||||
<List className="coauth__list">
|
||||
{storeUsers.editUsers.map((user, i) => (
|
||||
<ListItem title={user.name + (user.count > 1 ? ` (${user.count})` : '')} key={i}>
|
||||
|
|
|
|||
|
|
@ -616,7 +616,7 @@ const pickLink = (message) => {
|
|||
|
||||
arrayComment = arrayComment.sort(function(item1,item2){ return item1.start - item2.start; });
|
||||
|
||||
let str_res = (arrayComment.length>0) ? <label>{Common.Utils.String.htmlEncode(message.substring(0, arrayComment[0].start))}{arrayComment[0].str}</label> : <label>{message}</label>;
|
||||
let str_res = (arrayComment.length>0) ? <label>{message.substring(0, arrayComment[0].start)}{arrayComment[0].str}</label> : <label>{message}</label>;
|
||||
|
||||
for (var i=1; i<arrayComment.length; i++) {
|
||||
str_res = <label>{str_res}{Common.Utils.String.htmlEncode(message.substring(arrayComment[i-1].end, arrayComment[i].start))}{arrayComment[i].str}</label>;
|
||||
|
|
|
|||
|
|
@ -313,7 +313,10 @@
|
|||
border-radius: 4px;
|
||||
margin-top: -3px;
|
||||
box-shadow: 0 0 0 1px rgba(0, 0, 0, .15) inset;
|
||||
background: @fill-white;
|
||||
background-color: @fill-white;
|
||||
&.auto {
|
||||
background-color: @autoColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -523,4 +526,15 @@
|
|||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Navbar link settings
|
||||
|
||||
.navbar-link-settings {
|
||||
.navbar-inner {
|
||||
background: @background-primary;
|
||||
}
|
||||
.title, a {
|
||||
color: @text-normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -124,11 +124,6 @@
|
|||
background-color: @button-active-opacity;
|
||||
}
|
||||
}
|
||||
.item-content {
|
||||
.color-preview.auto {
|
||||
background-color: @autoColor;
|
||||
}
|
||||
}
|
||||
.item-link .item-inner {
|
||||
width: 100%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
||||
|
|
|
|||
|
|
@ -39,6 +39,21 @@
|
|||
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);
|
||||
}
|
||||
&.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>');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,11 +1,12 @@
|
|||
html{
|
||||
overflow: scroll;
|
||||
overflow: auto;
|
||||
scrollbar-track-color: #eee;
|
||||
scrollbar-face-color: #f7f7f7;
|
||||
scrollbar-highlight-color: #eee;
|
||||
scrollbar-darkshadow-color: #cbcbcb;
|
||||
scrollbar-arrow-color: #adadad;
|
||||
scrollbar-color: #f7f7f7 #eee;
|
||||
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
|
|
@ -20,12 +21,14 @@ html{
|
|||
|
||||
/* thimb*/
|
||||
::-webkit-scrollbar-thumb {
|
||||
box-shadow: inset 0px 0px 0px 1px #cbcbcb;
|
||||
box-shadow: inset 0px 0px 0px 0.5px #cbcbcb;
|
||||
background: #f7f7f7;
|
||||
-webkit-border-radius: 0.1ex;
|
||||
border: #eee 1px solid;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
filter: none;
|
||||
|
||||
}
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: #c0c0c0;
|
||||
|
|
@ -61,7 +64,7 @@ html{
|
|||
::-webkit-scrollbar-button:single-button {
|
||||
height: 14px;
|
||||
width: 14px;
|
||||
box-shadow: inset 0px 0px 0px 1px #cbcbcb;
|
||||
box-shadow: inset 0px 0px 0px 0.5px #cbcbcb;
|
||||
border: #eee 1px solid;
|
||||
background-color: #f7f7f7;
|
||||
background-position: center;
|
||||
|
|
|
|||
|
|
@ -61,7 +61,10 @@
|
|||
"textTableSize": "Table Size",
|
||||
"textWithBlueLinks": "With Blue Links",
|
||||
"textWithPageNumbers": "With Page Numbers",
|
||||
"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\"",
|
||||
"textRequired": "Required",
|
||||
"textRecommended": "Recommended",
|
||||
"textDone": "Done"
|
||||
},
|
||||
"Common": {
|
||||
"Collaboration": {
|
||||
|
|
@ -184,6 +187,7 @@
|
|||
"menuMerge": "Merge",
|
||||
"menuMore": "More",
|
||||
"menuOpenLink": "Open Link",
|
||||
"menuEditLink": "Edit Link",
|
||||
"menuReview": "Review",
|
||||
"menuReviewChange": "Review Change",
|
||||
"menuSeparateList": "Separate list",
|
||||
|
|
@ -318,7 +322,8 @@
|
|||
"textRefreshPageNumbersOnly": "Refresh page numbers only",
|
||||
"textRemoveChart": "Remove Chart",
|
||||
"textRemoveImage": "Remove Image",
|
||||
"textRemoveLink": "Remove Link",
|
||||
"del_textRemoveLink": "Remove Link",
|
||||
"textDeleteLink": "Delete Link",
|
||||
"textRemoveShape": "Remove Shape",
|
||||
"textRemoveTable": "Remove Table",
|
||||
"textRemoveTableContent": "Remove table of contents",
|
||||
|
|
@ -364,7 +369,31 @@
|
|||
"textTu": "Tu",
|
||||
"textType": "Type",
|
||||
"textWe": "We",
|
||||
"textWrap": "Wrap"
|
||||
"textWrap": "Wrap",
|
||||
"textTableOfCont": "TOC",
|
||||
"textPageNumbers": "Page Numbers",
|
||||
"textSimple": "Simple",
|
||||
"textRightAlign": "Right Align",
|
||||
"textLeader": "Leader",
|
||||
"textStructure": "Structure",
|
||||
"textRefresh": "Refresh",
|
||||
"textLevels": "Levels",
|
||||
"textRemoveTableContent": "Remove table of content",
|
||||
"textCurrent": "Current",
|
||||
"textOnline": "Online",
|
||||
"textClassic": "Classic",
|
||||
"textDistinctive": "Distinctive",
|
||||
"textCentered": "Centered",
|
||||
"textFormal": "Formal",
|
||||
"textStandard": "Standard",
|
||||
"textModern": "Modern",
|
||||
"textCancel": "Cancel",
|
||||
"textRefreshEntireTable": "Refresh entire table",
|
||||
"textRefreshPageNumbersOnly": "Refresh page numbers only",
|
||||
"textStyles": "Styles",
|
||||
"textAmountOfLevels": "Amount of Levels",
|
||||
"textRecommended": "Recommended",
|
||||
"textRequired": "Required"
|
||||
},
|
||||
"Error": {
|
||||
"convertationTimeoutText": "Conversion timeout exceeded.",
|
||||
|
|
|
|||
|
|
@ -104,11 +104,13 @@ class ContextMenu extends ContextMenuController {
|
|||
case 'openlink':
|
||||
const stack = api.getSelectedElements();
|
||||
let value;
|
||||
|
||||
stack.forEach((item) => {
|
||||
if (item.get_ObjectType() == Asc.c_oAscTypeSelectElement.Hyperlink) {
|
||||
value = item.get_ObjectValue().get_Value();
|
||||
}
|
||||
});
|
||||
|
||||
value && this.openLink(value);
|
||||
break;
|
||||
case 'review':
|
||||
|
|
@ -317,6 +319,10 @@ class ContextMenu extends ContextMenuController {
|
|||
caption: _t.menuOpenLink,
|
||||
event: 'openlink'
|
||||
});
|
||||
itemsText.push({
|
||||
caption: t('ContextMenu.menuEditLink'),
|
||||
event: 'editlink'
|
||||
});
|
||||
}
|
||||
|
||||
if(inToc) {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import React, {Component} from 'react';
|
||||
import { f7 } from 'framework7-react';
|
||||
import { f7, Popup, Popover, View } from 'framework7-react';
|
||||
import {Device} from '../../../../../common/mobile/utils/device';
|
||||
import { withTranslation} from 'react-i18next';
|
||||
|
||||
|
|
@ -8,14 +8,16 @@ import {PageAddLink} from '../../view/add/AddLink';
|
|||
class AddLinkController extends Component {
|
||||
constructor (props) {
|
||||
super(props);
|
||||
|
||||
this.onInsertLink = this.onInsertLink.bind(this);
|
||||
this.closeModal = this.closeModal.bind(this);
|
||||
}
|
||||
|
||||
closeModal () {
|
||||
if ( Device.phone ) {
|
||||
f7.sheet.close('.add-popup', true);
|
||||
f7.popup.close('#add-link-popup');
|
||||
} else {
|
||||
f7.popover.close('#add-popover');
|
||||
f7.popover.close('#add-link-popover');
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -26,10 +28,8 @@ class AddLinkController extends Component {
|
|||
|
||||
onInsertLink (url, display, tip) {
|
||||
const api = Common.EditorApi.get();
|
||||
|
||||
const { t } = this.props;
|
||||
const _t = t("Add", { returnObjects: true });
|
||||
|
||||
const urltype = api.asc_getUrlType(url.trim());
|
||||
const isEmail = (urltype == 2);
|
||||
|
||||
|
|
@ -54,18 +54,40 @@ class AddLinkController extends Component {
|
|||
_url = _url.replace(new RegExp("%20",'g')," ");
|
||||
|
||||
const props = new Asc.CHyperlinkProperty();
|
||||
|
||||
props.put_Value(_url);
|
||||
props.put_Text(!display ? _url : display);
|
||||
props.put_ToolTip(tip);
|
||||
|
||||
api.add_Hyperlink(props);
|
||||
this.props.isNavigate ? f7.views.current.router.back() : this.closeModal();
|
||||
}
|
||||
|
||||
this.closeModal();
|
||||
componentDidMount() {
|
||||
if(!this.props.isNavigate) {
|
||||
if(Device.phone) {
|
||||
f7.popup.open('#add-link-popup', true);
|
||||
} else {
|
||||
f7.popover.open('#add-link-popover', '#btn-add');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
render () {
|
||||
return (
|
||||
<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" closeByOutsideClick={false} onPopoverClosed={() => this.props.onClosed('add-link')}>
|
||||
<View style={{height: '410px'}}>
|
||||
<PageAddLink closeModal={this.closeModal} onInsertLink={this.onInsertLink} getDisplayLinkText={this.getDisplayLinkText} isNavigate={this.props.isNavigate}/>
|
||||
</View>
|
||||
</Popover>
|
||||
:
|
||||
<PageAddLink closeModal={this.closeModal} onInsertLink={this.onInsertLink} getDisplayLinkText={this.getDisplayLinkText} isNavigate={this.props.isNavigate} />
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import React, {Component} from 'react';
|
||||
import { f7 } from 'framework7-react';
|
||||
import { f7, Popover, Popup, View } from 'framework7-react';
|
||||
import {Device} from '../../../../../common/mobile/utils/device';
|
||||
import {observer, inject} from "mobx-react";
|
||||
import { withTranslation } from 'react-i18next';
|
||||
|
|
@ -9,23 +9,27 @@ import EditHyperlink from '../../view/edit/EditHyperlink';
|
|||
class EditHyperlinkController extends Component {
|
||||
constructor (props) {
|
||||
super(props);
|
||||
|
||||
this.onRemoveLink = this.onRemoveLink.bind(this);
|
||||
this.onEditLink = this.onEditLink.bind(this);
|
||||
this.closeModal = this.closeModal.bind(this);
|
||||
}
|
||||
|
||||
closeModal () {
|
||||
if ( Device.phone ) {
|
||||
f7.sheet.close('#edit-sheet', true);
|
||||
f7.popup.close('#edit-link-popup');
|
||||
} else {
|
||||
f7.popover.close('#edit-popover');
|
||||
f7.popover.close('#edit-link-popover');
|
||||
}
|
||||
}
|
||||
|
||||
onEditLink (link, display, tip) {
|
||||
const api = Common.EditorApi.get();
|
||||
|
||||
if (api) {
|
||||
const urltype = api.asc_getUrlType(link.trim());
|
||||
const isEmail = (urltype == 2);
|
||||
|
||||
if (urltype < 1) {
|
||||
const { t } = this.props;
|
||||
|
||||
|
|
@ -41,21 +45,29 @@ class EditHyperlinkController extends Component {
|
|||
|
||||
return;
|
||||
}
|
||||
|
||||
let url = link.replace(/^\s+|\s+$/g,'');
|
||||
|
||||
if (! /(((^https?)|(^ftp)):\/\/)|(^mailto:)/i.test(url) ) {
|
||||
url = (isEmail ? 'mailto:' : 'http://') + url;
|
||||
}
|
||||
|
||||
url = url.replace(new RegExp("%20",'g')," ");
|
||||
|
||||
const props = new Asc.CHyperlinkProperty();
|
||||
|
||||
props.put_Value(url);
|
||||
props.put_Text(display.trim().length < 1 ? url : display);
|
||||
props.put_ToolTip(tip);
|
||||
|
||||
const linkObject = this.props.storeFocusObjects.linkObject;
|
||||
|
||||
if (linkObject) {
|
||||
props.put_InternalHyperlink(linkObject.get_InternalHyperlink());
|
||||
}
|
||||
|
||||
api.change_Hyperlink(props);
|
||||
this.closeModal();
|
||||
this.props.isNavigate ? f7.views.current.router.back() : this.closeModal();
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -64,16 +76,50 @@ class EditHyperlinkController extends Component {
|
|||
if (api) {
|
||||
const linkObject = this.props.storeFocusObjects.linkObject;
|
||||
api.remove_Hyperlink(linkObject);
|
||||
this.closeModal();
|
||||
}
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
if(!this.props.isNavigate) {
|
||||
if(Device.phone) {
|
||||
f7.popup.open('#edit-link-popup', true);
|
||||
} else {
|
||||
f7.popover.open('#edit-link-popover', '#btn-add');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
render () {
|
||||
return (
|
||||
<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" closeByOutsideClick={false} onPopoverClosed={() => this.props.onClosed('edit-link')}>
|
||||
<View style={{height: '410px'}}>
|
||||
<EditHyperlink
|
||||
onEditLink={this.onEditLink}
|
||||
onRemoveLink={this.onRemoveLink}
|
||||
closeModal={this.closeModal}
|
||||
isNavigate={this.props.isNavigate}
|
||||
/>
|
||||
</View>
|
||||
</Popover>
|
||||
:
|
||||
<EditHyperlink
|
||||
onEditLink={this.onEditLink}
|
||||
onRemoveLink={this.onRemoveLink}
|
||||
closeModal={this.closeModal}
|
||||
isNavigate={this.props.isNavigate}
|
||||
/>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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 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 :
|
||||
|
|
|
|||
|
|
@ -14,6 +14,7 @@ import {AddOtherController} from "../../controller/add/AddOther";
|
|||
import {PageImageLinkSettings} from "../add/AddImage";
|
||||
import {PageAddNumber, PageAddBreak, PageAddSectionBreak, PageAddFootnote} from "../add/AddOther";
|
||||
import AddTableContentsController from '../../controller/add/AddTableContents';
|
||||
import EditHyperlink from '../../controller/edit/EditHyperlink';
|
||||
|
||||
const routes = [
|
||||
// Image
|
||||
|
|
@ -26,6 +27,14 @@ const routes = [
|
|||
path: '/add-link/',
|
||||
component: AddLinkController,
|
||||
},
|
||||
{
|
||||
path: '/edit-link/',
|
||||
component: EditHyperlink
|
||||
},
|
||||
{
|
||||
path: '/add-image/',
|
||||
component: AddImageController
|
||||
},
|
||||
{
|
||||
path: '/add-page-number/',
|
||||
component: PageAddNumber,
|
||||
|
|
@ -64,7 +73,7 @@ const AddLayoutNavbar = ({ tabs, inPopover }) => {
|
|||
</div> :
|
||||
<NavTitle>{ tabs[0].caption }</NavTitle>
|
||||
}
|
||||
{ !inPopover && <NavRight><Link icon='icon-expand-down' popupClose=".add-popup"></Link></NavRight> }
|
||||
{!inPopover && <NavRight><Link icon='icon-expand-down' popupClose=".add-popup"></Link></NavRight>}
|
||||
</Navbar>
|
||||
)
|
||||
};
|
||||
|
|
@ -81,7 +90,7 @@ const AddLayoutContent = ({ tabs, onGetTableStylesPreviews }) => {
|
|||
)
|
||||
};
|
||||
|
||||
const AddTabs = inject("storeFocusObjects", "storeTableSettings")(observer(({storeFocusObjects,storeTableSettings, showPanels, style, inPopover}) => {
|
||||
const AddTabs = inject("storeFocusObjects", "storeTableSettings")(observer(({storeFocusObjects,storeTableSettings, showPanels, style, inPopover, onCloseLinkSettings}) => {
|
||||
const { t } = useTranslation();
|
||||
const _t = t('Add', {returnObjects: true});
|
||||
const api = Common.EditorApi.get();
|
||||
|
|
@ -147,18 +156,19 @@ const AddTabs = inject("storeFocusObjects", "storeTableSettings")(observer(({sto
|
|||
});
|
||||
}
|
||||
}
|
||||
if(!showPanels) {
|
||||
needDisable = paragraphLocked || paragraphObj && !canAddImage || controlPlain || richDelLock || plainDelLock || contentLocked;
|
||||
// if(!showPanels) {
|
||||
// needDisable = paragraphLocked || paragraphObj && !canAddImage || controlPlain || richDelLock || plainDelLock || contentLocked;
|
||||
|
||||
// if(!needDisable) {
|
||||
// tabs.push({
|
||||
// caption: _t.textImage,
|
||||
// id: 'add-image',
|
||||
// icon: 'icon-add-image',
|
||||
// component: <AddImageController/>
|
||||
// });
|
||||
// }
|
||||
// }
|
||||
|
||||
if(!needDisable) {
|
||||
tabs.push({
|
||||
caption: _t.textImage,
|
||||
id: 'add-image',
|
||||
icon: 'icon-add-image',
|
||||
component: <AddImageController/>
|
||||
});
|
||||
}
|
||||
}
|
||||
if(!showPanels) {
|
||||
tabs.push({
|
||||
caption: _t.textOther,
|
||||
|
|
@ -173,17 +183,19 @@ const AddTabs = inject("storeFocusObjects", "storeTableSettings")(observer(({sto
|
|||
richDelLock={richDelLock}
|
||||
richEditLock={richEditLock}
|
||||
plainDelLock={plainDelLock}
|
||||
plainEditLock={plainEditLock}
|
||||
plainEditLock={plainEditLock}
|
||||
onCloseLinkSettings={onCloseLinkSettings}
|
||||
/>
|
||||
});
|
||||
}
|
||||
if (showPanels && showPanels === 'link') {
|
||||
tabs.push({
|
||||
caption: _t.textAddLink,
|
||||
id: 'add-link',
|
||||
component: <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) {
|
||||
|
|
@ -216,10 +228,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>
|
||||
)
|
||||
}
|
||||
|
|
@ -242,7 +254,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;
|
||||
|
|
@ -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>
|
||||
)
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import React, {useState} from 'react';
|
||||
import {List, Page, Navbar, Icon, ListButton, ListInput} from 'framework7-react';
|
||||
import {List, Page, Navbar, Icon, ListButton, ListInput, NavRight, Link, NavLeft, f7, NavTitle} from 'framework7-react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import {Device} from "../../../../../common/mobile/utils/device";
|
||||
|
||||
|
|
@ -17,12 +17,28 @@ const PageLink = props => {
|
|||
|
||||
return (
|
||||
<Page>
|
||||
{!props.noNavbar && <Navbar title={_t.textAddLink} backLink={_t.textBack}></Navbar>}
|
||||
<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>
|
||||
<Link className={`${stateLink.length < 1 && 'disabled'}`} onClick={() => {
|
||||
props.onInsertLink(stateLink, stateDisplay, stateTip);
|
||||
}} text={Device.ios ? t('Add.textDone') : ''}>
|
||||
{Device.android && <Icon icon={stateLink.length < 1 ? 'icon-done-disabled' : 'icon-done'} />}
|
||||
</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,7 +48,7 @@ const PageLink = props => {
|
|||
<ListInput
|
||||
label={_t.textDisplay}
|
||||
type="text"
|
||||
placeholder={_t.textDisplay}
|
||||
placeholder={t('Add.textRecommended')}
|
||||
value={stateDisplay}
|
||||
onChange={(event) => {
|
||||
setDisplay(event.target.value);
|
||||
|
|
@ -47,11 +63,11 @@ const PageLink = props => {
|
|||
onChange={(event) => {setTip(event.target.value)}}
|
||||
></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>
|
||||
)
|
||||
};
|
||||
|
|
|
|||
|
|
@ -159,7 +159,8 @@ const AddOther = props => {
|
|||
|
||||
let isShape = storeFocusObjects.settings.indexOf('shape') > -1,
|
||||
isText = storeFocusObjects.settings.indexOf('text') > -1,
|
||||
isChart = storeFocusObjects.settings.indexOf('chart') > -1;
|
||||
isChart = storeFocusObjects.settings.indexOf('chart') > -1,
|
||||
isHyperLink = storeFocusObjects.settings.indexOf('hyperlink') > -1;
|
||||
|
||||
let disabledAddLink = false,
|
||||
disabledAddBreak = false,
|
||||
|
|
@ -187,9 +188,12 @@ const AddOther = props => {
|
|||
}}>
|
||||
<Icon slot="media" icon="icon-insert-comment"></Icon>
|
||||
</ListItem>}
|
||||
{(isText && !disabledAddLink) && <ListItem title={_t.textLink} link={'/add-link/'} routeProps={{
|
||||
onInsertLink: props.onInsertLink,
|
||||
getDisplayLinkText: props.getDisplayLinkText
|
||||
<ListItem title={_t.textImage} link='/add-image/'>
|
||||
<Icon slot="media" icon="icon-image"></Icon>
|
||||
</ListItem>
|
||||
{(isText && !disabledAddLink) && <ListItem title={_t.textLink} href={isHyperLink ? '/edit-link/' : '/add-link/'} routeProps={{
|
||||
onClosed: props.onCloseLinkSettings,
|
||||
isNavigate: true
|
||||
}}>
|
||||
<Icon slot="media" icon="icon-link"></Icon>
|
||||
</ListItem>}
|
||||
|
|
|
|||
|
|
@ -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/',
|
||||
|
|
@ -284,18 +291,25 @@ const EditTabs = props => {
|
|||
component: <EmptyEditLayout />
|
||||
});
|
||||
} else {
|
||||
if (settings.indexOf('text') > -1) {
|
||||
if (settings.indexOf('image') > -1) {
|
||||
editors.push({
|
||||
caption: _t.textText,
|
||||
id: 'edit-text',
|
||||
component: <EditTextController />
|
||||
caption: _t.textImage,
|
||||
id: 'edit-image',
|
||||
component: <EditImageController />
|
||||
})
|
||||
}
|
||||
if (settings.indexOf('paragraph') > -1) {
|
||||
if (settings.indexOf('shape') > -1) {
|
||||
editors.push({
|
||||
caption: _t.textParagraph,
|
||||
id: 'edit-paragraph',
|
||||
component: <EditParagraphController />
|
||||
caption: _t.textShape,
|
||||
id: 'edit-shape',
|
||||
component: <EditShapeController />
|
||||
})
|
||||
}
|
||||
if (settings.indexOf('chart') > -1) {
|
||||
editors.push({
|
||||
caption: _t.textChart,
|
||||
id: 'edit-chart',
|
||||
component: <EditChartController />
|
||||
})
|
||||
}
|
||||
if (settings.indexOf('table') > -1) {
|
||||
|
|
@ -312,27 +326,6 @@ const EditTabs = props => {
|
|||
component: <EditHeaderController />
|
||||
})
|
||||
}
|
||||
if (settings.indexOf('shape') > -1) {
|
||||
editors.push({
|
||||
caption: _t.textShape,
|
||||
id: 'edit-shape',
|
||||
component: <EditShapeController />
|
||||
})
|
||||
}
|
||||
if (settings.indexOf('image') > -1) {
|
||||
editors.push({
|
||||
caption: _t.textImage,
|
||||
id: 'edit-image',
|
||||
component: <EditImageController />
|
||||
})
|
||||
}
|
||||
if (settings.indexOf('chart') > -1) {
|
||||
editors.push({
|
||||
caption: _t.textChart,
|
||||
id: 'edit-chart',
|
||||
component: <EditChartController />
|
||||
})
|
||||
}
|
||||
if(inToc) {
|
||||
editors.push({
|
||||
caption: _t.textTableOfCont,
|
||||
|
|
@ -340,11 +333,18 @@ const EditTabs = props => {
|
|||
component: <EditTableContentsController />
|
||||
})
|
||||
}
|
||||
if (settings.indexOf('hyperlink') > -1) {
|
||||
if (settings.indexOf('paragraph') > -1) {
|
||||
editors.push({
|
||||
caption: _t.textHyperlink,
|
||||
id: 'edit-link',
|
||||
component: <EditHyperlinkController />
|
||||
caption: _t.textParagraph,
|
||||
id: 'edit-paragraph',
|
||||
component: <EditParagraphController />
|
||||
})
|
||||
}
|
||||
if (settings.indexOf('text') > -1) {
|
||||
editors.push({
|
||||
caption: _t.textText,
|
||||
id: 'edit-text',
|
||||
component: <EditTextController />
|
||||
})
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,32 +1,56 @@
|
|||
import React, {Fragment, useState} from 'react';
|
||||
import {observer, inject} from "mobx-react";
|
||||
import {List, ListInput, ListButton} from 'framework7-react';
|
||||
import {List, ListInput, ListButton, Page, f7, Link, Navbar, NavLeft, NavTitle, NavRight, Icon} from 'framework7-react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import {Device} from "../../../../../common/mobile/utils/device";
|
||||
|
||||
const EditHyperlink = props => {
|
||||
const { t } = useTranslation();
|
||||
const _t = t('Edit', {returnObjects: true});
|
||||
const linkObject = props.storeFocusObjects.linkObject;
|
||||
const link = linkObject.get_Value() ? linkObject.get_Value().replace(new RegExp(" ", 'g'), "%20") : '';
|
||||
const display = !(linkObject.get_Text() === null) ? linkObject.get_Text() : '';
|
||||
const tip = linkObject.get_ToolTip();
|
||||
let link = '', display = '', tip = '';
|
||||
|
||||
if(linkObject) {
|
||||
link = linkObject.get_Value() ? linkObject.get_Value().replace(new RegExp(" ", 'g'), "%20") : '';
|
||||
display = !(linkObject.get_Text() === null) ? linkObject.get_Text() : '';
|
||||
tip = linkObject.get_ToolTip();
|
||||
}
|
||||
|
||||
const [stateLink, setLink] = useState(link);
|
||||
const [stateDisplay, setDisplay] = useState(display);
|
||||
const [stateTip, setTip] = useState(tip);
|
||||
|
||||
return (
|
||||
<Fragment>
|
||||
<Page>
|
||||
<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>
|
||||
<Link className={`${stateLink.length < 1 && 'disabled'}`} onClick={() => {
|
||||
props.onEditLink(stateLink, stateDisplay, stateTip);
|
||||
}} text={Device.ios ? t('Add.textDone') : ''}>
|
||||
{Device.android && <Icon icon={stateLink.length < 1 ? 'icon-done-disabled' : 'icon-done'} />}
|
||||
</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>
|
||||
|
|
@ -39,12 +63,15 @@ const EditHyperlink = props => {
|
|||
></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>
|
||||
)
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
html{
|
||||
overflow: scroll;
|
||||
overflow: auto;
|
||||
scrollbar-track-color: #eee;
|
||||
scrollbar-face-color: #f7f7f7;
|
||||
scrollbar-highlight-color: #eee;
|
||||
|
|
@ -20,7 +20,7 @@ html{
|
|||
|
||||
/* thimb*/
|
||||
::-webkit-scrollbar-thumb {
|
||||
box-shadow: inset 0px 0px 0px 1px #cbcbcb;
|
||||
box-shadow: inset 0px 0px 0px 0.5px #cbcbcb;
|
||||
background: #f7f7f7;
|
||||
-webkit-border-radius: 0.1ex;
|
||||
border: #eee 1px solid;
|
||||
|
|
@ -61,7 +61,7 @@ html{
|
|||
::-webkit-scrollbar-button:single-button {
|
||||
height: 14px;
|
||||
width: 14px;
|
||||
box-shadow: inset 0px 0px 0px 1px #cbcbcb;
|
||||
box-shadow: inset 0px 0px 0px 0.5px #cbcbcb;
|
||||
border: #eee 1px solid;
|
||||
background-color: #f7f7f7;
|
||||
background-position: center;
|
||||
|
|
|
|||
|
|
@ -59,7 +59,8 @@
|
|||
"textColumns": "Columns",
|
||||
"textCopyCutPasteActions": "Copy, Cut and Paste Actions",
|
||||
"textDoNotShowAgain": "Don't show again",
|
||||
"textRows": "Rows"
|
||||
"textRows": "Rows",
|
||||
"menuEditLink": "Edit Link"
|
||||
},
|
||||
"Controller": {
|
||||
"Main": {
|
||||
|
|
@ -117,12 +118,12 @@
|
|||
"textRequestMacros": "A macro makes a request to URL. Do you want to allow the request to the %1?",
|
||||
"textYes": "Yes",
|
||||
"titleLicenseExp": "License expired",
|
||||
"warnLicenseExp": "Your license has expired. Please, update your license and refresh the page.",
|
||||
"titleServerVersion": "Editor updated",
|
||||
"titleUpdateVersion": "Version changed",
|
||||
"txtIncorrectPwd": "Password is incorrect",
|
||||
"txtProtected": "Once you enter the password and open the file, the current password to the file will be reset",
|
||||
"warnLicenseExceeded": "You've reached the limit for simultaneous connections to %1 editors. This document will be opened for viewing only. Contact your administrator to learn more.",
|
||||
"warnLicenseExp": "Your license has expired. Please, update it and refresh the page.",
|
||||
"warnLicenseLimitedNoAccess": "License expired. You have no access to document editing functionality. Please, contact your administrator.",
|
||||
"warnLicenseLimitedRenewed": "License needs to be renewed. You have limited access to document editing functionality.<br>Please contact your administrator to get full access",
|
||||
"warnLicenseUsersExceeded": "You've reached the user limit for %1 editors. Contact your administrator to learn more.",
|
||||
|
|
@ -243,7 +244,10 @@
|
|||
"textSlideNumber": "Slide Number",
|
||||
"textTable": "Table",
|
||||
"textTableSize": "Table Size",
|
||||
"txtNotUrl": "This field should be a URL in the format \"http://www.example.com\""
|
||||
"txtNotUrl": "This field should be a URL in the format \"http://www.example.com\"",
|
||||
"textDone": "Done",
|
||||
"textRequired": "Required",
|
||||
"textRecommended": "Recommended"
|
||||
},
|
||||
"Edit": {
|
||||
"notcriticalErrorTitle": "Warning",
|
||||
|
|
@ -322,6 +326,7 @@
|
|||
"textHyperlink": "Hyperlink",
|
||||
"textImage": "Image",
|
||||
"textImageURL": "Image URL",
|
||||
"textInsertImage": "Insert Image",
|
||||
"textLastColumn": "Last Column",
|
||||
"textLastSlide": "Last Slide",
|
||||
"textLayout": "Layout",
|
||||
|
|
@ -350,7 +355,8 @@
|
|||
"textPush": "Push",
|
||||
"textRemoveChart": "Remove Chart",
|
||||
"textRemoveImage": "Remove Image",
|
||||
"textRemoveLink": "Remove Link",
|
||||
"del_textRemoveLink": "Remove Link",
|
||||
"textDeleteLink": "Delete Link",
|
||||
"textRemoveShape": "Remove Shape",
|
||||
"textRemoveTable": "Remove Table",
|
||||
"textReorder": "Reorder",
|
||||
|
|
@ -394,7 +400,10 @@
|
|||
"textZoom": "Zoom",
|
||||
"textZoomIn": "Zoom In",
|
||||
"textZoomOut": "Zoom Out",
|
||||
"textZoomRotate": "Zoom and Rotate"
|
||||
"textZoomRotate": "Zoom and Rotate",
|
||||
"textCancel": "Cancel",
|
||||
"textRequired": "Required",
|
||||
"textRecommended": "Recommended"
|
||||
},
|
||||
"Settings": {
|
||||
"mniSlideStandard": "Standard (4:3)",
|
||||
|
|
|
|||
|
|
@ -162,8 +162,26 @@ class MainController extends Component {
|
|||
|
||||
const onEditorPermissions = params => {
|
||||
const licType = params.asc_getLicenseType();
|
||||
const { t } = this.props;
|
||||
// const _t = t('Controller.Main', { returnObjects:true });
|
||||
|
||||
if (Asc.c_oLicenseResult.Expired === licType ||
|
||||
Asc.c_oLicenseResult.Error === licType ||
|
||||
Asc.c_oLicenseResult.ExpiredTrial === licType) {
|
||||
|
||||
this.appOptions.canLicense = (licType === Asc.c_oLicenseResult.Success || licType === Asc.c_oLicenseResult.SuccessLimit);
|
||||
f7.dialog.create({
|
||||
title: t('Controller.Main.titleLicenseExp'),
|
||||
text: t('Controller.Main.warnLicenseExp')
|
||||
}).open();
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
if (Asc.c_oLicenseResult.ExpiredLimited === licType) {
|
||||
this._state.licenseType = licType;
|
||||
}
|
||||
|
||||
this.appOptions.canLicense = (licType === Asc.c_oLicenseResult.Success || licType === Asc.c_oLicenseResult.SuccessLimit);
|
||||
|
||||
const storeAppOptions = this.props.storeAppOptions;
|
||||
storeAppOptions.setPermissionOptions(this.document, licType, params, this.permissions, EditorUIController.isSupportEditFeature());
|
||||
|
|
|
|||
|
|
@ -1,9 +1,20 @@
|
|||
import React, {Component} from 'react';
|
||||
import { f7 } from 'framework7-react';
|
||||
import { f7, Popup, Popover, View } from 'framework7-react';
|
||||
import {Device} from '../../../../../common/mobile/utils/device';
|
||||
import { withTranslation} from 'react-i18next';
|
||||
|
||||
import {PageLink} from '../../view/add/AddLink';
|
||||
import {PageLink, PageTypeLink, PageLinkTo} from '../../view/add/AddLink';
|
||||
|
||||
const routes = [
|
||||
{
|
||||
path: '/add-link-type/',
|
||||
component: PageTypeLink
|
||||
},
|
||||
{
|
||||
path: '/add-link-to/',
|
||||
component: PageLinkTo
|
||||
}
|
||||
];
|
||||
|
||||
class AddLinkController extends Component {
|
||||
constructor (props) {
|
||||
|
|
@ -17,9 +28,9 @@ class AddLinkController extends Component {
|
|||
|
||||
closeModal () {
|
||||
if ( Device.phone ) {
|
||||
f7.sheet.close('.add-popup', true);
|
||||
f7.popup.close('#add-link-popup');
|
||||
} else {
|
||||
f7.popover.close('#add-popover');
|
||||
f7.popover.close('#add-link-popover');
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -35,12 +46,14 @@ class AddLinkController extends Component {
|
|||
const display = linkInfo.display;
|
||||
const tip = linkInfo.tip;
|
||||
const props = new Asc.CHyperlinkProperty();
|
||||
|
||||
let def_display = '';
|
||||
|
||||
if (type == c_oHyperlinkType.WebLink) {
|
||||
let url = linkInfo.url;
|
||||
const urltype = api.asc_getUrlType(url.trim());
|
||||
const isEmail = (urltype == 2);
|
||||
|
||||
if (urltype < 1) {
|
||||
f7.dialog.create({
|
||||
title: _t.notcriticalErrorTitle,
|
||||
|
|
@ -61,10 +74,12 @@ class AddLinkController extends Component {
|
|||
|
||||
props.put_Value(url);
|
||||
props.put_ToolTip(tip);
|
||||
|
||||
def_display = url;
|
||||
} else {
|
||||
let url = "ppaction://hlink";
|
||||
let slidetip = '';
|
||||
|
||||
switch (linkInfo.linkTo) {
|
||||
case 0:
|
||||
url = url + "showjump?jump=nextslide";
|
||||
|
|
@ -87,6 +102,7 @@ class AddLinkController extends Component {
|
|||
slidetip = _t.textSlide + ' ' + (linkInfo.numberTo + 1);
|
||||
break;
|
||||
}
|
||||
|
||||
props.put_Value(url);
|
||||
props.put_ToolTip(!tip ? slidetip : tip);
|
||||
def_display = slidetip;
|
||||
|
|
@ -98,20 +114,40 @@ class AddLinkController extends Component {
|
|||
props.put_Text(null);
|
||||
|
||||
api.add_Hyperlink(props);
|
||||
|
||||
this.closeModal();
|
||||
this.props.isNavigate ? f7.views.current.router.back() : this.closeModal();
|
||||
}
|
||||
|
||||
getTextDisplay () {
|
||||
return this.textDisplay;
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
if(!this.props.isNavigate) {
|
||||
if(Device.phone) {
|
||||
f7.popup.open('#add-link-popup', true);
|
||||
} else {
|
||||
f7.popover.open('#add-link-popover', '#btn-add');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
render () {
|
||||
return (
|
||||
<PageLink onInsertLink={this.onInsertLink}
|
||||
getTextDisplay={this.getTextDisplay}
|
||||
noNavbar={this.props.noNavbar}
|
||||
/>
|
||||
!this.props.isNavigate ?
|
||||
Device.phone ?
|
||||
<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} />
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@ import {AddOther} from '../../view/add/AddOther';
|
|||
class AddOtherController extends Component {
|
||||
constructor (props) {
|
||||
super(props);
|
||||
|
||||
this.onStyleClick = this.onStyleClick.bind(this);
|
||||
this.onGetTableStylesPreviews = this.onGetTableStylesPreviews.bind(this);
|
||||
}
|
||||
|
|
@ -120,6 +121,7 @@ class AddOtherController extends Component {
|
|||
onStyleClick={this.onStyleClick}
|
||||
hideAddComment={this.hideAddComment}
|
||||
onGetTableStylesPreviews = {this.onGetTableStylesPreviews}
|
||||
onCloseLinkSettings={this.props.onCloseLinkSettings}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,10 +1,21 @@
|
|||
import React, { Component } from 'react';
|
||||
import { f7 } from 'framework7-react';
|
||||
import { f7, View, Popup, Popover } from 'framework7-react';
|
||||
import { Device } from '../../../../../common/mobile/utils/device';
|
||||
import {observer, inject} from "mobx-react";
|
||||
import { withTranslation } from 'react-i18next';
|
||||
|
||||
import { EditLink } from '../../view/edit/EditLink';
|
||||
import { EditLink, PageEditTypeLink, PageEditLinkTo } from '../../view/edit/EditLink';
|
||||
|
||||
const routes = [
|
||||
{
|
||||
path: '/edit-link-type/',
|
||||
component: PageEditTypeLink
|
||||
},
|
||||
{
|
||||
path: '/edit-link-to/',
|
||||
component: PageEditLinkTo
|
||||
}
|
||||
];
|
||||
|
||||
class EditLinkController extends Component {
|
||||
constructor (props) {
|
||||
|
|
@ -21,9 +32,9 @@ class EditLinkController extends Component {
|
|||
|
||||
closeModal () {
|
||||
if ( Device.phone ) {
|
||||
f7.sheet.close('#edit-sheet', true);
|
||||
f7.popup.close('#edit-link-popup');
|
||||
} else {
|
||||
f7.popover.close('#edit-popover');
|
||||
f7.popover.close('#edit-link-popover');
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -156,30 +167,80 @@ class EditLinkController extends Component {
|
|||
props.put_Text(null);
|
||||
|
||||
api.change_Hyperlink(props);
|
||||
|
||||
this.closeModal();
|
||||
this.props.isNavigate ? f7.views.current.router.back() : this.closeModal();
|
||||
}
|
||||
|
||||
onRemoveLink() {
|
||||
const api = Common.EditorApi.get();
|
||||
api.remove_Hyperlink();
|
||||
this.closeModal();
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
if(!this.props.isNavigate) {
|
||||
if(Device.phone) {
|
||||
f7.popup.open('#edit-link-popup', true);
|
||||
} else {
|
||||
f7.popover.open('#edit-link-popover', '#btn-add');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
render () {
|
||||
return (
|
||||
<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}
|
||||
/>
|
||||
!this.props.isNavigate ?
|
||||
Device.phone ?
|
||||
<Popup id="edit-link-popup" onPopupClosed={() => this.props.onClosed('edit-link')}>
|
||||
<View routes={routes} style={{height: '100%'}}>
|
||||
<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>
|
||||
</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}
|
||||
/>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,6 +8,26 @@ import { EditText } from '../../view/edit/EditText';
|
|||
class EditTextController extends Component {
|
||||
constructor (props) {
|
||||
super(props);
|
||||
|
||||
this.onApiImageLoaded = this.onApiImageLoaded.bind(this);
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
const api = Common.EditorApi.get();
|
||||
api.asc_registerCallback('asc_onBulletImageLoaded', this.onApiImageLoaded);
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
const api = Common.EditorApi.get();
|
||||
api.asc_unregisterCallback('asc_onBulletImageLoaded', this.onApiImageLoaded);
|
||||
}
|
||||
|
||||
closeModal() {
|
||||
if ( Device.phone ) {
|
||||
f7.sheet.close('#edit-sheet', true);
|
||||
} else {
|
||||
f7.popover.close('#edit-popover');
|
||||
}
|
||||
}
|
||||
|
||||
toggleBold(value) {
|
||||
|
|
@ -247,6 +267,40 @@ class EditTextController extends Component {
|
|||
if (api) api.SetDrawImagePreviewBulletForMenu(arr, type);
|
||||
}
|
||||
|
||||
onApiImageLoaded(bullet) {
|
||||
const api = Common.EditorApi.get();
|
||||
const selectedElements = api.getSelectedElements();
|
||||
const imageProp = {id: bullet.asc_getImageId(), redraw: true};
|
||||
|
||||
let selectItem = null;
|
||||
|
||||
if(selectedElements) {
|
||||
for (var i = 0; i< selectedElements.length; i++) {
|
||||
if (Asc.c_oAscTypeSelectElement.Paragraph == selectedElements[i].get_ObjectType()) {
|
||||
selectItem = selectedElements[i].get_ObjectValue();
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
bullet.asc_fillBulletImage(imageProp.id);
|
||||
selectItem.asc_putBullet(bullet);
|
||||
api.paraApply(selectItem);
|
||||
this.closeModal();
|
||||
}
|
||||
|
||||
onImageSelect() {
|
||||
(new Asc.asc_CBullet()).asc_showFileDialog();
|
||||
}
|
||||
|
||||
onInsertByUrl(value) {
|
||||
var checkUrl = value.replace(/ /g, '');
|
||||
|
||||
if(checkUrl) {
|
||||
(new Asc.asc_CBullet()).asc_putImageUrl(checkUrl);
|
||||
}
|
||||
}
|
||||
|
||||
onLineSpacing(value) {
|
||||
const api = Common.EditorApi.get();
|
||||
const LINERULE_AUTO = 1;
|
||||
|
|
@ -276,6 +330,8 @@ class EditTextController extends Component {
|
|||
onBullet={this.onBullet}
|
||||
onNumber={this.onNumber}
|
||||
getIconsBulletsAndNumbers={this.getIconsBulletsAndNumbers}
|
||||
onImageSelect={this.onImageSelect}
|
||||
onInsertByUrl={this.onInsertByUrl}
|
||||
onLineSpacing={this.onLineSpacing}
|
||||
/>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -171,4 +171,12 @@
|
|||
z-index: 1;
|
||||
.encoded-svg-background('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 22 22" fill="#aa5252"><g><circle fill="#fff" cx="11" cy="11" r="11"/><path d="M11,21A10,10,0,1,1,21,11,10,10,0,0,1,11,21h0ZM17.4,7.32L17.06,7a0.48,0.48,0,0,0-.67,0l-7,6.84L6.95,11.24a0.51,0.51,0,0,0-.59.08L6,11.66a0.58,0.58,0,0,0,0,.65l3.19,3.35a0.38,0.38,0,0,0,.39,0L17.4,8a0.48,0.48,0,0,0,0-.67h0Z"/></g></svg>');
|
||||
}
|
||||
}
|
||||
|
||||
.bullet-menu-image ul{
|
||||
padding: 0;
|
||||
|
||||
li {
|
||||
display: inherit;
|
||||
}
|
||||
}
|
||||
|
|
@ -11,6 +11,8 @@ import { Preview } from "../controller/Preview";
|
|||
import { Search, SearchSettings } from '../controller/Search';
|
||||
import ContextMenu from '../controller/ContextMenu';
|
||||
import { Toolbar } from "../controller/Toolbar";
|
||||
import { AddLinkController } from '../controller/add/AddLink';
|
||||
import { EditLinkController } from '../controller/edit/EditLink';
|
||||
class MainPage extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
|
@ -19,7 +21,9 @@ class MainPage extends Component {
|
|||
addOptionsVisible: false,
|
||||
settingsVisible: false,
|
||||
collaborationVisible: false,
|
||||
previewVisible: false
|
||||
previewVisible: false,
|
||||
addLinkSettingsVisible: false,
|
||||
editLinkSettingsVisible: false
|
||||
};
|
||||
}
|
||||
|
||||
|
|
@ -49,6 +53,12 @@ class MainPage extends Component {
|
|||
} else if ( opts === 'preview' ) {
|
||||
this.state.previewVisible && (opened = true);
|
||||
newState.previewVisible = true;
|
||||
} else if ( opts === 'add-link') {
|
||||
this.state.addLinkSettingsVisible && (opened = true);
|
||||
newState.addLinkSettingsVisible = true;
|
||||
} else if( opts === 'edit-link') {
|
||||
this.state.editLinkSettingsVisible && (opened = true);
|
||||
newState.editLinkSettingsVisible = true;
|
||||
}
|
||||
|
||||
for (let key in this.state) {
|
||||
|
|
@ -82,6 +92,10 @@ class MainPage extends Component {
|
|||
return {collaborationVisible: false}
|
||||
else if ( opts == 'preview' )
|
||||
return {previewVisible: false};
|
||||
else if ( opts === 'add-link')
|
||||
return {addLinkSettingsVisible: false};
|
||||
else if( opts === 'edit-link')
|
||||
return {editLinkSettingsVisible: false};
|
||||
});
|
||||
if ((opts === 'edit' || opts === 'coauth') && Device.phone) {
|
||||
f7.navbar.show('.main-navbar');
|
||||
|
|
@ -144,7 +158,15 @@ class MainPage extends Component {
|
|||
}
|
||||
{
|
||||
!this.state.addOptionsVisible ? null :
|
||||
<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 :
|
||||
|
|
@ -155,7 +177,6 @@ class MainPage extends Component {
|
|||
<CollaborationView onclosed={this.handleOptionsViewClosed.bind(this, 'coauth')} />
|
||||
}
|
||||
{appOptions.isDocReady && <ContextMenu openOptions={this.handleClickToOpenOptions.bind(this)} />}
|
||||
|
||||
</Page>
|
||||
</Fragment>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -12,7 +12,9 @@ import {PageImageLinkSettings} from "./AddImage";
|
|||
import {AddOtherController} from "../../controller/add/AddOther";
|
||||
import {PageAddTable} from "./AddOther";
|
||||
import {AddLinkController} from "../../controller/add/AddLink";
|
||||
import {PageTypeLink, PageLinkTo} from "./AddLink";
|
||||
import { PageTypeLink, PageLinkTo } from "./AddLink";
|
||||
import { EditLinkController } from '../../controller/edit/EditLink';
|
||||
import { PageEditTypeLink, PageEditLinkTo } from '../../view/edit/EditLink';
|
||||
|
||||
const routes = [
|
||||
// Image
|
||||
|
|
@ -20,6 +22,7 @@ const routes = [
|
|||
path: '/add-image-from-url/',
|
||||
component: PageImageLinkSettings
|
||||
},
|
||||
|
||||
// Other
|
||||
{
|
||||
path: '/add-table/',
|
||||
|
|
@ -36,6 +39,25 @@ const routes = [
|
|||
{
|
||||
path: '/add-link-to/',
|
||||
component: PageLinkTo
|
||||
},
|
||||
{
|
||||
path: '/edit-link/',
|
||||
component: EditLinkController
|
||||
},
|
||||
{
|
||||
path: '/edit-link-type/',
|
||||
component: PageEditTypeLink
|
||||
},
|
||||
{
|
||||
path: '/edit-link-to/',
|
||||
component: PageEditLinkTo
|
||||
},
|
||||
|
||||
// Image
|
||||
|
||||
{
|
||||
path: '/add-image/',
|
||||
component: AddImageController
|
||||
}
|
||||
];
|
||||
|
||||
|
|
@ -90,17 +112,19 @@ const AddTabs = props => {
|
|||
icon: 'icon-add-shape',
|
||||
component: <AddShapeController/>
|
||||
});
|
||||
tabs.push({
|
||||
caption: _t.textImage,
|
||||
id: 'add-image',
|
||||
icon: 'icon-add-image',
|
||||
component: <AddImageController/>
|
||||
});
|
||||
|
||||
// tabs.push({
|
||||
// caption: _t.textImage,
|
||||
// id: 'add-image',
|
||||
// icon: 'icon-add-image',
|
||||
// component: <AddImageController/>
|
||||
// });
|
||||
|
||||
tabs.push({
|
||||
caption: _t.textOther,
|
||||
id: 'add-other',
|
||||
icon: 'icon-add-other',
|
||||
component: <AddOtherController/>
|
||||
component: <AddOtherController onCloseLinkSettings={props.onCloseLinkSettings} />
|
||||
});
|
||||
}
|
||||
if(!showPanels && !countPages) {
|
||||
|
|
@ -111,13 +135,15 @@ const AddTabs = props => {
|
|||
component: <AddSlideController />
|
||||
});
|
||||
}
|
||||
if (showPanels && showPanels === 'link') {
|
||||
tabs.push({
|
||||
caption: _t.textAddLink,
|
||||
id: 'add-link',
|
||||
component: <AddLinkController noNavbar={true}/>
|
||||
});
|
||||
}
|
||||
|
||||
// if (showPanels && showPanels === 'link') {
|
||||
// tabs.push({
|
||||
// caption: _t.textAddLink,
|
||||
// id: 'add-link',
|
||||
// component: <AddLinkController noNavbar={true}/>
|
||||
// });
|
||||
// }
|
||||
|
||||
return (
|
||||
<View style={props.style} stackPages={true} routes={routes}>
|
||||
<Page pageContent={false}>
|
||||
|
|
@ -142,10 +168,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} onOptionClick={this.onoptionclick} onCloseLinkSettings={this.props.onCloseLinkSettings} style={{height: '410px'}} showPanels={this.props.showPanels} />
|
||||
</Popover> :
|
||||
<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>
|
||||
)
|
||||
}
|
||||
|
|
@ -166,7 +192,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;
|
||||
|
|
@ -33,16 +33,19 @@ const AddImage = props => {
|
|||
const { t } = useTranslation();
|
||||
const _t = t('View.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('View.Add.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>
|
||||
)
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import React, {useState} from 'react';
|
||||
import {observer, inject} from "mobx-react";
|
||||
import {List, ListItem, Page, Navbar, Icon, ListButton, ListInput, Segmented, Button} from 'framework7-react';
|
||||
import {List, ListItem, Page, Navbar, Icon, ListButton, ListInput, Segmented, Button, Link, NavLeft, NavRight, NavTitle, f7} from 'framework7-react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import {Device} from "../../../../../common/mobile/utils/device";
|
||||
|
||||
|
|
@ -8,9 +8,16 @@ const PageTypeLink = props => {
|
|||
const { t } = useTranslation();
|
||||
const _t = t('View.Add', {returnObjects: true});
|
||||
const [typeLink, setTypeLink] = useState(props.curType);
|
||||
|
||||
return (
|
||||
<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>
|
||||
<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>
|
||||
|
|
@ -42,28 +49,35 @@ const PageLinkTo = props => {
|
|||
setNumberTo(value);
|
||||
props.changeTo(4, value);
|
||||
};
|
||||
|
||||
return (
|
||||
<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>
|
||||
<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.textFirstSlide} radio checked={stateTypeTo === 2} onClick={() => {changeTypeTo(2)}}></ListItem>
|
||||
<ListItem title={_t.textLastSlide} radio checked={stateTypeTo === 3} onClick={() => {changeTypeTo(3)}}></ListItem>
|
||||
<ListItem title={_t.textSlideNumber}>
|
||||
{!isAndroid && <div slot='after-start'>{stateNumberTo + 1}</div>}
|
||||
<div slot='after'>
|
||||
<Segmented>
|
||||
<Button outline className='decrement item-link' onClick={() => {changeNumber(stateNumberTo, true);}}>
|
||||
{isAndroid ? <Icon icon="icon-expand-down"></Icon> : ' - '}
|
||||
</Button>
|
||||
{isAndroid && <label>{stateNumberTo + 1}</label>}
|
||||
<Button outline className='increment item-link' onClick={() => {changeNumber(stateNumberTo, false);}}>
|
||||
{isAndroid ? <Icon icon="icon-expand-up"></Icon> : ' + '}
|
||||
</Button>
|
||||
</Segmented>
|
||||
</div>
|
||||
</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.textFirstSlide} radio checked={stateTypeTo === 2} onClick={() => {changeTypeTo(2)}}></ListItem>
|
||||
<ListItem title={_t.textLastSlide} radio checked={stateTypeTo === 3} onClick={() => {changeTypeTo(3)}}></ListItem>
|
||||
<ListItem title={_t.textSlideNumber}>
|
||||
{!isAndroid && <div slot='after-start'>{stateNumberTo + 1}</div>}
|
||||
<div slot='after'>
|
||||
<Segmented>
|
||||
<Button outline className='decrement item-link' onClick={() => {changeNumber(stateNumberTo, true);}}>
|
||||
{isAndroid ? <Icon icon="icon-expand-down"></Icon> : ' - '}
|
||||
</Button>
|
||||
{isAndroid && <label>{stateNumberTo + 1}</label>}
|
||||
<Button outline className='increment item-link' onClick={() => {changeNumber(stateNumberTo, false);}}>
|
||||
{isAndroid ? <Icon icon="icon-expand-up"></Icon> : ' + '}
|
||||
</Button>
|
||||
</Segmented>
|
||||
</div>
|
||||
</ListItem>
|
||||
</List>
|
||||
</Page>
|
||||
)
|
||||
|
|
@ -104,7 +118,25 @@ const PageLink = props => {
|
|||
|
||||
return (
|
||||
<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'>
|
||||
<ListItem link={'/add-link-type/'} title={_t.textLinkType} after={textType} routeProps={{
|
||||
changeType: changeType,
|
||||
|
|
@ -113,7 +145,7 @@ const PageLink = props => {
|
|||
{typeLink === 1 ?
|
||||
<ListInput label={_t.textLink}
|
||||
type="text"
|
||||
placeholder={_t.textLink}
|
||||
placeholder={t('View.Add.textRequired')}
|
||||
value={link}
|
||||
onChange={(event) => {
|
||||
setLink(event.target.value);
|
||||
|
|
@ -127,7 +159,7 @@ const PageLink = props => {
|
|||
}
|
||||
<ListInput label={_t.textDisplay}
|
||||
type="text"
|
||||
placeholder={_t.textDisplay}
|
||||
placeholder={t('View.Add.textRecommended')}
|
||||
value={stateDisplay}
|
||||
disabled={displayDisabled}
|
||||
onChange={(event) => {
|
||||
|
|
@ -142,16 +174,16 @@ const PageLink = props => {
|
|||
onChange={(event) => {setScreenTip(event.target.value)}}
|
||||
/>
|
||||
</List>
|
||||
<List className="buttons-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, tip: screenTip } :
|
||||
{linkTo: linkTo, numberTo: numberTo, display: stateDisplay, displayDisabled: displayDisabled, tip: screenTip}));
|
||||
}}
|
||||
/>
|
||||
</List>
|
||||
</List> */}
|
||||
</Page>
|
||||
)
|
||||
};
|
||||
|
|
|
|||
|
|
@ -45,6 +45,8 @@ const AddOther = props => {
|
|||
const _t = t('View.Add', {returnObjects: true});
|
||||
const showInsertLink = props.storeLinkSettings.canAddLink && !props.storeFocusObjects.paragraphLocked;
|
||||
const hideAddComment = props.hideAddComment();
|
||||
const isHyperLink = props.storeFocusObjects.settings.indexOf('hyperlink') > -1;
|
||||
|
||||
return (
|
||||
<List>
|
||||
<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>
|
||||
</ListItem>}
|
||||
<ListItem title={_t.textImage} link='/add-image/'>
|
||||
<Icon slot="media" icon="icon-image"></Icon>
|
||||
</ListItem>
|
||||
{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>
|
||||
</ListItem>
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,12 +14,11 @@ import EditChartController from "../../controller/edit/EditChart";
|
|||
import { EditLinkController } from "../../controller/edit/EditLink";
|
||||
|
||||
import { Theme, Layout, Transition, Type, Effect, StyleFillColor, CustomFillColor } from './EditSlide';
|
||||
import { PageTextFonts, PageTextFontColor, PageTextHighlightColor, PageTextCustomFontColor, PageTextAddFormatting, PageTextBulletsAndNumbers, PageTextLineSpacing } from './EditText';
|
||||
import { PageTextFonts, PageTextFontColor, PageTextHighlightColor, PageTextCustomFontColor, PageTextAddFormatting, PageTextBulletsAndNumbers, PageTextLineSpacing, PageTextBulletsLinkSettings } from './EditText';
|
||||
import { PageShapeStyle, PageShapeStyleNoFill, PageReplaceContainer, PageReorderContainer, PageAlignContainer, PageShapeBorderColor, PageShapeCustomBorderColor, PageShapeCustomFillColor } from './EditShape';
|
||||
import { PageImageReplace, PageImageReorder, PageImageAlign, PageLinkSettings } from './EditImage';
|
||||
import { PageTableStyle, PageTableStyleOptions, PageTableCustomFillColor, PageTableBorderColor, PageTableCustomBorderColor, PageTableReorder, PageTableAlign } from './EditTable';
|
||||
import { PageChartDesign, PageChartDesignType, PageChartDesignStyle, PageChartDesignFill, PageChartDesignBorder, PageChartCustomFillColor, PageChartBorderColor, PageChartCustomBorderColor, PageChartReorder, PageChartAlign } from './EditChart'
|
||||
import { PageLinkTo, PageTypeLink } from './EditLink'
|
||||
|
||||
const routes = [
|
||||
|
||||
|
|
@ -78,7 +77,13 @@ const routes = [
|
|||
},
|
||||
{
|
||||
path: '/edit-bullets-and-numbers/',
|
||||
component: PageTextBulletsAndNumbers
|
||||
component: PageTextBulletsAndNumbers,
|
||||
routes: [
|
||||
{
|
||||
path: 'image-link/',
|
||||
component: PageTextBulletsLinkSettings
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '/edit-text-line-spacing/',
|
||||
|
|
@ -214,14 +219,9 @@ const routes = [
|
|||
},
|
||||
|
||||
// Link
|
||||
|
||||
{
|
||||
path: '/edit-link-type/',
|
||||
component: PageTypeLink
|
||||
},
|
||||
{
|
||||
path: '/edit-link-to/',
|
||||
component: PageLinkTo
|
||||
path: '/edit-link/',
|
||||
component: EditLinkController
|
||||
}
|
||||
];
|
||||
|
||||
|
|
@ -289,18 +289,11 @@ const EditTabs = props => {
|
|||
component: <EmptyEditLayout />
|
||||
});
|
||||
} else {
|
||||
if (settings.indexOf('slide') > -1) {
|
||||
if (settings.indexOf('image') > -1) {
|
||||
editors.push({
|
||||
caption: _t.textSlide,
|
||||
id: 'edit-slide',
|
||||
component: <EditSlideController />
|
||||
})
|
||||
}
|
||||
if (settings.indexOf('text') > -1) {
|
||||
editors.push({
|
||||
caption: _t.textText,
|
||||
id: 'edit-text',
|
||||
component: <EditTextController />
|
||||
caption: _t.textImage,
|
||||
id: 'edit-image',
|
||||
component: <EditImageController />
|
||||
})
|
||||
}
|
||||
if (settings.indexOf('shape') > -1) {
|
||||
|
|
@ -310,13 +303,6 @@ const EditTabs = props => {
|
|||
component: <EditShapeController />
|
||||
})
|
||||
}
|
||||
if (settings.indexOf('image') > -1) {
|
||||
editors.push({
|
||||
caption: _t.textImage,
|
||||
id: 'edit-image',
|
||||
component: <EditImageController />
|
||||
})
|
||||
}
|
||||
if (settings.indexOf('table') > -1) {
|
||||
editors.push({
|
||||
caption: _t.textTable,
|
||||
|
|
@ -331,11 +317,18 @@ const EditTabs = props => {
|
|||
component: <EditChartController />
|
||||
})
|
||||
}
|
||||
if (settings.indexOf('hyperlink') > -1) {
|
||||
if (settings.indexOf('text') > -1) {
|
||||
editors.push({
|
||||
caption: _t.textHyperlink,
|
||||
id: 'edit-link',
|
||||
component: <EditLinkController />
|
||||
caption: _t.textText,
|
||||
id: 'edit-text',
|
||||
component: <EditTextController />
|
||||
})
|
||||
}
|
||||
if (settings.indexOf('slide') > -1) {
|
||||
editors.push({
|
||||
caption: _t.textSlide,
|
||||
id: 'edit-slide',
|
||||
component: <EditSlideController />
|
||||
})
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
import React, {useState, useEffect} from 'react';
|
||||
import {observer, inject} from "mobx-react";
|
||||
import {f7, List, ListItem, Page, Navbar, Icon, ListButton, ListInput, Segmented, Button, NavRight, Link} from 'framework7-react';
|
||||
import {f7, List, ListItem, Page, Navbar, Icon, ListButton, ListInput, Segmented, Button, NavRight, Link, NavLeft, NavTitle} from 'framework7-react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import {Device} from "../../../../../common/mobile/utils/device";
|
||||
|
||||
const PageTypeLink = props => {
|
||||
const PageEditTypeLink = props => {
|
||||
const { t } = useTranslation();
|
||||
const _t = t('View.Edit', {returnObjects: true});
|
||||
const [typeLink, setTypeLink] = useState(props.curType);
|
||||
|
|
@ -17,12 +17,10 @@ const PageTypeLink = props => {
|
|||
|
||||
return (
|
||||
<Page>
|
||||
<Navbar title={_t.textLinkType} backLink={_t.textBack}>
|
||||
<Navbar className="navbar-link-settings" title={_t.textLinkType} backLink={_t.textBack}>
|
||||
{Device.phone &&
|
||||
<NavRight>
|
||||
<Link sheetClose='#edit-sheet'>
|
||||
<Icon icon='icon-expand-down'/>
|
||||
</Link>
|
||||
<Link icon='icon-close' popupClose="#edit-link-popup"></Link>
|
||||
</NavRight>
|
||||
}
|
||||
</Navbar>
|
||||
|
|
@ -34,7 +32,7 @@ const PageTypeLink = props => {
|
|||
)
|
||||
};
|
||||
|
||||
const PageLinkTo = props => {
|
||||
const PageEditLinkTo = props => {
|
||||
const isAndroid = Device.android;
|
||||
const { t } = useTranslation();
|
||||
const _t = t('View.Edit', {returnObjects: true});
|
||||
|
|
@ -70,12 +68,10 @@ const PageLinkTo = props => {
|
|||
|
||||
return (
|
||||
<Page>
|
||||
<Navbar title={_t.textLinkTo} backLink={_t.textBack}>
|
||||
<Navbar className="navbar-link-settings" title={_t.textLinkTo} backLink={_t.textBack}>
|
||||
{Device.phone &&
|
||||
<NavRight>
|
||||
<Link sheetClose='#edit-sheet'>
|
||||
<Icon icon='icon-expand-down'/>
|
||||
</Link>
|
||||
<Link icon='icon-close' popupClose="#edit-link-popup"></Link>
|
||||
</NavRight>
|
||||
}
|
||||
</Navbar>
|
||||
|
|
@ -150,14 +146,24 @@ const PageLink = props => {
|
|||
|
||||
return (
|
||||
<Page>
|
||||
<Navbar title={_t.textLink} backLink={_t.textBack}>
|
||||
{Device.phone &&
|
||||
<NavRight>
|
||||
<Link sheetClose='#edit-sheet'>
|
||||
<Icon icon='icon-expand-down'/>
|
||||
</Link>
|
||||
</NavRight>
|
||||
}
|
||||
<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={`${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>
|
||||
<List inlineLabels className='inputs-list'>
|
||||
<ListItem link={'/edit-link-type/'} title={_t.textLinkType} after={textType} routeProps={{
|
||||
|
|
@ -168,7 +174,7 @@ const PageLink = props => {
|
|||
{typeLink !== 0 ?
|
||||
<ListInput label={_t.textLink}
|
||||
type="text"
|
||||
placeholder={_t.textLink}
|
||||
placeholder={t('View.Edit.textRequired')}
|
||||
value={link}
|
||||
onChange={(event) => {setLink(event.target.value)}}
|
||||
/> :
|
||||
|
|
@ -182,7 +188,7 @@ const PageLink = props => {
|
|||
}
|
||||
<ListInput label={_t.textDisplay}
|
||||
type="text"
|
||||
placeholder={_t.textDisplay}
|
||||
placeholder={t('View.Edit.textRecommended')}
|
||||
value={stateDisplay}
|
||||
disabled={displayDisabled}
|
||||
onChange={(event) => {setDisplay(event.target.value)}}
|
||||
|
|
@ -195,18 +201,11 @@ const PageLink = props => {
|
|||
/>
|
||||
</List>
|
||||
<List className="buttons-list">
|
||||
<ListButton title={_t.textEditLink}
|
||||
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}
|
||||
<ListButton title={t('View.Edit.textDeleteLink')}
|
||||
className={`button-red button-fill button-raised`}
|
||||
onClick={() => {
|
||||
props.onRemoveLink()
|
||||
props.onRemoveLink();
|
||||
props.isNavigate ? f7.views.current.router.back() : props.closeModal();
|
||||
}}
|
||||
/>
|
||||
</List>
|
||||
|
|
@ -214,9 +213,9 @@ const PageLink = props => {
|
|||
)
|
||||
};
|
||||
|
||||
const _PageLinkTo = inject("storeFocusObjects")(observer(PageLinkTo));
|
||||
const _PageTypeLink = inject("storeFocusObjects")(observer(PageTypeLink));
|
||||
const _PageEditLinkTo = inject("storeFocusObjects")(observer(PageEditLinkTo));
|
||||
const _PageEditTypeLink = inject("storeFocusObjects")(observer(PageEditTypeLink));
|
||||
|
||||
export {PageLink as EditLink,
|
||||
_PageLinkTo as PageLinkTo,
|
||||
_PageTypeLink as PageTypeLink}
|
||||
_PageEditLinkTo as PageEditLinkTo,
|
||||
_PageEditTypeLink as PageEditTypeLink}
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
import React, {Fragment, useState, useEffect} from 'react';
|
||||
import {observer, inject} from "mobx-react";
|
||||
import {f7, Swiper, View, SwiperSlide, List, ListItem, Icon, Row, Button, Page, Navbar, Segmented, BlockTitle, NavRight, Link} from 'framework7-react';
|
||||
import {f7, Swiper, View, SwiperSlide, List, ListItem, ListButton, ListInput, Icon, Row, Button, Page, Navbar, Segmented, BlockTitle, NavRight, Link} from 'framework7-react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import {Device} from '../../../../../common/mobile/utils/device';
|
||||
import { ThemeColorPalette, CustomColorPicker } from '../../../../../common/mobile/lib/component/ThemeColorPalette.jsx';
|
||||
|
|
@ -143,7 +143,9 @@ const EditText = props => {
|
|||
<ListItem title={_t.textBulletsAndNumbers} link='/edit-bullets-and-numbers/' routeProps={{
|
||||
onBullet: props.onBullet,
|
||||
onNumber: props.onNumber,
|
||||
getIconsBulletsAndNumbers: props.getIconsBulletsAndNumbers
|
||||
getIconsBulletsAndNumbers: props.getIconsBulletsAndNumbers,
|
||||
onImageSelect: props.onImageSelect,
|
||||
onInsertByUrl: props.onInsertByUrl
|
||||
|
||||
}}>
|
||||
<div className="preview">{previewList}</div>
|
||||
|
|
@ -498,18 +500,69 @@ const PageAdditionalFormatting = props => {
|
|||
)
|
||||
};
|
||||
|
||||
const PageBulletLinkSettings = (props) => {
|
||||
const { t } = useTranslation();
|
||||
const _t = t('View.Edit', {returnObjects: true});
|
||||
const [stateValue, setValue] = useState('');
|
||||
|
||||
return (
|
||||
<Page>
|
||||
<Navbar title={_t.textLinkSettings} backLink={_t.textBack}></Navbar>
|
||||
<BlockTitle>{_t.textAddress}</BlockTitle>
|
||||
<List className='add-image'>
|
||||
<ListInput
|
||||
type='text'
|
||||
placeholder={_t.textImageURL}
|
||||
value={stateValue}
|
||||
onChange={(event) => {setValue(event.target.value)}}
|
||||
>
|
||||
</ListInput>
|
||||
</List>
|
||||
<List className="buttons-list">
|
||||
<ListButton
|
||||
className={'button-fill button-raised' + (stateValue.length < 1 ? ' disabled' : '')}
|
||||
onClick={() => {props.onInsertByUrl(stateValue)}}
|
||||
>
|
||||
{_t.textInsertImage}
|
||||
</ListButton>
|
||||
</List>
|
||||
</Page>
|
||||
)
|
||||
}
|
||||
|
||||
const PageAddImage = (props) => {
|
||||
const { t } = useTranslation();
|
||||
const _t = t('View.Edit', {returnObjects: true});
|
||||
|
||||
return (
|
||||
<List className='bullet-menu-image'>
|
||||
<ListItem title={_t.textPictureFromLibrary} onClick={props.onImageSelect}>
|
||||
<Icon slot="media" icon="icon-image-library" />
|
||||
</ListItem>
|
||||
<ListItem title={_t.textPictureFromURL} link="#" onClick={() =>
|
||||
props.f7router.navigate('/edit-bullets-and-numbers/image-link/',
|
||||
{props: {onInsertByUrl: props.onInsertByUrl}}) }>
|
||||
<Icon slot="media" icon="icon-link" />
|
||||
</ListItem>
|
||||
</List>
|
||||
)
|
||||
}
|
||||
|
||||
const PageBullets = observer(props => {
|
||||
const { t } = useTranslation();
|
||||
const _t = t('View.Edit', {returnObjects: true});
|
||||
|
||||
const storeTextSettings = props.storeTextSettings;
|
||||
const typeBullets = storeTextSettings.typeBullets;
|
||||
const bulletArrays = [
|
||||
{id: `id-markers-0`, type: 0, subtype: -1, drawdata: {type: Asc.asc_PreviewBulletType.text, text: 'None'} },
|
||||
{id: `id-markers-1`, type: 0, subtype: 1, drawdata: {type: Asc.asc_PreviewBulletType.char, char: String.fromCharCode(0x00B7), specialFont: 'Symbol'} },
|
||||
{id: `id-markers-2`, type: 0, subtype: 2, drawdata: {type: Asc.asc_PreviewBulletType.char, char: 'o', specialFont: 'Courier New'} },
|
||||
{id: `id-markers-3`, type: 0, subtype: 3, drawdata: {type: Asc.asc_PreviewBulletType.char, char: String.fromCharCode(0x00A7), specialFont: 'Wingdings'} },
|
||||
{id: `id-markers-4`, type: 0, subtype: 4, drawdata: {type: Asc.asc_PreviewBulletType.char, char: String.fromCharCode(0x0076), specialFont: 'Wingdings'} },
|
||||
{id: `id-markers-5`, type: 0, subtype: 5, drawdata: {type: Asc.asc_PreviewBulletType.char, char: String.fromCharCode(0x00D8), specialFont: 'Wingdings'} },
|
||||
{id: `id-markers-6`, type: 0, subtype: 6, drawdata: {type: Asc.asc_PreviewBulletType.char, char: String.fromCharCode(0x00FC), specialFont: 'Wingdings'} },
|
||||
{id: `id-markers-7`, type: 0, subtype: 7, drawdata: {type: Asc.asc_PreviewBulletType.char, char: String.fromCharCode(0x00A8), specialFont: 'Symbol'} }
|
||||
{id: 'id-markers-0', type: 0, subtype: -1, drawdata: {type: Asc.asc_PreviewBulletType.text, text: 'None'} },
|
||||
{id: 'id-markers-1', type: 0, subtype: 1, drawdata: {type: Asc.asc_PreviewBulletType.char, char: String.fromCharCode(0x00B7), specialFont: 'Symbol'} },
|
||||
{id: 'id-markers-2', type: 0, subtype: 2, drawdata: {type: Asc.asc_PreviewBulletType.char, char: 'o', specialFont: 'Courier New'} },
|
||||
{id: 'id-markers-3', type: 0, subtype: 3, drawdata: {type: Asc.asc_PreviewBulletType.char, char: String.fromCharCode(0x00A7), specialFont: 'Wingdings'} },
|
||||
{id: 'id-markers-4', type: 0, subtype: 4, drawdata: {type: Asc.asc_PreviewBulletType.char, char: String.fromCharCode(0x0076), specialFont: 'Wingdings'} },
|
||||
{id: 'id-markers-5', type: 0, subtype: 5, drawdata: {type: Asc.asc_PreviewBulletType.char, char: String.fromCharCode(0x00D8), specialFont: 'Wingdings'} },
|
||||
{id: 'id-markers-6', type: 0, subtype: 6, drawdata: {type: Asc.asc_PreviewBulletType.char, char: String.fromCharCode(0x00FC), specialFont: 'Wingdings'} },
|
||||
{id: 'id-markers-7', type: 0, subtype: 7, drawdata: {type: Asc.asc_PreviewBulletType.char, char: String.fromCharCode(0x00A8), specialFont: 'Symbol'} }
|
||||
];
|
||||
|
||||
useEffect(() => {
|
||||
|
|
@ -539,6 +592,13 @@ const PageBullets = observer(props => {
|
|||
</ListItem>
|
||||
))}
|
||||
</List>
|
||||
{ !Device.isPhone &&
|
||||
<PageAddImage
|
||||
f7router={props.f7router}
|
||||
onImageSelect={props.onImageSelect}
|
||||
onInsertByUrl={props.onInsertByUrl}
|
||||
/>
|
||||
}
|
||||
</View>
|
||||
)
|
||||
});
|
||||
|
|
@ -547,14 +607,14 @@ const PageNumbers = observer(props => {
|
|||
const storeTextSettings = props.storeTextSettings;
|
||||
const typeNumbers = storeTextSettings.typeNumbers;
|
||||
const numberArrays = [
|
||||
{id: `id-numbers-0`, type: 1, subtype: -1, drawdata: {type: Asc.asc_PreviewBulletType.text, text: 'None'}},
|
||||
{id: `id-numbers-4`, type: 1, subtype: 4, drawdata: {type: Asc.asc_PreviewBulletType.number, numberingType: Asc.asc_oAscNumberingLevel.UpperLetterDot_Left}},
|
||||
{id: `id-numbers-5`, type: 1, subtype: 5, drawdata: {type: Asc.asc_PreviewBulletType.number, numberingType: Asc.asc_oAscNumberingLevel.LowerLetterBracket_Left}},
|
||||
{id: `id-numbers-6`, type: 1, subtype: 6, drawdata: {type: Asc.asc_PreviewBulletType.number, numberingType: Asc.asc_oAscNumberingLevel.LowerLetterDot_Left}},
|
||||
{id: `id-numbers-1`, type: 1, subtype: 1, drawdata: {type: Asc.asc_PreviewBulletType.number, numberingType: Asc.asc_oAscNumberingLevel.DecimalDot_Right}},
|
||||
{id: `id-numbers-2`, type: 1, subtype: 2, drawdata: {type: Asc.asc_PreviewBulletType.number, numberingType: Asc.asc_oAscNumberingLevel.DecimalBracket_Right}},
|
||||
{id: `id-numbers-3`, type: 1, subtype: 3, drawdata: {type: Asc.asc_PreviewBulletType.number, numberingType: Asc.asc_oAscNumberingLevel.UpperRomanDot_Right}},
|
||||
{id: `id-numbers-7`, type: 1, subtype: 7, drawdata: {type: Asc.asc_PreviewBulletType.number, numberingType: Asc.asc_oAscNumberingLevel.LowerRomanDot_Right}}
|
||||
{id: 'id-numbers-0', type: 1, subtype: -1, drawdata: {type: Asc.asc_PreviewBulletType.text, text: 'None'}},
|
||||
{id: 'id-numbers-4', type: 1, subtype: 4, drawdata: {type: Asc.asc_PreviewBulletType.number, numberingType: Asc.asc_oAscNumberingLevel.UpperLetterDot_Left}},
|
||||
{id: 'id-numbers-5', type: 1, subtype: 5, drawdata: {type: Asc.asc_PreviewBulletType.number, numberingType: Asc.asc_oAscNumberingLevel.LowerLetterBracket_Left}},
|
||||
{id: 'id-numbers-6', type: 1, subtype: 6, drawdata: {type: Asc.asc_PreviewBulletType.number, numberingType: Asc.asc_oAscNumberingLevel.LowerLetterDot_Left}},
|
||||
{id: 'id-numbers-1', type: 1, subtype: 1, drawdata: {type: Asc.asc_PreviewBulletType.number, numberingType: Asc.asc_oAscNumberingLevel.DecimalDot_Right}},
|
||||
{id: 'id-numbers-2', type: 1, subtype: 2, drawdata: {type: Asc.asc_PreviewBulletType.number, numberingType: Asc.asc_oAscNumberingLevel.DecimalBracket_Right}},
|
||||
{id: 'id-numbers-3', type: 1, subtype: 3, drawdata: {type: Asc.asc_PreviewBulletType.number, numberingType: Asc.asc_oAscNumberingLevel.UpperRomanDot_Right}},
|
||||
{id: 'id-numbers-7', type: 1, subtype: 7, drawdata: {type: Asc.asc_PreviewBulletType.number, numberingType: Asc.asc_oAscNumberingLevel.LowerRomanDot_Right}}
|
||||
];
|
||||
|
||||
useEffect(() => {
|
||||
|
|
@ -570,25 +630,20 @@ const PageNumbers = observer(props => {
|
|||
|
||||
return (
|
||||
<View className='numbers dataview'>
|
||||
{numberArrays.map((numbers, index) => (
|
||||
<List className="row" style={{listStyle: 'none'}} key={'numbers-' + index}>
|
||||
{numbers.map((number) => (
|
||||
<ListItem key={'number-' + number.type} data-type={number.type} className={(number.type === typeNumbers) &&
|
||||
(storeTextSettings.listType === 1 || storeTextSettings.listType === -1) ? 'active' : ''}
|
||||
onClick={() => {
|
||||
storeTextSettings.resetNumbers(number.type);
|
||||
props.onNumber(number.type);
|
||||
}}>
|
||||
{number.thumb.length < 1 ?
|
||||
<Icon className="thumb" style={{position: 'relative'}}>
|
||||
<label>{_t.textNone}</label>
|
||||
</Icon> :
|
||||
<Icon className="thumb" icon={`icon-numbers-${number.type}`} />
|
||||
}
|
||||
</ListItem>
|
||||
<List className="row" style={{listStyle: 'none'}}>
|
||||
{numberArrays.map((number, index) => (
|
||||
<ListItem key={'number-' + number.subtype} data-type={number.subtype} className={(number.subtype === typeNumbers) &&
|
||||
(storeTextSettings.listType === 1 || storeTextSettings.listType === -1) ? 'active' : ''}
|
||||
onClick={() => {
|
||||
storeTextSettings.resetNumbers(number.subtype);
|
||||
props.onNumber(number.subtype);
|
||||
}}>
|
||||
<div id={number.id} className='item-number'>
|
||||
|
||||
</div>
|
||||
</ListItem>
|
||||
))}
|
||||
</List>
|
||||
))}
|
||||
</List>
|
||||
</View>
|
||||
);
|
||||
});
|
||||
|
|
@ -627,8 +682,19 @@ const PageBulletsAndNumbers = props => {
|
|||
storeTextSettings={storeTextSettings}
|
||||
onBullet={props.onBullet}
|
||||
getIconsBulletsAndNumbers={props.getIconsBulletsAndNumbers}
|
||||
onImageSelect={props.onImageSelect}
|
||||
onInsertByUrl={props.onInsertByUrl}
|
||||
/>
|
||||
</SwiperSlide>
|
||||
{ Device.phone &&
|
||||
<SwiperSlide>
|
||||
<PageAddImage
|
||||
f7router={props.f7router}
|
||||
onImageSelect={props.onImageSelect}
|
||||
onInsertByUrl={props.onInsertByUrl}
|
||||
/>
|
||||
</SwiperSlide>
|
||||
}
|
||||
</Swiper>
|
||||
</Page>
|
||||
)
|
||||
|
|
@ -678,6 +744,7 @@ const PageTextCustomFontColor = inject("storeTextSettings", "storePalette")(obse
|
|||
const PageTextAddFormatting = inject("storeTextSettings", "storeFocusObjects")(observer(PageAdditionalFormatting));
|
||||
const PageTextBulletsAndNumbers = inject("storeTextSettings", "storeFocusObjects")(observer(PageBulletsAndNumbers));
|
||||
const PageTextLineSpacing = inject("storeTextSettings", "storeFocusObjects")(observer(PageLineSpacing));
|
||||
const PageTextBulletsLinkSettings = inject("storeTextSettings", "storeFocusObjects")(observer(PageBulletLinkSettings));
|
||||
|
||||
export {
|
||||
EditTextContainer as EditText,
|
||||
|
|
@ -687,5 +754,6 @@ export {
|
|||
PageTextCustomFontColor,
|
||||
PageTextAddFormatting,
|
||||
PageTextBulletsAndNumbers,
|
||||
PageTextLineSpacing
|
||||
PageTextLineSpacing,
|
||||
PageTextBulletsLinkSettings
|
||||
};
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
html{
|
||||
overflow: scroll;
|
||||
overflow: auto;
|
||||
scrollbar-track-color: #eee;
|
||||
scrollbar-face-color: #f7f7f7;
|
||||
scrollbar-highlight-color: #eee;
|
||||
|
|
@ -20,7 +20,7 @@ html{
|
|||
|
||||
/* thimb*/
|
||||
::-webkit-scrollbar-thumb {
|
||||
box-shadow: inset 0px 0px 0px 1px #cbcbcb;
|
||||
box-shadow: inset 0px 0px 0px 0.5px #cbcbcb;
|
||||
background: #f7f7f7;
|
||||
-webkit-border-radius: 0.1ex;
|
||||
border: #eee 1px solid;
|
||||
|
|
@ -61,7 +61,7 @@ html{
|
|||
::-webkit-scrollbar-button:single-button {
|
||||
height: 14px;
|
||||
width: 14px;
|
||||
box-shadow: inset 0px 0px 0px 1px #cbcbcb;
|
||||
box-shadow: inset 0px 0px 0px 0.5px #cbcbcb;
|
||||
border: #eee 1px solid;
|
||||
background-color: #f7f7f7;
|
||||
background-position: center;
|
||||
|
|
|
|||
|
|
@ -54,6 +54,7 @@
|
|||
"menuMerge": "Merge",
|
||||
"menuMore": "More",
|
||||
"menuOpenLink": "Open Link",
|
||||
"menuEditLink": "Edit Link",
|
||||
"menuShow": "Show",
|
||||
"menuUnfreezePanes": "Unfreeze Panes",
|
||||
"menuUnmerge": "Unmerge",
|
||||
|
|
@ -75,6 +76,8 @@
|
|||
"errorUpdateVersion": "The file version has been changed. The page will be reloaded.",
|
||||
"leavePageText": "You have unsaved changes in this document. Click 'Stay on this Page' to wait for autosave. Click 'Leave this Page' to discard all the unsaved changes.",
|
||||
"notcriticalErrorTitle": "Warning",
|
||||
"titleLicenseExp": "License expired",
|
||||
"warnLicenseExp": "Your license has expired. Please, update your license and refresh the page.",
|
||||
"SDK": {
|
||||
"txtAccent": "Accent",
|
||||
"txtAll": "(All)",
|
||||
|
|
@ -368,7 +371,9 @@
|
|||
"txtNotUrl": "This field should be a URL in the format \"http://www.example.com\"",
|
||||
"txtSorting": "Sorting",
|
||||
"txtSortSelected": "Sort selected",
|
||||
"txtYes": "Yes"
|
||||
"txtYes": "Yes",
|
||||
"textRecommended": "Recommended",
|
||||
"textDone": "Done"
|
||||
},
|
||||
"Edit": {
|
||||
"notcriticalErrorTitle": "Warning",
|
||||
|
|
@ -503,7 +508,8 @@
|
|||
"textRange": "Range",
|
||||
"textRemoveChart": "Remove Chart",
|
||||
"textRemoveImage": "Remove Image",
|
||||
"textRemoveLink": "Remove Link",
|
||||
"del_textRemoveLink": "Remove Link",
|
||||
"textDeleteLink": "Delete Link",
|
||||
"textRemoveShape": "Remove Shape",
|
||||
"textReorder": "Reorder",
|
||||
"textReplace": "Replace",
|
||||
|
|
@ -550,7 +556,10 @@
|
|||
"textYen": "Yen",
|
||||
"txtNotUrl": "This field should be a URL in the format \"http://www.example.com\"",
|
||||
"txtSortHigh2Low": "Sort Highest to Lowest",
|
||||
"txtSortLow2High": "Sort Lowest to Highest"
|
||||
"txtSortLow2High": "Sort Lowest to Highest",
|
||||
"textRecommended": "Recommended",
|
||||
"textDone": "Done",
|
||||
"textCancel": "Cancel"
|
||||
},
|
||||
"Settings": {
|
||||
"advCSVOptions": "Choose CSV options",
|
||||
|
|
|
|||
|
|
@ -255,6 +255,10 @@ class ContextMenu extends ContextMenuController {
|
|||
caption: _t.menuOpenLink,
|
||||
event: 'openlink'
|
||||
});
|
||||
itemsText.push({
|
||||
caption: t("ContextMenu.menuEditLink"),
|
||||
event: 'editlink'
|
||||
});
|
||||
}
|
||||
if(!isDisconnected) {
|
||||
if (canViewComments && hasComments && hasComments.length>0) {
|
||||
|
|
|
|||
|
|
@ -207,6 +207,25 @@ class MainController extends Component {
|
|||
|
||||
const onEditorPermissions = params => {
|
||||
const licType = params.asc_getLicenseType();
|
||||
const { t } = this.props;
|
||||
// const _t = t('Controller.Main', { returnObjects:true });
|
||||
|
||||
if (Asc.c_oLicenseResult.Expired === licType ||
|
||||
Asc.c_oLicenseResult.Error === licType ||
|
||||
Asc.c_oLicenseResult.ExpiredTrial === licType) {
|
||||
|
||||
f7.dialog.create({
|
||||
title: t('Controller.Main.titleLicenseExp'),
|
||||
text: t('Controller.Main.warnLicenseExp')
|
||||
}).open();
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
if (Asc.c_oLicenseResult.ExpiredLimited === licType) {
|
||||
this._state.licenseType = licType;
|
||||
}
|
||||
|
||||
this.appOptions.canLicense = (licType === Asc.c_oLicenseResult.Success || licType === Asc.c_oLicenseResult.SuccessLimit);
|
||||
|
||||
const appOptions = this.props.storeAppOptions;
|
||||
|
|
|
|||
|
|
@ -1,9 +1,20 @@
|
|||
import React, {Component} from 'react';
|
||||
import { f7 } from 'framework7-react';
|
||||
import { f7, Popup, Popover, View } from 'framework7-react';
|
||||
import {Device} from '../../../../../common/mobile/utils/device';
|
||||
import {withTranslation} from 'react-i18next';
|
||||
|
||||
import {AddLink} from '../../view/add/AddLink';
|
||||
import {AddLink, PageTypeLink, PageSheet} from '../../view/add/AddLink';
|
||||
|
||||
const routes = [
|
||||
{
|
||||
path: '/add-link-type/',
|
||||
component: PageTypeLink
|
||||
},
|
||||
{
|
||||
path: '/add-link-sheet/',
|
||||
component: PageSheet
|
||||
}
|
||||
];
|
||||
|
||||
class AddLinkController extends Component {
|
||||
constructor (props) {
|
||||
|
|
@ -102,27 +113,68 @@ class AddLinkController extends Component {
|
|||
link.asc_setTooltip(args.tooltip);
|
||||
|
||||
api.asc_insertHyperlink(link);
|
||||
|
||||
this.closeModal();
|
||||
this.props.isNavigate ? f7.views.current.router.back() : this.closeModal();
|
||||
}
|
||||
|
||||
closeModal () {
|
||||
if ( Device.phone ) {
|
||||
f7.sheet.close('.add-popup', true);
|
||||
f7.popup.close('#add-link-popup');
|
||||
} else {
|
||||
f7.popover.close('#add-popover');
|
||||
f7.popover.close('#add-link-popover');
|
||||
}
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
if(!this.props.isNavigate) {
|
||||
if(Device.phone) {
|
||||
f7.popup.open('#add-link-popup', true);
|
||||
} else {
|
||||
f7.popover.open('#add-link-popover', '#btn-add');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
render () {
|
||||
return (
|
||||
<AddLink inTabs={this.props.inTabs}
|
||||
allowInternal={this.allowInternal}
|
||||
displayText={this.displayText}
|
||||
sheets={this.sheets}
|
||||
activeSheet={this.activeSheet}
|
||||
onInsertLink={this.onInsertLink}
|
||||
/>
|
||||
!this.props.isNavigate ?
|
||||
Device.phone ?
|
||||
<Popup id="add-link-popup" onPopupClosed={() => this.props.onClosed('add-link')}>
|
||||
<View routes={routes} style={{height: '100%'}}>
|
||||
<AddLink
|
||||
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}
|
||||
/>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -23,14 +23,17 @@ class AddOtherController extends Component {
|
|||
const iscelllocked = cellinfo.asc_getLocked();
|
||||
const seltype = cellinfo.asc_getSelectionType();
|
||||
const isComments = !cellinfo.asc_getComments() || cellinfo.asc_getComments().length > 0;
|
||||
|
||||
return (!(seltype === Asc.c_oAscSelectionType.RangeCells && !iscelllocked) || isComments);
|
||||
}
|
||||
|
||||
render () {
|
||||
return (
|
||||
<AddOther closeModal={this.closeModal}
|
||||
hideAddComment={this.hideAddComment}
|
||||
wsProps={this.props.wsProps}
|
||||
<AddOther
|
||||
closeModal={this.closeModal}
|
||||
hideAddComment={this.hideAddComment}
|
||||
wsProps={this.props.wsProps}
|
||||
onCloseLinkSettings={this.props.onCloseLinkSettings}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,10 +1,21 @@
|
|||
import React, { Component } from 'react';
|
||||
import { f7 } from 'framework7-react';
|
||||
import { f7, Popup, Popover, View } from 'framework7-react';
|
||||
import { Device } from '../../../../../common/mobile/utils/device';
|
||||
import {observer, inject} from "mobx-react";
|
||||
import { withTranslation } from 'react-i18next';
|
||||
|
||||
import { EditLink } from '../../view/edit/EditLink';
|
||||
import { EditLink, PageEditTypeLink, PageEditSheet} from '../../view/edit/EditLink';
|
||||
|
||||
const routes = [
|
||||
{
|
||||
path: '/edit-link-type/',
|
||||
component: PageEditTypeLink
|
||||
},
|
||||
{
|
||||
path: '/edit-link-sheet/',
|
||||
component: PageEditSheet
|
||||
}
|
||||
];
|
||||
|
||||
class EditLinkController extends Component {
|
||||
constructor (props) {
|
||||
|
|
@ -40,9 +51,9 @@ class EditLinkController extends Component {
|
|||
|
||||
closeModal () {
|
||||
if ( Device.phone ) {
|
||||
f7.sheet.close('#edit-sheet', true);
|
||||
f7.popup.close('#edit-link-popup');
|
||||
} else {
|
||||
f7.popover.close('#edit-popover');
|
||||
f7.popover.close('#edit-link-popover');
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -117,26 +128,69 @@ class EditLinkController extends Component {
|
|||
linkProps.asc_setTooltip(tip);
|
||||
|
||||
api.asc_insertHyperlink(linkProps);
|
||||
this.closeModal();
|
||||
this.props.isNavigate ? f7.views.current.router.back() : this.closeModal();
|
||||
|
||||
}
|
||||
|
||||
onRemoveLink() {
|
||||
const api = Common.EditorApi.get();
|
||||
api.asc_removeHyperlink();
|
||||
this.closeModal();
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
if(!this.props.isNavigate) {
|
||||
if(Device.phone) {
|
||||
f7.popup.open('#edit-link-popup', true);
|
||||
} else {
|
||||
f7.popover.open('#edit-link-popover', '#btn-add');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
render () {
|
||||
return (
|
||||
<EditLink
|
||||
linkInfo={this.linkInfo}
|
||||
isLock={this.isLock}
|
||||
sheets={this.sheets}
|
||||
currentSheet={this.currentSheet}
|
||||
onEditLink={this.onEditLink}
|
||||
onRemoveLink={this.onRemoveLink}
|
||||
/>
|
||||
!this.props.isNavigate ?
|
||||
Device.phone ?
|
||||
<Popup id="edit-link-popup" onPopupClosed={() => this.props.onClosed('edit-link')}>
|
||||
<View routes={routes} style={{height: '100%'}}>
|
||||
<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>
|
||||
</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}
|
||||
/>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -16,6 +16,8 @@ import { f7, Link } from 'framework7-react';
|
|||
import {FunctionGroups} from "../controller/add/AddFunction";
|
||||
import ContextMenu from '../controller/ContextMenu';
|
||||
import { Toolbar } from "../controller/Toolbar";
|
||||
import { AddLinkController } from '../controller/add/AddLink';
|
||||
import { EditLinkController } from '../controller/edit/EditLink';
|
||||
|
||||
class MainPage extends Component {
|
||||
constructor(props) {
|
||||
|
|
@ -25,7 +27,9 @@ class MainPage extends Component {
|
|||
addOptionsVisible: false,
|
||||
addShowOptions: null,
|
||||
settingsVisible: false,
|
||||
collaborationVisible: false
|
||||
collaborationVisible: false,
|
||||
addLinkSettingsVisible: false,
|
||||
editLinkSettingsVisible: false
|
||||
};
|
||||
}
|
||||
|
||||
|
|
@ -48,6 +52,12 @@ class MainPage extends Component {
|
|||
} else if ( opts === 'coauth' ) {
|
||||
this.state.collaborationVisible && (opened = true);
|
||||
newState.collaborationVisible = true;
|
||||
} else if ( opts === 'add-link') {
|
||||
this.state.addLinkSettingsVisible && (opened = true);
|
||||
newState.addLinkSettingsVisible = true;
|
||||
} else if( opts === 'edit-link') {
|
||||
this.state.editLinkSettingsVisible && (opened = true);
|
||||
newState.editLinkSettingsVisible = true;
|
||||
}
|
||||
|
||||
for (let key in this.state) {
|
||||
|
|
@ -79,6 +89,10 @@ class MainPage extends Component {
|
|||
return {settingsVisible: false};
|
||||
else if ( opts == 'coauth' )
|
||||
return {collaborationVisible: false};
|
||||
else if ( opts === 'add-link')
|
||||
return {addLinkSettingsVisible: false};
|
||||
else if( opts === 'edit-link')
|
||||
return {editLinkSettingsVisible: false};
|
||||
});
|
||||
if ((opts === 'edit' || opts === 'coauth') && Device.phone) {
|
||||
f7.navbar.show('.main-navbar');
|
||||
|
|
@ -133,7 +147,15 @@ class MainPage extends Component {
|
|||
}
|
||||
{
|
||||
!this.state.addOptionsVisible ? null :
|
||||
<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 :
|
||||
|
|
|
|||
|
|
@ -13,7 +13,9 @@ import {AddOtherController} from "../../controller/add/AddOther";
|
|||
import {AddImageController} from "../../controller/add/AddImage";
|
||||
import {PageImageLinkSettings} from "./AddImage";
|
||||
import {AddLinkController} from "../../controller/add/AddLink";
|
||||
import {EditLinkController} from "../../controller/edit/EditLink";
|
||||
import {PageTypeLink, PageSheet} from "./AddLink";
|
||||
import {PageEditTypeLink, PageEditSheet} from "../../view/edit/EditLink";
|
||||
import AddFilterController from "../../controller/add/AddFilter";
|
||||
|
||||
const routes = [
|
||||
|
|
@ -48,6 +50,18 @@ const routes = [
|
|||
path: '/add-link-sheet/',
|
||||
component: PageSheet
|
||||
},
|
||||
{
|
||||
path: '/edit-link/',
|
||||
component: EditLinkController
|
||||
},
|
||||
{
|
||||
path: '/edit-link-type/',
|
||||
component: PageEditTypeLink
|
||||
},
|
||||
{
|
||||
path: '/edit-link-sheet/',
|
||||
component: PageEditSheet
|
||||
},
|
||||
// Other
|
||||
{
|
||||
path: '/add-sort-and-filter/',
|
||||
|
|
@ -123,31 +137,34 @@ const AddTabs = props => {
|
|||
component: <AddShapeController/>
|
||||
});
|
||||
}
|
||||
if (showPanels && showPanels.indexOf('image') !== -1) {
|
||||
tabs.push({
|
||||
caption: _t.textImage,
|
||||
id: 'add-image',
|
||||
icon: 'icon-add-image',
|
||||
component: <AddImageController inTabs={true}/>
|
||||
});
|
||||
}
|
||||
|
||||
// if (showPanels && showPanels.indexOf('image') !== -1) {
|
||||
// tabs.push({
|
||||
// caption: _t.textImage,
|
||||
// id: 'add-image',
|
||||
// icon: 'icon-add-image',
|
||||
// component: <AddImageController inTabs={true}/>
|
||||
// });
|
||||
// }
|
||||
}
|
||||
|
||||
if (!showPanels && (!wsProps.InsertHyperlinks || !wsProps.Objects || !wsProps.Sort)) {
|
||||
tabs.push({
|
||||
caption: _t.textOther,
|
||||
id: 'add-other',
|
||||
icon: 'icon-add-other',
|
||||
component: <AddOtherController wsProps={wsProps} />
|
||||
});
|
||||
}
|
||||
if (((showPanels && showPanels === 'hyperlink') || props.isAddShapeHyperlink) && !wsProps.InsertHyperlinks) {
|
||||
tabs.push({
|
||||
caption: _t.textAddLink,
|
||||
id: 'add-link',
|
||||
icon: 'icon-link',
|
||||
component: <AddLinkController/>
|
||||
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(!tabs.length) {
|
||||
if (Device.phone) {
|
||||
|
|
@ -183,10 +200,10 @@ class AddView extends Component {
|
|||
return (
|
||||
show_popover ?
|
||||
<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> :
|
||||
<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>
|
||||
)
|
||||
}
|
||||
|
|
@ -245,6 +262,7 @@ const Add = props => {
|
|||
isAddShapeHyperlink = {isAddShapeHyperlink}
|
||||
wsProps={props.wsProps}
|
||||
wsLock={props.wsLock}
|
||||
onCloseLinkSettings={props.onCloseLinkSettings}
|
||||
/>
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import React, {Fragment, useState} from 'react';
|
||||
import {Page, Navbar, BlockTitle, List, ListItem, ListInput, ListButton, Icon} from 'framework7-react';
|
||||
import {Page, Navbar, BlockTitle, List, ListItem, ListInput, ListButton, Icon, Link, NavLeft, NavRight, NavTitle, f7} from 'framework7-react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import {Device} from "../../../../../common/mobile/utils/device";
|
||||
|
||||
|
|
@ -7,9 +7,16 @@ const PageTypeLink = ({curType, changeType}) => {
|
|||
const { t } = useTranslation();
|
||||
const _t = t('View.Add', {returnObjects: true});
|
||||
const [typeLink, setTypeLink] = useState(curType);
|
||||
|
||||
return (
|
||||
<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>
|
||||
<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>
|
||||
|
|
@ -22,12 +29,19 @@ const PageSheet = ({curSheet, sheets, changeSheet}) => {
|
|||
const { t } = useTranslation();
|
||||
const _t = t('View.Add', {returnObjects: true});
|
||||
const [stateSheet, setSheet] = useState(curSheet.value);
|
||||
|
||||
return (
|
||||
<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>
|
||||
{sheets.map((sheet) => {
|
||||
return(
|
||||
return (
|
||||
<ListItem key={`sheet-${sheet.value}`}
|
||||
title={sheet.caption}
|
||||
radio
|
||||
|
|
@ -45,7 +59,7 @@ const PageSheet = ({curSheet, sheets, changeSheet}) => {
|
|||
)
|
||||
};
|
||||
|
||||
const AddLinkView = props => {
|
||||
const AddLink = props => {
|
||||
const isIos = Device.ios;
|
||||
const { t } = useTranslation();
|
||||
const _t = t('View.Add', {returnObjects: true});
|
||||
|
|
@ -75,7 +89,26 @@ const AddLinkView = props => {
|
|||
const [range, setRange] = useState('');
|
||||
|
||||
return (
|
||||
<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'>
|
||||
{props.allowInternal &&
|
||||
<ListItem link={'/add-link-type/'} title={_t.textLinkType} after={textType} routeProps={{
|
||||
|
|
@ -86,7 +119,7 @@ const AddLinkView = props => {
|
|||
{typeLink === 'ext' &&
|
||||
<ListInput label={_t.textLink}
|
||||
type="text"
|
||||
placeholder={_t.textLink}
|
||||
placeholder={_t.textRequired}
|
||||
value={link}
|
||||
onChange={(event) => {
|
||||
setLink(event.target.value);
|
||||
|
|
@ -113,7 +146,7 @@ const AddLinkView = props => {
|
|||
}
|
||||
<ListInput label={_t.textDisplay}
|
||||
type="text"
|
||||
placeholder={_t.textDisplay}
|
||||
placeholder={t('View.Add.textRecommended')}
|
||||
value={stateDisplayText}
|
||||
disabled={displayDisabled}
|
||||
onChange={(event) => {
|
||||
|
|
@ -130,28 +163,7 @@ const AddLinkView = props => {
|
|||
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})}}
|
||||
/>
|
||||
</List>
|
||||
</Fragment>
|
||||
)
|
||||
};
|
||||
|
||||
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>
|
||||
</Page>
|
||||
)
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -1,10 +1,13 @@
|
|||
import React from 'react';
|
||||
import { inject, observer } from 'mobx-react';
|
||||
import {List, ListItem, Icon} from 'framework7-react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
const AddOther = props => {
|
||||
const AddOther = inject("storeFocusObjects")(observer(props => {
|
||||
const { t } = useTranslation();
|
||||
const _t = t('View.Add', {returnObjects: true});
|
||||
const storeFocusObjects = props.storeFocusObjects;
|
||||
const isHyperLink = storeFocusObjects.selections.indexOf('hyperlink') > -1;
|
||||
const hideAddComment = props.hideAddComment();
|
||||
const wsProps = props.wsProps;
|
||||
|
||||
|
|
@ -22,11 +25,14 @@ const AddOther = props => {
|
|||
<ListItem title={_t.textSortAndFilter} className={wsProps.Sort && 'disabled'} link={'/add-sort-and-filter/'}>
|
||||
<Icon slot="media" icon="icon-sort"></Icon>
|
||||
</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>
|
||||
</ListItem>
|
||||
</List>
|
||||
)
|
||||
};
|
||||
}));
|
||||
|
||||
export {AddOther};
|
||||
|
|
@ -17,7 +17,7 @@ import { PageImageReplace, PageImageReorder, PageLinkSettings } from './EditImag
|
|||
import { TextColorCell, FillColorCell, CustomTextColorCell, CustomFillColorCell, FontsCell, TextFormatCell, TextOrientationCell, BorderStyleCell, BorderColorCell, CustomBorderColorCell, BorderSizeCell, PageFormatCell, PageAccountingFormatCell, PageCurrencyFormatCell, PageDateFormatCell, PageTimeFormatCell, CellStyle } from './EditCell';
|
||||
import { PageTextFonts, PageTextFontColor, PageTextCustomFontColor } from './EditText';
|
||||
import { PageChartDesign, PageChartDesignType, PageChartDesignStyle, PageChartDesignFill, PageChartDesignBorder, PageChartCustomFillColor, PageChartBorderColor, PageChartCustomBorderColor, PageChartReorder, PageChartLayout, PageLegend, PageChartTitle, PageHorizontalAxisTitle, PageVerticalAxisTitle, PageHorizontalGridlines, PageVerticalGridlines, PageDataLabels, PageChartVerticalAxis, PageVertAxisCrosses, PageDisplayUnits, PageVertMajorType, PageVertMinorType, PageVertLabelPosition, PageChartHorizontalAxis, PageHorAxisCrosses, PageHorAxisPosition, PageHorMajorType, PageHorMinorType, PageHorLabelPosition } from './EditChart';
|
||||
import { PageTypeLink, PageSheet } from './EditLink';
|
||||
import { PageEditTypeLink, PageEditSheet } from './EditLink';
|
||||
|
||||
const routes = [
|
||||
|
||||
|
|
@ -282,11 +282,11 @@ const routes = [
|
|||
|
||||
{
|
||||
path: '/edit-link-type/',
|
||||
component: PageTypeLink
|
||||
component: PageEditTypeLink
|
||||
},
|
||||
{
|
||||
path: '/edit-link-sheet',
|
||||
component: PageSheet
|
||||
component: PageEditSheet
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -363,11 +363,11 @@ const EditTabs = props => {
|
|||
component: <EmptyEditLayout />
|
||||
});
|
||||
} else {
|
||||
if (settings.indexOf('cell') > -1) {
|
||||
if (!(wsProps.Objects && store.isLockedShape) && settings.indexOf('image') > -1) {
|
||||
editors.push({
|
||||
caption: _t.textCell,
|
||||
id: 'edit-text',
|
||||
component: <EditCellController />
|
||||
caption: _t.textImage,
|
||||
id: 'edit-image',
|
||||
component: <EditImageController />
|
||||
})
|
||||
}
|
||||
if (!(wsProps.Objects && store.isLockedShape) && settings.indexOf('shape') > -1) {
|
||||
|
|
@ -377,11 +377,11 @@ const EditTabs = props => {
|
|||
component: <EditShapeController />
|
||||
})
|
||||
}
|
||||
if (!(wsProps.Objects && store.isLockedText) && settings.indexOf('text') > -1) {
|
||||
if (settings.indexOf('cell') > -1) {
|
||||
editors.push({
|
||||
caption: _t.textText,
|
||||
caption: _t.textCell,
|
||||
id: 'edit-text',
|
||||
component: <EditTextController />
|
||||
component: <EditCellController />
|
||||
})
|
||||
}
|
||||
if (!(wsProps.Objects && store.isLockedShape) && settings.indexOf('chart') > -1) {
|
||||
|
|
@ -391,22 +391,23 @@ const EditTabs = props => {
|
|||
component: <EditChartController />
|
||||
})
|
||||
}
|
||||
if (!(wsProps.Objects && store.isLockedShape) && settings.indexOf('image') > -1) {
|
||||
if (!(wsProps.Objects && store.isLockedText) && settings.indexOf('text') > -1) {
|
||||
editors.push({
|
||||
caption: _t.textImage,
|
||||
id: 'edit-image',
|
||||
component: <EditImageController />
|
||||
caption: _t.textText,
|
||||
id: 'edit-text',
|
||||
component: <EditTextController />
|
||||
})
|
||||
}
|
||||
if(!wsProps.Objects) {
|
||||
if (settings.indexOf('hyperlink') > -1 || (props.hyperinfo && props.isAddShapeHyperlink)) {
|
||||
editors.push({
|
||||
caption: _t.textHyperlink,
|
||||
id: 'edit-link',
|
||||
component: <EditLinkController />
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// if(!wsProps.Objects) {
|
||||
// if (settings.indexOf('hyperlink') > -1 || (props.hyperinfo && props.isAddShapeHyperlink)) {
|
||||
// editors.push({
|
||||
// caption: _t.textHyperlink,
|
||||
// id: 'edit-link',
|
||||
// component: <EditLinkController />
|
||||
// })
|
||||
// }
|
||||
// }
|
||||
}
|
||||
|
||||
if(!editors.length) {
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
import React, {useState, useEffect, Fragment} from 'react';
|
||||
import {observer, inject} from "mobx-react";
|
||||
import {f7, List, ListItem, Page, Navbar, NavRight, Icon, ListButton, ListInput, Link} from 'framework7-react';
|
||||
import {f7, List, ListItem, Page, Navbar, NavRight, Icon, ListButton, ListInput, Link, NavLeft, NavTitle} from 'framework7-react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import {Device} from "../../../../../common/mobile/utils/device";
|
||||
|
||||
const PageTypeLink = ({curType, changeType, storeFocusObjects}) => {
|
||||
const PageEditTypeLink = ({curType, changeType, storeFocusObjects}) => {
|
||||
const { t } = useTranslation();
|
||||
const _t = t('View.Edit', {returnObjects: true});
|
||||
const [typeLink, setTypeLink] = useState(curType);
|
||||
|
|
@ -17,10 +17,10 @@ const PageTypeLink = ({curType, changeType, storeFocusObjects}) => {
|
|||
|
||||
return (
|
||||
<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-expand-down' sheetClose></Link>
|
||||
<Link icon='icon-close' popupClose="#edit-link-popup"></Link>
|
||||
</NavRight>
|
||||
}
|
||||
</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 = t('View.Edit', {returnObjects: true});
|
||||
const [stateSheet, setSheet] = useState(curSheet);
|
||||
|
|
@ -45,10 +45,10 @@ const PageSheet = ({curSheet, sheets, changeSheet, storeFocusObjects}) => {
|
|||
|
||||
return (
|
||||
<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-expand-down' sheetClose></Link>
|
||||
<Link icon='icon-close' popupClose="#edit-link-popup"></Link>
|
||||
</NavRight>
|
||||
}
|
||||
</Navbar>
|
||||
|
|
@ -110,7 +110,27 @@ const EditLink = props => {
|
|||
const [range, setRange] = useState(valueRange || 'A1');
|
||||
|
||||
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'>
|
||||
<ListItem link={'/edit-link-type/'} title={_t.textLinkType} after={textType} routeProps={{
|
||||
changeType: changeType,
|
||||
|
|
@ -144,7 +164,7 @@ const EditLink = props => {
|
|||
}
|
||||
<ListInput label={_t.textDisplay}
|
||||
type="text"
|
||||
placeholder={_t.textDisplay}
|
||||
placeholder={t('View.Edit.textRecommended')}
|
||||
value={stateDisplayText}
|
||||
disabled={isLock}
|
||||
onChange={(event) => {setDisplayText(event.target.value)}}
|
||||
|
|
@ -159,26 +179,24 @@ const EditLink = props => {
|
|||
/>
|
||||
</List>
|
||||
<List className="buttons-list">
|
||||
<ListButton title={_t.textEditLink}
|
||||
className={`button-fill button-raised ${(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})}}
|
||||
/>
|
||||
<ListButton title={_t.textRemoveLink}
|
||||
className={`button-red button-fill button-raised`}
|
||||
onClick={() => props.onRemoveLink()}
|
||||
<ListButton
|
||||
title={t('View.Edit.textDeleteLink')}
|
||||
className={`button-red button-fill button-raised`}
|
||||
onClick={() => {
|
||||
props.onRemoveLink();
|
||||
props.isNavigate ? f7.views.current.router.back() : props.closeModal();
|
||||
}}
|
||||
/>
|
||||
</List>
|
||||
</Fragment>
|
||||
</Page>
|
||||
)
|
||||
};
|
||||
|
||||
const _PageTypeLink = inject("storeFocusObjects")(observer(PageTypeLink));
|
||||
const _PageSheet = inject("storeFocusObjects")(observer(PageSheet));
|
||||
const _PageEditTypeLink = inject("storeFocusObjects")(observer(PageEditTypeLink));
|
||||
const _PageEditSheet = inject("storeFocusObjects")(observer(PageEditSheet));
|
||||
|
||||
export {
|
||||
EditLink,
|
||||
_PageTypeLink as PageTypeLink,
|
||||
_PageSheet as PageSheet
|
||||
_PageEditTypeLink as PageEditTypeLink,
|
||||
_PageEditSheet as PageEditSheet
|
||||
};
|
||||
Loading…
Reference in a new issue