From acde75526a82ad9498fb7b11baaae8f753330e33 Mon Sep 17 00:00:00 2001 From: SergeyEzhin Date: Fri, 14 Apr 2023 19:43:06 +0400 Subject: [PATCH 1/3] [SSE mobile] Adding custom format settings --- apps/spreadsheeteditor/mobile/locale/en.json | 8 +- .../mobile/src/controller/edit/EditCell.jsx | 40 +++++-- .../mobile/src/view/edit/Edit.jsx | 15 ++- .../mobile/src/view/edit/EditCell.jsx | 102 +++++++++++++++++- 4 files changed, 149 insertions(+), 16 deletions(-) diff --git a/apps/spreadsheeteditor/mobile/locale/en.json b/apps/spreadsheeteditor/mobile/locale/en.json index 15b4876d12..2c85ee4d9d 100644 --- a/apps/spreadsheeteditor/mobile/locale/en.json +++ b/apps/spreadsheeteditor/mobile/locale/en.json @@ -580,7 +580,13 @@ "textYen": "Yen", "txtNotUrl": "This field should be a URL in the format \"http://www.example.com\"", "txtSortHigh2Low": "Sort Highest to Lowest", - "txtSortLow2High": "Sort Lowest to Highest" + "txtSortLow2High": "Sort Lowest to Highest", + "textCustomFormat": "Custom Format", + "textCreateFormat": "Create Format", + "textCreateCustomFormat": "Create Custom Format", + "textSave": "Save", + "textEnterFormat": "Enter Format", + "textCustomFormatWarning": "Please enter the custom number format carefully. Spreadsheet Editor does not check custom formats for errors that may affect the xlsx file." }, "Settings": { "advCSVOptions": "Choose CSV options", diff --git a/apps/spreadsheeteditor/mobile/src/controller/edit/EditCell.jsx b/apps/spreadsheeteditor/mobile/src/controller/edit/EditCell.jsx index 06c0ce2f41..8f347638ba 100644 --- a/apps/spreadsheeteditor/mobile/src/controller/edit/EditCell.jsx +++ b/apps/spreadsheeteditor/mobile/src/controller/edit/EditCell.jsx @@ -1,5 +1,6 @@ import React, {Component} from 'react'; import { EditCell } from '../../view/edit/EditCell'; +import { f7 } from 'framework7-react'; import {observer, inject} from "mobx-react"; class EditCellController extends Component { @@ -7,6 +8,7 @@ class EditCellController extends Component { super(props); this.dateFormats = this.initFormats(Asc.c_oAscNumFormatType.Date, 38822); this.timeFormats = this.initFormats(Asc.c_oAscNumFormatType.Time, 1.534); + this.customFormats = this.initCustomFormats(); this.onBorderStyle = this.onBorderStyle.bind(this); } @@ -18,16 +20,40 @@ class EditCellController extends Component { info.asc_setDecimalPlaces(0); info.asc_setSeparator(false); - let formatsArr = api.asc_getFormatCells(info), - data = []; - - formatsArr.forEach(function(item) { - data.push({value: item, displayValue: api.asc_getLocaleExample(item, exampleVal)}); - }); + const formatsArr = api.asc_getFormatCells(info); + const data = formatsArr.map(item => ({ + value: item, + displayValue: api.asc_getLocaleExample(item, exampleVal) + })); return data; } + initCustomFormats() { + const api = Common.EditorApi.get(); + const info = new Asc.asc_CFormatCellsInfo(); + const valSymbol = api.asc_getLocale(); + + info.asc_setType(Asc.c_oAscNumFormatType.Custom); + info.asc_setSymbol(valSymbol); + + const formatsArr = api.asc_getFormatCells(info); + const data = formatsArr.map(item => ({ + value: api.asc_convertNumFormat2NumFormatLocal(item), + format: item + })); + + return data; + } + + setCustomFormat(value) { + const api = Common.EditorApi.get(); + const format = api.asc_convertNumFormatLocal2NumFormat(value); + api.asc_setCellFormat(format); + + f7.views.current.router.back(); + } + toggleBold(value) { const api = Common.EditorApi.get(); api.asc_setCellBold(value); @@ -217,6 +243,8 @@ class EditCellController extends Component { dateFormats={this.dateFormats} timeFormats={this.timeFormats} onTextColorAuto={this.onTextColorAuto} + setCustomFormat={this.setCustomFormat} + customFormats={this.customFormats} /> ) } diff --git a/apps/spreadsheeteditor/mobile/src/view/edit/Edit.jsx b/apps/spreadsheeteditor/mobile/src/view/edit/Edit.jsx index 651bb6fc57..8ac91d5a86 100644 --- a/apps/spreadsheeteditor/mobile/src/view/edit/Edit.jsx +++ b/apps/spreadsheeteditor/mobile/src/view/edit/Edit.jsx @@ -14,7 +14,7 @@ import { EditLinkController } from "../../controller/edit/EditLink"; import { PageShapeStyle, PageShapeStyleNoFill, PageReplaceContainer, PageReorderContainer, PageShapeBorderColor, PageShapeCustomBorderColor, PageShapeCustomFillColor } from './EditShape'; import { PageImageReplace, PageImageReorder, PageLinkSettings } from './EditImage'; -import { TextColorCell, FillColorCell, CustomTextColorCell, CustomFillColorCell, FontsCell, TextFormatCell, TextOrientationCell, BorderStyleCell, BorderColorCell, CustomBorderColorCell, BorderSizeCell, PageFormatCell, PageAccountingFormatCell, PageCurrencyFormatCell, PageDateFormatCell, PageTimeFormatCell, CellStyle } from './EditCell'; +import { TextColorCell, FillColorCell, CustomTextColorCell, CustomFillColorCell, FontsCell, TextFormatCell, TextOrientationCell, BorderStyleCell, BorderColorCell, CustomBorderColorCell, BorderSizeCell, PageFormatCell, PageAccountingFormatCell, PageCurrencyFormatCell, PageDateFormatCell, PageTimeFormatCell, CellStyle, PageCustomFormat, PageCreationCustomFormat } from './EditCell'; import { PageTextFonts, PageTextFontColor, PageTextCustomFontColor } from './EditText'; 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 { PageEditTypeLink, PageEditSheet } from './EditLink'; @@ -279,7 +279,6 @@ const routes = [ }, // Link - { path: '/edit-link-type/', component: PageEditTypeLink @@ -287,9 +286,17 @@ const routes = [ { path: '/edit-link-sheet', component: PageEditSheet + }, + + // Add custom format + { + path: '/custom-format/', + component: PageCustomFormat + }, + { + path: '/create-custom-format/', + component: PageCreationCustomFormat } - - ]; const EmptyEditLayout = () => { diff --git a/apps/spreadsheeteditor/mobile/src/view/edit/EditCell.jsx b/apps/spreadsheeteditor/mobile/src/view/edit/EditCell.jsx index 4f58e11005..4bab70a9ee 100644 --- a/apps/spreadsheeteditor/mobile/src/view/edit/EditCell.jsx +++ b/apps/spreadsheeteditor/mobile/src/view/edit/EditCell.jsx @@ -1,6 +1,6 @@ import React, {Fragment, useState, useEffect} from 'react'; import {observer, inject} from "mobx-react"; -import {f7, List, ListItem, Icon, Row, Button, Page, Navbar, Segmented, BlockTitle, NavRight, Link, Toggle, Swiper, SwiperSlide} from 'framework7-react'; +import {f7, List, ListItem, Icon, Row, Button, Page, Navbar, Segmented, BlockTitle, NavRight, Link, Toggle, Swiper, SwiperSlide, ListInput, Block} 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'; @@ -101,7 +101,9 @@ const EditCell = props => { onCurrencyCellFormat: props.onCurrencyCellFormat, onAccountingCellFormat: props.onAccountingCellFormat, dateFormats: props.dateFormats, - timeFormats: props.timeFormats + timeFormats: props.timeFormats, + setCustomFormat: props.setCustomFormat, + customFormats: props.customFormats }}> {!isAndroid ? : null @@ -876,6 +878,12 @@ const PageFormatCell = props => { } + + + props.onCellFormat('General')}> @@ -921,7 +929,89 @@ const PageFormatCell = props => { ) } -const PageAccountingFormatCell = props => { +const PageCustomFormat = props => { + const { t } = useTranslation(); + const _t = t('View.Edit', {returnObjects: true}); + const customFormats = props.customFormats; + const [renderList, setRenderList] = useState(false); + + useEffect(() => { + if (customFormats?.length) { + setRenderList(true); + } + }, [customFormats]); + + + const handleCellFormatClick = (value) => { + props.setCustomFormat(value); + f7.views.current.router.back(); + }; + + return ( + + + {Device.phone && + + + + } + + + + + {renderList && ( + + {customFormats.map((item, idx) => ( + handleCellFormatClick(item.value)} + /> + ))} + + )} + + ) +} + +const PageCreationCustomFormat = observer(props => { + const { t } = useTranslation(); + const _t = t('View.Edit', {returnObjects: true}); + const [formatValue, setFormatValue] = useState(''); + const isIos = Device.ios; + + return ( + + + + props.setCustomFormat(formatValue)}> + + + <> + + setFormatValue(e.target.value)} + /> + + +

{t('View.Edit.textCustomFormatWarning')}

+ + + + ) +}); + +const PageAccountingFormatCell = observer(props => { const { t } = useTranslation(); const _t = t('View.Edit', {returnObjects: true}); @@ -953,7 +1043,7 @@ const PageAccountingFormatCell = props => { ) -} +}); const PageCurrencyFormatCell = props => { const { t } = useTranslation(); @@ -1074,5 +1164,7 @@ export { PageCurrencyFormatCell, PageDateFormatCell, PageTimeFormatCell, - CellStyle + CellStyle, + PageCustomFormat, + PageCreationCustomFormat }; \ No newline at end of file From a06e6f239a4623b6bab41440e1fb0dd4a6f7b36e Mon Sep 17 00:00:00 2001 From: SergeyEzhin Date: Tue, 18 Apr 2023 00:55:14 +0400 Subject: [PATCH 2/3] [SSE mobile] Correct custom formats settings --- .../mobile/src/controller/edit/EditCell.jsx | 18 ++++++++++++--- .../mobile/src/less/icons-material.less | 10 ++++++++ .../mobile/src/store/cellSettings.js | 13 +++++++++++ .../mobile/src/view/edit/Edit.jsx | 6 ++--- .../mobile/src/view/edit/EditCell.jsx | 23 +++++++++++-------- 5 files changed, 54 insertions(+), 16 deletions(-) diff --git a/apps/spreadsheeteditor/mobile/src/controller/edit/EditCell.jsx b/apps/spreadsheeteditor/mobile/src/controller/edit/EditCell.jsx index 8f347638ba..aa495a97a6 100644 --- a/apps/spreadsheeteditor/mobile/src/controller/edit/EditCell.jsx +++ b/apps/spreadsheeteditor/mobile/src/controller/edit/EditCell.jsx @@ -2,14 +2,17 @@ import React, {Component} from 'react'; import { EditCell } from '../../view/edit/EditCell'; import { f7 } from 'framework7-react'; import {observer, inject} from "mobx-react"; +import { Device } from '../../../../../common/mobile/utils/device'; class EditCellController extends Component { constructor (props) { super(props); this.dateFormats = this.initFormats(Asc.c_oAscNumFormatType.Date, 38822); this.timeFormats = this.initFormats(Asc.c_oAscNumFormatType.Time, 1.534); - this.customFormats = this.initCustomFormats(); + this.initCustomFormats = this.initCustomFormats.bind(this); + this.setCustomFormat = this.setCustomFormat.bind(this); this.onBorderStyle = this.onBorderStyle.bind(this); + this.initCustomFormats(); } initFormats(type, exampleVal) { @@ -30,7 +33,10 @@ class EditCellController extends Component { } initCustomFormats() { + if(this.props.storeCellSettings.customFormats?.length) return; + const api = Common.EditorApi.get(); + const storeCellSettings = this.props.storeCellSettings; const info = new Asc.asc_CFormatCellsInfo(); const valSymbol = api.asc_getLocale(); @@ -43,12 +49,19 @@ class EditCellController extends Component { format: item })); - return data; + storeCellSettings.initCustomFormats(data); } setCustomFormat(value) { const api = Common.EditorApi.get(); const format = api.asc_convertNumFormatLocal2NumFormat(value); + const storeCellSettings = this.props.storeCellSettings; + // const isPhone = Device.phone; + + storeCellSettings.addCustomFormat({ + value: api.asc_convertNumFormat2NumFormatLocal(format), + format + }); api.asc_setCellFormat(format); f7.views.current.router.back(); @@ -244,7 +257,6 @@ class EditCellController extends Component { timeFormats={this.timeFormats} onTextColorAuto={this.onTextColorAuto} setCustomFormat={this.setCustomFormat} - customFormats={this.customFormats} /> ) } diff --git a/apps/spreadsheeteditor/mobile/src/less/icons-material.less b/apps/spreadsheeteditor/mobile/src/less/icons-material.less index d69f5fd41a..dd9eec361b 100644 --- a/apps/spreadsheeteditor/mobile/src/less/icons-material.less +++ b/apps/spreadsheeteditor/mobile/src/less/icons-material.less @@ -334,6 +334,16 @@ height: 22px; .encoded-svg-mask('', @fill-white); } + &.icon-add-custom-format { + width: 22px; + height: 22px; + .encoded-svg-mask('', @brandColor); + } + &.icon-check { + width: 24px; + height: 24px; + .encoded-svg-mask('', @fill-white); + } } .tabbar { diff --git a/apps/spreadsheeteditor/mobile/src/store/cellSettings.js b/apps/spreadsheeteditor/mobile/src/store/cellSettings.js index 4ea4f5c96f..c7e8410c3d 100644 --- a/apps/spreadsheeteditor/mobile/src/store/cellSettings.js +++ b/apps/spreadsheeteditor/mobile/src/store/cellSettings.js @@ -33,6 +33,9 @@ export class storeCellSettings { changeBorderSize: action, changeBorderStyle: action, setAutoColor: action, + customFormats: observable, + initCustomFormats: action, + addCustomFormat: action }); } @@ -68,6 +71,16 @@ export class storeCellSettings { colorAuto = 'auto'; + customFormats; + + initCustomFormats(formatsArr) { + this.customFormats = formatsArr; + } + + addCustomFormat(format) { + this.customFormats.push(format); + } + setAutoColor(value) { this.colorAuto = value; } diff --git a/apps/spreadsheeteditor/mobile/src/view/edit/Edit.jsx b/apps/spreadsheeteditor/mobile/src/view/edit/Edit.jsx index 8ac91d5a86..f777cfd476 100644 --- a/apps/spreadsheeteditor/mobile/src/view/edit/Edit.jsx +++ b/apps/spreadsheeteditor/mobile/src/view/edit/Edit.jsx @@ -10,11 +10,11 @@ import EditShapeController from "../../controller/edit/EditShape"; import EditImageController from "../../controller/edit/EditImage"; import EditTextController from "../../controller/edit/EditText"; import EditChartController from "../../controller/edit/EditChart"; -import { EditLinkController } from "../../controller/edit/EditLink"; +// import { EditLinkController } from "../../controller/edit/EditLink"; import { PageShapeStyle, PageShapeStyleNoFill, PageReplaceContainer, PageReorderContainer, PageShapeBorderColor, PageShapeCustomBorderColor, PageShapeCustomFillColor } from './EditShape'; import { PageImageReplace, PageImageReorder, PageLinkSettings } from './EditImage'; -import { TextColorCell, FillColorCell, CustomTextColorCell, CustomFillColorCell, FontsCell, TextFormatCell, TextOrientationCell, BorderStyleCell, BorderColorCell, CustomBorderColorCell, BorderSizeCell, PageFormatCell, PageAccountingFormatCell, PageCurrencyFormatCell, PageDateFormatCell, PageTimeFormatCell, CellStyle, PageCustomFormat, PageCreationCustomFormat } from './EditCell'; +import { TextColorCell, FillColorCell, CustomTextColorCell, CustomFillColorCell, FontsCell, TextFormatCell, TextOrientationCell, BorderStyleCell, BorderColorCell, CustomBorderColorCell, BorderSizeCell, PageFormatCell, PageAccountingFormatCell, PageCurrencyFormatCell, PageDateFormatCell, PageTimeFormatCell, CellStyle, PageCreationCustomFormat, CustomFormats } from './EditCell'; import { PageTextFonts, PageTextFontColor, PageTextCustomFontColor } from './EditText'; 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 { PageEditTypeLink, PageEditSheet } from './EditLink'; @@ -291,7 +291,7 @@ const routes = [ // Add custom format { path: '/custom-format/', - component: PageCustomFormat + component: CustomFormats }, { path: '/create-custom-format/', diff --git a/apps/spreadsheeteditor/mobile/src/view/edit/EditCell.jsx b/apps/spreadsheeteditor/mobile/src/view/edit/EditCell.jsx index 4bab70a9ee..742cf42779 100644 --- a/apps/spreadsheeteditor/mobile/src/view/edit/EditCell.jsx +++ b/apps/spreadsheeteditor/mobile/src/view/edit/EditCell.jsx @@ -1,6 +1,6 @@ import React, {Fragment, useState, useEffect} from 'react'; import {observer, inject} from "mobx-react"; -import {f7, List, ListItem, Icon, Row, Button, Page, Navbar, Segmented, BlockTitle, NavRight, Link, Toggle, Swiper, SwiperSlide, ListInput, Block} from 'framework7-react'; +import {f7, f7router, List, ListItem, Icon, Row, Button, Page, Navbar, Segmented, BlockTitle, NavRight, Link, Toggle, Swiper, SwiperSlide, ListInput, Block} 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'; @@ -103,7 +103,7 @@ const EditCell = props => { dateFormats: props.dateFormats, timeFormats: props.timeFormats, setCustomFormat: props.setCustomFormat, - customFormats: props.customFormats + onCellFormat: props.onCellFormat }}> {!isAndroid ? : null @@ -867,6 +867,7 @@ const PageBorderSizeCell = props => { const PageFormatCell = props => { const { t } = useTranslation(); const _t = t('View.Edit', {returnObjects: true}); + const isIos = Device.ios; return ( @@ -880,9 +881,9 @@ const PageFormatCell = props => { - + props.onCellFormat('General')}> @@ -929,21 +930,22 @@ const PageFormatCell = props => { ) } -const PageCustomFormat = props => { +const PageCustomFormats = props => { const { t } = useTranslation(); const _t = t('View.Edit', {returnObjects: true}); - const customFormats = props.customFormats; + const storeCellSettings = props.storeCellSettings; + const customFormats = storeCellSettings.customFormats; const [renderList, setRenderList] = useState(false); + // const isPhone = Device.phone; useEffect(() => { if (customFormats?.length) { setRenderList(true); } }, [customFormats]); - - const handleCellFormatClick = (value) => { - props.setCustomFormat(value); + const handleCellFormatClick = (format) => { + props.onCellFormat(format); f7.views.current.router.back(); }; @@ -1145,6 +1147,7 @@ const BorderColorCell = inject("storeCellSettings", "storePalette")(observer(Pag const CustomBorderColorCell = inject("storeCellSettings", "storePalette")(observer(PageCustomBorderColorCell)); const BorderSizeCell = inject("storeCellSettings")(observer(PageBorderSizeCell)); const CellStyle = inject("storeCellSettings")(observer(PageCellStyle)); +const CustomFormats = inject("storeCellSettings")(observer(PageCustomFormats)); export { PageEditCell as EditCell, @@ -1165,6 +1168,6 @@ export { PageDateFormatCell, PageTimeFormatCell, CellStyle, - PageCustomFormat, + CustomFormats, PageCreationCustomFormat }; \ No newline at end of file From 80b920c813c9b6d2107f288ecb3bfa5cda5ae9fb Mon Sep 17 00:00:00 2001 From: SergeyEzhin Date: Tue, 18 Apr 2023 15:00:13 +0400 Subject: [PATCH 3/3] [SSE mobile] Correct closing settings --- .../mobile/src/controller/edit/EditCell.jsx | 3 --- .../mobile/src/view/edit/EditCell.jsx | 10 +++++++--- 2 files changed, 7 insertions(+), 6 deletions(-) diff --git a/apps/spreadsheeteditor/mobile/src/controller/edit/EditCell.jsx b/apps/spreadsheeteditor/mobile/src/controller/edit/EditCell.jsx index aa495a97a6..3ea369759f 100644 --- a/apps/spreadsheeteditor/mobile/src/controller/edit/EditCell.jsx +++ b/apps/spreadsheeteditor/mobile/src/controller/edit/EditCell.jsx @@ -56,15 +56,12 @@ class EditCellController extends Component { const api = Common.EditorApi.get(); const format = api.asc_convertNumFormatLocal2NumFormat(value); const storeCellSettings = this.props.storeCellSettings; - // const isPhone = Device.phone; storeCellSettings.addCustomFormat({ value: api.asc_convertNumFormat2NumFormatLocal(format), format }); api.asc_setCellFormat(format); - - f7.views.current.router.back(); } toggleBold(value) { diff --git a/apps/spreadsheeteditor/mobile/src/view/edit/EditCell.jsx b/apps/spreadsheeteditor/mobile/src/view/edit/EditCell.jsx index 742cf42779..9b7bbd2abb 100644 --- a/apps/spreadsheeteditor/mobile/src/view/edit/EditCell.jsx +++ b/apps/spreadsheeteditor/mobile/src/view/edit/EditCell.jsx @@ -936,7 +936,6 @@ const PageCustomFormats = props => { const storeCellSettings = props.storeCellSettings; const customFormats = storeCellSettings.customFormats; const [renderList, setRenderList] = useState(false); - // const isPhone = Device.phone; useEffect(() => { if (customFormats?.length) { @@ -946,7 +945,7 @@ const PageCustomFormats = props => { const handleCellFormatClick = (format) => { props.onCellFormat(format); - f7.views.current.router.back(); + props.f7router.back(); }; return ( @@ -988,11 +987,16 @@ const PageCreationCustomFormat = observer(props => { const [formatValue, setFormatValue] = useState(''); const isIos = Device.ios; + const handleSetCustomFormat = (value) => { + props.setCustomFormat(value); + props.f7router.back(); + } + return ( - props.setCustomFormat(formatValue)}> + handleSetCustomFormat(formatValue)}> <>