diff --git a/apps/documenteditor/mobile/locale/en.json b/apps/documenteditor/mobile/locale/en.json index 21a4728b3..31577d094 100644 --- a/apps/documenteditor/mobile/locale/en.json +++ b/apps/documenteditor/mobile/locale/en.json @@ -233,6 +233,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 7b8b04ef9..1a3dc2985 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 @@ -152,9 +152,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..4b37577af 100644 --- a/apps/documenteditor/mobile/src/view/edit/EditChart.jsx +++ b/apps/documenteditor/mobile/src/view/edit/EditChart.jsx @@ -139,21 +139,96 @@ 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 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('Edit.textNoStyles')}
    + } +
+
+
+ : null} + + ) +} + +const PageChartDesignFill = props => { + const { t } = useTranslation(); + + return ( + + +
+ +
+ + ) +} + +const PageChartBorder = props => { + const { t } = useTranslation(); + const storeChartSettings = props.storeChartSettings; const shapeObject = props.storeFocusObjects.shapeObject; + let borderSize, borderType, borderColor; if (shapeObject) { const shapeStroke = shapeObject.get_ShapeProperties().get_stroke(); @@ -171,6 +246,45 @@ const PageStyle = props => { // Init border color const displayBorderColor = borderColor !== 'transparent' ? `#${(typeof borderColor === "object" ? borderColor.color : borderColor)}` : borderColor; + + return ( + + + +
+ + +
{t('Edit.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 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 +293,7 @@ const PageStyle = props => { return ( - -
- {_t.textType} - {chartStyles ? {_t.textStyle} : null} - {_t.textFill} - {_t.textBorder} - {isAndroid && } -
+ {Device.phone && @@ -195,78 +302,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)} -
- - - - - - - + + + + + + + + ) }; @@ -425,37 +471,39 @@ const PageReorder = props => { const EditChart = props => { const { t } = useTranslation(); - const _t = t('Edit', {returnObjects: true}); return ( - - - - {props.onRemoveChart()}} className='button-red button-fill button-raised'/> + {props.onRemoveChart()}} className='button-red button-fill button-raised'/> ) }; -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 +511,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 cb5fee058..41bc69ff0 100644 --- a/apps/presentationeditor/mobile/locale/en.json +++ b/apps/presentationeditor/mobile/locale/en.json @@ -289,6 +289,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 e231dfc26..cf8769528 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, PageTextHighlightColor, PageTextCusto 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 = [ @@ -172,9 +172,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..4a5cded23 100644 --- a/apps/presentationeditor/mobile/src/view/edit/EditChart.jsx +++ b/apps/presentationeditor/mobile/src/view/edit/EditChart.jsx @@ -149,21 +149,98 @@ 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 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('View.Edit.textNoStyles')}
    + } +
+
+
+ : null} + + ) +} + +const PageChartDesignFill = props => { + const { t } = useTranslation(); + + return ( + + +
+ +
+ + ) +} + +const PageChartBorder = props => { + const { t } = useTranslation(); + 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 +248,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 +255,43 @@ const PageStyle = props => { const [stateTextBorderSize, setTextBorderSize] = useState(displayTextBorderSize); // Init border color - const displayBorderColor = borderColor !== 'transparent' ? `#${(typeof borderColor === "object" ? borderColor.color : borderColor)}` : borderColor; + + return ( + + + +
+ + +
{t('View.Edit.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 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 +300,7 @@ const PageStyle = props => { return ( - -
- {_t.textType} - {chartStyles ? {_t.textStyle} : null} - {_t.textFill} - {_t.textBorder} - {isAndroid && } -
+ {Device.phone && @@ -205,78 +309,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)} -
- - - - - - - + + + + + + + + ) }; @@ -375,33 +418,35 @@ const PageAlign = props => { const EditChart = props => { const { t } = useTranslation(); - const _t = t('View.Edit', {returnObjects: true}); return ( - - - - {props.onRemoveChart()}} className='button-red button-fill button-raised'/> + {props.onRemoveChart()}} className='button-red button-fill button-raised'/> ) }; -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 +455,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..74b619f9a 100644 --- a/apps/spreadsheeteditor/mobile/src/view/edit/EditChart.jsx +++ b/apps/spreadsheeteditor/mobile/src/view/edit/EditChart.jsx @@ -144,24 +144,96 @@ 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 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('View.Edit.textNoStyles')}
    + } +
+
+
+ : null} + + ) +} + +const PageChartDesignFill = props => { + const { t } = useTranslation(); + + return ( + + +
+ +
+ + ) +} + +const PageChartBorder = props => { + const { t } = useTranslation(); + 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 +254,46 @@ const PageStyle = props => { const borderColor = storeChartSettings.borderColor; const displayBorderColor = borderColor == 'transparent' ? borderColor : `#${(typeof borderColor === "object" ? borderColor.color : borderColor)}`; + + return ( + + + +
+ + +
{t('View.Edit.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 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 +302,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)} -
- - - - - - - + + + + + + + + ) }; @@ -1377,7 +1423,6 @@ const PageHorLabelPosition = props => { const EditChart = props => { const { t } = useTranslation(); - const _t = t('View.Edit', {returnObjects: true}); const storeFocusObjects = props.storeFocusObjects; const chartProperties = storeFocusObjects.chartObject && storeFocusObjects.chartObject.get_ChartProperties(); const chartType = chartProperties && chartProperties.getType(); @@ -1410,19 +1455,19 @@ const EditChart = props => { return ( - - - { onVerAxisTickMinor: props.onVerAxisTickMinor, onVerAxisLabelPos: props.onVerAxisLabelPos }}> - { disableAxisPos, needReverse }}> - - {props.onRemoveChart()}} className='button-red button-fill button-raised'/> + {props.onRemoveChart()}} className='button-red button-fill button-raised'/> ) }; 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 +1535,11 @@ const PageChartReorder = inject("storeFocusObjects")(observer(PageReorder)); export { PageEditChart as EditChart, - PageChartStyle, + PageChartDesign, + PageChartDesignType, + PageChartDesignStyle, + PageChartDesignFill, + PageChartDesignBorder, PageChartCustomFillColor, PageChartBorderColor, PageChartCustomBorderColor,