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

[SSE mobile] Change routing and props

Browse Source
This commit is contained in:
SergeyEzhin
2023-08-10 17:05:23 +03:00
parent b50002384f
commit 720dc5b4cd
18 changed files with 733 additions and 716 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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;

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

@ -1,23 +1,22 @@
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';
export const MainContext = createContext();
class MainPage extends Component {
constructor(props) {
@ -128,67 +127,78 @@ 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.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)}
/>
}
{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>
)
}
}

243
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/',
@ -76,201 +75,31 @@ routes.forEach(route => {
};
});
const AddLayoutNavbar = ({ tabs, inPopover }) => {
const isAndroid = Device.android;
const AddView = props => {
const mainContext = useContext(MainContext);
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>
}
{ !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} 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;

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>

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

@ -117,15 +117,16 @@ 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}
className={isIos ? 'list-input-right' : ''}
onChange={(event) => {
setLink(event.target.value);
if(stateAutoUpdate && !displayDisabled) setDisplayText(event.target.value);
}}
className={isIos ? 'list-input-right' : ''}
}}
/>
}
{typeLink === 'int' &&

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;

224
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
@ -306,188 +302,34 @@ routes.forEach(route => {
};
});
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 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();
const EditLayoutNavbar = ({ editors, inPopover }) => {
const isAndroid = Device.android;
const { t } = useTranslation();
const _t = t('View.Edit', {returnObjects: true});
if(!editors.length) return null;
useEffect(() => {
if(Device.phone) {
f7.sheet.open('#edit-sheet');
} else {
f7.popover.open('#edit-popover', '#btn-edit');
}
}, []);
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} 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);
};
const show_popover = props.usePopover;
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" 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;

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;

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

@ -1,24 +1,24 @@
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';
const routes = [
{
path: '/',
component: 'TSettingsView'
path: '/settings-page/',
component: SettingsPage,
keepAlive: true
},
{
path: '/spreadsheet-settings/',
@ -77,210 +77,30 @@ routes.forEach(route => {
};
});
const SettingsList = inject("storeAppOptions")(observer(props => {
const { t } = useTranslation();
const _t = t('View.Settings', {returnObjects: true});
const navbar = <Navbar title={_t.textSettings}>
{!props.inPopover && <NavRight><Link popupClose=".settings-popup">{_t.textDone}</Link></NavRight>}
</Navbar>;
const SettingsView = () => {
const mainContext = useContext(MainContext);
const onoptionclick = page => {
if ( props.onOptionClick )
props.onOptionClick(page)
};
const closeModal = () => {
if (Device.phone) {
f7.sheet.close('.settings-popup', false);
useEffect(() => {
if(Device.phone) {
f7.popup.open('.settings-popup');
} else {
f7.popover.close('#settings-popover', false);
f7.popover.open('#settings-popover', '#btn-settings');
}
};
}, []);
const onOpenCollaboration = async () => {
await closeModal();
await props.openOptions('coauth');
}
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} routes={routes}>
<Page>
{navbar}
<List>
{!props.inPopover &&
<ListItem disabled={appOptions.readerMode ? true : false} title={!_isEdit ? _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 ?
<ListItem title={_t.textCollaboration} link="#" onClick={onOpenCollaboration} className='no-indicator'>
<Icon slot="media" icon="icon-collaboration"></Icon>
</ListItem>
: null}
{_isEdit &&
<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;

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

@ -0,0 +1,112 @@
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>
{_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;