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

This commit is contained in:
Maxim Kadushkin 2021-01-13 12:48:03 +03:00
parent ade1f81420
commit 6149c9026f
3 changed files with 55 additions and 7 deletions

View file

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

View file

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

View file

@ -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}>
<textarea id="ce-cell-content" spellCheck="false"></textarea>
<div className="ce-group group--content" style={contentStyle}>
<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>;
};