[SSE mobile] correct cell editor
This commit is contained in:
Maxim Kadushkin
parent
5e9e647973
commit
16c038aa2f
|
|
@ -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 {
|
||||
|
|
|
|||
79
apps/spreadsheeteditor/mobile/src/less/celleditor.less
Normal file
79
apps/spreadsheeteditor/mobile/src/less/celleditor.less
Normal file
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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" />
|
||||
{/*{*/}
|
||||
|
|
|
|||
|
|
@ -1,10 +1,32 @@
|
|||
|
||||
import React from 'react';
|
||||
import { Input, View } from 'framework7-react';
|
||||
import React, { useState } from 'react';
|
||||
import { Input, View, Button, Link } from 'framework7-react';
|
||||
|
||||
const viewStyle = {
|
||||
height: 30
|
||||
};
|
||||
|
||||
const contentStyle = {
|
||||
flexGrow: 1
|
||||
};
|
||||
|
||||
const CellEditorView = props => {
|
||||
return <View name="cellEditor">
|
||||
<Input type="textarea" inputId="ce-cell-content" />
|
||||
const [expanded, setExpanded] = useState(false);
|
||||
|
||||
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>;
|
||||
};
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue