Merge pull request #1363 from ONLYOFFICE/feature/func-window-hint

[SSE] Replacing alert on dialog window

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

@@ -886,14 +886,13 @@ input[type="number"]::-webkit-inner-spin-button {
 }
 
 .functions-list {
-    max-height: 175px;
+    max-height: 200px;
     width: 360px;
     overflow-y: auto;
     overflow-x: hidden;
-    background-color: @white;
+    background-color: @background-primary;
     &__mobile {
         position: absolute;
-        top: 30px;
         right: 0;
         left: 0;
         width: 100%;
@@ -916,6 +915,54 @@ input[type="number"]::-webkit-inner-spin-button {
     }
 }
 
+// Function List Popover
+
+#idx-functions-list {
+    width: 350px;
+    .popover-inner {
+        .navbars {
+            .right .link {
+                font-weight: 600;
+            }
+            .navbar-bg {
+                background:  @background-secondary;
+                &::after {
+                    background: @background-menu-divider;
+                }
+            }
+        }
+        .page-function-info{
+            .navbar {
+                .navbar-bg::after {
+                    background: @background-menu-divider;
+                }
+                .navbar-inner{
+                    background:  @background-secondary;
+                    .title {
+                        color: @text-normal;
+                    }
+                    .right .link {
+                        color: @brandColor;
+                        font-weight: 600;
+                    }
+                    .icon-back::after {
+                        color: @brandColor;
+                    }
+                }
+            }
+            .function-info {
+                p {
+                    color: @text-secondary;
+                }
+                h3 {
+                    font-weight: 500;
+                    color: @text-normal;
+                }
+            }
+        }
+    }
+}
+
 // Highlight Colors
 
 .highlight-palette {

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

@@ -38,7 +38,7 @@ const CellEditor = props => {
     const onFormulaCompleteMenu = funcArr => {
         setFuncArr(funcArr);
 
-        if(!Device.isPhone && funcArr) {
+        if(funcArr) {
             f7.popover.open('#idx-functions-list', '#idx-list-target');
         } else {
             f7.popover.close('#idx-functions-list');

apps/spreadsheeteditor/mobile/src/less/app.less

@@ -59,7 +59,7 @@
 }
 .page-function-info {
     &.page-content, .page-content {
-        background-color: @white;
+        background-color: @background-primary;
     }
 }
 

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

@@ -51,23 +51,8 @@ const FunctionsList = props => {
                                 onClick={(e) => {
                                     e.stopPropagation();
                                     let functionInfo = functions[elem.name];
-    
                                     if(functionInfo) {    
-                                        if(isPhone) {                                      
+                                        f7.views.current.router.navigate('/function-info/', {props: {functionInfo, functionObj: elem, insertFormula: props.insertFormula}});
-                                            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'/>
@@ -114,16 +99,8 @@ const CellEditorView = props => {
                 <div className="ce-group">
                     <Link icon="caret" onClick={expandClick} />
                 </div>
-                {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" 
@@ -132,7 +109,7 @@ const CellEditorView = props => {
                     closeByOutsideClick={true}
                 >
                     {funcArr && funcArr.length ?
-                        <View style={{height: '175px'}} routes={routes}>
+                        <View style={{height: '200px'}} routes={routes}>
                             <Page pageContent={false}>
                                 <Navbar className="navbar-hidden" />
                                 <FunctionsList