Merge pull request #1167 from ONLYOFFICE/feature/Bug_52141

Feature/bug 52141

apps/common/mobile/resources/less/common.less

@@ -879,28 +879,48 @@ input[type="number"]::-webkit-inner-spin-button {
 
 .functions-list {
     height: 175px;
+    width: 360px;
     overflow-y: auto;
-    position: absolute;
+    overflow-x: hidden;
-    top: 30px;
-    right: 0;
     background-color: @white;
-    .list {
+    &__mobile {
-        margin: 0;
+        position: absolute;
-        ul:before {
+        top: 30px;
-            display: none;
+        right: 0;
-        }
+        left: 0;
-        .item-content {
+        width: 100%;
-            padding-left: 0;
+        box-shadow: 0px 10px 10px -10px rgba(0, 0, 0, 0.3);
-        }
+        .list {
-        .item-inner {
+            margin: 0;
-            padding-left: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-left) - var(--menu-list-offset));
+            ul:before {
-        }
+                display: none;
-        .item-title {
+            }
-            font-size: 15px;
+            .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%;
+}
+
 
 
 

apps/spreadsheeteditor/mobile/src/controller/CellEditor.jsx

@@ -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();

apps/spreadsheeteditor/mobile/src/view/CellEditor.jsx

@@ -1,10 +1,10 @@
 
-import React, { useState } from 'react';
+import React, { Fragment, useState } from 'react';
-import { Input, View, Button, Link, Popover, ListItem, List, Icon, f7 } from 'framework7-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 &&
+                {funcArr && funcArr.length ?
-                    <div id="idx-functions-list" className="functions-list" style={{left: isPhone ? '0' : '132px', width: isPhone ? '100%' : '360px'}}>
+                    isPhone &&
-                        <List>
+                        <FunctionsList 
-                            {funcArr.map((elem, index) => {
+                            functions={functions} 
-                                return (
+                            funcArr={funcArr} 
-                                    <ListItem key={index} title={elem.name} className="no-indicator" onClick={() => props.insertFormula(elem.name, elem.type)}>
+                            insertFormula={props.insertFormula} 
-                                        <div slot='after'
+                        />
-                                            onClick={(e) => {
+                : null}
-                                                e.stopPropagation();
+            </View>
-                                                let functionInfo = functions[elem.name];
+            {!isPhone &&
-                
+                <Popover 
-                                                if(functionInfo) {                                               
+                    id="idx-functions-list" 
-                                                    f7.dialog.create({
+                    className="popover__titled popover__functions" 
-                                                        title: functionInfo.caption,
+                    closeByBackdropClick={false} 
-                                                        content: `<h3>${functionInfo.caption} ${functionInfo.args}</h3>
+                    backdrop={false} 
-                                                        <p>${functionInfo.descr}</p>`,
+                    closeByOutsideClick={true}
-                                                        buttons: [{text: 'Ok'}]
+                >
-                                                    }).open();
+                    {funcArr && funcArr.length ?
-                                                }
+                        <View style={{height: '175px'}} routes={routes}>
-                                            }}>
+                            <Page pageContent={false}>
-                                            <Icon icon='icon-info'/>
+                                <Navbar className="navbar-hidden" />
-                                        </div>
+                                <FunctionsList 
-                                    </ListItem>
+                                    functions={functions}
-                                )
+                                    funcArr={funcArr} 
-                            })}
+                                    insertFormula={props.insertFormula}
-                        </List>
+                                />
-                    </div>
+                            </Page>
-                }
+                        </View>
-            </View>;
+                    : null}
+                </Popover>
+            }
+        </>
+    );
 };
 
+const routes = [
+    {
+        path: '/function-info/',
+        component: FunctionInfo
+    }
+];
+
+
 export default inject("storeAppOptions", "storeFunctions")(observer(CellEditorView));