From e83908807920cc4666879eb2c4a209b936b21c4a Mon Sep 17 00:00:00 2001 From: ShimaginAndrey Date: Wed, 15 Sep 2021 15:21:49 +0300 Subject: [PATCH] [DE PE SSE] Fix Bug 52260 --- apps/documenteditor/mobile/locale/en.json | 1 + apps/documenteditor/mobile/locale/ru.json | 1 + .../mobile/src/view/edit/Edit.jsx | 20 +- .../mobile/src/view/edit/EditChart.jsx | 238 ++++++++++------- apps/presentationeditor/mobile/locale/en.json | 1 + apps/presentationeditor/mobile/locale/ru.json | 1 + .../mobile/src/view/edit/Edit.jsx | 20 +- .../mobile/src/view/edit/EditChart.jsx | 239 ++++++++++------- .../mobile/src/view/edit/Edit.jsx | 20 +- .../mobile/src/view/edit/EditChart.jsx | 240 +++++++++++------- 10 files changed, 502 insertions(+), 279 deletions(-) diff --git a/apps/documenteditor/mobile/locale/en.json b/apps/documenteditor/mobile/locale/en.json index 626c53d84..1d3a67747 100644 --- a/apps/documenteditor/mobile/locale/en.json +++ b/apps/documenteditor/mobile/locale/en.json @@ -230,6 +230,7 @@ "textEditLink": "Edit Link", "textEffects": "Effects", "textEmptyImgUrl": "You need to specify image URL.", + "textDesign": "Design", "textFill": "Fill", "textFirstColumn": "First Column", "textFirstLine": "FirstLine", diff --git a/apps/documenteditor/mobile/locale/ru.json b/apps/documenteditor/mobile/locale/ru.json index 617af97a1..9ae740788 100644 --- a/apps/documenteditor/mobile/locale/ru.json +++ b/apps/documenteditor/mobile/locale/ru.json @@ -213,6 +213,7 @@ "textBefore": "Перед", "textBehind": "За текстом", "textBorder": "Граница", + "textDesign": "Вид", "textBringToForeground": "Перенести на передний план", "textBullets": "Маркеры", "textBulletsAndNumbers": "Маркеры и нумерация", diff --git a/apps/documenteditor/mobile/src/view/edit/Edit.jsx b/apps/documenteditor/mobile/src/view/edit/Edit.jsx index 7554124c2..de502b81f 100644 --- a/apps/documenteditor/mobile/src/view/edit/Edit.jsx +++ b/apps/documenteditor/mobile/src/view/edit/Edit.jsx @@ -19,7 +19,7 @@ import {ParagraphAdvSettings, PageParagraphBackColor, PageParagraphCustomColor} import {PageShapeStyleNoFill, PageShapeStyle, PageShapeCustomFillColor, PageShapeBorderColor, PageShapeCustomBorderColor, PageWrap, PageReorder, PageReplace} from "./EditShape"; import {PageImageReorder, PageImageReplace, PageImageWrap, PageLinkSettings} from "./EditImage"; import {PageTableOptions, PageTableWrap, PageTableStyle, PageTableStyleOptions, PageTableCustomFillColor, PageTableBorderColor, PageTableCustomBorderColor} from "./EditTable"; -import {PageChartStyle, PageChartCustomFillColor, PageChartBorderColor, PageChartCustomBorderColor, PageChartWrap, PageChartReorder} from "./EditChart"; +import {PageChartDesign, PageChartDesignType, PageChartDesignStyle, PageChartDesignFill, PageChartDesignBorder, PageChartCustomFillColor, PageChartBorderColor, PageChartCustomBorderColor, PageChartWrap, PageChartReorder} from "./EditChart"; const routes = [ //Edit text @@ -156,9 +156,25 @@ const routes = [ path: '/edit-chart-reorder/', component: PageChartReorder, }, + { + path: '/edit-chart-design/', + component: PageChartDesign, + }, + { + path: '/edit-chart-type/', + component: PageChartDesignType + }, { path: '/edit-chart-style/', - component: PageChartStyle, + component: PageChartDesignStyle + }, + { + path: '/edit-chart-fill/', + component: PageChartDesignFill + }, + { + path: '/edit-chart-border/', + component: PageChartDesignBorder }, { path: '/edit-chart-custom-fill-color/', diff --git a/apps/documenteditor/mobile/src/view/edit/EditChart.jsx b/apps/documenteditor/mobile/src/view/edit/EditChart.jsx index 6d0981d07..61effc4ee 100644 --- a/apps/documenteditor/mobile/src/view/edit/EditChart.jsx +++ b/apps/documenteditor/mobile/src/view/edit/EditChart.jsx @@ -139,21 +139,100 @@ const PageBorderColor = props => { ) }; -const PageStyle = props => { +const PageChartType = props => { const { t } = useTranslation(); const _t = t('Edit', {returnObjects: true}); const storeChartSettings = props.storeChartSettings; - const chartProperties = props.storeFocusObjects.chartObject ? props.storeFocusObjects.chartObject.get_ChartProperties() : null; const types = storeChartSettings.types; - const curType = chartProperties ? chartProperties.getType() : null; - const chartStyles = storeChartSettings.chartStyles; - const isAndroid = Device.android; - // console.log(chartStyles, curType); - // console.log(Asc.c_oAscChartTypeSettings.comboBarLine, Asc.c_oAscChartTypeSettings.comboBarLineSecondary, Asc.c_oAscChartTypeSettings.comboAreaBar, Asc.c_oAscChartTypeSettings.comboCustom); + const storeFocusObjects = props.storeFocusObjects; + const chartProperties = storeFocusObjects.chartObject && storeFocusObjects.chartObject.get_ChartProperties(); + const curType = chartProperties && chartProperties.getType(); + return ( + + + +
+
+ {types.map((row, rowIndex) => { + return ( +
    + {row.map((type, index)=>{ + return( +
  • {props.onType(type.type)}}> +
    +
    +
    • + ) + })} +
+ ) + })} +
+
+ + ) +} + +const PageChartStyle = props => { + const { t } = useTranslation(); + const _t = t('Edit', {returnObjects: true}); + const storeChartSettings = props.storeChartSettings; const styles = storeChartSettings.styles; + const chartStyles = storeChartSettings.chartStyles; + return ( + + + + {chartStyles ? +
+
+
    + {styles ? styles.map((row, rowIndex) => { + return ( + row.map((style, index)=>{ + return( +
  • {props.onStyle(style.asc_getName())}}> + +
    • + ) + }) + ) + }) :
    {_t.textNoStyles}
    + } +
+
+
+ : null} + + ) +} + +const PageChartDesignFill = props => { + const { t } = useTranslation(); + const _t = t('Edit', {returnObjects: true}); + + return ( + + +
+ +
+ + ) +} + +const PageChartBorder = props => { + const { t } = useTranslation(); + const _t = t('Edit', {returnObjects: true}); + const storeChartSettings = props.storeChartSettings; const shapeObject = props.storeFocusObjects.shapeObject; + let borderSize, borderType, borderColor; if (shapeObject) { const shapeStroke = shapeObject.get_ShapeProperties().get_stroke(); @@ -171,6 +250,46 @@ const PageStyle = props => { // Init border color const displayBorderColor = borderColor !== 'transparent' ? `#${(typeof borderColor === "object" ? borderColor.color : borderColor)}` : borderColor; + + return ( + + + +
+ + +
{_t.textSize}
+
+ {setBorderSize(value); setTextBorderSize(borderSizeTransform.sizeByIndex(value));}} + onRangeChanged={(value) => {props.onBorderSize(borderSizeTransform.sizeByIndex(value))}} + > +
+
+ {stateTextBorderSize + ' ' + Common.Utils.Metric.getMetricName(Common.Utils.Metric.c_MetricUnits.pt)} +
+ + + + + +
+ + ) +} + +const PageDesign = props => { + const { t } = useTranslation(); + const _t = t('Edit', {returnObjects: true}); + const chartProperties = props.storeFocusObjects.chartObject ? props.storeFocusObjects.chartObject.get_ChartProperties() : null; + + // console.log(chartStyles, curType); + // console.log(Asc.c_oAscChartTypeSettings.comboBarLine, Asc.c_oAscChartTypeSettings.comboBarLineSecondary, Asc.c_oAscChartTypeSettings.comboAreaBar, Asc.c_oAscChartTypeSettings.comboCustom); if (!chartProperties && Device.phone) { $$('.sheet-modal.modal-in').length > 0 && f7.sheet.close(); @@ -179,14 +298,7 @@ const PageStyle = props => { return ( - -
- {_t.textType} - {chartStyles ? {_t.textStyle} : null} - {_t.textFill} - {_t.textBorder} - {isAndroid && } -
+ {Device.phone && @@ -195,78 +307,17 @@ const PageStyle = props => { } - - -
- {types.map((row, rowIndex) => { - return ( -
    - {row.map((type, index)=>{ - return( -
  • {props.onType(type.type)}}> -
    -
    -
    • - ) - })} -
- ) - })} -
- - {chartStyles ? - -
- {styles ? styles.map((row, rowIndex) => { - return ( -
    - {row.map((style, index)=>{ - return( -
  • {props.onStyle(style.asc_getName())}}> - -
    • - ) - })} -
- ) - }) : -
{_t.textNoStyles}
- } -
- - : null} - - - - - - -
{_t.textSize}
-
- {setBorderSize(value); setTextBorderSize(borderSizeTransform.sizeByIndex(value));}} - onRangeChanged={(value) => {props.onBorderSize(borderSizeTransform.sizeByIndex(value))}} - > -
-
- {stateTextBorderSize + ' ' + Common.Utils.Metric.getMetricName(Common.Utils.Metric.c_MetricUnits.pt)} -
- - - - - - - + + + + + + + + ) }; @@ -430,7 +481,7 @@ const EditChart = props => { return ( - { ) }; -const PageChartStyle = inject("storeChartSettings", "storeFocusObjects")(observer(PageStyle)); +const PageChartDesign = inject("storeChartSettings", "storeFocusObjects")(observer(PageDesign)); +const PageChartDesignType = inject("storeChartSettings", "storeFocusObjects")(observer(PageChartType)); +const PageChartDesignStyle = inject("storeChartSettings")(observer(PageChartStyle)); +const PageChartDesignBorder = inject("storeChartSettings", "storeFocusObjects")(observer(PageChartBorder)); const PageChartWrap = inject("storeChartSettings", "storeFocusObjects")(observer(PageWrap)); const PageChartReorder = inject("storeFocusObjects")(observer(PageReorder)); const PageChartCustomFillColor = inject("storeChartSettings", "storePalette")(observer(PageCustomFillColor)); @@ -463,7 +517,11 @@ const PageChartBorderColor = inject("storeChartSettings", "storePalette")(observ const PageChartCustomBorderColor = inject("storeChartSettings", "storePalette")(observer(PageCustomBorderColor)); export {EditChart, - PageChartStyle, + PageChartDesign, + PageChartDesignType, + PageChartDesignStyle, + PageChartDesignFill, + PageChartDesignBorder, PageChartCustomFillColor, PageChartBorderColor, PageChartCustomBorderColor, diff --git a/apps/presentationeditor/mobile/locale/en.json b/apps/presentationeditor/mobile/locale/en.json index eb61a4bb9..89e9d041b 100644 --- a/apps/presentationeditor/mobile/locale/en.json +++ b/apps/presentationeditor/mobile/locale/en.json @@ -286,6 +286,7 @@ "textDoubleStrikethrough": "Double Strikethrough", "textDuplicateSlide": "Duplicate Slide", "textDuration": "Duration", + "textDesign": "Design", "textEditLink": "Edit Link", "textEffect": "Effect", "textEffects": "Effects", diff --git a/apps/presentationeditor/mobile/locale/ru.json b/apps/presentationeditor/mobile/locale/ru.json index 7a3a65a2d..18c95443c 100644 --- a/apps/presentationeditor/mobile/locale/ru.json +++ b/apps/presentationeditor/mobile/locale/ru.json @@ -369,6 +369,7 @@ "textText": "Текст", "textTheme": "Тема", "textTop": "Сверху", + "textDesign": "Вид", "textTopLeft": "Сверху слева", "textTopRight": "Сверху справа", "textTotalRow": "Строка итогов", diff --git a/apps/presentationeditor/mobile/src/view/edit/Edit.jsx b/apps/presentationeditor/mobile/src/view/edit/Edit.jsx index 6bf147ace..e6cbde1b1 100644 --- a/apps/presentationeditor/mobile/src/view/edit/Edit.jsx +++ b/apps/presentationeditor/mobile/src/view/edit/Edit.jsx @@ -18,7 +18,7 @@ import { PageTextFonts, PageTextFontColor, PageTextCustomFontColor, PageTextAddF import { PageShapeStyle, PageShapeStyleNoFill, PageReplaceContainer, PageReorderContainer, PageAlignContainer, PageShapeBorderColor, PageShapeCustomBorderColor, PageShapeCustomFillColor } from './EditShape'; import { PageImageReplace, PageImageReorder, PageImageAlign, PageLinkSettings } from './EditImage'; import { PageTableStyle, PageTableStyleOptions, PageTableCustomFillColor, PageTableBorderColor, PageTableCustomBorderColor, PageTableReorder, PageTableAlign } from './EditTable'; -import { PageChartStyle, PageChartCustomFillColor, PageChartBorderColor, PageChartCustomBorderColor, PageChartReorder, PageChartAlign } from './EditChart' +import { PageChartDesign, PageChartDesignType, PageChartDesignStyle, PageChartDesignFill, PageChartDesignBorder, PageChartCustomFillColor, PageChartBorderColor, PageChartCustomBorderColor, PageChartReorder, PageChartAlign } from './EditChart' import { PageLinkTo, PageTypeLink } from './EditLink' const routes = [ @@ -168,9 +168,25 @@ const routes = [ // Chart + { + path: '/edit-chart-design/', + component: PageChartDesign, + }, + { + path: '/edit-chart-type/', + component: PageChartDesignType + }, { path: '/edit-chart-style/', - component: PageChartStyle + component: PageChartDesignStyle + }, + { + path: '/edit-chart-fill/', + component: PageChartDesignFill + }, + { + path: '/edit-chart-border/', + component: PageChartDesignBorder }, { path: '/edit-chart-reorder/', diff --git a/apps/presentationeditor/mobile/src/view/edit/EditChart.jsx b/apps/presentationeditor/mobile/src/view/edit/EditChart.jsx index a9929cc34..f57ffe08f 100644 --- a/apps/presentationeditor/mobile/src/view/edit/EditChart.jsx +++ b/apps/presentationeditor/mobile/src/view/edit/EditChart.jsx @@ -149,21 +149,102 @@ const PageBorderColor = props => { ) }; -const PageStyle = props => { +const PageChartType = props => { const { t } = useTranslation(); const _t = t('View.Edit', {returnObjects: true}); const storeChartSettings = props.storeChartSettings; - const chartProperties = props.storeFocusObjects.chartObject ? props.storeFocusObjects.chartObject.get_ChartProperties() : null; const types = storeChartSettings.types; - const curType = chartProperties ? chartProperties.getType() : null; + const storeFocusObjects = props.storeFocusObjects; + const chartProperties = storeFocusObjects.chartObject && storeFocusObjects.chartObject.get_ChartProperties(); + const curType = chartProperties && chartProperties.getType(); + + return ( + + + +
+
+ {types.map((row, rowIndex) => { + return ( +
    + {row.map((type, index)=>{ + return( +
  • {props.onType(type.type)}}> +
    +
    +
    • + ) + })} +
+ ) + })} +
+
+ + ) +} + +const PageChartStyle = props => { + const { t } = useTranslation(); + const _t = t('View.Edit', {returnObjects: true}); + const storeChartSettings = props.storeChartSettings; const styles = storeChartSettings.styles; - const shapeObject = props.storeFocusObjects.shapeObject; const chartStyles = storeChartSettings.chartStyles; - const isAndroid = Device.android; + + return ( + + + + {chartStyles ? +
+
+
    + {styles ? styles.map((row, rowIndex) => { + return ( + row.map((style, index)=>{ + return( +
  • {props.onStyle(style.asc_getName())}}> + +
    • + ) + }) + ) + }) :
    {_t.textNoStyles}
    + } +
+
+
+ : null} + + ) +} + +const PageChartDesignFill = props => { + const { t } = useTranslation(); + const _t = t('View.Edit', {returnObjects: true}); + + return ( + + +
+ +
+ + ) +} + +const PageChartBorder = props => { + const { t } = useTranslation(); + const _t = t('View.Edit', {returnObjects: true}); + const storeChartSettings = props.storeChartSettings; + const shapeObject = props.storeFocusObjects.shapeObject; let borderSize, borderType, borderColor; - - if(shapeObject) { + if (shapeObject) { const shapeStroke = shapeObject.get_stroke(); borderSize = shapeStroke.get_width() * 72.0 / 25.4; borderType = shapeStroke.get_type(); @@ -171,7 +252,6 @@ const PageStyle = props => { } // Init border size - const borderSizeTransform = storeChartSettings.borderSizeTransform(); 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); @@ -179,8 +259,44 @@ const PageStyle = props => { const [stateTextBorderSize, setTextBorderSize] = useState(displayTextBorderSize); // Init border color - const displayBorderColor = borderColor !== 'transparent' ? `#${(typeof borderColor === "object" ? borderColor.color : borderColor)}` : borderColor; + + return ( + + + +
+ + +
{_t.textSize}
+
+ {setBorderSize(value); setTextBorderSize(borderSizeTransform.sizeByIndex(value));}} + onRangeChanged={(value) => {props.onBorderSize(borderSizeTransform.sizeByIndex(value))}} + > +
+
+ {stateTextBorderSize + ' ' + Common.Utils.Metric.getMetricName(Common.Utils.Metric.c_MetricUnits.pt)} +
+ + + + + +
+ + ) +} + +const PageDesign = props => { + const { t } = useTranslation(); + const _t = t('View.Edit', {returnObjects: true}); + const chartProperties = props.storeFocusObjects.chartObject ? props.storeFocusObjects.chartObject.get_ChartProperties() : null; if (!chartProperties && Device.phone) { $$('.sheet-modal.modal-in').length > 0 && f7.sheet.close(); @@ -189,14 +305,7 @@ const PageStyle = props => { return ( - -
- {_t.textType} - {chartStyles ? {_t.textStyle} : null} - {_t.textFill} - {_t.textBorder} - {isAndroid && } -
+ {Device.phone && @@ -205,78 +314,17 @@ const PageStyle = props => { } - - -
- {types.map((row, rowIndex) => { - return ( -
    - {row.map((type, index)=>{ - return( -
  • {props.onType(type.type)}}> -
    -
    -
    • - ) - })} -
- ) - })} -
- - {chartStyles ? - -
- {styles ? styles.map((row, rowIndex) => { - return ( -
    - {row.map((style, index)=>{ - return( -
  • {props.onStyle(style.asc_getName())}}> - -
    • - ) - })} -
- ) - }) : -
{_t.textNoStyles}
- } -
- - : null} - - - - - - -
{_t.textSize}
-
- {setBorderSize(value); setTextBorderSize(borderSizeTransform.sizeByIndex(value));}} - onRangeChanged={(value) => {props.onBorderSize(borderSizeTransform.sizeByIndex(value))}} - > -
-
- {stateTextBorderSize + ' ' + Common.Utils.Metric.getMetricName(Common.Utils.Metric.c_MetricUnits.pt)} -
- - - - - - - + + + + + + + + ) }; @@ -380,7 +428,7 @@ const EditChart = props => { return ( - { ) }; -const PageChartStyle = inject("storeChartSettings", "storeFocusObjects")(observer(PageStyle)); +const PageChartDesign = inject("storeChartSettings", "storeFocusObjects")(observer(PageDesign)); +const PageChartDesignType = inject("storeChartSettings", "storeFocusObjects")(observer(PageChartType)); +const PageChartDesignStyle = inject("storeChartSettings")(observer(PageChartStyle)); +const PageChartDesignBorder = inject("storeChartSettings", "storeFocusObjects")(observer(PageChartBorder)); const PageChartCustomFillColor = inject("storeChartSettings", "storePalette")(observer(PageCustomFillColor)); const PageChartBorderColor = inject("storeChartSettings", "storePalette")(observer(PageBorderColor)); const PageChartCustomBorderColor = inject("storeChartSettings", "storePalette")(observer(PageCustomBorderColor)); @@ -410,7 +461,11 @@ const PageChartAlign = inject("storeFocusObjects")(observer(PageAlign)); export { EditChart, - PageChartStyle, + PageChartDesign, + PageChartDesignType, + PageChartDesignStyle, + PageChartDesignFill, + PageChartDesignBorder, PageChartCustomFillColor, PageChartBorderColor, PageChartCustomBorderColor, diff --git a/apps/spreadsheeteditor/mobile/src/view/edit/Edit.jsx b/apps/spreadsheeteditor/mobile/src/view/edit/Edit.jsx index 3b126b9c2..96c1c10be 100644 --- a/apps/spreadsheeteditor/mobile/src/view/edit/Edit.jsx +++ b/apps/spreadsheeteditor/mobile/src/view/edit/Edit.jsx @@ -16,7 +16,7 @@ import { PageShapeStyle, PageShapeStyleNoFill, PageReplaceContainer, PageReorder import { PageImageReplace, PageImageReorder, PageLinkSettings } from './EditImage'; import { TextColorCell, FillColorCell, CustomTextColorCell, CustomFillColorCell, FontsCell, TextFormatCell, TextOrientationCell, BorderStyleCell, BorderColorCell, CustomBorderColorCell, BorderSizeCell, PageFormatCell, PageAccountingFormatCell, PageCurrencyFormatCell, PageDateFormatCell, PageTimeFormatCell } from './EditCell'; import { PageTextFonts, PageTextFontColor, PageTextCustomFontColor } from './EditText'; -import { PageChartStyle, PageChartCustomFillColor, PageChartBorderColor, PageChartCustomBorderColor, PageChartReorder, PageChartLayout, PageLegend, PageChartTitle, PageHorizontalAxisTitle, PageVerticalAxisTitle, PageHorizontalGridlines, PageVerticalGridlines, PageDataLabels, PageChartVerticalAxis, PageVertAxisCrosses, PageDisplayUnits, PageVertMajorType, PageVertMinorType, PageVertLabelPosition, PageChartHorizontalAxis, PageHorAxisCrosses, PageHorAxisPosition, PageHorMajorType, PageHorMinorType, PageHorLabelPosition } from './EditChart'; +import { PageChartDesign, PageChartDesignType, PageChartDesignStyle, PageChartDesignFill, PageChartDesignBorder, PageChartCustomFillColor, PageChartBorderColor, PageChartCustomBorderColor, PageChartReorder, PageChartLayout, PageLegend, PageChartTitle, PageHorizontalAxisTitle, PageVerticalAxisTitle, PageHorizontalGridlines, PageVerticalGridlines, PageDataLabels, PageChartVerticalAxis, PageVertAxisCrosses, PageDisplayUnits, PageVertMajorType, PageVertMinorType, PageVertLabelPosition, PageChartHorizontalAxis, PageHorAxisCrosses, PageHorAxisPosition, PageHorMajorType, PageHorMinorType, PageHorLabelPosition } from './EditChart'; import { PageTypeLink, PageSheet } from './EditLink'; const routes = [ @@ -151,9 +151,25 @@ const routes = [ // Chart + { + path: '/edit-chart-design/', + component: PageChartDesign, + }, + { + path: '/edit-chart-type/', + component: PageChartDesignType + }, { path: '/edit-chart-style/', - component: PageChartStyle + component: PageChartDesignStyle + }, + { + path: '/edit-chart-fill/', + component: PageChartDesignFill + }, + { + path: '/edit-chart-border/', + component: PageChartDesignBorder }, { path: '/edit-chart-border-color/', diff --git a/apps/spreadsheeteditor/mobile/src/view/edit/EditChart.jsx b/apps/spreadsheeteditor/mobile/src/view/edit/EditChart.jsx index cb377eec2..f795d5cef 100644 --- a/apps/spreadsheeteditor/mobile/src/view/edit/EditChart.jsx +++ b/apps/spreadsheeteditor/mobile/src/view/edit/EditChart.jsx @@ -144,24 +144,100 @@ const PageBorderColor = props => { ) }; -const PageStyle = props => { +const PageChartType = props => { const { t } = useTranslation(); const _t = t('View.Edit', {returnObjects: true}); - const isAndroid = Device.android; const storeChartSettings = props.storeChartSettings; + const types = storeChartSettings.types; const storeFocusObjects = props.storeFocusObjects; const chartProperties = storeFocusObjects.chartObject && storeFocusObjects.chartObject.get_ChartProperties(); + const curType = chartProperties && chartProperties.getType(); + + return ( + + + +
+
+ {types.map((row, rowIndex) => { + return ( +
    + {row.map((type, index)=>{ + return( +
  • {props.onType(type.type)}}> +
    +
    • + ) + })} +
+ ) + })} +
+
+ + ) +} + +const PageChartStyle = props => { + const { t } = useTranslation(); + const _t = t('View.Edit', {returnObjects: true}); + const storeChartSettings = props.storeChartSettings; + const styles = storeChartSettings.styles; + const chartStyles = storeChartSettings.chartStyles; + + return ( + + + + {chartStyles ? +
+
+
    + {styles ? styles.map((row, rowIndex) => { + return ( + row.map((style, index)=>{ + return( +
  • {props.onStyle(style.asc_getName())}}> + +
    • + ) + }) + ) + }) :
    {_t.textNoStyles}
    + } +
+
+
+ : null} + + ) +} + +const PageChartDesignFill = props => { + const { t } = useTranslation(); + const _t = t('View.Edit', {returnObjects: true}); + + return ( + + +
+ +
+ + ) +} + +const PageChartBorder = props => { + const { t } = useTranslation(); + const _t = t('View.Edit', {returnObjects: true}); + const storeChartSettings = props.storeChartSettings; + const storeFocusObjects = props.storeFocusObjects; const shapeProperties = storeFocusObjects.shapeObject && storeFocusObjects.shapeObject.get_ShapeProperties(); - const styles = storeChartSettings.styles; - const types = storeChartSettings.types; - const curType = chartProperties && chartProperties.getType(); - const chartStyles = storeChartSettings.chartStyles; - // console.log(chartStyles, curType); - // console.log(Asc.c_oAscChartTypeSettings.comboBarLine, Asc.c_oAscChartTypeSettings.comboBarLineSecondary, Asc.c_oAscChartTypeSettings.comboAreaBar, Asc.c_oAscChartTypeSettings.comboCustom); - // Init border size - let borderSize, borderType; if (shapeProperties) { const shapeStroke = shapeProperties.get_stroke(); @@ -182,6 +258,47 @@ const PageStyle = props => { const borderColor = storeChartSettings.borderColor; const displayBorderColor = borderColor == 'transparent' ? borderColor : `#${(typeof borderColor === "object" ? borderColor.color : borderColor)}`; + + return ( + + + +
+ + +
{_t.textSize}
+
+ {setBorderSize(value); setTextBorderSize(borderSizeTransform.sizeByIndex(value));}} + onRangeChanged={(value) => {props.onBorderSize(borderSizeTransform.sizeByIndex(value))}} + > +
+
+ {stateTextBorderSize + ' ' + Common.Utils.Metric.getMetricName(Common.Utils.Metric.c_MetricUnits.pt)} +
+ + + + + +
+ + ) +} + +const PageDesign = props => { + const { t } = useTranslation(); + const _t = t('View.Edit', {returnObjects: true}); + const storeFocusObjects = props.storeFocusObjects; + const chartProperties = storeFocusObjects.chartObject && storeFocusObjects.chartObject.get_ChartProperties(); + + // console.log(chartStyles, curType); + // console.log(Asc.c_oAscChartTypeSettings.comboBarLine, Asc.c_oAscChartTypeSettings.comboBarLineSecondary, Asc.c_oAscChartTypeSettings.comboAreaBar, Asc.c_oAscChartTypeSettings.comboCustom); if ((!chartProperties || storeFocusObjects.focusOn === 'cell') && Device.phone) { $$('.sheet-modal.modal-in').length > 0 && f7.sheet.close(); @@ -190,90 +307,24 @@ const PageStyle = props => { return ( - -
- {_t.textType} - {chartStyles ? {_t.textStyle} : null} - {_t.textFill} - {_t.textBorder} - {isAndroid && } -
+ {Device.phone && } - - -
- {types.map((row, rowIndex) => { - return ( -
    - {row.map((type, index)=>{ - return( -
  • {props.onType(type.type)}}> -
    -
    • - ) - })} -
- ) - })} -
- - {chartStyles ? - -
- {styles ? styles.map((row, rowIndex) => { - return ( -
    - {row.map((style, index)=>{ - return( -
  • {props.onStyle(style.asc_getName())}}> - -
    • - ) - })} -
- ) - }) : -
{_t.textNoStyles}
- } -
- - : null} - - - - - - -
{_t.textSize}
-
- {setBorderSize(value); setTextBorderSize(borderSizeTransform.sizeByIndex(value));}} - onRangeChanged={(value) => {props.onBorderSize(borderSizeTransform.sizeByIndex(value))}} - > -
-
- {stateTextBorderSize + ' ' + Common.Utils.Metric.getMetricName(Common.Utils.Metric.c_MetricUnits.pt)} -
- - - - - - - + + + + + + + + ) }; @@ -1410,7 +1461,7 @@ const EditChart = props => { return ( - { }; const PageEditChart = inject("storeFocusObjects")(observer(EditChart)); -const PageChartStyle = inject("storeChartSettings", "storeFocusObjects")(observer(PageStyle)); +const PageChartDesign = inject("storeChartSettings", "storeFocusObjects")(observer(PageDesign)); +const PageChartDesignType = inject("storeChartSettings", "storeFocusObjects")(observer(PageChartType)); +const PageChartDesignStyle = inject("storeChartSettings")(observer(PageChartStyle)); +const PageChartDesignBorder = inject("storeChartSettings", "storeFocusObjects")(observer(PageChartBorder)); const PageChartCustomFillColor = inject("storeChartSettings", "storePalette")(observer(PageCustomFillColor)); const PageChartBorderColor = inject("storeChartSettings", "storePalette")(observer(PageBorderColor)); const PageChartCustomBorderColor = inject("storeChartSettings", "storePalette")(observer(PageCustomBorderColor)); @@ -1487,7 +1541,11 @@ const PageChartReorder = inject("storeFocusObjects")(observer(PageReorder)); export { PageEditChart as EditChart, - PageChartStyle, + PageChartDesign, + PageChartDesignType, + PageChartDesignStyle, + PageChartDesignFill, + PageChartDesignBorder, PageChartCustomFillColor, PageChartBorderColor, PageChartCustomBorderColor,