[SSE mobile] Added show panels and target element props to add modal

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

@@ -15,7 +15,8 @@ const CellEditor = props => {
         setCellName(typeof(info)=='string' ? info : info.asc_getName());
     };
 
-    return <CellEditorView cellName={cellName} />
+    return <CellEditorView cellName={cellName}
+                           onClickToOpenAddOptions={props.onClickToOpenAddOptions}/>
 };
 
 export default CellEditor;

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

@@ -15,17 +15,21 @@ export default class MainPage extends Component {
         this.state = {
             editOptionsVisible: false,
             addOptionsVisible: false,
+            addShowOptions: null,
             settingsVisible: false,
             collaborationVisible: false,
         };
     }
 
-    handleClickToOpenOptions = opts => {
+    handleClickToOpenOptions = (opts, showOpts) => {
         this.setState(state => {
             if ( opts == 'edit' )
                 return {editOptionsVisible: true};
             else if ( opts == 'add' )
-                return {addOptionsVisible: true};
+                return {
+                    addOptionsVisible: true,
+                    addShowOptions: showOpts
+                };
             else if ( opts == 'settings' )
                 return {settingsVisible: true};
             else if ( opts == 'coauth' )
@@ -65,7 +69,7 @@ export default class MainPage extends Component {
                       <Link id='btn-settings' icon='icon-settings' href={false} onClick={e => this.handleClickToOpenOptions('settings')}></Link>
                   </NavRight>
               </Navbar>
-              <CellEditor />
+              <CellEditor onClickToOpenAddOptions={(panels, button) => this.handleClickToOpenOptions('add', {panels: panels, button: button})}/>
               {/* Page content */}
               <View id="editor_sdk" />
             {
@@ -74,7 +78,7 @@ export default class MainPage extends Component {
             }
             {
                 !this.state.addOptionsVisible ? null :
-                    <AddOptions onclosed={this.handleOptionsViewClosed.bind(this, 'add')} />
+                    <AddOptions onclosed={this.handleOptionsViewClosed.bind(this, 'add')} showOptions={this.state.addShowOptions} />
             }
             {
                 !this.state.settingsVisible ? null :

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

@@ -20,7 +20,7 @@ const CellEditorView = props => {
     return <View id="idx-celleditor" style={viewStyle} className={expanded?'expanded':'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">
+                    <a href="#" id="idx-btn-function" className="link icon-only" onClick={() => {props.onClickToOpenAddOptions('formula', '#idx-btn-function');}}>
                         <i className="icon icon-function" />
                     </a>
                 </div>

apps/spreadsheeteditor/mobile/src/view/add/Add.jsx

@@ -44,19 +44,24 @@ const AddLayoutContent = ({ tabs }) => {
 const AddTabs = props => {
     const { t } = useTranslation();
     const _t = t('Add', {returnObjects: true});
+    const showPanels = props.showPanels;
     const tabs = [];
-    tabs.push({
-        caption: _t.textChart,
-        id: 'add-chart',
-        icon: 'icon-add-chart',
-        component: <AddChartController />
-    });
-    tabs.push({
-        caption: _t.textFormula,
-        id: 'add-formula',
-        icon: 'icon-add-formula',
-        component: <AddFormulaController />
-    });
+    if (!showPanels) {
+        tabs.push({
+            caption: _t.textChart,
+            id: 'add-chart',
+            icon: 'icon-add-chart',
+            component: <AddChartController/>
+        });
+    }
+    if (!showPanels || showPanels === 'formula') {
+        tabs.push({
+            caption: _t.textFormula,
+            id: 'add-formula',
+            icon: 'icon-add-formula',
+            component: <AddFormulaController/>
+        });
+    }
     /*tabs.push({
         caption: _t.textShape,
         id: 'add-shape',
@@ -93,10 +98,10 @@ class AddView extends Component {
         return (
             show_popover ?
                 <Popover id="add-popover" className="popover__titled" onPopoverClosed={() => this.props.onclosed()}>
-                    <AddTabs inPopover={true} onOptionClick={this.onoptionclick} style={{height: '410px'}} />
+                    <AddTabs inPopover={true} onOptionClick={this.onoptionclick} style={{height: '410px'}} showPanels={this.props.showPanels}/>
                 </Popover> :
                 <Popup className="add-popup" onPopupClosed={() => this.props.onclosed()}>
-                    <AddTabs onOptionClick={this.onoptionclick} />
+                    <AddTabs onOptionClick={this.onoptionclick} showPanels={this.props.showPanels}/>
                 </Popup>
         )
     }
@@ -104,9 +109,12 @@ class AddView extends Component {
 
 const Add = props => {
     useEffect(() => {
-        if ( Device.phone )
+        if ( Device.phone ) {
             f7.popup.open('.add-popup');
-        else f7.popover.open('#add-popover', '#btn-add');
+        } else {
+            const targetElem = !props.showOptions ? '#btn-add' : props.showOptions.button;
+            f7.popover.open('#add-popover', targetElem);
+        }
 
         return () => {
             // component will unmount
@@ -116,7 +124,10 @@ const Add = props => {
         if ( props.onclosed )
             props.onclosed();
     };
-    return <AddView usePopover={!Device.phone} onclosed={onviewclosed} />
+    return <AddView usePopover={!Device.phone}
+                    onclosed={onviewclosed}
+                    showPanels={props.showOptions ? props.showOptions.panels : undefined}
+    />
 };
 
 export default Add;