Merge pull request #1167 from ONLYOFFICE/feature/Bug_52141
Feature/bug 52141
This commit is contained in:
maxkadushkin
GitHub
commit
ad52136ece
|
|
@ -879,28 +879,48 @@ input[type="number"]::-webkit-inner-spin-button {
|
|||
|
||||
.functions-list {
|
||||
height: 175px;
|
||||
width: 360px;
|
||||
overflow-y: auto;
|
||||
position: absolute;
|
||||
top: 30px;
|
||||
right: 0;
|
||||
overflow-x: hidden;
|
||||
background-color: @white;
|
||||
.list {
|
||||
margin: 0;
|
||||
ul:before {
|
||||
display: none;
|
||||
}
|
||||
.item-content {
|
||||
padding-left: 0;
|
||||
}
|
||||
.item-inner {
|
||||
padding-left: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-left) - var(--menu-list-offset));
|
||||
}
|
||||
.item-title {
|
||||
font-size: 15px;
|
||||
&__mobile {
|
||||
position: absolute;
|
||||
top: 30px;
|
||||
right: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
box-shadow: 0px 10px 10px -10px rgba(0, 0, 0, 0.3);
|
||||
.list {
|
||||
margin: 0;
|
||||
ul:before {
|
||||
display: none;
|
||||
}
|
||||
.item-content {
|
||||
padding-left: 0;
|
||||
}
|
||||
.item-inner {
|
||||
padding-left: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-left) - var(--menu-list-offset));
|
||||
}
|
||||
.item-title {
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.popover__functions {
|
||||
box-shadow: 0px 10px 100px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.target-function-list {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 0;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
import React, { useEffect, useState } from 'react';
|
||||
import CellEditorView from '../view/CellEditor';
|
||||
import { f7 } from 'framework7-react';
|
||||
import { Device } from '../../../../common/mobile/utils/device';
|
||||
|
||||
const CellEditor = props => {
|
||||
useEffect(() => {
|
||||
|
|
@ -24,7 +25,15 @@ const CellEditor = props => {
|
|||
setCoauthDisabled(info.asc_getLocked() === true || info.asc_getLockedTable() === true || info.asc_getLockedPivotTable()===true);
|
||||
}
|
||||
|
||||
const onFormulaCompleteMenu = funcArr => setFuncArr(funcArr);
|
||||
const onFormulaCompleteMenu = funcArr => {
|
||||
setFuncArr(funcArr);
|
||||
|
||||
if(!Device.isPhone && funcArr) {
|
||||
f7.popover.open('#idx-functions-list', '#idx-list-target');
|
||||
} else {
|
||||
f7.popover.close('#idx-functions-list');
|
||||
}
|
||||
}
|
||||
|
||||
const insertFormula = (name, type) => {
|
||||
const api = Common.EditorApi.get();
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
|
||||
import React, { useState } from 'react';
|
||||
import { Input, View, Button, Link, Popover, ListItem, List, Icon, f7 } from 'framework7-react';
|
||||
import React, { Fragment, useState } from 'react';
|
||||
import { Input, View, Button, Link, Popover, ListItem, List, Icon, f7, Page, Navbar, NavRight } from 'framework7-react';
|
||||
import {observer, inject} from "mobx-react";
|
||||
// import {PageFunctionInfo} from "./add/AddFunction";
|
||||
import { __interactionsRef } from 'scheduler/tracing';
|
||||
import { Device } from '../../../../common/mobile/utils/device';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
const viewStyle = {
|
||||
height: 30
|
||||
|
|
@ -14,6 +14,74 @@ const contentStyle = {
|
|||
flexGrow: 1
|
||||
};
|
||||
|
||||
const FunctionInfo = props => {
|
||||
const { t } = useTranslation();
|
||||
const _t = t('View.Add', {returnObjects: true});
|
||||
const functionObj = props.functionObj;
|
||||
const functionInfo = props.functionInfo;
|
||||
|
||||
return (
|
||||
<Page className='page-function-info'>
|
||||
<Navbar title={functionInfo.caption} backLink={_t.textBack}>
|
||||
<NavRight>
|
||||
<Link text={t('View.Add.textInsert')} onClick={() => props.insertFormula(functionObj.name, functionObj.type)}></Link>
|
||||
</NavRight>
|
||||
</Navbar>
|
||||
<div className='function-info'>
|
||||
<h3>{`${functionInfo.caption} ${functionInfo.args}`}</h3>
|
||||
<p>{functionInfo.descr}</p>
|
||||
</div>
|
||||
</Page>
|
||||
)
|
||||
}
|
||||
|
||||
const FunctionsList = props => {
|
||||
const { t } = useTranslation();
|
||||
const isPhone = Device.isPhone;
|
||||
const functions = props.functions;
|
||||
const funcArr = props.funcArr;
|
||||
|
||||
return (
|
||||
<div className={isPhone ? 'functions-list functions-list__mobile' : 'functions-list'}>
|
||||
<List>
|
||||
{funcArr.map((elem, index) => {
|
||||
return (
|
||||
<ListItem key={index} title={elem.name} className="no-indicator" onClick={() => props.insertFormula(elem.name, elem.type)}>
|
||||
<div slot='after'
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
let functionInfo = functions[elem.name];
|
||||
|
||||
if(functionInfo) {
|
||||
if(isPhone) {
|
||||
f7.dialog.create({
|
||||
title: functionInfo.caption,
|
||||
content: `<h3>${functionInfo.caption} ${functionInfo.args}</h3><p>${functionInfo.descr}</p>`,
|
||||
buttons: [
|
||||
{text: t('View.Add.textCancel')},
|
||||
{
|
||||
text: t('View.Add.textInsert'),
|
||||
onClick: () => props.insertFormula(elem.name, elem.type)
|
||||
}
|
||||
]
|
||||
}).open();
|
||||
} else {
|
||||
f7.views.current.router.navigate('/function-info/', {props: {functionInfo, functionObj: elem, insertFormula: props.insertFormula}});
|
||||
}
|
||||
}
|
||||
}}>
|
||||
<Icon icon='icon-info'/>
|
||||
</div>
|
||||
</ListItem>
|
||||
)
|
||||
})}
|
||||
</List>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
|
||||
const CellEditorView = props => {
|
||||
const [expanded, setExpanded] = useState(false);
|
||||
const isPhone = Device.isPhone;
|
||||
|
|
@ -27,7 +95,9 @@ const CellEditorView = props => {
|
|||
setExpanded(!expanded);
|
||||
};
|
||||
|
||||
return <View id="idx-celleditor" style={viewStyle} className={expanded ? 'cell-editor expanded' : 'cell-editor collapsed'}>
|
||||
return (
|
||||
<>
|
||||
<View id="idx-celleditor" style={viewStyle} routes={routes} className={expanded ? 'cell-editor expanded' : 'cell-editor collapsed'}>
|
||||
<div id="box-cell-name" className="ce-group">
|
||||
<span id="idx-cell-name">{props.cellName}</span>
|
||||
<a href="#" id="idx-btn-function" className='link icon-only' disabled={(!isEdit && true) || props.stateCoauth} onClick={() => {props.onClickToOpenAddOptions('function', '#idx-btn-function');}}>
|
||||
|
|
@ -35,40 +105,53 @@ const CellEditorView = props => {
|
|||
</a>
|
||||
</div>
|
||||
<div className="ce-group group--content" style={contentStyle}>
|
||||
<div id="idx-list-target" className="target-function-list"></div>
|
||||
<textarea id="idx-cell-content" spellCheck="false" />
|
||||
</div>
|
||||
<div className="ce-group">
|
||||
<Link icon="caret" onClick={expandClick} />
|
||||
</div>
|
||||
{funcArr && funcArr.length &&
|
||||
<div id="idx-functions-list" className="functions-list" style={{left: isPhone ? '0' : '132px', width: isPhone ? '100%' : '360px'}}>
|
||||
<List>
|
||||
{funcArr.map((elem, index) => {
|
||||
return (
|
||||
<ListItem key={index} title={elem.name} className="no-indicator" onClick={() => props.insertFormula(elem.name, elem.type)}>
|
||||
<div slot='after'
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
let functionInfo = functions[elem.name];
|
||||
|
||||
if(functionInfo) {
|
||||
f7.dialog.create({
|
||||
title: functionInfo.caption,
|
||||
content: `<h3>${functionInfo.caption} ${functionInfo.args}</h3>
|
||||
<p>${functionInfo.descr}</p>`,
|
||||
buttons: [{text: 'Ok'}]
|
||||
}).open();
|
||||
}
|
||||
}}>
|
||||
<Icon icon='icon-info'/>
|
||||
</div>
|
||||
</ListItem>
|
||||
)
|
||||
})}
|
||||
</List>
|
||||
</div>
|
||||
}
|
||||
</View>;
|
||||
{funcArr && funcArr.length ?
|
||||
isPhone &&
|
||||
<FunctionsList
|
||||
functions={functions}
|
||||
funcArr={funcArr}
|
||||
insertFormula={props.insertFormula}
|
||||
/>
|
||||
: null}
|
||||
</View>
|
||||
{!isPhone &&
|
||||
<Popover
|
||||
id="idx-functions-list"
|
||||
className="popover__titled popover__functions"
|
||||
closeByBackdropClick={false}
|
||||
backdrop={false}
|
||||
closeByOutsideClick={true}
|
||||
>
|
||||
{funcArr && funcArr.length ?
|
||||
<View style={{height: '175px'}} routes={routes}>
|
||||
<Page pageContent={false}>
|
||||
<Navbar className="navbar-hidden" />
|
||||
<FunctionsList
|
||||
functions={functions}
|
||||
funcArr={funcArr}
|
||||
insertFormula={props.insertFormula}
|
||||
/>
|
||||
</Page>
|
||||
</View>
|
||||
: null}
|
||||
</Popover>
|
||||
}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const routes = [
|
||||
{
|
||||
path: '/function-info/',
|
||||
component: FunctionInfo
|
||||
}
|
||||
];
|
||||
|
||||
|
||||
export default inject("storeAppOptions", "storeFunctions")(observer(CellEditorView));
|
||||
|
|
|
|||
Loading…
Reference in a new issue