Lea/web-apps
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

[SSE mobile] Make tablet version

Browse source
This commit is contained in:
SergeyEzhin 2021-09-06 21:55:10 +03:00
parent a7311327f8
commit f1421ac2ed
3 changed files with 104 additions and 45 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

36
apps/common/mobile/resources/less/common.less
View file

@ -880,27 +880,37 @@ input[type="number"]::-webkit-inner-spin-button {
.functions-list { .functions-list {
height: 175px; height: 175px;
overflow-y: auto; overflow-y: auto;
position: absolute; overflow-x: hidden;
top: 30px; // position: absolute;
right: 0; // top: 30px;
// right: 0;
background-color: @white; background-color: @white;
.list { .list {
margin: 0; // margin: 0;
ul:before { // ul:before {
display: none; // display: none;
} // }
.item-content { // .item-content {
padding-left: 0; // padding-left: 0;
} // }
.item-inner { // .item-inner {
padding-left: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-left) - var(--menu-list-offset)); // padding-left: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-left) - var(--menu-list-offset));
} // }
.item-title { .item-title {
font-size: 15px; font-size: 15px;
} }
} }
} }
.target-function-list {
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 0;
height: 100%;
}

11
apps/spreadsheeteditor/mobile/src/controller/CellEditor.jsx
View file

@ -2,6 +2,7 @@
import React, { useEffect, useState } from 'react'; import React, { useEffect, useState } from 'react';
import CellEditorView from '../view/CellEditor'; import CellEditorView from '../view/CellEditor';
import { f7 } from 'framework7-react'; import { f7 } from 'framework7-react';
import { Device } from '../../../../common/mobile/utils/device';
const CellEditor = props => { const CellEditor = props => {
useEffect(() => { useEffect(() => {
@ -24,7 +25,15 @@ const CellEditor = props => {
setCoauthDisabled(info.asc_getLocked() === true || info.asc_getLockedTable() === true || info.asc_getLockedPivotTable()===true); setCoauthDisabled(info.asc_getLocked() === true || info.asc_getLockedTable() === true || info.asc_getLockedPivotTable()===true);
} }
const onFormulaCompleteMenu = funcArr => setFuncArr(funcArr); const onFormulaCompleteMenu = funcArr => {
setFuncArr(funcArr);
if(!Device.isPhone && funcArr) {
f7.popover.open('#idx-functions-list', '#idx-list-target');
} else {
f7.popover.close('#idx-functions-list');
}
}
const insertFormula = (name, type) => { const insertFormula = (name, type) => {
const api = Common.EditorApi.get(); const api = Common.EditorApi.get();

102
apps/spreadsheeteditor/mobile/src/view/CellEditor.jsx
View file

@ -1,5 +1,5 @@
import React, { useState } from 'react'; import React, { Fragment, useState } from 'react';
import { Input, View, Button, Link, Popover, ListItem, List, Icon, f7 } from 'framework7-react'; import { Input, View, Button, Link, Popover, ListItem, List, Icon, f7 } from 'framework7-react';
import {observer, inject} from "mobx-react"; import {observer, inject} from "mobx-react";
// import {PageFunctionInfo} from "./add/AddFunction"; // import {PageFunctionInfo} from "./add/AddFunction";
@ -14,6 +14,45 @@ const contentStyle = {
flexGrow: 1 flexGrow: 1
}; };
const FunctionsList = props => {
const isPhone = Device.isPhone;
const functions = props.functions;
const funcArr = props.funcArr;
return (
<div className="functions-list" style={{width: isPhone ? '100%' : '360px'}}>
<List>
{funcArr.map((elem, index) => {
return (
<ListItem key={index} title={elem.name} className="no-indicator" onClick={() => props.insertFormula(elem.name, elem.type)}>
<div slot='after'
onClick={(e) => {
e.stopPropagation();
let functionInfo = functions[elem.name];
if(functionInfo) {
if(isPhone) {
f7.dialog.create({
title: functionInfo.caption,
content: `<h3>${functionInfo.caption} ${functionInfo.args}</h3>
<p>${functionInfo.descr}</p>`,
buttons: [{text: 'Ok'}]
}).open();
} else {
console.log('other');
}
}
}}>
<Icon icon='icon-info'/>
</div>
</ListItem>
)
})}
</List>
</div>
)
}
const CellEditorView = props => { const CellEditorView = props => {
const [expanded, setExpanded] = useState(false); const [expanded, setExpanded] = useState(false);
const isPhone = Device.isPhone; const isPhone = Device.isPhone;
@ -27,7 +66,9 @@ const CellEditorView = props => {
setExpanded(!expanded); setExpanded(!expanded);
}; };
return <View id="idx-celleditor" style={viewStyle} className={expanded ? 'cell-editor expanded' : 'cell-editor collapsed'}> return (
<>
<View id="idx-celleditor" style={viewStyle} className={expanded ? 'cell-editor expanded' : 'cell-editor collapsed'}>
<div id="box-cell-name" className="ce-group"> <div id="box-cell-name" className="ce-group">
<span id="idx-cell-name">{props.cellName}</span> <span id="idx-cell-name">{props.cellName}</span>
<a href="#" id="idx-btn-function" className='link icon-only' disabled={(!isEdit && true) || props.stateCoauth} onClick={() => {props.onClickToOpenAddOptions('function', '#idx-btn-function');}}> <a href="#" id="idx-btn-function" className='link icon-only' disabled={(!isEdit && true) || props.stateCoauth} onClick={() => {props.onClickToOpenAddOptions('function', '#idx-btn-function');}}>
@ -35,40 +76,39 @@ const CellEditorView = props => {
</a> </a>
</div> </div>
<div className="ce-group group--content" style={contentStyle}> <div className="ce-group group--content" style={contentStyle}>
<div id="idx-list-target" className="target-function-list"></div>
<textarea id="idx-cell-content" spellCheck="false" /> <textarea id="idx-cell-content" spellCheck="false" />
</div> </div>
<div className="ce-group"> <div className="ce-group">
<Link icon="caret" onClick={expandClick} /> <Link icon="caret" onClick={expandClick} />
</div> </div>
{funcArr && funcArr.length && {funcArr && funcArr.length ?
<div id="idx-functions-list" className="functions-list" style={{left: isPhone ? '0' : '132px', width: isPhone ? '100%' : '360px'}}> isPhone &&
<List> <FunctionsList
{funcArr.map((elem, index) => { functions={functions}
return ( funcArr={funcArr}
<ListItem key={index} title={elem.name} className="no-indicator" onClick={() => props.insertFormula(elem.name, elem.type)}> insertFormula={props.insertFormula}
<div slot='after' />
onClick={(e) => { : null}
e.stopPropagation(); </View>
let functionInfo = functions[elem.name]; <Popover
id="idx-functions-list"
if(functionInfo) { className="popover__titled"
f7.dialog.create({ closeByBackdropClick={false}
title: functionInfo.caption, backdrop={false}
content: `<h3>${functionInfo.caption} ${functionInfo.args}</h3> closeByOutsideClick={true}
<p>${functionInfo.descr}</p>`, >
buttons: [{text: 'Ok'}] {funcArr && funcArr.length ?
}).open(); <FunctionsList
} functions={functions}
}}> funcArr={funcArr}
<Icon icon='icon-info'/> insertFormula={props.insertFormula}
</div> />
</ListItem> : null}
) </Popover>
})} </>
</List> );
</div>
}
</View>;
}; };
export default inject("storeAppOptions", "storeFunctions")(observer(CellEditorView)); export default inject("storeAppOptions", "storeFunctions")(observer(CellEditorView));