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

Merge pull request #1241 from ONLYOFFICE/feature/bug-fixes

Browse source 
Feature/bug fixes
This commit is contained in:
maxkadushkin 2021-10-15 11:44:45 +03:00 committed by GitHub
parent 2c5e17fd0c 7a4bd9484c
commit 587f471e38
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
15 changed files with 307 additions and 178 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
apps/spreadsheeteditor/mobile/src/controller/ContextMenu.jsx
View file

@ -9,14 +9,16 @@ import { idContextMenuElement } from '../../../../common/mobile/lib/view/Context
import { Device } from '../../../../common/mobile/utils/device'; import { Device } from '../../../../common/mobile/utils/device';
import EditorUIController from '../lib/patch'; import EditorUIController from '../lib/patch';
@inject ( stores => ({ @inject (stores => ({
isEdit: stores.storeAppOptions.isEdit, isEdit: stores.storeAppOptions.isEdit,
canComments: stores.storeAppOptions.canComments, canComments: stores.storeAppOptions.canComments,
canViewComments: stores.storeAppOptions.canViewComments, canViewComments: stores.storeAppOptions.canViewComments,
canCoAuthoring: stores.storeAppOptions.canCoAuthoring, canCoAuthoring: stores.storeAppOptions.canCoAuthoring,
users: stores.users, users: stores.users,
isDisconnected: stores.users.isDisconnected, isDisconnected: stores.users.isDisconnected,
storeSheets: stores.sheets storeSheets: stores.sheets,
wsProps: stores.storeWorksheets.wsProps,
wsLock: stores.storeWorksheets.wsLock
})) }))
class ContextMenu extends ContextMenuController { class ContextMenu extends ContextMenuController {
constructor(props) { constructor(props) {

43
apps/spreadsheeteditor/mobile/src/controller/Main.jsx
View file

@ -31,7 +31,8 @@ import { StatusbarController } from "./Statusbar";
"storeSpreadsheetSettings", "storeSpreadsheetSettings",
"storeSpreadsheetInfo", "storeSpreadsheetInfo",
"storeApplicationSettings", "storeApplicationSettings",
"storeToolbarSettings" "storeToolbarSettings",
"storeWorksheets"
) )
class MainController extends Component { class MainController extends Component {
constructor(props) { constructor(props) {
@ -47,6 +48,9 @@ class MainController extends Component {
licenseType: false, licenseType: false,
isDocModified: false isDocModified: false
}; };
this.wsLockOptions = ['SelectLockedCells', 'SelectUnlockedCells', 'FormatCells', 'FormatColumns', 'FormatRows', 'InsertColumns', 'InsertRows', 'InsertHyperlinks', 'DeleteColumns',
'DeleteRows', 'Sort', 'AutoFilter', 'PivotTables', 'Objects', 'Scenarios'];
this.defaultTitleText = __APP_TITLE_TEXT__; this.defaultTitleText = __APP_TITLE_TEXT__;
@ -398,6 +402,43 @@ class MainController extends Component {
storeFocusObjects.setFunctionsDisabled(state === Asc.c_oAscCellEditorState.editText); storeFocusObjects.setFunctionsDisabled(state === Asc.c_oAscCellEditorState.editText);
}); });
this.api.asc_registerCallback('asc_onChangeProtectWorksheet', this.onChangeProtectSheet.bind(this));
this.api.asc_registerCallback('asc_onActiveSheetChanged', this.onChangeProtectSheet.bind(this));
}
onChangeProtectSheet() {
const storeWorksheets = this.props.storeWorksheets;
let {wsLock, wsProps} = this.getWSProps(true);
storeWorksheets.setWsLock(wsLock);
storeWorksheets.setWsProps(wsProps);
}
getWSProps(update) {
const storeAppOptions = this.props.storeAppOptions;
let wsProtection = {};
if (!storeAppOptions.config || !storeAppOptions.isEdit && !storeAppOptions.isRestrictedEdit) return;
if (update) {
let wsLock = !!this.api.asc_isProtectedSheet();
let wsProps = {};
if (wsLock) {
let props = this.api.asc_getProtectedSheet();
props && this.wsLockOptions.forEach(function(item){
wsProps[item] = props['asc_get' + item] ? props['asc_get' + item]() : false;
});
} else {
this.wsLockOptions.forEach(function(item){
wsProps[item] = false;
});
}
wsProtection = {wsLock, wsProps};
}
return wsProtection;
} }
_onLongActionEnd(type, id) { _onLongActionEnd(type, id) {

8
apps/spreadsheeteditor/mobile/src/controller/Toolbar.jsx
View file

@ -4,14 +4,18 @@ import { f7 } from 'framework7-react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import ToolbarView from "../view/Toolbar"; import ToolbarView from "../view/Toolbar";
const ToolbarController = inject('storeAppOptions', 'users', 'storeSpreadsheetInfo', 'storeFocusObjects', 'storeToolbarSettings')(observer(props => { const ToolbarController = inject('storeAppOptions', 'users', 'storeSpreadsheetInfo', 'storeFocusObjects', 'storeToolbarSettings', 'storeWorksheets')(observer(props => {
const {t} = useTranslation(); const {t} = useTranslation();
const _t = t("Toolbar", { returnObjects: true }); const _t = t("Toolbar", { returnObjects: true });
const storeWorksheets = props.storeWorksheets;
const wsProps = storeWorksheets.wsProps;
const appOptions = props.storeAppOptions; const appOptions = props.storeAppOptions;
const isDisconnected = props.users.isDisconnected; const isDisconnected = props.users.isDisconnected;
const storeFocusObjects = props.storeFocusObjects; const storeFocusObjects = props.storeFocusObjects;
const focusOn = storeFocusObjects.focusOn;
const isObjectLocked = storeFocusObjects.isLocked; const isObjectLocked = storeFocusObjects.isLocked;
const isEditCell = storeFocusObjects.isEditCell; const isEditCell = storeFocusObjects.isEditCell;
const editFormulaMode = storeFocusObjects.editFormulaMode; const editFormulaMode = storeFocusObjects.editFormulaMode;
@ -153,6 +157,8 @@ const ToolbarController = inject('storeAppOptions', 'users', 'storeSpreadsheetIn
showEditDocument={showEditDocument} showEditDocument={showEditDocument}
onEditDocument={onEditDocument} onEditDocument={onEditDocument}
isDisconnected={isDisconnected} isDisconnected={isDisconnected}
wsProps={wsProps}
focusOn={focusOn}
/> />
) )
})); }));

4
apps/spreadsheeteditor/mobile/src/controller/add/AddFilter.jsx
View file

@ -1,6 +1,7 @@
import React, {Component} from 'react'; import React, {Component} from 'react';
import { f7 } from 'framework7-react'; import { f7 } from 'framework7-react';
import { withTranslation } from 'react-i18next'; import { withTranslation } from 'react-i18next';
import {observer, inject} from "mobx-react";
import AddSortAndFilter from '../../view/add/AddFilter'; import AddSortAndFilter from '../../view/add/AddFilter';
@ -120,9 +121,10 @@ class AddFilterController extends Component {
onInsertSort={this.onInsertSort} onInsertSort={this.onInsertSort}
onInsertFilter={this.onInsertFilter} onInsertFilter={this.onInsertFilter}
isFilter={this.state.isFilter} isFilter={this.state.isFilter}
wsLock={this.props.storeWorksheets.wsLock}
/> />
) )
} }
} }
export default withTranslation()(AddFilterController); export default inject("storeWorksheets")(observer(withTranslation()(AddFilterController)));

1
apps/spreadsheeteditor/mobile/src/controller/add/AddOther.jsx
View file

@ -30,6 +30,7 @@ class AddOtherController extends Component {
return ( return (
<AddOther closeModal={this.closeModal} <AddOther closeModal={this.closeModal}
hideAddComment={this.hideAddComment} hideAddComment={this.hideAddComment}
wsProps={this.props.wsProps}
/> />
) )
} }

9
apps/spreadsheeteditor/mobile/src/page/main.jsx
View file

@ -88,6 +88,9 @@ class MainPage extends Component {
render() { render() {
const appOptions = this.props.storeAppOptions; const appOptions = this.props.storeAppOptions;
const storeWorksheets = this.props.storeWorksheets;
const wsProps = storeWorksheets.wsProps;
const wsLock = storeWorksheets.wsLock;
const config = appOptions.config; const config = appOptions.config;
const showLogo = !(appOptions.canBrandingExt && (config.customization && (config.customization.loaderName || config.customization.loaderLogo))); const showLogo = !(appOptions.canBrandingExt && (config.customization && (config.customization.loaderName || config.customization.loaderLogo)));
const showPlaceholder = !appOptions.isDocReady && (!config.customization || !(config.customization.loaderName || config.customization.loaderLogo)); const showPlaceholder = !appOptions.isDocReady && (!config.customization || !(config.customization.loaderName || config.customization.loaderLogo));
@ -115,11 +118,11 @@ class MainPage extends Component {
<SearchSettings useSuspense={false} /> <SearchSettings useSuspense={false} />
{ {
!this.state.editOptionsVisible ? null : !this.state.editOptionsVisible ? null :
<EditOptions onclosed={this.handleOptionsViewClosed.bind(this, 'edit')} /> <EditOptions onclosed={this.handleOptionsViewClosed.bind(this, 'edit')} wsLock={wsLock} wsProps={wsProps} />
} }
{ {
!this.state.addOptionsVisible ? null : !this.state.addOptionsVisible ? null :
<AddOptions onclosed={this.handleOptionsViewClosed.bind(this, 'add')} showOptions={this.state.addShowOptions} /> <AddOptions onclosed={this.handleOptionsViewClosed.bind(this, 'add')} wsLock={wsLock} wsProps={wsProps} showOptions={this.state.addShowOptions} />
} }
{ {
!this.state.settingsVisible ? null : !this.state.settingsVisible ? null :
@ -145,4 +148,4 @@ class MainPage extends Component {
} }
} }
export default inject("storeAppOptions")(observer(MainPage)); export default inject("storeAppOptions", "storeWorksheets")(observer(MainPage));

3
apps/spreadsheeteditor/mobile/src/store/mainStore.js
View file

@ -38,6 +38,7 @@ export const stores = {
// storeImageSettings: new storeImageSettings(), // storeImageSettings: new storeImageSettings(),
// storeTableSettings: new storeTableSettings() // storeTableSettings: new storeTableSettings()
storeComments: new storeComments(), storeComments: new storeComments(),
storeToolbarSettings: new storeToolbarSettings() storeToolbarSettings: new storeToolbarSettings(),
storeWorksheets: new storeWorksheets()
}; };

17
apps/spreadsheeteditor/mobile/src/store/sheets.js
View file

@ -36,7 +36,10 @@ export class storeWorksheets {
setWorksheetLocked: action, setWorksheetLocked: action,
isProtectedWorkbook: observable, isProtectedWorkbook: observable,
setProtectedWorkbook: action setProtectedWorkbook: action,
wsProps: observable,
setWsProps: action
}); });
this.sheets = []; this.sheets = [];
} }
@ -90,11 +93,21 @@ export class storeWorksheets {
let model = this.sheets[index]; let model = this.sheets[index];
if(model && model.locked !== locked) if(model && model.locked !== locked)
model.locked = locked; model.locked = locked;
this.isWorkbookLocked = locked; this.isWorksheetLocked = locked;
} }
isProtectedWorkbook = false; isProtectedWorkbook = false;
setProtectedWorkbook(value) { setProtectedWorkbook(value) {
this.isProtectedWorkbook = value; this.isProtectedWorkbook = value;
} }
wsProps = {};
setWsProps(value) {
this.wsProps = value;
}
wsLock;
setWsLock(value) {
this.wsLock = value;
}
} }

5
apps/spreadsheeteditor/mobile/src/view/Toolbar.jsx
View file

@ -5,12 +5,15 @@ import EditorUIController from '../lib/patch'
const ToolbarView = props => { const ToolbarView = props => {
const isDisconnected = props.isDisconnected; const isDisconnected = props.isDisconnected;
const wsProps = props.wsProps;
const focusOn = props.focusOn;
const undo_box = props.isEdit && EditorUIController.toolbarOptions ? EditorUIController.toolbarOptions.getUndoRedo({ const undo_box = props.isEdit && EditorUIController.toolbarOptions ? EditorUIController.toolbarOptions.getUndoRedo({
disabledUndo: !props.isCanUndo || isDisconnected, disabledUndo: !props.isCanUndo || isDisconnected,
disabledRedo: !props.isCanRedo || isDisconnected, disabledRedo: !props.isCanRedo || isDisconnected,
onUndoClick: props.onUndo, onUndoClick: props.onUndo,
onRedoClick: props.onRedo onRedoClick: props.onRedo
}) : null; }) : null;
return ( return (
<Fragment> <Fragment>
<NavLeft> <NavLeft>
@ -25,6 +28,8 @@ const ToolbarView = props => {
} }
{props.isEdit && EditorUIController.toolbarOptions && EditorUIController.toolbarOptions.getEditOptions({ {props.isEdit && EditorUIController.toolbarOptions && EditorUIController.toolbarOptions.getEditOptions({
disabled: props.disabledEditControls || props.disabledControls || isDisconnected, disabled: props.disabledEditControls || props.disabledControls || isDisconnected,
wsProps,
focusOn,
onEditClick: () => props.openOptions('edit'), onEditClick: () => props.openOptions('edit'),
onAddClick: () => props.openOptions('add') onAddClick: () => props.openOptions('add')
})} })}

98
apps/spreadsheeteditor/mobile/src/view/add/Add.jsx
View file

@ -57,6 +57,9 @@ const routes = [
const AddLayoutNavbar = ({ tabs, inPopover }) => { const AddLayoutNavbar = ({ tabs, inPopover }) => {
const isAndroid = Device.android; const isAndroid = Device.android;
if(!tabs.length) return null;
return ( return (
<Navbar> <Navbar>
{tabs.length > 1 ? {tabs.length > 1 ?
@ -66,8 +69,7 @@ const AddLayoutNavbar = ({ tabs, inPopover }) => {
<Icon slot="media" icon={item.icon}></Icon> <Icon slot="media" icon={item.icon}></Icon>
</Link>)} </Link>)}
{isAndroid && <span className='tab-link-highlight' style={{width: 100 / tabs.lenght + '%'}}></span>} {isAndroid && <span className='tab-link-highlight' style={{width: 100 / tabs.lenght + '%'}}></span>}
</div> : </div> : <NavTitle>{tabs[0].caption}</NavTitle>
<NavTitle>{ tabs[0].caption }</NavTitle>
} }
{ !inPopover && <NavRight><Link icon='icon-expand-down' popupClose=".add-popup"></Link></NavRight> } { !inPopover && <NavRight><Link icon='icon-expand-down' popupClose=".add-popup"></Link></NavRight> }
</Navbar> </Navbar>
@ -75,6 +77,8 @@ const AddLayoutNavbar = ({ tabs, inPopover }) => {
}; };
const AddLayoutContent = ({ tabs }) => { const AddLayoutContent = ({ tabs }) => {
if(!tabs.length) return null;
return ( return (
<Tabs animated> <Tabs animated>
{tabs.map((item, index) => {tabs.map((item, index) =>
@ -89,50 +93,54 @@ const AddLayoutContent = ({ tabs }) => {
const AddTabs = props => { const AddTabs = props => {
const { t } = useTranslation(); const { t } = useTranslation();
const _t = t('View.Add', {returnObjects: true}); const _t = t('View.Add', {returnObjects: true});
const wsLock = props.wsLock;
const wsProps = props.wsProps;
const showPanels = props.showPanels; const showPanels = props.showPanels;
const tabs = []; const tabs = [];
if (!showPanels) { if(!wsProps.Objects) {
tabs.push({ if (!showPanels) {
caption: _t.textChart, tabs.push({
id: 'add-chart', caption: _t.textChart,
icon: 'icon-add-chart', id: 'add-chart',
component: <AddChartController/> 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 || showPanels === 'function') { if (!showPanels && (!wsProps.InsertHyperlinks || !wsProps.Objects || !wsProps.Sort)) {
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) {
tabs.push({ tabs.push({
caption: _t.textOther, caption: _t.textOther,
id: 'add-other', id: 'add-other',
icon: 'icon-add-other', icon: 'icon-add-other',
component: <AddOtherController/> component: <AddOtherController wsProps={wsProps} />
}); });
} }
if ((showPanels && showPanels === 'hyperlink') || props.isAddShapeHyperlink) { if (((showPanels && showPanels === 'hyperlink') || props.isAddShapeHyperlink) && !wsProps.InsertHyperlinks) {
tabs.push({ tabs.push({
caption: _t.textAddLink, caption: _t.textAddLink,
id: 'add-link', id: 'add-link',
@ -140,6 +148,17 @@ const AddTabs = props => {
component: <AddLinkController/> component: <AddLinkController/>
}); });
} }
if(!tabs.length) {
if (Device.phone) {
f7.popup.close('.add-popup', false);
} else {
f7.popover.close('#add-popover', false);
}
return null;
}
return ( return (
<View style={props.style} stackPages={true} routes={routes}> <View style={props.style} stackPages={true} routes={routes}>
<Page pageContent={false}> <Page pageContent={false}>
@ -164,10 +183,10 @@ class AddView extends Component {
return ( return (
show_popover ? show_popover ?
<Popover id="add-popover" className="popover__titled" closeByOutsideClick={false} onPopoverClosed={() => this.props.onclosed()}> <Popover id="add-popover" className="popover__titled" closeByOutsideClick={false} onPopoverClosed={() => this.props.onclosed()}>
<AddTabs isAddShapeHyperlink={this.props.isAddShapeHyperlink} inPopover={true} onOptionClick={this.onoptionclick} style={{height: '410px'}} showPanels={this.props.showPanels}/> <AddTabs isAddShapeHyperlink={this.props.isAddShapeHyperlink} wsLock={this.props.wsLock} wsProps={this.props.wsProps} inPopover={true} onOptionClick={this.onoptionclick} style={{height: '410px'}} showPanels={this.props.showPanels}/>
</Popover> : </Popover> :
<Popup className="add-popup" onPopupClosed={() => this.props.onclosed()}> <Popup className="add-popup" onPopupClosed={() => this.props.onclosed()}>
<AddTabs isAddShapeHyperlink={this.props.isAddShapeHyperlink} onOptionClick={this.onoptionclick} showPanels={this.props.showPanels}/> <AddTabs isAddShapeHyperlink={this.props.isAddShapeHyperlink} wsLock={this.props.wsLock} wsProps={this.props.wsProps} onOptionClick={this.onoptionclick} showPanels={this.props.showPanels}/>
</Popup> </Popup>
) )
} }
@ -186,6 +205,7 @@ const Add = props => {
// component will unmount // component will unmount
} }
}); });
const onviewclosed = () => { const onviewclosed = () => {
if ( props.onclosed ) if ( props.onclosed )
props.onclosed(); props.onclosed();
@ -221,6 +241,8 @@ const Add = props => {
onclosed={onviewclosed} onclosed={onviewclosed}
showPanels={options ? options.panels : undefined} showPanels={options ? options.panels : undefined}
isAddShapeHyperlink = {isAddShapeHyperlink} isAddShapeHyperlink = {isAddShapeHyperlink}
wsProps={props.wsProps}
wsLock={props.wsLock}
/> />
}; };

20
apps/spreadsheeteditor/mobile/src/view/add/AddFilter.jsx
View file

@ -6,6 +6,8 @@ const AddSortAndFilter = props => {
const { t } = useTranslation(); const { t } = useTranslation();
const _t = t('View.Add', {returnObjects: true}); const _t = t('View.Add', {returnObjects: true});
const isFilter = props.isFilter; const isFilter = props.isFilter;
const wsLock = props.wsLock;
return ( return (
<Page> <Page>
<Navbar title={_t.textSortAndFilter} backLink={_t.textBack}/> <Navbar title={_t.textSortAndFilter} backLink={_t.textBack}/>
@ -21,14 +23,16 @@ const AddSortAndFilter = props => {
</Row> </Row>
</ListItem> </ListItem>
</List> </List>
<List> {!wsLock &&
<ListItem title={_t.textFilter}> <List>
<Toggle checked={isFilter} <ListItem title={_t.textFilter}>
onToggleChange={(prev) => { <Toggle checked={isFilter}
props.onInsertFilter(!prev); onToggleChange={(prev) => {
}}/> props.onInsertFilter(!prev);
</ListItem> }}/>
</List> </ListItem>
</List>
}
</Page> </Page>
) )
}; };

14
apps/spreadsheeteditor/mobile/src/view/add/AddOther.jsx
View file

@ -6,23 +6,25 @@ const AddOther = props => {
const { t } = useTranslation(); const { t } = useTranslation();
const _t = t('View.Add', {returnObjects: true}); const _t = t('View.Add', {returnObjects: true});
const hideAddComment = props.hideAddComment(); const hideAddComment = props.hideAddComment();
const wsProps = props.wsProps;
return ( return (
<List> <List>
<ListItem title={_t.textImage} link={'/add-image/'}> <ListItem title={_t.textImage} className={wsProps.Objects && 'disabled'} link={'/add-image/'}>
<Icon slot="media" icon="icon-insimage"></Icon> <Icon slot="media" icon="icon-insimage"></Icon>
</ListItem> </ListItem>
{!hideAddComment && <ListItem title={_t.textComment} onClick={() => { {(!hideAddComment && !wsProps.Objects) && <ListItem title={_t.textComment} onClick={() => {
props.closeModal(); props.closeModal();
Common.Notifications.trigger('addcomment'); Common.Notifications.trigger('addcomment');
}}> }}>
<Icon slot="media" icon="icon-insert-comment"></Icon> <Icon slot="media" icon="icon-insert-comment"></Icon>
</ListItem>} </ListItem>}
<ListItem title={_t.textLink} link={'/add-link/'}> <ListItem title={_t.textSortAndFilter} className={wsProps.Sort && 'disabled'} link={'/add-sort-and-filter/'}>
<Icon slot="media" icon="icon-link"></Icon>
</ListItem>
<ListItem title={_t.textSortAndFilter} link={'/add-sort-and-filter/'}>
<Icon slot="media" icon="icon-sort"></Icon> <Icon slot="media" icon="icon-sort"></Icon>
</ListItem> </ListItem>
<ListItem title={_t.textLink} className={wsProps.InsertHyperlinks && 'disabled'} link={'/add-link/'}>
<Icon slot="media" icon="icon-link"></Icon>
</ListItem>
</List> </List>
) )
}; };

96
apps/spreadsheeteditor/mobile/src/view/edit/Edit.jsx
View file

@ -290,6 +290,9 @@ const EditLayoutNavbar = ({ editors, inPopover }) => {
const isAndroid = Device.android; const isAndroid = Device.android;
const { t } = useTranslation(); const { t } = useTranslation();
const _t = t('View.Edit', {returnObjects: true}); const _t = t('View.Edit', {returnObjects: true});
if(!editors.length) return null;
return ( return (
<Navbar> <Navbar>
{ {
@ -297,8 +300,7 @@ const EditLayoutNavbar = ({ editors, inPopover }) => {
<div className='tab-buttons tabbar'> <div className='tab-buttons tabbar'>
{editors.map((item, index) => <Link key={"sse-link-" + item.id} tabLink={"#" + item.id} tabLinkActive={index === 0}>{item.caption}</Link>)} {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>} {isAndroid && <span className='tab-link-highlight' style={{width: 100 / editors.length + '%'}}></span>}
</div> : </div> : <NavTitle>{ editors[0].caption }</NavTitle>
<NavTitle>{ editors[0].caption }</NavTitle>
} }
{ !inPopover && <NavRight><Link icon='icon-expand-down' sheetClose></Link></NavRight> } { !inPopover && <NavRight><Link icon='icon-expand-down' sheetClose></Link></NavRight> }
</Navbar> </Navbar>
@ -306,6 +308,8 @@ const EditLayoutNavbar = ({ editors, inPopover }) => {
}; };
const EditLayoutContent = ({ editors }) => { const EditLayoutContent = ({ editors }) => {
if(!editors.length) return null;
if (editors.length > 1) { if (editors.length > 1) {
return ( return (
<Tabs animated> <Tabs animated>
@ -329,6 +333,8 @@ const EditTabs = props => {
const { t } = useTranslation(); const { t } = useTranslation();
const _t = t('View.Edit', {returnObjects: true}); const _t = t('View.Edit', {returnObjects: true});
const store = props.storeFocusObjects; const store = props.storeFocusObjects;
const wsLock = props.wsLock;
const wsProps = props.wsProps;
const settings = !store.focusOn ? [] : (store.focusOn === 'obj' ? store.objects : store.selections); const settings = !store.focusOn ? [] : (store.focusOn === 'obj' ? store.objects : store.selections);
let editors = []; let editors = [];
@ -345,41 +351,53 @@ const EditTabs = props => {
component: <EditCellController /> component: <EditCellController />
}) })
} }
if (settings.indexOf('shape') > -1) { if(!wsProps.Objects) {
editors.push({ if (settings.indexOf('shape') > -1) {
caption: _t.textShape, editors.push({
id: 'edit-shape', caption: _t.textShape,
component: <EditShapeController /> id: 'edit-shape',
}) component: <EditShapeController />
} })
if (settings.indexOf('image') > -1) { }
editors.push({ if (settings.indexOf('image') > -1) {
caption: _t.textImage, editors.push({
id: 'edit-image', caption: _t.textImage,
component: <EditImageController /> id: 'edit-image',
}) component: <EditImageController />
} })
if (settings.indexOf('text') > -1) { }
editors.push({ if (settings.indexOf('text') > -1) {
caption: _t.textText, editors.push({
id: 'edit-text', caption: _t.textText,
component: <EditTextController /> id: 'edit-text',
}) component: <EditTextController />
} })
if (settings.indexOf('chart') > -1) { }
editors.push({ if (settings.indexOf('chart') > -1) {
caption: _t.textChart, editors.push({
id: 'edit-chart', caption: _t.textChart,
component: <EditChartController /> id: 'edit-chart',
}) component: <EditChartController />
} })
if (settings.indexOf('hyperlink') > -1 || (props.hyperinfo && props.isAddShapeHyperlink)) { }
editors.push({ if (settings.indexOf('hyperlink') > -1 || (props.hyperinfo && props.isAddShapeHyperlink)) {
caption: _t.textHyperlink, editors.push({
id: 'edit-link', caption: _t.textHyperlink,
component: <EditLinkController /> 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 ( return (
@ -403,10 +421,10 @@ const EditView = props => {
return ( return (
show_popover ? show_popover ?
<Popover id="edit-popover" className="popover__titled" closeByOutsideClick={false} onPopoverClosed={() => props.onClosed()}> <Popover id="edit-popover" className="popover__titled" closeByOutsideClick={false} onPopoverClosed={() => props.onClosed()}>
<EditTabsContainer isAddShapeHyperlink={props.isAddShapeHyperlink} hyperinfo={props.hyperinfo} inPopover={true} onOptionClick={onOptionClick} style={{height: '410px'}} /> <EditTabsContainer isAddShapeHyperlink={props.isAddShapeHyperlink} hyperinfo={props.hyperinfo} inPopover={true} wsLock={props.wsLock} wsProps={props.wsProps} onOptionClick={onOptionClick} style={{height: '410px'}} />
</Popover> : </Popover> :
<Sheet id="edit-sheet" push onSheetClosed={() => props.onClosed()}> <Sheet id="edit-sheet" push onSheetClosed={() => props.onClosed()}>
<EditTabsContainer isAddShapeHyperlink={props.isAddShapeHyperlink} hyperinfo={props.hyperinfo} onOptionClick={onOptionClick} /> <EditTabsContainer isAddShapeHyperlink={props.isAddShapeHyperlink} hyperinfo={props.hyperinfo} onOptionClick={onOptionClick} wsLock={props.wsLock} wsProps={props.wsProps} />
</Sheet> </Sheet>
) )
}; };
@ -433,7 +451,7 @@ const EditOptions = props => {
const isAddShapeHyperlink = api.asc_canAddShapeHyperlink(); const isAddShapeHyperlink = api.asc_canAddShapeHyperlink();
return ( return (
<EditView usePopover={!Device.phone} onClosed={onviewclosed} isAddShapeHyperlink={isAddShapeHyperlink} hyperinfo={hyperinfo} /> <EditView usePopover={!Device.phone} onClosed={onviewclosed} isAddShapeHyperlink={isAddShapeHyperlink} hyperinfo={hyperinfo} wsLock={props.wsLock} wsProps={props.wsProps} />
) )
}; };

155
apps/spreadsheeteditor/mobile/src/view/edit/EditCell.jsx
View file

@ -11,6 +11,8 @@ const EditCell = props => {
const { t } = useTranslation(); const { t } = useTranslation();
const _t = t('View.Edit', {returnObjects: true}); const _t = t('View.Edit', {returnObjects: true});
const storeCellSettings = props.storeCellSettings; const storeCellSettings = props.storeCellSettings;
const storeWorksheets = props.storeWorksheets;
const wsProps = storeWorksheets.wsProps;
const cellStyles = storeCellSettings.cellStyles; const cellStyles = storeCellSettings.cellStyles;
const styleName = storeCellSettings.styleName; const styleName = storeCellSettings.styleName;
@ -40,79 +42,84 @@ const EditCell = props => {
onFontSize: props.onFontSize, onFontSize: props.onFontSize,
onFontClick: props.onFontClick onFontClick: props.onFontClick
}}/> }}/>
<ListItem className='buttons'> {!wsProps.FormatCells &&
<Row> <>
<a className={'button' + (isBold ? ' active' : '')} onClick={() => {props.toggleBold(!isBold)}}><b>B</b></a> <List>
<a className={'button' + (isItalic ? ' active' : '')} onClick={() => {props.toggleItalic(!isItalic)}}><i>I</i></a> <ListItem className='buttons'>
<a className={'button' + (isUnderline ? ' active' : '')} onClick={() => {props.toggleUnderline(!isUnderline)}} style={{textDecoration: "underline"}}>U</a> <Row>
</Row> <a className={'button' + (isBold ? ' active' : '')} onClick={() => {props.toggleBold(!isBold)}}><b>B</b></a>
</ListItem> <a className={'button' + (isItalic ? ' active' : '')} onClick={() => {props.toggleItalic(!isItalic)}}><i>I</i></a>
<ListItem title={_t.textTextColor} link="/edit-cell-text-color/" routeProps={{ <a className={'button' + (isUnderline ? ' active' : '')} onClick={() => {props.toggleUnderline(!isUnderline)}} style={{textDecoration: "underline"}}>U</a>
onTextColor: props.onTextColor </Row>
}}> </ListItem>
{!isAndroid ? <ListItem title={_t.textTextColor} link="/edit-cell-text-color/" routeProps={{
<Icon slot="media" icon="icon-text-color">{fontColorPreview}</Icon> : onTextColor: props.onTextColor
fontColorPreview }}>
} {!isAndroid ?
</ListItem> <Icon slot="media" icon="icon-text-color">{fontColorPreview}</Icon> :
<ListItem title={_t.textFillColor} link="/edit-cell-fill-color/" routeProps={{ fontColorPreview
onFillColor: props.onFillColor }
}}> </ListItem>
{!isAndroid ? <ListItem title={_t.textFillColor} link="/edit-cell-fill-color/" routeProps={{
<Icon slot="media" icon="icon-fill-color">{fillColorPreview}</Icon> : onFillColor: props.onFillColor
fillColorPreview }}>
} {!isAndroid ?
</ListItem> <Icon slot="media" icon="icon-fill-color">{fillColorPreview}</Icon> :
<ListItem title={_t.textTextFormat} link="/edit-cell-text-format/" routeProps={{ fillColorPreview
onHAlignChange: props.onHAlignChange, }
onVAlignChange: props.onVAlignChange, </ListItem>
onWrapTextChange: props.onWrapTextChange <ListItem title={_t.textTextFormat} link="/edit-cell-text-format/" routeProps={{
}}> onHAlignChange: props.onHAlignChange,
{!isAndroid ? onVAlignChange: props.onVAlignChange,
<Icon slot="media" icon="icon-text-align-left"></Icon> : null onWrapTextChange: props.onWrapTextChange
} }}>
</ListItem> {!isAndroid ?
<ListItem title={_t.textTextOrientation} link="/edit-cell-text-orientation/" routeProps={{ <Icon slot="media" icon="icon-text-align-left"></Icon> : null
onTextOrientationChange: props.onTextOrientationChange }
}}> </ListItem>
{!isAndroid ? <ListItem title={_t.textTextOrientation} link="/edit-cell-text-orientation/" routeProps={{
<Icon slot="media" icon="icon-text-orientation-horizontal"></Icon> : null onTextOrientationChange: props.onTextOrientationChange
} }}>
</ListItem> {!isAndroid ?
<ListItem title={_t.textBorderStyle} link="/edit-cell-border-style/" routeProps={{ <Icon slot="media" icon="icon-text-orientation-horizontal"></Icon> : null
onBorderStyle: props.onBorderStyle }
}}> </ListItem>
{!isAndroid ? <ListItem title={_t.textBorderStyle} link="/edit-cell-border-style/" routeProps={{
<Icon slot="media" icon="icon-table-borders-all"></Icon> : null onBorderStyle: props.onBorderStyle
} }}>
</ListItem> {!isAndroid ?
</List> <Icon slot="media" icon="icon-table-borders-all"></Icon> : null
<List> }
<ListItem title={_t.textFormat} link="/edit-format-cell/" routeProps={{ </ListItem>
onCellFormat: props.onCellFormat, </List>
onCurrencyCellFormat: props.onCurrencyCellFormat, <List>
onAccountingCellFormat: props.onAccountingCellFormat, <ListItem title={_t.textFormat} link="/edit-format-cell/" routeProps={{
dateFormats: props.dateFormats, onCellFormat: props.onCellFormat,
timeFormats: props.timeFormats onCurrencyCellFormat: props.onCurrencyCellFormat,
}}> onAccountingCellFormat: props.onAccountingCellFormat,
{!isAndroid ? dateFormats: props.dateFormats,
<Icon slot="media" icon="icon-format-general"></Icon> : null timeFormats: props.timeFormats
} }}>
</ListItem> {!isAndroid ?
</List> <Icon slot="media" icon="icon-format-general"></Icon> : null
<BlockTitle>{_t.textCellStyles}</BlockTitle> }
{cellStyles.length ? ( </ListItem>
<List className="cell-styles-list"> </List>
{cellStyles.map((elem, index) => { <BlockTitle>{_t.textCellStyles}</BlockTitle>
return ( {cellStyles.length ? (
<ListItem key={index} <List className="cell-styles-list">
className={elem.name === styleName ? "item-theme active" : "item-theme"} onClick={() => props.onStyleClick(elem.name)}> {cellStyles.map((elem, index) => {
<div className='thumb' style={{backgroundImage: `url(${elem.image})`}}></div> return (
</ListItem> <ListItem key={index}
) className={elem.name === styleName ? "item-theme active" : "item-theme"} onClick={() => props.onStyleClick(elem.name)}>
})} <div className='thumb' style={{backgroundImage: `url(${elem.image})`}}></div>
</List> </ListItem>
) : null} )
})}
</List>
) : null}
</>}
</List>
</Fragment> </Fragment>
) )
}; };
@ -977,7 +984,7 @@ const PageTimeFormatCell = props => {
} }
const PageEditCell = inject("storeCellSettings")(observer(EditCell)); const PageEditCell = inject("storeCellSettings", "storeWorksheets")(observer(EditCell));
const TextColorCell = inject("storeCellSettings", "storePalette", "storeFocusObjects")(observer(PageTextColorCell)); const TextColorCell = inject("storeCellSettings", "storePalette", "storeFocusObjects")(observer(PageTextColorCell));
const FillColorCell = inject("storeCellSettings", "storePalette", "storeFocusObjects")(observer(PageFillColorCell)); const FillColorCell = inject("storeCellSettings", "storePalette", "storeFocusObjects")(observer(PageFillColorCell));
const CustomTextColorCell = inject("storeCellSettings", "storePalette", "storeFocusObjects")(observer(PageCustomTextColorCell)); const CustomTextColorCell = inject("storeCellSettings", "storePalette", "storeFocusObjects")(observer(PageCustomTextColorCell));

6
apps/spreadsheeteditor/mobile/src/view/settings/SpreadsheetSettings.jsx
View file

@ -197,6 +197,8 @@ const PageSpreadsheetSettings = props => {
const { t } = useTranslation(); const { t } = useTranslation();
const _t = t('View.Settings', {returnObjects: true}); const _t = t('View.Settings', {returnObjects: true});
const storeSpreadsheetSettings = props.storeSpreadsheetSettings; const storeSpreadsheetSettings = props.storeSpreadsheetSettings;
const storeWorksheets = props.storeWorksheets;
const wsProps = storeWorksheets.wsProps;
const isPortrait = storeSpreadsheetSettings.isPortrait; const isPortrait = storeSpreadsheetSettings.isPortrait;
const isHideHeadings = storeSpreadsheetSettings.isHideHeadings; const isHideHeadings = storeSpreadsheetSettings.isHideHeadings;
const isHideGridlines = storeSpreadsheetSettings.isHideGridlines; const isHideGridlines = storeSpreadsheetSettings.isHideGridlines;
@ -253,7 +255,7 @@ const PageSpreadsheetSettings = props => {
</ListItem> </ListItem>
</List> </List>
<List> <List>
<ListItem title={_t.textColorSchemes} link="/color-schemes/" routeProps={{ <ListItem title={_t.textColorSchemes} className={wsProps.FormatCells ? 'disabled' : ''} link="/color-schemes/" routeProps={{
onColorSchemeChange: props.onColorSchemeChange, onColorSchemeChange: props.onColorSchemeChange,
initPageColorSchemes: props.initPageColorSchemes initPageColorSchemes: props.initPageColorSchemes
}}></ListItem> }}></ListItem>
@ -264,7 +266,7 @@ const PageSpreadsheetSettings = props => {
const SpreadsheetFormats = inject("storeSpreadsheetSettings")(observer(PageSpreadsheetFormats)); const SpreadsheetFormats = inject("storeSpreadsheetSettings")(observer(PageSpreadsheetFormats));
const SpreadsheetMargins = inject("storeSpreadsheetSettings")(observer(PageSpreadsheetMargins)); const SpreadsheetMargins = inject("storeSpreadsheetSettings")(observer(PageSpreadsheetMargins));
const SpreadsheetSettings = inject("storeSpreadsheetSettings")(observer(PageSpreadsheetSettings)); const SpreadsheetSettings = inject("storeSpreadsheetSettings", "storeWorksheets")(observer(PageSpreadsheetSettings));
const SpreadsheetColorSchemes = inject("storeSpreadsheetSettings")(observer(PageSpreadsheetColorSchemes)); const SpreadsheetColorSchemes = inject("storeSpreadsheetSettings")(observer(PageSpreadsheetColorSchemes));
export { export {