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

Merge branch 'feature/mobile-apps-on-reactjs' into feature/mobile-apps-on-reactjs-pe-edit-settings

Browse source
This commit is contained in:
SergeyEzhin 2021-01-13 18:32:33 +03:00
parent 0512adb054 ccd2f70a8e
commit 7da390d917
17 changed files with 436 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
apps/common/mobile/lib/component/ThemeColorPalette.jsx
View file

@ -13,7 +13,7 @@ const ThemeColors = ({ themeColors, onColorClick, curColor }) => {
<a key={`tc-${rowIndex}-${index}`}
className={curColor && curColor.color === effect.color && curColor.effectValue === effect.effectValue ? 'active' : ''}
style={{ background: `#${effect.color}`}}
onClick={() => {onColorClick(effect.color, effect.effectId)}}
onClick={() => {onColorClick(effect.color, effect.effectId, effect.effectValue)}}
></a>
)
})}
@ -139,6 +139,9 @@ const CustomColorPicker = props => {
if (props.autoColor) {
currentColor = rgb2hex(props.autoColor);
}
if (currentColor === 'transparent' || !currentColor) {
currentColor = 'ffffff';
}
const countDynamicColors = props.countdynamiccolors || 10;
const [stateColor, setColor] = useState(`#${currentColor}`);
useEffect(() => {

7
apps/common/mobile/resources/less/common-ios.less
View file

@ -172,6 +172,13 @@
background-color: @autoColor;
}
}
.item-after {
.color-preview {
width: 75px;
height: 30px;
margin-top: -3px;
}
}
}
li.no-indicator {
.item-link {

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

@ -243,6 +243,12 @@
}
}
.page-content {
&.tab {
padding-top: 0;
}
}
.color-palettes {
.palette {
padding: 8px 0px;

80
apps/common/mobile/utils/LocalStorage.js Normal file
View file

@ -0,0 +1,80 @@
class LocalStorage {
constructor() {
Common.Gateway.on('internalcommand', data => {
if (data.type == 'localstorage') {
this._store = data.keys;
}
});
this._store = {};
try {
this._isAllowed = !!window.localStorage;
} catch (e) {
this._isAllowed = false;
}
}
get id() {
return this._storeName;
}
set id(name) {
this._storeName = name;
}
set keysFilter(value) {
this._filter = value;
}
get keysFilter() {
return this._filter;
}
sync() {
if ( !this._isAllowed )
Common.Gateway.internalMessage('localstorage', {cmd:'get', keys:this._filter});
}
save() {
if ( !this._isAllowed )
Common.Gateway.internalMessage('localstorage', {cmd:'set', keys:this._store});
}
setItem(name, value, just) {
if ( this._isAllowed ) {
try {
localStorage.setItem(name, value);
} catch (error){}
} else {
this._store[name] = value;
if ( just===true ) {
Common.Gateway.internalMessage('localstorage', {cmd:'set', keys: {name: value}});
}
}
}
getItem(name) {
if ( this._isAllowed )
return localStorage.getItem(name);
else return this._store[name]===undefined ? null : this._store[name];
};
setBool(name, value, just) {
this.setItem(name, value ? 1 : 0, just);
}
getBool(name, defValue) {
const value = this.getItem(name);
return (value !== null) ? (parseInt(value) != 0) : !!defValue;
}
itemExists(name) {
return this.getItem(name) !== null;
}
}
const instance = new LocalStorage();
export {instance as LocalStorage};

6
apps/documenteditor/mobile/locale/en.json
View file

@ -175,7 +175,11 @@
"textFontColors": "Font Colors",
"textAutomatic": "Automatic",
"textAddCustomColor": "Add Custom Color",
"textCustomColor": "Custom Color"
"textCustomColor": "Custom Color",
"textBackground": "Background",
"textFill": "Fill",
"textBorder": "Border",
"textEffects": "Effects"
},
"Add": {
"textTable": "Table",

20
apps/documenteditor/mobile/src/controller/edit/EditParagraph.jsx
View file

@ -1,9 +1,11 @@
import React, {Component} from 'react';
import { EditParagraph } from '../../view/edit/EditParagraph'
import { EditParagraph } from '../../view/edit/EditParagraph';
import {observer, inject} from "mobx-react";
class EditParagraphController extends Component {
constructor (props) {
super(props);
props.storeParagraphSettings.setBackColor(undefined);
}
onStyleClick (name) {
@ -129,6 +131,19 @@ class EditParagraphController extends Component {
}
}
onBackgroundColor (color) {
const api = Common.EditorApi.get();
const properties = new Asc.asc_CParagraphProperty();
properties.put_Shade(new Asc.asc_CParagraphShd());
if (color == 'transparent') {
properties.get_Shade().put_Value(Asc.c_oAscShdNil);
} else {
properties.get_Shade().put_Value(Asc.c_oAscShdClear);
properties.get_Shade().put_Color(Common.Utils.ThemeColor.getRgbColor(color));
}
api.paraApply(properties);
}
render () {
return (
<EditParagraph onStyleClick={this.onStyleClick}
@ -140,9 +155,10 @@ class EditParagraphController extends Component {
onOrphan={this.onOrphan}
onKeepTogether={this.onKeepTogether}
onKeepNext={this.onKeepNext}
onBackgroundColor={this.onBackgroundColor}
/>
)
}
}
export default EditParagraphController;
export default inject("storeParagraphSettings")(observer(EditParagraphController));

23
apps/documenteditor/mobile/src/controller/edit/EditShape.jsx
View file

@ -9,6 +9,8 @@ class EditShapeController extends Component {
constructor (props) {
super(props);
this.onWrapType = this.onWrapType.bind(this);
this.props.storeShapeSettings.setFillColor(undefined);
}
onRemoveShape () {
@ -104,6 +106,24 @@ class EditShapeController extends Component {
}
}
onFillColor (color) {
const api = Common.EditorApi.get();
const image = new Asc.asc_CImgProperty();
const shape = new Asc.asc_CShapeProperty();
const fill = new Asc.asc_CShapeFill();
if (color == 'transparent') {
fill.put_type(Asc.c_oAscFill.FILL_TYPE_NOFILL);
fill.put_fill(null);
} else {
fill.put_type(Asc.c_oAscFill.FILL_TYPE_SOLID);
fill.put_fill(new Asc.asc_CFillSolid());
fill.get_fill().put_color(Common.Utils.ThemeColor.getRgbColor(color));
}
shape.put_fill(fill);
image.put_ShapeProperties(shape);
api.ImgApply(image);
}
render () {
return (
<EditShape onRemoveShape={this.onRemoveShape}
@ -114,9 +134,10 @@ class EditShapeController extends Component {
onWrapDistance={this.onWrapDistance}
onReorder={this.onReorder}
onReplace={this.onReplace}
onFillColor={this.onFillColor}
/>
)
}
}
export default inject("storeShapeSettings")(observer(EditShapeController));
export default inject("storeShapeSettings", "storeFocusObjects")(observer(EditShapeController));

11
apps/documenteditor/mobile/src/controller/settings/ApplicationSettings.jsx
View file

@ -1,5 +1,6 @@
import React, { Component } from "react";
import { ApplicationSettings } from "../../view/settings/ApplicationSettings";
import { LocalStorage } from '../../../../../common/mobile/utils/LocalStorage';
class ApplicationSettingsController extends Component {
constructor(props) {
@ -8,10 +9,11 @@ class ApplicationSettingsController extends Component {
}
setUnitMeasurement(value) {
const api = Common.EditorApi.get();
value = (value !== null) ? parseInt(value) : Common.Utils.Metric.getDefaultMetric();
Common.Utils.Metric.setCurrentMetric(value);
// Common.localStorage.setItem("de-mobile-settings-unit", value);
LocalStorage.setItem("de-mobile-settings-unit", value);
const api = Common.EditorApi.get();
api.asc_SetDocumentUnits((value == Common.Utils.Metric.c_MetricUnits.inch) ? Asc.c_oAscDocumentUnits.Inch : ((value == Common.Utils.Metric.c_MetricUnits.pt) ? Asc.c_oAscDocumentUnits.Point : Asc.c_oAscDocumentUnits.Millimeter));
}
@ -23,14 +25,15 @@ class ApplicationSettingsController extends Component {
}
switchNoCharacters(value) {
Common.localStorage.setItem("de-mobile-no-characters", value);
const api = Common.EditorApi.get();
// Common.localStorage.setItem("de-mobile-no-characters", value);
api.put_ShowParaMarks(value);
}
switchShowTableEmptyLine(value) {
Common.localStorage.setItem("de-mobile-hidden-borders", value);
const api = Common.EditorApi.get();
// Common.localStorage.setItem("de-mobile-hidden-borders", state);
api.put_ShowTableEmptyLine(value);
}

24
apps/documenteditor/mobile/src/store/paragraphSettings.js
View file

@ -25,4 +25,28 @@ export class storeParagraphSettings {
@action changeParaStyleName (name) {
this.styleName = name;
}
@observable backColor = undefined;
setBackColor (color) {
this.backColor = color;
}
getBackgroundColor (paragraphObject) {
const shade = paragraphObject.get_Shade();
let backColor = 'transparent';
if (!!shade && shade.get_Value() === Asc.c_oAscShdClear) {
const color = shade.get_Color();
if (color) {
if (color.get_type() == Asc.c_oAscColor.COLOR_TYPE_SCHEME) {
backColor = {
color: Common.Utils.ThemeColor.getHexColor(color.get_r(), color.get_g(), color.get_b()),
effectValue: color.get_value()
};
} else {
backColor = Common.Utils.ThemeColor.getHexColor(color.get_r(), color.get_g(), color.get_b());
}
}
}
this.backColor = backColor;
return backColor;
}
}

25
apps/documenteditor/mobile/src/store/shapeSettings.js
View file

@ -189,4 +189,29 @@ export class storeShapeSettings {
getWrapDistance (shapeObject) {
return shapeObject.get_Paddings().get_Top();
}
// Fill Color
@observable fillColor = undefined;
setFillColor (color) {
this.fillColor = color;
}
getFillColor (shapeObject) {
let fill = shapeObject.get_ShapeProperties().get_fill();
const fillType = fill.get_type();
let color = 'transparent';
if (fillType == Asc.c_oAscFill.FILL_TYPE_SOLID) {
fill = fill.get_fill();
const sdkColor = fill.get_color();
if (sdkColor) {
if (sdkColor.get_type() == Asc.c_oAscColor.COLOR_TYPE_SCHEME) {
color = {color: Common.Utils.ThemeColor.getHexColor(sdkColor.get_r(), sdkColor.get_g(), sdkColor.get_b()), effectValue: sdkColor.get_value()};
} else {
color = Common.Utils.ThemeColor.getHexColor(sdkColor.get_r(), sdkColor.get_g(), sdkColor.get_b());
}
}
}
this.fillColor = color;
return color;
}
}

5
apps/documenteditor/mobile/src/view/app.jsx
View file

@ -2,10 +2,11 @@ import React from 'react';
import {App,Panel,Views,View,Popup,Page,Navbar,Toolbar,NavRight,Link,Block,BlockTitle,List,ListItem,ListInput,ListButton,BlockFooter} from 'framework7-react';
import routes from '../js/routes';
import '../../../../common/Gateway.js';
import '../../../../common/main/lib/util/utils.js';
import routes from '../js/routes';
import Notifications from '../../../../common/mobile/utils/notifications.js'
import {MainController} from '../controller/Main';
import {Device} from '../../../../common/mobile/utils/device'

22
apps/documenteditor/mobile/src/view/edit/Edit.jsx
View file

@ -15,8 +15,8 @@ import EditHyperlinkController from "../../controller/edit/EditHyperlink";
import EditHeaderController from "../../controller/edit/EditHeader";
import {PageTextFonts, PageTextAddFormatting, PageTextBullets, PageTextNumbers, PageTextLineSpacing, PageTextFontColor, PageTextCustomFontColor, PageTextBackgroundColor, PageTextCustomBackColor} from "./EditText";
import {PageAdvancedSettings} from "./EditParagraph";
import {PageWrap, PageReorder, PageReplace} from "./EditShape";
import {ParagraphAdvSettings, PageParagraphBackColor, PageParagraphCustomColor} from "./EditParagraph";
import {PageShapeStyle, PageShapeCustomFillColor, PageWrap, PageReorder, PageReplace} from "./EditShape";
import {PageImageReorder, PageImageReplace, PageImageWrap, PageLinkSettings} from "./EditImage";
import {PageTableOptions, PageTableWrap, PageTableStyle} from "./EditTable";
import {PageChartWrap, PageChartReorder} from "./EditChart";
@ -62,9 +62,25 @@ const routes = [
//Edit paragraph
{
path: '/edit-paragraph-adv/',
component: PageAdvancedSettings,
component: ParagraphAdvSettings,
},
{
path: '/edit-paragraph-back-color/',
component: PageParagraphBackColor,
},
{
path: '/edit-paragraph-custom-color/',
component: PageParagraphCustomColor,
},
//Edit shape
{
path: '/edit-shape-style/',
component: PageShapeStyle,
},
{
path: '/edit-shape-custom-fill-color/',
component: PageShapeCustomFillColor,
},
{
path: '/edit-shape-wrap/',
component: PageWrap,

82
apps/documenteditor/mobile/src/view/edit/EditParagraph.jsx
View file

@ -3,6 +3,7 @@ import {observer, inject} from "mobx-react";
import {List, ListItem, Icon, Button, Page, Navbar, Segmented, BlockTitle, Toggle} from 'framework7-react';
import { useTranslation } from 'react-i18next';
import {Device} from '../../../../../common/mobile/utils/device';
import { ThemeColorPalette, CustomColorPicker } from '../../../../../common/mobile/lib/component/ThemeColorPalette.jsx';
const PageAdvancedSettings = props => {
const isAndroid = Device.android;
@ -99,21 +100,86 @@ const PageAdvancedSettings = props => {
)
};
const PageCustomBackColor = props => {
const { t } = useTranslation();
const _t = t('Edit', {returnObjects: true});
let backgroundColor = props.storeParagraphSettings.backColor;
if (typeof backgroundColor === 'object') {
backgroundColor = backgroundColor.color;
}
const onAddNewColor = (colors, color) => {
props.storePalette.changeCustomColors(colors);
props.onBackgroundColor(color);
props.storeParagraphSettings.setBackColor(color);
props.f7router.back();
};
return(
<Page>
<Navbar title={_t.textCustomColor} backLink={_t.textBack} />
<CustomColorPicker currentColor={backgroundColor} onAddNewColor={onAddNewColor}/>
</Page>
)
};
const PageBackgroundColor = props => {
const { t } = useTranslation();
const _t = t('Edit', {returnObjects: true});
const backgroundColor = props.storeParagraphSettings.backColor;
const customColors = props.storePalette.customColors;
const changeColor = (color, effectId, effectValue) => {
if (color !== 'empty') {
if (effectId !==undefined ) {
const newColor = {color: color, effectId: effectId, effectValue: effectValue};
props.onBackgroundColor(newColor);
props.storeParagraphSettings.setBackColor(newColor);
} else {
props.onBackgroundColor(color);
props.storeParagraphSettings.setBackColor(color);
}
} else {
// open custom color menu
props.f7router.navigate('/edit-paragraph-custom-color/');
}
};
return(
<Page>
<Navbar title={_t.textBackground} backLink={_t.textBack} />
<ThemeColorPalette changeColor={changeColor} curColor={backgroundColor} customColors={customColors} transparent={true}/>
<List>
<ListItem title={_t.textAddCustomColor} link={'/edit-paragraph-custom-color/'} routeProps={{
onBackgroundColor: props.onBackgroundColor
}}></ListItem>
</List>
</Page>
)
};
const EditParagraph = props => {
const { t } = useTranslation();
const _t = t('Edit', {returnObjects: true});
const storeParagraphSettings = props.storeParagraphSettings;
const paragraphStyles = storeParagraphSettings.paragraphStyles;
const curStyleName = storeParagraphSettings.styleName;
const thumbSize = storeParagraphSettings.styleThumbSize;
const paragraph = props.storeFocusObjects.paragraphObject;
const curBackColor = storeParagraphSettings.backColor ? storeParagraphSettings.backColor : storeParagraphSettings.getBackgroundColor(paragraph);
const background = curBackColor !== 'transparent' ? `#${(typeof curBackColor === "object" ? curBackColor.color : curBackColor)}` : curBackColor;
return (
<Fragment>
<List>
<ListItem title={t('Edit.textBackground')} link=''>
<span className="color-preview" slot="after"></span>
<ListItem title={_t.textBackground} link='/edit-paragraph-back-color/' routeProps={{
onBackgroundColor: props.onBackgroundColor
}}>
<span className="color-preview"
slot="after"
style={{ background: background}}
></span>
</ListItem>
</List>
<List>
<ListItem title={t('Edit.textAdvancedSettings')} link='/edit-paragraph-adv/' routeProps={{
<ListItem title={_t.textAdvancedSettings} link='/edit-paragraph-adv/' routeProps={{
onDistanceBefore: props.onDistanceBefore,
onDistanceAfter: props.onDistanceAfter,
onSpinFirstLine: props.onSpinFirstLine,
@ -124,7 +190,7 @@ const EditParagraph = props => {
onKeepNext: props.onKeepNext
}}></ListItem>
</List>
<BlockTitle>{t('Edit.textParagraphStyles')}</BlockTitle>
<BlockTitle>{_t.textParagraphStyles}</BlockTitle>
<List>
{paragraphStyles.map((style, index) => (
<ListItem
@ -144,7 +210,11 @@ const EditParagraph = props => {
};
const EditParagraphContainer = inject("storeParagraphSettings", "storeFocusObjects")(observer(EditParagraph));
const AdvSettingsContainer = inject("storeParagraphSettings", "storeFocusObjects")(observer(PageAdvancedSettings));
const ParagraphAdvSettings = inject("storeParagraphSettings", "storeFocusObjects")(observer(PageAdvancedSettings));
const PageParagraphBackColor = inject("storeParagraphSettings", "storePalette")(observer(PageBackgroundColor));
const PageParagraphCustomColor = inject("storeParagraphSettings", "storePalette")(observer(PageCustomBackColor));
export {EditParagraphContainer as EditParagraph,
AdvSettingsContainer as PageAdvancedSettings};
ParagraphAdvSettings,
PageParagraphBackColor,
PageParagraphCustomColor};

89
apps/documenteditor/mobile/src/view/edit/EditShape.jsx
View file

@ -1,13 +1,88 @@
import React, {Fragment, useState} from 'react';
import {observer, inject} from "mobx-react";
import {List, ListItem, Icon, Row, Page, Navbar, BlockTitle, Toggle, Range, ListButton} from 'framework7-react';
import {List, ListItem, Icon, Row, Page, Navbar, BlockTitle, Toggle, Range, ListButton, Link, Tabs, Tab} from 'framework7-react';
import { useTranslation } from 'react-i18next';
import {Device} from '../../../../../common/mobile/utils/device';
import {CustomColorPicker, ThemeColorPalette} from "../../../../../common/mobile/lib/component/ThemeColorPalette.jsx";
const PageCustomFillColor = props => {
const { t } = useTranslation();
const _t = t('Edit', {returnObjects: true});
let fillColor = props.storeShapeSettings.fillColor;
if (typeof fillColor === 'object') {
fillColor = fillColor.color;
}
const onAddNewColor = (colors, color) => {
props.storePalette.changeCustomColors(colors);
props.onFillColor(color);
props.storeShapeSettings.setFillColor(color);
props.f7router.back();
};
return(
<Page>
<Navbar title={_t.textCustomColor} backLink={_t.textBack} />
<CustomColorPicker currentColor={fillColor} onAddNewColor={onAddNewColor}/>
</Page>
)
};
const FillTab = inject("storeFocusObjects", "storeShapeSettings", "storePalette")(observer(props => {
const { t } = useTranslation();
const _t = t('Edit', {returnObjects: true});
const storeShapeSettings = props.storeShapeSettings;
const shapeObject = props.storeFocusObjects.shapeObject;
const curFillColor = storeShapeSettings.fillColor ? storeShapeSettings.fillColor : storeShapeSettings.getFillColor(shapeObject);
const customColors = props.storePalette.customColors;
const changeColor = (color, effectId, effectValue) => {
if (color !== 'empty') {
if (effectId !==undefined ) {
const newColor = {color: color, effectId: effectId, effectValue: effectValue};
props.onFillColor(newColor);
storeShapeSettings.setFillColor(newColor);
} else {
props.onFillColor(color);
storeShapeSettings.setFillColor(color);
}
} else {
// open custom color menu
props.f7router.navigate('/edit-shape-custom-fill-color/');
}
};
return(
<Fragment>
<ThemeColorPalette changeColor={changeColor} curColor={curFillColor} customColors={customColors} transparent={true}/>
<List>
<ListItem title={_t.textAddCustomColor} link={'/edit-shape-custom-fill-color/'} routeProps={{
onFillColor: props.onFillColor
}}></ListItem>
</List>
</Fragment>
)
}));
const PageStyle = props => {
const { t } = useTranslation();
const _t = t('Edit', {returnObjects: true});
return (
<Page>
<Navbar backLink={_t.textBack}>
<div className='tab-buttons tabbar'>
<Link key={"de-link-shape-fill"} tabLink={"#edit-shape-fill"} tabLinkActive={true}>{_t.textFill}</Link>
<Link key={"de-link-shape-border"} tabLink={"#edit-shape-border"}>{_t.textBorder}</Link>
<Link key={"de-link-shape-effects"} tabLink={"#edit-shape-effects"}>{_t.textEffects}</Link>
</div>
</Navbar>
<Tabs animated>
<Tab key={"de-tab-shape-fill"} id={"edit-shape-fill"} className="page-content" tabActive={true}>
<FillTab onFillColor={props.onFillColor}/>
</Tab>
<Tab key={"de-tab-shape-border"} id={"edit-shape-border"} className="page-content">
border
</Tab>
<Tab key={"de-tab-shape-effects"} id={"edit-shape-effects"} className="page-content">
effects
</Tab>
</Tabs>
</Page>
)
};
@ -170,7 +245,9 @@ const EditShape = props => {
return (
<Fragment>
<List>
<ListItem title={_t.textStyle}></ListItem>
<ListItem title={_t.textStyle} link='/edit-shape-style/' routeProps={{
onFillColor: props.onFillColor
}}></ListItem>
<ListItem title={_t.textWrap} link='/edit-shape-wrap/' routeProps={{
onWrapType: props.onWrapType,
onShapeAlign: props.onShapeAlign,
@ -193,13 +270,15 @@ const EditShape = props => {
};
const EditShapeContainer = inject("storeFocusObjects")(observer(EditShape));
const PageStyleContainer = inject("storeFocusObjects")(observer(PageStyle));
const PageShapeStyle = inject("storeFocusObjects")(observer(PageStyle));
const PageShapeCustomFillColor = inject("storeFocusObjects", "storeShapeSettings", "storePalette")(observer(PageCustomFillColor));
const PageWrapContainer = inject("storeShapeSettings", "storeFocusObjects")(observer(PageWrap));
const PageReplaceContainer = inject("storeShapeSettings","storeFocusObjects")(observer(PageReplace));
const PageReorderContainer = inject("storeFocusObjects")(observer(PageReorder));
export {EditShapeContainer as EditShape,
PageStyleContainer as PageStyle,
PageShapeStyle,
PageShapeCustomFillColor,
PageWrapContainer as PageWrap,
PageReplaceContainer as PageReplace,
PageReorderContainer as PageReorder}

16
apps/spreadsheeteditor/mobile/src/controller/CellEditor.jsx
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;

36
apps/spreadsheeteditor/mobile/src/less/celleditor.less
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,32 @@
}
#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 {
height: @cellEditorHeight;
line-height: @cellEditorHeight;
padding: 0 10px;
}
#idx-cell-content {
padding: 3px 3px;
line-height: 1.428571429;
color: #000;
@ -76,4 +105,9 @@
}
}
}
.group--content {
position: relative;
.hairline(left, @statusBarBorderColor);
}
}

11
apps/spreadsheeteditor/mobile/src/view/CellEditor.jsx
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>;
};