[SSE mobile] Correct function list

This commit is contained in:
SergeyEzhin 2021-09-08 16:43:47 +03:00
parent ccec4e0933
commit e99807bfc6

View file

@ -42,45 +42,41 @@ const FunctionsList = props => {
const funcArr = props.funcArr; const funcArr = props.funcArr;
return ( return (
<Page> <div className="functions-list" style={{width: isPhone ? '100%' : '360px'}}>
<View routes={routes}> <List>
<div className="functions-list" style={{width: isPhone ? '100%' : '360px'}}> {funcArr.map((elem, index) => {
<List> return (
{funcArr.map((elem, index) => { <ListItem key={index} title={elem.name} className="no-indicator" onClick={() => props.insertFormula(elem.name, elem.type)}>
return ( <div slot='after'
<ListItem key={index} title={elem.name} href="#" routeProps={{functionInfo: functions[elem.name], functionObj: elem}} className="no-indicator" onClick={() => props.insertFormula(elem.name, elem.type)}> onClick={(e) => {
<div slot='after' e.stopPropagation();
onClick={(e) => { let functionInfo = functions[elem.name];
e.stopPropagation();
let functionInfo = functions[elem.name]; if(functionInfo) {
if(isPhone) {
if(functionInfo) { f7.dialog.create({
if(isPhone) { title: functionInfo.caption,
f7.dialog.create({ content: `<h3>${functionInfo.caption} ${functionInfo.args}</h3><p>${functionInfo.descr}</p>`,
title: functionInfo.caption, buttons: [
content: `<h3>${functionInfo.caption} ${functionInfo.args}</h3><p>${functionInfo.descr}</p>`, {text: t('View.Add.textCancel')},
buttons: [ {
{text: t('View.Add.textCancel')}, text: t('View.Add.textInsert'),
{ onClick: () => props.insertFormula(elem.name, elem.type)
text: t('View.Add.textInsert'), }
onClick: () => props.insertFormula(elem.name, elem.type) ]
} }).open();
] } else {
}).open(); f7.views.current.router.navigate('/function-info/', {props: {functionInfo, functionObj: elem, insertFormula: props.insertFormula}});
} else { }
f7.views.current.router.navigate('/function-info/', {props: {functionInfo, functionObj: elem, insertFormula: props.insertFormula}}); }
} }}>
} <Icon icon='icon-info'/>
}}> </div>
<Icon icon='icon-info'/> </ListItem>
</div> )
</ListItem> })}
) </List>
})} </div>
</List>
</div>
</View>
</Page>
) )
} }
@ -101,7 +97,7 @@ const CellEditorView = props => {
return ( return (
<> <>
<View id="idx-celleditor" style={viewStyle} className={expanded ? 'cell-editor expanded' : 'cell-editor collapsed'}> <View id="idx-celleditor" style={viewStyle} routes={routes} className={expanded ? 'cell-editor expanded' : 'cell-editor collapsed'}>
<div id="box-cell-name" className="ce-group"> <div id="box-cell-name" className="ce-group">
<span id="idx-cell-name">{props.cellName}</span> <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');}}> <a href="#" id="idx-btn-function" className='link icon-only' disabled={(!isEdit && true) || props.stateCoauth} onClick={() => {props.onClickToOpenAddOptions('function', '#idx-btn-function');}}>
@ -124,22 +120,27 @@ const CellEditorView = props => {
/> />
: null} : null}
</View> </View>
<Popover {!isPhone &&
id="idx-functions-list" <Popover
className="popover__titled" id="idx-functions-list"
closeByBackdropClick={false} className="popover__titled"
backdrop={false} closeByBackdropClick={false}
closeByOutsideClick={true} backdrop={false}
style={{height: '175px'}} closeByOutsideClick={true}
> >
{funcArr && funcArr.length ? {funcArr && funcArr.length ?
<FunctionsList <View style={{height: '175px'}} routes={routes}>
functions={functions} <Page>
funcArr={funcArr} <FunctionsList
insertFormula={props.insertFormula} functions={functions}
/> funcArr={funcArr}
: null} insertFormula={props.insertFormula}
</Popover> />
</Page>
</View>
: null}
</Popover>
}
</> </>
); );
}; };