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

Merge branch 'feature/mobile-apps-on-reactjs-bug50044' into develop

Browse source
This commit is contained in:
JuliaSvinareva 2021-05-01 18:41:17 +03:00
parent 374d67c75a 61998a2c04
commit 7bb9cc90ab
18 changed files with 322 additions and 94 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -32,6 +32,18 @@
}
}
.navbar-hidden {
transform: translate3d(0, calc(-1 * (var(--f7-navbar-height) + var(--f7-subnavbar-height))), 0);
}
.navbar-hidden+.page>.page-content, .navbar-hidden+.page-content {
padding-top: 0;
}
.page.editor>.page-content {
transition: padding-top .3s ease-in;
}
.subnavbar {
.subnavbar-inner {
padding: 0;

11
apps/documenteditor/mobile/src/page/main.jsx
View file

@ -44,6 +44,10 @@ class MainPage extends Component {
collaborationPage: showOpts
};
});
if ((opts === 'edit' || opts === 'coauth') && Device.phone) {
f7.navbar.hide('.main-navbar');
}
};
handleOptionsViewClosed = opts => {
@ -57,7 +61,10 @@ class MainPage extends Component {
return {settingsVisible: false};
else if ( opts == 'coauth' )
return {collaborationVisible: false};
})
});
if ((opts === 'edit' || opts === 'coauth') && Device.phone) {
f7.navbar.show('.main-navbar');
}
})();
};
@ -66,7 +73,7 @@ class MainPage extends Component {
const config = appOptions.config;
const showLogo = !(appOptions.canBrandingExt && (config.customization && (config.customization.loaderName || config.customization.loaderLogo)));
return (
<Page name="home" className={showLogo && 'page-with-logo'}>
<Page name="home" className={`editor${ showLogo ? ' page-with-logo' : ''}`}>
{/* Top Navbar */}
<Navbar id='editor-navbar' className={`main-navbar${showLogo ? ' navbar-with-logo' : ''}`}>
{showLogo && <div className="main-logo"><Icon icon="icon-logo"></Icon></div>}

1
apps/documenteditor/mobile/src/store/focusObjects.js
View file

@ -24,6 +24,7 @@ export class storeFocusObjects {
_headerType = 1;
resetFocusObjects (objects) {
this._focusObjects = objects;
}
get settings() {

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

@ -20,6 +20,11 @@ export class storeParagraphSettings {
styleName = undefined;
initEditorStyles (styles) {
this.styles = styles.get_MergedStyles();
this.styleThumbSize = {
width : styles.STYLE_THUMBNAIL_WIDTH,
height : styles.STYLE_THUMBNAIL_HEIGHT
};
}
get paragraphStyles () {
@ -34,6 +39,7 @@ export class storeParagraphSettings {
}
changeParaStyleName (name) {
this.styleName = name;
}
backColor = undefined;

51
apps/documenteditor/mobile/src/view/edit/EditChart.jsx
View file

@ -1,6 +1,7 @@
import React, {Fragment, useState} from 'react';
import {observer, inject} from "mobx-react";
import {List, ListItem, ListButton, Icon, Row, Page, Navbar, BlockTitle, Toggle, Range, Link, Tabs, Tab} from 'framework7-react';
import {f7} 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";
@ -118,29 +119,36 @@ const PageStyle = props => {
const { t } = useTranslation();
const _t = t('Edit', {returnObjects: true});
const storeChartSettings = props.storeChartSettings;
const chartProperties = props.storeFocusObjects.chartObject.get_ChartProperties();
const chartProperties = props.storeFocusObjects.chartObject ? props.storeFocusObjects.chartObject.get_ChartProperties() : null;
const types = storeChartSettings.types;
const curType = chartProperties.getType();
const curType = chartProperties ? chartProperties.getType() : null;
const styles = storeChartSettings.styles;
const shapeObject = props.storeFocusObjects.shapeObject;
const shapeStroke = shapeObject.get_ShapeProperties().get_stroke();
let borderSize, borderType, borderColor;
if (shapeObject) {
const shapeStroke = shapeObject.get_ShapeProperties().get_stroke();
borderSize = shapeStroke.get_width() * 72.0 / 25.4;
borderType = shapeStroke.get_type();
borderColor = !storeChartSettings.borderColor ? storeChartSettings.initBorderColor(shapeStroke) : storeChartSettings.borderColor;
}
// Init border size
const borderSizeTransform = storeChartSettings.borderSizeTransform();
const borderSize = shapeStroke.get_width() * 72.0 / 25.4;
const borderType = shapeStroke.get_type();
const displayBorderSize = (borderType == Asc.c_oAscStrokeType.STROKE_NONE) ? 0 : borderSizeTransform.indexSizeByValue(borderSize);
const displayTextBorderSize = (borderType == Asc.c_oAscStrokeType.STROKE_NONE) ? 0 : borderSizeTransform.sizeByValue(borderSize);
const displayBorderSize = (borderType == Asc.c_oAscStrokeType.STROKE_NONE || borderType === undefined) ? 0 : borderSizeTransform.indexSizeByValue(borderSize);
const displayTextBorderSize = (borderType == Asc.c_oAscStrokeType.STROKE_NONE || borderType === undefined) ? 0 : borderSizeTransform.sizeByValue(borderSize);
const [stateBorderSize, setBorderSize] = useState(displayBorderSize);
const [stateTextBorderSize, setTextBorderSize] = useState(displayTextBorderSize);
// Init border color
const borderColor = !storeChartSettings.borderColor ? storeChartSettings.initBorderColor(shapeStroke) : storeChartSettings.borderColor;
const displayBorderColor = borderColor !== 'transparent' ? `#${(typeof borderColor === "object" ? borderColor.color : borderColor)}` : borderColor;
if (!chartProperties && Device.phone) {
$$('.sheet-modal.modal-in').length > 0 && f7.sheet.close();
return null;
}
return (
<Page>
<Navbar backLink={_t.textBack}>
@ -231,13 +239,20 @@ const PageWrap = props => {
const _t = t('Edit', {returnObjects: true});
const storeChartSettings = props.storeChartSettings;
const chartObject = props.storeFocusObjects.chartObject;
const wrapType = storeChartSettings.getWrapType(chartObject);
const align = storeChartSettings.getAlign(chartObject);
const moveText = storeChartSettings.getMoveText(chartObject);
const overlap = storeChartSettings.getOverlap(chartObject);
const distance = Common.Utils.Metric.fnRecalcFromMM(storeChartSettings.getWrapDistance(chartObject));
let wrapType, align, moveText, overlap, distance;
if (chartObject) {
wrapType = storeChartSettings.getWrapType(chartObject);
align = storeChartSettings.getAlign(chartObject);
moveText = storeChartSettings.getMoveText(chartObject);
overlap = storeChartSettings.getOverlap(chartObject);
distance = Common.Utils.Metric.fnRecalcFromMM(storeChartSettings.getWrapDistance(chartObject));
}
const metricText = Common.Utils.Metric.getCurrentMetricName();
const [stateDistance, setDistance] = useState(distance);
if (!chartObject && Device.phone) {
$$('.sheet-modal.modal-in').length > 0 && f7.sheet.close();
return null;
}
return (
<Page>
<Navbar title={_t.textWrap} backLink={_t.textBack} />
@ -328,6 +343,11 @@ const PageWrap = props => {
const PageReorder = props => {
const { t } = useTranslation();
const _t = t('Edit', {returnObjects: true});
const chartObject = props.storeFocusObjects.chartObject;
if (!chartObject && Device.phone) {
$$('.sheet-modal.modal-in').length > 0 && f7.sheet.close();
return null;
}
return (
<Page>
<Navbar title={_t.textReorder} backLink={_t.textBack} />
@ -382,6 +402,7 @@ const EditChart = props => {
const PageChartStyle = inject("storeChartSettings", "storeFocusObjects")(observer(PageStyle));
const PageChartWrap = inject("storeChartSettings", "storeFocusObjects")(observer(PageWrap));
const PageChartReorder = inject("storeFocusObjects")(observer(PageReorder));
const PageChartCustomFillColor = inject("storeChartSettings", "storePalette")(observer(PageCustomFillColor));
const PageChartBorderColor = inject("storeChartSettings", "storePalette")(observer(PageBorderColor));
const PageChartCustomBorderColor = inject("storeChartSettings", "storePalette")(observer(PageCustomBorderColor));
@ -392,4 +413,4 @@ export {EditChart,
PageChartBorderColor,
PageChartCustomBorderColor,
PageChartWrap,
PageReorder as PageChartReorder}
PageChartReorder}

8
apps/documenteditor/mobile/src/view/edit/EditHeader.jsx
View file

@ -22,19 +22,19 @@ const EditHeader = props => {
<Fragment>
<List>
<ListItem title={_t.textDifferentFirstPage}>
<Toggle checked={isDiffFirst} onToggleChange={() => {props.onDiffFirst(!isDiffFirst)}}/>
<Toggle checked={isDiffFirst} onChange={() => {props.onDiffFirst(!isDiffFirst)}}/>
</ListItem>
<ListItem title={_t.textDifferentOddAndEvenPages}>
<Toggle checked={isDiffOdd} onToggleChange={() => {props.onDiffOdd(!isDiffOdd)}}/>
<Toggle checked={isDiffOdd} onChange={() => {props.onDiffOdd(!isDiffOdd)}}/>
</ListItem>
<ListItem title={_t.textLinkToPrevious} className={linkToPrev===null ? 'disabled' : ''}>
<Toggle checked={boolLinkToPrev} onToggleChange={() => {props.onSameAs(!boolLinkToPrev)}}/>
<Toggle checked={boolLinkToPrev} onChange={() => {props.onSameAs(!boolLinkToPrev)}}/>
</ListItem>
</List>
<BlockTitle>{_t.textPageNumbering}</BlockTitle>
<List>
<ListItem title={_t.textContinueFromPreviousSection}>
<Toggle checked={startPageNumber<0} onToggleChange={() => {props.onNumberingContinue(!(startPageNumber<0), _startAt)}}/>
<Toggle checked={startPageNumber<0} onChange={() => {props.onNumberingContinue(!(startPageNumber<0), _startAt)}}/>
</ListItem>
<ListItem title={_t.textStartAt} className={startPageNumber<0 ? 'disabled' : ''}>
{!isAndroid && <div slot='after-start'>{_startAt}</div>}

27
apps/documenteditor/mobile/src/view/edit/EditImage.jsx
View file

@ -11,13 +11,20 @@ const PageWrap = props => {
const _t = t('Edit', {returnObjects: true});
const storeImageSettings = props.storeImageSettings;
const imageObject = props.storeFocusObjects.imageObject;
const wrapType = storeImageSettings.getWrapType(imageObject);
const align = storeImageSettings.getAlign(imageObject);
const moveText = storeImageSettings.getMoveText(imageObject);
const overlap = storeImageSettings.getOverlap(imageObject);
const distance = Common.Utils.Metric.fnRecalcFromMM(storeImageSettings.getWrapDistance(imageObject));
let wrapType, align, moveText, overlap, distance;
if (imageObject) {
wrapType = storeImageSettings.getWrapType(imageObject);
align = storeImageSettings.getAlign(imageObject);
moveText = storeImageSettings.getMoveText(imageObject);
overlap = storeImageSettings.getOverlap(imageObject);
distance = Common.Utils.Metric.fnRecalcFromMM(storeImageSettings.getWrapDistance(imageObject));
}
const metricText = Common.Utils.Metric.getCurrentMetricName();
const [stateDistance, setDistance] = useState(distance);
if (!imageObject && Device.phone) {
$$('.sheet-modal.modal-in').length > 0 && f7.sheet.close();
return null;
}
return (
<Page>
<Navbar title={_t.textWrap} backLink={_t.textBack} />
@ -143,6 +150,11 @@ const PageLinkSettings = props => {
const PageReplace = props => {
const { t } = useTranslation();
const _t = t('Edit', {returnObjects: true});
const imageObject = props.storeFocusObjects.imageObject;
if (!imageObject && Device.phone) {
$$('.sheet-modal.modal-in').length > 0 && f7.sheet.close();
return null;
}
return (
<Page>
<Navbar title={_t.textReplace} backLink={_t.textBack} />
@ -163,6 +175,11 @@ const PageReplace = props => {
const PageReorder = props => {
const { t } = useTranslation();
const _t = t('Edit', {returnObjects: true});
const imageObject = props.storeFocusObjects.imageObject;
if (!imageObject && Device.phone) {
$$('.sheet-modal.modal-in').length > 0 && f7.sheet.close();
return null;
}
return (
<Page>
<Navbar title={_t.textReorder} backLink={_t.textBack} />

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

@ -1,6 +1,6 @@
import React, {Fragment, useState} from 'react';
import {observer, inject} from "mobx-react";
import {List, ListItem, Icon, Button, Page, Navbar, Segmented, BlockTitle, Toggle} from 'framework7-react';
import {f7, 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';
@ -11,24 +11,31 @@ const PageAdvancedSettings = props => {
const metricText = Common.Utils.Metric.getCurrentMetricName();
const storeFocusObjects = props.storeFocusObjects;
const paragraphObj = storeFocusObjects.paragraphObject;
if (paragraphObj.get_Ind()===null || paragraphObj.get_Ind()===undefined) {
paragraphObj.get_Ind().put_FirstLine(0);
let firstLine, spaceBefore, spaceAfter, spaceBeforeFix, spaceAfterFix, displayBefore, displayAfter, spaceBetween, breakBefore, orphanControl, keepTogether, keepWithNext;
if (paragraphObj) {
if (paragraphObj.get_Ind()===null || paragraphObj.get_Ind()===undefined) {
paragraphObj.get_Ind().put_FirstLine(0);
}
firstLine = parseFloat(Common.Utils.Metric.fnRecalcFromMM(paragraphObj.get_Ind().get_FirstLine()).toFixed(2));
spaceBefore = paragraphObj.get_Spacing().get_Before() < 0 ? paragraphObj.get_Spacing().get_Before() : Common.Utils.Metric.fnRecalcFromMM(paragraphObj.get_Spacing().get_Before());
spaceAfter = paragraphObj.get_Spacing().get_After() < 0 ? paragraphObj.get_Spacing().get_After() : Common.Utils.Metric.fnRecalcFromMM(paragraphObj.get_Spacing().get_After());
spaceBeforeFix = parseFloat(spaceBefore.toFixed(2));
spaceAfterFix = parseFloat(spaceAfter.toFixed(2));
displayBefore = spaceBefore < 0 ? t('Edit.textAuto') : spaceBeforeFix + ' ' + metricText;
displayAfter = spaceAfter < 0 ? t('Edit.textAuto') : spaceAfterFix + ' ' + metricText;
spaceBetween = paragraphObj.get_ContextualSpacing();
breakBefore = paragraphObj.get_PageBreakBefore();
orphanControl = paragraphObj.get_WidowControl();
keepTogether = paragraphObj.get_KeepLines();
keepWithNext = paragraphObj.get_KeepNext();
} else {
if (Device.phone) {
$$('.sheet-modal.modal-in').length > 0 && f7.sheet.close();
return null;
}
}
const firstLine = parseFloat(Common.Utils.Metric.fnRecalcFromMM(paragraphObj.get_Ind().get_FirstLine()).toFixed(2));
const spaceBefore = paragraphObj.get_Spacing().get_Before() < 0 ? paragraphObj.get_Spacing().get_Before() : Common.Utils.Metric.fnRecalcFromMM(paragraphObj.get_Spacing().get_Before());
const spaceAfter = paragraphObj.get_Spacing().get_After() < 0 ? paragraphObj.get_Spacing().get_After() : Common.Utils.Metric.fnRecalcFromMM(paragraphObj.get_Spacing().get_After());
const spaceBeforeFix = parseFloat(spaceBefore.toFixed(2));
const spaceAfterFix = parseFloat(spaceAfter.toFixed(2));
const displayBefore = spaceBefore < 0 ? t('Edit.textAuto') : spaceBeforeFix + ' ' + metricText;
const displayAfter = spaceAfter < 0 ? t('Edit.textAuto') : spaceAfterFix + ' ' + metricText;
const spaceBetween = paragraphObj.get_ContextualSpacing();
const breakBefore = paragraphObj.get_PageBreakBefore();
const orphanControl = paragraphObj.get_WidowControl();
const keepTogether = paragraphObj.get_KeepLines();
const keepWithNext = paragraphObj.get_KeepNext();
return(
<Page>
<Navbar title={t('Edit.textAdvanced')} backLink={t('Edit.textBack')} />

17
apps/documenteditor/mobile/src/view/edit/EditText.jsx
View file

@ -78,13 +78,20 @@ const PageAdditionalFormatting = props => {
const storeTextSettings = props.storeTextSettings;
const storeFocusObjects = props.storeFocusObjects;
const paragraph = storeFocusObjects.paragraphObject;
const isStrikeout = paragraph.get_Strikeout();
const isDStrikeout = paragraph.get_DStrikeout();
let isStrikeout, isDStrikeout, isSmallCaps, isAllCaps, letterSpacing;
if (paragraph) {
isStrikeout = paragraph.get_Strikeout();
isDStrikeout = paragraph.get_DStrikeout();
isSmallCaps = paragraph.get_SmallCaps();
isAllCaps = paragraph.get_AllCaps();
letterSpacing = Common.Utils.Metric.fnRecalcFromMM(paragraph.get_TextSpacing());
}
const isSuperscript = storeTextSettings.isSuperscript;
const isSubscript = storeTextSettings.isSubscript;
const isSmallCaps = paragraph.get_SmallCaps();
const isAllCaps = paragraph.get_AllCaps();
const letterSpacing = Common.Utils.Metric.fnRecalcFromMM(paragraph.get_TextSpacing());
if (!paragraph && Device.phone) {
$$('.sheet-modal.modal-in').length > 0 && f7.sheet.close();
return null;
}
return(
<Page>
<Navbar title={t('Edit.textAdditional')} backLink={t('Edit.textBack')} />

14
apps/presentationeditor/mobile/src/page/main.jsx
View file

@ -1,6 +1,7 @@
import React, { Component, Fragment } from 'react';
import { Page, View, Navbar, Subnavbar, Icon } from 'framework7-react';
import { f7, Page, View, Navbar, Subnavbar, Icon } from 'framework7-react';
import { observer, inject } from "mobx-react";
import { Device } from '../../../../common/mobile/utils/device';
import EditOptions from '../view/edit/Edit';
import AddOptions from '../view/add/Add';
@ -44,6 +45,10 @@ class MainPage extends Component {
else if ( opts == 'preview' )
return {previewVisible: true};
});
if ((opts === 'edit' || opts === 'coauth') && Device.phone) {
f7.navbar.hide('.main-navbar');
}
};
handleOptionsViewClosed = opts => {
@ -59,7 +64,10 @@ class MainPage extends Component {
return {collaborationVisible: false}
else if ( opts == 'preview' )
return {previewVisible: false};
})
});
if ((opts === 'edit' || opts === 'coauth') && Device.phone) {
f7.navbar.show('.main-navbar');
}
})();
};
@ -71,7 +79,7 @@ class MainPage extends Component {
return (
<Fragment>
{!this.state.previewVisible ? null : <Preview onclosed={this.handleOptionsViewClosed.bind(this, 'preview')} />}
<Page name="home" className={showLogo && 'page-with-logo'}>
<Page name="home" className={`editor${ showLogo ? ' page-with-logo' : ''}`}>
{/* Top Navbar */}
<Navbar id='editor-navbar' className={`main-navbar${showLogo ? ' navbar-with-logo' : ''}`}>
{showLogo && <div className="main-logo"><Icon icon="icon-logo"></Icon></div>}

10
apps/presentationeditor/mobile/src/store/appOptions.js
View file

@ -6,7 +6,10 @@ export class storeAppOptions {
isEdit: observable,
canViewComments: observable,
setConfigOptions: action,
setPermissionOptions: action
setPermissionOptions: action,
lostEditingRights: observable,
changeEditingRights: action
});
}
@ -14,6 +17,11 @@ export class storeAppOptions {
canViewComments = false;
config = {};
lostEditingRights = false;
changeEditingRights (value) {
this.lostEditingRights = value;
}
setConfigOptions (config) {
this.config = config;
this.user = Common.Utils.fillUserInfo(config.user, config.lang, "Local.User"/*me.textAnonymous*/);

12
apps/spreadsheeteditor/mobile/src/page/main.jsx
View file

@ -1,6 +1,7 @@
import React, { Component } from 'react';
import { Page, View, Navbar, Subnavbar, Icon } from 'framework7-react';
import { observer, inject } from "mobx-react";
import { Device } from '../../../../common/mobile/utils/device';
import Settings from '../view/settings/Settings';
import CollaborationView from '../../../../common/mobile/lib/view/collaboration/Collaboration.jsx'
@ -43,6 +44,10 @@ class MainPage extends Component {
else if ( opts == 'coauth' )
return {collaborationVisible: true};
});
if ((opts === 'edit' || opts === 'coauth') && Device.phone) {
f7.navbar.hide('.main-navbar');
}
};
handleOptionsViewClosed = opts => {
@ -56,7 +61,10 @@ class MainPage extends Component {
return {settingsVisible: false};
else if ( opts == 'coauth' )
return {collaborationVisible: false};
})
});
if ((opts === 'edit' || opts === 'coauth') && Device.phone) {
f7.navbar.show('.main-navbar');
}
})();
};
@ -65,7 +73,7 @@ class MainPage extends Component {
const config = appOptions.config;
const showLogo = !(appOptions.canBrandingExt && (config.customization && (config.customization.loaderName || config.customization.loaderLogo)));
return (
<Page name="home" className={showLogo && 'page-with-logo'}>
<Page name="home" className={`editor${ showLogo ? ' page-with-logo' : ''}`}>
{/* Top Navbar */}
<Navbar id='editor-navbar' className={`main-navbar${showLogo ? ' navbar-with-logo' : ''}`}>
{showLogo && <div className="main-logo"><Icon icon="icon-logo"></Icon></div>}

10
apps/spreadsheeteditor/mobile/src/store/appOptions.js
View file

@ -6,7 +6,10 @@ export class storeAppOptions {
isEdit: observable,
canViewComments: observable,
setConfigOptions: action,
setPermissionOptions: action
setPermissionOptions: action,
lostEditingRights: observable,
changeEditingRights: action
});
}
@ -14,6 +17,11 @@ export class storeAppOptions {
config = {};
canViewComments = false;
lostEditingRights = false;
changeEditingRights (value) {
this.lostEditingRights = value;
}
setConfigOptions (config, _t) {
this.config = config;
this.customization = config.customization;

44
apps/spreadsheeteditor/mobile/src/view/edit/EditCell.jsx
View file

@ -143,6 +143,12 @@ const PageFontsCell = props => {
});
};
const storeFocusObjects = props.storeFocusObjects;
if ((storeFocusObjects.focusOn !== 'cell') && Device.phone) {
$$('.sheet-modal.modal-in').length > 0 && f7.sheet.close();
return null;
}
return (
<Page>
<Navbar title={_t.textFonts} backLink={_t.textBack} />
@ -208,6 +214,12 @@ const PageTextColorCell = props => {
}
};
const storeFocusObjects = props.storeFocusObjects;
if ((storeFocusObjects.focusOn !== 'cell') && Device.phone) {
$$('.sheet-modal.modal-in').length > 0 && f7.sheet.close();
return null;
}
return (
<Page>
<Navbar title={_t.textTextColor} backLink={_t.textBack}>
@ -249,6 +261,12 @@ const PageFillColorCell = props => {
}
};
const storeFocusObjects = props.storeFocusObjects;
if ((storeFocusObjects.focusOn !== 'cell') && Device.phone) {
$$('.sheet-modal.modal-in').length > 0 && f7.sheet.close();
return null;
}
return (
<Page>
<Navbar title={_t.textFillColor} backLink={_t.textBack}>
@ -325,6 +343,12 @@ const PageTextFormatCell = props => {
const vAlignStr = storeCellSettings.vAlignStr;
const isWrapText = storeCellSettings.isWrapText;
const storeFocusObjects = props.storeFocusObjects;
if ((storeFocusObjects.focusOn !== 'cell') && Device.phone) {
$$('.sheet-modal.modal-in').length > 0 && f7.sheet.close();
return null;
}
return (
<Page>
<Navbar title={_t.textTextFormat} backLink={_t.textBack} />
@ -392,6 +416,12 @@ const PageTextOrientationCell = props => {
const storeCellSettings = props.storeCellSettings;
const orientationStr = storeCellSettings.orientationStr;
const storeFocusObjects = props.storeFocusObjects;
if ((storeFocusObjects.focusOn !== 'cell') && Device.phone) {
$$('.sheet-modal.modal-in').length > 0 && f7.sheet.close();
return null;
}
return (
<Page>
<Navbar title={_t.textTextOrientation} backLink={_t.textBack} />
@ -461,6 +491,12 @@ const PageBorderStyleCell = props => {
13: `${_t.textThick}`
};
const storeFocusObjects = props.storeFocusObjects;
if ((storeFocusObjects.focusOn !== 'cell') && Device.phone) {
$$('.sheet-modal.modal-in').length > 0 && f7.sheet.close();
return null;
}
return (
<Page>
<Navbar title={_t.textBorderStyle} backLink={_t.textBack} />
@ -826,10 +862,10 @@ const TextColorCell = inject("storeCellSettings", "storePalette", "storeFocusObj
const FillColorCell = inject("storeCellSettings", "storePalette", "storeFocusObjects")(observer(PageFillColorCell));
const CustomTextColorCell = inject("storeCellSettings", "storePalette", "storeFocusObjects")(observer(PageCustomTextColorCell));
const CustomFillColorCell = inject("storeCellSettings", "storePalette", "storeFocusObjects")(observer(PageCustomFillColorCell));
const FontsCell = inject("storeCellSettings")(observer(PageFontsCell));
const TextFormatCell = inject("storeCellSettings")(observer(PageTextFormatCell));
const TextOrientationCell = inject("storeCellSettings")(observer(PageTextOrientationCell));
const BorderStyleCell = inject("storeCellSettings")(observer(PageBorderStyleCell));
const FontsCell = inject("storeCellSettings", "storeFocusObjects")(observer(PageFontsCell));
const TextFormatCell = inject("storeCellSettings", "storeFocusObjects")(observer(PageTextFormatCell));
const TextOrientationCell = inject("storeCellSettings", "storeFocusObjects")(observer(PageTextOrientationCell));
const BorderStyleCell = inject("storeCellSettings", "storeFocusObjects")(observer(PageBorderStyleCell));
const BorderColorCell = inject("storeCellSettings", "storePalette")(observer(PageBorderColorCell));
const CustomBorderColorCell = inject("storeCellSettings", "storePalette")(observer(PageCustomBorderColorCell));
const BorderSizeCell = inject("storeCellSettings")(observer(PageBorderSizeCell));

89
apps/spreadsheeteditor/mobile/src/view/edit/EditChart.jsx
View file

@ -1,6 +1,6 @@
import React, {Fragment, useState, useEffect} from 'react';
import {observer, inject} from "mobx-react";
import {List, ListItem, ListButton, ListInput, Icon, Row, Page, Navbar, BlockTitle, Toggle, Range, Link, Tabs, Tab, NavTitle, NavRight} from 'framework7-react';
import {f7, List, ListItem, ListButton, ListInput, Icon, Row, Page, Navbar, BlockTitle, Toggle, Range, Link, Tabs, Tab, NavTitle, NavRight} 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";
@ -130,33 +130,42 @@ const PageStyle = props => {
const { t } = useTranslation();
const _t = t('View.Edit', {returnObjects: true});
const storeChartSettings = props.storeChartSettings;
const chartProperties = props.storeFocusObjects.chartObject.get_ChartProperties();
const shapeProperties = props.storeFocusObjects.shapeObject.get_ShapeProperties();
const storeFocusObjects = props.storeFocusObjects;
const chartProperties = storeFocusObjects.chartObject && storeFocusObjects.chartObject.get_ChartProperties();
const shapeProperties = storeFocusObjects.shapeObject && storeFocusObjects.shapeObject.get_ShapeProperties();
const styles = storeChartSettings.styles;
const types = storeChartSettings.types;
const curType = chartProperties.getType();
const curType = chartProperties && chartProperties.getType();
// Init border size
const shapeStroke = shapeProperties.get_stroke();
let borderSize, borderType;
if (shapeProperties) {
const shapeStroke = shapeProperties.get_stroke();
borderSize = shapeStroke.get_width() * 72.0 / 25.4;
borderType = shapeStroke.get_type();
}
const borderSizeTransform = storeChartSettings.borderSizeTransform();
const borderSize = shapeStroke.get_width() * 72.0 / 25.4;
const borderType = shapeStroke.get_type();
const displayBorderSize = (borderType == Asc.c_oAscStrokeType.STROKE_NONE) ? 0 : borderSizeTransform.indexSizeByValue(borderSize);
const displayTextBorderSize = (borderType == Asc.c_oAscStrokeType.STROKE_NONE) ? 0 : borderSizeTransform.sizeByValue(borderSize);
const displayBorderSize = (borderType == Asc.c_oAscStrokeType.STROKE_NONE || borderType === undefined) ? 0 : borderSizeTransform.indexSizeByValue(borderSize);
const displayTextBorderSize = (borderType == Asc.c_oAscStrokeType.STROKE_NONE || borderType === undefined) ? 0 : borderSizeTransform.sizeByValue(borderSize);
const [stateBorderSize, setBorderSize] = useState(displayBorderSize);
const [stateTextBorderSize, setTextBorderSize] = useState(displayTextBorderSize);
// Init border color
if(!storeChartSettings.borderColor) {
if(!storeChartSettings.borderColor && shapeProperties) {
storeChartSettings.initBorderColor(shapeProperties);
}
const borderColor = storeChartSettings.borderColor;
const displayBorderColor = borderColor == 'transparent' ? borderColor : `#${(typeof borderColor === "object" ? borderColor.color : borderColor)}`;
if ((!chartProperties || storeFocusObjects.focusOn === 'cell') && Device.phone) {
$$('.sheet-modal.modal-in').length > 0 && f7.sheet.close();
return null;
}
return (
<Page>
<Navbar backLink={_t.textBack}>
@ -242,7 +251,10 @@ const PageStyle = props => {
const PageReorder = props => {
const { t } = useTranslation();
const _t = t('View.Edit', {returnObjects: true});
if ((!props.storeFocusObjects.chartObject || props.storeFocusObjects.focusOn === 'cell') && Device.phone) {
$$('.sheet-modal.modal-in').length > 0 && f7.sheet.close();
return null;
}
return (
<Page>
<Navbar title={_t.textReorder} backLink={_t.textBack} />
@ -269,16 +281,27 @@ const PageLayout = props => {
const _t = t('View.Edit', {returnObjects: true});
const storeFocusObjects = props.storeFocusObjects;
const chartObject = storeFocusObjects.chartObject;
const chartProperties = chartObject.get_ChartProperties();
const chartType = chartProperties.getType();
const chartProperties = chartObject && chartObject.get_ChartProperties();
const chartType = chartProperties && chartProperties.getType();
const [chartTitle, setTitle] = useState(chartProperties.getTitle());
const [chartLegend, setLegend] = useState(chartProperties.getLegendPos());
const [chartAxisHorTitle, setAxisHorTitle] = useState(chartProperties.getHorAxisLabel());
const [chartAxisVertTitle, setAxisVertTitle] = useState(chartProperties.getVertAxisLabel());
const [chartHorGridlines, setHorGridlines] = useState(chartProperties.getHorGridLines());
const [chartVertGridlines, setVertGridlines] = useState(chartProperties.getVertGridLines());
const [chartDataLabel, setDataLabel] = useState(chartProperties.getDataLabelsPos());
let title, legend, axisHorTitle, axisVertTitle, horGridlines, vertGridlines, dataLabel;
if (chartProperties) {
title = chartProperties.getTitle();
legend = chartProperties.getLegendPos();
axisHorTitle = chartProperties.getHorAxisLabel();
axisVertTitle = chartProperties.getVertAxisLabel();
horGridlines = chartProperties.getHorGridLines();
vertGridlines = chartProperties.getVertGridLines();
dataLabel = chartProperties.getDataLabelsPos();
}
const [chartTitle, setTitle] = useState(title);
const [chartLegend, setLegend] = useState(legend);
const [chartAxisHorTitle, setAxisHorTitle] = useState(axisHorTitle);
const [chartAxisVertTitle, setAxisVertTitle] = useState(axisVertTitle);
const [chartHorGridlines, setHorGridlines] = useState(horGridlines);
const [chartVertGridlines, setVertGridlines] = useState(vertGridlines);
const [chartDataLabel, setDataLabel] = useState(dataLabel);
let dataLabelPos = [
{ value: Asc.c_oAscChartDataLabelsPos.none, displayValue: _t.textNone },
@ -369,6 +392,11 @@ const PageLayout = props => {
7: `${_t.textOuterTop}`
};
if ((!chartObject || storeFocusObjects.focusOn === 'cell') && Device.phone) {
$$('.sheet-modal.modal-in').length > 0 && f7.sheet.close();
return null;
}
return (
<Page>
<Navbar title={_t.textLayout} backLink={_t.textBack} />
@ -620,7 +648,7 @@ const PageVerticalAxis = props => {
const { t } = useTranslation();
const _t = t('View.Edit', {returnObjects: true});
const api = Common.EditorApi.get();
const chartProperty = api.asc_getChartObject();
const chartProperty = api.asc_getChartObject(true);
const isIos = Device.ios;
const verAxisProps = chartProperty.getVertAxisProps();
const axisProps = (verAxisProps.getAxisType() == Asc.c_oAscAxisType.val) ? verAxisProps : chartProperty.getHorAxisProps();
@ -684,6 +712,11 @@ const PageVerticalAxis = props => {
const currentCrossesValue = axisProps.getCrosses();
const [crossesValue, setCrossesValue] = useState(!currentCrossesValue ? '' : currentCrossesValue);
if ((!props.storeFocusObjects.chartObject || props.storeFocusObjects.focusOn === 'cell') && Device.phone) {
$$('.sheet-modal.modal-in').length > 0 && f7.sheet.close();
return null;
}
return (
<Page>
<Navbar title={_t.textAxisOptions} backLink={_t.textBack} />
@ -917,7 +950,7 @@ const PageHorizontalAxis = props => {
const _t = t('View.Edit', {returnObjects: true});
const api = Common.EditorApi.get();
const isIos = Device.ios;
const chartProperty = api.asc_getChartObject();
const chartProperty = api.asc_getChartObject(true);
const horAxisProps = chartProperty.getHorAxisProps();
const axisProps = (horAxisProps.getAxisType() == Asc.c_oAscAxisType.val) ? chartProperty.getVertAxisProps() : horAxisProps;
const crossValue = axisProps.getCrossesRule();
@ -970,6 +1003,11 @@ const PageHorizontalAxis = props => {
const currentCrossesValue = axisProps.getCrosses();
const [crossesValue, setCrossesValue] = useState(!currentCrossesValue ? '' : currentCrossesValue);
if ((!props.storeFocusObjects.chartObject || props.storeFocusObjects.focusOn === 'cell') && Device.phone) {
$$('.sheet-modal.modal-in').length > 0 && f7.sheet.close();
return null;
}
return (
<Page>
<Navbar title={_t.textAxisOptions} backLink={_t.textBack} />
@ -1181,8 +1219,8 @@ const EditChart = props => {
const { t } = useTranslation();
const _t = t('View.Edit', {returnObjects: true});
const storeFocusObjects = props.storeFocusObjects;
const chartProperties = storeFocusObjects.chartObject.get_ChartProperties();
const chartType = chartProperties.getType();
const chartProperties = storeFocusObjects.chartObject && storeFocusObjects.chartObject.get_ChartProperties();
const chartType = chartProperties && chartProperties.getType();
const disableSetting = (
chartType == Asc.c_oAscChartTypeSettings.pie ||
@ -1244,6 +1282,7 @@ const PageChartCustomBorderColor = inject("storeChartSettings", "storePalette")(
const PageChartLayout = inject("storeFocusObjects")(observer(PageLayout));
const PageChartVerticalAxis = inject("storeFocusObjects")(observer(PageVerticalAxis));
const PageChartHorizontalAxis = inject("storeFocusObjects")(observer(PageHorizontalAxis));
const PageChartReorder = inject("storeFocusObjects")(observer(PageReorder));
export {
PageEditChart as EditChart,
@ -1251,7 +1290,7 @@ export {
PageChartCustomFillColor,
PageChartBorderColor,
PageChartCustomBorderColor,
PageReorder as PageChartReorder,
PageChartReorder,
PageChartLayout,
PageLegend,
PageChartTitle,

12
apps/spreadsheeteditor/mobile/src/view/edit/EditImage.jsx
View file

@ -32,6 +32,12 @@ const PageReorder = props => {
const { t } = useTranslation();
const _t = t('View.Edit', {returnObjects: true});
const storeFocusObjects = props.storeFocusObjects;
if ((!storeFocusObjects.imageObject || storeFocusObjects.focusOn === 'cell') && Device.phone) {
$$('.sheet-modal.modal-in').length > 0 && f7.sheet.close();
return null;
}
return (
<Page>
<Navbar title={_t.textReorder} backLink={_t.textBack} />
@ -58,6 +64,12 @@ const PageReplace = props => {
const { t } = useTranslation();
const _t = t('View.Edit', {returnObjects: true});
const storeFocusObjects = props.storeFocusObjects;
if ((!storeFocusObjects.imageObject || storeFocusObjects.focusOn === 'cell') && Device.phone) {
$$('.sheet-modal.modal-in').length > 0 && f7.sheet.close();
return null;
}
return (
<Page className="images">
<Navbar title={_t.textReplace} backLink={_t.textBack} />

25
apps/spreadsheeteditor/mobile/src/view/edit/EditLink.jsx
View file

@ -1,14 +1,20 @@
import React, {useState, useEffect, Fragment} from 'react';
import {observer, inject} from "mobx-react";
import {List, ListItem, Page, Navbar, Icon, ListButton, ListInput, Segmented, Button} from 'framework7-react';
import {f7, List, ListItem, Page, Navbar, Icon, ListButton, ListInput, Segmented, Button} from 'framework7-react';
import { useTranslation } from 'react-i18next';
import {Device} from "../../../../../common/mobile/utils/device";
const PageTypeLink = ({curType, changeType}) => {
const PageTypeLink = ({curType, changeType, storeFocusObjects}) => {
const { t } = useTranslation();
const _t = t('View.Edit', {returnObjects: true});
const [typeLink, setTypeLink] = useState(curType);
const settings = !storeFocusObjects.focusOn ? [] : (storeFocusObjects.focusOn === 'obj' ? storeFocusObjects.objects : storeFocusObjects.selections);
if (storeFocusObjects.focusOn === 'obj' || settings.indexOf('hyperlink') === -1) {
$$('.sheet-modal.modal-in').length > 0 && f7.sheet.close();
return null;
}
return (
<Page>
<Navbar title={_t.textLinkType} backLink={_t.textBack}/>
@ -20,11 +26,17 @@ const PageTypeLink = ({curType, changeType}) => {
)
};
const PageSheet = ({curSheet, sheets, changeSheet}) => {
const PageSheet = ({curSheet, sheets, changeSheet, storeFocusObjects}) => {
const { t } = useTranslation();
const _t = t('View.Edit', {returnObjects: true});
const [stateSheet, setSheet] = useState(curSheet.value);
const settings = !storeFocusObjects.focusOn ? [] : (storeFocusObjects.focusOn === 'obj' ? storeFocusObjects.objects : storeFocusObjects.selections);
if (storeFocusObjects.focusOn === 'obj' || settings.indexOf('hyperlink') === -1) {
$$('.sheet-modal.modal-in').length > 0 && f7.sheet.close();
return null;
}
return (
<Page>
<Navbar title={_t.textSheet} backLink={_t.textBack}/>
@ -146,8 +158,11 @@ const EditLink = props => {
)
};
const _PageTypeLink = inject("storeFocusObjects")(observer(PageTypeLink));
const _PageSheet = inject("storeFocusObjects")(observer(PageSheet));
export {
EditLink,
PageTypeLink,
PageSheet
_PageTypeLink as PageTypeLink,
_PageSheet as PageSheet
};

24
apps/spreadsheeteditor/mobile/src/view/edit/EditShape.jsx
View file

@ -9,10 +9,8 @@ const EditShape = props => {
const { t } = useTranslation();
const _t = t('View.Edit', {returnObjects: true});
const storeFocusObjects = props.storeFocusObjects;
// const selections = storeFocusObjects.selections;
// console.log(selections);
const shapeObject = storeFocusObjects.shapeObject;
const canFill = shapeObject.get_ShapeProperties().asc_getCanFill();
const canFill = shapeObject && shapeObject.get_ShapeProperties().asc_getCanFill();
return (
<Fragment>
@ -84,7 +82,8 @@ const PageStyle = props => {
const { t } = useTranslation();
const _t = t('View.Edit', {returnObjects: true});
const storeShapeSettings = props.storeShapeSettings;
const shapeObject = props.storeFocusObjects.shapeObject.get_ShapeProperties();
const storeFocusObjects = props.storeFocusObjects;
const shapeObject = storeFocusObjects.shapeObject.get_ShapeProperties();
const stroke = shapeObject.get_stroke();
// Init border size
@ -108,6 +107,11 @@ const PageStyle = props => {
const opacity = transparent !== null && transparent !== undefined ? transparent / 2.55 : 100;
const [stateOpacity, setOpacity] = useState(Math.round(opacity));
if ((!shapeObject || storeFocusObjects.chartObject || storeFocusObjects.focusOn === 'cell') && Device.phone) {
$$('.sheet-modal.modal-in').length > 0 && f7.sheet.close();
return null;
}
return (
<Page>
<Navbar backLink={_t.textBack}>
@ -248,6 +252,12 @@ const PageReplace = props => {
let shapes = storeShapeSettings.getStyleGroups();
shapes.splice(0, 1); // Remove line shapes
const storeFocusObjects = props.storeFocusObjects;
if ((!storeFocusObjects.shapeObject || storeFocusObjects.chartObject || storeFocusObjects.focusOn === 'cell') && Device.phone) {
$$('.sheet-modal.modal-in').length > 0 && f7.sheet.close();
return null;
}
return (
<Page className="shapes dataview">
<Navbar title={_t.textReplace} backLink={_t.textBack} />
@ -274,6 +284,12 @@ const PageReorder = props => {
const { t } = useTranslation();
const _t = t('View.Edit', {returnObjects: true});
const storeFocusObjects = props.storeFocusObjects;
if ((!storeFocusObjects.shapeObject || storeFocusObjects.chartObject || storeFocusObjects.focusOn === 'cell') && Device.phone) {
$$('.sheet-modal.modal-in').length > 0 && f7.sheet.close();
return null;
}
return (
<Page>
<Navbar title={_t.textReorder} backLink={_t.textBack} />