[SSE mobile] Bug 50044

This commit is contained in:
JuliaSvinareva 2021-04-29 19:25:40 +03:00
parent 5e3730d416
commit 705a4f08ae
3 changed files with 96 additions and 29 deletions

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
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,

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} />

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} />