[SSE mobile] Fix Bug 58279
This commit is contained in:
parent
e0e426d40e
commit
cc74ab53e1
|
@ -1,4 +1,3 @@
|
||||||
|
|
||||||
import React, { useEffect, useState } from 'react';
|
import React, { useEffect, useState } from 'react';
|
||||||
import CellEditorView from '../view/CellEditor';
|
import CellEditorView from '../view/CellEditor';
|
||||||
import { f7 } from 'framework7-react';
|
import { f7 } from 'framework7-react';
|
||||||
|
@ -39,7 +38,7 @@ const CellEditor = inject("storeFunctions")(observer(props => {
|
||||||
setFunctionshDisabled(is_image || is_mode_2 || coauth_disable);
|
setFunctionshDisabled(is_image || is_mode_2 || coauth_disable);
|
||||||
}
|
}
|
||||||
|
|
||||||
const onFormulaCompleteMenu = funcArr => {
|
const onFormulaCompleteMenu = async funcArr => {
|
||||||
const api = Common.EditorApi.get();
|
const api = Common.EditorApi.get();
|
||||||
const storeFunctions = props.storeFunctions;
|
const storeFunctions = props.storeFunctions;
|
||||||
const functions = storeFunctions.functions;
|
const functions = storeFunctions.functions;
|
||||||
|
@ -94,21 +93,14 @@ const CellEditor = inject("storeFunctions")(observer(props => {
|
||||||
return {name, type, descr, caption, args};
|
return {name, type, descr, caption, args};
|
||||||
});
|
});
|
||||||
|
|
||||||
setFuncArr(funcArr);
|
await setFuncArr(funcArr);
|
||||||
setHintArr(hintArr);
|
await setHintArr(hintArr);
|
||||||
|
|
||||||
f7.popover.open('#idx-functions-list', '#idx-list-target');
|
await f7.popover.open('#idx-functions-list', '#idx-list-target');
|
||||||
|
|
||||||
const listTarget = document.querySelector('#idx-list-target');
|
|
||||||
const rect = listTarget.getBoundingClientRect();
|
|
||||||
const popoverList = document.querySelector('#idx-functions-list');
|
|
||||||
|
|
||||||
popoverList.style.top = `${rect.bottom}px`;
|
|
||||||
popoverList.style.left = `${rect.left}px`;
|
|
||||||
} else {
|
} else {
|
||||||
f7.popover.close('#idx-functions-list');
|
await f7.popover.close('#idx-functions-list');
|
||||||
setFuncArr('');
|
await setFuncArr('');
|
||||||
setHintArr('');
|
await setHintArr('');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -14,78 +14,6 @@ const contentStyle = {
|
||||||
flexGrow: 1
|
flexGrow: 1
|
||||||
};
|
};
|
||||||
|
|
||||||
const FunctionInfo = props => {
|
|
||||||
const { t } = useTranslation();
|
|
||||||
const _t = t('View.Add', {returnObjects: true});
|
|
||||||
const functionObj = props.functionObj;
|
|
||||||
const functionInfo = props.functionInfo;
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
const functionsList = document.querySelector('#functions-list');
|
|
||||||
const height = functionsList.offsetHeight + 'px';
|
|
||||||
|
|
||||||
functionsList.closest('.view').style.height = '200px';
|
|
||||||
|
|
||||||
return () => {
|
|
||||||
functionsList.closest('.view').style.height = height;
|
|
||||||
}
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Page className='page-function-info'>
|
|
||||||
<Navbar title={functionInfo.caption} backLink={_t.textBack} backLinkUrl='/functions-list/'>
|
|
||||||
<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 ? `${functionInfo.caption} ${functionInfo.args}` : functionInfo.name}</h3>
|
|
||||||
<p>{functionInfo.descr}</p>
|
|
||||||
</div>
|
|
||||||
</Page>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
const FunctionsList = props => {
|
|
||||||
const isPhone = Device.isPhone;
|
|
||||||
const functions = props.functions;
|
|
||||||
const funcArr = props.funcArr;
|
|
||||||
const hintArr = props.hintArr;
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
const functionsList = document.querySelector('#functions-list');
|
|
||||||
const height = functionsList.offsetHeight + 'px';
|
|
||||||
|
|
||||||
functionsList.closest('.view').style.height = height;
|
|
||||||
}, [funcArr]);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div id="functions-list" className={isPhone ? 'functions-list functions-list__mobile' : 'functions-list'}>
|
|
||||||
<List>
|
|
||||||
{funcArr && funcArr.length && funcArr.map((elem, index) => {
|
|
||||||
return (
|
|
||||||
<ListItem key={index} title={elem.name} className="no-indicator" onClick={() => props.insertFormula(elem.name, elem.type)}>
|
|
||||||
{(functions[elem.name] || hintArr[index]?.descr) &&
|
|
||||||
<div slot='after'
|
|
||||||
onClick={(e) => {
|
|
||||||
e.stopPropagation();
|
|
||||||
let functionInfo = functions[elem.name] || hintArr[index];
|
|
||||||
|
|
||||||
if(functionInfo) {
|
|
||||||
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 CellEditorView = props => {
|
||||||
const [expanded, setExpanded] = useState(false);
|
const [expanded, setExpanded] = useState(false);
|
||||||
const isPhone = Device.isPhone;
|
const isPhone = Device.isPhone;
|
||||||
|
@ -147,6 +75,80 @@ const CellEditorView = props => {
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const FunctionsList = props => {
|
||||||
|
const isPhone = Device.isPhone;
|
||||||
|
const functions = props.functions;
|
||||||
|
const funcArr = props.funcArr;
|
||||||
|
const hintArr = props.hintArr;
|
||||||
|
const functionsList = document.querySelector('#functions-list');
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if(functionsList) {
|
||||||
|
const height = functionsList.offsetHeight + 'px';
|
||||||
|
functionsList.closest('.view').style.height = height;
|
||||||
|
}
|
||||||
|
}, [funcArr]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div id="functions-list" className={isPhone ? 'functions-list functions-list__mobile' : 'functions-list'}>
|
||||||
|
<List>
|
||||||
|
{funcArr && funcArr.length && funcArr.map((elem, index) => {
|
||||||
|
return (
|
||||||
|
<ListItem key={index} title={elem.name} className="no-indicator" onClick={() => props.insertFormula(elem.name, elem.type)}>
|
||||||
|
{(functions[elem.name] || hintArr[index]?.descr) &&
|
||||||
|
<div slot='after'
|
||||||
|
onClick={(e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
let functionInfo = functions[elem.name] || hintArr[index];
|
||||||
|
|
||||||
|
if(functionInfo) {
|
||||||
|
f7.views.current.router.navigate('/function-info/', {props: {functionInfo, functionObj: elem, insertFormula: props.insertFormula}});
|
||||||
|
}
|
||||||
|
}}>
|
||||||
|
<Icon icon='icon-info'/>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
</ListItem>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</List>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
const FunctionInfo = props => {
|
||||||
|
const { t } = useTranslation();
|
||||||
|
const _t = t('View.Add', {returnObjects: true});
|
||||||
|
const functionObj = props.functionObj;
|
||||||
|
const functionInfo = props.functionInfo;
|
||||||
|
const functionsList = document.querySelector('#functions-list');
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if(functionsList) {
|
||||||
|
const height = functionsList.offsetHeight + 'px';
|
||||||
|
functionsList.closest('.view').style.height = '200px';
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
functionsList.closest('.view').style.height = height;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, [functionsList]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Page className='page-function-info'>
|
||||||
|
<Navbar title={functionInfo.caption} backLink={_t.textBack} backLinkUrl='/functions-list/'>
|
||||||
|
<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 ? `${functionInfo.caption} ${functionInfo.args}` : functionInfo.name}</h3>
|
||||||
|
<p>{functionInfo.descr}</p>
|
||||||
|
</div>
|
||||||
|
</Page>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
const routes = [
|
const routes = [
|
||||||
{
|
{
|
||||||
path: '/function-info/',
|
path: '/function-info/',
|
||||||
|
|
Loading…
Reference in a new issue