[SSE mobile] added view to show cell name in formula bar

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

@@ -1,9 +1,21 @@
 
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import CellEditorView from '../view/CellEditor';
 
 const CellEditor = props => {
-    return <CellEditorView />
+    useEffect(() => {
+        Common.Notifications.on('engineCreated', api => {
+            api.asc_registerCallback('asc_onSelectionNameChanged', onApiCellSelection.bind(this));
+        });
+    }, []);
+
+    const [cellName, setCellName] = useState('');
+
+    const onApiCellSelection = info => {
+        setCellName(typeof(info)=='string' ? info : info.asc_getName());
+    };
+
+    return <CellEditorView cellName={cellName} />
 };
 
 export default CellEditor;

apps/spreadsheeteditor/mobile/src/less/celleditor.less

@@ -3,8 +3,15 @@
 @cellEditorExpandedHeight: 70px;
 @contentBackColor: #fff;
 @gray-light: #f1f1f1;
+@gray-darker: #848484; //rgb(132, 132, 132)
+@statusBarBorderColor: #cbcbcb;
 
 #idx-celleditor {
+    box-sizing: border-box;
+    * {
+        box-sizing: border-box;
+    }
+
     display: flex;
 
     height: @cellEditorHeight;
@@ -34,10 +41,31 @@
     }
 
     #box-cell-name {
+        display: inline-flex;
         background-color: var(--f7-navbar-bg-color);
     }
 
-    #ce-cell-content {
+    #idx-cell-name {
+        display: inline-block;
+        width: 90px;
+        padding: 0 4px;
+        border: 0 none;
+        line-height: 30px;
+        //font-size: 17px;
+        text-align: center;
+
+        &[disabled] {
+            color: @gray-darker;
+            opacity: 0.5;
+        }
+    }
+
+    #idx-btn-function {
+        line-height: @cellEditorHeight;
+        padding: 0 10px;
+    }
+
+    #idx-cell-content {
         padding: 3px 3px;
         line-height: 1.428571429;
         color: #000;
@@ -76,4 +104,9 @@
             }
         }
     }
+
+    .group--content {
+        position: relative;
+        .hairline(left, @statusBarBorderColor);
+    }
 }

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

@@ -19,13 +19,16 @@ const CellEditorView = props => {
 
     return <View id="idx-celleditor" style={viewStyle} className={expanded?'expanded':'collapsed'}>
                 <div id="box-cell-name" className="ce-group">
-                    F(x)
+                    <span id="idx-cell-name">{props.cellName}</span>
+                    <a href="#" id="idx-btn-function" className="link icon-only">
+                        <i className="icon icon-function" />
+                    </a>
                 </div>
-                <div className="ce-group" style={contentStyle}>
+                <div className="ce-group group--content" style={contentStyle}>
-                    <textarea id="ce-cell-content" spellCheck="false"></textarea>
+                    <textarea id="idx-cell-content" spellCheck="false" />
                 </div>
                 <div className="ce-group">
-                    <Link icon="caret" onClick={expandClick}></Link>
+                    <Link icon="caret" onClick={expandClick} />
                 </div>
             </View>;
 };