[SSE mobile] correct cell editor

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

@@ -11,6 +11,7 @@
 @import './icons-ios.less';
 @import './icons-material.less';
 @import './icons-common.less';
+@import './celleditor.less';
 
 .page[data-name='home'] {
     .page-content {

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

@@ -0,0 +1,79 @@
+
+@cellEditorHeight: 30px;
+@cellEditorExpandedHeight: 70px;
+@contentBackColor: #fff;
+@gray-light: #f1f1f1;
+
+#idx-celleditor {
+    display: flex;
+
+    height: @cellEditorHeight;
+    min-height: @cellEditorHeight;
+    background-color: @contentBackColor;
+
+    &.expanded {
+        min-height: @cellEditorExpandedHeight;
+        //height: @cellEditorExpandedHeight;
+        transition: min-height .1s;
+    }
+
+    &:after {
+        content: '';
+        position: absolute;
+        background-color: var(--f7-navbar-border-color, var(--f7-bars-border-color));
+        display: block;
+        z-index: 15;
+        top: auto;
+        right: auto;
+        bottom: 0;
+        left: 0;
+        height: 1px;
+        width: 100%;
+        transform-origin: 50% 100%;
+        transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
+    }
+
+    #box-cell-name {
+        background-color: var(--f7-navbar-bg-color);
+    }
+
+    #ce-cell-content {
+        padding: 3px 3px;
+        line-height: 1.428571429;
+        color: #000;
+        vertical-align: middle;
+        background-color: @contentBackColor;
+        min-height: @cellEditorHeight;
+        height: 100%;
+        width: 100%;
+    }
+
+    .caret {
+        &::after {
+            content: '';
+            position: absolute;
+            top: 8px;
+            left: 6px;
+            width: 8px;
+            height: 8px;
+            background-color: transparent;
+            border: solid 1px black;
+            border-bottom: none;
+            border-right: none;
+
+            transition: transform 0.2s ease;
+            transform: rotate(-135deg);
+        }
+
+        width: 30px;
+        height: 16px;
+    }
+
+    &.expanded {
+        .caret {
+            &::after {
+                transform: rotate(45deg) translate(3px, 3px);
+            }
+        }
+    }
+}

apps/spreadsheeteditor/mobile/src/page/app.jsx

@@ -34,20 +34,6 @@ export default class extends React.Component {
             <App params={ this.state.f7params } >
                 {/* Your main view, should have "view-main" class */}
                 <View main className="safe-areas" url="/">
-                    {/* Top Navbar */}
-                    <Navbar id='editor-navbar'>
-                        {/*<div slot="before-inner" className="main-logo"><Icon icon="icon-logo"></Icon></div>*/}
-                        <NavLeft>
-                            <Link icon='icon-undo'></Link>
-                            <Link icon='icon-redo'></Link>
-                        </NavLeft>
-                        <NavRight>
-                            <Link id='btn-edit' icon='icon-edit-settings' href={false} onClick={e => this.handleClickToOpenOptions('edit')}></Link>
-                            <Link href={false} icon='icon-collaboration' onClick={e => this.handleClickToOpenOptions('coauth')}></Link>
-                            <Link id='btn-settings' icon='icon-settings' href={false} onClick={e => this.handleClickToOpenOptions('settings')}></Link>
-                        </NavRight>
-                    </Navbar>
-                    {/*<CellEditor />*/}
                     <MainController />
                 </View>
             </App>

apps/spreadsheeteditor/mobile/src/page/main.jsx

@@ -48,7 +48,20 @@ export default class MainPage extends Component {
   render() {
       return (
           <Page name="home">
-              {/*<CellEditor />*/}
+              {/* Top Navbar */}
+              <Navbar id='editor-navbar'>
+                  {/*<div slot="before-inner" className="main-logo"><Icon icon="icon-logo"></Icon></div>*/}
+                  <NavLeft>
+                      <Link icon='icon-undo'></Link>
+                      <Link icon='icon-redo'></Link>
+                  </NavLeft>
+                  <NavRight>
+                      <Link id='btn-edit' icon='icon-edit-settings' href={false} onClick={e => this.handleClickToOpenOptions('edit')}></Link>
+                      <Link href={false} icon='icon-collaboration' onClick={e => this.handleClickToOpenOptions('coauth')}></Link>
+                      <Link id='btn-settings' icon='icon-settings' href={false} onClick={e => this.handleClickToOpenOptions('settings')}></Link>
+                  </NavRight>
+              </Navbar>
+              <CellEditor />
               {/* Page content */}
               <View id="editor_sdk" />
             {/*{*/}

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

@@ -1,10 +1,32 @@
 
-import React from 'react';
+import React, { useState } from 'react';
-import { Input, View } from 'framework7-react';
+import { Input, View, Button, Link } from 'framework7-react';
+
+const viewStyle = {
+    height: 30
+};
+
+const contentStyle = {
+    flexGrow: 1
+};
 
 const CellEditorView = props => {
-    return <View name="cellEditor">
+    const [expanded, setExpanded] = useState(false);
-                <Input type="textarea" inputId="ce-cell-content" />
+
+    const expandClick = e => {
+        setExpanded(!expanded);
+    };
+
+    return <View id="idx-celleditor" style={viewStyle} className={expanded?'expanded':'collapsed'}>
+                <div id="box-cell-name" className="ce-group">
+                    F(x)
+                </div>
+                <div className="ce-group" style={contentStyle}>
+                    <textarea id="ce-cell-content" spellCheck="false"></textarea>
+                </div>
+                <div className="ce-group">
+                    <Link icon="caret" onClick={expandClick}></Link>
+                </div>
             </View>;
 };