pengjunjie/web-apps
1
0
Fork 1
mirror of https://github.com/ONLYOFFICE/web-apps.git synced 2026-07-27 17:17:54 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #2519 from ONLYOFFICE/feature/framework7-update-fix-routes

Browse Source 
Feature/framework7 update fix routes
This commit is contained in:
maxkadushkin
2023-08-11 00:59:06 +03:00
committed by GitHub
parent e3fb3e3be0 fe03c64915
commit 7fc09b0574
71 changed files with 2521 additions and 2351 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/common/mobile/lib/controller/VersionHistory.jsx
View File

@ -429,7 +429,7 @@ const VersionHistoryController = inject('storeAppOptions', 'storeVersionHistory'
</View>
</Popover>
:
<Sheet id='version-history-sheet' backdrop={true} closeByOutsideClick={false} push onSheetClosed={() => props.onclosed()}>
<Sheet id='version-history-sheet' backdrop={true} closeByOutsideClick={false} onSheetClosed={() => props.onclosed()}>
<VersionHistoryView
onSetHistoryData={onSetHistoryData}
onSelectRevision={onSelectRevision}

70
apps/common/mobile/lib/pages/CollaborationPage.jsx Normal file
View File

@ -0,0 +1,70 @@
import React from 'react';
import { observer, inject } from "mobx-react";
import { List, ListItem, Navbar, NavRight, Page, Icon, Link } from 'framework7-react';
import { useTranslation } from 'react-i18next';
import { Device } from "../../utils/device";
const CollaborationPage = props => {
const { t } = useTranslation();
const _t = t('Common.Collaboration', {returnObjects: true});
const appOptions = props.storeAppOptions;
const documentInfo = props.storeDocumentInfo;
const dataDoc = documentInfo && documentInfo.dataDoc;
const fileType = dataDoc && dataDoc.fileType;
const sharingSettingsUrl = appOptions.sharingSettingsUrl;
const isViewer = appOptions.isViewer;
return (
<Page name="collab__main">
<Navbar title={_t.textCollaboration}>
{Device.phone &&
<NavRight>
<Link sheetClose=".coauth__sheet">
<Icon icon='icon-expand-down'/>
</Link>
</NavRight>
}
</Navbar>
<List>
{(sharingSettingsUrl && fileType !== 'oform') &&
<ListItem title={t('Common.Collaboration.textSharingSettings')} link="/sharing-settings/">
<Icon slot="media" icon="icon-sharing-settings"></Icon>
</ListItem>
}
{props.users.editUsers.length > 0 &&
<ListItem link={'/users/'} title={_t.textUsers}>
<Icon slot="media" icon="icon-users"></Icon>
</ListItem>
}
{appOptions.canViewComments &&
<ListItem link='/comments/' title={_t.textComments}>
<Icon slot="media" icon="icon-insert-comment"></Icon>
</ListItem>
}
{(window.editorType === 'de' && (appOptions.canReview || appOptions.canViewReview) && !isViewer) &&
<ListItem link={'/review/'} title={_t.textReview}>
<Icon slot="media" icon="icon-review"></Icon>
</ListItem>
}
</List>
</Page>
)
};
let storeInfo;
switch (window.asceditor) {
case 'word':
storeInfo = 'storeDocumentInfo';
break;
case 'slide':
storeInfo = 'storePresentationInfo';
break;
case 'cell':
storeInfo = 'storeSpreadsheetInfo';
break;
}
const Collaboration = inject('storeAppOptions', 'users', storeInfo)(observer(CollaborationPage));
export { Collaboration as CollaborationPage };

36
apps/common/mobile/lib/pages/UsersPage.jsx Normal file
View File

@ -0,0 +1,36 @@
import React from 'react';
import { observer, inject } from "mobx-react";
import { List, ListItem, Navbar, NavRight, Page, Icon, Link } from 'framework7-react';
import { useTranslation } from 'react-i18next';
import { Device } from "../../utils/device";
const UsersPage = inject("users")(observer(props => {
const { t } = useTranslation();
const _t = t('Common.Collaboration', {returnObjects: true});
const storeUsers = props.users;
return (
<Page name="collab__users" className='page-users'>
<Navbar title={_t.textUsers} backLink={_t.textBack}>
{Device.phone &&
<NavRight>
<Link sheetClose=".coauth__sheet">
<Icon icon='icon-expand-down'/>
</Link>
</NavRight>
}
</Navbar>
<List className="coauth__list">
{storeUsers.editUsers.map((user, i) => (
<ListItem title={user.name + (user.count > 1 ? ` (${user.count})` : '')} key={i}>
<div slot="media" className='color' style={{backgroundColor: user.color}}>
{user.initials}
</div>
</ListItem>
))}
</List>
</Page>
)
}));
export default UsersPage;

163
apps/common/mobile/lib/view/collaboration/Collaboration.jsx
View File

@ -1,46 +1,22 @@
import React, { Component, useEffect } from 'react';
import { observer, inject } from "mobx-react";
import { Popover, List, ListItem, Navbar, NavRight, Sheet, BlockTitle, Page, View, Icon, Link, f7 } from 'framework7-react';
import { useTranslation } from 'react-i18next';
import {Device} from "../../../utils/device";
import {ReviewController, ReviewChangeController} from "../../controller/collaboration/Review";
import {PageDisplayMode} from "./Review";
import {ViewCommentsController, ViewCommentsSheetsController} from "../../controller/collaboration/Comments";
import React, { useEffect } from 'react';
import { Popover, Sheet, f7, View } from 'framework7-react';
import { Device } from "../../../utils/device";
import { ReviewController, ReviewChangeController } from "../../controller/collaboration/Review";
import { PageDisplayMode } from "./Review";
import { ViewCommentsController, ViewCommentsSheetsController } from "../../controller/collaboration/Comments";
import SharingSettingsController from "../../controller/SharingSettings";
const PageUsers = inject("users")(observer(props => {
const { t } = useTranslation();
const _t = t('Common.Collaboration', {returnObjects: true});
const storeUsers = props.users;
return (
<Page name="collab__users" className='page-users'>
<Navbar title={_t.textUsers} backLink={_t.textBack}>
{Device.phone &&
<NavRight>
<Link sheetClose=".coauth__sheet">
<Icon icon='icon-expand-down'/>
</Link>
</NavRight>
}
</Navbar>
<List className="coauth__list">
{storeUsers.editUsers.map((user, i) => (
<ListItem title={user.name + (user.count > 1 ? ` (${user.count})` : '')} key={i}>
<div slot="media" className='color' style={{backgroundColor: user.color}}>
{user.initials}
</div>
</ListItem>
))}
</List>
</Page>
)
}));
import { CollaborationPage } from '../../pages/CollaborationPage';
import UsersPage from '../../pages/UsersPage';
const routes = [
{
path: '/collaboration-page/',
component: CollaborationPage,
keepAlive: true
},
{
path: '/users/',
component: PageUsers
component: UsersPage
},
{
path: '/review/',
@ -87,102 +63,35 @@ const routes = [
}
];
const PageCollaboration = inject('storeAppOptions', 'users')(observer(props => {
const { t } = useTranslation();
const _t = t('Common.Collaboration', {returnObjects: true});
const appOptions = props.storeAppOptions;
const documentInfo = props.documentInfo;
const dataDoc = documentInfo && documentInfo.dataDoc;
const fileType = dataDoc && dataDoc.fileType;
const sharingSettingsUrl = appOptions.sharingSettingsUrl;
const isViewer = appOptions.isViewer;
routes.forEach(route => {
route.options = {
...route.options,
transition: 'f7-push'
};
});
return (
<View style={props.style} stackPages={true} routes={routes} url={props.page && `/${props.page}/`}>
<Page name="collab__main">
<Navbar title={_t.textCollaboration}>
{Device.phone &&
<NavRight>
<Link sheetClose=".coauth__sheet">
<Icon icon='icon-expand-down'/>
</Link>
</NavRight>
}
</Navbar>
<List>
{(sharingSettingsUrl && fileType !== 'oform') &&
<ListItem title={t('Common.Collaboration.textSharingSettings')} link="/sharing-settings/">
<Icon slot="media" icon="icon-sharing-settings"></Icon>
</ListItem>
}
{props.users.editUsers.length > 0 &&
<ListItem link={'/users/'} title={_t.textUsers}>
<Icon slot="media" icon="icon-users"></Icon>
</ListItem>
}
{appOptions.canViewComments &&
<ListItem link='/comments/' title={_t.textComments}>
<Icon slot="media" icon="icon-insert-comment"></Icon>
</ListItem>
}
{(window.editorType === 'de' && (appOptions.canReview || appOptions.canViewReview) && !isViewer) &&
<ListItem link={'/review/'} title={_t.textReview}>
<Icon slot="media" icon="icon-review"></Icon>
</ListItem>
}
</List>
</Page>
</View>
)
}));
class CollaborationView extends Component {
constructor(props) {
super(props);
this.onoptionclick = this.onoptionclick.bind(this);
}
onoptionclick(page){
f7.views.current.router.navigate(page);
}
render() {
const show_popover = this.props.usePopover;
return (
show_popover ?
<Popover id="coauth-popover" className="popover__titled" onPopoverClosed={() => this.props.onclosed()} closeByOutsideClick={false}>
<PageCollaboration documentInfo={this.props.documentInfo} style={{height: '430px'}} page={this.props.page}/>
</Popover> :
<Sheet className="coauth__sheet" push onSheetClosed={() => this.props.onclosed()}>
<PageCollaboration documentInfo={this.props.documentInfo} page={this.props.page}/>
</Sheet>
)
}
}
const Collaboration = props => {
const CollaborationView = props => {
useEffect(() => {
if ( Device.phone ) {
if(Device.phone) {
f7.sheet.open('.coauth__sheet');
} else {
f7.popover.open('#coauth-popover', '#btn-coauth');
}
return () => {
// component will unmount
}
});
const onviewclosed = () => {
if ( props.onclosed ) {
props.onclosed();
}
};
}, []);
return (
<CollaborationView usePopover={!Device.phone} documentInfo={props.storeDocumentInfo} onclosed={onviewclosed} page={props.page}/>
!Device.phone ?
<Popover id="coauth-popover" className="popover__titled" onPopoverClosed={() => props.closeOptions('coauth')} closeByOutsideClick={false}>
<View style={{height: '430px'}} routes={routes} url='/collaboration-page/'>
<CollaborationPage />
</View>
</Popover> :
<Sheet className="coauth__sheet" onSheetClosed={() => props.closeOptions('coauth')}>
<View routes={routes} url='/collaboration-page/'>
<CollaborationPage />
</View>
</Sheet>
)
};
}
const CollaborationDocument = inject('storeDocumentInfo')(observer(Collaboration));
export {Collaboration, CollaborationDocument};
export default CollaborationView;

30
apps/common/mobile/resources/less/common-ios.less
View File

@ -39,8 +39,9 @@
--f7-searchbar-search-icon-color: @text-tertiary;
--f7-searchbar-input-clear-button-color: @text-tertiary;
--f7-toggle-inactive-color: @background-menu-divider;
--f7-toggle-border-color: @background-menu-divider;
--f7-toggle-inactive-border-color: @background-menu-divider;
--f7-toggle-inactive-bg-color: @background-menu-divider;
--f7-actions-button-border-color: @background-menu-divider;
--f7-popover-bg-color: @background-primary;
--f7-dialog-bg-color-rgb: @background-secondary;
@ -57,6 +58,9 @@
--f7-block-text-color: @text-secondary;
--f7-theme-color-shade: @background-primary;
--f7-fab-pressed-bg-color: @background-primary;
// Main Toolbar
#editor-navbar.navbar .right a + a,
#editor-navbar.navbar .left a + a {
@ -234,6 +238,22 @@
}
}
.links-list a:after, .list .item-inner:after, .simple-list li:after {
background-color: var(--f7-list-item-border-color);
bottom: 0;
content: "";
display: block;
height: 1px;
left: 0;
position: absolute;
right: auto;
top: auto;
transform: scaleY(calc(1/var(--f7-device-pixel-ratio)));
transform-origin: 50% 100%;
width: 100%;
z-index: 15;
}
.tab-buttons {
width: 100%;
display: flex;
@ -545,9 +565,9 @@
// Toggle Icon
.toggle-icon {
background: transparent;
}
// .toggle-icon {
// background: transparent;
// }
// Edit Comment Popup

97
apps/common/mobile/resources/less/common-material.less
View File

@ -25,7 +25,6 @@
--f7-subnavbar-height: 56px;
--f7-radio-active-color: @brandColor;
--f7-toggle-active-color: @brandColor;
--f7-range-bar-active-bg-color: @brandColor;
--f7-range-knob-color: @brandColor;
--f7-range-knob-size: 16px;
@ -52,6 +51,18 @@
--f7-input-text-color: @text-normal;
--f7-block-text-color: @text-secondary;
--f7-dialog-border-radius: 0;
--f7-sheet-border-radius: 0;
--f7-popover-border-radius: 4px;
--f7-actions-border-radius: 0;
--f7-box-shadow: 0px 5px 5px -3px rgba(0,0,0,.2),0px 8px 10px 1px rgba(0,0,0,.14),0px 3px 14px 2px rgba(0,0,0,.12);
--f7-popover-box-shadow: var(--f7-box-shadow);
--f7-toggle-active-bg-color: @brandColor;
--f7-toggle-active-border-color: @brandColor;
--f7-navbar-title-margin-left: 20px;
--f7-navbar-title-margin-right: 20px;
.button {
--f7-touch-ripple-color: transparent;
@ -68,6 +79,7 @@
.navbar {
--f7-touch-ripple-color: @touchColor;
.sheet-close {
width: 56px;
height: 56px;
@ -97,8 +109,6 @@
--f7-page-bg-color: @background-tertiary;
--f7-list-item-border-color: @background-menu-divider;
--f7-list-chevron-icon-color: @text-tertiary;
--f7-toggle-inactive-color: @background-menu-divider;
--f7-toggle-border-color: @background-menu-divider;
--f7-actions-button-text-color: @text-normal;
--f7-subnavbar-border-color: @background-menu-divider;
--f7-list-border-color: @background-menu-divider;
@ -106,10 +116,6 @@
.add-popup {
.view {
.block-title {
// margin-bottom: 0;
// margin-top: 8px;
}
.add-image, .inputs-list {
ul:after {
display: none;
@ -263,22 +269,36 @@
height: 3px;
}
}
// List
.list {
&.inputs-list {
margin: 0;
.item-input.item-content {
padding-left: 0;
}
.item-input, .item-link {
.item-inner {
display: block;
.item-title, .item-label {
width: 100%;
font-size: 12px;
}
.item-input-wrap {
margin-left: 0;
}
}
}
.item-input:not(.item-input-outline) .item-content::before, .item-input:not(.item-input-outline).item-content::before {
background: transparent;
}
}
.buttons {
box-sizing: border-box;
min-height: 48px;
@ -286,13 +306,22 @@
justify-content: space-between;
align-items: center;
width: 100%;
.item-content {
width: 100%;
.item-inner {
padding-bottom: 0;
padding-top: 0;
.row {
width: 100%;
--f7-cols-per-row: 1;
align-items: flex-start;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
.button {
flex: 1;
font-size: 17px;
@ -308,6 +337,7 @@
}
}
}
.item-content {
.color-preview {
width: 30px;
@ -323,6 +353,26 @@
}
}
.links-list a:after, .list .item-inner:after, .simple-list li:after {
background-color: var(--f7-list-item-border-color);
bottom: 0;
content: "";
display: block;
height: 1px;
left: 0;
position: absolute;
right: auto;
top: auto;
transform: scaleY(calc(1/var(--f7-device-pixel-ratio)));
transform-origin: 50% 100%;
width: 100%;
z-index: 15;
}
.media-list:not(.inset):not(.inset-md):not(.menu-list) .item-content, .media-list:not(.inset):not(.inset-md):not(.menu-list) li > .item-link, .list:not(.inset):not(.inset-md):not(.menu-list) .media-item .item-content, .list:not(.inset):not(.inset-md):not(.menu-list) .media-item > .item-link {
border-radius: 0;
}
// Color palette
#color-picker {
@ -370,9 +420,19 @@
margin-right: 10px;
margin: 4px 0;
}
&-inner {
.navbar-inner {
overflow: initial;
}
.left {
margin: 0;
}
.title {
margin-left: var(--f7-navbar-title-margin-left);
margin-right: var(--f7-navbar-title-margin-left);
}
}
.searchbar .input-clear-button {
@ -426,13 +486,17 @@
// height: 100%;
.searchbar-inner {
height: 100%;
padding: 0;
&__center {
flex-direction: column;
}
&__right {
flex-direction: column-reverse;
}
}
&.replace {
height: 96px;
}
@ -517,6 +581,7 @@
}
.item-input, .item-inner {
padding: 0;
margin: 0;
}
}
}
@ -544,6 +609,22 @@
}
}
// Popover styles
.popover {
box-shadow: var(--f7-box-shadow);
&.popover__titled {
.popover-arrow:after {
background: @brandColor;
}
}
&.document-menu, &.popover__functions {
.popover-arrow:after {
background: @background-secondary;
}
}
}
// Version History
.page-version-history {
--f7-page-bg-color: @background-primary;

28
apps/common/mobile/resources/less/common.less
View File

@ -8,6 +8,18 @@
@red: #f00;
@autoColor: @black;
.row {
--f7-cols-per-row: 1;
align-items: flex-start;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.row + .row {
margin-top: var(--f7-grid-row-gap);
}
.navbar.main-navbar {
height: 0;
&.navbar-with-logo {
@ -25,13 +37,6 @@
}
}
//.navbar {
// .title {
// text-overflow: initial;
// white-space: normal;
// }
//}
.navbar-hidden {
transform: translate3d(0, calc(-1 * (var(--f7-navbar-height) + var(--f7-subnavbar-height))), 0);
}
@ -107,11 +112,15 @@
padding: 14px 10px 0 10px;
}
.list {
.view .list {
max-width: 100%;
--menu-list-offset: 0px;
ul {
width: 100%;
background: var(--f7-list-bg-color);
}
li.no-indicator {
.item-link {
.item-inner{
@ -212,8 +221,9 @@
}
.popover {
.page .list {
.page .list:first-child:last-child {
ul {
border-radius: 0;
background-color: var(--f7-list-bg-color);
li:first-child, li:last-child {
.item-link {

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

@ -81,11 +81,11 @@ class AddLinkController extends Component {
return (
!this.props.isNavigate ?
Device.phone ?
<Popup id="add-link-popup" onPopupClosed={() => this.props.onClosed('add-link')}>
<Popup id="add-link-popup" onPopupClosed={() => this.props.closeOptions('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')}>
<Popover id="add-link-popover" className="popover__titled" closeByOutsideClick={false} onPopoverClosed={() => this.props.closeOptions('add-link')}>
<View style={{height: '410px'}}>
<PageAddLink closeModal={this.closeModal} onInsertLink={this.onInsertLink} getDisplayLinkText={this.getDisplayLinkText} isNavigate={this.props.isNavigate}/>
</View>

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

@ -2,7 +2,6 @@ import React, {Component} from 'react';
import { f7 } from 'framework7-react';
import {Device} from '../../../../../common/mobile/utils/device';
import { withTranslation} from 'react-i18next';
import {AddOther} from '../../view/add/AddOther';
// footnote converting metods
@ -260,8 +259,7 @@ class AddOtherController extends Component {
richDelLock={this.props.richDelLock}
richEditLock={this.props.richEditLock}
plainDelLock={this.props.plainDelLock}
plainEditLock={this.props.plainEditLock}
onCloseLinkSettings={this.props.onCloseLinkSettings}
plainEditLock={this.props.plainEditLock}
isNavigate={this.props.isNavigate}
/>
)

4
apps/documenteditor/mobile/src/controller/edit/EditHyperlink.jsx
View File

@ -90,7 +90,7 @@ class EditHyperlinkController extends Component {
return (
!this.props.isNavigate ?
Device.phone ?
<Popup id="edit-link-popup" onPopupClosed={() => this.props.onClosed('edit-link')}>
<Popup id="edit-link-popup" onPopupClosed={() => this.props.closeOptions('edit-link')}>
<EditHyperlink
onEditLink={this.onEditLink}
onRemoveLink={this.onRemoveLink}
@ -99,7 +99,7 @@ class EditHyperlinkController extends Component {
/>
</Popup>
:
<Popover id="edit-link-popover" className="popover__titled" closeByOutsideClick={false} onPopoverClosed={() => this.props.onClosed('edit-link')}>
<Popover id="edit-link-popover" className="popover__titled" closeByOutsideClick={false} onPopoverClosed={() => this.props.closeOptions('edit-link')}>
<View style={{height: '410px'}}>
<EditHyperlink
onEditLink={this.onEditLink}

4
apps/documenteditor/mobile/src/controller/edit/EditText.jsx
View File

@ -230,12 +230,14 @@ class EditTextController extends Component {
const storeTextSettings = this.props.storeTextSettings;
let subtype = undefined;
let arrayElements = (type===0) ? storeTextSettings.getBulletsList() : (type===1) ? storeTextSettings.getNumbersList() : storeTextSettings.getMultiLevelList();
for (let i=0; i<arrayElements.length; i++) {
if (api.asc_IsCurrentNumberingPreset(arrayElements[i].numberingInfo, type!==2)) {
if (arrayElements[i].type > 0 && api.asc_IsCurrentNumberingPreset(arrayElements[i].numberingInfo, type!==2)) {
subtype = arrayElements[i].subtype;
break;
}
}
switch (type) {
case 0:
storeTextSettings.resetBullets(subtype);

1
apps/documenteditor/mobile/src/controller/settings/Navigation.jsx
View File

@ -123,7 +123,6 @@ class NavigationController extends Component {
onSelectItem={this.onSelectItem}
updateNavigation={this.updateNavigation}
updateViewerNavigation={this.updateViewerNavigation}
onclosed={this.props.onclosed}
/>
);
}

57
apps/documenteditor/mobile/src/controller/settings/Settings.jsx
View File

@ -1,32 +1,22 @@
import React, {useEffect} from 'react';
import React, { createContext } from 'react';
import { useTranslation } from 'react-i18next';
import {f7} from 'framework7-react';
import { f7 } from 'framework7-react';
import { observer, inject } from "mobx-react";
import {Device} from '../../../../../common/mobile/utils/device';
import { Device } from '../../../../../common/mobile/utils/device';
import SettingsView from "../../view/settings/Settings";
import {LocalStorage} from "../../../../../common/mobile/utils/LocalStorage.mjs";
import { LocalStorage } from "../../../../../common/mobile/utils/LocalStorage.mjs";
const Settings = props => {
export const SettingsContext = createContext();
const SettingsController = props => {
const storeDocumentInfo = props.storeDocumentInfo;
const { t } = useTranslation();
useEffect(() => {
if ( Device.phone ) {
f7.popup.open('.settings-popup');
} else {
f7.popover.open('#settings-popover', '#btn-settings');
}
return () => {
// component will unmount
}
});
const closeModal = () => {
if (Device.phone) {
f7.sheet.close('.settings-popup');
if(Device.phone) {
f7.sheet.close('.settings-popup', false);
} else {
f7.popover.close('#settings-popover');
f7.popover.close('#settings-popover', false);
}
};
@ -156,20 +146,19 @@ const Settings = props => {
};
return (
<SettingsView
usePopover={!Device.phone}
openOptions={props.openOptions}
closeOptions={props.closeOptions}
// onclosed={props.onclosed}
onPrint={onPrint}
showHelp={showHelp}
showFeedback={showFeedback}
onOrthographyCheck={onOrthographyCheck}
onDownloadOrigin={onDownloadOrigin}
onChangeMobileView={onChangeMobileView}
changeTitleHandler={changeTitleHandler}
/>
<SettingsContext.Provider value={{
onPrint,
showHelp,
showFeedback,
onOrthographyCheck,
onDownloadOrigin,
onChangeMobileView,
changeTitleHandler,
closeModal
}}>
<SettingsView />
</SettingsContext.Provider>
);
};
export default inject("storeAppOptions", "storeDocumentInfo")(observer(Settings));
export default inject("storeAppOptions", "storeDocumentInfo")(observer(SettingsController));

6
apps/documenteditor/mobile/src/less/app-material.less
View File

@ -18,9 +18,9 @@
width: auto;
}
.toggle input[type="checkbox"]:checked + .toggle-icon {
background-color: rgba(68,105,149,.5);
}
// .toggle input[type="checkbox"]:checked + .toggle-icon {
// background-color: rgba(68,105,149,.5);
// }
// Review
.page-review {

1
apps/documenteditor/mobile/src/less/app.less
View File

@ -357,6 +357,7 @@
z-index: 10000;
a {
background-color: @background-primary;
border-radius: 50%;
&:focus, &:focus-within, &:active, &.active-state {
background-color: @background-primary;

213
apps/documenteditor/mobile/src/page/main.jsx
View File

@ -1,13 +1,11 @@
import React, { Component } from 'react';
import React, { Component, createContext } from 'react';
import { CSSTransition } from 'react-transition-group';
import { f7, Icon, FabButtons, FabButton, Page, View, Navbar, Subnavbar } from 'framework7-react';
import { f7, Icon, Page, View, Navbar, Subnavbar, Fab } from 'framework7-react';
import { observer, inject } from "mobx-react";
import { withTranslation } from 'react-i18next';
import EditOptions from '../view/edit/Edit';
import AddOptions from '../view/add/Add';
import Settings from '../controller/settings/Settings';
import { CollaborationDocument } from '../../../../common/mobile/lib/view/collaboration/Collaboration.jsx'
import SettingsController from '../controller/settings/Settings';
import CollaborationView from '../../../../common/mobile/lib/view/collaboration/Collaboration.jsx'
import { Device } from '../../../../common/mobile/utils/device'
import { Search, SearchSettings } from '../controller/Search';
import ContextMenu from '../controller/ContextMenu';
@ -16,8 +14,11 @@ import NavigationController from '../controller/settings/Navigation';
import { AddLinkController } from '../controller/add/AddLink';
import EditHyperlink from '../controller/edit/EditHyperlink';
import Snackbar from '../components/Snackbar/Snackbar';
import EditView from '../view/edit/Edit';
import VersionHistoryController from '../../../../common/mobile/lib/controller/VersionHistory';
export const MainContext = createContext();
class MainPage extends Component {
constructor(props) {
super(props);
@ -163,110 +164,112 @@ class MainPage extends Component {
}
return (
<Page name="home" className={`editor${!isHideLogo ? ' page-with-logo' : ''}`}>
{/* Top Navbar */}
<Navbar id='editor-navbar'
className={`main-navbar${!isHideLogo ? ' navbar-with-logo' : ''}`}>
{!isHideLogo &&
<div className="main-logo" onClick={() => {
window.open(`${__PUBLISHER_URL__}`, "_blank");
}}><Icon icon="icon-logo"></Icon></div>}
<Subnavbar>
<Toolbar openOptions={this.handleClickToOpenOptions}
closeOptions={this.handleOptionsViewClosed}/>
<Search useSuspense={false}/>
</Subnavbar>
</Navbar>
<MainContext.Provider value={{
openOptions: this.handleClickToOpenOptions.bind(this),
closeOptions: this.handleOptionsViewClosed.bind(this),
showPanels: this.state.addShowOptions,
}}>
<Page name="home" className={`editor${!isHideLogo ? ' page-with-logo' : ''}`}>
{/* Top Navbar */}
<Navbar id='editor-navbar' className={`main-navbar${!isHideLogo ? ' navbar-with-logo' : ''}`}>
{!isHideLogo &&
<div className="main-logo" onClick={() => {
window.open(`${__PUBLISHER_URL__}`, "_blank");
}}>
<Icon icon="icon-logo"></Icon>
</div>
}
<Subnavbar>
<Toolbar
openOptions={this.handleClickToOpenOptions}
closeOptions={this.handleOptionsViewClosed}
/>
<Search useSuspense={false}/>
</Subnavbar>
</Navbar>
{/* Page content */}
{/* Page content */}
<View id="editor_sdk">
</View>
<View id="editor_sdk">
</View>
{isShowPlaceholder ?
<div className="doc-placeholder-container">
<div className="doc-placeholder">
<div className="line"></div>
<div className="line"></div>
<div className="line"></div>
<div className="line"></div>
<div className="line"></div>
<div className="line"></div>
<div className="line"></div>
<div className="line"></div>
<div className="line"></div>
<div className="line"></div>
<div className="line"></div>
<div className="line"></div>
<div className="line"></div>
<div className="line"></div>
<div className="line"></div>
<div className="line"></div>
<div className="line"></div>
<div className="line"></div>
<div className="line"></div>
<div className="line"></div>
</div>
</div> : null
}
{isShowPlaceholder ?
<div className="doc-placeholder-container">
<div className="doc-placeholder">
<div className="line"></div>
<div className="line"></div>
<div className="line"></div>
<div className="line"></div>
<div className="line"></div>
<div className="line"></div>
<div className="line"></div>
<div className="line"></div>
<div className="line"></div>
<div className="line"></div>
<div className="line"></div>
<div className="line"></div>
<div className="line"></div>
<div className="line"></div>
<div className="line"></div>
<div className="line"></div>
<div className="line"></div>
<div className="line"></div>
<div className="line"></div>
<div className="line"></div>
</div>
</div> : null
}
{/* {
Device.phone ? null : <SearchSettings />
} */}
<Snackbar
isShowSnackbar={this.state.snackbarVisible}
closeCallback={() => this.handleOptionsViewClosed('snackbar')}
message={isMobileView ? t("Toolbar.textSwitchedMobileView") : t("Toolbar.textSwitchedStandardView")}
/>
<SearchSettings useSuspense={false}/>
{
!this.state.editOptionsVisible ? null :
<EditOptions onclosed={this.handleOptionsViewClosed.bind(this, 'edit')}/>
}
{
!this.state.addOptionsVisible ? null :
<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 :
<Settings openOptions={this.handleClickToOpenOptions.bind(this)}
closeOptions={this.handleOptionsViewClosed.bind(this)}/>
}
{
!this.state.collaborationVisible ? null :
<CollaborationDocument onclosed={this.handleOptionsViewClosed.bind(this, 'coauth')} page={this.state.collaborationPage} />
}
{
!this.state.navigationVisible ? null :
<NavigationController onclosed={this.handleOptionsViewClosed.bind(this, 'navigation')}/>
}
{
!this.state.historyVisible ? null :
{/* {
Device.phone ? null : <SearchSettings />
} */}
<Snackbar
isShowSnackbar={this.state.snackbarVisible}
closeCallback={() => this.handleOptionsViewClosed('snackbar')}
message={isMobileView ? t("Toolbar.textSwitchedMobileView") : t("Toolbar.textSwitchedStandardView")}
/>
<SearchSettings useSuspense={false} />
{!this.state.editOptionsVisible ? null : <EditView />}
{!this.state.addOptionsVisible ? null : <AddOptions />}
{!this.state.addLinkSettingsVisible ? null :
<AddLinkController
closeOptions={this.handleOptionsViewClosed.bind(this)}
/>
}
{!this.state.editLinkSettingsVisible ? null :
<EditHyperlink
closeOptions={this.handleOptionsViewClosed.bind(this)}
/>
}
{!this.state.settingsVisible ? null : <SettingsController />}
{!this.state.collaborationVisible ? null :
<CollaborationView
closeOptions={this.handleOptionsViewClosed.bind(this)}
/>
}
{!this.state.navigationVisible ? null : <NavigationController />}
{!this.state.historyVisible ? null :
<VersionHistoryController onclosed={this.handleOptionsViewClosed.bind(this, 'history')} />
}
{(isFabShow && !isVersionHistoryMode) &&
<CSSTransition
in={this.state.fabVisible}
timeout={500}
classNames="fab"
mountOnEnter
unmountOnExit
>
<div className="fab fab-right-bottom" onClick={() => this.turnOffViewerMode()}>
<a href="#"><i className="icon icon-edit-mode"></i></a>
</div>
</CSSTransition>
}
{appOptions.isDocReady && <ContextMenu openOptions={this.handleClickToOpenOptions.bind(this)}/>}
</Page>
}
{(isFabShow && !isVersionHistoryMode) &&
<CSSTransition
in={this.state.fabVisible}
timeout={500}
classNames="fab"
mountOnEnter
unmountOnExit
>
<div className="fab fab-right-bottom" onClick={() => this.turnOffViewerMode()}>
<a href="#"><i className="icon icon-edit-mode"></i></a>
</div>
</CSSTransition>
}
{appOptions.isDocReady &&
<ContextMenu openOptions={this.handleClickToOpenOptions.bind(this)} />
}
</Page>
</MainContext.Provider>
)
}
}

2
apps/documenteditor/mobile/src/view/Toolbar.jsx
View File

@ -88,7 +88,7 @@ const ToolbarView = props => {
elemTitle.innerText = correctOverflowedText(elemTitle);
}
}, [docTitle, isViewer]);
return (
<Fragment>
<NavLeft>

248
apps/documenteditor/mobile/src/view/add/Add.jsx
View File

@ -1,22 +1,22 @@
import React, {Component, useEffect, Fragment} from 'react';
import {View,Page,Navbar,NavRight, NavTitle, Link,Popup,Popover,Icon,Tabs,Tab} from 'framework7-react';
import { useTranslation } from 'react-i18next';
import {f7} from 'framework7-react';
import { observer, inject } from "mobx-react";
import {Device} from '../../../../../common/mobile/utils/device';
import {AddTableController} from "../../controller/add/AddTable";
import AddShapeController from "../../controller/add/AddShape";
import {AddImageController} from "../../controller/add/AddImage";
import {AddLinkController} from "../../controller/add/AddLink";
import {AddOtherController} from "../../controller/add/AddOther";
import {PageImageLinkSettings} from "../add/AddImage";
import {PageAddNumber, PageAddBreak, PageAddSectionBreak, PageAddFootnote} from "../add/AddOther";
import React, { useContext, useEffect } from 'react';
import { View, Popup, Popover } from 'framework7-react';
import { f7 } from 'framework7-react';
import { Device } from '../../../../../common/mobile/utils/device';
import { AddImageController } from "../../controller/add/AddImage";
import { AddLinkController } from "../../controller/add/AddLink";
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';
import AddingPage from './AddingPage';
import { MainContext } from '../../page/main';
const routes = [
{
path: '/adding-page/',
component: AddingPage,
keepAlive: true
},
// Image
{
path: '/add-image-from-url/',
@ -57,205 +57,37 @@ const routes = [
}
];
const AddLayoutNavbar = ({ tabs, inPopover, storeTableSettings }) => {
const isAndroid = Device.android;
const { t } = useTranslation();
const _t = t('Add', {returnObjects: true});
const getTableStylesPreviews = () => {
if(!storeTableSettings.arrayStylesDefault.length) {
const api = Common.EditorApi.get();
setTimeout(() => storeTableSettings.setStyles(api.asc_getTableStylesPreviews(true), 'default'), 1);
}
routes.forEach(route => {
route.options = {
...route.options,
transition: 'f7-push'
};
});
return (
<Navbar>
{tabs.length > 1 ?
<div className='tab-buttons tabbar'>
{tabs.map((item, index) =>
<Link key={"de-link-" + item.id} onClick={() => getTableStylesPreviews()} tabLink={"#" + item.id} tabLinkActive={index === 0}>
<Icon slot="media" icon={item.icon}></Icon>
</Link>)}
{isAndroid && <span className='tab-link-highlight' style={{width: 100 / tabs.lenght + '%'}}></span>}
</div> :
<NavTitle>{ tabs[0].caption }</NavTitle>
}
{!inPopover && <NavRight><Link icon='icon-expand-down' popupClose=".add-popup"></Link></NavRight>}
</Navbar>
)
};
const AddView = () => {
const mainContext = useContext(MainContext);
const AddLayoutContent = ({ tabs }) => {
return (
<Tabs animated>
{tabs.map((item, index) =>
<Tab key={"de-tab-" + item.id} id={item.id} className="page-content" tabActive={index === 0}>
{item.component}
</Tab>
)}
</Tabs>
)
};
const AddTabs = inject("storeFocusObjects", "storeTableSettings")(observer(({storeFocusObjects, showPanels, storeTableSettings, style, inPopover, onCloseLinkSettings}) => {
const { t } = useTranslation();
const _t = t('Add', {returnObjects: true});
const api = Common.EditorApi.get();
const tabs = [];
const options = storeFocusObjects.settings;
const paragraphObj = storeFocusObjects.paragraphObject;
let needDisable = false,
canAddTable = true,
canAddImage = true,
paragraphLocked = false,
inFootnote = false,
inControl = false,
controlProps = false,
lockType = false,
controlPlain = false,
contentLocked = false,
richDelLock = false,
richEditLock = false,
plainDelLock = false,
plainEditLock = false;
if(paragraphObj) {
canAddTable = paragraphObj.get_CanAddTable();
canAddImage = paragraphObj.get_CanAddImage();
paragraphLocked = paragraphObj.get_Locked();
inFootnote = api.asc_IsCursorInFootnote() || api.asc_IsCursorInEndnote();
inControl = api.asc_IsContentControl();
controlProps = inControl ? api.asc_GetContentControlProperties() : null;
lockType = (inControl && controlProps) ? controlProps.get_Lock() : Asc.c_oAscSdtLockType.Unlocked;
controlPlain = (inControl && controlProps) ? (controlProps.get_ContentControlType() == Asc.c_oAscSdtLevelType.Inline) : false;
contentLocked = lockType == Asc.c_oAscSdtLockType.SdtContentLocked || lockType == Asc.c_oAscSdtLockType.ContentLocked;
richDelLock = paragraphObj ? !paragraphObj.can_DeleteBlockContentControl() : false;
richEditLock = paragraphObj ? !paragraphObj.can_EditBlockContentControl() : false;
plainDelLock = paragraphObj ? !paragraphObj.can_DeleteInlineContentControl() : false;
plainEditLock = paragraphObj ? !paragraphObj.can_EditInlineContentControl() : false;
}
if (!showPanels && options.indexOf('text') > -1) {
needDisable = !canAddTable || controlPlain || richEditLock || plainEditLock || richDelLock || plainDelLock;
if(!needDisable) {
tabs.push({
caption: _t.textTable,
id: 'add-table',
icon: 'icon-add-table',
component: <AddTableController/>
});
useEffect(() => {
if(Device.phone) {
f7.popup.open('.add-popup');
} else {
f7.popover.open('#add-popover', '#btn-add');
}
}
if(!showPanels) {
needDisable = paragraphLocked || controlPlain || contentLocked || inFootnote;
if(!needDisable) {
tabs.push({
caption: _t.textShape,
id: 'add-shape',
icon: 'icon-add-shape',
component: <AddShapeController/>
});
}
}
// 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(!showPanels) {
tabs.push({
caption: _t.textOther,
id: 'add-other',
icon: 'icon-add-other',
component:
<AddOtherController
inFootnote={inFootnote}
inControl={inControl}
paragraphLocked={paragraphLocked}
controlPlain={controlPlain}
richDelLock={richDelLock}
richEditLock={richEditLock}
plainDelLock={plainDelLock}
plainEditLock={plainEditLock}
onCloseLinkSettings={onCloseLinkSettings}
/>
});
}
// if (showPanels && showPanels === 'link') {
// tabs.push({
// caption: t('Add.textLinkSettings'),
// id: 'add-link',
// component: <AddLinkController noNavbar={true} />
// });
// }
}, []);
return (
<View style={style} stackPages={true} routes={routes}>
<Page pageContent={false}>
<AddLayoutNavbar tabs={tabs} inPopover={inPopover} storeTableSettings={storeTableSettings} />
<AddLayoutContent tabs={tabs} />
</Page>
</View>
!Device.phone ?
<Popover id="add-popover" className="popover__titled" closeByOutsideClick={false} onPopoverClosed={() => mainContext.closeOptions('add')}>
<View routes={routes} url='/adding-page/' style={{height: '410px'}}>
<AddingPage />
</View>
</Popover> :
<Popup className="add-popup" onPopupClosed={() => mainContext.closeOptions('add')}>
<View routes={routes} url='/adding-page/'>
<AddingPage />
</View>
</Popup>
)
}));
class AddView extends Component {
constructor(props) {
super(props);
this.onoptionclick = this.onoptionclick.bind(this);
}
onoptionclick(page){
f7.views.current.router.navigate(page);
}
render() {
const show_popover = this.props.usePopover;
return (
show_popover ?
<Popover id="add-popover" className="popover__titled" closeByOutsideClick={false} onPopoverClosed={() => this.props.onclosed()}>
<AddTabs inPopover={true} style={{height: '410px'}} onCloseLinkSettings={this.props.onCloseLinkSettings} showPanels={this.props.showPanels} />
</Popover> :
<Popup className="add-popup" onPopupClosed={() => this.props.onclosed()}>
<AddTabs onCloseLinkSettings={this.props.onCloseLinkSettings} showPanels={this.props.showPanels} />
</Popup>
)
}
}
const Add = props => {
useEffect(() => {
if ( Device.phone )
f7.popup.open('.add-popup');
else f7.popover.open('#add-popover', '#btn-add');
f7.tab.show('#add-other', false);
return () => {
// component will unmount
}
});
const onviewclosed = () => {
if ( props.onclosed ) {
props.onclosed();
}
};
return <AddView usePopover={!Device.phone} onCloseLinkSettings={props.onCloseLinkSettings} onclosed={onviewclosed} showPanels={props.showOptions} />
};
export default Add;
export default AddView;

1
apps/documenteditor/mobile/src/view/add/AddOther.jsx
View File

@ -193,7 +193,6 @@ const AddOther = props => {
<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>

157
apps/documenteditor/mobile/src/view/add/AddingPage.jsx Normal file
View File

@ -0,0 +1,157 @@
import React, { useContext, useEffect } from 'react';
import { f7, Page, Navbar, NavRight, NavTitle, Link, Icon, Tabs, Tab } from 'framework7-react';
import { useTranslation } from 'react-i18next';
import { observer, inject } from "mobx-react";
import { Device } from '../../../../../common/mobile/utils/device';
import { AddTableController } from "../../controller/add/AddTable";
import AddShapeController from "../../controller/add/AddShape";
import { AddOtherController } from "../../controller/add/AddOther";
import { MainContext } from '../../page/main';
const AddLayoutNavbar = ({ tabs, storeTableSettings }) => {
const isAndroid = Device.android;
const { t } = useTranslation();
const _t = t('Add', {returnObjects: true});
const getTableStylesPreviews = () => {
if(!storeTableSettings.arrayStylesDefault.length) {
const api = Common.EditorApi.get();
setTimeout(() => storeTableSettings.setStyles(api.asc_getTableStylesPreviews(true), 'default'), 1);
}
};
return (
<Navbar>
{tabs.length > 1 ?
<div className='tab-buttons tabbar'>
{tabs.map((item, index) =>
<Link key={"de-link-" + item.id} onClick={() => getTableStylesPreviews()} tabLink={"#" + item.id} tabLinkActive={index === 0}>
<Icon slot="media" icon={item.icon}></Icon>
</Link>)}
{isAndroid && <span className='tab-link-highlight' style={{width: 100 / tabs.lenght + '%'}}></span>}
</div> :
<NavTitle>{ tabs[0].caption }</NavTitle>
}
{Device.phone && <NavRight><Link icon='icon-expand-down' popupClose=".add-popup"></Link></NavRight>}
</Navbar>
)
};
const AddLayoutContent = ({ tabs }) => {
return (
<Tabs animated>
{tabs.map((item, index) =>
<Tab key={"de-tab-" + item.id} id={item.id} className="page-content" tabActive={index === 0}>
{item.component}
</Tab>
)}
</Tabs>
)
};
const AddingPage = inject("storeFocusObjects", "storeTableSettings")(observer(props => {
const mainContext = useContext(MainContext);
const showPanels = mainContext.showPanels;
const storeFocusObjects = props.storeFocusObjects;
const storeTableSettings = props.storeTableSettings;
const { t } = useTranslation();
const _t = t('Add', {returnObjects: true});
const api = Common.EditorApi.get();
const tabs = [];
const options = storeFocusObjects.settings;
const paragraphObj = storeFocusObjects.paragraphObject;
useEffect(() => {
f7.tab.show('#add-other', false);
}, []);
let needDisable = false,
canAddTable = true,
canAddImage = true,
paragraphLocked = false,
inFootnote = false,
inControl = false,
controlProps = false,
lockType = false,
controlPlain = false,
contentLocked = false,
richDelLock = false,
richEditLock = false,
plainDelLock = false,
plainEditLock = false;
if(paragraphObj) {
canAddTable = paragraphObj.get_CanAddTable();
canAddImage = paragraphObj.get_CanAddImage();
paragraphLocked = paragraphObj.get_Locked();
inFootnote = api.asc_IsCursorInFootnote() || api.asc_IsCursorInEndnote();
inControl = api.asc_IsContentControl();
controlProps = inControl ? api.asc_GetContentControlProperties() : null;
lockType = (inControl && controlProps) ? controlProps.get_Lock() : Asc.c_oAscSdtLockType.Unlocked;
controlPlain = (inControl && controlProps) ? (controlProps.get_ContentControlType() == Asc.c_oAscSdtLevelType.Inline) : false;
contentLocked = lockType == Asc.c_oAscSdtLockType.SdtContentLocked || lockType == Asc.c_oAscSdtLockType.ContentLocked;
richDelLock = paragraphObj ? !paragraphObj.can_DeleteBlockContentControl() : false;
richEditLock = paragraphObj ? !paragraphObj.can_EditBlockContentControl() : false;
plainDelLock = paragraphObj ? !paragraphObj.can_DeleteInlineContentControl() : false;
plainEditLock = paragraphObj ? !paragraphObj.can_EditInlineContentControl() : false;
}
if (!showPanels && options.indexOf('text') > -1) {
needDisable = !canAddTable || controlPlain || richEditLock || plainEditLock || richDelLock || plainDelLock;
if(!needDisable) {
tabs.push({
caption: _t.textTable,
id: 'add-table',
icon: 'icon-add-table',
component: <AddTableController/>
});
}
}
if(!showPanels) {
needDisable = paragraphLocked || controlPlain || contentLocked || inFootnote;
if(!needDisable) {
tabs.push({
caption: _t.textShape,
id: 'add-shape',
icon: 'icon-add-shape',
component: <AddShapeController/>
});
}
}
if(!showPanels) {
tabs.push({
caption: _t.textOther,
id: 'add-other',
icon: 'icon-add-other',
component:
<AddOtherController
inFootnote={inFootnote}
inControl={inControl}
paragraphLocked={paragraphLocked}
controlPlain={controlPlain}
richDelLock={richDelLock}
richEditLock={richEditLock}
plainDelLock={plainDelLock}
plainEditLock={plainEditLock}
/>
});
}
return (
<Page pageContent={false}>
<AddLayoutNavbar tabs={tabs} storeTableSettings={storeTableSettings} />
<AddLayoutContent tabs={tabs} />
</Page>
)
}));
export default AddingPage;

5
apps/documenteditor/mobile/src/view/app.jsx
View File

@ -1,7 +1,7 @@
import React from 'react';
import {App,Panel,Views,View,Popup,Page,Navbar,Toolbar,NavRight,Link,Block,BlockTitle,List,ListItem,ListInput,ListButton,BlockFooter} from 'framework7-react';
import { f7, f7ready } from 'framework7-react';
import { App, View } from 'framework7-react';
import { f7ready } from 'framework7-react';
import '../../../../common/Analytics.js';
@ -18,7 +18,6 @@ import {Themes} from '../../../../common/mobile/lib/controller/Themes'
const f7params = {
name: 'Desktop Editor', // App name
theme: 'auto', // Automatic theme detection
routes: routes, // App routes
};

240
apps/documenteditor/mobile/src/view/edit/Edit.jsx
View File

@ -1,29 +1,22 @@
import React, {useState, useEffect} from 'react';
import {observer, inject} from "mobx-react";
import { Popover, Sheet, View, Page, Navbar, NavRight, NavLeft, NavTitle, Tabs, Tab, Link } from 'framework7-react';
import { f7 } from 'framework7-react';
import { useTranslation } from 'react-i18next';
import {Device} from '../../../../../common/mobile/utils/device';
import EditTextController from "../../controller/edit/EditText";
import EditParagraphController from "../../controller/edit/EditParagraph";
import EditShapeController from "../../controller/edit/EditShape";
import EditImageController from "../../controller/edit/EditImage";
import EditTableController from "../../controller/edit/EditTable";
import EditChartController from "../../controller/edit/EditChart";
import EditHyperlinkController from "../../controller/edit/EditHyperlink";
import EditHeaderController from "../../controller/edit/EditHeader";
import EditTableContentsController from "../../controller/edit/EditTableContents";
import {PageTextFonts, PageTextAddFormatting, PageTextBulletsAndNumbers, PageTextLineSpacing, PageTextFontColor, PageTextCustomFontColor, PageTextHighlightColor} from "./EditText";
import {ParagraphAdvSettings, PageParagraphBackColor, PageParagraphCustomColor, PageParagraphStyle, PageCreateTextStyle, PageChangeNextParagraphStyle} from "./EditParagraph";
import {PageShapeStyleNoFill, PageShapeStyle, PageShapeCustomFillColor, PageShapeBorderColor, PageShapeCustomBorderColor, PageWrap, PageReorder, PageReplace} from "./EditShape";
import {PageImageReorder, PageImageReplace, PageImageWrap, PageLinkSettings, PageWrappingStyle} from "./EditImage";
import {PageTableOptions, PageTableWrap, PageTableStyle, PageTableStyleOptions, PageTableCustomFillColor, PageTableBorderColor, PageTableCustomBorderColor} from "./EditTable";
import {PageChartDesign, PageChartDesignType, PageChartDesignStyle, PageChartDesignFill, PageChartDesignBorder, PageChartCustomFillColor, PageChartBorderColor, PageChartCustomBorderColor, PageChartWrap, PageChartReorder} from "./EditChart";
import React, { useContext, useEffect } from 'react';
import { Popover, Sheet, View, f7 } from 'framework7-react';
import { Device } from '../../../../../common/mobile/utils/device';
import { PageTextFonts, PageTextAddFormatting, PageTextBulletsAndNumbers, PageTextLineSpacing, PageTextFontColor, PageTextCustomFontColor, PageTextHighlightColor } from "./EditText";
import { ParagraphAdvSettings, PageParagraphBackColor, PageParagraphCustomColor, PageParagraphStyle, PageCreateTextStyle, PageChangeNextParagraphStyle } from "./EditParagraph";
import { PageShapeStyleNoFill, PageShapeStyle, PageShapeCustomFillColor, PageShapeBorderColor, PageShapeCustomBorderColor, PageWrap, PageReorder, PageReplace } from "./EditShape";
import { PageImageReorder, PageImageReplace, PageImageWrap, PageLinkSettings, PageWrappingStyle } from "./EditImage";
import { PageTableOptions, PageTableWrap, PageTableStyle, PageTableStyleOptions, PageTableCustomFillColor, PageTableBorderColor, PageTableCustomBorderColor } from "./EditTable";
import { PageChartDesign, PageChartDesignType, PageChartDesignStyle, PageChartDesignFill, PageChartDesignBorder, PageChartCustomFillColor, PageChartBorderColor, PageChartCustomBorderColor, PageChartWrap, PageChartReorder } from "./EditChart";
import { PageEditLeaderTableContents, PageEditStylesTableContents, PageEditStructureTableContents } from './EditTableContents';
import EditingPage from './EditingPage';
import { MainContext } from '../../page/main';
const routes = [
{
path: '/editing-page/',
component: EditingPage,
keepAlive: true
},
//Edit text
{
path: '/edit-text-fonts/',
@ -225,185 +218,40 @@ const routes = [
{
path: '/edit-structure-table-contents/',
component: PageEditStructureTableContents
}
},
];
const EmptyEditLayout = () => {
const { t } = useTranslation();
const _t = t('Edit', {returnObjects: true});
return (
<Page>
<div className="content-block inset">
<div className="content-block-inner">
<p>{_t.textSelectObjectToEdit}</p>
</div>
</div>
</Page>
)
};
const EditLayoutNavbar = ({ editors, inPopover }) => {
const isAndroid = Device.android;
const { t } = useTranslation();
const _t = t('Edit', {returnObjects: true});
return (
<Navbar>
{
editors.length > 1 ?
<div className='tab-buttons tabbar'>
{editors.map((item, index) => <Link key={"de-link-" + item.id} tabLink={"#" + item.id} tabLinkActive={index === 0}>{item.caption}</Link>)}
{isAndroid && <span className='tab-link-highlight' style={{width: 100 / editors.length + '%'}}></span>}
</div> :
<NavTitle>{ editors[0].caption }</NavTitle>
}
{ !inPopover && <NavRight><Link icon='icon-expand-down' sheetClose></Link></NavRight> }
</Navbar>
)
};
const EditLayoutContent = ({ editors }) => {
if (editors.length > 1) {
return (
<Tabs animated>
{editors.map((item, index) =>
<Tab key={"de-tab-" + item.id} id={item.id} className="page-content" tabActive={index === 0}>
{item.component}
</Tab>
)}
</Tabs>
)
} else {
return (
<Page>
{editors[0].component}
</Page>
)
}
};
const EditTabs = props => {
const { t } = useTranslation();
const _t = t('Edit', {returnObjects: true});
const api = Common.EditorApi.get();
const inToc = api.asc_GetTableOfContentsPr(true);
const settings = props.storeFocusObjects.settings;
const headerType = props.storeFocusObjects.headerType;
let editors = [];
if (settings.length < 1) {
editors.push({
caption: _t.textSettings,
component: <EmptyEditLayout />
});
} else {
if(inToc) {
editors.push({
caption: _t.textTableOfCont,
id: 'edit-table-contents',
component: <EditTableContentsController />
})
}
if (settings.indexOf('image') > -1) {
editors.push({
caption: _t.textImage,
id: 'edit-image',
component: <EditImageController />
})
}
if (settings.indexOf('shape') > -1) {
editors.push({
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) {
editors.push({
caption: _t.textTable,
id: 'edit-table',
component: <EditTableController />
})
}
if (settings.indexOf('header') > -1) {
editors.push({
caption: headerType === 2 ? _t.textFooter : _t.textHeader,
id: 'edit-header',
component: <EditHeaderController />
})
}
if (settings.indexOf('text') > -1) {
editors.push({
caption: _t.textText,
id: 'edit-text',
component: <EditTextController />
})
}
if (settings.indexOf('paragraph') > -1) {
editors.push({
caption: _t.textParagraph,
id: 'edit-paragraph',
component: <EditParagraphController />
})
}
}
return (
<View style={props.style} stackPages={true} routes={routes}>
<Page pageContent={false}>
<EditLayoutNavbar editors={editors} inPopover={props.inPopover}/>
<EditLayoutContent editors={editors} />
</Page>
</View>
)
};
const EditTabsContainer = inject("storeFocusObjects")(observer(EditTabs));
const EditView = props => {
const onOptionClick = (page) => {
$f7.views.current.router.navigate(page);
routes.forEach(route => {
route.options = {
...route.options,
transition: 'f7-push'
};
const show_popover = props.usePopover;
});
const EditView = () => {
const mainContext = useContext(MainContext);
useEffect(() => {
if(Device.phone) {
f7.sheet.open('#edit-sheet');
} else {
f7.popover.open('#edit-popover', '#btn-edit');
}
}, []);
return (
show_popover ?
<Popover id="edit-popover" className="popover__titled" closeByOutsideClick={false} onPopoverClosed={() => props.onClosed()}>
<EditTabsContainer inPopover={true} onOptionClick={onOptionClick} style={{height: '410px'}} />
!Device.phone ?
<Popover id="edit-popover" className="popover__titled" closeByOutsideClick={false} onPopoverClosed={() => mainContext.closeOptions('edit')}>
<View style={{ height: '410px' }} routes={routes} url='/editing-page/'>
<EditingPage />
</View>
</Popover> :
<Sheet id="edit-sheet" closeByOutsideClick={true} closeByBackdropClick={false} backdrop={false} push onSheetClosed={() => props.onClosed()}>
<EditTabsContainer onOptionClick={onOptionClick} />
<Sheet id="edit-sheet" closeByOutsideClick={false} onSheetClosed={() => mainContext.closeOptions('edit')}>
<View routes={routes} url='/editing-page/'>
<EditingPage />
</View>
</Sheet>
)
};
const EditOptions = props => {
useEffect(() => {
if ( Device.phone )
f7.sheet.open('#edit-sheet');
else f7.popover.open('#edit-popover', '#btn-edit');
return () => {
// component will unmount
}
});
const onviewclosed = () => {
if ( props.onclosed ) {
props.onclosed();
}
};
return (
<EditView usePopover={!Device.phone} onClosed={onviewclosed} />
)
};
export default EditOptions;
export default EditView;

9
apps/documenteditor/mobile/src/view/edit/EditChart.jsx
View File

@ -1,6 +1,7 @@
import React, {Fragment, useState} from 'react';
import {observer, inject} from "mobx-react";
import {List, ListItem, ListButton, Icon, Row, Page, Navbar, NavRight, BlockTitle, Toggle, Range, Link, Tabs, Tab, Swiper, SwiperSlide} from 'framework7-react';
import { List, ListItem, ListButton, Icon, Page, Navbar, NavRight, BlockTitle, Toggle, Range, Link } from 'framework7-react';
import { Swiper, SwiperSlide } from 'swiper/react';
import {f7} from 'framework7-react';
import { useTranslation } from 'react-i18next';
import {Device} from '../../../../../common/mobile/utils/device';
@ -390,8 +391,8 @@ const PageWrap = props => {
<Fragment>
<BlockTitle>{_t.textAlign}</BlockTitle>
<List>
<ListItem className='buttons'>
<Row>
<ListItem className='buttons'>
<div className="row">
<a className={'button' + (align === Asc.c_oAscAlignH.Left ? ' active' : '')}
onClick={() => {
props.onAlign(Asc.c_oAscAlignH.Left)
@ -410,7 +411,7 @@ const PageWrap = props => {
}}>
<Icon slot="media" icon="icon-block-align-right"></Icon>
</a>
</Row>
</div>
</ListItem>
</List>
</Fragment>

6
apps/documenteditor/mobile/src/view/edit/EditImage.jsx
View File

@ -1,6 +1,6 @@
import React, {Fragment, useState} from 'react';
import {observer, inject} from "mobx-react";
import {List, ListItem, ListInput, ListButton, Icon, Row, Page, Navbar, NavRight, BlockTitle, Toggle, Range, Link} from 'framework7-react';
import {List, ListItem, ListInput, ListButton, Icon, Page, Navbar, NavRight, BlockTitle, Toggle, Range, Link} from 'framework7-react';
import { useTranslation } from 'react-i18next';
import {f7} from 'framework7-react';
import {Device} from '../../../../../common/mobile/utils/device';
@ -81,7 +81,7 @@ const PageWrap = props => {
<BlockTitle>{_t.textAlign}</BlockTitle>
<List>
<ListItem className='buttons'>
<Row>
<div className="row">
<a className={'button' + (align === Asc.c_oAscAlignH.Left ? ' active' : '')}
onClick={() => {
props.onAlign(Asc.c_oAscAlignH.Left)
@ -100,7 +100,7 @@ const PageWrap = props => {
}}>
<Icon slot="media" icon="icon-text-align-right"></Icon>
</a>
</Row>
</div>
</ListItem>
</List>
</Fragment>

6
apps/documenteditor/mobile/src/view/edit/EditShape.jsx
View File

@ -1,6 +1,6 @@
import React, {Fragment, useState} from 'react';
import {observer, inject} from "mobx-react";
import {List, ListItem, Icon, Row, Page, Navbar, NavRight, BlockTitle, Toggle, Range, ListButton, Link, Tabs, Tab} from 'framework7-react';
import {List, ListItem, Icon, Page, Navbar, NavRight, BlockTitle, Toggle, Range, ListButton, Link, Tabs, Tab} from 'framework7-react';
import { f7 } from 'framework7-react';
import { useTranslation } from 'react-i18next';
import {Device} from '../../../../../common/mobile/utils/device';
@ -386,7 +386,7 @@ const PageWrap = props => {
<BlockTitle>{_t.textAlign}</BlockTitle>
<List>
<ListItem className='buttons'>
<Row>
<div className="row">
<a className={'button' + (align === Asc.c_oAscAlignH.Left ? ' active' : '')}
onClick={() => {
props.onShapeAlign(Asc.c_oAscAlignH.Left)
@ -405,7 +405,7 @@ const PageWrap = props => {
}}>
<Icon slot="media" icon="icon-text-align-right"></Icon>
</a>
</Row>
</div>
</ListItem>
</List>
</Fragment>

22
apps/documenteditor/mobile/src/view/edit/EditTable.jsx
View File

@ -1,6 +1,6 @@
import React, {Fragment, useState, useEffect} from 'react';
import {observer, inject} from "mobx-react";
import {Page, Navbar, NavRight, List, ListItem, ListButton, Row, BlockTitle, SkeletonBlock, Range, Toggle, Icon, Link, Tabs, Tab} from 'framework7-react';
import {Page, Navbar, NavRight, List, ListItem, ListButton, BlockTitle, SkeletonBlock, Range, Toggle, Icon, Link, Tabs, Tab} from 'framework7-react';
import { f7 } from 'framework7-react';
import { useTranslation } from 'react-i18next';
import {Device} from '../../../../../common/mobile/utils/device';
@ -124,7 +124,7 @@ const PageWrap = props => {
<BlockTitle>{_t.textAlign}</BlockTitle>
<List>
<ListItem className='buttons'>
<Row>
<div className="row">
<a className={'button' + (align === c_tableAlign.TABLE_ALIGN_LEFT ? ' active' : '')}
onClick={() => {
props.onWrapAlign(c_tableAlign.TABLE_ALIGN_LEFT)
@ -143,7 +143,7 @@ const PageWrap = props => {
}}>
<Icon slot="media" icon="icon-block-align-right"></Icon>
</a>
</Row>
</div>
</ListItem>
</List>
</Fragment>
@ -445,7 +445,7 @@ const TabBorder = inject("storeFocusObjects", "storeTableSettings")(observer(pro
></span>
</ListItem>
<ListItem className='buttons table-presets'>
<Row>
<div className="row">
<a className={'item-link button'} onClick={() => {onBorderType("lrtbcm")}}>
<Icon slot="media" icon="icon-table-borders-all"></Icon>
</a>
@ -461,10 +461,10 @@ const TabBorder = inject("storeFocusObjects", "storeTableSettings")(observer(pro
<a className={'item-link button'} onClick={() => {onBorderType("l")}}>
<Icon slot="media" icon="icon icon-table-borders-left"></Icon>
</a>
</Row>
</div>
</ListItem>
<ListItem className='buttons table-presets'>
<Row>
<div className="row">
<a className={'item-link button'} onClick={() => {onBorderType("c")}}>
<Icon slot="media" icon="icon-table-borders-center"></Icon>
</a>
@ -480,7 +480,7 @@ const TabBorder = inject("storeFocusObjects", "storeTableSettings")(observer(pro
<a className={'item-link button'} onClick={() => {onBorderType("b")}}>
<Icon slot="media" icon="icon-table-borders-bottom"></Icon>
</a>
</Row>
</div>
</ListItem>
</List>
)
@ -548,7 +548,7 @@ const EditTable = props => {
<Fragment>
<List>
<ListItem className='buttons'>
<Row>
<div className="row">
<a className={'item-link button'} onClick={() => {props.onAddColumnLeft()}}>
<Icon slot="media" icon="icon-table-add-column-left"></Icon>
</a>
@ -561,17 +561,17 @@ const EditTable = props => {
<a className={'item-link button'} onClick={() => {props.onAddRowBelow()}}>
<Icon slot="media" icon="icon-table-add-row-below"></Icon>
</a>
</Row>
</div>
</ListItem>
<ListItem className='buttons'>
<Row>
<div className="row">
<a className={'item-link button'} onClick={() => {props.onRemoveColumn()}}>
<Icon slot="media" icon="icon-table-remove-column"></Icon>
</a>
<a className={'item-link button'} onClick={() => {props.onRemoveRow()}}>
<Icon slot="media" icon="icon icon-table-remove-row"></Icon>
</a>
</Row>
</div>
</ListItem>
<List className="buttons-list">
<ListButton title={_t.textRemoveTable} onClick={() => {props.onRemoveTable()}} className='button-red button-fill button-raised'></ListButton>

54
apps/documenteditor/mobile/src/view/edit/EditText.jsx
View File

@ -1,6 +1,6 @@
import React, {Fragment, useEffect, useState } from 'react';
import {observer, inject} from "mobx-react";
import {f7, View, List, ListItem, Icon, Row, Button, Page, Navbar, NavRight, Segmented, BlockTitle, Link} from 'framework7-react';
import { f7, View, List, ListItem, Icon, Button, Page, Navbar, NavRight, Segmented, BlockTitle, 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';
@ -224,14 +224,14 @@ const PageNumbers = observer( props => {
return (
<View className='numbers dataview'>
<List className="row" style={{listStyle: 'none'}}>
{numberArrays.map( number => (
<ListItem key={'number-' + number.subtype} data-type={number.subtype} className={(number.subtype === typeNumbers) ? 'active' : ''}
onClick={() => {
props.onNumber(number.numberingInfo);
}}>
<div id={number.id} className='item-number'></div>
</ListItem>
))}
{numberArrays.map( number => (
<ListItem key={'number-' + number.subtype} data-type={number.subtype} className={(number.subtype === typeNumbers) ? 'active' : ''}
onClick={() => {
props.onNumber(number.numberingInfo);
}}>
<div id={number.id} className='item-number'></div>
</ListItem>
))}
</List>
</View>
);
@ -249,19 +249,19 @@ const PageMultiLevel = observer( props => {
return(
<View className='multilevels dataview'>
<List className="row" style={{listStyle: 'none'}}>
{arrayMultiLevel.map((item) => (
<ListItem
key={'multi-level-' + item.subtype}
data-type={item.subtype}
className={item.subtype === typeMultiLevel ? 'active' : ''}
onClick={() => props.onMultiLevelList(item.numberingInfo)}>
<div id={item.id} className='item-multilevellist'>
<List className="row" style={{listStyle: 'none'}}>
{arrayMultiLevel.map((item) => (
<ListItem
key={'multi-level-' + item.subtype}
data-type={item.subtype}
className={item.subtype === typeMultiLevel ? 'active' : ''}
onClick={() => props.onMultiLevelList(item.numberingInfo)}>
<div id={item.id} className='item-multilevellist'>
</div>
</ListItem>
))}
</List>
</div>
</ListItem>
))}
</List>
</View>
)
@ -531,12 +531,12 @@ const EditText = props => {
changeFontFamily: props.changeFontFamily
}}/>
<ListItem className='buttons'>
<Row>
<div className='row'>
<a className={'button' + (isBold ? ' active' : '')} onClick={() => { props.toggleBold(!isBold)}}><b>B</b></a>
<a className={'button' + (isItalic ? ' active' : '')} onClick={() => {props.toggleItalic(!isItalic)}}><i>I</i></a>
<a className={'button' + (isUnderline ? ' active' : '')} onClick={() => {props.toggleUnderline(!isUnderline)}} style={{textDecoration: "underline"}}>U</a>
<a className={'button' + (isStrikethrough ? ' active' : '')} onClick={() => {props.toggleStrikethrough(!isStrikethrough)}} style={{textDecoration: "line-through"}}>S</a>
</Row>
</div>
</ListItem>
<ListItem title={t("Edit.textFontColor")} link="/edit-text-font-color/" routeProps={{
onTextColorAuto: props.onTextColorAuto,
@ -565,7 +565,7 @@ const EditText = props => {
</List>
<List>
<ListItem className='buttons'>
<Row>
<div className="row">
<a className={'button' + (paragraphAlign === 'left' ? ' active' : '')} onClick={() => {props.onParagraphAlign('left')}}>
<Icon slot="media" icon="icon-text-align-left"></Icon>
</a>
@ -578,11 +578,11 @@ const EditText = props => {
<a className={'button' + (paragraphAlign === 'just' ? ' active' : '')} onClick={() => {props.onParagraphAlign('just')}}>
<Icon slot="media" icon="icon-text-align-just"></Icon>
</a>
</Row>
</div>
</ListItem>
{!inSmartArtInternal &&
<ListItem className='buttons'>
<Row>
<div className="row">
<a className='button item-link' onClick={() => {
props.onParagraphMove(true)
}}>
@ -593,7 +593,7 @@ const EditText = props => {
}}>
<Icon slot="media" icon="icon-in-indent"></Icon>
</a>
</Row>
</div>
</ListItem>
}
{!inSmartArt && !inSmartArtInternal &&

150
apps/documenteditor/mobile/src/view/edit/EditingPage.jsx Normal file
View File

@ -0,0 +1,150 @@
import React, { useState, useEffect } from 'react';
import { observer, inject } from "mobx-react";
import { Page, Navbar, NavRight, NavTitle, Tabs, Tab, Link } from 'framework7-react';
import { useTranslation } from 'react-i18next';
import { Device } from '../../../../../common/mobile/utils/device';
import EditTextController from "../../controller/edit/EditText";
import EditParagraphController from "../../controller/edit/EditParagraph";
import EditShapeController from "../../controller/edit/EditShape";
import EditImageController from "../../controller/edit/EditImage";
import EditTableController from "../../controller/edit/EditTable";
import EditChartController from "../../controller/edit/EditChart";
import EditHeaderController from "../../controller/edit/EditHeader";
import EditTableContentsController from "../../controller/edit/EditTableContents";
const EmptyEditLayout = () => {
const { t } = useTranslation();
const _t = t('Edit', {returnObjects: true});
return (
<Page>
<div className="content-block inset">
<div className="content-block-inner">
<p>{_t.textSelectObjectToEdit}</p>
</div>
</div>
</Page>
)
};
const EditLayoutNavbar = ({ editors }) => {
const isAndroid = Device.android;
const { t } = useTranslation();
const _t = t('Edit', {returnObjects: true});
return (
<Navbar>
{editors.length > 1 ?
<div className='tab-buttons tabbar'>
{editors.map((item, index) => <Link key={"de-link-" + item.id} tabLink={"#" + item.id} tabLinkActive={index === 0}>{item.caption}</Link>)}
{isAndroid && <span className='tab-link-highlight' style={{width: 100 / editors.length + '%'}}></span>}
</div> :
<NavTitle>{editors[0].caption}</NavTitle>
}
{Device.phone && <NavRight><Link icon='icon-expand-down' sheetClose></Link></NavRight>}
</Navbar>
)
};
const EditLayoutContent = ({ editors }) => {
if (editors.length > 1) {
return (
<Tabs animated>
{editors.map((item, index) =>
<Tab key={"de-tab-" + item.id} id={item.id} className="page-content" tabActive={index === 0}>
{item.component}
</Tab>
)}
</Tabs>
)
} else {
return (
<Page>
{editors[0].component}
</Page>
)
}
};
const EditingPage = inject('storeFocusObjects')(observer(props => {
const { t } = useTranslation();
const _t = t('Edit', {returnObjects: true});
const api = Common.EditorApi.get();
const inToc = api.asc_GetTableOfContentsPr(true);
const settings = props.storeFocusObjects.settings;
const headerType = props.storeFocusObjects.headerType;
let editors = [];
if (settings.length < 1) {
editors.push({
caption: _t.textSettings,
component: <EmptyEditLayout />
});
} else {
if(inToc) {
editors.push({
caption: _t.textTableOfCont,
id: 'edit-table-contents',
component: <EditTableContentsController />
})
}
if (settings.indexOf('image') > -1) {
editors.push({
caption: _t.textImage,
id: 'edit-image',
component: <EditImageController />
})
}
if (settings.indexOf('shape') > -1) {
editors.push({
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) {
editors.push({
caption: _t.textTable,
id: 'edit-table',
component: <EditTableController />
})
}
if (settings.indexOf('header') > -1) {
editors.push({
caption: headerType === 2 ? _t.textFooter : _t.textHeader,
id: 'edit-header',
component: <EditHeaderController />
})
}
if (settings.indexOf('text') > -1) {
editors.push({
caption: _t.textText,
id: 'edit-text',
component: <EditTextController />
})
}
if (settings.indexOf('paragraph') > -1) {
editors.push({
caption: _t.textParagraph,
id: 'edit-paragraph',
component: <EditParagraphController />
})
}
}
return (
<Page pageContent={false}>
<EditLayoutNavbar editors={editors} />
<EditLayoutContent editors={editors} />
</Page>
)
}));
export default EditingPage;

8
apps/documenteditor/mobile/src/view/settings/Navigation.jsx
View File

@ -1,8 +1,9 @@
import React, { useState, useEffect } from "react";
import React, { useState, useEffect, useContext } from "react";
import { Device } from '../../../../../common/mobile/utils/device';
import {f7, View, List, ListItem, Icon, Row, Button, Page, Navbar, NavRight, Segmented, BlockTitle, Link, ListButton, Toggle, Actions, ActionsButton, ActionsGroup, Sheet} from 'framework7-react';
import {f7, List, ListItem, Icon, Page, Navbar, Sheet} from 'framework7-react';
import { useTranslation } from 'react-i18next';
import { inject, observer } from "mobx-react";
import { MainContext } from "../../page/main";
const NavigationPopover = inject('storeNavigation')(observer(props => {
const { t } = useTranslation();
@ -46,6 +47,7 @@ const NavigationPopover = inject('storeNavigation')(observer(props => {
const NavigationSheet = inject('storeNavigation')(observer(props => {
const { t } = useTranslation();
const mainContext = useContext(MainContext);
const api = Common.EditorApi.get();
const storeNavigation = props.storeNavigation;
const bookmarks = storeNavigation.bookmarks;
@ -105,7 +107,7 @@ const NavigationSheet = inject('storeNavigation')(observer(props => {
}, []);
return (
<Sheet id="view-navigation-sheet" className="navigation-sheet" backdrop={true} closeByBackdropClick={true} onSheetClosed={() => props.onclosed()} style={{height: `${stateHeight}`, opacity: `${stateOpacity}`}}>
<Sheet id="view-navigation-sheet" className="navigation-sheet" backdrop={true} closeByBackdropClick={true} onSheetClosed={() => mainContext.closeOptions('navigation')} style={{height: `${stateHeight}`, opacity: `${stateOpacity}`}}>
<div id='swipe-handler' className='swipe-container' onTouchStart={handleTouchStart} onTouchMove={handleTouchMove} onTouchEnd={handleTouchEnd}>
<Icon icon='icon icon-swipe'/>
</div>

238
apps/documenteditor/mobile/src/view/settings/Settings.jsx
View File

@ -1,9 +1,6 @@
import React, {Component, useEffect} from 'react';
import {View, Page, Navbar, NavRight, Link, Popup, Popover, Icon,ListItem, List, Toggle} from 'framework7-react';
import { useTranslation } from 'react-i18next';
import {f7} from 'framework7-react';
import { observer, inject } from "mobx-react";
import {Device} from '../../../../../common/mobile/utils/device';
import React, { useContext, useEffect } from 'react';
import { f7, View, Popup, Popover } from 'framework7-react';
import { Device } from '../../../../../common/mobile/utils/device';
import DocumentSettingsController from "../../controller/settings/DocumentSettings";
import DocumentInfoController from "../../controller/settings/DocumentInfo";
import { DownloadController } from "../../controller/settings/Download";
@ -16,12 +13,15 @@ import SharingSettings from "../../../../../common/mobile/lib/view/SharingSettin
import ProtectionDocumentController from '../../controller/settings/DocumentProtection';
import ProtectionController from '../../controller/settings/Protection';
import FileEncryptionController from '../../controller/settings/FileEncryption';
import SettingsPage from './SettingsPage';
import { MainContext } from '../../page/main';
import VersionHistoryController from '../../../../../common/mobile/lib/controller/VersionHistory';
const routes = [
{
path: '/',
component: 'TSettingsView'
path: '/settings/',
component: SettingsPage,
keepAlive: true,
},
{
path: '/document-settings/',
@ -63,7 +63,7 @@ const routes = [
// Navigation
{
path: '/navigation/',
path: '/navigation',
component: NavigationController
},
@ -107,207 +107,37 @@ const routes = [
},
];
const SettingsList = inject("storeAppOptions", "storeReview", "storeDocumentInfo", "storeVersionHistory")(observer(props => {
const { t } = useTranslation();
const _t = t('Settings', {returnObjects: true});
const appOptions = props.storeAppOptions;
const storeVersionHistory = props.storeVersionHistory;
const isVersionHistoryMode = storeVersionHistory.isVersionHistoryMode;
const canProtect = appOptions.canProtect;
const storeReview = props.storeReview;
const displayMode = storeReview.displayMode;
const docInfo = props.storeDocumentInfo;
const docTitle = docInfo.dataDoc.title;
const docExt = docInfo.dataDoc ? docInfo.dataDoc.fileType : '';
const isNotForm = docExt && docExt !== 'oform';
const navbar =
<Navbar>
<div className="title" onClick={props.changeTitleHandler}>{docTitle}</div>
{!props.inPopover && <NavRight><Link popupClose=".settings-popup">{_t.textDone}</Link></NavRight>}
</Navbar>;
const onoptionclick = page => {
if(props.onOptionClick)
props.onOptionClick(page)
routes.forEach(route => {
route.options = {
...route.options,
transition: 'f7-push'
};
});
const closeModal = () => {
if (Device.phone) {
f7.sheet.close('.settings-popup', false);
const SettingsView = () => {
const mainContext = useContext(MainContext);
useEffect(() => {
if(Device.phone) {
f7.popup.open('.settings-popup');
} else {
f7.popover.close('#settings-popover', false);
f7.popover.open('#settings-popover', '#btn-settings');
}
};
const onOpenOptions = keyword => {
closeModal();
props.openOptions(keyword);
}
// set mode
const isViewer = appOptions.isViewer;
const isMobileView = appOptions.isMobileView;
let _isEdit = false,
_canDownload = false,
_canDownloadOrigin = false,
_canAbout = true,
_canHelp = true,
_canPrint = false,
_canFeedback = true;
if (appOptions.isDisconnected) {
_isEdit = false;
if (!appOptions.enableDownload)
_canPrint = _canDownload = _canDownloadOrigin = false;
} else {
_isEdit = appOptions.isEdit;
_canDownload = appOptions.canDownload;
_canDownloadOrigin = appOptions.canDownloadOrigin;
_canPrint = appOptions.canPrint;
if (appOptions.customization && appOptions.canBrandingExt) {
_canAbout = appOptions.customization.about !== false;
}
if (appOptions.customization) {
_canHelp = appOptions.customization.help !== false;
_canFeedback = appOptions.customization.feedback !== false;
}
}
}, []);
return (
<View style={props.style} stackPages={true} routes={routes}>
<Page>
{navbar}
<List>
{!props.inPopover &&
<ListItem title={!_isEdit || isViewer || isVersionHistoryMode ? _t.textFind : _t.textFindAndReplace} link='#' searchbarEnable='.searchbar' onClick={closeModal} className='no-indicator'>
<Icon slot="media" icon="icon-search"></Icon>
</ListItem>
}
{(_isEdit && canProtect && !isVersionHistoryMode) &&
<ListItem title={t('Settings.textProtection')} link="#" onClick={onoptionclick.bind(this, '/protection')}>
<Icon slot="media" icon="icon-protection"></Icon>
</ListItem>
}
{_isEdit &&
<ListItem title={t('Settings.textVersionHistory')} link="#" onClick={() => {
if(Device.phone) {
onOpenOptions('history');
} else {
onoptionclick.bind(this, "/version-history")();
}
}}>
<Icon slot="media" icon="icon-version-history"></Icon>
</ListItem>
}
{!isVersionHistoryMode ?
<ListItem title={t('Settings.textNavigation')} link='#' onClick={() => {
if(Device.phone) {
onOpenOptions('navigation');
} else {
onoptionclick.bind(this, "/navigation/")();
}}}>
<Icon slot="media" icon="icon-navigation"></Icon>
</ListItem>
: null}
{window.matchMedia("(max-width: 359px)").matches && !isVersionHistoryMode ?
<ListItem title={_t.textCollaboration} link="#" onClick={() => onOpenOptions('coauth')} className='no-indicator'>
<Icon slot="media" icon="icon-collaboration"></Icon>
</ListItem>
: null}
{Device.sailfish && _isEdit &&
<ListItem title={_t.textSpellcheck} onClick={() => {props.onOrthographyCheck()}} className='no-indicator' link="#">
<Icon slot="media" icon="icon-spellcheck"></Icon>
</ListItem>
}
{(!isViewer && Device.phone && !isVersionHistoryMode) &&
<ListItem title={t('Settings.textMobileView')}>
<Icon slot="media" icon="icon-mobile-view"></Icon>
<Toggle checked={isMobileView} onToggleChange={() => {
closeModal();
props.onChangeMobileView();
props.openOptions('snackbar');
}} />
</ListItem>
}
{(_isEdit && !isViewer) &&
<ListItem link="#" title={_t.textDocumentSettings} disabled={displayMode !== 'markup'}
onClick={onoptionclick.bind(this, '/document-settings/')}>
<Icon slot="media" icon="icon-doc-setup"></Icon>
</ListItem>
}
{isNotForm &&
<ListItem title={_t.textApplicationSettings} link="#"
onClick={onoptionclick.bind(this, "/application-settings/")}>
<Icon slot="media" icon="icon-app-settings"></Icon>
</ListItem>
}
{_canDownload &&
<ListItem title={_t.textDownload} link="#" onClick={onoptionclick.bind(this, "/download/")}>
<Icon slot="media" icon="icon-download"></Icon>
</ListItem>
}
{_canDownloadOrigin &&
<ListItem title={_t.textDownload} link="#" onClick={props.onDownloadOrigin} className='no-indicator'>
<Icon slot="media" icon="icon-download"></Icon>
</ListItem>
}
{_canPrint &&
<ListItem title={_t.textPrint} onClick={props.onPrint} link='#' className='no-indicator'>
<Icon slot="media" icon="icon-print"></Icon>
</ListItem>
}
<ListItem title={_t.textDocumentInfo} link="#" onClick={onoptionclick.bind(this, "/document-info/")}>
<Icon slot="media" icon="icon-info"></Icon>
</ListItem>
{_canHelp &&
<ListItem title={_t.textHelp} link="#" className='no-indicator' onClick={props.showHelp}>
<Icon slot="media" icon="icon-help"></Icon>
</ListItem>
}
{(_canAbout && isNotForm) &&
<ListItem title={_t.textAbout} link="#" onClick={onoptionclick.bind(this, "/about/")}>
<Icon slot="media" icon="icon-about"></Icon>
</ListItem>
}
{_canFeedback &&
<ListItem title={t('Settings.textFeedback')} link="#" className='no-indicator' onClick={props.showFeedback}>
<Icon slot="media" icon="icon-feedback"></Icon>
</ListItem>
}
</List>
</Page>
</View>
!Device.phone ?
<Popover id="settings-popover" closeByOutsideClick={false} className="popover__titled" onPopoverClosed={() => mainContext.closeOptions('settings')}>
<View style={{ height: '410px' }} routes={routes} url='/settings/'>
<SettingsPage />
</View>
</Popover> :
<Popup className="settings-popup" onPopupClosed={() => mainContext.closeOptions('settings')}>
<View routes={routes} url='/settings/'>
<SettingsPage />
</View>
</Popup>
)
}));
class SettingsView extends Component {
constructor(props) {
super(props)
this.onoptionclick = this.onoptionclick.bind(this);
}
onoptionclick(page){
f7.views.current.router.navigate(page);
}
render() {
const show_popover = this.props.usePopover;
return (
show_popover ?
<Popover id="settings-popover" closeByOutsideClick={false} className="popover__titled" onPopoverClosed={() => this.props.closeOptions('settings')}>
<SettingsList inPopover={true} onOptionClick={this.onoptionclick} closeOptions={this.props.closeOptions} openOptions={this.props.openOptions} style={{height: '410px'}} onChangeMobileView={this.props.onChangeMobileView} onPrint={this.props.onPrint} showHelp={this.props.showHelp} showFeedback={this.props.showFeedback} onOrthographyCheck={this.props.onOrthographyCheck} onDownloadOrigin={this.props.onDownloadOrigin} changeTitleHandler={this.props.changeTitleHandler} />
</Popover> :
<Popup className="settings-popup" onPopupClosed={() => this.props.closeOptions('settings')}>
<SettingsList onOptionClick={this.onoptionclick} closeOptions={this.props.closeOptions} openOptions={this.props.openOptions} onChangeMobileView={this.props.onChangeMobileView} onPrint={this.props.onPrint} showHelp={this.props.showHelp} showFeedback={this.props.showFeedback} onOrthographyCheck={this.props.onOrthographyCheck} onDownloadOrigin={this.props.onDownloadOrigin} changeTitleHandler={this.props.changeTitleHandler} />
</Popup>
)
}
}
};
export default SettingsView;

164
apps/documenteditor/mobile/src/view/settings/SettingsPage.jsx Normal file
View File

@ -0,0 +1,164 @@
import React, { useContext } from 'react';
import { Page, Navbar, NavRight, Link, Icon, ListItem, List, Toggle } from 'framework7-react';
import { Device } from "../../../../../common/mobile/utils/device";
import { observer, inject } from "mobx-react";
import { useTranslation } from 'react-i18next';
import { SettingsContext } from '../../controller/settings/Settings';
import { MainContext } from '../../page/main';
const SettingsPage = inject("storeAppOptions", "storeReview", "storeDocumentInfo")(observer(props => {
const { t } = useTranslation();
const _t = t('Settings', {returnObjects: true});
const settingsContext = useContext(SettingsContext);
const mainContext = useContext(MainContext);
const appOptions = props.storeAppOptions;
const canProtect = appOptions.canProtect;
const storeReview = props.storeReview;
const displayMode = storeReview.displayMode;
const docInfo = props.storeDocumentInfo;
const docTitle = docInfo.dataDoc.title;
const docExt = docInfo.dataDoc ? docInfo.dataDoc.fileType : '';
const isNotForm = docExt && docExt !== 'oform';
const navbar =
<Navbar>
<div className="title" onClick={settingsContext.changeTitleHandler}>{docTitle}</div>
{Device.phone && <NavRight><Link popupClose=".settings-popup">{_t.textDone}</Link></NavRight>}
</Navbar>;
const onOpenOptions = name => {
settingsContext.closeModal();
mainContext.openOptions(name);
}
// set mode
const isViewer = appOptions.isViewer;
const isMobileView = appOptions.isMobileView;
let _isEdit = false,
_canDownload = false,
_canDownloadOrigin = false,
_canAbout = true,
_canHelp = true,
_canPrint = false,
_canFeedback = true;
if (appOptions.isDisconnected) {
_isEdit = false;
if (!appOptions.enableDownload)
_canPrint = _canDownload = _canDownloadOrigin = false;
} else {
_isEdit = appOptions.isEdit;
_canDownload = appOptions.canDownload;
_canDownloadOrigin = appOptions.canDownloadOrigin;
_canPrint = appOptions.canPrint;
if (appOptions.customization && appOptions.canBrandingExt) {
_canAbout = appOptions.customization.about !== false;
}
if (appOptions.customization) {
_canHelp = appOptions.customization.help !== false;
_canFeedback = appOptions.customization.feedback !== false;
}
}
return (
<Page>
{navbar}
<List>
{Device.phone &&
<ListItem title={!_isEdit || isViewer ? _t.textFind : _t.textFindAndReplace} link='#' searchbarEnable='.searchbar' onClick={settingsContext.closeModal} className='no-indicator'>
<Icon slot="media" icon="icon-search"></Icon>
</ListItem>
}
{(_isEdit && canProtect) &&
<ListItem title={t('Settings.textProtection')} link="/protection">
<Icon slot="media" icon="icon-protection" />
</ListItem>
}
{_isEdit &&
<ListItem title={t('Settings.textVersionHistory')} link="/version-history" onClick={() => {
if(Device.phone) {
onOpenOptions('history');
}
}}>
<Icon slot="media" icon="icon-version-history"></Icon>
</ListItem>
}
<ListItem title={t('Settings.textNavigation')} link={!Device.phone ? '/navigation' : '#'} onClick={() => {
if(Device.phone) {
onOpenOptions('navigation');
}
}}>
<Icon slot="media" icon="icon-navigation"></Icon>
</ListItem>
{window.matchMedia("(max-width: 359px)").matches ?
<ListItem title={_t.textCollaboration} link="#" onClick={() => {
onOpenOptions('coauth');
}} className='no-indicator'>
<Icon slot="media" icon="icon-collaboration"></Icon>
</ListItem>
: null}
{Device.sailfish && _isEdit &&
<ListItem title={_t.textSpellcheck} onClick={() => {settingsContext.onOrthographyCheck()}} className='no-indicator' link="#">
<Icon slot="media" icon="icon-spellcheck"></Icon>
</ListItem>
}
{!isViewer && Device.phone &&
<ListItem title={t('Settings.textMobileView')}>
<Icon slot="media" icon="icon-mobile-view"></Icon>
<Toggle checked={isMobileView} onToggleChange={() => {
settingsContext.onChangeMobileView();
onOpenOptions('snackbar');
}} />
</ListItem>
}
{(_isEdit && !isViewer) &&
<ListItem title={_t.textDocumentSettings} disabled={displayMode !== 'markup'} link='/document-settings/'>
<Icon slot="media" icon="icon-doc-setup"></Icon>
</ListItem>
}
{isNotForm &&
<ListItem title={_t.textApplicationSettings} link="/application-settings/">
<Icon slot="media" icon="icon-app-settings"></Icon>
</ListItem>
}
{_canDownload &&
<ListItem title={_t.textDownload} link="/download/">
<Icon slot="media" icon="icon-download"></Icon>
</ListItem>
}
{_canDownloadOrigin &&
<ListItem title={_t.textDownload} link="#" onClick={settingsContext.onDownloadOrigin} className='no-indicator'>
<Icon slot="media" icon="icon-download"></Icon>
</ListItem>
}
{_canPrint &&
<ListItem title={_t.textPrint} onClick={settingsContext.onPrint} link='#' className='no-indicator'>
<Icon slot="media" icon="icon-print"></Icon>
</ListItem>
}
<ListItem title={_t.textDocumentInfo} link="/document-info/">
<Icon slot="media" icon="icon-info"></Icon>
</ListItem>
{_canHelp &&
<ListItem title={_t.textHelp} link="#" className='no-indicator' onClick={settingsContext.showHelp}>
<Icon slot="media" icon="icon-help"></Icon>
</ListItem>
}
{(_canAbout && isNotForm) &&
<ListItem title={_t.textAbout} link="/about/">
<Icon slot="media" icon="icon-about"></Icon>
</ListItem>
}
{_canFeedback &&
<ListItem title={t('Settings.textFeedback')} link="#" className='no-indicator' onClick={settingsContext.showFeedback}>
<Icon slot="media" icon="icon-feedback"></Icon>
</ListItem>
}
</List>
</Page>
)
}));
export default SettingsPage;

2
apps/presentationeditor/mobile/src/controller/Preview.jsx
View File

@ -86,7 +86,7 @@ const PreviewController = props => {
// API Handlers
const onEndDemonstration = () => {
props.onclosed();
props.closeOptions('preview');
};
return (

4
apps/presentationeditor/mobile/src/controller/add/AddLink.jsx
View File

@ -138,13 +138,13 @@ class AddLinkController extends Component {
return (
!this.props.isNavigate ?
Device.phone ?
<Popup id="add-link-popup" onPopupClosed={() => this.props.onClosed('add-link')}>
<Popup id="add-link-popup" onPopupClosed={() => this.props.closeOptions('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')}>
<Popover id="add-link-popover" className="popover__titled" closeByOutsideClick={false} onPopoverClosed={() => this.props.closeOptions('add-link')}>
<View routes={routes} style={{height: '410px'}}>
<PageLink closeModal={this.closeModal} onInsertLink={this.onInsertLink} getTextDisplay={this.getTextDisplay} isNavigate={this.props.isNavigate}/>
</View>

4
apps/presentationeditor/mobile/src/controller/edit/EditLink.jsx
View File

@ -188,7 +188,7 @@ class EditLinkController extends Component {
return (
!this.props.isNavigate ?
Device.phone ?
<Popup id="edit-link-popup" onPopupClosed={() => this.props.onClosed('edit-link')}>
<Popup id="edit-link-popup" onPopupClosed={() => this.props.closeOptions('edit-link')}>
<View routes={routes} style={{height: '100%'}}>
<EditLink
initLink={this.initLink}
@ -207,7 +207,7 @@ class EditLinkController extends Component {
</View>
</Popup>
:
<Popover id="edit-link-popover" className="popover__titled" closeByOutsideClick={false} onPopoverClosed={() => this.props.onClosed('edit-link')}>
<Popover id="edit-link-popover" className="popover__titled" closeByOutsideClick={false} onPopoverClosed={() => this.props.closeOptions('edit-link')}>
<View routes={routes} style={{height: '410px'}}>
<EditLink
initLink={this.initLink}

75
apps/presentationeditor/mobile/src/controller/settings/Settings.jsx Normal file
View File

@ -0,0 +1,75 @@
import React, { createContext } from 'react';
import { Device } from '../../../../../common/mobile/utils/device';
import SettingsView from '../../view/settings/Settings';
import { f7 } from 'framework7-react';
export const SettingsContext = createContext();
const SettingsController = () => {
const closeModal = () => {
if (Device.phone) {
f7.sheet.close('.settings-popup', false);
} else {
f7.popover.close('#settings-popover', false);
}
};
const onPrint = () => {
const api = Common.EditorApi.get();
closeModal();
setTimeout(() => {
api.asc_Print();
}, 400);
};
const showHelp = () => {
// let url = '{{HELP_URL}}';
let url = __HELP_URL__;
// let url = 'https://helpcenter.onlyoffice.com';
if (url.charAt(url.length-1) !== '/') {
url += '/';
}
if (Device.sailfish || Device.android) {
url+='mobile-applications/documents/mobile-web-editors/android/index.aspx';
}
else {
url+='mobile-applications/documents/mobile-web-editors/ios/index.aspx';
}
closeModal();
window.open(url, "_blank");
};
const showFeedback = () => {
let config = props.storeAppOptions.config;
closeModal();
if(config && !!config.feedback && !!config.feedback.url) {
window.open(config.feedback.url, "_blank");
} else window.open(__SUPPORT_URL__, "_blank");
};
const onDownloadOrigin = () => {
closeModal();
setTimeout(() => {
Common.EditorApi.get().asc_DownloadOrigin();
}, 0);
};
return (
<SettingsContext.Provider value={{
onPrint,
showHelp,
showFeedback,
onDownloadOrigin,
closeModal
}}>
<SettingsView />
</SettingsContext.Provider>
);
};
export default SettingsController;

93
apps/presentationeditor/mobile/src/page/main.jsx
View File

@ -1,20 +1,21 @@
import React, { Component, Fragment } from 'react';
import { f7, Page, View, Navbar, Subnavbar, Icon, Link} from 'framework7-react';
import React, { Component, createContext } from 'react';
import { f7, Page, View, Navbar, Subnavbar, Icon } from 'framework7-react';
import { observer, inject } from "mobx-react";
import { Device } from '../../../../common/mobile/utils/device';
import EditOptions from '../view/edit/Edit';
import AddOptions from '../view/add/Add';
import Settings from '../view/settings/Settings';
import { Collaboration } from '../../../../common/mobile/lib/view/collaboration/Collaboration.jsx';
import CollaborationView from '../../../../common/mobile/lib/view/collaboration/Collaboration.jsx';
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';
import SettingsController from '../controller/settings/Settings';
import AddView from '../view/add/Add';
import EditView from '../view/edit/Edit';
import VersionHistoryController from '../../../../common/mobile/lib/controller/VersionHistory';
export const MainContext = createContext();
class MainPage extends Component {
constructor(props) {
super(props);
@ -135,18 +136,29 @@ class MainPage extends Component {
}
return (
<Fragment>
{!this.state.previewVisible ? null : <Preview onclosed={this.handleOptionsViewClosed.bind(this, 'preview')} />}
<MainContext.Provider value={{
openOptions: this.handleClickToOpenOptions.bind(this),
closeOptions: this.handleOptionsViewClosed.bind(this),
showPanels: this.state.addShowOptions,
}}>
{!this.state.previewVisible ? null :
<Preview closeOptions={this.handleOptionsViewClosed.bind(this)} />
}
<Page name="home" className={`editor${!isHideLogo ? ' page-with-logo' : ''}`}>
{/* Top Navbar */}
<Navbar id='editor-navbar'
className={`main-navbar${!isHideLogo ? ' navbar-with-logo' : ''}`}>
{!isHideLogo && <div className="main-logo" onClick={() => {
window.open(`${__PUBLISHER_URL__}`, "_blank");
}}><Icon icon="icon-logo"></Icon></div>}
<Navbar id='editor-navbar' className={`main-navbar${!isHideLogo ? ' navbar-with-logo' : ''}`}>
{!isHideLogo &&
<div className="main-logo" onClick={() => {
window.open(`${__PUBLISHER_URL__}`, "_blank");
}}>
<Icon icon="icon-logo"></Icon>
</div>
}
<Subnavbar>
<Toolbar openOptions={this.handleClickToOpenOptions}
closeOptions={this.handleOptionsViewClosed}/>
<Toolbar
openOptions={this.handleClickToOpenOptions}
closeOptions={this.handleOptionsViewClosed}
/>
<Search useSuspense={false}/>
</Subnavbar>
</Navbar>
@ -170,37 +182,34 @@ class MainPage extends Component {
<SearchSettings useSuspense={false} />
{
!this.state.editOptionsVisible ? null :
<EditOptions onclosed={this.handleOptionsViewClosed.bind(this, 'edit')} />
{!this.state.editOptionsVisible ? null : <EditView />}
{!this.state.addOptionsVisible ? null : <AddView />}
{!this.state.addLinkSettingsVisible ? null :
<AddLinkController
closeOptions={this.handleOptionsViewClosed.bind(this)}
/>
}
{
!this.state.addOptionsVisible ? null :
<AddOptions onCloseLinkSettings={this.handleOptionsViewClosed.bind(this)} onclosed={this.handleOptionsViewClosed.bind(this, 'add')} showOptions={this.state.addShowOptions} />
{!this.state.editLinkSettingsVisible ? null :
<EditLinkController
closeOptions={this.handleOptionsViewClosed.bind(this)}
/>
}
{
!this.state.addLinkSettingsVisible ? null :
<AddLinkController onClosed={this.handleOptionsViewClosed.bind(this)} />
{!this.state.settingsVisible ? null : <SettingsController />}
{!this.state.collaborationVisible ? null :
<CollaborationView
closeOptions={this.handleOptionsViewClosed.bind(this)}
/>
}
{
!this.state.editLinkSettingsVisible ? null :
<EditLinkController onClosed={this.handleOptionsViewClosed.bind(this)} />
{!this.state.historyVisible ? null :
<VersionHistoryController onclosed={this.handleOptionsViewClosed.bind(this, 'history')} />
}
{
!this.state.settingsVisible ? null :
<Settings openOptions={this.handleClickToOpenOptions} onclosed={this.handleOptionsViewClosed.bind(this, 'settings')} />
}
{
!this.state.collaborationVisible ? null :
<Collaboration onclosed={this.handleOptionsViewClosed.bind(this, 'coauth')} />
}
{
!this.state.historyVisible ? null :
<VersionHistoryController onclosed={this.handleOptionsViewClosed.bind(this, 'history')} />
}
{appOptions.isDocReady && <ContextMenu openOptions={this.handleClickToOpenOptions.bind(this)} />}
{appOptions.isDocReady &&
<ContextMenu
openOptions={this.handleClickToOpenOptions.bind(this)}
/>
}
</Page>
</Fragment>
</MainContext.Provider>
)
}
}

183
apps/presentationeditor/mobile/src/view/add/Add.jsx
View File

@ -1,22 +1,22 @@
import React, {Component, useEffect} from 'react';
import {View,Page,Navbar,NavRight, NavTitle, Link,Popup,Popover,Icon,Tabs,Tab} from 'framework7-react';
import { useTranslation } from 'react-i18next';
import {f7} from 'framework7-react';
import { observer, inject } from "mobx-react";
import {Device} from '../../../../../common/mobile/utils/device';
import AddSlideController from "../../controller/add/AddSlide";
import AddShapeController from "../../controller/add/AddShape";
import {AddImageController} from "../../controller/add/AddImage";
import {PageImageLinkSettings} from "./AddImage";
import {AddOtherController} from "../../controller/add/AddOther";
import {PageAddTable} from "./AddOther";
import {AddLinkController} from "../../controller/add/AddLink";
import React, { useContext, useEffect } from 'react';
import { View, Popup, Popover, f7 } from 'framework7-react';
import { Device } from '../../../../../common/mobile/utils/device';
import { AddImageController } from "../../controller/add/AddImage";
import { PageImageLinkSettings } from "./AddImage";
import { PageAddTable } from "./AddOther";
import { AddLinkController } from "../../controller/add/AddLink";
import { PageTypeLink, PageLinkTo } from "./AddLink";
import { EditLinkController } from '../../controller/edit/EditLink';
import { PageEditTypeLink, PageEditLinkTo } from '../../view/edit/EditLink';
import AddingPage from './AddingPage';
import { MainContext } from '../../page/main';
const routes = [
{
path: '/adding-page/',
component: AddingPage,
keepAlive: true
},
// Image
{
path: '/add-image-from-url/',
@ -61,138 +61,37 @@ const routes = [
}
];
const AddLayoutNavbar = ({ tabs, inPopover }) => {
const isAndroid = Device.android;
return (
<Navbar>
{tabs.length > 1 ?
<div className='tab-buttons tabbar'>
{tabs.map((item, index) =>
<Link key={"pe-link-" + item.id} tabLink={"#" + item.id} tabLinkActive={index === 0}>
<Icon slot="media" icon={item.icon}></Icon>
</Link>)}
{isAndroid && <span className='tab-link-highlight' style={{width: 100 / tabs.lenght + '%'}}></span>}
</div> :
<NavTitle>{tabs[0].caption}</NavTitle>
}
{ !inPopover && <NavRight><Link icon='icon-expand-down' popupClose=".add-popup"></Link></NavRight> }
</Navbar>
)
};
routes.forEach(route => {
route.options = {
...route.options,
transition: 'f7-push'
};
});
const AddLayoutContent = ({ tabs }) => {
return (
<Tabs animated>
{tabs.map((item, index) =>
<Tab key={"pe-tab-" + item.id} id={item.id} className="page-content" tabActive={index === 0}>
{item.component}
</Tab>
)}
</Tabs>
)
};
const AddView = () => {
const mainContext = useContext(MainContext);
const AddTabs = props => {
const { t } = useTranslation();
const _t = t('View.Add', {returnObjects: true});
const api = Common.EditorApi.get();
const countPages = api.getCountPages();
const showPanels = props.showPanels;
const tabs = [];
if (!showPanels && countPages) {
tabs.push({
caption: _t.textSlide,
id: 'add-slide',
icon: 'icon-add-slide',
component: <AddSlideController />
});
tabs.push({
caption: _t.textShape,
id: 'add-shape',
icon: 'icon-add-shape',
component: <AddShapeController/>
});
// 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 onCloseLinkSettings={props.onCloseLinkSettings} />
});
}
if(!showPanels && !countPages) {
tabs.push({
caption: _t.textSlide,
id: 'add-slide',
icon: 'icon-add-slide',
component: <AddSlideController />
});
}
// if (showPanels && showPanels === 'link') {
// tabs.push({
// caption: _t.textAddLink,
// id: 'add-link',
// component: <AddLinkController noNavbar={true}/>
// });
// }
useEffect(() => {
if(Device.phone) {
f7.popup.open('.add-popup');
} else {
f7.popover.open('#add-popover', '#btn-add');
}
}, []);
return (
<View style={props.style} stackPages={true} routes={routes}>
<Page pageContent={false}>
<AddLayoutNavbar tabs={tabs} inPopover={props.inPopover}/>
<AddLayoutContent tabs={tabs} />
</Page>
</View>
!Device.phone ?
<Popover id="add-popover" className="popover__titled" closeByOutsideClick={false} onPopoverClosed={() => mainContext.closeOptions('add')}>
<View routes={routes} url='/adding-page/' style={{ height: '410px' }}>
<AddingPage />
</View>
</Popover> :
<Popup className="add-popup" onPopupClosed={() => mainContext.closeOptions('add')}>
<View routes={routes} url='/adding-page/'>
<AddingPage />
</View>
</Popup>
)
};
class AddView extends Component {
constructor(props) {
super(props);
this.onoptionclick = this.onoptionclick.bind(this);
}
onoptionclick(page){
f7.views.current.router.navigate(page);
}
render() {
const show_popover = this.props.usePopover;
return (
show_popover ?
<Popover id="add-popover" className="popover__titled" closeByOutsideClick={false} onPopoverClosed={() => this.props.onclosed()}>
<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} onCloseLinkSettings={this.props.onCloseLinkSettings} showPanels={this.props.showPanels} />
</Popup>
)
}
}
const Add = props => {
useEffect(() => {
if ( Device.phone )
f7.popup.open('.add-popup');
else f7.popover.open('#add-popover', '#btn-add');
return () => {
// component will unmount
}
});
const onviewclosed = () => {
if ( props.onclosed ) {
props.onclosed();
}
};
return <AddView usePopover={!Device.phone} onCloseLinkSettings={props.onCloseLinkSettings} onclosed={onviewclosed} showPanels={props.showOptions} />
};
export default Add;
export default AddView;

110
apps/presentationeditor/mobile/src/view/add/AddingPage.jsx Normal file
View File

@ -0,0 +1,110 @@
import React, { useContext, useEffect } from 'react';
import { Page, Navbar, NavRight, NavTitle, Link, Icon, Tabs, Tab, f7 } from 'framework7-react';
import { useTranslation } from 'react-i18next';
import { Device } from '../../../../../common/mobile/utils/device';
import AddSlideController from "../../controller/add/AddSlide";
import AddShapeController from "../../controller/add/AddShape";
import { AddOtherController } from "../../controller/add/AddOther";
import { MainContext } from '../../page/main';
const AddLayoutNavbar = ({ tabs }) => {
const isAndroid = Device.android;
return (
<Navbar>
{tabs.length > 1 ?
<div className='tab-buttons tabbar'>
{tabs.map((item, index) =>
<Link key={"pe-link-" + item.id} tabLink={"#" + item.id} tabLinkActive={index === 0}>
<Icon slot="media" icon={item.icon}></Icon>
</Link>)}
{isAndroid && <span className='tab-link-highlight' style={{width: 100 / tabs.lenght + '%'}}></span>}
</div> :
<NavTitle>{tabs[0].caption}</NavTitle>
}
{Device.phone && <NavRight><Link icon='icon-expand-down' popupClose=".add-popup"></Link></NavRight> }
</Navbar>
)
};
const AddLayoutContent = ({ tabs }) => {
return (
<Tabs animated>
{tabs.map((item, index) =>
<Tab key={"pe-tab-" + item.id} id={item.id} className="page-content" tabActive={index === 0}>
{item.component}
</Tab>
)}
</Tabs>
)
};
const AddingPage = () => {
const { t } = useTranslation();
const _t = t('View.Add', {returnObjects: true});
const api = Common.EditorApi.get();
const countPages = api.getCountPages();
const mainContext = useContext(MainContext);
const showPanels = mainContext.showPanels;
const tabs = [];
useEffect(() => {
f7.tab.show('#add-other', false);
}, []);
if (!showPanels && countPages) {
tabs.push({
caption: _t.textSlide,
id: 'add-slide',
icon: 'icon-add-slide',
component: <AddSlideController />
});
tabs.push({
caption: _t.textShape,
id: 'add-shape',
icon: 'icon-add-shape',
component: <AddShapeController/>
});
// 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 />
});
}
if(!showPanels && !countPages) {
tabs.push({
caption: _t.textSlide,
id: 'add-slide',
icon: 'icon-add-slide',
component: <AddSlideController />
});
}
// if (showPanels && showPanels === 'link') {
// tabs.push({
// caption: _t.textAddLink,
// id: 'add-link',
// component: <AddLinkController noNavbar={true}/>
// });
// }
return (
<Page pageContent={false}>
<AddLayoutNavbar tabs={tabs} />
<AddLayoutContent tabs={tabs} />
</Page>
)
};
export default AddingPage;

204
apps/presentationeditor/mobile/src/view/edit/Edit.jsx
View File

@ -1,29 +1,24 @@
import React, {useState, useEffect} from 'react';
import {observer, inject} from "mobx-react";
import { Popover, Sheet, View, Page, Navbar, NavRight, NavLeft, NavTitle, Tabs, Tab, Link } from 'framework7-react';
import { f7 } from 'framework7-react';
import { useTranslation } from 'react-i18next';
import {Device} from '../../../../../common/mobile/utils/device';
import EditSlideController from "../../controller/edit/EditSlide";
import EditTextController from "../../controller/edit/EditText";
import EditShapeController from "../../controller/edit/EditShape";
import EditImageController from "../../controller/edit/EditImage";
import EditTableController from "../../controller/edit/EditTable";
import EditChartController from "../../controller/edit/EditChart";
import React, { useContext, useEffect } from 'react';
import { Popover, Sheet, View, f7 } from 'framework7-react';
import { Device } from '../../../../../common/mobile/utils/device';
import { EditLinkController } from "../../controller/edit/EditLink";
import { Theme, Layout, Transition, Type, Effect, StyleFillColor, CustomFillColor } from './EditSlide';
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 EditingPage from './EditingPage';
import { MainContext } from '../../page/main';
const routes = [
{
path: '/editing-page/',
component: EditingPage,
keepAlive: true
},
// Slides
{
path: '/layout/',
component: Layout
@ -225,162 +220,37 @@ const routes = [
}
];
const EmptyEditLayout = () => {
const { t } = useTranslation();
const _t = t('View.Edit', {returnObjects: true});
return (
<Page>
<div className="content-block inset">
<div className="content-block-inner">
<p>{_t.textSelectObjectToEdit}</p>
</div>
</div>
</Page>
)
};
const EditLayoutNavbar = ({ editors, inPopover }) => {
const isAndroid = Device.android;
return (
<Navbar>
{
editors.length > 1 ?
<div className='tab-buttons tabbar'>
{editors.map((item, index) => <Link key={"pe-link-" + item.id} tabLink={"#" + item.id} tabLinkActive={index === 0}>{item.caption}</Link>)}
{isAndroid && <span className='tab-link-highlight' style={{width: 100 / editors.length + '%'}}></span>}
</div> :
<NavTitle>{ editors[0].caption }</NavTitle>
}
{ !inPopover && <NavRight><Link icon='icon-expand-down' sheetClose></Link></NavRight> }
</Navbar>
)
};
const EditLayoutContent = ({ editors }) => {
if (editors.length > 1) {
return (
<Tabs animated>
{editors.map((item, index) =>
<Tab key={"pe-tab-" + item.id} id={item.id} className="page-content" tabActive={index === 0}>
{item.component}
</Tab>
)}
</Tabs>
)
} else {
return (
<Page>
{editors[0].component}
</Page>
)
}
};
const EditTabs = props => {
const { t } = useTranslation();
const _t = t('View.Edit', {returnObjects: true});
const settings = props.storeFocusObjects.settings;
let editors = [];
if (settings.length < 1) {
editors.push({
caption: _t.textSettings,
component: <EmptyEditLayout />
});
} else {
if (settings.indexOf('image') > -1) {
editors.push({
caption: _t.textImage,
id: 'edit-image',
component: <EditImageController />
})
}
if (settings.indexOf('shape') > -1) {
editors.push({
caption: _t.textShape,
id: 'edit-shape',
component: <EditShapeController />
})
}
if (settings.indexOf('table') > -1) {
editors.push({
caption: _t.textTable,
id: 'edit-table',
component: <EditTableController />
})
}
if (settings.indexOf('chart') > -1) {
editors.push({
caption: _t.textChart,
id: 'edit-chart',
component: <EditChartController />
})
}
if (settings.indexOf('text') > -1) {
editors.push({
caption: _t.textText,
id: 'edit-text',
component: <EditTextController />
})
}
if (settings.indexOf('slide') > -1) {
editors.push({
caption: _t.textSlide,
id: 'edit-slide',
component: <EditSlideController />
})
}
}
return (
<View style={props.style} stackPages={true} routes={routes}>
<Page pageContent={false}>
<EditLayoutNavbar editors={editors} inPopover={props.inPopover}/>
<EditLayoutContent editors={editors} />
</Page>
</View>
)
};
const EditTabsContainer = inject("storeFocusObjects")(observer(EditTabs));
const EditView = props => {
const onOptionClick = (page) => {
$f7.views.current.router.navigate(page);
routes.forEach(route => {
route.options = {
...route.options,
transition: 'f7-push'
};
const show_popover = props.usePopover;
});
const EditView = () => {
const mainContext = useContext(MainContext);
useEffect(() => {
if(Device.phone) {
f7.sheet.open('#edit-sheet');
} else {
f7.popover.open('#edit-popover', '#btn-edit');
}
}, []);
return (
show_popover ?
<Popover id="edit-popover" className="popover__titled" closeByOutsideClick={false} onPopoverClosed={() => props.onClosed()}>
<EditTabsContainer inPopover={true} onOptionClick={onOptionClick} style={{height: '410px'}} />
!Device.phone ?
<Popover id="edit-popover" className="popover__titled" closeByOutsideClick={false} onPopoverClosed={() => mainContext.closeOptions('edit')}>
<View style={{ height: '410px' }} routes={routes} url='/editing-page/'>
<EditingPage />
</View>
</Popover> :
<Sheet id="edit-sheet" push onSheetClosed={() => props.onClosed()}>
<EditTabsContainer onOptionClick={onOptionClick} />
<Sheet id="edit-sheet" onSheetClosed={() => mainContext.closeOptions('edit')}>
<View routes={routes} url='/editing-page/'>
<EditingPage />
</View>
</Sheet>
)
};
const EditOptions = props => {
useEffect(() => {
if ( Device.phone )
f7.sheet.open('#edit-sheet');
else f7.popover.open('#edit-popover', '#btn-edit');
return () => {
// component will unmount
}
});
const onviewclosed = () => {
if ( props.onclosed ) {
props.onclosed();
}
};
return (
<EditView usePopover={!Device.phone} onClosed={onviewclosed} />
)
};
export default EditOptions;
export default EditView;

3
apps/presentationeditor/mobile/src/view/edit/EditChart.jsx
View File

@ -1,10 +1,11 @@
import React, {Fragment, useState} from 'react';
import {observer, inject} from "mobx-react";
import {List, ListItem, ListButton, Icon, Row, Page, Navbar, BlockTitle, Toggle, Range, Link, Tabs, Tab, NavRight, Swiper, SwiperSlide} from 'framework7-react';
import {List, ListItem, ListButton, Icon, Row, Page, Navbar, BlockTitle, Toggle, Range, Link, Tabs, Tab, NavRight} from 'framework7-react';
import { useTranslation } from 'react-i18next';
import {Device} from '../../../../../common/mobile/utils/device';
import {CustomColorPicker, ThemeColorPalette} from "../../../../../common/mobile/lib/component/ThemeColorPalette.jsx";
import { f7 } from 'framework7-react';
import { Swiper, SwiperSlide } from 'swiper/react';
const PageCustomFillColor = props => {
const { t } = useTranslation();

21
apps/presentationeditor/mobile/src/view/edit/EditTable.jsx
View File

@ -1,6 +1,6 @@
import React, {Fragment, useState, useEffect} from 'react';
import {observer, inject} from "mobx-react";
import {f7, Page, Navbar, List, ListItem, ListButton, Row, BlockTitle,SkeletonBlock, Range, Toggle, Icon, Link, Tabs, Tab, NavRight} from 'framework7-react';
import {f7, Page, Navbar, List, ListItem, ListButton, BlockTitle,SkeletonBlock, Range, Toggle, Icon, Link, Tabs, Tab, NavRight} from 'framework7-react';
import { useTranslation } from 'react-i18next';
import {Device} from '../../../../../common/mobile/utils/device';
import {CustomColorPicker, ThemeColorPalette} from "../../../../../common/mobile/lib/component/ThemeColorPalette.jsx";
@ -25,7 +25,7 @@ const StyleTemplates = inject("storeFocusObjects","storeTableSettings")(observer
return (
<div className="dataview table-styles">
<ul className="row">
{ !styles.length ?
{!styles.length ?
Array.from({ length: 34 }).map((item,index) => (
<li className='skeleton-list' key={index}>
<SkeletonBlock width='70px' height='8px' effect='wave'/>
@ -56,6 +56,7 @@ const PageStyleOptions = props => {
const tableObject = props.storeFocusObjects.tableObject;
let tableLook, isFirstRow, isLastRow, isBandHor, isFirstCol, isLastCol, isBandVer;
if (tableObject) {
tableLook = tableObject.get_TableLook();
isFirstRow = tableLook.get_FirstRow();
@ -291,7 +292,7 @@ const TabBorder = inject("storeFocusObjects", "storeTableSettings")(observer(pro
></span>
</ListItem>
<ListItem className='buttons table-presets'>
<Row>
<div className="row">
<a className={'item-link button'} onClick={() => {onBorderType("lrtbcm")}}>
<Icon slot="media" icon="icon-table-borders-all"></Icon>
</a>
@ -307,10 +308,10 @@ const TabBorder = inject("storeFocusObjects", "storeTableSettings")(observer(pro
<a className={'item-link button'} onClick={() => {onBorderType("l")}}>
<Icon slot="media" icon="icon icon-table-borders-left"></Icon>
</a>
</Row>
</div>
</ListItem>
<ListItem className='buttons table-presets'>
<Row>
<div className="row">
<a className={'item-link button'} onClick={() => {onBorderType("c")}}>
<Icon slot="media" icon="icon-table-borders-center"></Icon>
</a>
@ -326,7 +327,7 @@ const TabBorder = inject("storeFocusObjects", "storeTableSettings")(observer(pro
<a className={'item-link button'} onClick={() => {onBorderType("b")}}>
<Icon slot="media" icon="icon-table-borders-bottom"></Icon>
</a>
</Row>
</div>
</ListItem>
</List>
)
@ -487,7 +488,7 @@ const EditTable = props => {
<Fragment>
<List>
<ListItem className='buttons'>
<Row>
<div className="row">
<a className={'item-link button'} onClick={() => {props.onAddColumnLeft()}}>
<Icon slot="media" icon="icon-table-add-column-left"></Icon>
</a>
@ -500,17 +501,17 @@ const EditTable = props => {
<a className={'item-link button'} onClick={() => {props.onAddRowBelow()}}>
<Icon slot="media" icon="icon-table-add-row-below"></Icon>
</a>
</Row>
</div>
</ListItem>
<ListItem className='buttons'>
<Row>
<div className="row">
<a className={'item-link button'} onClick={() => {props.onRemoveColumn()}}>
<Icon slot="media" icon="icon-table-remove-column"></Icon>
</a>
<a className={'item-link button'} onClick={() => {props.onRemoveRow()}}>
<Icon slot="media" icon="icon icon-table-remove-row"></Icon>
</a>
</Row>
</div>
</ListItem>
<List className="buttons-list">
<ListButton title={_t.textRemoveTable} onClick={() => {props.onRemoveTable()}} className='button-red button-fill button-raised'></ListButton>

19
apps/presentationeditor/mobile/src/view/edit/EditText.jsx
View File

@ -1,9 +1,10 @@
import React, {Fragment, useState, useEffect} from 'react';
import {observer, inject} from "mobx-react";
import {f7, Swiper, View, SwiperSlide, List, ListItem, ListButton, ListInput, Icon, Row, Button, Page, Navbar, Segmented, BlockTitle, NavRight, Link} from 'framework7-react';
import {f7, View, List, ListItem, ListButton, ListInput, Icon, 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';
import { Swiper, SwiperSlide } from 'swiper/react';
import { LocalStorage } from '../../../../../common/mobile/utils/LocalStorage.mjs';
import HighlightColorPalette from '../../../../../common/mobile/lib/component/HighlightColorPalette.jsx';
@ -67,12 +68,12 @@ const EditText = props => {
changeFontFamily: props.changeFontFamily
}}/>
<ListItem className='buttons'>
<Row>
<div className="row">
<a className={'button' + (isBold ? ' active' : '')} onClick={() => { props.toggleBold(!isBold)}}><b>B</b></a>
<a className={'button' + (isItalic ? ' active' : '')} onClick={() => {props.toggleItalic(!isItalic)}}><i>I</i></a>
<a className={'button' + (isUnderline ? ' active' : '')} onClick={() => {props.toggleUnderline(!isUnderline)}} style={{textDecoration: "underline"}}>U</a>
<a className={'button' + (isStrikethrough ? ' active' : '')} onClick={() => {props.toggleStrikethrough(!isStrikethrough)}} style={{textDecoration: "line-through"}}>S</a>
</Row>
</div>
</ListItem>
<ListItem title={_t.textFontColor} link="/edit-text-font-color/" routeProps={{
onTextColor: props.onTextColor
@ -102,7 +103,7 @@ const EditText = props => {
<Fragment>
<List>
<ListItem className='buttons'>
<Row>
<div className="row">
<a className={'button' + (paragraphAlign === 'left' ? ' active' : '')} onClick={() => {props.onParagraphAlign('left')}}>
<Icon slot="media" icon="icon-text-align-left"></Icon>
</a>
@ -115,10 +116,10 @@ const EditText = props => {
<a className={'button' + (paragraphAlign === 'just' ? ' active' : '')} onClick={() => {props.onParagraphAlign('just')}}>
<Icon slot="media" icon="icon-text-align-just"></Icon>
</a>
</Row>
</div>
</ListItem>
<ListItem className='buttons'>
<Row>
<div className="row">
<a className={'button' + (paragraphValign === 'top' ? ' active' : '')} onClick={() => {props.onParagraphValign('top')}}>
<Icon slot="media" icon="icon-text-valign-top"></Icon>
</a>
@ -128,17 +129,17 @@ const EditText = props => {
<a className={'button' + (paragraphValign === 'bottom' ? ' active' : '')} onClick={() => {props.onParagraphValign('bottom')}}>
<Icon slot="media" icon="icon-text-valign-bottom"></Icon>
</a>
</Row>
</div>
</ListItem>
<ListItem className='buttons'>
<Row>
<div className="row">
<a className={'button item-link' + (!canDecreaseIndent ? ' disabled' : '') } onClick={() => {props.onParagraphMove('left')}}>
<Icon slot="media" icon="icon-de-indent"></Icon>
</a>
<a className={'button item-link' + (!canIncreaseIndent ? ' disabled' : '') } onClick={() => {props.onParagraphMove('right')}}>
<Icon slot="media" icon="icon-in-indent"></Icon>
</a>
</Row>
</div>
</ListItem>
<ListItem title={_t.textBulletsAndNumbers} link='/edit-bullets-and-numbers/' routeProps={{
onBullet: props.onBullet,

134
apps/presentationeditor/mobile/src/view/edit/EditingPage.jsx Normal file
View File

@ -0,0 +1,134 @@
import React from 'react';
import { observer, inject } from "mobx-react";
import { Page, Navbar, NavRight, NavTitle, Tabs, Tab, Link } from 'framework7-react';
import { useTranslation } from 'react-i18next';
import { Device } from '../../../../../common/mobile/utils/device';
import EditSlideController from "../../controller/edit/EditSlide";
import EditTextController from "../../controller/edit/EditText";
import EditShapeController from "../../controller/edit/EditShape";
import EditImageController from "../../controller/edit/EditImage";
import EditTableController from "../../controller/edit/EditTable";
import EditChartController from "../../controller/edit/EditChart";
const EmptyEditLayout = () => {
const { t } = useTranslation();
const _t = t('View.Edit', {returnObjects: true});
return (
<Page>
<div className="content-block inset">
<div className="content-block-inner">
<p>{_t.textSelectObjectToEdit}</p>
</div>
</div>
</Page>
)
};
const EditLayoutNavbar = ({ editors }) => {
const isAndroid = Device.android;
return (
<Navbar>
{editors.length > 1 ?
<div className='tab-buttons tabbar'>
{editors.map((item, index) => <Link key={"pe-link-" + item.id} tabLink={"#" + item.id} tabLinkActive={index === 0}>{item.caption}</Link>)}
{isAndroid && <span className='tab-link-highlight' style={{width: 100 / editors.length + '%'}}></span>}
</div> :
<NavTitle>{ editors[0].caption }</NavTitle>
}
{Device.phone && <NavRight><Link icon='icon-expand-down' sheetClose></Link></NavRight> }
</Navbar>
)
};
const EditLayoutContent = ({ editors }) => {
if (editors.length > 1) {
return (
<Tabs animated>
{editors.map((item, index) =>
<Tab key={"pe-tab-" + item.id} id={item.id} className="page-content" tabActive={index === 0}>
{item.component}
</Tab>
)}
</Tabs>
)
} else {
return (
<Page>
{editors[0].component}
</Page>
)
}
};
const EditingPage = inject('storeFocusObjects')(observer(props => {
const { t } = useTranslation();
const _t = t('View.Edit', {returnObjects: true});
const settings = props.storeFocusObjects.settings;
let editors = [];
if (settings.length < 1) {
editors.push({
caption: _t.textSettings,
component: <EmptyEditLayout />
});
} else {
if (settings.indexOf('image') > -1) {
editors.push({
caption: _t.textImage,
id: 'edit-image',
component: <EditImageController />
})
}
if (settings.indexOf('shape') > -1) {
editors.push({
caption: _t.textShape,
id: 'edit-shape',
component: <EditShapeController />
})
}
if (settings.indexOf('table') > -1) {
editors.push({
caption: _t.textTable,
id: 'edit-table',
component: <EditTableController />
})
}
if (settings.indexOf('chart') > -1) {
editors.push({
caption: _t.textChart,
id: 'edit-chart',
component: <EditChartController />
})
}
if (settings.indexOf('text') > -1) {
editors.push({
caption: _t.textText,
id: 'edit-text',
component: <EditTextController />
})
}
if (settings.indexOf('slide') > -1) {
editors.push({
caption: _t.textSlide,
id: 'edit-slide',
component: <EditSlideController />
})
}
}
return (
<Page pageContent={false}>
<EditLayoutNavbar editors={editors} />
<EditLayoutContent editors={editors} />
</Page>
)
}));
export default EditingPage;

265
apps/presentationeditor/mobile/src/view/settings/Settings.jsx
View File

@ -1,24 +1,23 @@
import React, {Component, useEffect} from 'react';
import {View,Page,Navbar,NavRight,Link,Popup,Popover,Icon,ListItem,List} from 'framework7-react';
import { useTranslation } from 'react-i18next';
import {f7} from 'framework7-react';
import {Device} from '../../../../../common/mobile/utils/device';
import { observer, inject } from "mobx-react";
import React, { useContext, useEffect } from 'react';
import { View, Popup, Popover, f7 } from 'framework7-react';
import { Device } from '../../../../../common/mobile/utils/device';
import ApplicationSettingsController from "../../controller/settings/ApplicationSettings";
import { MacrosSettings } from "./ApplicationSettings";
import DownloadController from "../../controller/settings/Download";
import PresentationInfoController from "../../controller/settings/PresentationInfo";
import PresentationSettingsController from "../../controller/settings/PresentationSettings";
import { PresentationColorSchemes } from "./PresentationSettings";
// import PresentationAboutController from '../../controller/settings/PresentationAbout';
import About from '../../../../../common/mobile/lib/view/About';
import SettingsPage from './SettingsPage';
import { MainContext } from '../../page/main';
import SharingSettings from "../../../../../common/mobile/lib/view/SharingSettings";
import VersionHistoryController from '../../../../../common/mobile/lib/controller/VersionHistory';
const routes = [
{
path: '/',
component: 'TSettingsView'
path: '/settings-page/',
component: SettingsPage,
keepAlive: true
},
{
path: '/application-settings/',
@ -58,237 +57,39 @@ const routes = [
}
}
},
/*{
path: '/presentation-settings/',
component: PresentationSettingsController,
},
{
path: "/presentation-info/",
component: PresentationInfoController,
}*/
];
const SettingsList = inject("storeAppOptions", "storeToolbarSettings", "storeVersionHistory")(observer(props => {
const { t } = useTranslation();
const _t = t('View.Settings', {returnObjects: true});
const storeToolbarSettings = props.storeToolbarSettings;
const disabledPreview = storeToolbarSettings.countPages <= 0;
const storeVersionHistory = props.storeVersionHistory;
const isVersionHistoryMode = storeVersionHistory.isVersionHistoryMode;
const navbar = <Navbar title={_t.textSettings}>
{!props.inPopover && <NavRight><Link popupClose=".settings-popup">{_t.textDone}</Link></NavRight>}
</Navbar>;
const onoptionclick = page => {
if ( props.onOptionClick )
props.onOptionClick(page)
routes.forEach(route => {
route.options = {
...route.options,
transition: 'f7-push'
};
});
const closeModal = () => {
if (Device.phone) {
f7.sheet.close('.settings-popup', false);
} else {
f7.popover.close('#settings-popover', false);
}
};
const SettingsView = () => {
const mainContext = useContext(MainContext);
const onOpenOptions = keyword => {
closeModal();
props.openOptions(keyword);
}
const onPrint = () => {
const api = Common.EditorApi.get();
closeModal();
setTimeout(() => {
api.asc_Print();
}, 400);
};
const showHelp = () => {
// let url = '{{HELP_URL}}';
let url = __HELP_URL__;
// let url = 'https://helpcenter.onlyoffice.com';
if (url.charAt(url.length-1) !== '/') {
url += '/';
}
if (Device.sailfish || Device.android) {
url+='mobile-applications/documents/mobile-web-editors/android/index.aspx';
}
else {
url+='mobile-applications/documents/mobile-web-editors/ios/index.aspx';
}
closeModal();
window.open(url, "_blank");
};
const showFeedback = () => {
let config = props.storeAppOptions.config;
closeModal();
if(config && !!config.feedback && !!config.feedback.url) {
window.open(config.feedback.url, "_blank");
} else window.open(__SUPPORT_URL__, "_blank");
};
const appOptions = props.storeAppOptions;
let _isEdit = false,
_canDownload = false,
_canDownloadOrigin = false,
_canAbout = true,
_canHelp = true,
_canPrint = false,
_canFeedback = true;
if (appOptions.isDisconnected) {
_isEdit = false;
if (!appOptions.enableDownload)
_canPrint = _canDownload = _canDownloadOrigin = false;
} else {
_isEdit = appOptions.isEdit;
_canDownload = appOptions.canDownload;
_canDownloadOrigin = appOptions.canDownloadOrigin;
_canPrint = appOptions.canPrint;
if (appOptions.customization && appOptions.canBrandingExt) {
_canAbout = appOptions.customization.about !== false;
}
if (appOptions.customization) {
_canHelp = appOptions.customization.help !== false;
_canFeedback = appOptions.customization.feedback !== false;
}
}
const onDownloadOrigin = () => {
closeModal();
setTimeout(() => {
Common.EditorApi.get().asc_DownloadOrigin();
}, 0);
};
return (
<View style={props.style} stackPages={true} routes={routes}>
<Page>
{navbar}
<List>
{!props.inPopover &&
<ListItem disabled={appOptions.readerMode || disabledPreview ? true : false} title={!_isEdit || isVersionHistoryMode ? _t.textFind : _t.textFindAndReplace} link="#" searchbarEnable='.searchbar' onClick={closeModal} className='no-indicator'>
<Icon slot="media" icon="icon-search"></Icon>
</ListItem>
}
{window.matchMedia("(max-width: 374px)").matches && !isVersionHistoryMode ?
<ListItem title={_t.textCollaboration} link="#" onClick={() => onOpenOptions('coauth')} className='no-indicator'>
<Icon slot="media" icon="icon-collaboration"></Icon>
</ListItem>
: null}
{_isEdit &&
<ListItem title={t('View.Settings.textVersionHistory')} link="#" onClick={() => {
if(Device.phone) {
onOpenOptions('history');
} else {
onoptionclick.bind(this, "/version-history")();
}
}}>
<Icon slot="media" icon="icon-version-history"></Icon>
</ListItem>
}
{(_isEdit && !isVersionHistoryMode) &&
<ListItem link="#" title={_t.textPresentationSettings} onClick={onoptionclick.bind(this, '/presentation-settings/')}>
<Icon slot="media" icon="icon-setup"></Icon>
</ListItem>
}
<ListItem title={_t.textApplicationSettings} link="#" onClick={onoptionclick.bind(this, '/application-settings/')}>
<Icon slot="media" icon="icon-app-settings"></Icon>
</ListItem>
{_canDownload &&
<ListItem title={_t.textDownload} link="#" onClick={onoptionclick.bind(this, '/download/')}>
<Icon slot="media" icon="icon-download"></Icon>
</ListItem>
}
{_canDownloadOrigin &&
<ListItem title={_t.textDownload} link="#" onClick={onDownloadOrigin} className='no-indicator'>
<Icon slot="media" icon="icon-download"></Icon>
</ListItem>
}
{_canPrint &&
<ListItem className={disabledPreview && 'disabled'} title={_t.textPrint} onClick={onPrint}>
<Icon slot="media" icon="icon-print"></Icon>
</ListItem>
}
<ListItem title={_t.textPresentationInfo} link="#" onClick={onoptionclick.bind(this, "/presentation-info/")}>
<Icon slot="media" icon="icon-info"></Icon>
</ListItem>
{_canHelp &&
<ListItem title={_t.textHelp} link="#" className='no-indicator' onClick={showHelp}>
<Icon slot="media" icon="icon-help"></Icon>
</ListItem>
}
{_canAbout &&
<ListItem title={_t.textAbout} link="#" onClick={onoptionclick.bind(this, "/about/")}>
<Icon slot="media" icon="icon-about"></Icon>
</ListItem>
}
{_canFeedback &&
<ListItem title={t('View.Settings.textFeedback')} link="#" className='no-indicator' onClick={showFeedback}>
<Icon slot="media" icon="icon-feedback"></Icon>
</ListItem>
}
</List>
</Page>
</View>
)
}));
class SettingsView extends Component {
constructor(props) {
super(props);
this.onoptionclick = this.onoptionclick.bind(this);
}
onoptionclick(page){
f7.views.current.router.navigate(page);
}
render() {
const show_popover = this.props.usePopover;
return (
show_popover ?
<Popover id="settings-popover" className="popover__titled" onPopoverClosed={() => this.props.onclosed()}>
<SettingsList inPopover={true} openOptions={this.props.openOptions} onOptionClick={this.onoptionclick} style={{height: '410px'}} />
</Popover> :
<Popup className="settings-popup" onPopupClosed={() => this.props.onclosed()}>
<SettingsList onOptionClick={this.onoptionclick} openOptions={this.props.openOptions} />
</Popup>
)
}
}
const Settings = props => {
useEffect(() => {
if ( Device.phone )
if(Device.phone) {
f7.popup.open('.settings-popup');
else f7.popover.open('#settings-popover', '#btn-settings');
return () => {
} else {
f7.popover.open('#settings-popover', '#btn-settings');
}
});
}, []);
const onviewclosed = () => {
if (props.onclosed) {
props.onclosed();
}
};
return <SettingsView usePopover={!Device.phone} onclosed={onviewclosed} openOptions={props.openOptions} />
return (
!Device.phone ?
<Popover id="settings-popover" className="popover__titled" onPopoverClosed={() => mainContext.closeOptions('settings')}>
<View style={{ height: '410px' }} routes={routes} url='/settings-page/'>
<SettingsPage />
</View>
</Popover> :
<Popup className="settings-popup" onPopupClosed={() => mainContext.closeOptions('settings')}>
<View routes={routes} url='/settings-page/'>
<SettingsPage />
</View>
</Popup>
)
};
export default Settings;
export default SettingsView;

123
apps/presentationeditor/mobile/src/view/settings/SettingsPage.jsx Normal file
View File

@ -0,0 +1,123 @@
import React, { useContext } from 'react';
import { Page, Navbar, NavRight, Link, Icon, ListItem, List, f7 } from 'framework7-react';
import { useTranslation } from 'react-i18next';
import { Device } from '../../../../../common/mobile/utils/device';
import { observer, inject } from "mobx-react";
import { MainContext } from '../../page/main';
import { SettingsContext } from '../../controller/settings/Settings';
const SettingsPage = inject('storeAppOptions', 'storeToolbarSettings')(observer(props => {
const { t } = useTranslation();
const _t = t('View.Settings', {returnObjects: true});
const mainContext = useContext(MainContext);
const settingsContext = useContext(SettingsContext);
const appOptions = props.storeAppOptions;
const storeToolbarSettings = props.storeToolbarSettings;
const disabledPreview = storeToolbarSettings.countPages <= 0;
const navbar = <Navbar title={_t.textSettings}>
{Device.phone && <NavRight><Link popupClose=".settings-popup">{_t.textDone}</Link></NavRight>}
</Navbar>;
const onOpenOptions = name => {
settingsContext.closeModal();
mainContext.openOptions(name);
}
let _isEdit = false,
_canDownload = false,
_canDownloadOrigin = false,
_canAbout = true,
_canHelp = true,
_canPrint = false,
_canFeedback = true;
if (appOptions.isDisconnected) {
_isEdit = false;
if (!appOptions.enableDownload)
_canPrint = _canDownload = _canDownloadOrigin = false;
} else {
_isEdit = appOptions.isEdit;
_canDownload = appOptions.canDownload;
_canDownloadOrigin = appOptions.canDownloadOrigin;
_canPrint = appOptions.canPrint;
if (appOptions.customization && appOptions.canBrandingExt) {
_canAbout = appOptions.customization.about !== false;
}
if (appOptions.customization) {
_canHelp = appOptions.customization.help !== false;
_canFeedback = appOptions.customization.feedback !== false;
}
}
return (
<Page>
{navbar}
<List>
{!props.inPopover &&
<ListItem disabled={appOptions.readerMode || disabledPreview ? true : false} title={!_isEdit ? _t.textFind : _t.textFindAndReplace} link="#" searchbarEnable='.searchbar' onClick={settingsContext.closeModal} className='no-indicator'>
<Icon slot="media" icon="icon-search"></Icon>
</ListItem>
}
{window.matchMedia("(max-width: 374px)").matches ?
<ListItem title={_t.textCollaboration} link="#" onClick={() => onOpenOptions('coauth')} className='no-indicator'>
<Icon slot="media" icon="icon-collaboration"></Icon>
</ListItem>
: null}
{_isEdit &&
<ListItem link="/presentation-settings/" title={_t.textPresentationSettings}>
<Icon slot="media" icon="icon-setup"></Icon>
</ListItem>
}
<ListItem title={_t.textApplicationSettings} link="/application-settings/">
<Icon slot="media" icon="icon-app-settings"></Icon>
</ListItem>
{_isEdit &&
<ListItem title={t('View.Settings.textVersionHistory')} link="/version-history" onClick={() => {
if(Device.phone) {
onOpenOptions('history');
}
}}>
<Icon slot="media" icon="icon-version-history"></Icon>
</ListItem>
}
{_canDownload &&
<ListItem title={_t.textDownload} link="/download/">
<Icon slot="media" icon="icon-download"></Icon>
</ListItem>
}
{_canDownloadOrigin &&
<ListItem title={_t.textDownload} link="#" onClick={settingsContext.onDownloadOrigin} className='no-indicator'>
<Icon slot="media" icon="icon-download"></Icon>
</ListItem>
}
{_canPrint &&
<ListItem className={disabledPreview && 'disabled'} title={_t.textPrint} onClick={settingsContext.onPrint}>
<Icon slot="media" icon="icon-print"></Icon>
</ListItem>
}
<ListItem title={_t.textPresentationInfo} link="/presentation-info/">
<Icon slot="media" icon="icon-info"></Icon>
</ListItem>
{_canHelp &&
<ListItem title={_t.textHelp} link="#" className='no-indicator' onClick={settingsContext.showHelp}>
<Icon slot="media" icon="icon-help"></Icon>
</ListItem>
}
{_canAbout &&
<ListItem title={_t.textAbout} link="/about/">
<Icon slot="media" icon="icon-about"></Icon>
</ListItem>
}
{_canFeedback &&
<ListItem title={t('View.Settings.textFeedback')} link="#" className='no-indicator' onClick={settingsContext.showFeedback}>
<Icon slot="media" icon="icon-feedback"></Icon>
</ListItem>
}
</List>
</Page>
)
}));
export default SettingsPage;

45
apps/spreadsheeteditor/mobile/src/controller/add/Add.jsx Normal file
View File

@ -0,0 +1,45 @@
import React, { createContext } from "react";
import AddView from "../../view/add/Add";
export const AddingContext = createContext();
const AddingController = props => {
const api = Common.EditorApi.get();
const cellinfo = api.asc_getCellInfo();
const seltype = cellinfo.asc_getSelectionType();
const iscelllocked = cellinfo.asc_getLocked();
const isAddShapeHyperlink = api.asc_canAddShapeHyperlink();
let options;
if(!iscelllocked) {
options = props.showOptions;
if(!options) {
switch(seltype) {
case Asc.c_oAscSelectionType.RangeCells:
case Asc.c_oAscSelectionType.RangeRow:
case Asc.c_oAscSelectionType.RangeCol:
case Asc.c_oAscSelectionType.RangeMax: break;
case Asc.c_oAscSelectionType.RangeImage:
case Asc.c_oAscSelectionType.RangeShape:
case Asc.c_oAscSelectionType.RangeChart:
case Asc.c_oAscSelectionType.RangeChartText:
case Asc.c_oAscSelectionType.RangeShapeText:
options = {panels: ['image','shape']};
break;
}
}
}
return (
<AddingContext.Provider value={{
isAddShapeHyperlink,
showPanels: options ? options.panels : undefined
}}>
<AddView showOptions={props.showOptions} />
</AddingContext.Provider>
)
}
export default AddingController;

3
apps/spreadsheeteditor/mobile/src/controller/add/AddChart.jsx
View File

@ -43,8 +43,7 @@ class AddChartController extends Component {
render () {
return (
<AddChart onInsertChart={this.onInsertChart}
/>
<AddChart onInsertChart={this.onInsertChart} />
)
}
}

4
apps/spreadsheeteditor/mobile/src/controller/add/AddFunction.jsx
View File

@ -87,9 +87,7 @@ class AddFunctionController extends Component {
render () {
return (
<AddFunction onInsertFunction={this.onInsertFunction}
onOptionClick={this.props.onOptionClick}
/>
<AddFunction onInsertFunction={this.onInsertFunction} />
)
}
}

4
apps/spreadsheeteditor/mobile/src/controller/add/AddLink.jsx
View File

@ -141,7 +141,7 @@ class AddLinkController extends Component {
return (
!this.props.isNavigate ?
Device.phone ?
<Popup id="add-link-popup" onPopupClosed={() => this.props.onClosed('add-link')}>
<Popup id="add-link-popup" onPopupClosed={() => this.props.closeOptions('add-link')}>
<View routes={routes} style={{height: '100%'}}>
<AddLink
allowInternal={this.allowInternal}
@ -155,7 +155,7 @@ class AddLinkController extends Component {
</View>
</Popup>
:
<Popover id="add-link-popover" className="popover__titled" closeByOutsideClick={false} onPopoverClosed={() => this.props.onClosed('add-link')}>
<Popover id="add-link-popover" className="popover__titled" closeByOutsideClick={false} onPopoverClosed={() => this.props.closeOptions('add-link')}>
<View routes={routes} style={{height: '410px'}}>
<AddLink
allowInternal={this.allowInternal}

2
apps/spreadsheeteditor/mobile/src/controller/add/AddOther.jsx
View File

@ -32,8 +32,6 @@ class AddOtherController extends Component {
<AddOther
closeModal={this.closeModal}
hideAddComment={this.hideAddComment}
wsProps={this.props.wsProps}
onCloseLinkSettings={this.props.onCloseLinkSettings}
/>
)
}

3
apps/spreadsheeteditor/mobile/src/controller/add/AddShape.jsx
View File

@ -26,8 +26,7 @@ class AddShapeController extends Component {
render () {
return (
<AddShape onShapeClick={this.onShapeClick}
/>
<AddShape onShapeClick={this.onShapeClick} />
)
}
}

5
apps/spreadsheeteditor/mobile/src/controller/edit/EditLink.jsx
View File

@ -1,7 +1,6 @@
import React, { Component } from '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, PageEditTypeLink, PageEditSheet} from '../../view/edit/EditLink';
@ -149,7 +148,7 @@ class EditLinkController extends Component {
return (
!this.props.isNavigate ?
Device.phone ?
<Popup id="edit-link-popup" onPopupClosed={() => this.props.onClosed('edit-link')}>
<Popup id="edit-link-popup" onPopupClosed={() => this.props.closeOptions('edit-link')}>
<View routes={routes} style={{height: '100%'}}>
<EditLink
linkInfo={this.linkInfo}
@ -164,7 +163,7 @@ class EditLinkController extends Component {
</View>
</Popup>
:
<Popover id="edit-link-popover" className="popover__titled" closeByOutsideClick={false} onPopoverClosed={() => this.props.onClosed('edit-link')}>
<Popover id="edit-link-popover" className="popover__titled" closeByOutsideClick={false} onPopoverClosed={() => this.props.closeOptions('edit-link')}>
<View routes={routes} style={{height: '410px'}}>
<EditLink
linkInfo={this.linkInfo}

76
apps/spreadsheeteditor/mobile/src/controller/settings/Settings.jsx Normal file
View File

@ -0,0 +1,76 @@
import React, { createContext } from 'react';
import { observer, inject } from "mobx-react";
import { Device } from '../../../../../common/mobile/utils/device';
import SettingsView from "../../view/settings/Settings";
import { f7 } from 'framework7-react';
export const SettingsContext = createContext();
const SettingsController = inject('storeAppOptions')(observer(props => {
const closeModal = () => {
if(Device.phone) {
f7.sheet.close('.settings-popup', false);
} else {
f7.popover.close('#settings-popover', false);
}
};
const onPrint = () => {
const api = Common.EditorApi.get();
closeModal();
setTimeout(() => {
api.asc_Print();
}, 400);
};
const showHelp = () => {
// let url = '{{HELP_URL}}';
// let url = 'https://helpcenter.onlyoffice.com';
let url = __HELP_URL__;
if (url.charAt(url.length-1) !== '/') {
url += '/';
}
if (Device.sailfish || Device.android) {
url+='mobile-applications/documents/mobile-web-editors/android/index.aspx';
}
else {
url+='mobile-applications/documents/mobile-web-editors/ios/index.aspx';
}
closeModal();
window.open(url, "_blank");
};
const showFeedback = () => {
let config = props.storeAppOptions.config;
closeModal();
if(config && !!config.feedback && !!config.feedback.url) {
window.open(config.feedback.url, "_blank");
} else window.open(__SUPPORT_URL__, "_blank");
};
const onDownloadOrigin = () => {
closeModal();
setTimeout(() => {
Common.EditorApi.get().asc_DownloadOrigin();
}, 0);
};
return (
<SettingsContext.Provider value={{
onPrint,
showHelp,
showFeedback,
onDownloadOrigin,
closeModal
}}>
<SettingsView />
</SettingsContext.Provider>
);
}));
export default SettingsController;

156
apps/spreadsheeteditor/mobile/src/page/main.jsx
View File

@ -1,25 +1,24 @@
import React, { Component, Fragment } from 'react';
import { Page, View, Navbar, Subnavbar, Icon } from 'framework7-react';
import React, { Component, Fragment, createContext } from 'react';
import { Page, View, Navbar, Subnavbar, Icon, f7 } from 'framework7-react';
import { observer, inject } from "mobx-react";
import { Device } from '../../../../common/mobile/utils/device';
import Settings from '../view/settings/Settings';
import { Collaboration } from '../../../../common/mobile/lib/view/collaboration/Collaboration.jsx'
import CollaborationView from '../../../../common/mobile/lib/view/collaboration/Collaboration.jsx'
import CellEditor from '../controller/CellEditor';
import { Statusbar } from '../controller/Statusbar';
import FilterOptionsController from '../controller/FilterOptions.jsx'
import AddOptions from "../view/add/Add";
import EditOptions from "../view/edit/Edit";
import { Search, SearchSettings } from '../controller/Search';
import { f7, Link } from 'framework7-react';
import {FunctionGroups} from "../controller/add/AddFunction";
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';
import SettingsController from '../controller/settings/Settings';
import AddingController from '../controller/add/Add';
import EditView from '../view/edit/Edit';
import VersionHistoryController from '../../../../common/mobile/lib/controller/VersionHistory';
export const MainContext = createContext();
class MainPage extends Component {
constructor(props) {
super(props);
@ -133,71 +132,80 @@ class MainPage extends Component {
}
return (
<Page name="home" className={`editor${!isHideLogo ? ' page-with-logo' : ''}`}>
{/* Top Navbar */}
<Navbar id='editor-navbar'
className={`main-navbar${!isHideLogo ? ' navbar-with-logo' : ''}`}>
{!isHideLogo && <div className="main-logo" onClick={() => {
window.open(`${__PUBLISHER_URL__}`, "_blank");
}}><Icon icon="icon-logo"></Icon></div>}
<Subnavbar>
<Toolbar openOptions={this.handleClickToOpenOptions}
closeOptions={this.handleOptionsViewClosed}/>
<Search useSuspense={false}/>
</Subnavbar>
</Navbar>
<CellEditor onClickToOpenAddOptions={(panels, button) => this.handleClickToOpenOptions('add', {panels: panels, button: button})}/>
{/* Page content */}
<View id="editor_sdk" />
{isShowPlaceholder ?
<div className="doc-placeholder">
<div className="columns"></div>
<div className="columns"></div>
</div> :
null
}
<SearchSettings useSuspense={false} />
{
!this.state.editOptionsVisible ? null :
<EditOptions onclosed={this.handleOptionsViewClosed.bind(this, 'edit')} wsLock={wsLock} wsProps={wsProps} />
}
{
!this.state.addOptionsVisible ? null :
<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 :
<Settings openOptions={this.handleClickToOpenOptions} onclosed={this.handleOptionsViewClosed.bind(this, 'settings')} />
}
{
!this.state.historyVisible ? null :
<VersionHistoryController onclosed={this.handleOptionsViewClosed.bind(this, 'history')} />
}
{
!this.state.collaborationVisible ? null :
<Collaboration onclosed={this.handleOptionsViewClosed.bind(this, 'coauth')} />
}
{appOptions.isDocReady &&
<Fragment key='filter-context'>
<FilterOptionsController wsProps={wsProps} />
<ContextMenu openOptions={this.handleClickToOpenOptions.bind(this)} />
</Fragment>
}
<MainContext.Provider value={{
openOptions: this.handleClickToOpenOptions.bind(this),
closeOptions: this.handleOptionsViewClosed.bind(this),
showOptions: this.state.addShowOptions,
wsLock,
wsProps
}}>
<Page name="home" className={`editor${!isHideLogo ? ' page-with-logo' : ''}`}>
{/* Top Navbar */}
<Navbar id='editor-navbar' className={`main-navbar${!isHideLogo ? ' navbar-with-logo' : ''}`}>
{!isHideLogo &&
<div className="main-logo" onClick={() => {
window.open(`${__PUBLISHER_URL__}`, "_blank");
}}>
<Icon icon="icon-logo"></Icon>
</div>
}
<Subnavbar>
<Toolbar
openOptions={this.handleClickToOpenOptions}
closeOptions={this.handleOptionsViewClosed}
/>
<Search useSuspense={false}/>
</Subnavbar>
</Navbar>
<Statusbar key='statusbar'/>
<FunctionGroups /> {/* hidden component*/}
</Page>
<CellEditor onClickToOpenAddOptions={(panels, button) => this.handleClickToOpenOptions('add', {panels: panels, button: button})} />
{/* Page content */}
<View id="editor_sdk" />
{isShowPlaceholder ?
<div className="doc-placeholder">
<div className="columns"></div>
<div className="columns"></div>
</div> :
null
}
<SearchSettings useSuspense={false} />
{!this.state.editOptionsVisible ? null : <EditView />}
{!this.state.addOptionsVisible ? null :
<AddingController
showOptions={this.state.addShowOptions}
/>
}
{!this.state.addLinkSettingsVisible ? null :
<AddLinkController
closeOptions={this.handleOptionsViewClosed.bind(this)}
/>
}
{!this.state.editLinkSettingsVisible ? null :
<EditLinkController
closeOptions={this.handleOptionsViewClosed.bind(this)}
/>
}
{!this.state.settingsVisible ? null : <SettingsController />}
{!this.state.collaborationVisible ? null :
<CollaborationView
closeOptions={this.handleOptionsViewClosed.bind(this)}
/>
}
{!this.state.historyVisible ? null :
<VersionHistoryController onclosed={this.handleOptionsViewClosed.bind(this, 'history')} />
}
{appOptions.isDocReady &&
<Fragment key='filter-context'>
<FilterOptionsController wsProps={wsProps} />
<ContextMenu
openOptions={this.handleClickToOpenOptions.bind(this)}
/>
</Fragment>
}
<Statusbar key='statusbar'/>
<FunctionGroups /> {/* hidden component*/}
</Page>
</MainContext.Provider>
)
}
}

8
apps/spreadsheeteditor/mobile/src/view/FilterOptions.jsx
View File

@ -1,5 +1,5 @@
import React, {useEffect, useState} from 'react';
import {f7, List, Popover, Sheet, ListItem, Icon, Row, Button, ListButton, Page, Navbar, Segmented, BlockTitle, NavRight, Link, Toggle,View} from 'framework7-react';
import React from 'react';
import {f7, List, Popover, Sheet, ListItem, Icon, ListButton, Page, Navbar, NavRight, Link, View} from 'framework7-react';
import { useTranslation } from 'react-i18next';
import { Device } from '../../../../common/mobile/utils/device';
import {observer, inject} from "mobx-react";
@ -45,7 +45,7 @@ const FilterOptions = inject('storeAppOptions')(observer(props => {
</Navbar>
<List>
<ListItem className='buttons'>
<Row>
<div className="row">
<a className={'button' + (props.checkSort === 'down' ? ' active' : '')} onClick={() => {
props.onSort('sortdown');
onValidChecked();
@ -58,7 +58,7 @@ const FilterOptions = inject('storeAppOptions')(observer(props => {
}}>
<Icon slot="media" icon="sortup"/>
</a>
</Row>
</div>
</ListItem>
</List>
<List>

248
apps/spreadsheeteditor/mobile/src/view/add/Add.jsx
View File

@ -1,24 +1,23 @@
import React, {Component, useEffect} from 'react';
import {View,Page,Navbar,NavTitle,NavRight,Link,Popup,Popover,Icon,Tabs,Tab} from 'framework7-react';
import { useTranslation } from 'react-i18next';
import {f7} from 'framework7-react';
import { observer, inject } from "mobx-react";
import {Device} from '../../../../../common/mobile/utils/device';
import {AddChartController} from "../../controller/add/AddChart";
import {AddFunctionController} from "../../controller/add/AddFunction";
import {PageFunctionGroup, PageFunctionInfo} from "./AddFunction";
import AddShapeController from "../../controller/add/AddShape";
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 React, { useContext, useEffect } from 'react';
import { View, Popup, Popover, f7 } from 'framework7-react';
import { Device } from '../../../../../common/mobile/utils/device';
import { PageFunctionGroup, PageFunctionInfo } from "./AddFunction";
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";
import AddingPage from './AddingPage';
import { MainContext } from '../../page/main';
const routes = [
{
path: '/adding-page/',
component: AddingPage,
keepAlive: true
},
// Functions
{
path: '/add-function-group/',
@ -69,201 +68,38 @@ const routes = [
}
];
const AddLayoutNavbar = ({ tabs, inPopover }) => {
const isAndroid = Device.android;
routes.forEach(route => {
route.options = {
...route.options,
transition: 'f7-push'
};
});
if(!tabs.length) return null;
const AddView = props => {
const mainContext = useContext(MainContext);
return (
<Navbar>
{tabs.length > 1 ?
<div className='tab-buttons tabbar'>
{tabs.map((item, index) =>
<Link key={"sse-link-" + item.id} tabLink={"#" + item.id} tabLinkActive={index === 0}>
<Icon slot="media" icon={item.icon}></Icon>
</Link>)}
{isAndroid && <span className='tab-link-highlight' style={{width: 100 / tabs.lenght + '%'}}></span>}
</div> : <NavTitle>{tabs[0].caption}</NavTitle>
}
{ !inPopover && <NavRight><Link icon='icon-expand-down' popupClose=".add-popup"></Link></NavRight> }
</Navbar>
)
};
const AddLayoutContent = ({ tabs }) => {
if(!tabs.length) return null;
return (
<Tabs animated>
{tabs.map((item, index) =>
<Tab key={"sse-tab-" + item.id} id={item.id} className="page-content" tabActive={index === 0}>
{item.component}
</Tab>
)}
</Tabs>
)
};
const AddTabs = props => {
const { t } = useTranslation();
const _t = t('View.Add', {returnObjects: true});
const wsLock = props.wsLock;
const wsProps = props.wsProps;
const showPanels = props.showPanels;
const tabs = [];
if(!wsProps.Objects) {
if (!showPanels) {
tabs.push({
caption: _t.textChart,
id: 'add-chart',
icon: 'icon-add-chart',
component: <AddChartController/>
});
}
if (!showPanels || showPanels === 'function') {
tabs.push({
caption: _t.textFunction,
id: 'add-function',
icon: 'icon-add-formula',
component: <AddFunctionController onOptionClick={props.onOptionClick}/>
});
}
if (!showPanels || showPanels.indexOf('shape') > 0) {
tabs.push({
caption: _t.textShape,
id: 'add-shape',
icon: 'icon-add-shape',
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 && (!wsProps.InsertHyperlinks || !wsProps.Objects || !wsProps.Sort)) {
tabs.push({
caption: _t.textOther,
id: 'add-other',
icon: 'icon-add-other',
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) {
f7.popup.close('.add-popup', false);
} else {
f7.popover.close('#add-popover', false);
}
return null;
}
return (
<View style={props.style} stackPages={true} routes={routes}>
<Page pageContent={false}>
<AddLayoutNavbar tabs={tabs} inPopover={props.inPopover}/>
<AddLayoutContent tabs={tabs} />
</Page>
</View>
)
};
class AddView extends Component {
constructor(props) {
super(props);
this.onoptionclick = this.onoptionclick.bind(this);
}
onoptionclick(page, props){
f7.views.current.router.navigate(page, props);
}
render() {
const show_popover = this.props.usePopover;
return (
show_popover ?
<Popover id="add-popover" className="popover__titled" closeByOutsideClick={false} onPopoverClosed={() => this.props.onclosed()}>
<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} onCloseLinkSettings={this.props.onCloseLinkSettings} wsLock={this.props.wsLock} wsProps={this.props.wsProps} onOptionClick={this.onoptionclick} showPanels={this.props.showPanels}/>
</Popup>
)
}
}
const Add = props => {
const api = Common.EditorApi.get();
const cellinfo = api.asc_getCellInfo();
const seltype = cellinfo.asc_getSelectionType();
const iscelllocked = cellinfo.asc_getLocked();
const isAddShapeHyperlink = api.asc_canAddShapeHyperlink();
let options;
useEffect(() => {
if ( Device.phone ) {
if(Device.phone) {
f7.popup.open('.add-popup');
} else {
const targetElem = !props.showOptions || !props.showOptions.button ? '#btn-add' : props.showOptions.button;
f7.popover.open('#add-popover', targetElem);
}
}, []);
return () => {
// component will unmount
}
});
return (
!Device.phone ?
<Popover id="add-popover" className="popover__titled" closeByOutsideClick={false} onPopoverClosed={() => mainContext.closeOptions('add')}>
<View routes={routes} url='/adding-page/' style={{ height: '410px' }}>
<AddingPage />
</View>
</Popover> :
<Popup className="add-popup" onPopupClosed={() => mainContext.closeOptions('add')}>
<View routes={routes} url='/adding-page/'>
<AddingPage />
</View>
</Popup>
)
}
const onviewclosed = () => {
if ( props.onclosed ) {
props.onclosed();
}
};
if ( !iscelllocked ) {
options = props.showOptions;
if ( !options ) {
switch (seltype) {
case Asc.c_oAscSelectionType.RangeCells:
case Asc.c_oAscSelectionType.RangeRow:
case Asc.c_oAscSelectionType.RangeCol:
case Asc.c_oAscSelectionType.RangeMax: break;
case Asc.c_oAscSelectionType.RangeImage:
case Asc.c_oAscSelectionType.RangeShape:
case Asc.c_oAscSelectionType.RangeChart:
case Asc.c_oAscSelectionType.RangeChartText:
case Asc.c_oAscSelectionType.RangeShapeText:
options = {panels: ['image','shape']};
break;
}
}
}
return <AddView usePopover={!Device.phone}
onclosed={onviewclosed}
showPanels={options ? options.panels : undefined}
isAddShapeHyperlink = {isAddShapeHyperlink}
wsProps={props.wsProps}
wsLock={props.wsLock}
onCloseLinkSettings={props.onCloseLinkSettings}
/>
};
export default Add;
export default AddView;

4
apps/spreadsheeteditor/mobile/src/view/add/AddChart.jsx
View File

@ -1,7 +1,7 @@
import React, {Fragment, useState} from 'react';
import React from 'react';
import {observer, inject} from "mobx-react";
import {Swiper, SwiperSlide} from 'framework7-react';
import {Device} from "../../../../../common/mobile/utils/device";
import { Swiper, SwiperSlide } from 'swiper/react';
const AddChart = props => {
const types = props.storeChartSettings.types;

6
apps/spreadsheeteditor/mobile/src/view/add/AddFilter.jsx
View File

@ -1,5 +1,5 @@
import React, {useState} from 'react';
import {Page, Navbar, List, ListItem, Icon, Row, Toggle} from 'framework7-react';
import {Page, Navbar, List, ListItem, Icon, Toggle} from 'framework7-react';
import { useTranslation } from 'react-i18next';
const AddSortAndFilter = props => {
@ -13,14 +13,14 @@ const AddSortAndFilter = props => {
<Navbar title={_t.textSortAndFilter} backLink={_t.textBack}/>
<List>
<ListItem className='buttons'>
<Row>
<div className="row">
<a className='button' onClick={() => {props.onInsertSort('down')}}>
<Icon slot="media" icon="sortdown"></Icon>
</a>
<a className='button' onClick={() => {props.onInsertSort('up')}}>
<Icon slot="media" icon="sortup"></Icon>
</a>
</Row>
</div>
</ListItem>
</List>
{!wsLock &&

27
apps/spreadsheeteditor/mobile/src/view/add/AddFunction.jsx
View File

@ -1,7 +1,7 @@
import React, {Fragment, useState} from 'react';
import {observer, inject} from "mobx-react";
import React, { Fragment } from 'react';
import { observer, inject } from "mobx-react";
import { useTranslation } from 'react-i18next';
import {List, ListItem, Page, Navbar, Icon, BlockTitle} from 'framework7-react';
import { List, ListItem, Page, Navbar, Icon, BlockTitle, f7 } from 'framework7-react';
const PageInfo = props => {
const { t } = useTranslation();
@ -94,6 +94,10 @@ const AddFunction = props => {
})
}
const onOptionClick = (page, props) => {
f7.views.current.router.navigate(page, props);
}
return (
<Fragment>
<List>
@ -105,15 +109,14 @@ const AddFunction = props => {
link='#'
onClick={() => {props.onInsertFunction(f.type);}}
>
<div slot='after'
onClick={(event) => {
props.onOptionClick('/add-function-info/', {
props: {
functionInfo: f
}
});
event.stopPropagation();
}}>
<div slot='after' onClick={e => {
onOptionClick('/add-function-info/', {
props: {
functionInfo: f
}
});
e.stopPropagation();
}}>
<Icon icon='icon-info'/>
</div>
</ListItem>

19
apps/spreadsheeteditor/mobile/src/view/add/AddLink.jsx
View File

@ -119,15 +119,15 @@ const AddLink = props => {
}}/>
}
{typeLink === 'ext' &&
<ListInput label={_t.textLink}
type="text"
placeholder={_t.textRequired}
value={link}
onChange={(event) => {
setLink(event.target.value);
<ListInput
label={_t.textLink}
type="text"
placeholder={_t.textRequired}
value={link}
onChange={(event) => {
setLink(event.target.value);
if(stateAutoUpdate && !displayDisabled) setDisplayText(event.target.value);
}}
className={isIos ? 'list-input-right' : ''}
}}
/>
}
{typeLink === 'int' &&
@ -144,7 +144,6 @@ const AddLink = props => {
placeholder={_t.textRequired}
value={range}
onChange={(event) => {setRange(event.target.value)}}
className={isIos ? 'list-input-right' : ''}
/>
}
<ListInput label={_t.textDisplay}
@ -156,14 +155,12 @@ const AddLink = props => {
setDisplayText(event.target.value);
setAutoUpdate(event.target.value == '');
}}
className={isIos ? 'list-input-right' : ''}
/>
<ListInput label={_t.textScreenTip}
type="text"
placeholder={_t.textScreenTip}
value={screenTip}
onChange={(event) => {setScreenTip(event.target.value)}}
className={isIos ? 'list-input-right' : ''}
/>
</List>
</Page>

7
apps/spreadsheeteditor/mobile/src/view/add/AddOther.jsx
View File

@ -1,7 +1,8 @@
import React from 'react';
import React, { useContext } from 'react';
import { inject, observer } from 'mobx-react';
import {List, ListItem, Icon} from 'framework7-react';
import { useTranslation } from 'react-i18next';
import { MainContext } from '../../page/main';
const AddOther = inject("storeFocusObjects", "storeAppOptions")(observer(props => {
const { t } = useTranslation();
@ -11,7 +12,8 @@ const AddOther = inject("storeFocusObjects", "storeAppOptions")(observer(props =
const canModifyFilter = storeAppOptions.canModifyFilter;
const isHyperLink = storeFocusObjects.selections.indexOf('hyperlink') > -1;
const hideAddComment = props.hideAddComment();
const wsProps = props.wsProps;
const mainContext = useContext(MainContext);
const wsProps = mainContext.wsProps;
return (
<List>
@ -28,7 +30,6 @@ const AddOther = inject("storeFocusObjects", "storeAppOptions")(observer(props =
<Icon slot="media" icon="icon-sort"></Icon>
</ListItem>
<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>

130
apps/spreadsheeteditor/mobile/src/view/add/AddingPage.jsx Normal file
View File

@ -0,0 +1,130 @@
import React, { useContext } from 'react';
import { Page, Navbar, NavTitle, NavRight, Link, Icon, Tabs, Tab, f7 } from 'framework7-react';
import { useTranslation } from 'react-i18next';
import { AddChartController } from "../../controller/add/AddChart";
import { AddFunctionController } from "../../controller/add/AddFunction";
import AddShapeController from "../../controller/add/AddShape";
import { AddOtherController } from "../../controller/add/AddOther";
import { Device } from "../../../../../common/mobile/utils/device";
import { MainContext } from '../../page/main';
import { AddingContext } from '../../controller/add/Add';
const AddLayoutNavbar = ({ tabs }) => {
const isAndroid = Device.android;
if(!tabs.length) return null;
return (
<Navbar>
{tabs.length > 1 ?
<div className='tab-buttons tabbar'>
{tabs.map((item, index) =>
<Link key={"sse-link-" + item.id} tabLink={"#" + item.id} tabLinkActive={index === 0}>
<Icon slot="media" icon={item.icon}></Icon>
</Link>)}
{isAndroid && <span className='tab-link-highlight' style={{width: 100 / tabs.lenght + '%'}}></span>}
</div> : <NavTitle>{tabs[0].caption}</NavTitle>
}
{Device.phone && <NavRight><Link icon='icon-expand-down' popupClose=".add-popup"></Link></NavRight> }
</Navbar>
)
};
const AddLayoutContent = ({ tabs }) => {
if(!tabs.length) return null;
return (
<Tabs animated>
{tabs.map((item, index) =>
<Tab key={"sse-tab-" + item.id} id={item.id} className="page-content" tabActive={index === 0}>
{item.component}
</Tab>
)}
</Tabs>
)
};
const AddingPage = () => {
const { t } = useTranslation();
const _t = t('View.Add', {returnObjects: true});
const mainContext = useContext(MainContext);
const addingContext = useContext(AddingContext);
// const wsLock = mainContext.wsLock;
const wsProps = mainContext.wsProps;
const showPanels = addingContext.showPanels;
const tabs = [];
if(!wsProps.Objects) {
if(!showPanels) {
tabs.push({
caption: _t.textChart,
id: 'add-chart',
icon: 'icon-add-chart',
component: <AddChartController />
});
}
if(!showPanels || showPanels === 'function') {
tabs.push({
caption: _t.textFunction,
id: 'add-function',
icon: 'icon-add-formula',
component: <AddFunctionController />
});
}
if(!showPanels || showPanels.indexOf('shape') > 0) {
tabs.push({
caption: _t.textShape,
id: 'add-shape',
icon: 'icon-add-shape',
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 && (!wsProps.InsertHyperlinks || !wsProps.Objects || !wsProps.Sort)) {
tabs.push({
caption: _t.textOther,
id: 'add-other',
icon: 'icon-add-other',
component: <AddOtherController />
});
}
// 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) {
f7.popup.close('.add-popup', false);
} else {
f7.popover.close('#add-popover', false);
}
return null;
}
return (
<Page pageContent={false}>
<AddLayoutNavbar tabs={tabs} />
<AddLayoutContent tabs={tabs} />
</Page>
)
};
export default AddingPage;

233
apps/spreadsheeteditor/mobile/src/view/edit/Edit.jsx
View File

@ -1,28 +1,24 @@
import React, {useState, useEffect} from 'react';
import {observer, inject} from "mobx-react";
import { Popover, Sheet, View, Page, Navbar, NavRight, NavLeft, NavTitle, Tabs, Tab, Link } from 'framework7-react';
import React, { useContext, useEffect } from 'react';
import { Popover, Sheet, View } from 'framework7-react';
import { f7 } from 'framework7-react';
import { useTranslation } from 'react-i18next';
import {Device} from '../../../../../common/mobile/utils/device';
import EditCellController from "../../controller/edit/EditCell";
import EditShapeController from "../../controller/edit/EditShape";
import EditImageController from "../../controller/edit/EditImage";
import EditTextController from "../../controller/edit/EditText";
import EditChartController from "../../controller/edit/EditChart";
import { Device } from '../../../../../common/mobile/utils/device';
// import { EditLinkController } from "../../controller/edit/EditLink";
import { PageShapeStyle, PageShapeStyleNoFill, PageReplaceContainer, PageReorderContainer, PageShapeBorderColor, PageShapeCustomBorderColor, PageShapeCustomFillColor } from './EditShape';
import { PageImageReplace, PageImageReorder, PageLinkSettings } from './EditImage';
import { TextColorCell, FillColorCell, CustomTextColorCell, CustomFillColorCell, FontsCell, TextFormatCell, TextOrientationCell, BorderStyleCell, BorderColorCell, CustomBorderColorCell, BorderSizeCell, PageFormatCell, PageAccountingFormatCell, PageCurrencyFormatCell, PageDateFormatCell, PageTimeFormatCell, CellStyle, PageCreationCustomFormat, CustomFormats } 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 { PageEditTypeLink, PageEditSheet } from './EditLink';
import EditingPage from './EditingPage';
import { MainContext } from '../../page/main';
const routes = [
{
path: '/editing-page/',
component: EditingPage,
keepAlive: true
},
// Shape
{
path: '/edit-style-shape/',
component: PageShapeStyle
@ -299,188 +295,41 @@ const routes = [
}
];
const EmptyEditLayout = () => {
const { t } = useTranslation();
const _t = t('View.Edit', {returnObjects: true});
return (
<Page>
<div className="content-block inset">
<div className="content-block-inner">
<p>{_t.textSelectObjectToEdit}</p>
</div>
</div>
</Page>
)
};
const EditLayoutNavbar = ({ editors, inPopover }) => {
const isAndroid = Device.android;
const { t } = useTranslation();
const _t = t('View.Edit', {returnObjects: true});
if(!editors.length) return null;
return (
<Navbar>
{
editors.length > 1 ?
<div className='tab-buttons tabbar'>
{editors.map((item, index) => <Link key={"sse-link-" + item.id} tabLink={"#" + item.id} tabLinkActive={index === 0}>{item.caption}</Link>)}
{isAndroid && <span className='tab-link-highlight' style={{width: 100 / editors.length + '%'}}></span>}
</div> : <NavTitle>{ editors[0].caption }</NavTitle>
}
{ !inPopover && <NavRight><Link icon='icon-expand-down' sheetClose></Link></NavRight> }
</Navbar>
)
};
const EditLayoutContent = ({ editors }) => {
if(!editors.length) return null;
if (editors.length > 1) {
return (
<Tabs animated>
{editors.map((item, index) =>
<Tab key={"sse-tab-" + item.id} id={item.id} className="page-content" tabActive={index === 0}>
{item.component}
</Tab>
)}
</Tabs>
)
} else {
return (
<Page>
{editors[0].component}
</Page>
)
}
};
const EditTabs = props => {
const { t } = useTranslation();
const _t = t('View.Edit', {returnObjects: true});
const store = props.storeFocusObjects;
const wsProps = props.wsProps;
const settings = !store.focusOn ? [] : (store.focusOn === 'obj' ? store.objects : store.selections);
let editors = [];
if (settings.length < 1) {
editors.push({
caption: _t.textSettings,
component: <EmptyEditLayout />
});
} else {
if (!(wsProps.Objects && store.isLockedShape) && settings.indexOf('image') > -1) {
editors.push({
caption: _t.textImage,
id: 'edit-image',
component: <EditImageController />
})
}
if (!(wsProps.Objects && store.isLockedShape) && settings.indexOf('shape') > -1) {
editors.push({
caption: _t.textShape,
id: 'edit-shape',
component: <EditShapeController />
})
}
if (settings.indexOf('cell') > -1) {
editors.push({
caption: _t.textCell,
id: 'edit-text',
component: <EditCellController />
})
}
if (!(wsProps.Objects && store.isLockedShape) && settings.indexOf('chart') > -1) {
editors.push({
caption: _t.textChart,
id: 'edit-chart',
component: <EditChartController />
})
}
if (!(wsProps.Objects && store.isLockedText) && settings.indexOf('text') > -1) {
editors.push({
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(!editors.length) {
if (Device.phone) {
f7.sheet.close('#edit-sheet', false);
} else {
f7.popover.close('#edit-popover', false);
}
return null;
}
return (
<View style={props.style} stackPages={true} routes={routes}>
<Page pageContent={false}>
<EditLayoutNavbar editors={editors} inPopover={props.inPopover}/>
<EditLayoutContent editors={editors} />
</Page>
</View>
)
};
const EditTabsContainer = inject("storeFocusObjects")(observer(EditTabs));
const EditView = props => {
const onOptionClick = (page) => {
$f7.views.current.router.navigate(page);
routes.forEach(route => {
route.options = {
...route.options,
transition: 'f7-push'
};
const show_popover = props.usePopover;
});
const EditView = () => {
const mainContext = useContext(MainContext);
// const api = Common.EditorApi.get();
// const cellinfo = api.asc_getCellInfo();
// const hyperinfo = cellinfo.asc_getHyperlink();
// const isAddShapeHyperlink = api.asc_canAddShapeHyperlink();
useEffect(() => {
if(Device.phone) {
f7.sheet.open('#edit-sheet');
} else {
f7.popover.open('#edit-popover', '#btn-edit');
}
}, []);
return (
show_popover ?
<Popover id="edit-popover" className="popover__titled" closeByOutsideClick={false} onPopoverClosed={() => props.onClosed()}>
<EditTabsContainer isAddShapeHyperlink={props.isAddShapeHyperlink} hyperinfo={props.hyperinfo} inPopover={true} wsLock={props.wsLock} wsProps={props.wsProps} onOptionClick={onOptionClick} style={{height: '410px'}} />
!Device.phone ?
<Popover id="edit-popover" className="popover__titled" closeByOutsideClick={false} onPopoverClosed={() => mainContext.closeOptions('edit')}>
<View style={{ height: '410px' }} routes={routes} url='/editing-page/'>
<EditingPage />
</View>
</Popover> :
<Sheet id="edit-sheet" push onSheetClosed={() => props.onClosed()}>
<EditTabsContainer isAddShapeHyperlink={props.isAddShapeHyperlink} hyperinfo={props.hyperinfo} onOptionClick={onOptionClick} wsLock={props.wsLock} wsProps={props.wsProps} />
<Sheet id="edit-sheet" onSheetClosed={() => mainContext.closeOptions('edit')}>
<View routes={routes} url='/editing-page/'>
<EditingPage />
</View>
</Sheet>
)
};
const EditOptions = props => {
const api = Common.EditorApi.get();
const cellinfo = api.asc_getCellInfo();
const hyperinfo = cellinfo.asc_getHyperlink();
const isAddShapeHyperlink = api.asc_canAddShapeHyperlink();
useEffect(() => {
if ( Device.phone )
f7.sheet.open('#edit-sheet');
else f7.popover.open('#edit-popover', '#btn-edit');
return () => {
// component will unmount
}
});
const onviewclosed = () => {
if ( props.onclosed ) {
props.onclosed();
}
};
return (
<EditView usePopover={!Device.phone} onClosed={onviewclosed} isAddShapeHyperlink={isAddShapeHyperlink} hyperinfo={hyperinfo} wsLock={props.wsLock} wsProps={props.wsProps} />
)
};
export default EditOptions;
export default EditView;

6
apps/spreadsheeteditor/mobile/src/view/edit/EditCell.jsx
View File

@ -1,6 +1,6 @@
import React, {Fragment, useState, useEffect} from 'react';
import {observer, inject} from "mobx-react";
import {f7, f7router, List, ListItem, Icon, Row, Button, Page, Navbar, Segmented, BlockTitle, NavRight, Link, Toggle, Swiper, SwiperSlide, ListInput, Block} from 'framework7-react';
import {f7, List, ListItem, Icon, Button, Page, Navbar, Segmented, BlockTitle, NavRight, Link, Toggle, ListInput, Block} 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';
@ -48,11 +48,11 @@ const EditCell = props => {
<>
<List>
<ListItem className='buttons'>
<Row>
<div className="row">
<a className={'button' + (isBold ? ' active' : '')} onClick={() => {props.toggleBold(!isBold)}}><b>B</b></a>
<a className={'button' + (isItalic ? ' active' : '')} onClick={() => {props.toggleItalic(!isItalic)}}><i>I</i></a>
<a className={'button' + (isUnderline ? ' active' : '')} onClick={() => {props.toggleUnderline(!isUnderline)}} style={{textDecoration: "underline"}}>U</a>
</Row>
</div>
</ListItem>
<ListItem title={_t.textTextColor} link="/edit-cell-text-color/" routeProps={{
onTextColor: props.onTextColor,

3
apps/spreadsheeteditor/mobile/src/view/edit/EditChart.jsx
View File

@ -1,9 +1,10 @@
import React, {Fragment, useState, useEffect} from 'react';
import {observer, inject} from "mobx-react";
import {f7, List, ListItem, ListButton, ListInput, Icon, Page, Navbar, NavRight, BlockTitle, Toggle, Range, Link, Tabs, Tab, Swiper, SwiperSlide} from 'framework7-react';
import {f7, List, ListItem, ListButton, ListInput, Icon, Page, Navbar, NavRight, BlockTitle, Toggle, Range, Link} from 'framework7-react';
import { useTranslation } from 'react-i18next';
import {Device} from '../../../../../common/mobile/utils/device';
import {CustomColorPicker, ThemeColorPalette} from "../../../../../common/mobile/lib/component/ThemeColorPalette.jsx";
import { Swiper, SwiperSlide } from 'swiper/react';
const PageCustomFillColor = props => {
const { t } = useTranslation();

18
apps/spreadsheeteditor/mobile/src/view/edit/EditText.jsx
View File

@ -1,8 +1,8 @@
import React, {Fragment, useState, useEffect} from 'react';
import React, {Fragment, useState} from 'react';
import {observer, inject} from "mobx-react";
import {f7, List, ListItem, Icon, Row, Button, Page, Navbar, NavRight, Segmented, BlockTitle, Link} from 'framework7-react';
import {List, ListItem, Icon, Button, Page, Navbar, NavRight, Segmented, BlockTitle, Link} from 'framework7-react';
import { useTranslation } from 'react-i18next';
import {Device} from '../../../../../common/mobile/utils/device';
import { Device } from '../../../../../common/mobile/utils/device';
import { ThemeColorPalette, CustomColorPicker } from '../../../../../common/mobile/lib/component/ThemeColorPalette.jsx';
import { LocalStorage } from '../../../../../common/mobile/utils/LocalStorage.mjs';
@ -36,11 +36,11 @@ const EditText = props => {
changeFontFamily: props.changeFontFamily
}}/>
<ListItem className='buttons'>
<Row>
<div className="row">
<a className={'button' + (isBold ? ' active' : '')} onClick={() => {props.toggleBold(!isBold)}}><b>B</b></a>
<a className={'button' + (isItalic ? ' active' : '')} onClick={() => {props.toggleItalic(!isItalic)}}><i>I</i></a>
<a className={'button' + (isUnderline ? ' active' : '')} onClick={() => {props.toggleUnderline(!isUnderline)}} style={{textDecoration: "underline"}}>U</a>
</Row>
</div>
</ListItem>
<ListItem title={_t.textTextColor} link="/edit-text-font-color/" routeProps={{
onTextColor: props.onTextColor
@ -55,7 +55,7 @@ const EditText = props => {
<Fragment>
<List>
<ListItem className='buttons'>
<Row>
<div className="row">
<a className={'button' + (paragraphAlign === AscCommon.align_Left ? ' active' : '')} onClick={() => {props.onParagraphAlign('left')}}>
<Icon slot="media" icon="icon-text-align-left"></Icon>
</a>
@ -68,10 +68,10 @@ const EditText = props => {
<a className={'button' + (paragraphAlign === AscCommon.align_Justify ? ' active' : '')} onClick={() => {props.onParagraphAlign('justify')}}>
<Icon slot="media" icon="icon-text-align-jast"></Icon>
</a>
</Row>
</div>
</ListItem>
<ListItem className='buttons'>
<Row>
<div className="row">
<a className={'button' + (paragraphValign === Asc.c_oAscVAlign.Top ? ' active' : '')} onClick={() => {props.onParagraphValign('top')}}>
<Icon slot="media" icon="icon-text-valign-top"></Icon>
</a>
@ -81,7 +81,7 @@ const EditText = props => {
<a className={'button' + (paragraphValign === Asc.c_oAscVAlign.Bottom ? ' active' : '')} onClick={() => {props.onParagraphValign('bottom')}}>
<Icon slot="media" icon="icon-text-valign-bottom"></Icon>
</a>
</Row>
</div>
</ListItem>
</List>
</Fragment>

155
apps/spreadsheeteditor/mobile/src/view/edit/EditingPage.jsx Normal file
View File

@ -0,0 +1,155 @@
import React, { useContext } from 'react';
import { observer, inject } from "mobx-react";
import { Page, Navbar, NavRight, NavTitle, Tabs, Tab, Link, f7 } from 'framework7-react';
import { useTranslation } from 'react-i18next';
import EditCellController from "../../controller/edit/EditCell";
import EditShapeController from "../../controller/edit/EditShape";
import EditImageController from "../../controller/edit/EditImage";
import EditTextController from "../../controller/edit/EditText";
import EditChartController from "../../controller/edit/EditChart";
import { Device } from "../../../../../common/mobile/utils/device";
import { MainContext } from '../../page/main';
const EmptyEditLayout = () => {
const { t } = useTranslation();
const _t = t('View.Edit', {returnObjects: true});
return (
<Page>
<div className="content-block inset">
<div className="content-block-inner">
<p>{_t.textSelectObjectToEdit}</p>
</div>
</div>
</Page>
)
};
const EditLayoutNavbar = ({ editors }) => {
const isAndroid = Device.android;
const { t } = useTranslation();
const _t = t('View.Edit', {returnObjects: true});
if(!editors.length) return null;
return (
<Navbar>
{editors.length > 1 ?
<div className='tab-buttons tabbar'>
{editors.map((item, index) => <Link key={"sse-link-" + item.id} tabLink={"#" + item.id} tabLinkActive={index === 0}>{item.caption}</Link>)}
{isAndroid && <span className='tab-link-highlight' style={{width: 100 / editors.length + '%'}}></span>}
</div> :
<NavTitle>{editors[0].caption}</NavTitle>
}
{Device.phone &&
<NavRight>
<Link icon='icon-expand-down' sheetClose></Link>
</NavRight>
}
</Navbar>
)
};
const EditLayoutContent = ({ editors }) => {
if(!editors.length) return null;
if (editors.length > 1) {
return (
<Tabs animated>
{editors.map((item, index) =>
<Tab key={"sse-tab-" + item.id} id={item.id} className="page-content" tabActive={index === 0}>
{item.component}
</Tab>
)}
</Tabs>
)
} else {
return (
<Page>
{editors[0].component}
</Page>
)
}
};
const EditingPage = inject('storeFocusObjects')(observer(props => {
const { t } = useTranslation();
const _t = t('View.Edit', {returnObjects: true});
const mainContext = useContext(MainContext);
const store = props.storeFocusObjects;
const wsProps = mainContext.wsProps;
const settings = !store.focusOn ? [] : (store.focusOn === 'obj' ? store.objects : store.selections);
let editors = [];
if (settings.length < 1) {
editors.push({
caption: _t.textSettings,
component: <EmptyEditLayout />
});
} else {
if (!(wsProps.Objects && store.isLockedShape) && settings.indexOf('image') > -1) {
editors.push({
caption: _t.textImage,
id: 'edit-image',
component: <EditImageController />
})
}
if (!(wsProps.Objects && store.isLockedShape) && settings.indexOf('shape') > -1) {
editors.push({
caption: _t.textShape,
id: 'edit-shape',
component: <EditShapeController />
})
}
if (settings.indexOf('cell') > -1) {
editors.push({
caption: _t.textCell,
id: 'edit-text',
component: <EditCellController />
})
}
if (!(wsProps.Objects && store.isLockedShape) && settings.indexOf('chart') > -1) {
editors.push({
caption: _t.textChart,
id: 'edit-chart',
component: <EditChartController />
})
}
if (!(wsProps.Objects && store.isLockedText) && settings.indexOf('text') > -1) {
editors.push({
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(!editors.length) {
if (Device.phone) {
f7.sheet.close('#edit-sheet', false);
} else {
f7.popover.close('#edit-popover', false);
}
return null;
}
return (
<Page pageContent={false}>
<EditLayoutNavbar editors={editors} />
<EditLayoutContent editors={editors} />
</Page>
)
}));
export default EditingPage;

261
apps/spreadsheeteditor/mobile/src/view/settings/Settings.jsx
View File

@ -1,25 +1,25 @@
import React, {Component, useEffect} from 'react';
import {View,Page,Navbar,NavRight,Link,Popup,Popover,Icon,ListItem,List} from 'framework7-react';
import { useTranslation } from 'react-i18next';
import {f7} from 'framework7-react';
import {Device} from '../../../../../common/mobile/utils/device';
import { observer, inject } from "mobx-react";
import React, { useContext, useEffect } from 'react';
import { View, Popup, Popover, f7 } from 'framework7-react';
import { Device } from '../../../../../common/mobile/utils/device';
import SpreadsheetSettingsController from '../../controller/settings/SpreadsheetSettings.jsx';
import ApplicationSettingsController from '../../controller/settings/ApplicationSettings.jsx';
import SpreadsheetInfoController from '../../controller/settings/SpreadsheetInfo.jsx';
import {DownloadWithTranslation} from '../../controller/settings/Download.jsx';
import {SpreadsheetColorSchemes, SpreadsheetFormats, SpreadsheetMargins} from './SpreadsheetSettings.jsx';
import {MacrosSettings, RegionalSettings, FormulaLanguage} from './ApplicationSettings.jsx';
import { DownloadWithTranslation } from '../../controller/settings/Download.jsx';
import { SpreadsheetColorSchemes, SpreadsheetFormats, SpreadsheetMargins } from './SpreadsheetSettings.jsx';
import { MacrosSettings, RegionalSettings, FormulaLanguage } from './ApplicationSettings.jsx';
// import SpreadsheetAbout from './SpreadsheetAbout.jsx';
import About from '../../../../../common/mobile/lib/view/About';
import { Direction } from '../../../../../spreadsheeteditor/mobile/src/view/settings/ApplicationSettings';
import SharingSettings from "../../../../../common/mobile/lib/view/SharingSettings";
// import SharingSettings from "../../../../../common/mobile/lib/view/SharingSettings";
import SettingsPage from './SettingsPage';
import { MainContext } from '../../page/main';
import VersionHistoryController from '../../../../../common/mobile/lib/controller/VersionHistory';
const routes = [
{
path: '/',
component: 'TSettingsView'
path: '/settings-page/',
component: SettingsPage,
keepAlive: true
},
{
path: '/spreadsheet-settings/',
@ -81,224 +81,37 @@ const routes = [
},
];
const SettingsList = inject("storeAppOptions", "storeVersionHistory")(observer(props => {
const { t } = useTranslation();
const _t = t('View.Settings', {returnObjects: true});
const storeVersionHistory = props.storeVersionHistory;
const isVersionHistoryMode = storeVersionHistory.isVersionHistoryMode;
const navbar = <Navbar title={_t.textSettings}>
{!props.inPopover && <NavRight><Link popupClose=".settings-popup">{_t.textDone}</Link></NavRight>}
</Navbar>;
const onoptionclick = page => {
if ( props.onOptionClick )
props.onOptionClick(page)
routes.forEach(route => {
route.options = {
...route.options,
transition: 'f7-push'
};
});
const closeModal = () => {
if (Device.phone) {
f7.sheet.close('.settings-popup', false);
const SettingsView = () => {
const mainContext = useContext(MainContext);
useEffect(() => {
if(Device.phone) {
f7.popup.open('.settings-popup');
} else {
f7.popover.close('#settings-popover', false);
f7.popover.open('#settings-popover', '#btn-settings');
}
};
}, []);
const onOpenOptions = keyword => {
closeModal();
props.openOptions(keyword);
}
const onPrint = () => {
const api = Common.EditorApi.get();
closeModal();
setTimeout(() => {
api.asc_Print();
}, 400);
};
const showHelp = () => {
// let url = '{{HELP_URL}}';
// let url = 'https://helpcenter.onlyoffice.com';
let url = __HELP_URL__;
if (url.charAt(url.length-1) !== '/') {
url += '/';
}
if (Device.sailfish || Device.android) {
url+='mobile-applications/documents/mobile-web-editors/android/index.aspx';
}
else {
url+='mobile-applications/documents/mobile-web-editors/ios/index.aspx';
}
closeModal();
window.open(url, "_blank");
};
const showFeedback = () => {
let config = props.storeAppOptions.config;
closeModal();
if(config && !!config.feedback && !!config.feedback.url) {
window.open(config.feedback.url, "_blank");
} else window.open(__SUPPORT_URL__, "_blank");
};
const appOptions = props.storeAppOptions;
let _isEdit = false,
_canDownload = false,
_canDownloadOrigin = false,
_canAbout = true,
_canHelp = true,
_canPrint = false,
_canFeedback = true;
if (appOptions.isDisconnected) {
_isEdit = false;
if (!appOptions.enableDownload)
_canPrint = _canDownload = _canDownloadOrigin = false;
} else {
_isEdit = appOptions.isEdit;
_canDownload = appOptions.canDownload;
_canDownloadOrigin = appOptions.canDownloadOrigin;
_canPrint = appOptions.canPrint;
if (appOptions.customization && appOptions.canBrandingExt) {
_canAbout = appOptions.customization.about !== false;
}
if (appOptions.customization) {
_canHelp = appOptions.customization.help !== false;
_canFeedback = appOptions.customization.feedback !== false;
}
}
const onDownloadOrigin = () => {
closeModal();
setTimeout(() => {
Common.EditorApi.get().asc_DownloadOrigin();
}, 0);
};
return (
<View style={props.style} stackPages={true} routes={routes}>
<Page>
{navbar}
<List>
{!props.inPopover &&
<ListItem disabled={appOptions.readerMode ? true : false} title={!_isEdit || isVersionHistoryMode ? _t.textFind : _t.textFindAndReplace} link="#" searchbarEnable='.searchbar' onClick={closeModal} className='no-indicator'>
<Icon slot="media" icon="icon-search"></Icon>
</ListItem>
}
{window.matchMedia("(max-width: 359px)").matches && !isVersionHistoryMode ?
<ListItem title={_t.textCollaboration} link="#" onClick={() => onOpenOptions('coauth')} className='no-indicator'>
<Icon slot="media" icon="icon-collaboration"></Icon>
</ListItem>
: null}
{_isEdit &&
<ListItem title={t('View.Settings.textVersionHistory')} link="#" onClick={() => {
if(Device.phone) {
onOpenOptions('history');
} else {
onoptionclick.bind(this, "/version-history")();
}
}}>
<Icon slot="media" icon="icon-version-history"></Icon>
</ListItem>
}
{(_isEdit && !isVersionHistoryMode) &&
<ListItem link="#" title={_t.textSpreadsheetSettings} onClick={onoptionclick.bind(this, '/spreadsheet-settings/')}>
<Icon slot="media" icon="icon-table-settings"></Icon>
</ListItem>
}
<ListItem title={_t.textApplicationSettings} link="#" onClick={onoptionclick.bind(this, '/application-settings/')}>
<Icon slot="media" icon="icon-app-settings"></Icon>
</ListItem>
{_canDownload &&
<ListItem title={_t.textDownload} link="#" onClick={onoptionclick.bind(this, '/download/')}>
<Icon slot="media" icon="icon-download"></Icon>
</ListItem>
}
{_canDownloadOrigin &&
<ListItem title={_t.textDownload} link="#" onClick={onDownloadOrigin} className='no-indicator'>
<Icon slot="media" icon="icon-download"></Icon>
</ListItem>
}
{_canPrint &&
<ListItem title={_t.textPrint} onClick={onPrint}>
<Icon slot="media" icon="icon-print"></Icon>
</ListItem>
}
<ListItem title={_t.textSpreadsheetInfo} link="#" onClick={onoptionclick.bind(this, "/spreadsheet-info/")}>
<Icon slot="media" icon="icon-info"></Icon>
</ListItem>
{_canHelp &&
<ListItem title={_t.textHelp} link="#" className='no-indicator' onClick={showHelp}>
<Icon slot="media" icon="icon-help"></Icon>
</ListItem>
}
{_canAbout &&
<ListItem title={_t.textAbout} link="#" onClick={onoptionclick.bind(this, "/about/")}>
<Icon slot="media" icon="icon-about"></Icon>
</ListItem>
}
{_canFeedback &&
<ListItem title={t('View.Settings.textFeedback')} link="#" className='no-indicator' onClick={showFeedback}>
<Icon slot="media" icon="icon-feedback"></Icon>
</ListItem>
}
</List>
</Page>
</View>
!Device.phone ?
<Popover id="settings-popover" className="popover__titled" onPopoverClosed={() => mainContext.closeOptions('settings')}>
<View routes={routes} url='/settings-page/' style={{ height: '410px' }}>
<SettingsPage />
</View>
</Popover> :
<Popup className="settings-popup" onPopupClosed={() => mainContext.closeOptions('settings')}>
<View routes={routes} url='/settings-page/'>
<SettingsPage />
</View>
</Popup>
)
}));
class SettingsView extends Component {
constructor(props) {
super(props);
this.onoptionclick = this.onoptionclick.bind(this);
}
onoptionclick(page){
f7.views.current.router.navigate(page);
}
render() {
const show_popover = this.props.usePopover;
return (
show_popover ?
<Popover id="settings-popover" className="popover__titled" onPopoverClosed={() => this.props.onclosed()}>
<SettingsList inPopover={true} openOptions={this.props.openOptions} onOptionClick={this.onoptionclick} style={{height: '410px'}} />
</Popover> :
<Popup className="settings-popup" onPopupClosed={() => this.props.onclosed()}>
<SettingsList onOptionClick={this.onoptionclick} openOptions={this.props.openOptions} />
</Popup>
)
}
}
const Settings = props => {
useEffect(() => {
if ( Device.phone )
f7.popup.open('.settings-popup');
else f7.popover.open('#settings-popover', '#btn-settings');
return () => {
}
});
const onviewclosed = () => {
if ( props.onclosed ) {
props.onclosed();
}
};
return <SettingsView usePopover={!Device.phone} onclosed={onviewclosed} openOptions={props.openOptions} />
};
export default Settings;
export default SettingsView;

121
apps/spreadsheeteditor/mobile/src/view/settings/SettingsPage.jsx Normal file
View File

@ -0,0 +1,121 @@
import React, { useContext } from 'react';
import { Page, Navbar, NavRight, Link, Icon, ListItem, List, f7 } from 'framework7-react';
import { useTranslation } from 'react-i18next';
import { Device } from '../../../../../common/mobile/utils/device';
import { observer, inject } from "mobx-react";
import { MainContext } from '../../page/main';
import { SettingsContext } from '../../controller/settings/Settings';
const SettingsPage = inject('storeAppOptions')(observer(props => {
const { t } = useTranslation();
const appOptions = props.storeAppOptions;
const mainContext = useContext(MainContext);
const settingsContext = useContext(SettingsContext);
const _t = t('View.Settings', {returnObjects: true});
const navbar = <Navbar title={_t.textSettings}>
{Device.phone && <NavRight><Link popupClose=".settings-popup">{_t.textDone}</Link></NavRight>}
</Navbar>;
const onOpenOptions = name => {
settingsContext.closeModal();
mainContext.openOptions(name);
}
let _isEdit = false,
_canDownload = false,
_canDownloadOrigin = false,
_canAbout = true,
_canHelp = true,
_canPrint = false,
_canFeedback = true;
if (appOptions.isDisconnected) {
_isEdit = false;
if (!appOptions.enableDownload)
_canPrint = _canDownload = _canDownloadOrigin = false;
} else {
_isEdit = appOptions.isEdit;
_canDownload = appOptions.canDownload;
_canDownloadOrigin = appOptions.canDownloadOrigin;
_canPrint = appOptions.canPrint;
if (appOptions.customization && appOptions.canBrandingExt) {
_canAbout = appOptions.customization.about !== false;
}
if (appOptions.customization) {
_canHelp = appOptions.customization.help !== false;
_canFeedback = appOptions.customization.feedback !== false;
}
}
return (
<Page>
{navbar}
<List>
{!props.inPopover &&
<ListItem disabled={appOptions.readerMode ? true : false} title={!_isEdit ? _t.textFind : _t.textFindAndReplace} link="#" searchbarEnable='.searchbar' onClick={settingsContext.closeModal} className='no-indicator'>
<Icon slot="media" icon="icon-search"></Icon>
</ListItem>
}
{window.matchMedia("(max-width: 359px)").matches ?
<ListItem title={_t.textCollaboration} link="#" onClick={() => onOpenOptions('coauth')} className='no-indicator'>
<Icon slot="media" icon="icon-collaboration"></Icon>
</ListItem>
: null}
{_isEdit &&
<ListItem link="/spreadsheet-settings/" title={_t.textSpreadsheetSettings}>
<Icon slot="media" icon="icon-table-settings"></Icon>
</ListItem>
}
<ListItem title={_t.textApplicationSettings} link="/application-settings/">
<Icon slot="media" icon="icon-app-settings"></Icon>
</ListItem>
{_isEdit &&
<ListItem title={t('View.Settings.textVersionHistory')} link="/version-history" onClick={() => {
if(Device.phone) {
onOpenOptions('history');
}
}}>
<Icon slot="media" icon="icon-version-history"></Icon>
</ListItem>
}
{_canDownload &&
<ListItem title={_t.textDownload} link="/download/">
<Icon slot="media" icon="icon-download"></Icon>
</ListItem>
}
{_canDownloadOrigin &&
<ListItem title={_t.textDownload} link="#" onClick={settingsContext.onDownloadOrigin} className='no-indicator'>
<Icon slot="media" icon="icon-download"></Icon>
</ListItem>
}
{_canPrint &&
<ListItem title={_t.textPrint} onClick={settingsContext.onPrint}>
<Icon slot="media" icon="icon-print"></Icon>
</ListItem>
}
<ListItem title={_t.textSpreadsheetInfo} link="/spreadsheet-info/">
<Icon slot="media" icon="icon-info"></Icon>
</ListItem>
{_canHelp &&
<ListItem title={_t.textHelp} link="#" className='no-indicator' onClick={settingsContext.showHelp}>
<Icon slot="media" icon="icon-help"></Icon>
</ListItem>
}
{_canAbout &&
<ListItem title={_t.textAbout} link="/about/">
<Icon slot="media" icon="icon-about"></Icon>
</ListItem>
}
{_canFeedback &&
<ListItem title={t('View.Settings.textFeedback')} link="#" className='no-indicator' onClick={settingsContext.showFeedback}>
<Icon slot="media" icon="icon-feedback"></Icon>
</ListItem>
}
</List>
</Page>
)
}));
export default SettingsPage;

50
build/package-lock.json generated
View File

@ -3009,6 +3009,17 @@
"url": "https://github.com/fb55/domhandler?sponsor=1"
}
},
"node_modules/domhandler/node_modules/domelementtype": {
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
"integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==",
"funding": [
{
"type": "github",
"url": "https://github.com/sponsors/fb55"
}
]
},
"node_modules/domutils": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/domutils/-/domutils-3.1.0.tgz",
@ -7489,6 +7500,11 @@
"triple-beam": "^1.3.0"
}
},
"node_modules/logform/node_modules/ms": {
"version": "2.1.3",
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
"integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="
},
"node_modules/longest": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/longest/-/longest-1.0.1.tgz",
@ -7804,31 +7820,33 @@
"ansi-colors": "4.1.1",
"browser-stdout": "1.3.1",
"chokidar": "3.5.3",
"debug": "4.3.4",
"debug": "4.3.3",
"diff": "5.0.0",
"escape-string-regexp": "4.0.0",
"find-up": "5.0.0",
"glob": "7.2.0",
"growl": "1.10.5",
"he": "1.2.0",
"js-yaml": "4.1.0",
"log-symbols": "4.1.0",
"minimatch": "5.0.1",
"minimatch": "4.2.1",
"ms": "2.1.3",
"nanoid": "3.3.3",
"nanoid": "3.3.1",
"serialize-javascript": "6.0.0",
"strip-json-comments": "3.1.1",
"supports-color": "8.1.1",
"workerpool": "6.2.1",
"which": "2.0.2",
"workerpool": "6.2.0",
"yargs": "16.2.0",
"yargs-parser": "20.2.4",
"yargs-unparser": "2.0.0"
},
"bin": {
"_mocha": "bin/_mocha",
"mocha": "bin/mocha.js"
"mocha": "bin/mocha"
},
"engines": {
"node": ">= 14.0.0"
"node": ">= 12.0.0"
},
"funding": {
"type": "opencollective",
@ -7898,12 +7916,12 @@
}
},
"node_modules/mocha/node_modules/minimatch": {
"version": "5.0.1",
"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.0.1.tgz",
"integrity": "sha512-nLDxIFRyhDblz3qMuq+SoRZED4+miJ/G+tdDrjkkkRnjAsBexeGpgjLEQ0blJy7rHhR2b93rhQY4SvyWu9v03g==",
"version": "4.2.1",
"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-4.2.1.tgz",
"integrity": "sha512-9Uq1ChtSZO+Mxa/CL1eGizn2vRn3MlLgzhT0Iz8zaY8NdvxvB0d5QdPFmCKf7JKA9Lerx5vRrnwO03jsSfGG9g==",
"dev": true,
"dependencies": {
"brace-expansion": "^2.0.1"
"brace-expansion": "^1.1.7"
},
"engines": {
"node": ">=10"
@ -7947,9 +7965,9 @@
}
},
"node_modules/nanoid": {
"version": "3.3.3",
"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.3.tgz",
"integrity": "sha512-p1sjXuopFs0xg+fPASzQ28agW1oHD7xDsd9Xkf3T15H3c/cifrFHVwrh74PdoklAPi+i7MdRsE47vm2r6JoB+w==",
"version": "3.3.1",
"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.1.tgz",
"integrity": "sha512-n6Vs/3KGyxPQd6uO0eH4Bv0ojGSUvuLlIHtC3Y0kEO23YRge8H9x1GCzLn28YX0H66pMkxuaeESFq4tKISKwdw==",
"dev": true,
"bin": {
"nanoid": "bin/nanoid.cjs"
@ -14179,9 +14197,9 @@
"integrity": "sha512-gvVzJFlPycKc5dZN4yPkP8w7Dc37BtP1yczEneOb4uq34pXZcvrtRTmWV8W+Ume+XCxKgbjM+nevkyFPMybd4Q=="
},
"node_modules/workerpool": {
"version": "6.2.1",
"resolved": "https://registry.npmjs.org/workerpool/-/workerpool-6.2.1.tgz",
"integrity": "sha512-ILEIE97kDZvF9Wb9f6h5aXK4swSlKGUcOEGiIYb2OOu/IrDU9iwj0fD//SsA6E5ibwJxpEvhullJY4Sl4GcpAw==",
"version": "6.2.0",
"resolved": "https://registry.npmjs.org/workerpool/-/workerpool-6.2.0.tgz",
"integrity": "sha512-Rsk5qQHJ9eowMH28Jwhe8HEbmdYDX4lwoMWshiCXugjtHqMD9ZbiqSDLxcsfdqsETPzVUtX5s1Z5kStiIM6l4A==",
"dev": true
},
"node_modules/wrap-ansi": {

8
vendor/framework7-react/package.json vendored
View File

@ -29,9 +29,9 @@
],
"dependencies": {
"dom7": "^3.0.0",
"framework7": "^7.0.8",
"framework7-icons": "^3.0.1",
"framework7-react": "^7.0.8",
"framework7": "^8.0.5",
"framework7-icons": "^5.0.5",
"framework7-react": "^8.0.5",
"i18next": "^23.4.1",
"i18next-fetch-backend": "^5.0.2",
"mobx": "^6.7.0",
@ -42,7 +42,7 @@
"react-dom": "^18.1.0",
"react-i18next": "^13.0.3",
"react-transition-group": "^4.4.5",
"swiper": "^8.2.4",
"swiper": "^9.3.1",
"template7": "^1.4.2",
"url": "^0.11.0"
},