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 {
height: 175px;
overflow-y: auto;
position: absolute;
top: 30px;
right: 0;
overflow-x: hidden;
// position: absolute;
// top: 30px;
// right: 0;
background-color: @white;
.list {
margin: 0;
ul:before {
display: none;
}
.item-content {
padding-left: 0;
}
.item-inner {
padding-left: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-left) - var(--menu-list-offset));
}
// margin: 0;
// ul:before {
// display: none;
// }
// .item-content {
// padding-left: 0;
// }
// .item-inner {
// padding-left: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-left) - var(--menu-list-offset));
// }
.item-title {
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 CellEditorView from '../view/CellEditor';
import { f7 } from 'framework7-react';
import { Device } from '../../../../common/mobile/utils/device';
const CellEditor = props => {
useEffect(() => {
@ -24,7 +25,15 @@ const CellEditor = props => {
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 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 {observer, inject} from "mobx-react";
// import {PageFunctionInfo} from "./add/AddFunction";
@ -14,6 +14,45 @@ const contentStyle = {
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 [expanded, setExpanded] = useState(false);
const isPhone = Device.isPhone;
@ -27,7 +66,9 @@ const CellEditorView = props => {
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">
<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');}}>
@ -35,40 +76,39 @@ const CellEditorView = props => {
</a>
</div>
<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" />
</div>
<div className="ce-group">
<Link icon="caret" onClick={expandClick} />
</div>
{funcArr && funcArr.length &&
<div id="idx-functions-list" className="functions-list" style={{left: isPhone ? '0' : '132px', 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) {
f7.dialog.create({
title: functionInfo.caption,
content: `<h3>${functionInfo.caption} ${functionInfo.args}</h3>
<p>${functionInfo.descr}</p>`,
buttons: [{text: 'Ok'}]
}).open();
}
}}>
<Icon icon='icon-info'/>
</div>
</ListItem>
)
})}
</List>
</div>
}
</View>;
{funcArr && funcArr.length ?
isPhone &&
<FunctionsList
functions={functions}
funcArr={funcArr}
insertFormula={props.insertFormula}
/>
: null}
</View>
<Popover
id="idx-functions-list"
className="popover__titled"
closeByBackdropClick={false}
backdrop={false}
closeByOutsideClick={true}
>
{funcArr && funcArr.length ?
<FunctionsList
functions={functions}
funcArr={funcArr}
insertFormula={props.insertFormula}
/>
: null}
</Popover>
</>
);
};
export default inject("storeAppOptions", "storeFunctions")(observer(CellEditorView));