From 507ce63a9884d5e2ea7d2ba56bb57002c963f6a8 Mon Sep 17 00:00:00 2001 From: SergeyEzhin Date: Thu, 4 Feb 2021 21:00:21 +0300 Subject: [PATCH 01/27] [SSE mobile] Make Cell Settings --- apps/common/mobile/resources/less/common.less | 35 +++ apps/spreadsheeteditor/mobile/locale/en.json | 12 +- .../mobile/src/controller/Main.jsx | 28 +- .../mobile/src/controller/edit/EditCell.jsx | 41 ++- .../mobile/src/store/cellSettings.js | 103 +++++++ .../mobile/src/store/mainStore.js | 4 +- .../mobile/src/view/edit/Edit.jsx | 21 ++ .../mobile/src/view/edit/EditCell.jsx | 258 +++++++++++++++++- 8 files changed, 494 insertions(+), 8 deletions(-) create mode 100644 apps/spreadsheeteditor/mobile/src/store/cellSettings.js diff --git a/apps/common/mobile/resources/less/common.less b/apps/common/mobile/resources/less/common.less index 2b3f3df2d..2cb8512d6 100644 --- a/apps/common/mobile/resources/less/common.less +++ b/apps/common/mobile/resources/less/common.less @@ -420,3 +420,38 @@ } } } + +// Cell styles + +.cell-styles-list { + ul { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + padding-left: 5px; + padding-right: 5px; + padding-top: 5px; + } + li { + border: 0.5px solid #c8c7cc; + padding: 2px; + background-repeat: no-repeat; + width: 106px; + height: 56px; + margin-bottom: 10px; + background-position: center; + } + .item-inner:after { + display: none; + } + .item-theme.active:before { + content: ''; + position: absolute; + width: 22px; + height: 22px; + right: 2px; + bottom: 2px; + z-index: 1; + .encoded-svg-background(''); + } +} diff --git a/apps/spreadsheeteditor/mobile/locale/en.json b/apps/spreadsheeteditor/mobile/locale/en.json index d0b89637d..62e85c269 100644 --- a/apps/spreadsheeteditor/mobile/locale/en.json +++ b/apps/spreadsheeteditor/mobile/locale/en.json @@ -49,7 +49,17 @@ "textNotUrl": "This field should be a URL in the format \"http://www.example.com\"", "notcriticalErrorTitle": "Warning", "textPictureFromLibrary": "Picture from Library", - "textPictureFromURL": "Picture from URL" + "textPictureFromURL": "Picture from URL", + "textTextColor": "Text Color", + "textFillColor": "Fill Color", + "textTextFormat": "Text Format", + "textTextOrientation": "Text Orientation", + "textBorderStyle": "Border Style", + "textFonts": "Fonts", + "textAuto": "Auto", + "textPt": "pt", + "textFormat": "Format", + "textCellStyles": "Cell Styles" } }, "Common": { diff --git a/apps/spreadsheeteditor/mobile/src/controller/Main.jsx b/apps/spreadsheeteditor/mobile/src/controller/Main.jsx index abafacc98..63f775e3c 100644 --- a/apps/spreadsheeteditor/mobile/src/controller/Main.jsx +++ b/apps/spreadsheeteditor/mobile/src/controller/Main.jsx @@ -5,7 +5,7 @@ import { f7 } from 'framework7-react'; import { withTranslation } from 'react-i18next'; import CollaborationController from '../../../../common/mobile/lib/controller/Collaboration.jsx' -@inject("storeFocusObjects") +@inject("storeFocusObjects", "storeCellSettings") class MainController extends Component { constructor(props) { super(props) @@ -205,12 +205,34 @@ class MainController extends Component { me.api.asc_registerCallback('asc_onEndAction', me._onLongActionEnd.bind(me)); const storeFocusObjects = this.props.storeFocusObjects; + const storeCellSettings = this.props.storeCellSettings; + const styleSize = storeCellSettings.styleSize; this.api.asc_registerCallback('asc_onSelectionChanged', cellInfo => { - // console.log(cellInfo); + console.log(cellInfo); storeFocusObjects.resetCellInfo(cellInfo); + storeCellSettings.initCellSettings(cellInfo); let selectedObjects = Common.EditorApi.get().asc_getGraphicObjectProps(); - storeFocusObjects.resetFocusObjects(selectedObjects); + + if(selectedObjects.length) { + storeFocusObjects.resetFocusObjects(selectedObjects); + } + + }); + + this.api.asc_setThumbnailStylesSizes(styleSize.width, styleSize.height); + + this.api.asc_registerCallback('asc_onInitEditorFonts', (fonts, select) => { + storeCellSettings.initEditorFonts(fonts, select); + }); + + this.api.asc_registerCallback('asc_onEditorSelectionChanged', fontObj => { + console.log(fontObj) + storeCellSettings.initFontInfo(fontObj); + }); + + this.api.asc_registerCallback('asc_onInitEditorStyles', styles => { + storeCellSettings.initCellStyles(styles); }); this.api.asc_registerCallback('asc_onSendThemeColors', (colors, standart_colors) => { diff --git a/apps/spreadsheeteditor/mobile/src/controller/edit/EditCell.jsx b/apps/spreadsheeteditor/mobile/src/controller/edit/EditCell.jsx index d74d69b64..6b27609a2 100644 --- a/apps/spreadsheeteditor/mobile/src/controller/edit/EditCell.jsx +++ b/apps/spreadsheeteditor/mobile/src/controller/edit/EditCell.jsx @@ -2,16 +2,53 @@ import React, {Component} from 'react'; import { f7 } from 'framework7-react'; import {Device} from '../../../../../common/mobile/utils/device'; -import EditCell from '../../view/edit/EditCell'; +import { EditCell } from '../../view/edit/EditCell'; class EditCellController extends Component { constructor (props) { super(props); } + toggleBold(value) { + const api = Common.EditorApi.get(); + api.asc_setCellBold(value); + } + + toggleItalic(value) { + const api = Common.EditorApi.get(); + api.asc_setCellItalic(value); + + } + + toggleUnderline(value) { + const api = Common.EditorApi.get(); + api.asc_setCellUnderline(value); + } + + onStyleClick(type) { + const api = Common.EditorApi.get(); + api.asc_setCellStyle(type); + } + + onTextColor(color) { + const api = Common.EditorApi.get(); + api.asc_setCellTextColor(Common.Utils.ThemeColor.getRgbColor(color)); + } + + onFillColor(color) { + const api = Common.EditorApi.get(); + api.asc_setCellBackgroundColor(color == 'transparent' ? null : Common.Utils.ThemeColor.getRgbColor(color)); + } + render () { return ( - ) } diff --git a/apps/spreadsheeteditor/mobile/src/store/cellSettings.js b/apps/spreadsheeteditor/mobile/src/store/cellSettings.js new file mode 100644 index 000000000..77b609aa5 --- /dev/null +++ b/apps/spreadsheeteditor/mobile/src/store/cellSettings.js @@ -0,0 +1,103 @@ +import {action, observable, computed} from 'mobx'; + +export class storeCellSettings { + + @observable styleSize = { + width: 100, + height: 50 + } + + @observable cellStyles = []; + @observable fontsArray = []; + @observable fontInfo = {}; + + @observable fillColor = undefined; + @observable fontColor = undefined; + @observable styleName = undefined; + + @observable isBold = false; + @observable isItalic = false; + @observable isUnderline = false; + + + @action initCellSettings(cellInfo) { + + let xfs = cellInfo.asc_getXfs(); + + this.initFontSettings(xfs); + + let color = xfs.asc_getFillColor(); + console.log(color); + let clr = this.resetColor(color); + + this.fillColor = clr; + this.styleName = cellInfo.asc_getStyleName(); + } + + @action initFontSettings(fontObj) { + + this.fontInfo.name = fontObj.asc_getFontName(); + this.fontInfo.size = fontObj.asc_getFontSize(); + + this.fontInfo.color = fontObj.asc_getFontColor(); + let clr = this.resetColor(this.fontInfo.color); + this.fontColor = clr; + + this.isBold = fontObj.asc_getFontBold(); + this.isItalic = fontObj.asc_getFontItalic(); + this.isUnderline = fontObj.asc_getFontUnderline(); + } + + @action initEditorFonts(fonts, select) { + let array = []; + + for (let font of fonts) { + let fontId = font.asc_getFontId(); + array.push({ + id : fontId, + name : font.asc_getFontName(), + //displayValue: font.asc_getFontName(), + imgidx : font.asc_getFontThumbnail(), + type : font.asc_getFontType() + }); + } + + this.fontsArray = array; + } + + @action initCellStyles(styles) { + this.cellStyles = styles; + } + + @action initFontInfo(fontObj) { + this.fontInfo = fontObj; + } + + @action changeFontColor(color) { + // this.fontInfo.color = fontObj.asc_getFontColor(); + // let clr = this.resetColor(this.fontInfo.color); + this.fontColor = color; + } + + @action changeFillColor(color) { + this.fillColor = color; + } + + resetColor(color) { + let clr = 'transparent'; + + if (color) { + if (color.get_type() == Asc.c_oAscColor.COLOR_TYPE_SCHEME) { + clr = { + color: Common.Utils.ThemeColor.getHexColor(color.get_r(), color.get_g(), color.get_b()), + effectValue: color.get_value() + } + } else { + clr = Common.Utils.ThemeColor.getHexColor(color.get_r(), color.get_g(), color.get_b()); + } + } + + return clr; + } + +} \ No newline at end of file diff --git a/apps/spreadsheeteditor/mobile/src/store/mainStore.js b/apps/spreadsheeteditor/mobile/src/store/mainStore.js index 438816d29..f20625ca8 100644 --- a/apps/spreadsheeteditor/mobile/src/store/mainStore.js +++ b/apps/spreadsheeteditor/mobile/src/store/mainStore.js @@ -7,6 +7,7 @@ import {storePalette} from "./palette"; // import {storeTextSettings} from "./textSettings"; // import {storeParagraphSettings} from "./paragraphSettings"; import {storeShapeSettings} from "./shapeSettings"; +import {storeCellSettings} from "./cellSettings"; // import {storeImageSettings} from "./imageSettings"; // import {storeTableSettings} from "./tableSettings"; import {storeChartSettings} from "./chartSettings"; @@ -20,7 +21,8 @@ export const stores = { // storeParagraphSettings: new storeParagraphSettings(), storeShapeSettings: new storeShapeSettings(), storeChartSettings: new storeChartSettings(), - storePalette: new storePalette() + storePalette: new storePalette(), + storeCellSettings: new storeCellSettings() // storeImageSettings: new storeImageSettings(), // storeTableSettings: new storeTableSettings() }; diff --git a/apps/spreadsheeteditor/mobile/src/view/edit/Edit.jsx b/apps/spreadsheeteditor/mobile/src/view/edit/Edit.jsx index ef26b37ab..730e725b7 100644 --- a/apps/spreadsheeteditor/mobile/src/view/edit/Edit.jsx +++ b/apps/spreadsheeteditor/mobile/src/view/edit/Edit.jsx @@ -11,6 +11,7 @@ import EditImageController from "../../controller/edit/EditImage"; import { PageShapeStyle, PageShapeStyleNoFill, PageReplaceContainer, PageReorderContainer, PageShapeBorderColor, PageShapeCustomBorderColor, PageShapeCustomFillColor } from './EditShape'; import { PageImageReplace, PageImageReorder, PageLinkSettings } from './EditImage'; +import { TextColorCell, FillColorCell, CustomTextColorCell, CustomFillColorCell } from './EditCell'; const routes = [ @@ -58,6 +59,25 @@ const routes = [ { path: '/edit-image-link/', component: PageLinkSettings + }, + + // Cell + + { + path: '/edit-cell-text-color/', + component: TextColorCell + }, + { + path: '/edit-cell-fill-color/', + component: FillColorCell + }, + { + path: '/edit-cell-text-custom-color/', + component: CustomTextColorCell + }, + { + path: '/edit-cell-fill-custom-color/', + component: CustomFillColorCell } ]; @@ -122,6 +142,7 @@ const EditTabs = props => { const store = props.storeFocusObjects; const settings = !store.focusOn ? [] : (store.focusOn === 'obj' ? store.objects : store.selections); let editors = []; + if (settings.length < 1) { editors.push({ caption: _t.textSettings, diff --git a/apps/spreadsheeteditor/mobile/src/view/edit/EditCell.jsx b/apps/spreadsheeteditor/mobile/src/view/edit/EditCell.jsx index 629985711..6c5b50dce 100644 --- a/apps/spreadsheeteditor/mobile/src/view/edit/EditCell.jsx +++ b/apps/spreadsheeteditor/mobile/src/view/edit/EditCell.jsx @@ -1,12 +1,268 @@ import React, {Fragment, useState} from 'react'; import {observer, inject} from "mobx-react"; +import {f7, List, ListItem, Icon, Row, Button, Page, Navbar, Segmented, BlockTitle, NavRight, Link} 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'; const EditCell = props => { + const isAndroid = Device.android; + const { t } = useTranslation(); + const _t = t('View.Edit', {returnObjects: true}); + // const metricText = Common.Utils.Metric.getCurrentMetricName(); + const storeCellSettings = props.storeCellSettings; + const cellStyles = storeCellSettings.cellStyles; + const styleName = storeCellSettings.styleName; + console.log(styleName); + console.log(cellStyles); + console.log(storeCellSettings); + + const fontInfo = storeCellSettings.fontInfo; + console.log(fontInfo); + + const fontName = fontInfo.name || _t.textFonts; + const fontSize = fontInfo.size; + const fontColor = storeCellSettings.fontColor; + const displaySize = typeof fontSize === 'undefined' ? _t.textAuto : fontSize + ' ' + _t.textPt; + const fillColor = storeCellSettings.fillColor; + console.log(fillColor); + + const isBold = storeCellSettings.isBold; + const isItalic = storeCellSettings.isItalic; + const isUnderline = storeCellSettings.isUnderline; + + const fontColorPreview = fontColor !== 'auto' ? + : + ; + + const fillColorPreview = fillColor !== 'auto' ? + : + ; + return ( + + + + + {props.toggleBold(!isBold)}}>B + {props.toggleItalic(!isItalic)}}>I + {props.toggleUnderline(!isUnderline)}} style={{textDecoration: "underline"}}>U + + + + {!isAndroid ? + {fontColorPreview} : + fontColorPreview + } + + + {!isAndroid ? + {fillColorPreview} : + fillColorPreview + } + + + {!isAndroid ? + : null + } + + + {!isAndroid ? + : null + } + + + {!isAndroid ? + : null + } + + + + + {!isAndroid ? + : null + } + + + {_t.textCellStyles} + {cellStyles.length ? ( + + {cellStyles.map((elem, index) => { + return ( + props.onStyleClick(elem.name)}> + + ) + })} + + ) : null} ) }; -export default EditCell; \ No newline at end of file +const PageTextColorCell = props => { + const { t } = useTranslation(); + const _t = t("View.Edit", { returnObjects: true }); + // const storeFocusObjects = props.storeFocusObjects; + // const slideObject = storeFocusObjects.slideObject; + const storePalette = props.storePalette; + const storeCellSettings = props.storeCellSettings; + const customColors = storePalette.customColors; + const fontColor = storeCellSettings.fontColor; + + const changeColor = (color, effectId, effectValue) => { + if (color !== 'empty') { + if (effectId !== undefined ) { + const newColor = {color: color, effectId: effectId, effectValue: effectValue}; + props.onTextColor(newColor); + storeCellSettings.changeFontColor(newColor); + } else { + props.onTextColor(color); + storeCellSettings.changeFontColor(color); + } + } else { + // open custom color menu + props.f7router.navigate('/edit-cell-text-custom-color/'); + } + }; + + return ( + + + + + + + + + + + + ); +}; + +const PageFillColorCell = props => { + const { t } = useTranslation(); + const _t = t("View.Edit", { returnObjects: true }); + // const storeFocusObjects = props.storeFocusObjects; + // const slideObject = storeFocusObjects.slideObject; + const storePalette = props.storePalette; + const storeCellSettings = props.storeCellSettings; + const customColors = storePalette.customColors; + const fillColor = storeCellSettings.fillColor; + + const changeColor = (color, effectId, effectValue) => { + if (color !== 'empty') { + if (effectId !== undefined ) { + const newColor = {color: color, effectId: effectId, effectValue: effectValue}; + props.onFillColor(newColor); + storeCellSettings.changeFillColor(newColor); + } else { + props.onFillColor(color); + storeCellSettings.changeFillColor(color); + } + } else { + // open custom color menu + props.f7router.navigate('/edit-cell-fill-custom-color/'); + } + }; + + return ( + + + + + + + + + + + + ); +}; + +const PageCustomTextColorCell = props => { + const { t } = useTranslation(); + const _t = t('View.Edit', {returnObjects: true}); + + let fontColor = props.storeCellSettings.fontColor; + + if (typeof fontColor === 'object') { + fontColor = fontColor.color; + } + + const onAddNewColor = (colors, color) => { + props.storePalette.changeCustomColors(colors); + props.onTextColor(color); + props.storeCellSettings.changeFontColor(color); + props.f7router.back(); + }; + + return ( + + + + + ) +}; + +const PageCustomFillColorCell = props => { + const { t } = useTranslation(); + const _t = t('View.Edit', {returnObjects: true}); + + let fillColor = props.storeCellSettings.fillColor; + + if (typeof fillColor === 'object') { + fillColor = fillColor.color; + } + + const onAddNewColor = (colors, color) => { + props.storePalette.changeCustomColors(colors); + props.onFillColor(color); + props.storeCellSettings.changeFillColor(color); + props.f7router.back(); + }; + + return ( + + + + + ) +}; + +const PageEditCell = inject("storeCellSettings")(observer(EditCell)); +const TextColorCell = inject("storeCellSettings", "storePalette", "storeFocusObjects")(observer(PageTextColorCell)); +const FillColorCell = inject("storeCellSettings", "storePalette", "storeFocusObjects")(observer(PageFillColorCell)); +const CustomTextColorCell = inject("storeCellSettings", "storePalette", "storeFocusObjects")(observer(PageCustomTextColorCell)); +const CustomFillColorCell = inject("storeCellSettings", "storePalette", "storeFocusObjects")(observer(PageCustomFillColorCell)); + +export { + PageEditCell as EditCell, + TextColorCell, + FillColorCell, + CustomFillColorCell, + CustomTextColorCell +}; \ No newline at end of file From 0fea919d9c05a08d4714c44e2b37373202976475 Mon Sep 17 00:00:00 2001 From: SergeyEzhin Date: Fri, 5 Feb 2021 23:28:55 +0300 Subject: [PATCH 02/27] [SSE mobile] Maked Fonts, Text Format, Text Orientation, Border Style in Cell Settings --- apps/spreadsheeteditor/mobile/locale/en.json | 30 +- .../mobile/src/controller/edit/EditCell.jsx | 119 +++++ .../mobile/src/store/cellSettings.js | 81 +++- .../mobile/src/view/edit/Edit.jsx | 30 +- .../mobile/src/view/edit/EditCell.jsx | 437 +++++++++++++++++- 5 files changed, 676 insertions(+), 21 deletions(-) diff --git a/apps/spreadsheeteditor/mobile/locale/en.json b/apps/spreadsheeteditor/mobile/locale/en.json index 62e85c269..ec56d1b4b 100644 --- a/apps/spreadsheeteditor/mobile/locale/en.json +++ b/apps/spreadsheeteditor/mobile/locale/en.json @@ -59,7 +59,35 @@ "textAuto": "Auto", "textPt": "pt", "textFormat": "Format", - "textCellStyles": "Cell Styles" + "textCellStyles": "Cell Styles", + "textAlignLeft": "Align Left", + "textAlignCenter": "Align Center", + "textAlignRight": "Align Right", + "textJustified": "Justified", + "textAlignTop": "Align Top", + "textAlignMiddle": "Align Middle", + "textAlignBottom": "Align Bottom", + "textWrapText": "Wrap Text", + "textHorizontalText": "Horizontal Text", + "textAngleCounterclockwise": "Angle Counterclockwise", + "textAngleClockwise": "Angle Clockwise", + "textVerticalText": "Vertical Text", + "textRotateTextUp": "Rotate Text Up", + "textRotateTextDown": "Rotate Text Down", + "textNoBorder": "No Border", + "textAllBorders": "All Borders", + "textBottomBorder": "Bottom Border", + "textTopBorder": "Top Border", + "textLeftBorder": "Left Border", + "textRightBorder": "Right Border", + "textInsideBorders": "Inside Borders", + "textInsideVerticalBorder": "Inside Vertical Border", + "textInsideHorizontalBorder": "Inside Horizontal Border", + "textDiagonalUpBorder": "Diagonal Up Border", + "textDiagonalDownBorder": "Diagonal Down Border", + "textThin": "Thin", + "textMedium": "Medium", + "textThick": "Thick" } }, "Common": { diff --git a/apps/spreadsheeteditor/mobile/src/controller/edit/EditCell.jsx b/apps/spreadsheeteditor/mobile/src/controller/edit/EditCell.jsx index 6b27609a2..22c23b7ae 100644 --- a/apps/spreadsheeteditor/mobile/src/controller/edit/EditCell.jsx +++ b/apps/spreadsheeteditor/mobile/src/controller/edit/EditCell.jsx @@ -40,6 +40,117 @@ class EditCellController extends Component { api.asc_setCellBackgroundColor(color == 'transparent' ? null : Common.Utils.ThemeColor.getRgbColor(color)); } + onFontSize(curSize, isDecrement) { + const api = Common.EditorApi.get(); + let size = curSize; + + if (isDecrement) { + typeof size === 'undefined' ? api.asc_decreaseFontSize() : size = Math.max(1, --size); + } else { + typeof size === 'undefined' ? api.asc_increaseFontSize() : size = Math.min(100, ++size); + } + + if (typeof size !== 'undefined') { + api.asc_setCellFontSize(size); + } + } + + onFontClick(name) { + const api = Common.EditorApi.get(); + + if (name) { + api.asc_setCellFontName(name); + } + } + + onHAlignChange(value) { + const api = Common.EditorApi.get(); + let type; + + if (value == 'center') { + type = AscCommon.align_Center; + } else if (value == 'right') { + type = AscCommon.align_Right; + } else if (value == 'justify') { + type = AscCommon.align_Justify; + } else if (value == 'left') { + type = AscCommon.align_Left; + } + + api.asc_setCellAlign(type); + } + + onVAlignChange(value) { + const api = Common.EditorApi.get(); + let type; + + if (value == 'top') { + type = Asc.c_oAscVAlign.Top; + } else if (value == 'center') { + type = Asc.c_oAscVAlign.Center; + } else if (value == 'bottom') { + type = Asc.c_oAscVAlign.Bottom; + } + + api.asc_setCellVertAlign(type); + } + + onWrapTextChange(checked) { + const api = Common.EditorApi.get(); + console.log(checked); + api.asc_setCellTextWrap(checked); + } + + onTextOrientationChange(value) { + const api = Common.EditorApi.get(); + let angle = 0; + + switch (value) { + case 'anglecount': angle = 45; break; + case 'angleclock': angle = -45; break; + case 'vertical': angle = 255; break; + case 'rotateup': angle = 90; break; + case 'rotatedown': angle = -90; break; + } + + api.asc_setCellAngle(angle); + } + + onCellFormat(value) { + const api = Common.EditorApi.get(); + let type = decodeURIComponent(atob(value)); + api.asc_setCellFormat(type); + } + + onBorderStyle(type, borderInfo) { + const api = Common.EditorApi.get(); + let newBorders = [], + bordersWidth = borderInfo.width, + bordersColor = Common.Utils.ThemeColor.getRgbColor(borderInfo.color); + + if (type == 'inner') { + newBorders[Asc.c_oAscBorderOptions.InnerV] = new Asc.asc_CBorder(bordersWidth, bordersColor); + newBorders[Asc.c_oAscBorderOptions.InnerH] = new Asc.asc_CBorder(bordersWidth, bordersColor); + } else if (type == 'all') { + newBorders[Asc.c_oAscBorderOptions.InnerV] = new Asc.asc_CBorder(bordersWidth, bordersColor); + newBorders[Asc.c_oAscBorderOptions.InnerH] = new Asc.asc_CBorder(bordersWidth, bordersColor); + newBorders[Asc.c_oAscBorderOptions.Left] = new Asc.asc_CBorder(bordersWidth, bordersColor); + newBorders[Asc.c_oAscBorderOptions.Top] = new Asc.asc_CBorder(bordersWidth, bordersColor); + newBorders[Asc.c_oAscBorderOptions.Right] = new Asc.asc_CBorder(bordersWidth, bordersColor); + newBorders[Asc.c_oAscBorderOptions.Bottom] = new Asc.asc_CBorder(bordersWidth, bordersColor); + } else if (type == 'outer') { + newBorders[Asc.c_oAscBorderOptions.Left] = new Asc.asc_CBorder(bordersWidth, bordersColor); + newBorders[Asc.c_oAscBorderOptions.Top] = new Asc.asc_CBorder(bordersWidth, bordersColor); + newBorders[Asc.c_oAscBorderOptions.Right] = new Asc.asc_CBorder(bordersWidth, bordersColor); + newBorders[Asc.c_oAscBorderOptions.Bottom] = new Asc.asc_CBorder(bordersWidth, bordersColor); + } else if (type != 'none') { + var borderId = parseInt(type); + newBorders[borderId] = new Asc.asc_CBorder(bordersWidth, bordersColor); + } + + api.asc_setCellBorders(newBorders); + } + render () { return ( ) } diff --git a/apps/spreadsheeteditor/mobile/src/store/cellSettings.js b/apps/spreadsheeteditor/mobile/src/store/cellSettings.js index 77b609aa5..38fa63a9b 100644 --- a/apps/spreadsheeteditor/mobile/src/store/cellSettings.js +++ b/apps/spreadsheeteditor/mobile/src/store/cellSettings.js @@ -5,7 +5,14 @@ export class storeCellSettings { @observable styleSize = { width: 100, height: 50 - } + }; + + @observable borderInfo = { + color: '000000', + width: Asc.c_oAscBorderStyles.Medium + }; + + @observable borderStyle = 'none'; @observable cellStyles = []; @observable fontsArray = []; @@ -19,6 +26,11 @@ export class storeCellSettings { @observable isItalic = false; @observable isUnderline = false; + @observable hAlignStr = 'left'; + @observable vAlignStr = 'bottom'; + @observable isWrapText; + + @observable orientationStr = 'horizontal'; @action initCellSettings(cellInfo) { @@ -32,20 +44,59 @@ export class storeCellSettings { this.fillColor = clr; this.styleName = cellInfo.asc_getStyleName(); + + this.initTextOrientation(xfs); + this.initTextFormat(xfs); + } - @action initFontSettings(fontObj) { + @action initTextFormat(xfs) { + let hAlign = xfs.asc_getHorAlign(); + let vAlign = xfs.asc_getVertAlign(); + let isWrapText = xfs.asc_getWrapText(); - this.fontInfo.name = fontObj.asc_getFontName(); - this.fontInfo.size = fontObj.asc_getFontSize(); + if (vAlign == Asc.c_oAscVAlign.Top) + this.vAlignStr = 'top'; + else if (vAlign == Asc.c_oAscVAlign.Center) + this.vAlignStr = 'center'; + else if (vAlign == Asc.c_oAscVAlign.Bottom) + this.vAlignStr = 'bottom'; - this.fontInfo.color = fontObj.asc_getFontColor(); + switch (hAlign) { + case AscCommon.align_Left: this.hAlignStr = 'left'; break; + case AscCommon.align_Center: this.hAlignStr = 'center'; break; + case AscCommon.align_Right: this.hAlignStr = 'right'; break; + case AscCommon.align_Justify: this.hAlignStr = 'justify'; break; + } + + this.isWrapText = isWrapText; + } + + @action initTextOrientation(xfs) { + let textAngle = xfs.asc_getAngle(); + + switch(textAngle) { + case 45: this.orientationStr = 'anglecount'; break; + case -45: this.orientationStr = 'angleclock'; break; + case 255: this.orientationStr = 'vertical'; break; + case 90: this.orientationStr = 'rotateup'; break; + case -90: this.orientationStr = 'rotatedown'; break; + case 0: this.orientationStr = 'horizontal'; break; + } + } + + @action initFontSettings(xfs) { + + this.fontInfo.name = xfs.asc_getFontName(); + this.fontInfo.size = xfs.asc_getFontSize(); + + this.fontInfo.color = xfs.asc_getFontColor(); let clr = this.resetColor(this.fontInfo.color); this.fontColor = clr; - this.isBold = fontObj.asc_getFontBold(); - this.isItalic = fontObj.asc_getFontItalic(); - this.isUnderline = fontObj.asc_getFontUnderline(); + this.isBold = xfs.asc_getFontBold(); + this.isItalic = xfs.asc_getFontItalic(); + this.isUnderline = xfs.asc_getFontUnderline(); } @action initEditorFonts(fonts, select) { @@ -74,8 +125,6 @@ export class storeCellSettings { } @action changeFontColor(color) { - // this.fontInfo.color = fontObj.asc_getFontColor(); - // let clr = this.resetColor(this.fontInfo.color); this.fontColor = color; } @@ -83,6 +132,18 @@ export class storeCellSettings { this.fillColor = color; } + @action changeBorderColor(color) { + this.borderInfo.color = color; + } + + @action changeBorderSize(size) { + this.borderInfo.width = size; + } + + @action changeBorderStyle(type) { + this.borderStyle = type; + } + resetColor(color) { let clr = 'transparent'; diff --git a/apps/spreadsheeteditor/mobile/src/view/edit/Edit.jsx b/apps/spreadsheeteditor/mobile/src/view/edit/Edit.jsx index 730e725b7..f8be60d95 100644 --- a/apps/spreadsheeteditor/mobile/src/view/edit/Edit.jsx +++ b/apps/spreadsheeteditor/mobile/src/view/edit/Edit.jsx @@ -11,7 +11,7 @@ import EditImageController from "../../controller/edit/EditImage"; import { PageShapeStyle, PageShapeStyleNoFill, PageReplaceContainer, PageReorderContainer, PageShapeBorderColor, PageShapeCustomBorderColor, PageShapeCustomFillColor } from './EditShape'; import { PageImageReplace, PageImageReorder, PageLinkSettings } from './EditImage'; -import { TextColorCell, FillColorCell, CustomTextColorCell, CustomFillColorCell } from './EditCell'; +import { TextColorCell, FillColorCell, CustomTextColorCell, CustomFillColorCell, FontsCell, TextFormatCell, TextOrientationCell, BorderStyleCell, BorderColorCell, CustomBorderColorCell, BorderSizeCell } from './EditCell'; const routes = [ @@ -78,6 +78,34 @@ const routes = [ { path: '/edit-cell-fill-custom-color/', component: CustomFillColorCell + }, + { + path: '/edit-cell-text-fonts/', + component: FontsCell + }, + { + path: '/edit-cell-text-format/', + component: TextFormatCell + }, + { + path: '/edit-cell-text-orientation/', + component: TextOrientationCell + }, + { + path: '/edit-cell-border-style/', + component: BorderStyleCell + }, + { + path: '/edit-border-color-cell/', + component: BorderColorCell + }, + { + path: '/edit-border-custom-color-cell/', + component: CustomBorderColorCell + }, + { + path: '/edit-border-size-cell/', + component: BorderSizeCell } ]; diff --git a/apps/spreadsheeteditor/mobile/src/view/edit/EditCell.jsx b/apps/spreadsheeteditor/mobile/src/view/edit/EditCell.jsx index 6c5b50dce..a0ce26965 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} from 'react'; import {observer, inject} from "mobx-react"; -import {f7, List, ListItem, Icon, Row, Button, Page, Navbar, Segmented, BlockTitle, NavRight, Link} from 'framework7-react'; +import {f7, List, ListItem, Icon, Row, Button, Page, Navbar, Segmented, BlockTitle, NavRight, Link, 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'; @@ -43,8 +43,8 @@ const EditCell = props => { @@ -70,21 +70,23 @@ const EditCell = props => { } {!isAndroid ? : null } {!isAndroid ? : null } {!isAndroid ? : null @@ -117,6 +119,74 @@ const EditCell = props => { ) }; +const PageFontsCell = props => { + const isAndroid = Device.android; + const { t } = useTranslation(); + const _t = t('View.Edit', {returnObjects: true}); + const storeCellSettings = props.storeCellSettings; + const fontInfo = storeCellSettings.fontInfo; + const size = fontInfo.size; + const displaySize = typeof size === 'undefined' ? _t.textAuto : size + ' ' + _t.textPt; + const curFontName = fontInfo.name; + const fonts = storeCellSettings.fontsArray; + + const [vlFonts, setVlFonts] = useState({ + vlData: { + items: [], + } + }); + + const renderExternal = (vl, vlData) => { + setVlFonts((prevState) => { + let fonts = [...prevState.vlData.items]; + fonts.splice(vlData.fromIndex, vlData.toIndex, ...vlData.items); + return {vlData: { + items: fonts, + }}; + }); + }; + + return ( + + + + + {!isAndroid &&
{displaySize}
} +
+ + + {isAndroid && } + + +
+
+
+ {_t.textFonts} + +
    + {vlFonts.vlData.items.map((item, index) => ( + {props.onFontClick(item.name)}} + > + ))} +
+
+
+ ); +}; + const PageTextColorCell = props => { const { t } = useTranslation(); const _t = t("View.Edit", { returnObjects: true }); @@ -145,7 +215,7 @@ const PageTextColorCell = props => { return ( - + @@ -188,7 +258,7 @@ const PageFillColorCell = props => { return ( - + @@ -253,16 +323,365 @@ const PageCustomFillColorCell = props => { ) }; +const PageTextFormatCell = props => { + const { t } = useTranslation(); + const _t = t('View.Edit', {returnObjects: true}); + const isAndroid = Device.android; + const storeCellSettings = props.storeCellSettings; + const hAlignStr = storeCellSettings.hAlignStr; + const vAlignStr = storeCellSettings.vAlignStr; + const isWrapText = storeCellSettings.isWrapText; + + return ( + + + + { + props.onHAlignChange('left'); + }}> + {!isAndroid ? + : null + } + + { + props.onHAlignChange('center'); + }}> + {!isAndroid ? + : null + } + + { + props.onHAlignChange('right'); + }}> + {!isAndroid ? + : null + } + + { + props.onHAlignChange('justify'); + }}> + {!isAndroid ? + : null + } + + + + { + props.onVAlignChange('top'); + }}> + {!isAndroid ? : null} + + { + props.onVAlignChange('center'); + }}> + {!isAndroid ? : null} + + { + props.onVAlignChange('bottom'); + }}> + {!isAndroid ? : null} + + + + + {!isAndroid ? : null} + {props.onWrapTextChange(!isWrapText)}} /> + + + + ) +}; + +const PageTextOrientationCell = props => { + const { t } = useTranslation(); + const _t = t('View.Edit', {returnObjects: true}); + const isAndroid = Device.android; + const storeCellSettings = props.storeCellSettings; + const orientationStr = storeCellSettings.orientationStr; + + return ( + + + + : null} onChange={() => { + props.onTextOrientationChange('horizontal'); + }}> + {!isAndroid ? + : null + } + + : null} onChange={() => { + props.onTextOrientationChange('anglecount'); + }}> + {!isAndroid ? + : null + } + + : null} onChange={() => { + props.onTextOrientationChange('angleclock'); + }}> + {!isAndroid ? + : null + } + + : null} onChange={() => { + props.onTextOrientationChange('vertical'); + }}> + {!isAndroid ? + : null + } + + : null} onChange={() => { + props.onTextOrientationChange('rotateup'); + }}> + {!isAndroid ? + : null + } + + : null} onChange={() => { + props.onTextOrientationChange('rotatedown'); + }}> + {!isAndroid ? + : null + } + + + + ) +}; + +const PageBorderStyleCell = props => { + const { t } = useTranslation(); + const _t = t('View.Edit', {returnObjects: true}); + const storeCellSettings = props.storeCellSettings; + const borderInfo = storeCellSettings.borderInfo; + + const borderSizes = { + 7: `${_t.textThin}`, + 12: `${_t.textMedium}`, + 13: `${_t.textThick}` + }; + + // const borderSizes = storeCellSettings.borderSizes; + + return ( + + + + { + storeCellSettings.changeBorderStyle('none'); + props.onBorderStyle('none', borderInfo); + }}> + + + { + storeCellSettings.changeBorderStyle('all'); + props.onBorderStyle('all', borderInfo); + }}> + + + { + storeCellSettings.changeBorderStyle('2'); + props.onBorderStyle('2', borderInfo); + }}> + + + { + storeCellSettings.changeBorderStyle('0'); + props.onBorderStyle('0', borderInfo); + }}> + + + { + storeCellSettings.changeBorderStyle('3'); + props.onBorderStyle('3', borderInfo); + }}> + + + { + storeCellSettings.changeBorderStyle('1'); + props.onBorderStyle('1', borderInfo); + }}> + + + { + storeCellSettings.changeBorderStyle('inner'); + props.onBorderStyle('inner', borderInfo); + }}> + + + { + storeCellSettings.changeBorderStyle('6'); + props.onBorderStyle('6', borderInfo); + }}> + + + { + storeCellSettings.changeBorderStyle('7'); + props.onBorderStyle('7', borderInfo); + }}> + + + { + storeCellSettings.changeBorderStyle('5'); + props.onBorderStyle('5', borderInfo); + }}> + + + { + storeCellSettings.changeBorderStyle('4'); + props.onBorderStyle('4', borderInfo); + }}> + + + + + + + + + + + + ) +}; + +const PageBorderColorCell = props => { + const { t } = useTranslation(); + const _t = t("View.Edit", { returnObjects: true }); + const storePalette = props.storePalette; + const storeCellSettings = props.storeCellSettings; + const borderInfo = storeCellSettings.borderInfo; + const borderColor = typeof borderInfo.color === "object" ? borderInfo.color.color : borderInfo.color; + const borderStyle = storeCellSettings.borderStyle; + const customColors = storePalette.customColors; + + const changeColor = (color, effectId, effectValue) => { + if (color !== 'empty') { + if (effectId !== undefined ) { + const newColor = {color: color, effectId: effectId, effectValue: effectValue}; + storeCellSettings.changeBorderColor(newColor); + props.onBorderStyle(borderStyle, borderInfo); + } else { + storeCellSettings.changeBorderColor(color); + props.onBorderStyle(borderStyle, borderInfo); + } + } else { + // open custom color menu + props.f7router.navigate('/edit-border-custom-color-cell/'); + } + }; + + return ( + + + + + + + + + + + + ); +}; + +const PageCustomBorderColorCell = props => { + const { t } = useTranslation(); + const _t = t('View.Edit', {returnObjects: true}); + const storeCellSettings = props.storeCellSettings; + const storePalette = props.storePalette; + const borderInfo = storeCellSettings.borderInfo; + const borderColor = typeof borderInfo.color === "object" ? borderInfo.color.color : borderInfo.color; + const borderStyle = storeCellSettings.borderStyle; + + const onAddNewColor = (colors, color) => { + storePalette.changeCustomColors(colors); + storeCellSettings.changeBorderColor(color); + props.onBorderStyle(borderStyle, borderInfo); + props.f7router.back(); + }; + + return ( + + + + + ) +}; + +const PageBorderSizeCell = props => { + const { t } = useTranslation(); + const _t = t('View.Edit', {returnObjects: true}); + const storeCellSettings = props.storeCellSettings; + const borderInfo = storeCellSettings.borderInfo; + const borderStyle = storeCellSettings.borderStyle; + // const borderSizes = storeCellSettings.borderSizes; + + const borderSizes = { + 7: `${_t.textThin}`, + 12: `${_t.textMedium}`, + 13: `${_t.textThick}` + } + + return ( + + + + {Object.keys(borderSizes).map(key => { + return ( + { + storeCellSettings.changeBorderSize(+key); + props.onBorderStyle(borderStyle, borderInfo); + }}> + ) + })} + + + ) +} + + const PageEditCell = inject("storeCellSettings")(observer(EditCell)); const TextColorCell = inject("storeCellSettings", "storePalette", "storeFocusObjects")(observer(PageTextColorCell)); 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 BorderColorCell = inject("storeCellSettings", "storePalette")(observer(PageBorderColorCell)); +const CustomBorderColorCell = inject("storeCellSettings", "storePalette")(observer(PageCustomBorderColorCell)); +const BorderSizeCell = inject("storeCellSettings")(observer(PageBorderSizeCell)); export { PageEditCell as EditCell, TextColorCell, FillColorCell, CustomFillColorCell, - CustomTextColorCell + CustomTextColorCell, + FontsCell, + TextFormatCell, + TextOrientationCell, + BorderStyleCell, + BorderColorCell, + CustomBorderColorCell, + BorderSizeCell }; \ No newline at end of file From da273fd8f8b89fc86f806a27a5f6a753edf3580c Mon Sep 17 00:00:00 2001 From: Julia Radzhabova Date: Fri, 11 Sep 2020 16:34:29 +0300 Subject: [PATCH 03/27] Change config parameter documentType: it must take one of the values word/cell/slide (deprecate text/spreadsheet/presentation values). --- apps/api/documents/api.js | 29 ++++++++++++------- apps/api/documents/index.html.desktop | 2 +- .../lib/controller/ExternalDiagramEditor.js | 2 +- .../lib/controller/ExternalMergeEditor.js | 2 +- 4 files changed, 22 insertions(+), 13 deletions(-) diff --git a/apps/api/documents/api.js b/apps/api/documents/api.js index abe0c0325..abf79f0c5 100644 --- a/apps/api/documents/api.js +++ b/apps/api/documents/api.js @@ -14,7 +14,7 @@ type: 'desktop or mobile', width: '100% by default', height: '100% by default', - documentType: 'text' | 'spreadsheet' | 'presentation', + documentType: 'word' | 'cell' | 'slide',// deprecate 'text' | 'spreadsheet' | 'presentation', document: { title: 'document title', url: 'document url' @@ -163,7 +163,7 @@ type: 'embedded', width: '100% by default', height: '100% by default', - documentType: 'text' | 'spreadsheet' | 'presentation', + documentType: 'word' | 'cell' | 'slide',// deprecate 'text' | 'spreadsheet' | 'presentation', document: { title: 'document title', url: 'document url', @@ -334,9 +334,15 @@ 'text': 'docx', 'text-pdf': 'pdf', 'spreadsheet': 'xlsx', - 'presentation': 'pptx' + 'presentation': 'pptx', + 'word': 'docx', + 'cell': 'xlsx', + 'slide': 'pptx' }, app; + if (_config.documentType=='text' || _config.documentType=='spreadsheet' ||_config.documentType=='presentation') + console.warn("The \"documentType\" parameter for the config object must take one of the values word/cell/slide."); + if (typeof _config.documentType === 'string' && _config.documentType != '') { app = appMap[_config.documentType.toLowerCase()]; if (!app) { @@ -355,9 +361,9 @@ window.alert("The \"document.fileType\" parameter for the config object is invalid. Please correct it."); return false; } else if (typeof _config.documentType !== 'string' || _config.documentType == ''){ - if (typeof type[1] === 'string') _config.documentType = 'spreadsheet'; else - if (typeof type[2] === 'string') _config.documentType = 'presentation'; else - if (typeof type[3] === 'string') _config.documentType = 'text'; + if (typeof type[1] === 'string') _config.documentType = 'cell'; else + if (typeof type[2] === 'string') _config.documentType = 'slide'; else + if (typeof type[3] === 'string') _config.documentType = 'word'; } } @@ -737,9 +743,12 @@ 'text': 'documenteditor', 'text-pdf': 'documenteditor', 'spreadsheet': 'spreadsheeteditor', - 'presentation': 'presentationeditor' + 'presentation': 'presentationeditor', + 'word': 'documenteditor', + 'cell': 'spreadsheeteditor', + 'slide': 'presentationeditor' }, - app = appMap['text']; + app = appMap['word']; if (typeof config.documentType === 'string') { app = appMap[config.documentType.toLowerCase()]; @@ -748,8 +757,8 @@ var type = /^(?:(xls|xlsx|ods|csv|xlst|xlsy|gsheet|xlsm|xlt|xltm|xltx|fods|ots)|(pps|ppsx|ppt|pptx|odp|pptt|ppty|gslides|pot|potm|potx|ppsm|pptm|fodp|otp))$/ .exec(config.document.fileType); if (type) { - if (typeof type[1] === 'string') app = appMap['spreadsheet']; else - if (typeof type[2] === 'string') app = appMap['presentation']; + if (typeof type[1] === 'string') app = appMap['cell']; else + if (typeof type[2] === 'string') app = appMap['slide']; } } diff --git a/apps/api/documents/index.html.desktop b/apps/api/documents/index.html.desktop index 8f6aea8a6..531e301c3 100644 --- a/apps/api/documents/index.html.desktop +++ b/apps/api/documents/index.html.desktop @@ -53,7 +53,7 @@ type: urlParams['type'], width: '100%', height: '100%', - documentType: urlParams['doctype'] || 'text', + documentType: urlParams['doctype'] || 'word', document: doc, editorConfig: cfg, events: { diff --git a/apps/common/main/lib/controller/ExternalDiagramEditor.js b/apps/common/main/lib/controller/ExternalDiagramEditor.js index de9662b41..d74983b0b 100644 --- a/apps/common/main/lib/controller/ExternalDiagramEditor.js +++ b/apps/common/main/lib/controller/ExternalDiagramEditor.js @@ -59,7 +59,7 @@ define([ externalEditor = new DocsAPI.DocEditor('id-diagram-editor-placeholder', { width : '100%', height : '100%', - documentType: 'spreadsheet', + documentType: 'cell', document : { url : '_chart_', permissions : { diff --git a/apps/common/main/lib/controller/ExternalMergeEditor.js b/apps/common/main/lib/controller/ExternalMergeEditor.js index d9ac85562..69e659c22 100644 --- a/apps/common/main/lib/controller/ExternalMergeEditor.js +++ b/apps/common/main/lib/controller/ExternalMergeEditor.js @@ -58,7 +58,7 @@ define([ externalEditor = new DocsAPI.DocEditor('id-merge-editor-placeholder', { width : '100%', height : '100%', - documentType: 'spreadsheet', + documentType: 'cell', document : { url : '_chart_', permissions : { From 7981bd1b431800a0761adcbe5d8bb2fc44c6d0c2 Mon Sep 17 00:00:00 2001 From: SergeyEzhin Date: Tue, 9 Feb 2021 01:10:06 +0300 Subject: [PATCH 04/27] [SSE mobile] Almost maked Cell Settings --- apps/spreadsheeteditor/mobile/locale/en.json | 17 +- .../mobile/src/store/cellSettings.js | 20 +- .../mobile/src/view/edit/Edit.jsx | 22 +- .../mobile/src/view/edit/EditCell.jsx | 230 ++++++++++++++++-- 4 files changed, 258 insertions(+), 31 deletions(-) diff --git a/apps/spreadsheeteditor/mobile/locale/en.json b/apps/spreadsheeteditor/mobile/locale/en.json index 02e45e796..d6f456d25 100644 --- a/apps/spreadsheeteditor/mobile/locale/en.json +++ b/apps/spreadsheeteditor/mobile/locale/en.json @@ -122,7 +122,22 @@ "textDiagonalDownBorder": "Diagonal Down Border", "textThin": "Thin", "textMedium": "Medium", - "textThick": "Thick" + "textThick": "Thick", + "textGeneral": "General", + "textNumber": "Number", + "textInteger": "Integer", + "textScientific": "Scientific", + "textAccounting": "Accounting", + "textCurrency": "Currency", + "textDate": "Date", + "textTime": "Time", + "textPercentage": "Percentage", + "textText": "Text", + "textDollar": "Dollar", + "textEuro": "Euro", + "textPound": "Pound", + "textRouble": "Rouble", + "textYen": "Yen" } }, "Common": { diff --git a/apps/spreadsheeteditor/mobile/src/store/cellSettings.js b/apps/spreadsheeteditor/mobile/src/store/cellSettings.js index 38fa63a9b..ac880feb5 100644 --- a/apps/spreadsheeteditor/mobile/src/store/cellSettings.js +++ b/apps/spreadsheeteditor/mobile/src/store/cellSettings.js @@ -40,6 +40,7 @@ export class storeCellSettings { let color = xfs.asc_getFillColor(); console.log(color); + let clr = this.resetColor(color); this.fillColor = clr; @@ -147,14 +148,19 @@ export class storeCellSettings { resetColor(color) { let clr = 'transparent'; - if (color) { - if (color.get_type() == Asc.c_oAscColor.COLOR_TYPE_SCHEME) { - clr = { - color: Common.Utils.ThemeColor.getHexColor(color.get_r(), color.get_g(), color.get_b()), - effectValue: color.get_value() - } + if(color) { + if (color.get_auto()) { + // return clr; + clr = 'auto' } else { - clr = Common.Utils.ThemeColor.getHexColor(color.get_r(), color.get_g(), color.get_b()); + if (color.get_type() == Asc.c_oAscColor.COLOR_TYPE_SCHEME) { + clr = { + color: Common.Utils.ThemeColor.getHexColor(color.get_r(), color.get_g(), color.get_b()), + effectValue: color.get_value() + } + } else { + clr = Common.Utils.ThemeColor.getHexColor(color.get_r(), color.get_g(), color.get_b()); + } } } diff --git a/apps/spreadsheeteditor/mobile/src/view/edit/Edit.jsx b/apps/spreadsheeteditor/mobile/src/view/edit/Edit.jsx index f8be60d95..135e6459e 100644 --- a/apps/spreadsheeteditor/mobile/src/view/edit/Edit.jsx +++ b/apps/spreadsheeteditor/mobile/src/view/edit/Edit.jsx @@ -11,7 +11,7 @@ import EditImageController from "../../controller/edit/EditImage"; 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 } from './EditCell'; +import { TextColorCell, FillColorCell, CustomTextColorCell, CustomFillColorCell, FontsCell, TextFormatCell, TextOrientationCell, BorderStyleCell, BorderColorCell, CustomBorderColorCell, BorderSizeCell, PageFormatCell, PageAccountingFormatCell, PageCurrencyFormatCell, PageDateFormatCell, PageTimeFormatCell } from './EditCell'; const routes = [ @@ -106,6 +106,26 @@ const routes = [ { path: '/edit-border-size-cell/', component: BorderSizeCell + }, + { + path: '/edit-format-cell/', + component: PageFormatCell + }, + { + path: '/edit-accounting-format-cell/', + component: PageAccountingFormatCell + }, + { + path: '/edit-currency-format-cell/', + component: PageCurrencyFormatCell + }, + { + path: '/edit-date-format-cell/', + component: PageDateFormatCell + }, + { + path: '/edit-time-format-cell/', + component: PageTimeFormatCell } ]; diff --git a/apps/spreadsheeteditor/mobile/src/view/edit/EditCell.jsx b/apps/spreadsheeteditor/mobile/src/view/edit/EditCell.jsx index a0ce26965..b6aa3093f 100644 --- a/apps/spreadsheeteditor/mobile/src/view/edit/EditCell.jsx +++ b/apps/spreadsheeteditor/mobile/src/view/edit/EditCell.jsx @@ -13,13 +13,10 @@ const EditCell = props => { const storeCellSettings = props.storeCellSettings; const cellStyles = storeCellSettings.cellStyles; const styleName = storeCellSettings.styleName; - console.log(styleName); - console.log(cellStyles); + console.log(storeCellSettings); const fontInfo = storeCellSettings.fontInfo; - console.log(fontInfo); - const fontName = fontInfo.name || _t.textFonts; const fontSize = fontInfo.size; const fontColor = storeCellSettings.fontColor; @@ -33,11 +30,11 @@ const EditCell = props => { const fontColorPreview = fontColor !== 'auto' ? : - ; + ; const fillColorPreview = fillColor !== 'auto' ? : - ; + ; return ( @@ -94,8 +91,8 @@ const EditCell = props => {
- {!isAndroid ? : null @@ -109,7 +106,6 @@ const EditCell = props => { return ( props.onStyleClick(elem.name)}> - ) })} @@ -195,17 +191,21 @@ const PageTextColorCell = props => { const storePalette = props.storePalette; const storeCellSettings = props.storeCellSettings; const customColors = storePalette.customColors; - const fontColor = storeCellSettings.fontColor; + let fontColor = storeCellSettings.fontColor; + + if(typeof fontColor === 'object') { + fontColor = storeCellSettings.fontColor.color; + } const changeColor = (color, effectId, effectValue) => { if (color !== 'empty') { if (effectId !== undefined ) { const newColor = {color: color, effectId: effectId, effectValue: effectValue}; - props.onTextColor(newColor); storeCellSettings.changeFontColor(newColor); + props.onTextColor(newColor); } else { - props.onTextColor(color); storeCellSettings.changeFontColor(color); + props.onTextColor(color); } } else { // open custom color menu @@ -220,7 +220,7 @@ const PageTextColorCell = props => { - + { const storePalette = props.storePalette; const storeCellSettings = props.storeCellSettings; const customColors = storePalette.customColors; - const fillColor = storeCellSettings.fillColor; + let fillColor = storeCellSettings.fillColor; + + if(typeof fillColor === 'object') { + fillColor = storeCellSettings.fillColor.color; + } + + console.log(fillColor); const changeColor = (color, effectId, effectValue) => { if (color !== 'empty') { if (effectId !== undefined ) { const newColor = {color: color, effectId: effectId, effectValue: effectValue}; - props.onFillColor(newColor); storeCellSettings.changeFillColor(newColor); + props.onFillColor(newColor); } else { - props.onFillColor(color); storeCellSettings.changeFillColor(color); + props.onFillColor(color); } } else { // open custom color menu @@ -468,8 +474,6 @@ const PageBorderStyleCell = props => { 13: `${_t.textThick}` }; - // const borderSizes = storeCellSettings.borderSizes; - return ( @@ -565,10 +569,14 @@ const PageBorderColorCell = props => { const storePalette = props.storePalette; const storeCellSettings = props.storeCellSettings; const borderInfo = storeCellSettings.borderInfo; - const borderColor = typeof borderInfo.color === "object" ? borderInfo.color.color : borderInfo.color; + let borderColor = borderInfo.color; const borderStyle = storeCellSettings.borderStyle; const customColors = storePalette.customColors; + if(typeof borderColor === "object") { + borderColor = borderInfo.color.color; + } + const changeColor = (color, effectId, effectValue) => { if (color !== 'empty') { if (effectId !== undefined ) { @@ -592,7 +600,7 @@ const PageBorderColorCell = props => { - + { const storeCellSettings = props.storeCellSettings; const storePalette = props.storePalette; const borderInfo = storeCellSettings.borderInfo; - const borderColor = typeof borderInfo.color === "object" ? borderInfo.color.color : borderInfo.color; + let borderColor = borderInfo.color; + + if(typeof borderColor === "object") { + borderColor = borderInfo.color.color; + } + const borderStyle = storeCellSettings.borderStyle; const onAddNewColor = (colors, color) => { @@ -657,6 +670,174 @@ const PageBorderSizeCell = props => { ) } +const PageFormatCell = props => { + const { t } = useTranslation(); + const _t = t('View.Edit', {returnObjects: true}); + + return ( + + + + props.onCellFormat('R2VuZXJhbA==')}> + + + props.onCellFormat('MC4wMA==')}> + + + props.onCellFormat('JTIzMA==')}> + + + props.onCellFormat('MC4wMEUlMkIwMA==')}> + + + + + + + + + + + + + + + props.onCellFormat('MC4wMCUyNQ==')}> + + + props.onCellFormat('JTQw')}> + + + + + ) +} + +const PageAccountingFormatCell = props => { + const { t } = useTranslation(); + const _t = t('View.Edit', {returnObjects: true}); + + return ( + + + + props.onCellFormat('XyglMjQqJTIwJTIzJTJDJTIzJTIzMC4wMF8pJTNCXyglMjQqJTIwKCUyMyUyQyUyMyUyMzAuMDApJTNCXyglMjQqJTIwJTIyLSUyMiUzRiUzRl8pJTNCXyglNDBfKQ==')}> + + props.onCellFormat('XyglRTIlODIlQUMqJTIwJTIzJTJDJTIzJTIzMC4wMF8pJTNCXyglRTIlODIlQUMqJTIwKCUyMyUyQyUyMyUyMzAuMDApJTNCXyglRTIlODIlQUMqJTIwJTIyLSUyMiUzRiUzRl8pJTNCXyglNDBfKQ==')}> + + props.onCellFormat('XyglQzIlQTMqJTIwJTIzJTJDJTIzJTIzMC4wMF8pJTNCXyglQzIlQTMqJTIwKCUyMyUyQyUyMyUyMzAuMDApJTNCXyglQzIlQTMqJTIwJTIyLSUyMiUzRiUzRl8pJTNCXyglNDBfKQ==')}> + + props.onCellFormat('Xy0qJTIwJTIzJTJDJTIzJTIzMC4wMCU1QiUyNCVEMSU4MC4tNDE5JTVEXy0lM0ItKiUyMCUyMyUyQyUyMyUyMzAuMDAlNUIlMjQlRDElODAuLTQxOSU1RF8tJTNCXy0qJTIwJTIyLSUyMiUzRiUzRiU1QiUyNCVEMSU4MC4tNDE5JTVEXy0lM0JfLSU0MF8t')}> + + props.onCellFormat('XyglQzIlQTUqJTIwJTIzJTJDJTIzJTIzMC4wMF8pJTNCXyglQzIlQTUqJTIwKCUyMyUyQyUyMyUyMzAuMDApJTNCXyglQzIlQTUqJTIwJTIyLSUyMiUzRiUzRl8pJTNCXyglNDBfKQ==')}> + + + + ) +} + +const PageCurrencyFormatCell = props => { + const { t } = useTranslation(); + const _t = t('View.Edit', {returnObjects: true}); + + return ( + + + + props.onCellFormat('JTI0JTIzJTJDJTIzJTIzMC4wMA==')}> + + props.onCellFormat('JUUyJTgyJUFDJTIzJTJDJTIzJTIzMC4wMA==')}> + + props.onCellFormat('JUMyJUEzJTIzJTJDJTIzJTIzMC4wMA==')}> + + props.onCellFormat('JTIzJTJDJTIzJTIzMC4wMCUyMiVEMSU4MC4lMjI=')}> + + props.onCellFormat('JUMyJUE1JTIzJTJDJTIzJTIzMC4wMA==')}> + + + + ) +} + +const PageDateFormatCell = props => { + const { t } = useTranslation(); + const _t = t('View.Edit', {returnObjects: true}); + + return ( + + + + props.onCellFormat('TU0tZGQteXk=')}> + props.onCellFormat('TU0tZGQteXl5eQ==')}> + + props.onCellFormat('ZGQtTU0teXk=')}> + + props.onCellFormat('ZGQtTU0teXl5eQ==')}> + + props.onCellFormat('ZGQtTU1NLXl5eXk=')}> + + props.onCellFormat('ZGQtTU1N')}> + + props.onCellFormat('TU1NLXl5')}> + + + + ) +} + +const PageTimeFormatCell = props => { + const { t } = useTranslation(); + const _t = t('View.Edit', {returnObjects: true}); + + return ( + + + + props.onCellFormat('aCUzQW1tJTNCJTQw')}> + + props.onCellFormat('aCUzQW1tJTNBc3MlM0IlNDA=')}> + + props.onCellFormat('aCUzQW1tJTIwQU0lMkZQTSUzQiU0MA==')}> + + props.onCellFormat('aCUzQW1tJTNBc3MlMjBBTSUyRlBNJTNCJTQw')}> + + props.onCellFormat('JTVCaCU1RCUzQW1tJTNBc3MlM0IlNDA=')}> + + + + ) +} + const PageEditCell = inject("storeCellSettings")(observer(EditCell)); const TextColorCell = inject("storeCellSettings", "storePalette", "storeFocusObjects")(observer(PageTextColorCell)); @@ -683,5 +864,10 @@ export { BorderStyleCell, BorderColorCell, CustomBorderColorCell, - BorderSizeCell + BorderSizeCell, + PageFormatCell, + PageAccountingFormatCell, + PageCurrencyFormatCell, + PageDateFormatCell, + PageTimeFormatCell }; \ No newline at end of file From 1456990fa9819473b3c4e1de03276a9b0a68f800 Mon Sep 17 00:00:00 2001 From: SergeyEzhin Date: Tue, 9 Feb 2021 15:24:35 +0300 Subject: [PATCH 05/27] [SSE mobile] Added Cell Settings --- .../mobile/src/controller/Main.jsx | 4 +-- .../mobile/src/store/cellSettings.js | 5 ++- .../mobile/src/view/edit/EditCell.jsx | 32 ++++--------------- 3 files changed, 11 insertions(+), 30 deletions(-) diff --git a/apps/spreadsheeteditor/mobile/src/controller/Main.jsx b/apps/spreadsheeteditor/mobile/src/controller/Main.jsx index 50cf44d52..18df8fa53 100644 --- a/apps/spreadsheeteditor/mobile/src/controller/Main.jsx +++ b/apps/spreadsheeteditor/mobile/src/controller/Main.jsx @@ -209,7 +209,7 @@ class MainController extends Component { const styleSize = storeCellSettings.styleSize; this.api.asc_registerCallback('asc_onSelectionChanged', cellInfo => { - console.log(cellInfo); + // console.log(cellInfo); storeFocusObjects.resetCellInfo(cellInfo); storeCellSettings.initCellSettings(cellInfo); let selectedObjects = Common.EditorApi.get().asc_getGraphicObjectProps(); @@ -227,7 +227,7 @@ class MainController extends Component { }); this.api.asc_registerCallback('asc_onEditorSelectionChanged', fontObj => { - console.log(fontObj) + // console.log(fontObj) storeCellSettings.initFontInfo(fontObj); }); diff --git a/apps/spreadsheeteditor/mobile/src/store/cellSettings.js b/apps/spreadsheeteditor/mobile/src/store/cellSettings.js index ac880feb5..924699fee 100644 --- a/apps/spreadsheeteditor/mobile/src/store/cellSettings.js +++ b/apps/spreadsheeteditor/mobile/src/store/cellSettings.js @@ -39,9 +39,9 @@ export class storeCellSettings { this.initFontSettings(xfs); let color = xfs.asc_getFillColor(); - console.log(color); + // console.log(color); - let clr = this.resetColor(color); + let clr = color.get_auto() ? 'transparent' : this.resetColor(color); this.fillColor = clr; this.styleName = cellInfo.asc_getStyleName(); @@ -150,7 +150,6 @@ export class storeCellSettings { if(color) { if (color.get_auto()) { - // return clr; clr = 'auto' } else { if (color.get_type() == Asc.c_oAscColor.COLOR_TYPE_SCHEME) { diff --git a/apps/spreadsheeteditor/mobile/src/view/edit/EditCell.jsx b/apps/spreadsheeteditor/mobile/src/view/edit/EditCell.jsx index b6aa3093f..ad0e74b9a 100644 --- a/apps/spreadsheeteditor/mobile/src/view/edit/EditCell.jsx +++ b/apps/spreadsheeteditor/mobile/src/view/edit/EditCell.jsx @@ -14,7 +14,7 @@ const EditCell = props => { const cellStyles = storeCellSettings.cellStyles; const styleName = storeCellSettings.styleName; - console.log(storeCellSettings); + // console.log(storeCellSettings); const fontInfo = storeCellSettings.fontInfo; const fontName = fontInfo.name || _t.textFonts; @@ -22,7 +22,8 @@ const EditCell = props => { const fontColor = storeCellSettings.fontColor; const displaySize = typeof fontSize === 'undefined' ? _t.textAuto : fontSize + ' ' + _t.textPt; const fillColor = storeCellSettings.fillColor; - console.log(fillColor); + + // console.log(fillColor); const isBold = storeCellSettings.isBold; const isItalic = storeCellSettings.isItalic; @@ -32,7 +33,7 @@ const EditCell = props => { : ; - const fillColorPreview = fillColor !== 'auto' ? + const fillColorPreview = fillColor !== 'transparent' ? : ; @@ -186,17 +187,11 @@ const PageFontsCell = props => { const PageTextColorCell = props => { const { t } = useTranslation(); const _t = t("View.Edit", { returnObjects: true }); - // const storeFocusObjects = props.storeFocusObjects; - // const slideObject = storeFocusObjects.slideObject; const storePalette = props.storePalette; const storeCellSettings = props.storeCellSettings; const customColors = storePalette.customColors; - let fontColor = storeCellSettings.fontColor; + const fontColor = storeCellSettings.fontColor; - if(typeof fontColor === 'object') { - fontColor = storeCellSettings.fontColor.color; - } - const changeColor = (color, effectId, effectValue) => { if (color !== 'empty') { if (effectId !== undefined ) { @@ -233,18 +228,10 @@ const PageTextColorCell = props => { const PageFillColorCell = props => { const { t } = useTranslation(); const _t = t("View.Edit", { returnObjects: true }); - // const storeFocusObjects = props.storeFocusObjects; - // const slideObject = storeFocusObjects.slideObject; const storePalette = props.storePalette; const storeCellSettings = props.storeCellSettings; const customColors = storePalette.customColors; - let fillColor = storeCellSettings.fillColor; - - if(typeof fillColor === 'object') { - fillColor = storeCellSettings.fillColor.color; - } - - console.log(fillColor); + const fillColor = storeCellSettings.fillColor; const changeColor = (color, effectId, effectValue) => { if (color !== 'empty') { @@ -569,14 +556,10 @@ const PageBorderColorCell = props => { const storePalette = props.storePalette; const storeCellSettings = props.storeCellSettings; const borderInfo = storeCellSettings.borderInfo; - let borderColor = borderInfo.color; + const borderColor = borderInfo.color; const borderStyle = storeCellSettings.borderStyle; const customColors = storePalette.customColors; - if(typeof borderColor === "object") { - borderColor = borderInfo.color.color; - } - const changeColor = (color, effectId, effectValue) => { if (color !== 'empty') { if (effectId !== undefined ) { @@ -645,7 +628,6 @@ const PageBorderSizeCell = props => { const storeCellSettings = props.storeCellSettings; const borderInfo = storeCellSettings.borderInfo; const borderStyle = storeCellSettings.borderStyle; - // const borderSizes = storeCellSettings.borderSizes; const borderSizes = { 7: `${_t.textThin}`, From 9e80ead4b48ce18d288a4a54304df1f3ce6bbf3b Mon Sep 17 00:00:00 2001 From: SergeyEzhin Date: Tue, 9 Feb 2021 21:42:00 +0300 Subject: [PATCH 06/27] [SSE mobile] Added Text Settings --- .../lib/component/ThemeColorPalette.jsx | 3 +- .../mobile/src/controller/Main.jsx | 11 +- .../mobile/src/controller/edit/EditText.jsx | 108 ++++++++ .../mobile/src/store/focusObjects.js | 2 +- .../mobile/src/store/mainStore.js | 4 +- .../mobile/src/store/textSettings.js | 91 +++++++ .../mobile/src/view/edit/Edit.jsx | 24 ++ .../mobile/src/view/edit/EditText.jsx | 237 ++++++++++++++++++ 8 files changed, 473 insertions(+), 7 deletions(-) create mode 100644 apps/spreadsheeteditor/mobile/src/controller/edit/EditText.jsx create mode 100644 apps/spreadsheeteditor/mobile/src/store/textSettings.js create mode 100644 apps/spreadsheeteditor/mobile/src/view/edit/EditText.jsx diff --git a/apps/common/mobile/lib/component/ThemeColorPalette.jsx b/apps/common/mobile/lib/component/ThemeColorPalette.jsx index e16403d72..c4f838112 100644 --- a/apps/common/mobile/lib/component/ThemeColorPalette.jsx +++ b/apps/common/mobile/lib/component/ThemeColorPalette.jsx @@ -3,6 +3,7 @@ import { f7, ListItem, List, Icon } from 'framework7-react'; import { useTranslation } from 'react-i18next'; const ThemeColors = ({ themeColors, onColorClick, curColor }) => { + console.log(curColor); return (
{themeColors.map((row, rowIndex) => { @@ -11,7 +12,7 @@ const ThemeColors = ({ themeColors, onColorClick, curColor }) => { {row.map((effect, index) => { return( {onColorClick(effect.color, effect.effectId, effect.effectValue)}} > diff --git a/apps/spreadsheeteditor/mobile/src/controller/Main.jsx b/apps/spreadsheeteditor/mobile/src/controller/Main.jsx index 18df8fa53..ed4e4ccc0 100644 --- a/apps/spreadsheeteditor/mobile/src/controller/Main.jsx +++ b/apps/spreadsheeteditor/mobile/src/controller/Main.jsx @@ -5,7 +5,7 @@ import { f7 } from 'framework7-react'; import { withTranslation } from 'react-i18next'; import CollaborationController from '../../../../common/mobile/lib/controller/Collaboration.jsx' -@inject("storeFocusObjects", "storeCellSettings") +@inject("storeFocusObjects", "storeCellSettings", "storeTextSettings") class MainController extends Component { constructor(props) { super(props) @@ -206,12 +206,15 @@ class MainController extends Component { const storeFocusObjects = this.props.storeFocusObjects; const storeCellSettings = this.props.storeCellSettings; + const storeTextSettings = this.props.storeTextSettings; const styleSize = storeCellSettings.styleSize; this.api.asc_registerCallback('asc_onSelectionChanged', cellInfo => { - // console.log(cellInfo); + console.log(cellInfo); storeFocusObjects.resetCellInfo(cellInfo); storeCellSettings.initCellSettings(cellInfo); + storeTextSettings.initTextSettings(cellInfo); + let selectedObjects = Common.EditorApi.get().asc_getGraphicObjectProps(); if(selectedObjects.length) { @@ -224,11 +227,13 @@ class MainController extends Component { this.api.asc_registerCallback('asc_onInitEditorFonts', (fonts, select) => { storeCellSettings.initEditorFonts(fonts, select); + storeTextSettings.initEditorFonts(fonts, select); }); this.api.asc_registerCallback('asc_onEditorSelectionChanged', fontObj => { - // console.log(fontObj) + console.log(fontObj) storeCellSettings.initFontInfo(fontObj); + storeTextSettings.initFontInfo(fontObj); }); this.api.asc_registerCallback('asc_onInitEditorStyles', styles => { diff --git a/apps/spreadsheeteditor/mobile/src/controller/edit/EditText.jsx b/apps/spreadsheeteditor/mobile/src/controller/edit/EditText.jsx new file mode 100644 index 000000000..5be6e60dd --- /dev/null +++ b/apps/spreadsheeteditor/mobile/src/controller/edit/EditText.jsx @@ -0,0 +1,108 @@ +import React, {Component} from 'react'; +import { f7 } from 'framework7-react'; +import {Device} from '../../../../../common/mobile/utils/device'; + +import { EditText } from '../../view/edit/EditText'; + +class EditTextController extends Component { + constructor (props) { + super(props); + } + + toggleBold(value) { + const api = Common.EditorApi.get(); + api.asc_setCellBold(value); + }; + + toggleItalic(value) { + const api = Common.EditorApi.get(); + api.asc_setCellItalic(value); + }; + + toggleUnderline(value) { + const api = Common.EditorApi.get(); + api.asc_setCellUnderline(value); + }; + + onParagraphAlign(type) { + const api = Common.EditorApi.get(); + let value = AscCommon.align_Left; + + switch (type) { + case 'justify': + value = AscCommon.align_Justify; + break; + case 'right': + value = AscCommon.align_Right; + break; + case 'center': + value = AscCommon.align_Center; + break; + } + + api.asc_setCellAlign(value); + }; + + onParagraphValign(type) { + const api = Common.EditorApi.get(); + let value; + + switch(type) { + case 'top': + value = Asc.c_oAscVAlign.Top; + break; + case 'center': + value = Asc.c_oAscVAlign.Center; + break; + case 'bottom': + value = Asc.c_oAscVAlign.Bottom; + break; + } + + api.asc_setCellVertAlign(value); + }; + + changeFontSize(curSize, isDecrement) { + const api = Common.EditorApi.get(); + let size = curSize; + + if (isDecrement) { + typeof size === 'undefined' ? api.asc_decreaseFontSize() : size = Math.max(1, --size); + } else { + typeof size === 'undefined' ? api.asc_increaseFontSize() : size = Math.min(100, ++size); + } + + if (typeof size !== 'undefined') { + api.asc_setCellFontSize(size); + } + }; + + changeFontFamily(name) { + const api = Common.EditorApi.get(); + if (name) { + api.asc_setCellFontName(name); + } + } + + onTextColor(color) { + const api = Common.EditorApi.get(); + api.asc_setCellTextColor(Common.Utils.ThemeColor.getRgbColor(color)); + } + + render () { + return ( + + ) + } +} + +export default EditTextController; \ No newline at end of file diff --git a/apps/spreadsheeteditor/mobile/src/store/focusObjects.js b/apps/spreadsheeteditor/mobile/src/store/focusObjects.js index 8058e49c3..c78707a54 100644 --- a/apps/spreadsheeteditor/mobile/src/store/focusObjects.js +++ b/apps/spreadsheeteditor/mobile/src/store/focusObjects.js @@ -92,7 +92,7 @@ export class storeFocusObjects { } } } else if (isTextShape || isTextChart) { - const selectedObjects = this.api.asc_getGraphicObjectProps(); + const selectedObjects = Common.EditorApi.get().asc_getGraphicObjectProps(); let isEquation = false; for (var i = 0; i < selectedObjects.length; i++) { diff --git a/apps/spreadsheeteditor/mobile/src/store/mainStore.js b/apps/spreadsheeteditor/mobile/src/store/mainStore.js index 43ede8b18..eb5e244fe 100644 --- a/apps/spreadsheeteditor/mobile/src/store/mainStore.js +++ b/apps/spreadsheeteditor/mobile/src/store/mainStore.js @@ -5,7 +5,7 @@ import {storeUsers} from '../../../../common/mobile/lib/store/users'; import {storeWorksheets} from './sheets'; import {storeFunctions} from './functions'; import {storePalette} from "./palette"; -// import {storeTextSettings} from "./textSettings"; +import {storeTextSettings} from "./textSettings"; // import {storeParagraphSettings} from "./paragraphSettings"; import {storeShapeSettings} from "./shapeSettings"; import {storeCellSettings} from "./cellSettings"; @@ -19,7 +19,7 @@ export const stores = { users: new storeUsers(), sheets: new storeWorksheets(), storeFunctions: new storeFunctions(), - // storeTextSettings: new storeTextSettings(), + storeTextSettings: new storeTextSettings(), // storeParagraphSettings: new storeParagraphSettings(), storeShapeSettings: new storeShapeSettings(), storeChartSettings: new storeChartSettings(), diff --git a/apps/spreadsheeteditor/mobile/src/store/textSettings.js b/apps/spreadsheeteditor/mobile/src/store/textSettings.js new file mode 100644 index 000000000..1772a60db --- /dev/null +++ b/apps/spreadsheeteditor/mobile/src/store/textSettings.js @@ -0,0 +1,91 @@ +import {action, observable, computed} from 'mobx'; + +export class storeTextSettings { + + @observable fontsArray = []; + @observable fontInfo = {}; + @observable fontName = ''; + @observable fontSize = undefined; + @observable isBold = false; + @observable isItalic = false; + @observable isUnderline = false; + @observable textColor = undefined; + @observable customTextColors = []; + @observable paragraphAlign = undefined; + @observable paragraphValign = undefined; + @observable textIn = undefined; + + @action initTextSettings(cellInfo) { + let xfs = cellInfo.asc_getXfs(); + let selectType = cellInfo.asc_getSelectionType(); + + switch (selectType) { + case Asc.c_oAscSelectionType.RangeChartText: this.textIn = 1; break; + case Asc.c_oAscSelectionType.RangeShapeText: this.textIn = 2; break; + default: this.textIn = 0; + } + + this.fontName = xfs.asc_getFontName(); + this.fontSize = xfs.asc_getFontSize(); + + this.isBold = xfs.asc_getFontBold(); + this.isItalic = xfs.asc_getFontItalic(); + this.isUnderline = xfs.asc_getFontUnderline(); + + let color = xfs.asc_getFontColor(); + console.log(color); + this.textColor = this.resetTextColor(color); + + this.paragraphAlign = xfs.asc_getHorAlign(); + this.paragraphValign = xfs.asc_getVertAlign(); + } + + @action initEditorFonts (fonts, select) { + let array = []; + for (let font of fonts) { + let fontId = font.asc_getFontId(); + array.push({ + id : fontId, + name : font.asc_getFontName(), + //displayValue: font.asc_getFontName(), + imgidx : font.asc_getFontThumbnail(), + type : font.asc_getFontType() + }); + } + + this.fontsArray = array; + } + + @action initFontInfo(fontObj) { + this.fontInfo = fontObj; + } + + @action changeTextColor(value) { + this.textColor = value; + } + + resetTextColor (color) { + let value; + + if (color) { + if (color.get_auto()) { + value = 'auto'; + } else { + if (color.get_type() == Asc.c_oAscColor.COLOR_TYPE_SCHEME) { + value = { + color: Common.Utils.ThemeColor.getHexColor(color.get_r(), color.get_g(), color.get_b()), + effectValue: color.get_value() + } + } else { + value = Common.Utils.ThemeColor.getHexColor(color.get_r(), color.get_g(), color.get_b()); + } + } + } + + return value; + } + + @action changeCustomTextColors (colors) { + this.customTextColors = colors; + } +} \ No newline at end of file diff --git a/apps/spreadsheeteditor/mobile/src/view/edit/Edit.jsx b/apps/spreadsheeteditor/mobile/src/view/edit/Edit.jsx index 135e6459e..f37640cfd 100644 --- a/apps/spreadsheeteditor/mobile/src/view/edit/Edit.jsx +++ b/apps/spreadsheeteditor/mobile/src/view/edit/Edit.jsx @@ -8,10 +8,12 @@ import {Device} from '../../../../../common/mobile/utils/device'; import EditCellController from "../../controller/edit/EditCell"; import EditShapeController from "../../controller/edit/EditShape"; import EditImageController from "../../controller/edit/EditImage"; +import EditTextController from "../../controller/edit/EditText"; 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 } from './EditCell'; +import { PageTextFonts, PageTextFontColor, PageTextCustomFontColor } from './EditText'; const routes = [ @@ -126,6 +128,21 @@ const routes = [ { path: '/edit-time-format-cell/', component: PageTimeFormatCell + }, + + // Text + + { + path: '/edit-text-fonts/', + component: PageTextFonts + }, + { + path: '/edit-text-font-color/', + component: PageTextFontColor + }, + { + path: '/edit-text-custom-font-color/', + component: PageTextCustomFontColor } ]; @@ -218,6 +235,13 @@ const EditTabs = props => { component: }) } + if (settings.indexOf('text') > -1) { + editors.push({ + caption: _t.textText, + id: 'edit-text', + component: + }) + } } return ( diff --git a/apps/spreadsheeteditor/mobile/src/view/edit/EditText.jsx b/apps/spreadsheeteditor/mobile/src/view/edit/EditText.jsx new file mode 100644 index 000000000..03e54f413 --- /dev/null +++ b/apps/spreadsheeteditor/mobile/src/view/edit/EditText.jsx @@ -0,0 +1,237 @@ +import React, {Fragment, useState} from 'react'; +import {observer, inject} from "mobx-react"; +import {f7, List, ListItem, Icon, Row, Button, Page, Navbar, Segmented, BlockTitle} 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'; + +const EditText = props => { + const isAndroid = Device.android; + const { t } = useTranslation(); + const _t = t('View.Edit', {returnObjects: true}); + // const metricText = Common.Utils.Metric.getCurrentMetricName(); + const storeTextSettings = props.storeTextSettings; + const textIn = storeTextSettings.textIn; + + const fontName = storeTextSettings.fontName || _t.textFonts; + const fontSize = storeTextSettings.fontSize; + const fontColor = storeTextSettings.textColor; + console.log(fontColor); + + const displaySize = typeof fontSize === 'undefined' ? _t.textAuto : fontSize + ' ' + _t.textPt; + const isBold = storeTextSettings.isBold; + const isItalic = storeTextSettings.isItalic; + const isUnderline = storeTextSettings.isUnderline; + const paragraphAlign = storeTextSettings.paragraphAlign; + const paragraphValign = storeTextSettings.paragraphValign; + + const fontColorPreview = fontColor !== 'auto' ? + : + ; + + return ( + + + + + + {props.toggleBold(!isBold)}}>B + {props.toggleItalic(!isItalic)}}>I + {props.toggleUnderline(!isUnderline)}} style={{textDecoration: "underline"}}>U + + + + {!isAndroid ? + {fontColorPreview} : + fontColorPreview + } + + + {textIn === 2 ? ( + + + + + {props.onParagraphAlign('left')}}> + + + {props.onParagraphAlign('center')}}> + + + {props.onParagraphAlign('right')}}> + + + {props.onParagraphAlign('justify')}}> + + + + + + + {props.onParagraphValign('top')}}> + + + {props.onParagraphValign('center')}}> + + + {props.onParagraphValign('bottom')}}> + + + + + + + ) : null} + + ); +}; + +const PageFonts = props => { + const isAndroid = Device.android; + const { t } = useTranslation(); + const _t = t('View.Edit', {returnObjects: true}); + const storeTextSettings = props.storeTextSettings; + const size = storeTextSettings.fontSize; + const displaySize = typeof size === 'undefined' ? _t.textAuto : size + ' ' + _t.textPt; + const curFontName = storeTextSettings.fontName; + const fonts = storeTextSettings.fontsArray; + + const [vlFonts, setVlFonts] = useState({ + vlData: { + items: [], + } + }); + + const renderExternal = (vl, vlData) => { + setVlFonts((prevState) => { + let fonts = [...prevState.vlData.items]; + fonts.splice(vlData.fromIndex, vlData.toIndex, ...vlData.items); + return {vlData: { + items: fonts, + }}; + }); + }; + + return ( + + + + + {!isAndroid &&
{displaySize}
} +
+ + + {isAndroid && } + + +
+
+
+ {_t.textFonts} + +
    + {vlFonts.vlData.items.map((item, index) => ( + {props.changeFontFamily(item.name)}} + > + ))} +
+
+
+ ); +}; + +const PageFontColor = props => { + const { t } = useTranslation(); + const _t = t('View.Edit', {returnObjects: true}); + const storeTextSettings = props.storeTextSettings; + const storePalette = props.storePalette; + const textColor = storeTextSettings.textColor; + const customColors = storePalette.customColors; + + console.log(textColor); + + const changeColor = (color, effectId, effectValue) => { + if (color !== 'empty') { + if (effectId !== undefined) { + const newColor = {color: color, effectId: effectId, effectValue: effectValue}; + storeTextSettings.changeTextColor(newColor); + props.onTextColor(newColor); + } else { + storeTextSettings.changeTextColor(color); + props.onTextColor(color); + } + } else { + // open custom color menu + props.f7router.navigate('/edit-text-custom-font-color/'); + } + }; + + return ( + + + + + + + + ); +}; + +const PageCustomFontColor = props => { + const { t } = useTranslation(); + const _t = t('View.Edit', {returnObjects: true}); + const storeTextSettings = props.storeTextSettings; + const storePalette = props.storePalette; + let textColor = storeTextSettings.textColor; + + if (typeof textColor === 'object') { + textColor = textColor.color; + } + + const autoColor = textColor === 'auto' ? window.getComputedStyle(document.getElementById('font-color-auto')).backgroundColor : null; + + const onAddNewColor = (colors, color) => { + storePalette.changeCustomColors(colors); + storeTextSettings.changeTextColor(color); + props.onTextColor(color); + props.f7router.back(); + }; + return ( + + + + + ) +}; + +const EditTextContainer = inject("storeTextSettings", "storeFocusObjects")(observer(EditText)); +const PageTextFonts = inject("storeTextSettings", "storeFocusObjects")(observer(PageFonts)); +const PageTextFontColor = inject("storeTextSettings", "storePalette")(observer(PageFontColor)); +const PageTextCustomFontColor = inject("storeTextSettings", "storePalette")(observer(PageCustomFontColor)); + +export { + EditTextContainer as EditText, + PageTextFonts, + PageTextFontColor, + PageTextCustomFontColor +}; \ No newline at end of file From cf7bda258f1aae88fe284bb62bf76b68471a9b0a Mon Sep 17 00:00:00 2001 From: SergeyEzhin Date: Wed, 10 Feb 2021 22:00:08 +0300 Subject: [PATCH 07/27] [SSE mobile] Make Chart Settings --- apps/spreadsheeteditor/mobile/locale/en.json | 34 +- .../mobile/src/controller/Main.jsx | 12 +- .../mobile/src/controller/edit/EditChart.jsx | 164 ++++++ .../mobile/src/store/chartSettings.js | 104 ++++ .../mobile/src/store/focusObjects.js | 18 + .../mobile/src/view/edit/Edit.jsx | 64 +++ .../mobile/src/view/edit/EditChart.jsx | 538 ++++++++++++++++++ 7 files changed, 931 insertions(+), 3 deletions(-) create mode 100644 apps/spreadsheeteditor/mobile/src/controller/edit/EditChart.jsx create mode 100644 apps/spreadsheeteditor/mobile/src/view/edit/EditChart.jsx diff --git a/apps/spreadsheeteditor/mobile/locale/en.json b/apps/spreadsheeteditor/mobile/locale/en.json index d6f456d25..6377bc794 100644 --- a/apps/spreadsheeteditor/mobile/locale/en.json +++ b/apps/spreadsheeteditor/mobile/locale/en.json @@ -137,7 +137,39 @@ "textEuro": "Euro", "textPound": "Pound", "textRouble": "Rouble", - "textYen": "Yen" + "textYen": "Yen", + "textChart": "Chart", + "textDesign": "Design", + "textVerticalAxis": "Vertical Axis", + "textHorizontalAxis": "Horizontal Axis", + "textRemoveChart": "Remove Chart", + "textLayout": "Layout", + "textType": "Type", + "textChartTitle": "Chart Title", + "textLegend": "Legend", + "textAxisTitle": "Axis Title", + "textHorizontal": "Horizontal", + "textVertical": "Vertical", + "textGridlines": "Gridlines", + "textDataLabels": "Data Labels", + "textNone": "None", + "textOverlay": "Overlay", + "textNoOverlay": "No Overlay", + "textLeft": "Left", + "textTop": "Top", + "textRight": "Right", + "textBottom": "Bottom", + "textLeftOverlay": "Left Overlay", + "textRightOverlay": "Right Overlay", + "textRotated": "Rotated", + "textMajor": "Major", + "textMinor": "Minor", + "textMajorAndMinor": "Major And Minor", + "textCenter": "Center", + "textInnerBottom": "Inner Bottom", + "textInnerTop": "Inner Top", + "textOuterTop": "Outer Top", + "textFit": "Fit Width" } }, "Common": { diff --git a/apps/spreadsheeteditor/mobile/src/controller/Main.jsx b/apps/spreadsheeteditor/mobile/src/controller/Main.jsx index ed4e4ccc0..2f93ddeb8 100644 --- a/apps/spreadsheeteditor/mobile/src/controller/Main.jsx +++ b/apps/spreadsheeteditor/mobile/src/controller/Main.jsx @@ -5,7 +5,7 @@ import { f7 } from 'framework7-react'; import { withTranslation } from 'react-i18next'; import CollaborationController from '../../../../common/mobile/lib/controller/Collaboration.jsx' -@inject("storeFocusObjects", "storeCellSettings", "storeTextSettings") +@inject("storeFocusObjects", "storeCellSettings", "storeTextSettings", "storeChartSettings") class MainController extends Component { constructor(props) { super(props) @@ -207,10 +207,12 @@ class MainController extends Component { const storeFocusObjects = this.props.storeFocusObjects; const storeCellSettings = this.props.storeCellSettings; const storeTextSettings = this.props.storeTextSettings; + const storeChartSettings = this.props.storeChartSettings; const styleSize = storeCellSettings.styleSize; this.api.asc_registerCallback('asc_onSelectionChanged', cellInfo => { console.log(cellInfo); + storeFocusObjects.resetCellInfo(cellInfo); storeCellSettings.initCellSettings(cellInfo); storeTextSettings.initTextSettings(cellInfo); @@ -219,8 +221,13 @@ class MainController extends Component { if(selectedObjects.length) { storeFocusObjects.resetFocusObjects(selectedObjects); - } + // Chart Settings + + if (storeFocusObjects.chartObject) { + storeChartSettings.updateChartStyles(this.api.asc_getChartPreviews(storeFocusObjects.chartObject.get_ChartProperties().getType())); + } + } }); this.api.asc_setThumbnailStylesSizes(styleSize.width, styleSize.height); @@ -243,6 +250,7 @@ class MainController extends Component { this.api.asc_registerCallback('asc_onSendThemeColors', (colors, standart_colors) => { Common.Utils.ThemeColor.setColors(colors, standart_colors); }); + } _onLongActionEnd(type, id) { diff --git a/apps/spreadsheeteditor/mobile/src/controller/edit/EditChart.jsx b/apps/spreadsheeteditor/mobile/src/controller/edit/EditChart.jsx new file mode 100644 index 000000000..4225adc5e --- /dev/null +++ b/apps/spreadsheeteditor/mobile/src/controller/edit/EditChart.jsx @@ -0,0 +1,164 @@ +import React, {Component} from 'react'; +import { f7 } from 'framework7-react'; +import {Device} from '../../../../../common/mobile/utils/device'; +import {observer, inject} from "mobx-react"; + +import { EditChart } from '../../view/edit/EditChart'; + +class EditChartController extends Component { + constructor (props) { + super(props); + this.onRemoveChart = this.onRemoveChart.bind(this); + this.onType = this.onType.bind(this); + this.onStyle = this.onStyle.bind(this); + this.onBorderColor = this.onBorderColor.bind(this); + this.onBorderSize = this.onBorderSize.bind(this); + } + + closeModal() { + if (Device.phone) { + f7.sheet.close('#edit-sheet', true); + } else { + f7.popover.close('#edit-popover'); + } + }; + + onRemoveChart() { + const api = Common.EditorApi.get(); + api.asc_Remove(); + this.closeModal(); + } + + onStyle(type) { + const api = Common.EditorApi.get(); + let image = new Asc.asc_CImgProperty(), + chart = this.props.storeFocusObjects.chartObject.get_ChartProperties(); + + chart.putStyle(type); + image.put_ChartProperties(chart); + + api.asc_setGraphicObjectProps(image); + + } + + onType(type) { + const api = Common.EditorApi.get(); + let image = new Asc.asc_CImgProperty(), + chart = this.props.storeFocusObjects.chartObject.get_ChartProperties(); + + chart.changeType(type); + image.put_ChartProperties(chart); + + api.asc_setGraphicObjectProps(image); + + // Force update styles + this.props.storeChartSettings.updateChartStyles(api.asc_getChartPreviews(chart.getType())); + + // me.updateAxisProps(type); + } + + onFillColor(color) { + const api = Common.EditorApi.get(); + let image = new Asc.asc_CImgProperty(), + shape = new Asc.asc_CShapeProperty(), + fill = new Asc.asc_CShapeFill(); + + if (color == 'transparent') { + fill.put_type(Asc.c_oAscFill.FILL_TYPE_NOFILL); + fill.put_fill(null); + } else { + fill.put_type(Asc.c_oAscFill.FILL_TYPE_SOLID); + fill.put_fill(new Asc.asc_CFillSolid()); + fill.get_fill().put_color(Common.Utils.ThemeColor.getRgbColor(color)); + } + + shape.put_fill(fill); + image.put_ShapeProperties(shape); + + api.asc_setGraphicObjectProps(image); + } + + onBorderColor(color) { + const api = Common.EditorApi.get(); + const currentShape = this.props.storeFocusObjects.shapeObject.get_ShapeProperties(); + let image = new Asc.asc_CImgProperty(), + shape = new Asc.asc_CShapeProperty(), + stroke = new Asc.asc_CStroke(); + + if(currentShape && currentShape.get_stroke().get_type() == Asc.c_oAscStrokeType.STROKE_COLOR) { + + if (currentShape.get_stroke().get_width() < 0.01) { + stroke.put_type(Asc.c_oAscStrokeType.STROKE_NONE); + } else { + stroke.put_type(Asc.c_oAscStrokeType.STROKE_COLOR); + stroke.put_color(Common.Utils.ThemeColor.getRgbColor(color)); + stroke.put_width(currentShape.get_stroke().get_width()); + stroke.asc_putPrstDash(currentShape.get_stroke().asc_getPrstDash()); + } + + shape.put_stroke(stroke); + image.put_ShapeProperties(shape); + + api.asc_setGraphicObjectProps(image); + } + } + + onBorderSize(value) { + const api = Common.EditorApi.get(); + const image = new Asc.asc_CImgProperty(); + const shape = new Asc.asc_CShapeProperty(); + const stroke = new Asc.asc_CStroke(); + + const _borderColor = this.props.storeChartSettings.borderColor; + + if (value < 0.01) { + stroke.put_type(Asc.c_oAscStrokeType.STROKE_NONE); + } else { + stroke.put_type(Asc.c_oAscStrokeType.STROKE_COLOR); + if (_borderColor == 'transparent') + stroke.put_color(Common.Utils.ThemeColor.getRgbColor({color: '000000', effectId: 29})); + else + stroke.put_color(Common.Utils.ThemeColor.getRgbColor(Common.Utils.ThemeColor.colorValue2EffectId(_borderColor))); + stroke.put_width(value * 25.4 / 72.0); + } + + shape.put_stroke(stroke); + image.put_ShapeProperties(shape); + + api.asc_setGraphicObjectProps(image); + this.props.storeChartSettings.initBorderColor(this.props.storeFocusObjects.shapeObject.get_ShapeProperties()); // when select STROKE_NONE or change from STROKE_NONE to STROKE_COLOR + } + + onReorder(type) { + const api = Common.EditorApi.get(); + let ascType; + + if (type == 'all-up') { + ascType = Asc.c_oAscDrawingLayerType.BringToFront; + } else if (type == 'all-down') { + ascType = Asc.c_oAscDrawingLayerType.SendToBack; + } else if (type == 'move-up') { + ascType = Asc.c_oAscDrawingLayerType.BringForward; + } else { + ascType = Asc.c_oAscDrawingLayerType.SendBackward; + } + + api.asc_setSelectedDrawingObjectLayer(ascType); + } + + render () { + return ( + + ) + } +} + +export default inject("storeChartSettings", "storeFocusObjects")(observer(EditChartController)); \ No newline at end of file diff --git a/apps/spreadsheeteditor/mobile/src/store/chartSettings.js b/apps/spreadsheeteditor/mobile/src/store/chartSettings.js index edda7ebe6..da6dea79a 100644 --- a/apps/spreadsheeteditor/mobile/src/store/chartSettings.js +++ b/apps/spreadsheeteditor/mobile/src/store/chartSettings.js @@ -1,6 +1,62 @@ import {action, observable, computed} from 'mobx'; export class storeChartSettings { + + @observable borderColor; + + setBorderColor (color) { + this.borderColor = color; + } + + @action initBorderColor(shapeProperties) { + let stroke = shapeProperties.get_stroke(); + this.borderColor = (stroke && stroke.get_type() == Asc.c_oAscStrokeType.STROKE_COLOR) ? this.resetColor(stroke.get_color()) : 'transparent'; + return this.borderColor; + } + + @observable fillColor = undefined; + + setFillColor (color) { + this.fillColor = color; + } + + @action getFillColor (shapeProperties) { + const fill = shapeProperties.asc_getFill(); + const fillType = fill.asc_getType(); + + if (fillType == Asc.c_oAscFill.FILL_TYPE_SOLID) { + this.fillColor = this.resetColor(fill.asc_getFill().asc_getColor()); + } + } + + @observable chartStyles = null; + + @action clearChartStyles () { + this.chartStyles = null; + } + + @action updateChartStyles (styles) { + this.chartStyles = styles; + } + + @computed get styles () { + if (!this.chartStyles) return null; + const widthContainer = document.querySelector(".page-content").clientWidth; + const columns = parseInt(widthContainer / 70); // magic + let row = -1; + const styles = []; + + this.chartStyles.forEach((style, index) => { + if (0 == index % columns) { + styles.push([]); + row++ + } + styles[row].push(style); + }); + + return styles; + } + @computed get types () { const _types = [ { type: Asc.c_oAscChartTypeSettings.barNormal, thumb: 'bar-normal'}, @@ -41,4 +97,52 @@ export class storeChartSettings { }); return groups; } + + borderSizeTransform () { + const _sizes = [0, 0.5, 1, 1.5, 2.25, 3, 4.5, 6]; + + return { + sizeByIndex: function (index) { + if (index < 1) return _sizes[0]; + if (index > _sizes.length - 1) return _sizes[_sizes.length - 1]; + return _sizes[index]; + }, + + indexSizeByValue: function (value) { + let index = 0; + _sizes.forEach((size, idx) => { + if (Math.abs(size - value) < 0.25) { + index = idx; + } + }); + return index; + }, + + sizeByValue: function (value) { + return _sizes[this.indexSizeByValue(value)]; + } + } + } + + resetColor(color) { + let clr = 'transparent'; + + if(color) { + if (color.get_auto()) { + clr = 'auto' + } else { + if (color.get_type() == Asc.c_oAscColor.COLOR_TYPE_SCHEME) { + clr = { + color: Common.Utils.ThemeColor.getHexColor(color.get_r(), color.get_g(), color.get_b()), + effectValue: color.get_value() + } + } else { + clr = Common.Utils.ThemeColor.getHexColor(color.get_r(), color.get_g(), color.get_b()); + } + } + } + + return clr; + } + } \ No newline at end of file diff --git a/apps/spreadsheeteditor/mobile/src/store/focusObjects.js b/apps/spreadsheeteditor/mobile/src/store/focusObjects.js index c78707a54..6addcb154 100644 --- a/apps/spreadsheeteditor/mobile/src/store/focusObjects.js +++ b/apps/spreadsheeteditor/mobile/src/store/focusObjects.js @@ -165,4 +165,22 @@ export class storeFocusObjects { return undefined; } } + + @computed get chartObject() { + const charts = []; + for (let object of this._focusObjects) { + if (object.get_ObjectType() === Asc.c_oAscTypeSelectElement.Image) { + if (object.get_ObjectValue() && object.get_ObjectValue().get_ChartProperties()) { + charts.push(object); + } + } + } + if (charts.length > 0) { + const object = charts[charts.length - 1]; // get top + return object.get_ObjectValue(); + } else { + return undefined; + } + } + } \ No newline at end of file diff --git a/apps/spreadsheeteditor/mobile/src/view/edit/Edit.jsx b/apps/spreadsheeteditor/mobile/src/view/edit/Edit.jsx index f37640cfd..787a603e3 100644 --- a/apps/spreadsheeteditor/mobile/src/view/edit/Edit.jsx +++ b/apps/spreadsheeteditor/mobile/src/view/edit/Edit.jsx @@ -9,11 +9,13 @@ import EditCellController from "../../controller/edit/EditCell"; 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 { 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 } from './EditCell'; import { PageTextFonts, PageTextFontColor, PageTextCustomFontColor } from './EditText'; +import { PageChartStyle, PageChartCustomFillColor, PageChartBorderColor, PageChartCustomBorderColor, PageChartReorder, PageChartLayout, PageChartLegend, PageChartTitle, PageChartHorizontalAxisTitle, PageChartVerticalAxisTitle, PageChartHorizontalGridlines, PageChartVerticalGridlines, PageChartDataLabels } from './EditChart'; const routes = [ @@ -143,6 +145,61 @@ const routes = [ { path: '/edit-text-custom-font-color/', component: PageTextCustomFontColor + }, + + // Chart + + { + path: '/edit-chart-style/', + component: PageChartStyle + }, + { + path: '/edit-chart-border-color/', + component: PageChartBorderColor + }, + { + path: '/edit-chart-custom-fill-color/', + component: PageChartCustomFillColor + }, + { + path: '/edit-chart-custom-border-color/', + component: PageChartCustomBorderColor + }, + { + path: '/edit-chart-reorder/', + component: PageChartReorder + }, + { + path: '/edit-chart-layout/', + component: PageChartLayout + }, + { + path: '/edit-chart-title/', + component: PageChartTitle + }, + { + path: '/edit-chart-legend/', + component: PageChartLegend + }, + { + path: '/edit-horizontal-axis-title/', + component: PageChartHorizontalAxisTitle + }, + { + path: '/edit-vertical-axis-title/', + component: PageChartVerticalAxisTitle + }, + { + path: '/edit-horizontal-gridlines/', + component: PageChartHorizontalGridlines + }, + { + path: '/edit-vertical-gridlines/', + component: PageChartVerticalGridlines + }, + { + path: '/edit-data-labels/', + component: PageChartDataLabels } ]; @@ -242,6 +299,13 @@ const EditTabs = props => { component: }) } + if (settings.indexOf('chart') > -1) { + editors.push({ + caption: _t.textChart, + id: 'edit-chart', + component: + }) + } } return ( diff --git a/apps/spreadsheeteditor/mobile/src/view/edit/EditChart.jsx b/apps/spreadsheeteditor/mobile/src/view/edit/EditChart.jsx new file mode 100644 index 000000000..cc8f2aab8 --- /dev/null +++ b/apps/spreadsheeteditor/mobile/src/view/edit/EditChart.jsx @@ -0,0 +1,538 @@ +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, 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"; + +const PageCustomFillColor = props => { + const { t } = useTranslation(); + const _t = t('View.Edit', {returnObjects: true}); + let fillColor = props.storeChartSettings.fillColor; + + if (typeof fillColor === 'object') { + fillColor = fillColor.color; + } + + const onAddNewColor = (colors, color) => { + props.storePalette.changeCustomColors(colors); + props.onFillColor(color); + props.storeChartSettings.setFillColor(color); + props.f7router.back(); + }; + + return ( + + + + + ) +}; + +const PaletteFill = inject("storeFocusObjects", "storeChartSettings", "storePalette")(observer(props => { + const { t } = useTranslation(); + const _t = t('View.Edit', {returnObjects: true}); + const storeChartSettings = props.storeChartSettings; + const shapeProperties = props.storeFocusObjects.shapeObject.get_ShapeProperties(); + const curFillColor = storeChartSettings.fillColor ? storeChartSettings.fillColor : storeChartSettings.getFillColor(shapeProperties); + const customColors = props.storePalette.customColors; + + const changeColor = (color, effectId, effectValue) => { + if (color !== 'empty') { + if (effectId !==undefined ) { + const newColor = {color: color, effectId: effectId, effectValue: effectValue}; + props.onFillColor(newColor); + storeChartSettings.setFillColor(newColor); + } else { + props.onFillColor(color); + storeChartSettings.setFillColor(color); + } + } else { + // open custom color menu + props.f7router.navigate('/edit-chart-custom-fill-color/'); + } + }; + + return ( + + + + + + + ) +})); + +const PageCustomBorderColor = props => { + const { t } = useTranslation(); + const _t = t('View.Edit', {returnObjects: true}); + let borderColor = props.storeChartSettings.borderColor; + + if (typeof borderColor === 'object') { + borderColor = borderColor.color; + } + + const onAddNewColor = (colors, color) => { + props.storePalette.changeCustomColors(colors); + props.onBorderColor(color); + props.storeChartSettings.setBorderColor(color); + props.f7router.back(); + }; + + return ( + + + + + ) +}; + +const PageBorderColor = props => { + const { t } = useTranslation(); + const _t = t('View.Edit', {returnObjects: true}); + const borderColor = props.storeChartSettings.borderColor; + const customColors = props.storePalette.customColors; + + const changeColor = (color, effectId, effectValue) => { + if (color !== 'empty') { + if (effectId !== undefined ) { + const newColor = {color: color, effectId: effectId, effectValue: effectValue}; + props.onBorderColor(newColor); + props.storeChartSettings.setBorderColor(newColor); + } else { + props.onBorderColor(color); + props.storeChartSettings.setBorderColor(color); + } + } else { + // open custom color menu + props.f7router.navigate('/edit-chart-custom-border-color/'); + } + }; + + return ( + + + + + + + + ) +}; + +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 styles = storeChartSettings.styles; + const types = storeChartSettings.types; + const curType = chartProperties.getType(); + + // Init border size + + const shapeStroke = shapeProperties.get_stroke(); + 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 [stateBorderSize, setBorderSize] = useState(displayBorderSize); + const [stateTextBorderSize, setTextBorderSize] = useState(displayTextBorderSize); + + // Init border color + + const borderColor = storeChartSettings.initBorderColor(shapeProperties); + const displayBorderColor = borderColor == 'transparent' ? borderColor : `#${(typeof borderColor === "object" ? borderColor.color : borderColor)}`; + + return ( + + +
+ {_t.textType} + {_t.textStyle} + {_t.textFill} + {_t.textBorder} +
+
+ + +
+ {types.map((row, rowIndex) => { + return ( +
    + {row.map((type, index)=>{ + return( +
  • {props.onType(type.type)}}> +
    + {/* style={{backgroundImage: `url('resources/img/charts/${type.thumb}')`}} */} +
  • + ) + })} +
+ ) + })} +
+
+ +
+ {styles ? styles.map((row, rowIndex) => { + return ( +
    + {row.map((style, index)=>{ + return( +
  • {props.onStyle(style.asc_getName())}}> + +
  • + ) + })} +
+ ) + }) : +
{_t.textNoStyles}
+ } +
+
+ + + + + + +
{_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 PageReorder = props => { + const { t } = useTranslation(); + const _t = t('View.Edit', {returnObjects: true}); + + return ( + + + + {props.onReorder('all-up')}} link='#' className='no-indicator'> + + + {props.onReorder('all-down')}} link='#' className='no-indicator'> + + + {props.onReorder('move-up')}} link='#' className='no-indicator'> + + + {props.onReorder('move-down')}} link='#' className='no-indicator'> + + + + + ) +}; + +const PageLayout = 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(); + + let dataLabelPos = [ + { value: Asc.c_oAscChartDataLabelsPos.none, displayValue: _t.textNone }, + { value: Asc.c_oAscChartDataLabelsPos.ctr, displayValue: _t.textCenter } + ]; + + if (chartType == Asc.c_oAscChartTypeSettings.barNormal || chartType == Asc.c_oAscChartTypeSettings.hBarNormal) { + dataLabelPos.push( + {value: Asc.c_oAscChartDataLabelsPos.inBase, displayValue: _t.textInnerBottom}, + {value: Asc.c_oAscChartDataLabelsPos.inEnd, displayValue: _t.textInnerTop}, + {value: Asc.c_oAscChartDataLabelsPos.outEnd, displayValue: _t.textOuterTop} + ); + } else if ( chartType == Asc.c_oAscChartTypeSettings.barStacked || + chartType == Asc.c_oAscChartTypeSettings.barStackedPer || + chartType == Asc.c_oAscChartTypeSettings.hBarStacked || + chartType == Asc.c_oAscChartTypeSettings.hBarStackedPer ) { + dataLabelPos.push( + { value: Asc.c_oAscChartDataLabelsPos.inBase, displayValue: _t.textInnerBottom }, + { value: Asc.c_oAscChartDataLabelsPos.inEnd, displayValue: _t.textInnerTop } + ); + } else if (chartType == Asc.c_oAscChartTypeSettings.lineNormal || + chartType == Asc.c_oAscChartTypeSettings.lineStacked || + chartType == Asc.c_oAscChartTypeSettings.lineStackedPer || + chartType == Asc.c_oAscChartTypeSettings.stock || + chartType == Asc.c_oAscChartTypeSettings.scatter) { + dataLabelPos.push( + { value: Asc.c_oAscChartDataLabelsPos.l, displayValue: _t.textLeft }, + { value: Asc.c_oAscChartDataLabelsPos.r, displayValue: _t.textRight }, + { value: Asc.c_oAscChartDataLabelsPos.t, displayValue: _t.textTop }, + { value: Asc.c_oAscChartDataLabelsPos.b, displayValue: _t.textBottom } + ); + } else if (chartType == Asc.c_oAscChartTypeSettings.pie || chartType == Asc.c_oAscChartTypeSettings.pie3d) { + dataLabelPos.push( + {value: Asc.c_oAscChartDataLabelsPos.bestFit, displayValue: _t.textFit}, + {value: Asc.c_oAscChartDataLabelsPos.inEnd, displayValue: _t.textInnerTop}, + {value: Asc.c_oAscChartDataLabelsPos.outEnd, displayValue: _t.textOuterTop} + ); + } + + const disableSetting = ( + chartType == Asc.c_oAscChartTypeSettings.pie || + chartType == Asc.c_oAscChartTypeSettings.doughnut || + chartType == Asc.c_oAscChartTypeSettings.pie3d + ); + + const chartLayoutTitles = { + 0: `${_t.textNone}`, + 1: `${_t.textOverlay}`, + 2: `${_t.textNoOverlay}` + } + + const chartLayoutLegends = { + 0: `${_t.textNone}`, + 1: `${_t.textLeft}`, + 2: `${_t.textTop}`, + 3: `${_t.textRight}`, + 4: `${_t.textBottom}`, + 5: `${_t.textLeftOverlay}`, + 6: `${_t.textRightOverlay}` + } + + return ( + + + + + + + {_t.textAxisTitle} + + + + + {_t.textGridlines} + + + + + + + + + ) +} + +const PageChartTitle = props => { + const { t } = useTranslation(); + const _t = t('View.Edit', {returnObjects: true}); + + return ( + + + + + + + + + ) +} + +const PageLegend = props => { + const { t } = useTranslation(); + const _t = t('View.Edit', {returnObjects: true}); + + return ( + + + + + + + + + + + + + ) +} + +const PageHorizontalAxisTitle = props => { + const { t } = useTranslation(); + const _t = t('View.Edit', {returnObjects: true}); + + return ( + + + + + + + + ) +} + +const PageVerticalAxisTitle = props => { + const { t } = useTranslation(); + const _t = t('View.Edit', {returnObjects: true}); + + return ( + + + + + + + + + ) +} + +const PageHorizontalGridlines = props => { + const { t } = useTranslation(); + const _t = t('View.Edit', {returnObjects: true}); + + return ( + + + + + + + + + + ) +} + +const PageVerticalGridlines = props => { + const { t } = useTranslation(); + const _t = t('View.Edit', {returnObjects: true}); + + return ( + + + + + + + + + + ) +} + +const PageDataLabels = props => { + const { t } = useTranslation(); + const _t = t('View.Edit', {returnObjects: true}); + + return ( + + + + + + + + + + + ) +} + +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 disableSetting = ( + chartType == Asc.c_oAscChartTypeSettings.pie || + chartType == Asc.c_oAscChartTypeSettings.doughnut || + chartType == Asc.c_oAscChartTypeSettings.pie3d + ); + + return ( + + + + + + + + + + {props.onRemoveChart()}} className='button-red button-fill button-raised'/> + + + ) +}; + +const PageEditChart = inject("storeFocusObjects")(observer(EditChart)); +const PageChartStyle = inject("storeChartSettings", "storeFocusObjects")(observer(PageStyle)); +const PageChartCustomFillColor = inject("storeChartSettings", "storePalette")(observer(PageCustomFillColor)); +const PageChartBorderColor = inject("storeChartSettings", "storePalette")(observer(PageBorderColor)); +const PageChartCustomBorderColor = inject("storeChartSettings", "storePalette")(observer(PageCustomBorderColor)); +const PageChartLayout = inject("storeChartSettings", "storeFocusObjects")(observer(PageLayout)); +const PageChartLegend = inject("storeChartSettings")(observer(PageLegend)); +const ChartTitle = inject("storeChartSettings")(observer(PageChartTitle)); +const PageChartHorizontalAxisTitle = inject("storeChartSettings")(observer(PageHorizontalAxisTitle)); +const PageChartVerticalAxisTitle = inject("storeChartSettings")(observer(PageVerticalAxisTitle)); +const PageChartHorizontalGridlines = inject("storeChartSettings")(observer(PageHorizontalGridlines)); +const PageChartVerticalGridlines = inject("storeChartSettings")(observer(PageVerticalGridlines)); +const PageChartDataLabels = inject("storeChartSettings")(observer(PageDataLabels)); + +export { + PageEditChart as EditChart, + PageChartStyle, + PageChartCustomFillColor, + PageChartBorderColor, + PageChartCustomBorderColor, + PageReorder as PageChartReorder, + PageChartLayout, + PageChartLegend, + ChartTitle as PageChartTitle, + PageChartHorizontalAxisTitle, + PageChartVerticalAxisTitle, + PageChartHorizontalGridlines, + PageChartVerticalGridlines, + PageChartDataLabels +} \ No newline at end of file From c4baeb67d1f6c8bf1c65fcec758b1ea4877255f1 Mon Sep 17 00:00:00 2001 From: SergeyEzhin Date: Fri, 12 Feb 2021 02:01:16 +0300 Subject: [PATCH 08/27] [SSE mobile] Added Layout block in Chart Settings --- .../mobile/src/controller/edit/EditChart.jsx | 18 ++ .../mobile/src/store/chartSettings.js | 46 ++++ .../mobile/src/view/edit/EditChart.jsx | 224 ++++++++++++++---- 3 files changed, 244 insertions(+), 44 deletions(-) diff --git a/apps/spreadsheeteditor/mobile/src/controller/edit/EditChart.jsx b/apps/spreadsheeteditor/mobile/src/controller/edit/EditChart.jsx index 4225adc5e..0196bd7af 100644 --- a/apps/spreadsheeteditor/mobile/src/controller/edit/EditChart.jsx +++ b/apps/spreadsheeteditor/mobile/src/controller/edit/EditChart.jsx @@ -146,6 +146,23 @@ class EditChartController extends Component { api.asc_setSelectedDrawingObjectLayer(ascType); } + setLayoutProperty(propertyMethod, value) { + const api = Common.EditorApi.get(); + let chartObject = api.asc_getChartObject(); + + if (chartObject && value) { + + chartObject[propertyMethod](+value); + + if ("putDataLabelsPos" == propertyMethod && +value != 0) { + chartObject["putShowVal"](true); + } + + api.asc_editChartDrawingObject(chartObject); + } + + } + render () { return ( ) } diff --git a/apps/spreadsheeteditor/mobile/src/store/chartSettings.js b/apps/spreadsheeteditor/mobile/src/store/chartSettings.js index da6dea79a..6c93b403e 100644 --- a/apps/spreadsheeteditor/mobile/src/store/chartSettings.js +++ b/apps/spreadsheeteditor/mobile/src/store/chartSettings.js @@ -29,6 +29,52 @@ export class storeChartSettings { } } + @observable chartTitle = undefined; + @observable chartLegend = undefined; + @observable chartAxisHorTitle = undefined; + @observable chartAxisVertTitle = undefined; + @observable chartHorGridlines = undefined; + @observable chartVertGridlines = undefined; + @observable chartDataLabel = undefined; + + @action initChartLayout(chartProperties) { + this.chartTitle = chartProperties.getTitle() ? chartProperties.getTitle() : 0; + this.chartLegend = chartProperties.getLegendPos() ? chartProperties.getLegendPos() : 0; + this.chartAxisHorTitle = chartProperties.getHorAxisLabel() ? chartProperties.getHorAxisLabel() : 0; + this.chartAxisVertTitle = chartProperties.getVertAxisLabel() ? chartProperties.getVertAxisLabel() : 0; + this.chartHorGridlines = chartProperties.getHorGridLines() ? chartProperties.getHorGridLines() : 0; + this.chartVertGridlines = chartProperties.getVertGridLines() ? chartProperties.getVertGridLines() : 0; + this.chartDataLabel = chartProperties.getDataLabelsPos() ? chartProperties.getDataLabelsPos() : 0; + } + + @action changeChartTitle(value) { + this.chartTitle = value; + } + + @action changeChartLegend(value) { + this.chartLegend = value; + } + + @action changeChartAxisHorTitle(value) { + this.chartAxisHorTitle = value; + } + + @action changeChartAxisVertTitle(value) { + this.chartAxisVertTitle = value; + } + + @action changeChartHorGridlines(value) { + this.chartHorGridlines = value; + } + + @action changeChartVertGridlines(value) { + this.chartVertGridlines = value; + } + + @action changeChartDataLabel(value) { + this.chartDataLabel = value; + } + @observable chartStyles = null; @action clearChartStyles () { diff --git a/apps/spreadsheeteditor/mobile/src/view/edit/EditChart.jsx b/apps/spreadsheeteditor/mobile/src/view/edit/EditChart.jsx index cc8f2aab8..3fba41874 100644 --- a/apps/spreadsheeteditor/mobile/src/view/edit/EditChart.jsx +++ b/apps/spreadsheeteditor/mobile/src/view/edit/EditChart.jsx @@ -263,9 +263,20 @@ const PageLayout = props => { const { t } = useTranslation(); const _t = t('View.Edit', {returnObjects: true}); const storeFocusObjects = props.storeFocusObjects; + const storeChartSettings = props.storeChartSettings; const chartProperties = storeFocusObjects.chartObject.get_ChartProperties(); const chartType = chartProperties.getType(); + storeChartSettings.initChartLayout(chartProperties); + + const chartTitle = storeChartSettings.chartTitle; + const chartLegend = storeChartSettings.chartLegend; + const chartAxisHorTitle = storeChartSettings.chartAxisHorTitle; + const chartAxisVertTitle = storeChartSettings.chartAxisVertTitle; + const chartHorGridlines = storeChartSettings.chartHorGridlines; + const chartVertGridlines = storeChartSettings.chartVertGridlines; + const chartDataLabel = storeChartSettings.chartDataLabel; + let dataLabelPos = [ { value: Asc.c_oAscChartDataLabelsPos.none, displayValue: _t.textNone }, { value: Asc.c_oAscChartDataLabelsPos.ctr, displayValue: _t.textCenter } @@ -304,11 +315,7 @@ const PageLayout = props => { ); } - const disableSetting = ( - chartType == Asc.c_oAscChartTypeSettings.pie || - chartType == Asc.c_oAscChartTypeSettings.doughnut || - chartType == Asc.c_oAscChartTypeSettings.pie3d - ); + const disableSetting = props.disableSetting; const chartLayoutTitles = { 0: `${_t.textNone}`, @@ -322,29 +329,105 @@ const PageLayout = props => { 2: `${_t.textTop}`, 3: `${_t.textRight}`, 4: `${_t.textBottom}`, - 5: `${_t.textLeftOverlay}`, - 6: `${_t.textRightOverlay}` + // 5: `${_t.textLeftOverlay}`, + // 6: `${_t.textRightOverlay}` } + const chartLayoutAxisTitleHorizontal = { + 0: { + displayValue: `${_t.textNone}`, + value: 0 + }, + 2: { + displayValue: `${_t.textNoOverlay}`, + value: 1 + } + } + + const chartLayoutAxisTitleVertical = { + 0: `${_t.textNone}`, + 1: `${_t.textRotated}`, + 3: `${_t.textHorizontal}` + } + + const chartLayoutGridlinesHorizontal = { + 0: `${_t.textNone}`, + 1: `${_t.textMajor}`, + 2: `${_t.textMinor}`, + 3: `${_t.textMajorAndMinor}` + } + + const chartLayoutGridlinesVertical = { + 0: `${_t.textNone}`, + 1: `${_t.textMajor}`, + 2: `${_t.textMinor}`, + 3: `${_t.textMajorAndMinor}` + } + + const chartDataLabels = { + 0: `${_t.textNone}`, + 3: `${_t.textCenter}`, + 2: `${_t.textFit}`, + 5: `${_t.textInnerTop}`, + 7: `${_t.textOuterTop}` + } + + console.log(chartProperties.getVertGridLines()); + + return ( - - + + + + {_t.textAxisTitle} - - + + + + {_t.textGridlines} - - + + + + - + + ) @@ -353,14 +436,22 @@ const PageLayout = props => { const PageChartTitle = props => { const { t } = useTranslation(); const _t = t('View.Edit', {returnObjects: true}); + const storeChartSettings = props.storeChartSettings; + const chartLayoutTitles = props.chartLayoutTitles; + const currentTitle = storeChartSettings.chartTitle; return ( - - - + {Object.keys(chartLayoutTitles).map(key => { + return ( + { + storeChartSettings.changeChartTitle(+key); + props.setLayoutProperty('putTitle', key); + }}> + ) + })} ) @@ -369,18 +460,22 @@ const PageChartTitle = props => { const PageLegend = props => { const { t } = useTranslation(); const _t = t('View.Edit', {returnObjects: true}); + const storeChartSettings = props.storeChartSettings; + const chartLayoutLegends = props.chartLayoutLegends; + const currentLegend = storeChartSettings.chartLegend; return ( - - - - - - - + {Object.keys(chartLayoutLegends).map(key => { + return ( + { + storeChartSettings.changeChartLegend(+key); + props.setLayoutProperty('putLegendPos', key); + }}> + ) + })} ) @@ -389,13 +484,23 @@ const PageLegend = props => { const PageHorizontalAxisTitle = props => { const { t } = useTranslation(); const _t = t('View.Edit', {returnObjects: true}); + const storeChartSettings = props.storeChartSettings; + const chartLayoutAxisTitleHorizontal = props.chartLayoutAxisTitleHorizontal; + const currentAxisHorTitle = storeChartSettings.chartAxisHorTitle; return ( - - + {Object.keys(chartLayoutAxisTitleHorizontal).map(key => { + return ( + { + console.log(chartLayoutAxisTitleHorizontal[key].value); + storeChartSettings.changeChartAxisHorTitle(chartLayoutAxisTitleHorizontal[key].value); + props.setLayoutProperty('putHorAxisLabel', chartLayoutAxisTitleHorizontal[key].value); + }}> + ) + })} ) @@ -404,14 +509,22 @@ const PageHorizontalAxisTitle = props => { const PageVerticalAxisTitle = props => { const { t } = useTranslation(); const _t = t('View.Edit', {returnObjects: true}); + const storeChartSettings = props.storeChartSettings; + const chartLayoutAxisTitleVertical = props.chartLayoutAxisTitleVertical; + const currentAxisVertTitle = storeChartSettings.chartAxisVertTitle; return ( - - - + {Object.keys(chartLayoutAxisTitleVertical).map(key => { + return ( + { + storeChartSettings.changeChartAxisVertTitle(+key); + props.setLayoutProperty('putVertAxisLabel', key); + }}> + ) + })} ) @@ -420,15 +533,22 @@ const PageVerticalAxisTitle = props => { const PageHorizontalGridlines = props => { const { t } = useTranslation(); const _t = t('View.Edit', {returnObjects: true}); + const storeChartSettings = props.storeChartSettings; + const chartLayoutGridlinesHorizontal = props.chartLayoutGridlinesHorizontal; + const currentChartHorGridlines = storeChartSettings.chartHorGridlines; return ( - - - - + {Object.keys(chartLayoutGridlinesHorizontal).map(key => { + return ( + { + storeChartSettings.changeChartHorGridlines(+key); + props.setLayoutProperty('putHorGridLines', key); + }}> + ) + })} ) @@ -437,15 +557,22 @@ const PageHorizontalGridlines = props => { const PageVerticalGridlines = props => { const { t } = useTranslation(); const _t = t('View.Edit', {returnObjects: true}); + const storeChartSettings = props.storeChartSettings; + const chartLayoutGridlinesVertical = props.chartLayoutGridlinesVertical; + const currentChartVertGridlines = storeChartSettings.chartVertGridlines; return ( - - - - + {Object.keys(chartLayoutGridlinesVertical).map(key => { + return ( + { + storeChartSettings.changeChartVertGridlines(+key); + props.setLayoutProperty('putVertGridLines', key); + }}> + ) + })} ) @@ -454,16 +581,22 @@ const PageVerticalGridlines = props => { const PageDataLabels = props => { const { t } = useTranslation(); const _t = t('View.Edit', {returnObjects: true}); - + const storeChartSettings = props.storeChartSettings; + const chartDataLabels = props.chartDataLabels; + const currentChartDataLabel = storeChartSettings.chartDataLabel; + return ( - - - - - + {Object.keys(chartDataLabels).map(key => { + return ( + { + storeChartSettings.changeChartDataLabel(+key); + props.setLayoutProperty('putDataLabelsPos', key); + }}> + ) + })} ) @@ -492,7 +625,10 @@ const EditChart = props => { onBorderColor: props.onBorderColor, onBorderSize: props.onBorderSize }}> - + Date: Mon, 15 Feb 2021 23:51:33 +0300 Subject: [PATCH 09/27] [SSE mobile] Added Chart Settings --- apps/common/mobile/resources/less/common.less | 30 + apps/spreadsheeteditor/mobile/locale/en.json | 33 +- .../mobile/src/controller/edit/EditChart.jsx | 235 +++++++ .../mobile/src/store/chartSettings.js | 66 ++ .../mobile/src/view/edit/Edit.jsx | 57 +- .../mobile/src/view/edit/EditChart.jsx | 650 +++++++++++++++++- 6 files changed, 1058 insertions(+), 13 deletions(-) diff --git a/apps/common/mobile/resources/less/common.less b/apps/common/mobile/resources/less/common.less index 2cb8512d6..6e9f78b4a 100644 --- a/apps/common/mobile/resources/less/common.less +++ b/apps/common/mobile/resources/less/common.less @@ -3,6 +3,7 @@ @black: #000000; @gray: #c4c4c4; @green: #4cd964; +@darkGreen: #40865c; @red: #f00; @background-normal: @white; @autoColor: @black; @@ -455,3 +456,32 @@ .encoded-svg-background(''); } } + +.list-block .item-input { + width: 100%; + margin-top: -8px; + margin-bottom: -7px; + flex-shrink: 1; +} + +.item-content .item-after input.field.right { + text-align: right; +} + +.item-content .item-after input.field { + color: @darkGreen; +} + +input[type="number"]::-webkit-outer-spin-button, +input[type="number"]::-webkit-inner-spin-button { + -webkit-appearance: none; + margin: 0; +} + +input[type="number"]::placeholder { + color: @darkGreen; +} +input[type="number"]::-webkit-input-placeholder {color: @darkGreen;} +input[type="number"]::-moz-placeholder {color: @darkGreen;} +input[type="number"]:-moz-placeholder {color: @darkGreen;} +input[type="number"]:-ms-input-placeholder {color: @darkGreen;} diff --git a/apps/spreadsheeteditor/mobile/locale/en.json b/apps/spreadsheeteditor/mobile/locale/en.json index 6377bc794..ad3b53b46 100644 --- a/apps/spreadsheeteditor/mobile/locale/en.json +++ b/apps/spreadsheeteditor/mobile/locale/en.json @@ -169,7 +169,38 @@ "textInnerBottom": "Inner Bottom", "textInnerTop": "Inner Top", "textOuterTop": "Outer Top", - "textFit": "Fit Width" + "textFit": "Fit Width", + "textMinimumValue": "Minimum Value", + "textMaximumValue": "Maximum Value", + "textAxisCrosses": "Axis Crosses", + "textDisplayUnits": "Display Units", + "textValuesInReverseOrder": "Values in Reverse Order", + "textTickOptions": "Tick Options", + "textMajorType": "Major Type", + "textMinorType": "Minor Type", + "textLabelOptions": "Label Options", + "textLabelPosition": "Label Position", + "textAxisOptions": "Axis Options", + "textValue": "Value", + "textHundreds": "Hundreds", + "textThousands": "Thousands", + "textMillions": "Millions", + "textBillions": "Billions", + "textTrillions": "Trillions", + "textTenThousands": "10 000", + "textHundredThousands": "100 000", + "textTenMillions": "10 000 000", + "textHundredMil": "100 000 000", + "textCross": "Cross", + "textIn": "In", + "textOut": "Out", + "textLow": "Low", + "textHigh": "High", + "textNextToAxis": "Next to Axis", + "textCrossesValue": "Crosses Value", + "textOnTickMarks": "On Tick Marks", + "textBetweenTickMarks": "Between Tick Marks", + "textAxisPosition": "Axis Position" } }, "Common": { diff --git a/apps/spreadsheeteditor/mobile/src/controller/edit/EditChart.jsx b/apps/spreadsheeteditor/mobile/src/controller/edit/EditChart.jsx index 0196bd7af..8bd938360 100644 --- a/apps/spreadsheeteditor/mobile/src/controller/edit/EditChart.jsx +++ b/apps/spreadsheeteditor/mobile/src/controller/edit/EditChart.jsx @@ -13,6 +13,22 @@ class EditChartController extends Component { this.onStyle = this.onStyle.bind(this); this.onBorderColor = this.onBorderColor.bind(this); this.onBorderSize = this.onBorderSize.bind(this); + this.onVerAxisMinValue = this.onVerAxisMinValue.bind(this); + this.onVerAxisMaxValue = this.onVerAxisMaxValue.bind(this); + this.onVerAxisCrossType = this.onVerAxisCrossType.bind(this); + this.onVerAxisCrossValue = this.onVerAxisCrossValue.bind(this); + this.onVerAxisDisplayUnits = this.onVerAxisDisplayUnits.bind(this); + this.onVerAxisReverse = this.onVerAxisReverse.bind(this); + this.onVerAxisTickMajor = this.onVerAxisTickMajor.bind(this); + this.onVerAxisTickMinor = this.onVerAxisTickMinor.bind(this); + this.onVerAxisLabelPos = this.onVerAxisLabelPos.bind(this); + this.onHorAxisCrossType = this.onHorAxisCrossType.bind(this); + this.onHorAxisCrossValue = this.onHorAxisCrossValue.bind(this); + this.onHorAxisPos = this.onHorAxisPos.bind(this); + this.onHorAxisReverse = this.onHorAxisReverse.bind(this); + this.onHorAxisTickMajor = this.onHorAxisTickMajor.bind(this); + this.onHorAxisTickMinor = this.onHorAxisTickMinor.bind(this); + this.onHorAxisLabelPos = this.onHorAxisLabelPos.bind(this); } closeModal() { @@ -160,7 +176,206 @@ class EditChartController extends Component { api.asc_editChartDrawingObject(chartObject); } + } + initVertAxis() { + const api = Common.EditorApi.get(); + const chartProperty = api.asc_getChartObject(); + + let verAxisProps = chartProperty.getVertAxisProps(); + let axisVertProps = (verAxisProps.getAxisType() == Asc.c_oAscAxisType.val) ? verAxisProps : chartProperty.getHorAxisProps(); + + return axisVertProps; + } + + getVerticalAxisProp() { + const api = Common.EditorApi.get(); + let chartObject = api.asc_getChartObject(), + verAxisProps = chartObject.getVertAxisProps(); + + return (verAxisProps.getAxisType() == Asc.c_oAscAxisType.val) ? verAxisProps : chartObject.getHorAxisProps(); + } + + setVerticalAxisProp(axisProps) { + const api = Common.EditorApi.get(); + let chartObject = api.asc_getChartObject(), + verAxisProps = chartObject.getVertAxisProps(); + + if (chartObject) { + chartObject[(verAxisProps.getAxisType() == Asc.c_oAscAxisType.val) ? 'putVertAxisProps' : 'putHorAxisProps'](axisProps); + api.asc_editChartDrawingObject(chartObject); + } + } + + onVerAxisMinValue(value) { + let axisProps = this.getVerticalAxisProp(), + axisRule = !value ? Asc.c_oAscValAxisRule.auto : Asc.c_oAscValAxisRule.fixed; + + axisProps.putMinValRule(axisRule); + + if (axisRule == Asc.c_oAscValAxisRule.fixed) { + axisProps.putMinVal(+value); + } + + this.setVerticalAxisProp(axisProps); + } + + onVerAxisMaxValue(value) { + let axisProps = this.getVerticalAxisProp(), + axisRule = !value ? Asc.c_oAscValAxisRule.auto : Asc.c_oAscValAxisRule.fixed; + + axisProps.putMaxValRule(axisRule); + + if (axisRule == Asc.c_oAscValAxisRule.fixed) { + axisProps.putMaxVal(+value); + } + + this.setVerticalAxisProp(axisProps); + } + + onVerAxisCrossType(value) { + let axisProps = this.getVerticalAxisProp(); + + axisProps.putCrossesRule(+value); + + this.setVerticalAxisProp(axisProps); + } + + onVerAxisCrossValue(value) { + let axisProps = this.getVerticalAxisProp(); + + axisProps.putCrossesRule(Asc.c_oAscCrossesRule.value); + axisProps.putCrosses(+value); + + this.setVerticalAxisProp(axisProps); + } + + onVerAxisDisplayUnits(value) { + let axisProps = this.getVerticalAxisProp(); + + axisProps.putDispUnitsRule(+value); + + this.setVerticalAxisProp(axisProps); + } + + onVerAxisReverse(value) { + let axisProps = this.getVerticalAxisProp(); + + axisProps.putInvertValOrder(value); + + this.setVerticalAxisProp(axisProps); + } + + onVerAxisTickMajor(value) { + let axisProps = this.getVerticalAxisProp(); + + axisProps.putMajorTickMark(+value); + + this.setVerticalAxisProp(axisProps); + } + + onVerAxisTickMinor(value) { + let axisProps = this.getVerticalAxisProp(); + + axisProps.putMinorTickMark(+value); + + this.setVerticalAxisProp(axisProps); + } + + onVerAxisLabelPos(value) { + let axisProps = this.getVerticalAxisProp(); + + axisProps.putTickLabelsPos(+value); + + this.setVerticalAxisProp(axisProps); + } + + // Horizontal + + initHorAxis() { + const api = Common.EditorApi.get(); + const chartProperty = api.asc_getChartObject(); + + let horAxisProps = chartProperty.getHorAxisProps(); + let axisHorProps = (horAxisProps.getAxisType() == Asc.c_oAscAxisType.val) ? chartProperty.getVertAxisProps() : horAxisProps; + + return axisHorProps; + } + + getHorizontalAxisProp() { + const api = Common.EditorApi.get(); + let chartObject = api.asc_getChartObject(), + verHorProps = chartObject.getHorAxisProps(); + + return (verHorProps.getAxisType() == Asc.c_oAscAxisType.val) ? chartObject.getVertAxisProps() : verHorProps; + } + + setHorizontalAxisProp(axisProps) { + const api = Common.EditorApi.get(); + let chartObject = api.asc_getChartObject(), + verAxisProps = chartObject.getHorAxisProps(); + + if (chartObject) { + chartObject[(verAxisProps.getAxisType() == Asc.c_oAscAxisType.val) ? 'putVertAxisProps' : 'putHorAxisProps'](axisProps); + api.asc_editChartDrawingObject(chartObject); + } + } + + onHorAxisCrossType(value) { + let axisProps = this.getHorizontalAxisProp(); + + axisProps.putCrossesRule(+value); + + this.setHorizontalAxisProp(axisProps); + } + + onHorAxisCrossValue(value) { + let axisProps = this.getHorizontalAxisProp(); + + axisProps.putCrossesRule(Asc.c_oAscCrossesRule.value); + axisProps.putCrosses(+value); + + this.setHorizontalAxisProp(axisProps); + } + + onHorAxisPos(value) { + let axisProps = this.getHorizontalAxisProp(); + + axisProps.putLabelsPosition(+value); + + this.setHorizontalAxisProp(axisProps); + } + + onHorAxisReverse(value) { + let axisProps = this.getHorizontalAxisProp(); + + axisProps.putInvertCatOrder(value); + + this.setHorizontalAxisProp(axisProps); + } + + onHorAxisTickMajor(value) { + let axisProps = this.getHorizontalAxisProp(); + + axisProps.putMajorTickMark(+value); + + this.setHorizontalAxisProp(axisProps); + } + + onHorAxisTickMinor(value) { + let axisProps = this.getHorizontalAxisProp(); + + axisProps.putMinorTickMark(+value); + + this.setHorizontalAxisProp(axisProps); + } + + onHorAxisLabelPos(value) { + let axisProps = this.getHorizontalAxisProp(); + + axisProps.putTickLabelsPos(+value); + + this.setHorizontalAxisProp(axisProps); } render () { @@ -174,6 +389,26 @@ class EditChartController extends Component { onStyle={this.onStyle} onRemoveChart={this.onRemoveChart} setLayoutProperty={this.setLayoutProperty} + initVertAxis={this.initVertAxis} + onVerAxisMinValue={this.onVerAxisMinValue} + onVerAxisMaxValue={this.onVerAxisMaxValue} + onVerAxisCrossType={this.onVerAxisCrossType} + onVerAxisCrossValue={this.onVerAxisCrossValue} + onVerAxisDisplayUnits={this.onVerAxisDisplayUnits} + onVerAxisReverse={this.onVerAxisReverse} + onVerAxisTickMajor={this.onVerAxisTickMajor} + onVerAxisTickMinor={this.onVerAxisTickMinor} + onVerAxisLabelPos={this.onVerAxisLabelPos} + initHorAxis={this.initHorAxis} + getHorizontalAxisProp={this.getHorizontalAxisProp} + setHorizontalAxisProp={this.setHorizontalAxisProp} + onHorAxisCrossType={this.onHorAxisCrossType} + onHorAxisCrossValue={this.onHorAxisCrossValue} + onHorAxisPos={this.onHorAxisPos} + onHorAxisReverse={this.onHorAxisReverse} + onHorAxisTickMajor={this.onHorAxisTickMajor} + onHorAxisTickMinor={this.onHorAxisTickMinor} + onHorAxisLabelPos={this.onHorAxisLabelPos} /> ) } diff --git a/apps/spreadsheeteditor/mobile/src/store/chartSettings.js b/apps/spreadsheeteditor/mobile/src/store/chartSettings.js index 6c93b403e..035358842 100644 --- a/apps/spreadsheeteditor/mobile/src/store/chartSettings.js +++ b/apps/spreadsheeteditor/mobile/src/store/chartSettings.js @@ -75,6 +75,72 @@ export class storeChartSettings { this.chartDataLabel = value; } + @observable axisVertCrosses = undefined; + @observable axisHorCrosses = undefined; + @observable displayUnits = undefined; + @observable valuesVertReverseOrder = undefined; + @observable valuesHorReverseOrder = undefined; + @observable vertMajorType = undefined; + @observable vertMinorType = undefined; + @observable vertLabelPosition = undefined; + @observable horMajorType = undefined; + @observable horMinorType = undefined; + @observable horLabelPosition = undefined; + @observable axisPosition = undefined; + + // Vertical + + @action changeVertAxisCrosses(value) { + this.axisVertCrosses = value; + } + + @action changeDisplayUnits(value) { + this.displayUnits = value; + } + + @action toggleVertValuesReverseOrder(value) { + this.valuesVertReverseOrder = value; + } + + @action changeVertMajorType(value) + { + this.vertMajorType = value; + } + + @action changeVertMinorType(value) { + this.vertMinorType = value; + } + + @action changeVertLabelPosition(value) { + this.vertLabelPosition = value; + } + + // Horizontal + + @action changeHorAxisCrosses(value) { + this.axisHorCrosses = value; + } + + @action toggleHorValuesReverseOrder(value) { + this.valuesHorReverseOrder = value; + } + + @action changeHorMajorType(value){ + this.horMajorType = value; + } + + @action changeHorMinorType(value) { + this.horMinorType = value; + } + + @action changeHorLabelPosition(value) { + this.horLabelPosition = value; + } + + @action changeAxisPosition(value) { + this.axisPosition = value; + } + @observable chartStyles = null; @action clearChartStyles () { diff --git a/apps/spreadsheeteditor/mobile/src/view/edit/Edit.jsx b/apps/spreadsheeteditor/mobile/src/view/edit/Edit.jsx index 787a603e3..01e02e623 100644 --- a/apps/spreadsheeteditor/mobile/src/view/edit/Edit.jsx +++ b/apps/spreadsheeteditor/mobile/src/view/edit/Edit.jsx @@ -15,7 +15,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, PageChartLegend, PageChartTitle, PageChartHorizontalAxisTitle, PageChartVerticalAxisTitle, PageChartHorizontalGridlines, PageChartVerticalGridlines, PageChartDataLabels } from './EditChart'; +import { PageChartStyle, PageChartCustomFillColor, PageChartBorderColor, PageChartCustomBorderColor, PageChartReorder, PageChartLayout, PageChartLegend, PageChartTitle, PageChartHorizontalAxisTitle, PageChartVerticalAxisTitle, PageChartHorizontalGridlines, PageChartVerticalGridlines, PageChartDataLabels, PageChartVerticalAxis, PageChartVertAxisCrosses, PageChartDisplayUnits, PageChartVertMajorType, PageChartVertMinorType, PageChartVertLabelPosition, PageChartHorizontalAxis, PageChartHorAxisCrosses, PageChartHorAxisPosition, PageChartHorMajorType, PageChartHorMinorType, PageChartHorLabelPosition } from './EditChart'; const routes = [ @@ -200,8 +200,63 @@ const routes = [ { path: '/edit-data-labels/', component: PageChartDataLabels + }, + + // Vertical Axis + + { + path: '/edit-chart-vertical-axis/', + component: PageChartVerticalAxis + }, + { + path: '/edit-vert-axis-crosses/', + component: PageChartVertAxisCrosses + }, + { + path: '/edit-display-units/', + component: PageChartDisplayUnits + }, + { + path: '/edit-vert-major-type/', + component: PageChartVertMajorType + }, + { + path: '/edit-vert-minor-type/', + component: PageChartVertMinorType + }, + { + path: '/edit-vert-label-position/', + component: PageChartVertLabelPosition + }, + + // Horizontal Axis + + { + path: '/edit-chart-horizontal-axis/', + component: PageChartHorizontalAxis + }, + { + path: '/edit-hor-axis-crosses/', + component: PageChartHorAxisCrosses + }, + { + path: '/edit-hor-axis-position/', + component: PageChartHorAxisPosition + }, + { + path: '/edit-hor-major-type/', + component: PageChartHorMajorType + }, + { + path: '/edit-hor-minor-type/', + component: PageChartHorMinorType + }, + { + path: '/edit-hor-label-position/', + component: PageChartHorLabelPosition } + ]; const EmptyEditLayout = () => { diff --git a/apps/spreadsheeteditor/mobile/src/view/edit/EditChart.jsx b/apps/spreadsheeteditor/mobile/src/view/edit/EditChart.jsx index 3fba41874..c73280b5e 100644 --- a/apps/spreadsheeteditor/mobile/src/view/edit/EditChart.jsx +++ b/apps/spreadsheeteditor/mobile/src/view/edit/EditChart.jsx @@ -1,6 +1,6 @@ -import React, {Fragment, useState} from 'react'; +import React, {Fragment, useState, useEffect} from 'react'; import {observer, inject} from "mobx-react"; -import {List, ListItem, ListButton, Icon, Row, Page, Navbar, BlockTitle, Toggle, Range, Link, Tabs, Tab, NavTitle, NavRight} from 'framework7-react'; +import {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"; @@ -329,8 +329,8 @@ const PageLayout = props => { 2: `${_t.textTop}`, 3: `${_t.textRight}`, 4: `${_t.textBottom}`, - // 5: `${_t.textLeftOverlay}`, - // 6: `${_t.textRightOverlay}` + 5: `${_t.textLeftOverlay}`, + 6: `${_t.textRightOverlay}` } const chartLayoutAxisTitleHorizontal = { @@ -372,9 +372,6 @@ const PageLayout = props => { 7: `${_t.textOuterTop}` } - console.log(chartProperties.getVertGridLines()); - - return ( @@ -602,6 +599,593 @@ const PageDataLabels = props => { ) } +const PageVerticalAxis = props => { + const { t } = useTranslation(); + const _t = t('View.Edit', {returnObjects: true}); + const storeChartSettings = props.storeChartSettings; + const axisProps = props.initVertAxis(); + const crossValue = axisProps.getCrossesRule(); + + const axisCrosses = [ + {display: `${_t.textAuto}`, value: Asc.c_oAscCrossesRule.auto}, + {display: `${_t.textValue}`, value: Asc.c_oAscCrossesRule.value}, + {display: `${_t.textMinimumValue}`, value: Asc.c_oAscCrossesRule.minValue}, + {display: `${_t.textMaximumValue}`, value: Asc.c_oAscCrossesRule.maxValue} + ]; + + const vertAxisDisplayUnits = [ + {display: `${_t.textNone}`, value: Asc.c_oAscValAxUnits.none}, + {display: `${_t.textHundreds}`, value: Asc.c_oAscValAxUnits.HUNDREDS}, + {display: `${_t.textThousands}`, value: Asc.c_oAscValAxUnits.THOUSANDS}, + {display: `${_t.textTenThousands}`, value: Asc.c_oAscValAxUnits.TEN_THOUSANDS}, + {display: `${_t.textHundredThousands}`, value: Asc.c_oAscValAxUnits.HUNDRED_THOUSANDS}, + {display: `${_t.textMillions}`, value: Asc.c_oAscValAxUnits.MILLIONS}, + {display: `${_t.textTenMillions}`, value: Asc.c_oAscValAxUnits.TEN_MILLIONS}, + {display: `${_t.textHundredMil}`, value: Asc.c_oAscValAxUnits.HUNDRED_MILLIONS}, + {display: `${_t.textBillions}`, value: Asc.c_oAscValAxUnits.BILLIONS}, + {display: `${_t.textTrillions}`, value: Asc.c_oAscValAxUnits.TRILLIONS} + ]; + + const tickOptions = [ + {display: `${_t.textNone}`, value: Asc.c_oAscTickMark.TICK_MARK_NONE}, + {display: `${_t.textCross}`, value: Asc.c_oAscTickMark.TICK_MARK_CROSS}, + {display: `${_t.textIn}`, value: Asc.c_oAscTickMark.TICK_MARK_IN}, + {display: `${_t.textOut}`, value: Asc.c_oAscTickMark.TICK_MARK_OUT} + ]; + + const verticalAxisLabelsPosition = [ + {display: `${_t.textNone}`, value: Asc.c_oAscTickLabelsPos.TICK_LABEL_POSITION_NONE}, + {display: `${_t.textLow}`, value: Asc.c_oAscTickLabelsPos.TICK_LABEL_POSITION_LOW}, + {display: `${_t.textHigh}`, value: Asc.c_oAscTickLabelsPos.TICK_LABEL_POSITION_HIGH}, + {display: `${_t.textNextToAxis}`, value: Asc.c_oAscTickLabelsPos.TICK_LABEL_POSITION_NEXT_TO} + ]; + + const defineCurrentAxisCrosses = () => axisCrosses.find(elem => elem.value === crossValue); + const currentAxisCrosses = defineCurrentAxisCrosses(); + + if(!storeChartSettings.axisVertCrosses) { + storeChartSettings.changeVertAxisCrosses(currentAxisCrosses); + } + + // console.log(storeChartSettings.axisCrosses); + + const defineCurrentDisplayUnits = () => vertAxisDisplayUnits.find(elem => elem.value === axisProps.getDispUnitsRule()); + const currentDisplayUnits = defineCurrentDisplayUnits(); + + if(!storeChartSettings.displayUnits) { + storeChartSettings.changeDisplayUnits(currentDisplayUnits); + } + + // console.log(storeChartSettings.displayUnits); + + if(storeChartSettings.valuesVertReverseOrder == undefined) { + storeChartSettings.toggleVertValuesReverseOrder(axisProps.getInvertValOrder()); + } + + const valueMajorType = axisProps.getMajorTickMark(); + const valueMinorType = axisProps.getMinorTickMark(); + const defineCurrentTickOption = (elemType) => tickOptions.find(elem => elem.value === elemType); + const currentMajorType = defineCurrentTickOption(valueMajorType); + + if(!storeChartSettings.vertMajorType) { + storeChartSettings.changeVertMajorType(currentMajorType); + } + + const currentMinorType = defineCurrentTickOption(valueMinorType); + + if(!storeChartSettings.vertMinorType) { + storeChartSettings.changeVertMinorType(currentMinorType); + } + + // console.log(storeChartSettings.vertMajorType); + // console.log(storeChartSettings.vertMinorType); + + const defineLabelsPosition = () => verticalAxisLabelsPosition.find(elem => elem.value === axisProps.getTickLabelsPos()); + const currentLabelsPosition = defineLabelsPosition(); + + if(!storeChartSettings.vertLabelPosition) { + storeChartSettings.changeVertLabelPosition(currentLabelsPosition); + } + + // console.log(storeChartSettings.vertLabelPosition); + + const [minValue, setMinValue] = useState(axisProps.getMinValRule() == Asc.c_oAscValAxisRule.auto ? '' : axisProps.getMinVal()); + const [maxValue, setMaxValue] = useState(axisProps.getMaxValRule() == Asc.c_oAscValAxisRule.auto ? '' : axisProps.getMaxVal()); + + const currentCrossesValue = axisProps.getCrosses(); + const [crossesValue, setCrossesValue] = useState(!currentCrossesValue ? '' : currentCrossesValue); + + return ( + + + + +
+
+ props.onVerAxisMinValue(e.target.value)} + onInput={e => setMinValue(e.target.value)} placeholder="Auto" /> +
+
+
+ +
+
+ props.onVerAxisMaxValue(e.target.value)} + onInput={e => setMaxValue(e.target.value)} placeholder="Auto" /> +
+
+
+
+ + + {storeChartSettings.axisVertCrosses.value == Asc.c_oAscCrossesRule.value ? ( + +
+
+ props.onVerAxisCrossValue(e.target.value)} + onInput={e => setCrossesValue(e.target.value)} placeholder="0" /> +
+
+
+ ) : null} +
+ + + +
+ { + storeChartSettings.toggleVertValuesReverseOrder(!storeChartSettings.valuesVertReverseOrder); + props.onVerAxisReverse(!storeChartSettings.valuesVertReverseOrder); + }} /> +
+
+
+ {_t.textTickOptions} + + + + + {_t.textLabelOptions} + + + +
+ ) +} + +const PageVertAxisCrosses = props => { + const { t } = useTranslation(); + const _t = t('View.Edit', {returnObjects: true}); + const storeChartSettings = props.storeChartSettings; + const currentAxisCrosses = storeChartSettings.axisVertCrosses; + const axisCrosses = props.axisCrosses; + + return ( + + + + {axisCrosses.map((elem, index) => { + return ( + { + storeChartSettings.changeVertAxisCrosses(elem); + props.onVerAxisCrossType(elem.value); + }}> + + ) + })} + + + ) +} + +const PageDisplayUnits = props => { + const { t } = useTranslation(); + const _t = t('View.Edit', {returnObjects: true}); + const storeChartSettings = props.storeChartSettings; + const displayUnits = storeChartSettings.displayUnits; + const vertAxisDisplayUnits = props.vertAxisDisplayUnits; + + return ( + + + + {vertAxisDisplayUnits.map((elem, index) => { + return ( + { + storeChartSettings.changeDisplayUnits(elem); + props.onVerAxisDisplayUnits(elem.value); + }}> + + ) + })} + + + ) +} + +const PageVertMajorType = props => { + const { t } = useTranslation(); + const _t = t('View.Edit', {returnObjects: true}); + const storeChartSettings = props.storeChartSettings; + const vertMajorType = storeChartSettings.vertMajorType; + const tickOptions = props.tickOptions; + + return ( + + + + {tickOptions.map((elem, index) => { + return ( + { + storeChartSettings.changeVertMajorType(elem); + props.onVerAxisTickMajor(elem.value); + }}> + + ) + })} + + + ) +} + +const PageVertMinorType = props => { + const { t } = useTranslation(); + const _t = t('View.Edit', {returnObjects: true}); + const storeChartSettings = props.storeChartSettings; + const vertMinorType = storeChartSettings.vertMinorType; + const tickOptions = props.tickOptions; + + return ( + + + + {tickOptions.map((elem, index) => { + return ( + { + storeChartSettings.changeVertMinorType(elem); + props.onVerAxisTickMinor(elem.value); + }}> + + ) + })} + + + ) +} + +const PageVertLabelPosition = props => { + const { t } = useTranslation(); + const _t = t('View.Edit', {returnObjects: true}); + const storeChartSettings = props.storeChartSettings; + const vertLabelPosition = storeChartSettings.vertLabelPosition; + const verticalAxisLabelsPosition = props.verticalAxisLabelsPosition; + + return ( + + + + {verticalAxisLabelsPosition.map((elem, index) => { + return ( + { + storeChartSettings.changeVertLabelPosition(elem); + props.onVerAxisLabelPos(elem.value); + }}> + + ) + })} + + + ) +} + +const PageHorizontalAxis = props => { + const { t } = useTranslation(); + const _t = t('View.Edit', {returnObjects: true}); + const storeChartSettings = props.storeChartSettings; + const axisProps = props.initHorAxis(); + const crossValue = axisProps.getCrossesRule(); + + const axisCrosses = [ + {display: `${_t.textAuto}`, value: Asc.c_oAscCrossesRule.auto}, + {display: `${_t.textValue}`, value: Asc.c_oAscCrossesRule.value}, + {display: `${_t.textMinimumValue}`, value: Asc.c_oAscCrossesRule.minValue}, + {display: `${_t.textMaximumValue}`, value: Asc.c_oAscCrossesRule.maxValue} + ]; + + const tickOptions = [ + {display: `${_t.textNone}`, value: Asc.c_oAscTickMark.TICK_MARK_NONE}, + {display: `${_t.textCross}`, value: Asc.c_oAscTickMark.TICK_MARK_CROSS}, + {display: `${_t.textIn}`, value: Asc.c_oAscTickMark.TICK_MARK_IN}, + {display: `${_t.textOut}`, value: Asc.c_oAscTickMark.TICK_MARK_OUT} + ]; + + const horAxisLabelsPosition = [ + {display: `${_t.textNone}`, value: Asc.c_oAscTickLabelsPos.TICK_LABEL_POSITION_NONE}, + {display: `${_t.textLow}`, value: Asc.c_oAscTickLabelsPos.TICK_LABEL_POSITION_LOW}, + {display: `${_t.textHigh}`, value: Asc.c_oAscTickLabelsPos.TICK_LABEL_POSITION_HIGH}, + {display: `${_t.textNextToAxis}`, value: Asc.c_oAscTickLabelsPos.TICK_LABEL_POSITION_NEXT_TO} + ]; + + const horAxisPosition = [ + {display: `${_t.textOnTickMarks}`, value: Asc.c_oAscLabelsPosition.byDivisions}, + {display: `${_t.textBetweenTickMarks}`, value: Asc.c_oAscLabelsPosition.betweenDivisions} + ]; + + const defineCurrentAxisCrosses = () => axisCrosses.find(elem => elem.value === crossValue); + const currentAxisCrosses = defineCurrentAxisCrosses(); + + if(!storeChartSettings.axisHorCrosses) { + storeChartSettings.changeHorAxisCrosses(currentAxisCrosses); + } + + console.log(storeChartSettings.axisHorCrosses); + + const defineAxisPosition = () => horAxisPosition.find(elem => elem.value === axisProps.getLabelsPosition()); + const axisPosition = defineAxisPosition(); + + if(!storeChartSettings.axisPosition) { + storeChartSettings.changeAxisPosition(axisPosition); + } + + console.log(storeChartSettings.axisPosition) + + if(storeChartSettings.valuesHorReverseOrder == undefined) { + storeChartSettings.toggleHorValuesReverseOrder(axisProps.getInvertCatOrder()); + } + + console.log(storeChartSettings.valuesHorReverseOrder); + + const valueMajorType = axisProps.getMajorTickMark(); + const valueMinorType = axisProps.getMinorTickMark(); + const defineCurrentTickOption = (elemType) => tickOptions.find(elem => elem.value === elemType); + const currentMajorType = defineCurrentTickOption(valueMajorType); + + if(!storeChartSettings.horMajorType) { + storeChartSettings.changeHorMajorType(currentMajorType); + } + + const currentMinorType = defineCurrentTickOption(valueMinorType); + + if(!storeChartSettings.horMinorType) { + storeChartSettings.changeHorMinorType(currentMinorType); + } + + console.log(storeChartSettings.horMajorType); + console.log(storeChartSettings.horMinorType); + + const defineLabelsPosition = () => horAxisLabelsPosition.find(elem => elem.value === axisProps.getTickLabelsPos()); + const currentLabelsPosition = defineLabelsPosition(); + + if(!storeChartSettings.horLabelPosition) { + storeChartSettings.changeHorLabelPosition(currentLabelsPosition); + } + + console.log(storeChartSettings.horLabelPosition); + + const currentCrossesValue = axisProps.getCrosses(); + const [crossesValue, setCrossesValue] = useState(!currentCrossesValue ? '' : currentCrossesValue); + + return ( + + + + + {storeChartSettings.axisHorCrosses.value == Asc.c_oAscCrossesRule.value ? ( + +
+
+ props.onHorAxisCrossValue(e.target.value)} + onInput={e => setCrossesValue(e.target.value)} placeholder="0" /> +
+
+
+ ) : null} +
+ + + +
+ { + storeChartSettings.toggleHorValuesReverseOrder(!storeChartSettings.valuesHorReverseOrder); + props.onHorAxisReverse(!storeChartSettings.valuesHorReverseOrder); + }} /> +
+
+
+ {_t.textTickOptions} + + + + + {_t.textLabelOptions} + + + +
+ ) +} + +const PageHorAxisCrosses = props => { + const { t } = useTranslation(); + const _t = t('View.Edit', {returnObjects: true}); + const storeChartSettings = props.storeChartSettings; + const currentAxisCrosses = storeChartSettings.axisHorCrosses; + const axisCrosses = props.axisCrosses; + + return ( + + + + {axisCrosses.map((elem, index) => { + return ( + { + storeChartSettings.changeHorAxisCrosses(elem); + props.onHorAxisCrossType(elem.value); + }}> + + ) + })} + + + ) +} + +const PageHorAxisPosition = props => { + const { t } = useTranslation(); + const _t = t('View.Edit', {returnObjects: true}); + const storeChartSettings = props.storeChartSettings; + const axisPosition = storeChartSettings.axisPosition; + const horAxisPosition = props.horAxisPosition; + + return ( + + + + {horAxisPosition.map((elem, index) => { + return ( + { + storeChartSettings.changeAxisPosition(elem); + props.onHorAxisPos(elem.value); + }}> + + ) + })} + + + ) +} + +const PageHorMajorType = props => { + const { t } = useTranslation(); + const _t = t('View.Edit', {returnObjects: true}); + const storeChartSettings = props.storeChartSettings; + const horMajorType = storeChartSettings.horMajorType; + const tickOptions = props.tickOptions; + + return ( + + + + {tickOptions.map((elem, index) => { + return ( + { + storeChartSettings.changeHorMajorType(elem); + props.onHorAxisTickMajor(elem.value); + }}> + + ) + })} + + + ) +} + +const PageHorMinorType = props => { + const { t } = useTranslation(); + const _t = t('View.Edit', {returnObjects: true}); + const storeChartSettings = props.storeChartSettings; + const horMinorType = storeChartSettings.horMinorType; + const tickOptions = props.tickOptions; + + return ( + + + + {tickOptions.map((elem, index) => { + return ( + { + storeChartSettings.changeHorMinorType(elem); + props.onHorAxisTickMinor(elem.value); + }}> + + ) + })} + + + ) +} + +const PageHorLabelPosition = props => { + const { t } = useTranslation(); + const _t = t('View.Edit', {returnObjects: true}); + const storeChartSettings = props.storeChartSettings; + const horLabelPosition = storeChartSettings.horLabelPosition; + const horAxisLabelsPosition = props.horAxisLabelsPosition; + + return ( + + + + {horAxisLabelsPosition.map((elem, index) => { + return ( + { + storeChartSettings.changeHorLabelPosition(elem); + props.onHorAxisLabelPos(elem.value); + }}> + + ) + })} + + + ) +} + const EditChart = props => { const { t } = useTranslation(); const _t = t('View.Edit', {returnObjects: true}); @@ -629,8 +1213,28 @@ const EditChart = props => { disableSetting, setLayoutProperty: props.setLayoutProperty }}>
- - + + @@ -651,10 +1255,22 @@ const PageChartLayout = inject("storeChartSettings", "storeFocusObjects")(observ const PageChartLegend = inject("storeChartSettings")(observer(PageLegend)); const ChartTitle = inject("storeChartSettings")(observer(PageChartTitle)); const PageChartHorizontalAxisTitle = inject("storeChartSettings")(observer(PageHorizontalAxisTitle)); -const PageChartVerticalAxisTitle = inject("storeChartSettings")(observer(PageVerticalAxisTitle)); +const PageChartVerticalAxisTitle = inject("storeChartSettings", "storeFocusObjects")(observer(PageVerticalAxisTitle)); const PageChartHorizontalGridlines = inject("storeChartSettings")(observer(PageHorizontalGridlines)); const PageChartVerticalGridlines = inject("storeChartSettings")(observer(PageVerticalGridlines)); const PageChartDataLabels = inject("storeChartSettings")(observer(PageDataLabels)); +const PageChartVerticalAxis = inject("storeChartSettings")(observer(PageVerticalAxis)); +const PageChartVertAxisCrosses = inject("storeChartSettings")(observer(PageVertAxisCrosses)); +const PageChartDisplayUnits = inject("storeChartSettings")(observer(PageDisplayUnits)); +const PageChartVertMajorType = inject("storeChartSettings")(observer(PageVertMajorType)); +const PageChartVertMinorType = inject("storeChartSettings")(observer(PageVertMinorType)); +const PageChartVertLabelPosition = inject("storeChartSettings")(observer(PageVertLabelPosition)); +const PageChartHorizontalAxis = inject("storeChartSettings")(observer(PageHorizontalAxis)); +const PageChartHorAxisCrosses = inject("storeChartSettings")(observer(PageHorAxisCrosses)); +const PageChartHorAxisPosition = inject("storeChartSettings")(observer(PageHorAxisPosition)); +const PageChartHorMajorType = inject("storeChartSettings")(observer(PageHorMajorType)); +const PageChartHorMinorType = inject("storeChartSettings")(observer(PageHorMinorType)); +const PageChartHorLabelPosition = inject("storeChartSettings")(observer(PageHorLabelPosition)); export { PageEditChart as EditChart, @@ -670,5 +1286,17 @@ export { PageChartVerticalAxisTitle, PageChartHorizontalGridlines, PageChartVerticalGridlines, - PageChartDataLabels + PageChartDataLabels, + PageChartVerticalAxis, + PageChartVertAxisCrosses, + PageChartDisplayUnits, + PageChartVertMajorType, + PageChartVertMinorType, + PageChartVertLabelPosition, + PageChartHorizontalAxis, + PageChartHorAxisCrosses, + PageChartHorAxisPosition, + PageChartHorMajorType, + PageChartHorMinorType, + PageChartHorLabelPosition } \ No newline at end of file From 1cb18ade2501c2dfd73aef314444d55a48948d5f Mon Sep 17 00:00:00 2001 From: SergeyEzhin Date: Wed, 17 Feb 2021 14:28:02 +0300 Subject: [PATCH 10/27] [SSE mobile] Corrected Text Settings and Chart Settings --- .../lib/component/ThemeColorPalette.jsx | 1 - .../mobile/resources/less/common-ios.less | 29 ++++++ .../resources/less/common-material.less | 56 ++++++++++++ apps/common/mobile/resources/less/common.less | 23 +---- .../mobile/src/controller/edit/EditChart.jsx | 1 + .../mobile/src/store/chartSettings.js | 5 +- .../mobile/src/store/textSettings.js | 2 +- .../mobile/src/view/edit/EditChart.jsx | 89 +++++++++---------- .../mobile/src/view/edit/EditText.jsx | 8 +- 9 files changed, 136 insertions(+), 78 deletions(-) diff --git a/apps/common/mobile/lib/component/ThemeColorPalette.jsx b/apps/common/mobile/lib/component/ThemeColorPalette.jsx index c4f838112..2f1db482a 100644 --- a/apps/common/mobile/lib/component/ThemeColorPalette.jsx +++ b/apps/common/mobile/lib/component/ThemeColorPalette.jsx @@ -3,7 +3,6 @@ import { f7, ListItem, List, Icon } from 'framework7-react'; import { useTranslation } from 'react-i18next'; const ThemeColors = ({ themeColors, onColorClick, curColor }) => { - console.log(curColor); return (
{themeColors.map((row, rowIndex) => { diff --git a/apps/common/mobile/resources/less/common-ios.less b/apps/common/mobile/resources/less/common-ios.less index a03af5378..ea0beba5a 100644 --- a/apps/common/mobile/resources/less/common-ios.less +++ b/apps/common/mobile/resources/less/common-ios.less @@ -3,6 +3,7 @@ .device-ios { @blockTitleColor: #6d6d72; + @darkGreen: #40865c; --f7-navbar-link-color: @themeColor; --f7-navbar-text-color: @black; @@ -389,4 +390,32 @@ background-color: @white; } } + + // input[type="number"] + + .item-input { + width: 100%; + margin-top: -8px; + margin-bottom: -7px; + flex-shrink: 1; + } + + .item-content { + .item-after input { + height: 43px; + } + .item-after input.right { + text-align: right; + } + .item-after input.field { + color: @darkGreen; + } + } + + input[type="number"]::placeholder { color: @darkGreen;} + input[type="number"]::-webkit-input-placeholder {color: @darkGreen;} + input[type="number"]::-moz-placeholder {color: @darkGreen;} + input[type="number"]:-moz-placeholder {color: @darkGreen;} + input[type="number"]:-ms-input-placeholder {color: @darkGreen;} + } diff --git a/apps/common/mobile/resources/less/common-material.less b/apps/common/mobile/resources/less/common-material.less index 2dbc3ddf3..2b4c30547 100644 --- a/apps/common/mobile/resources/less/common-material.less +++ b/apps/common/mobile/resources/less/common-material.less @@ -3,6 +3,9 @@ @tabLinkColor: rgba(255,255,255,.7); @red: #f44336; @white: #fff; + @darkGreen: #40865c; + @darkGrey: #757575; + --f7-navbar-shadow-image: none; --f7-radio-active-color: @themeColor; --f7-toggle-active-color: @themeColor; @@ -278,7 +281,9 @@ } } } + // Color palette + #color-picker { .right-block { .button-round { @@ -286,4 +291,55 @@ } } } + + // input[type="number"] + + .list.inputs-list { + ul:after { + display: none; + } + .item-inner { + display: block; + margin-bottom: 4px; + padding-bottom: 0; + &:after { + display: none; + } + } + .item-input { + flex-shrink: 1; + font-size: 0; + position: relative; + margin-bottom: 4px; + min-height: 36px; + &:after { + content: ''; + position: absolute; + left: 0; + bottom: 0; + right: auto; + top: auto; + height: 1px; + width: 100%; + background-color: rgba(0,0,0,.12); + display: block; + z-index: 15; + transform-origin: 50% 100%; + transition: .2; + } + } + .item-link { + .item-inner .item-title { + font-size: 16px; + } + } + .item-after { + font-size: 14px; + color: @darkGrey; + div { + width: 100%; + } + } + } + } diff --git a/apps/common/mobile/resources/less/common.less b/apps/common/mobile/resources/less/common.less index 6e9f78b4a..0175df94a 100644 --- a/apps/common/mobile/resources/less/common.less +++ b/apps/common/mobile/resources/less/common.less @@ -3,7 +3,6 @@ @black: #000000; @gray: #c4c4c4; @green: #4cd964; -@darkGreen: #40865c; @red: #f00; @background-normal: @white; @autoColor: @black; @@ -457,20 +456,7 @@ } } -.list-block .item-input { - width: 100%; - margin-top: -8px; - margin-bottom: -7px; - flex-shrink: 1; -} - -.item-content .item-after input.field.right { - text-align: right; -} - -.item-content .item-after input.field { - color: @darkGreen; -} +// input[type="number"] input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button { @@ -478,10 +464,3 @@ input[type="number"]::-webkit-inner-spin-button { margin: 0; } -input[type="number"]::placeholder { - color: @darkGreen; -} -input[type="number"]::-webkit-input-placeholder {color: @darkGreen;} -input[type="number"]::-moz-placeholder {color: @darkGreen;} -input[type="number"]:-moz-placeholder {color: @darkGreen;} -input[type="number"]:-ms-input-placeholder {color: @darkGreen;} diff --git a/apps/spreadsheeteditor/mobile/src/controller/edit/EditChart.jsx b/apps/spreadsheeteditor/mobile/src/controller/edit/EditChart.jsx index 8bd938360..aaa2ce74d 100644 --- a/apps/spreadsheeteditor/mobile/src/controller/edit/EditChart.jsx +++ b/apps/spreadsheeteditor/mobile/src/controller/edit/EditChart.jsx @@ -8,6 +8,7 @@ import { EditChart } from '../../view/edit/EditChart'; class EditChartController extends Component { constructor (props) { super(props); + this.props.storeChartSettings.initChartLayout(this.props.storeFocusObjects.chartObject.get_ChartProperties()); this.onRemoveChart = this.onRemoveChart.bind(this); this.onType = this.onType.bind(this); this.onStyle = this.onStyle.bind(this); diff --git a/apps/spreadsheeteditor/mobile/src/store/chartSettings.js b/apps/spreadsheeteditor/mobile/src/store/chartSettings.js index 035358842..0d10d78b4 100644 --- a/apps/spreadsheeteditor/mobile/src/store/chartSettings.js +++ b/apps/spreadsheeteditor/mobile/src/store/chartSettings.js @@ -2,7 +2,7 @@ import {action, observable, computed} from 'mobx'; export class storeChartSettings { - @observable borderColor; + @observable borderColor = undefined; setBorderColor (color) { this.borderColor = color; @@ -11,7 +11,6 @@ export class storeChartSettings { @action initBorderColor(shapeProperties) { let stroke = shapeProperties.get_stroke(); this.borderColor = (stroke && stroke.get_type() == Asc.c_oAscStrokeType.STROKE_COLOR) ? this.resetColor(stroke.get_color()) : 'transparent'; - return this.borderColor; } @observable fillColor = undefined; @@ -27,6 +26,8 @@ export class storeChartSettings { if (fillType == Asc.c_oAscFill.FILL_TYPE_SOLID) { this.fillColor = this.resetColor(fill.asc_getFill().asc_getColor()); } + + return this.fillColor; } @observable chartTitle = undefined; diff --git a/apps/spreadsheeteditor/mobile/src/store/textSettings.js b/apps/spreadsheeteditor/mobile/src/store/textSettings.js index 1772a60db..674239912 100644 --- a/apps/spreadsheeteditor/mobile/src/store/textSettings.js +++ b/apps/spreadsheeteditor/mobile/src/store/textSettings.js @@ -33,7 +33,7 @@ export class storeTextSettings { this.isUnderline = xfs.asc_getFontUnderline(); let color = xfs.asc_getFontColor(); - console.log(color); + // console.log(color); this.textColor = this.resetTextColor(color); this.paragraphAlign = xfs.asc_getHorAlign(); diff --git a/apps/spreadsheeteditor/mobile/src/view/edit/EditChart.jsx b/apps/spreadsheeteditor/mobile/src/view/edit/EditChart.jsx index c73280b5e..7bf7fd327 100644 --- a/apps/spreadsheeteditor/mobile/src/view/edit/EditChart.jsx +++ b/apps/spreadsheeteditor/mobile/src/view/edit/EditChart.jsx @@ -92,18 +92,20 @@ const PageCustomBorderColor = props => { const PageBorderColor = props => { const { t } = useTranslation(); const _t = t('View.Edit', {returnObjects: true}); - const borderColor = props.storeChartSettings.borderColor; - const customColors = props.storePalette.customColors; + const storeChartSettings = props.storeChartSettings; + const storePalette = props.storePalette; + const borderColor = storeChartSettings.borderColor; + const customColors = storePalette.customColors; const changeColor = (color, effectId, effectValue) => { if (color !== 'empty') { - if (effectId !== undefined ) { + if (effectId !== undefined) { const newColor = {color: color, effectId: effectId, effectValue: effectValue}; props.onBorderColor(newColor); - props.storeChartSettings.setBorderColor(newColor); + storeChartSettings.setBorderColor(newColor); } else { props.onBorderColor(color); - props.storeChartSettings.setBorderColor(color); + storeChartSettings.setBorderColor(color); } } else { // open custom color menu @@ -114,7 +116,7 @@ const PageBorderColor = props => { return ( - + { // Init border color - const borderColor = storeChartSettings.initBorderColor(shapeProperties); + if(!storeChartSettings.borderColor) { + storeChartSettings.initBorderColor(shapeProperties); + } + + const borderColor = storeChartSettings.borderColor; const displayBorderColor = borderColor == 'transparent' ? borderColor : `#${(typeof borderColor === "object" ? borderColor.color : borderColor)}`; return ( @@ -173,7 +179,6 @@ const PageStyle = props => { className={curType === type.type ? ' active' : ''} onClick={() => {props.onType(type.type)}}>
- {/* style={{backgroundImage: `url('resources/img/charts/${type.thumb}')`}} */} ) })} @@ -264,11 +269,10 @@ const PageLayout = props => { const _t = t('View.Edit', {returnObjects: true}); const storeFocusObjects = props.storeFocusObjects; const storeChartSettings = props.storeChartSettings; - const chartProperties = storeFocusObjects.chartObject.get_ChartProperties(); + const chartObject = storeFocusObjects.chartObject; + const chartProperties = chartObject.get_ChartProperties(); const chartType = chartProperties.getType(); - storeChartSettings.initChartLayout(chartProperties); - const chartTitle = storeChartSettings.chartTitle; const chartLegend = storeChartSettings.chartLegend; const chartAxisHorTitle = storeChartSettings.chartAxisHorTitle; @@ -334,14 +338,8 @@ const PageLayout = props => { } const chartLayoutAxisTitleHorizontal = { - 0: { - displayValue: `${_t.textNone}`, - value: 0 - }, - 2: { - displayValue: `${_t.textNoOverlay}`, - value: 1 - } + 0: `${_t.textNone}`, + 1: `${_t.textNoOverlay}` } const chartLayoutAxisTitleVertical = { @@ -392,7 +390,7 @@ const PageLayout = props => { {_t.textAxisTitle} @@ -446,6 +444,7 @@ const PageChartTitle = props => { { storeChartSettings.changeChartTitle(+key); props.setLayoutProperty('putTitle', key); + props.f7router.back(); }}> ) })} @@ -470,6 +469,7 @@ const PageLegend = props => { { storeChartSettings.changeChartLegend(+key); props.setLayoutProperty('putLegendPos', key); + props.f7router.back(); }}> ) })} @@ -491,10 +491,10 @@ const PageHorizontalAxisTitle = props => { {Object.keys(chartLayoutAxisTitleHorizontal).map(key => { return ( - { - console.log(chartLayoutAxisTitleHorizontal[key].value); - storeChartSettings.changeChartAxisHorTitle(chartLayoutAxisTitleHorizontal[key].value); - props.setLayoutProperty('putHorAxisLabel', chartLayoutAxisTitleHorizontal[key].value); + { + storeChartSettings.changeChartAxisHorTitle(+key); + props.setLayoutProperty('putHorAxisLabel', key); + props.f7router.back(); }}> ) })} @@ -519,6 +519,7 @@ const PageVerticalAxisTitle = props => { { storeChartSettings.changeChartAxisVertTitle(+key); props.setLayoutProperty('putVertAxisLabel', key); + props.f7router.back(); }}> ) })} @@ -543,6 +544,7 @@ const PageHorizontalGridlines = props => { { storeChartSettings.changeChartHorGridlines(+key); props.setLayoutProperty('putHorGridLines', key); + props.f7router.back(); }}> ) })} @@ -567,6 +569,7 @@ const PageVerticalGridlines = props => { { storeChartSettings.changeChartVertGridlines(+key); props.setLayoutProperty('putVertGridLines', key); + props.f7router.back(); }}> ) })} @@ -591,6 +594,7 @@ const PageDataLabels = props => { { storeChartSettings.changeChartDataLabel(+key); props.setLayoutProperty('putDataLabelsPos', key); + props.f7router.back(); }}> ) })} @@ -602,6 +606,7 @@ const PageDataLabels = props => { const PageVerticalAxis = props => { const { t } = useTranslation(); const _t = t('View.Edit', {returnObjects: true}); + const isAndroid = Device.android; const storeChartSettings = props.storeChartSettings; const axisProps = props.initVertAxis(); const crossValue = axisProps.getCrossesRule(); @@ -647,8 +652,6 @@ const PageVerticalAxis = props => { storeChartSettings.changeVertAxisCrosses(currentAxisCrosses); } - // console.log(storeChartSettings.axisCrosses); - const defineCurrentDisplayUnits = () => vertAxisDisplayUnits.find(elem => elem.value === axisProps.getDispUnitsRule()); const currentDisplayUnits = defineCurrentDisplayUnits(); @@ -656,8 +659,6 @@ const PageVerticalAxis = props => { storeChartSettings.changeDisplayUnits(currentDisplayUnits); } - // console.log(storeChartSettings.displayUnits); - if(storeChartSettings.valuesVertReverseOrder == undefined) { storeChartSettings.toggleVertValuesReverseOrder(axisProps.getInvertValOrder()); } @@ -677,9 +678,6 @@ const PageVerticalAxis = props => { storeChartSettings.changeVertMinorType(currentMinorType); } - // console.log(storeChartSettings.vertMajorType); - // console.log(storeChartSettings.vertMinorType); - const defineLabelsPosition = () => verticalAxisLabelsPosition.find(elem => elem.value === axisProps.getTickLabelsPos()); const currentLabelsPosition = defineLabelsPosition(); @@ -687,8 +685,6 @@ const PageVerticalAxis = props => { storeChartSettings.changeVertLabelPosition(currentLabelsPosition); } - // console.log(storeChartSettings.vertLabelPosition); - const [minValue, setMinValue] = useState(axisProps.getMinValRule() == Asc.c_oAscValAxisRule.auto ? '' : axisProps.getMinVal()); const [maxValue, setMaxValue] = useState(axisProps.getMaxValRule() == Asc.c_oAscValAxisRule.auto ? '' : axisProps.getMaxVal()); @@ -698,7 +694,7 @@ const PageVerticalAxis = props => { return ( - +
@@ -718,7 +714,7 @@ const PageVerticalAxis = props => {
- + { onChange={() => { storeChartSettings.changeVertAxisCrosses(elem); props.onVerAxisCrossType(elem.value); + props.f7router.back(); }}> ) @@ -817,6 +814,7 @@ const PageDisplayUnits = props => { onChange={() => { storeChartSettings.changeDisplayUnits(elem); props.onVerAxisDisplayUnits(elem.value); + props.f7router.back(); }}> ) @@ -844,6 +842,7 @@ const PageVertMajorType = props => { onChange={() => { storeChartSettings.changeVertMajorType(elem); props.onVerAxisTickMajor(elem.value); + props.f7router.back(); }}> ) @@ -871,6 +870,7 @@ const PageVertMinorType = props => { onChange={() => { storeChartSettings.changeVertMinorType(elem); props.onVerAxisTickMinor(elem.value); + props.f7router.back(); }}> ) @@ -898,6 +898,7 @@ const PageVertLabelPosition = props => { onChange={() => { storeChartSettings.changeVertLabelPosition(elem); props.onVerAxisLabelPos(elem.value); + props.f7router.back(); }}> ) @@ -947,8 +948,6 @@ const PageHorizontalAxis = props => { storeChartSettings.changeHorAxisCrosses(currentAxisCrosses); } - console.log(storeChartSettings.axisHorCrosses); - const defineAxisPosition = () => horAxisPosition.find(elem => elem.value === axisProps.getLabelsPosition()); const axisPosition = defineAxisPosition(); @@ -956,14 +955,10 @@ const PageHorizontalAxis = props => { storeChartSettings.changeAxisPosition(axisPosition); } - console.log(storeChartSettings.axisPosition) - if(storeChartSettings.valuesHorReverseOrder == undefined) { storeChartSettings.toggleHorValuesReverseOrder(axisProps.getInvertCatOrder()); } - console.log(storeChartSettings.valuesHorReverseOrder); - const valueMajorType = axisProps.getMajorTickMark(); const valueMinorType = axisProps.getMinorTickMark(); const defineCurrentTickOption = (elemType) => tickOptions.find(elem => elem.value === elemType); @@ -979,9 +974,6 @@ const PageHorizontalAxis = props => { storeChartSettings.changeHorMinorType(currentMinorType); } - console.log(storeChartSettings.horMajorType); - console.log(storeChartSettings.horMinorType); - const defineLabelsPosition = () => horAxisLabelsPosition.find(elem => elem.value === axisProps.getTickLabelsPos()); const currentLabelsPosition = defineLabelsPosition(); @@ -989,15 +981,13 @@ const PageHorizontalAxis = props => { storeChartSettings.changeHorLabelPosition(currentLabelsPosition); } - console.log(storeChartSettings.horLabelPosition); - const currentCrossesValue = axisProps.getCrosses(); const [crossesValue, setCrossesValue] = useState(!currentCrossesValue ? '' : currentCrossesValue); return ( - + { onChange={() => { storeChartSettings.changeHorAxisCrosses(elem); props.onHorAxisCrossType(elem.value); + props.f7router.back(); }}> ) @@ -1096,6 +1087,7 @@ const PageHorAxisPosition = props => { onChange={() => { storeChartSettings.changeAxisPosition(elem); props.onHorAxisPos(elem.value); + props.f7router.back(); }}> ) @@ -1123,6 +1115,7 @@ const PageHorMajorType = props => { onChange={() => { storeChartSettings.changeHorMajorType(elem); props.onHorAxisTickMajor(elem.value); + props.f7router.back(); }}> ) @@ -1150,6 +1143,7 @@ const PageHorMinorType = props => { onChange={() => { storeChartSettings.changeHorMinorType(elem); props.onHorAxisTickMinor(elem.value); + props.f7router.back(); }}> ) @@ -1177,6 +1171,7 @@ const PageHorLabelPosition = props => { onChange={() => { storeChartSettings.changeHorLabelPosition(elem); props.onHorAxisLabelPos(elem.value); + props.f7router.back(); }}> ) diff --git a/apps/spreadsheeteditor/mobile/src/view/edit/EditText.jsx b/apps/spreadsheeteditor/mobile/src/view/edit/EditText.jsx index 03e54f413..b056ac4bb 100644 --- a/apps/spreadsheeteditor/mobile/src/view/edit/EditText.jsx +++ b/apps/spreadsheeteditor/mobile/src/view/edit/EditText.jsx @@ -16,7 +16,7 @@ const EditText = props => { const fontName = storeTextSettings.fontName || _t.textFonts; const fontSize = storeTextSettings.fontSize; const fontColor = storeTextSettings.textColor; - console.log(fontColor); + // console.log(fontColor); const displaySize = typeof fontSize === 'undefined' ? _t.textAuto : fontSize + ' ' + _t.textPt; const isBold = storeTextSettings.isBold; @@ -166,17 +166,15 @@ const PageFontColor = props => { const textColor = storeTextSettings.textColor; const customColors = storePalette.customColors; - console.log(textColor); - const changeColor = (color, effectId, effectValue) => { if (color !== 'empty') { if (effectId !== undefined) { const newColor = {color: color, effectId: effectId, effectValue: effectValue}; - storeTextSettings.changeTextColor(newColor); props.onTextColor(newColor); + storeTextSettings.changeTextColor(newColor); } else { - storeTextSettings.changeTextColor(color); props.onTextColor(color); + storeTextSettings.changeTextColor(color); } } else { // open custom color menu From 37248d0c0eded9c6964fed851832f5011fd430d1 Mon Sep 17 00:00:00 2001 From: SergeyEzhin Date: Wed, 17 Feb 2021 20:53:17 +0300 Subject: [PATCH 11/27] [SSE mobile] Corrected styles, Chart Settings and added Link Settings --- .../mobile/resources/less/common-ios.less | 19 --- .../resources/less/common-material.less | 51 ------ apps/spreadsheeteditor/mobile/locale/en.json | 17 +- .../mobile/src/controller/edit/EditLink.jsx | 145 +++++++++++++++++ .../mobile/src/view/edit/Edit.jsx | 20 +++ .../mobile/src/view/edit/EditChart.jsx | 79 ++++----- .../mobile/src/view/edit/EditLink.jsx | 153 ++++++++++++++++++ 7 files changed, 374 insertions(+), 110 deletions(-) create mode 100644 apps/spreadsheeteditor/mobile/src/controller/edit/EditLink.jsx create mode 100644 apps/spreadsheeteditor/mobile/src/view/edit/EditLink.jsx diff --git a/apps/common/mobile/resources/less/common-ios.less b/apps/common/mobile/resources/less/common-ios.less index ea0beba5a..86b096f6d 100644 --- a/apps/common/mobile/resources/less/common-ios.less +++ b/apps/common/mobile/resources/less/common-ios.less @@ -393,25 +393,6 @@ // input[type="number"] - .item-input { - width: 100%; - margin-top: -8px; - margin-bottom: -7px; - flex-shrink: 1; - } - - .item-content { - .item-after input { - height: 43px; - } - .item-after input.right { - text-align: right; - } - .item-after input.field { - color: @darkGreen; - } - } - input[type="number"]::placeholder { color: @darkGreen;} input[type="number"]::-webkit-input-placeholder {color: @darkGreen;} input[type="number"]::-moz-placeholder {color: @darkGreen;} diff --git a/apps/common/mobile/resources/less/common-material.less b/apps/common/mobile/resources/less/common-material.less index 2b4c30547..211c11340 100644 --- a/apps/common/mobile/resources/less/common-material.less +++ b/apps/common/mobile/resources/less/common-material.less @@ -291,55 +291,4 @@ } } } - - // input[type="number"] - - .list.inputs-list { - ul:after { - display: none; - } - .item-inner { - display: block; - margin-bottom: 4px; - padding-bottom: 0; - &:after { - display: none; - } - } - .item-input { - flex-shrink: 1; - font-size: 0; - position: relative; - margin-bottom: 4px; - min-height: 36px; - &:after { - content: ''; - position: absolute; - left: 0; - bottom: 0; - right: auto; - top: auto; - height: 1px; - width: 100%; - background-color: rgba(0,0,0,.12); - display: block; - z-index: 15; - transform-origin: 50% 100%; - transition: .2; - } - } - .item-link { - .item-inner .item-title { - font-size: 16px; - } - } - .item-after { - font-size: 14px; - color: @darkGrey; - div { - width: 100%; - } - } - } - } diff --git a/apps/spreadsheeteditor/mobile/locale/en.json b/apps/spreadsheeteditor/mobile/locale/en.json index ad3b53b46..90a7800b9 100644 --- a/apps/spreadsheeteditor/mobile/locale/en.json +++ b/apps/spreadsheeteditor/mobile/locale/en.json @@ -200,7 +200,22 @@ "textCrossesValue": "Crosses Value", "textOnTickMarks": "On Tick Marks", "textBetweenTickMarks": "Between Tick Marks", - "textAxisPosition": "Axis Position" + "textAxisPosition": "Axis Position", + "textHyperlink": "Hyperlink", + "textLinkType": "Link Type", + "textLink": "Link", + "textSheet": "Sheet", + "textRange": "Range", + "textDisplay": "Display", + "textScreenTip": "Screen Tip", + "textEditLink": "Edit Link", + "textRemoveLink": "Remove Link", + "textRequired": "Required", + "textInternalDataRange": "Internal Data Range", + "textExternalLink": "External Link", + "textDefault": "Selected range", + "textInvalidRange": "Invalid cells range", + "txtNotUrl": "This field should be a URL in the format \"http://www.example.com\"" } }, "Common": { diff --git a/apps/spreadsheeteditor/mobile/src/controller/edit/EditLink.jsx b/apps/spreadsheeteditor/mobile/src/controller/edit/EditLink.jsx new file mode 100644 index 000000000..92e221136 --- /dev/null +++ b/apps/spreadsheeteditor/mobile/src/controller/edit/EditLink.jsx @@ -0,0 +1,145 @@ +import React, { Component } from 'react'; +import { f7 } from 'framework7-react'; +import { Device } from '../../../../../common/mobile/utils/device'; +import {observer, inject} from "mobx-react"; +import { withTranslation } from 'react-i18next'; + +import { EditLink } from '../../view/edit/EditLink'; + +class EditLinkController extends Component { + constructor (props) { + super(props); + this.onEditLink = this.onEditLink.bind(this); + this.onRemoveLink = this.onRemoveLink.bind(this); + + const api = Common.EditorApi.get(); + const cellInfo = api.asc_getCellInfo(); + + this.linkInfo = cellInfo.asc_getHyperlink(); + this.isLock = cellInfo.asc_getLockText(); + this.currentSheet = api.asc_getWorksheetName(api.asc_getActiveWorksheetIndex()); + + // Sheets + + let items = []; + let wsc = api.asc_getWorksheetsCount(); + const aws = api.asc_getActiveWorksheetIndex(); + + if (wsc > 0) { + items = []; + while ( !(--wsc < 0) ) { + if ( !api.asc_isWorksheetHidden(wsc) ) { + items.unshift({ + value: wsc, + caption: api.asc_getWorksheetName(wsc) + }); + if (wsc === aws) { + this.activeSheet = { + value: wsc, + caption: api.asc_getWorksheetName(wsc) + } + } + } + } + this.sheets = items; + } + } + + closeModal () { + if ( Device.phone ) { + f7.sheet.close('#edit-sheet', true); + } else { + f7.popover.close('#edit-popover'); + } + } + + onEditLink(args) { + const api = Common.EditorApi.get(); + const { t } = this.props; + const _t = t("View.Edit", {returnObjects: true}); + + let linkProps = new Asc.asc_CHyperlink(), + sheet = "", + displayText = args.text, + tip = args.tooltip, + defaultDisplay = ""; + + linkProps.asc_setType(args.type); + + if(args.type === Asc.c_oAscHyperlinkType.RangeLink) { + let range = args.url, + isValidRange = /^[A-Z]+[1-9]\d*:[A-Z]+[1-9]\d*$/.test(range); + + if (!isValidRange) + isValidRange = /^[A-Z]+[1-9]\d*$/.test(range); + + if (!isValidRange) { + f7.dialog.alert(_t.textInvalidRange, _t.notcriticalErrorTitle); + return; + } + + sheet = args.sheet; + + linkProps.asc_setSheet(sheet); + linkProps.asc_setRange(range); + defaultDisplay = sheet + '!' + range; + } else { + let url = args.url.replace(/^\s+|\s+$/g,''); + + if (! /(((^https?)|(^ftp)):\/\/)|(^mailto:)/i.test(url)) { + let urlType = api.asc_getUrlType(url.trim()); + + if (urlType < 1) { + f7.dialog.alert(_t.txtNotUrl, _t.notcriticalErrorTitle); + return; + } + + url = ( (urlType == 2) ? 'mailto:' : 'http://' ) + url; + } + + url = url.replace(new RegExp("%20",'g')," "); + + linkProps.asc_setHyperlinkUrl(url); + defaultDisplay = url; + } + + if (this.isLock) { + linkProps.asc_setText(null); + } else { + if (!displayText) { + displayText = defaultDisplay; + } + linkProps.asc_setText(displayText); + } + + linkProps.asc_setTooltip(tip); + + api.asc_insertHyperlink(linkProps); + this.closeModal(); + + } + + onRemoveLink() { + const api = Common.EditorApi.get(); + api.asc_removeHyperlink(); + this.closeModal(); + } + + render () { + return ( + + ) + } +} + +const EditLinkWithTranslation = withTranslation()(EditLinkController); + +export {EditLinkWithTranslation as EditLinkController}; \ No newline at end of file diff --git a/apps/spreadsheeteditor/mobile/src/view/edit/Edit.jsx b/apps/spreadsheeteditor/mobile/src/view/edit/Edit.jsx index 01e02e623..23ba85f20 100644 --- a/apps/spreadsheeteditor/mobile/src/view/edit/Edit.jsx +++ b/apps/spreadsheeteditor/mobile/src/view/edit/Edit.jsx @@ -10,12 +10,14 @@ 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 { 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 } from './EditCell'; import { PageTextFonts, PageTextFontColor, PageTextCustomFontColor } from './EditText'; import { PageChartStyle, PageChartCustomFillColor, PageChartBorderColor, PageChartCustomBorderColor, PageChartReorder, PageChartLayout, PageChartLegend, PageChartTitle, PageChartHorizontalAxisTitle, PageChartVerticalAxisTitle, PageChartHorizontalGridlines, PageChartVerticalGridlines, PageChartDataLabels, PageChartVerticalAxis, PageChartVertAxisCrosses, PageChartDisplayUnits, PageChartVertMajorType, PageChartVertMinorType, PageChartVertLabelPosition, PageChartHorizontalAxis, PageChartHorAxisCrosses, PageChartHorAxisPosition, PageChartHorMajorType, PageChartHorMinorType, PageChartHorLabelPosition } from './EditChart'; +import { PageTypeLink, PageSheet } from './EditLink'; const routes = [ @@ -254,6 +256,17 @@ const routes = [ { path: '/edit-hor-label-position/', component: PageChartHorLabelPosition + }, + + // Link + + { + path: '/edit-link-type/', + component: PageTypeLink + }, + { + path: '/edit-link-sheet', + component: PageSheet } @@ -361,6 +374,13 @@ const EditTabs = props => { component: }) } + if (settings.indexOf('hyperlink') > -1) { + editors.push({ + caption: _t.textHyperlink, + id: 'edit-link', + component: + }) + } } return ( diff --git a/apps/spreadsheeteditor/mobile/src/view/edit/EditChart.jsx b/apps/spreadsheeteditor/mobile/src/view/edit/EditChart.jsx index 7bf7fd327..30cb1e916 100644 --- a/apps/spreadsheeteditor/mobile/src/view/edit/EditChart.jsx +++ b/apps/spreadsheeteditor/mobile/src/view/edit/EditChart.jsx @@ -606,7 +606,7 @@ const PageDataLabels = props => { const PageVerticalAxis = props => { const { t } = useTranslation(); const _t = t('View.Edit', {returnObjects: true}); - const isAndroid = Device.android; + const isIos = Device.ios; const storeChartSettings = props.storeChartSettings; const axisProps = props.initVertAxis(); const crossValue = axisProps.getCrossesRule(); @@ -694,41 +694,42 @@ const PageVerticalAxis = props => { return ( - - -
-
- props.onVerAxisMinValue(e.target.value)} - onInput={e => setMinValue(e.target.value)} placeholder="Auto" /> -
-
-
- -
-
- props.onVerAxisMaxValue(e.target.value)} - onInput={e => setMaxValue(e.target.value)} placeholder="Auto" /> -
-
-
+ + props.onVerAxisMinValue(e.target.value)} + onInput={e => setMinValue(e.target.value)} + className={isIos ? 'list-input-right' : ''} + /> + + props.onVerAxisMaxValue(e.target.value)} + onInput={e => setMaxValue(e.target.value)} + className={isIos ? 'list-input-right' : ''} + /> - + {storeChartSettings.axisVertCrosses.value == Asc.c_oAscCrossesRule.value ? ( - -
-
- props.onVerAxisCrossValue(e.target.value)} - onInput={e => setCrossesValue(e.target.value)} placeholder="0" /> -
-
-
+ props.onVerAxisCrossValue(e.target.value)} + onInput={e => setCrossesValue(e.target.value)} + className={isIos ? 'list-input-right' : ''} + /> ) : null}
@@ -993,15 +994,15 @@ const PageHorizontalAxis = props => { onHorAxisCrossType: props.onHorAxisCrossType }}> {storeChartSettings.axisHorCrosses.value == Asc.c_oAscCrossesRule.value ? ( - -
-
- props.onHorAxisCrossValue(e.target.value)} - onInput={e => setCrossesValue(e.target.value)} placeholder="0" /> -
-
-
+ props.onHorAxisCrossValue(e.target.value)} + onInput={e => setCrossesValue(e.target.value)} + className={isIos ? 'list-input-right' : ''} + /> ) : null}
diff --git a/apps/spreadsheeteditor/mobile/src/view/edit/EditLink.jsx b/apps/spreadsheeteditor/mobile/src/view/edit/EditLink.jsx new file mode 100644 index 000000000..d0653dfe0 --- /dev/null +++ b/apps/spreadsheeteditor/mobile/src/view/edit/EditLink.jsx @@ -0,0 +1,153 @@ +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 { useTranslation } from 'react-i18next'; +import {Device} from "../../../../../common/mobile/utils/device"; + +const PageTypeLink = ({curType, changeType}) => { + const { t } = useTranslation(); + const _t = t('View.Edit', {returnObjects: true}); + const [typeLink, setTypeLink] = useState(curType); + + return ( + + + + {setTypeLink(1); changeType(1);}}> + {setTypeLink(2); changeType(2);}}> + + + ) +}; + +const PageSheet = ({curSheet, sheets, changeSheet}) => { + const { t } = useTranslation(); + const _t = t('View.Edit', {returnObjects: true}); + const [stateSheet, setSheet] = useState(curSheet.value); + + return ( + + + + {sheets.map(sheet => { + return( + { + setSheet(sheet.value); + changeSheet(sheet); + }} + /> + ) + })} + + + + ) +}; + +const EditLink = props => { + const isIos = Device.ios; + const { t } = useTranslation(); + const _t = t('View.Edit', {returnObjects: true}); + const linkInfo = props.linkInfo; + const isLock = props.isLock; + const sheets = props.sheets; + const activeSheet = props.activeSheet; + const currentSheet = props.currentSheet; + const valueLinkInfo = linkInfo.asc_getType(); + const linkSheet = (valueLinkInfo == Asc.c_oAscHyperlinkType.RangeLink) ? linkInfo.asc_getSheet() : currentSheet; + + const [typeLink, setTypeLink] = useState(valueLinkInfo); + const textType = typeLink != Asc.c_oAscHyperlinkType.RangeLink ? _t.textExternalLink : _t.textInternalDataRange; + const changeType = (newType) => { + setTypeLink(newType); + }; + + const [link, setLink] = useState(linkInfo.asc_getHyperlinkUrl() ? linkInfo.asc_getHyperlinkUrl().replace(new RegExp(" ", 'g'), "%20") : ''); + + const displayText = isLock ? _t.textDefault : linkInfo.asc_getText(); + const [stateDisplayText, setDisplayText] = useState(displayText); + + const [screenTip, setScreenTip] = useState(linkInfo.asc_getTooltip()); + + const [curSheet, setSheet] = useState(activeSheet); + const changeSheet = (sheet) => { + setSheet(sheet); + }; + + const valueRange = linkInfo.asc_getRange(); + const [range, setRange] = useState(valueRange || ''); + + return ( + + + + {typeLink != Asc.c_oAscHyperlinkType.RangeLink && + {setLink(event.target.value)}} + className={isIos ? 'list-input-right' : ''} + /> + } + {typeLink == Asc.c_oAscHyperlinkType.RangeLink && + + } + {typeLink == Asc.c_oAscHyperlinkType.RangeLink && + {setRange(event.target.value)}} + className={isIos ? 'list-input-right' : ''} + /> + } + {setDisplayText(event.target.value)}} + className={isIos ? 'list-input-right' : ''} + /> + {setScreenTip(event.target.value)}} + className={isIos ? 'list-input-right' : ''} + /> + + + {props.onEditLink(typeLink === 1 ? + {type: 1, url: link, text: stateDisplayText, tooltip: screenTip} : + {type: 2, url: range, sheet: curSheet.caption, text: stateDisplayText, tooltip: screenTip})}} + /> + props.onRemoveLink()} + /> + + + ) +}; + +export { + EditLink, + PageTypeLink, + PageSheet +}; \ No newline at end of file From aeb2daacab20e71c759393533588e53ab4946c92 Mon Sep 17 00:00:00 2001 From: SergeyEzhin Date: Thu, 18 Feb 2021 22:15:50 +0300 Subject: [PATCH 12/27] [SSE mobile] Make Spreadsheet Settings --- apps/spreadsheeteditor/mobile/locale/en.json | 27 ++ .../mobile/src/controller/Main.jsx | 9 +- .../settings/SpreadsheetSettings.jsx | 116 ++++++++ .../mobile/src/store/mainStore.js | 3 +- .../mobile/src/store/spreadsheetSettings.js | 80 ++++++ .../mobile/src/view/settings/Settings.jsx | 34 ++- .../src/view/settings/SpreadsheetSettings.jsx | 270 ++++++++++++++++++ 7 files changed, 525 insertions(+), 14 deletions(-) create mode 100644 apps/spreadsheeteditor/mobile/src/controller/settings/SpreadsheetSettings.jsx create mode 100644 apps/spreadsheeteditor/mobile/src/store/spreadsheetSettings.js create mode 100644 apps/spreadsheeteditor/mobile/src/view/settings/SpreadsheetSettings.jsx diff --git a/apps/spreadsheeteditor/mobile/locale/en.json b/apps/spreadsheeteditor/mobile/locale/en.json index 90a7800b9..266f24b3e 100644 --- a/apps/spreadsheeteditor/mobile/locale/en.json +++ b/apps/spreadsheeteditor/mobile/locale/en.json @@ -216,6 +216,33 @@ "textDefault": "Selected range", "textInvalidRange": "Invalid cells range", "txtNotUrl": "This field should be a URL in the format \"http://www.example.com\"" + }, + "Settings": { + "textFindAndReplace": "Find and Replace", + "textSpreadsheetSettings": "Spreadsheet Settings", + "textApplicationSettings": "Application Settings", + "textDownload": "Download", + "textPrint": "Print", + "textSpreadsheetInfo": "Spreadsheet Info", + "textHelp": "Help", + "textAbout": "About", + "textDone": "Done", + "textSettings": "Settings", + "textBack": "Back", + "textOrientation": "Orientation", + "textPortrait": "Portrait", + "textLandscape": "Landscape", + "textFormat": "Format", + "textMargins": "Margins", + "textColorSchemes": "Color Schemes", + "textHideHeadings": "Hide Headings", + "textHideGridlines": "Hide Gridlines", + "textLeft": "Left", + "textBottom": "Bottom", + "textTop": "Top", + "textRight": "Right", + "textCustomSize": "Custom Size", + "textSpreadsheetFormats": "Spreadsheet Formats" } }, "Common": { diff --git a/apps/spreadsheeteditor/mobile/src/controller/Main.jsx b/apps/spreadsheeteditor/mobile/src/controller/Main.jsx index 2f93ddeb8..4a834e813 100644 --- a/apps/spreadsheeteditor/mobile/src/controller/Main.jsx +++ b/apps/spreadsheeteditor/mobile/src/controller/Main.jsx @@ -5,7 +5,7 @@ import { f7 } from 'framework7-react'; import { withTranslation } from 'react-i18next'; import CollaborationController from '../../../../common/mobile/lib/controller/Collaboration.jsx' -@inject("storeFocusObjects", "storeCellSettings", "storeTextSettings", "storeChartSettings") +@inject("storeFocusObjects", "storeCellSettings", "storeTextSettings", "storeChartSettings", "storeSpreadsheetSettings") class MainController extends Component { constructor(props) { super(props) @@ -204,6 +204,7 @@ class MainController extends Component { // me.api.asc_registerCallback('asc_onDocumentName', _.bind(me.onDocumentName, me)); me.api.asc_registerCallback('asc_onEndAction', me._onLongActionEnd.bind(me)); + const storeSpreadsheetSettings = this.props.storeSpreadsheetSettings; const storeFocusObjects = this.props.storeFocusObjects; const storeCellSettings = this.props.storeCellSettings; const storeTextSettings = this.props.storeTextSettings; @@ -251,6 +252,12 @@ class MainController extends Component { Common.Utils.ThemeColor.setColors(colors, standart_colors); }); + // Spreadsheet Settings + + this.api.asc_registerCallback('asc_onSendThemeColorSchemes', schemes => { + storeSpreadsheetSettings.addSchemes(schemes); + }); + } _onLongActionEnd(type, id) { diff --git a/apps/spreadsheeteditor/mobile/src/controller/settings/SpreadsheetSettings.jsx b/apps/spreadsheeteditor/mobile/src/controller/settings/SpreadsheetSettings.jsx new file mode 100644 index 000000000..3ac59f0d2 --- /dev/null +++ b/apps/spreadsheeteditor/mobile/src/controller/settings/SpreadsheetSettings.jsx @@ -0,0 +1,116 @@ + +import React, {Component} from 'react'; +import {SpreadsheetSettings} from '../../view/settings/SpreadsheetSettings'; +import {observer, inject} from "mobx-react"; + +class SpreadsheetSettingsController extends Component { + constructor (props) { + super (props); + this.initSpreadsheetMargins = this.initSpreadsheetMargins.bind(this); + this.onFormatChange = this.onFormatChange.bind(this); + this.onPageMarginsChange = this.onPageMarginsChange.bind(this); + this.initSpreadsheetSettings(); + } + + initSpreadsheetSettings() { + const api = Common.EditorApi.get(); + const params = api.asc_getSheetViewSettings(); + const currentSheet = api.asc_getActiveWorksheetIndex(); + const propsSheet = api.asc_getPageOptions(currentSheet); + const opt = propsSheet.asc_getPageSetup(); + + this.props.storeSpreadsheetSettings.changeHideHeadings(!params.asc_getShowRowColHeaders()); + this.props.storeSpreadsheetSettings.changeHideGridlines(!params.asc_getShowGridLines()); + this.props.storeSpreadsheetSettings.resetPortrait(opt.asc_getOrientation() === Asc.c_oAscPageOrientation.PagePortrait ? true : false); + this.props.storeSpreadsheetSettings.changeDocSize(opt.asc_getWidth(), opt.asc_getHeight()); + } + + initSpreadsheetMargins() { + const api = Common.EditorApi.get(); + + // Init page margins + + let currentSheet = api.asc_getActiveWorksheetIndex(), + props = api.asc_getPageOptions(currentSheet); + + this.localMarginProps = props.asc_getPageMargins(); + + let left = parseFloat(Common.Utils.Metric.fnRecalcFromMM(this.localMarginProps.asc_getLeft()).toFixed(2)), + top = parseFloat(Common.Utils.Metric.fnRecalcFromMM(this.localMarginProps.asc_getTop()).toFixed(2)), + right = parseFloat(Common.Utils.Metric.fnRecalcFromMM(this.localMarginProps.asc_getRight()).toFixed(2)), + bottom = parseFloat(Common.Utils.Metric.fnRecalcFromMM(this.localMarginProps.asc_getBottom()).toFixed(2)); + + return {left, top, right, bottom}; + } + + onPageMarginsChange(align, marginValue) { + const api = Common.EditorApi.get(); + let changeProps = new Asc.asc_CPageMargins(); + + changeProps.asc_setTop(this.localMarginProps.asc_getTop()); + changeProps.asc_setBottom(this.localMarginProps.asc_getBottom()); + changeProps.asc_setLeft(this.localMarginProps.asc_getLeft()); + changeProps.asc_setRight(this.localMarginProps.asc_getRight()); + + switch (align) { + case 'left': changeProps.asc_setLeft(marginValue); break; + case 'top': changeProps.asc_setTop(marginValue); break; + case 'right': changeProps.asc_setRight(marginValue); break; + case 'bottom': changeProps.asc_setBottom(marginValue); break; + } + + api.asc_changePageMargins(changeProps.asc_getLeft(), changeProps.asc_getRight(), changeProps.asc_getTop(), changeProps.asc_getBottom(), api.asc_getActiveWorksheetIndex()); + // this.initSpreadsheetMargins(); + } + + onOrientationChange(value) { + const api = Common.EditorApi.get(); + api.asc_changePageOrient(+value === Asc.c_oAscPageOrientation.PagePortrait, api.asc_getActiveWorksheetIndex()); + } + + clickCheckboxHideHeadings(value) { + const api = Common.EditorApi.get(); + api.asc_setDisplayHeadings(!value); + } + + clickCheckboxHideGridlines(value) { + const api = Common.EditorApi.get(); + api.asc_setDisplayGridlines(!value); + } + + initPageColorSchemes() { + const api = Common.EditorApi.get(); + return api.asc_GetCurrentColorSchemeIndex(); + } + + onColorSchemeChange(index) { + const api = Common.EditorApi.get(); + api.asc_ChangeColorSchemeByIdx(+index); + } + + onFormatChange(value) { + const api = Common.EditorApi.get(); + api.asc_changeDocSize(parseFloat(value[0]), parseFloat(value[1]), api.asc_getActiveWorksheetIndex()); + this.initSpreadsheetSettings(); + } + + render () { + return ( + + ) + } +} + +export default inject("storeSpreadsheetSettings")(observer(SpreadsheetSettingsController)); \ No newline at end of file diff --git a/apps/spreadsheeteditor/mobile/src/store/mainStore.js b/apps/spreadsheeteditor/mobile/src/store/mainStore.js index eb5e244fe..ebf80f0ac 100644 --- a/apps/spreadsheeteditor/mobile/src/store/mainStore.js +++ b/apps/spreadsheeteditor/mobile/src/store/mainStore.js @@ -12,10 +12,11 @@ import {storeCellSettings} from "./cellSettings"; // import {storeImageSettings} from "./imageSettings"; // import {storeTableSettings} from "./tableSettings"; import {storeChartSettings} from "./chartSettings"; +import {storeSpreadsheetSettings} from "./spreadsheetSettings"; export const stores = { storeFocusObjects: new storeFocusObjects(), - // storeDocumentSettings: new storeDocumentSettings(), + storeSpreadsheetSettings: new storeSpreadsheetSettings(), users: new storeUsers(), sheets: new storeWorksheets(), storeFunctions: new storeFunctions(), diff --git a/apps/spreadsheeteditor/mobile/src/store/spreadsheetSettings.js b/apps/spreadsheeteditor/mobile/src/store/spreadsheetSettings.js new file mode 100644 index 000000000..f466f3c6d --- /dev/null +++ b/apps/spreadsheeteditor/mobile/src/store/spreadsheetSettings.js @@ -0,0 +1,80 @@ +import {action, observable, computed} from 'mobx'; + +export class storeSpreadsheetSettings { + + @observable isPortrait = true; + + @action resetPortrait (isPortrait) { + this.isPortrait = isPortrait === true; + } + + // Spreadsheet Formats + + @observable widthDocument; + @observable heightDocument; + + @action changeDocSize (width, height) { + this.widthDocument = width; + this.heightDocument = height; + } + + getPageSizesList () { + const txtCm = Common.Utils.Metric.getMetricName(Common.Utils.Metric.c_MetricUnits.cm); + const pageSizes = [ + { caption: 'US Letter', subtitle: '21,59 ' + txtCm + ' x 27,94 ' + txtCm, value: [215.9, 279.4] }, + { caption: 'US Legal', subtitle: '21,59 ' + txtCm + ' x 35,56 ' + txtCm, value: [215.9, 355.6] }, + { caption: 'A4', subtitle: '21 ' + txtCm + ' x 29,7 ' + txtCm, value: [210, 297] }, + { caption: 'A5', subtitle: '14,8 ' + txtCm + ' x 21 ' + txtCm, value: [148, 210] }, + { caption: 'B5', subtitle: '17,6 ' + txtCm + ' x 25 ' + txtCm, value: [176, 250] }, + { caption: 'Envelope #10', subtitle: '10,48 ' + txtCm + ' x 24,13 ' + txtCm, value: [104.8, 241.3] }, + { caption: 'Envelope DL', subtitle: '11 ' + txtCm + ' x 22 ' + txtCm, value: [110, 220] }, + { caption: 'Tabloid', subtitle: '27,94 ' + txtCm + ' x 43,18 ' + txtCm, value: [279.4, 431.8] }, + { caption: 'A3', subtitle: '29,7 ' + txtCm + ' x 42 ' + txtCm, value: [297, 420] }, + { caption: 'Tabloid Oversize', subtitle: '30,48 ' + txtCm + ' x 45,71 ' + txtCm, value: [304.8, 457.1] }, + { caption: 'ROC 16K', subtitle: '19,68 ' + txtCm + ' x 27,3 ' + txtCm, value: [196.8, 273] }, + { caption: 'Envelope Choukei 3', subtitle: '11,99 ' + txtCm + ' x 23,49 ' + txtCm, value: [119.9, 234.9] }, + { caption: 'Super B/A3', subtitle: '33,02 ' + txtCm + ' x 48,25 ' + txtCm, value: [330.2, 482.5] }, + { caption: 'A0', subtitle: '84,1 ' + txtCm + ' x 118,9 ' + txtCm, value: [841, 1189] }, + { caption: 'A1', subtitle: '59,4 ' + txtCm + ' x 84,1 ' + txtCm, value: [594, 841] }, + { caption: 'A2', subtitle: '42 ' + txtCm + ' x 59,4 ' + txtCm, value: [420, 594] }, + { caption: 'A6', subtitle: '10,5 ' + txtCm + ' x 14,8 ' + txtCm, value: [105, 148] } + ]; + + return pageSizes; + } + + @computed get pageSizesIndex () { + let w = this.widthDocument; + let h = this.heightDocument; + let ind; + const pageSizes = this.getPageSizesList(); + + pageSizes.forEach(function callback(size, index) { + if (Math.abs(size.value[0] - w) < 0.1 && Math.abs(size.value[1] - h) < 0.1) { + ind = index; + } + }, this); + + return ind; + } + + // Color Schemes + + @observable allSchemes; + + @action addSchemes(arr) { + this.allSchemes = arr; + } + + @observable isHideHeadings; + @observable isHideGridlines; + + @action changeHideHeadings(value) { + this.isHideHeadings = value; + } + + @action changeHideGridlines(value) { + this.isHideGridlines = value; + } + +} diff --git a/apps/spreadsheeteditor/mobile/src/view/settings/Settings.jsx b/apps/spreadsheeteditor/mobile/src/view/settings/Settings.jsx index 4a4ee90c4..d0940cae1 100644 --- a/apps/spreadsheeteditor/mobile/src/view/settings/Settings.jsx +++ b/apps/spreadsheeteditor/mobile/src/view/settings/Settings.jsx @@ -3,20 +3,30 @@ import {View,Page,Navbar,NavRight,Link,Popup,Popover,Icon,ListItem,List} from 'f import { withTranslation } from 'react-i18next'; import {f7} from 'framework7-react'; import {Device} from '../../../../../common/mobile/utils/device'; +import SpreadsheetSettingsController from '../../controller/settings/SpreadsheetSettings.jsx'; +import {SpreadsheetColorSchemes, SpreadsheetFormats, SpreadsheetMargins} from './SpreadsheetSettings.jsx'; const routes = [ { path: '/', component: 'TSettingsView' }, - /*{ - path: '/presentation-settings/', - component: PresentationSettingsController, + { + path: '/spreadsheet-settings/', + component: SpreadsheetSettingsController, }, { - path: "/presentation-info/", - component: PresentationInfoController, - }*/ + path: "/color-schemes/", + component: SpreadsheetColorSchemes + }, + { + path: '/spreadsheet-formats/', + component: SpreadsheetFormats + }, + { + path: '/margins/', + component: SpreadsheetMargins + } ]; @@ -38,12 +48,12 @@ const SettingsList = withTranslation()(props => { {navbar} {!props.inPopover && - - - + + + } - - + + @@ -54,7 +64,7 @@ const SettingsList = withTranslation()(props => { - + diff --git a/apps/spreadsheeteditor/mobile/src/view/settings/SpreadsheetSettings.jsx b/apps/spreadsheeteditor/mobile/src/view/settings/SpreadsheetSettings.jsx new file mode 100644 index 000000000..461b37081 --- /dev/null +++ b/apps/spreadsheeteditor/mobile/src/view/settings/SpreadsheetSettings.jsx @@ -0,0 +1,270 @@ +import React, {useState} from 'react'; +import {observer, inject} from "mobx-react"; +import {Page, Navbar, List, ListItem, BlockTitle, Segmented, Button, Icon, Toggle} from 'framework7-react'; +import { useTranslation } from 'react-i18next'; +import {Device} from '../../../../../common/mobile/utils/device'; + +const PageSpreadsheetColorSchemes = props => { + const { t } = useTranslation(); + const curScheme = props.initPageColorSchemes(); + const [stateScheme, setScheme] = useState(curScheme); + const _t = t('View.Settings', {returnObjects: true}); + const storeSpreadsheetSettings = props.storeSpreadsheetSettings; + const allSchemes = storeSpreadsheetSettings.allSchemes; + + return ( + + + + { + allSchemes ? allSchemes.map((scheme, index) => { + return ( + { + if(index !== curScheme) { + setScheme(index); + props.onColorSchemeChange(index); + }; + }}> +
+ + { + scheme.get_colors().map((elem, index) => { + if(index >=2 && index < 7) { + let clr = {background: "#" + Common.Utils.ThemeColor.getHexColor(elem.get_r(), elem.get_g(), elem.get_b())}; + return ( + + ) + } + }) + } + + +
+
+ ) + }) : null + } +
+
+ + ) +}; + +const PageSpreadsheetFormats = props => { + const { t } = useTranslation(); + const _t = t('View.Settings', {returnObjects: true}); + const storeSpreadsheetSettings = props.storeSpreadsheetSettings; + const pageSizesIndex = storeSpreadsheetSettings.pageSizesIndex; + const pageSizes = storeSpreadsheetSettings.getPageSizesList(); + const textMetric = Common.Utils.Metric.getCurrentMetricName(); + + return ( + + + + {pageSizes.map((item, index) => ( + {props.onFormatChange(item.value)}}> + + ))} + + + ) +}; + +const PageSpreadsheetMargins = props => { + const isAndroid = Device.android; + const { t } = useTranslation(); + const _t = t('View.Settings', {returnObjects: true}); + const metricText = Common.Utils.Metric.getMetricName(Common.Utils.Metric.getCurrentMetric()); + const margins = props.initSpreadsheetMargins(); + console.log(margins); + + const [stateTop, setTop] = useState(margins.top); + const [stateBottom, setBottom] = useState(margins.bottom); + const [stateLeft, setLeft] = useState(margins.left); + const [stateRight, setRight] = useState(margins.right); + + const onChangeMargins = (align, isDecrement) => { + let step = Common.Utils.Metric.getCurrentMetric() == Common.Utils.Metric.c_MetricUnits.pt ? 1 : 0.1; + step = Common.Utils.Metric.fnRecalcToMM(step); + + let marginValue, + maxMarginsH = 482.5, + maxMarginsW = 482.5; + + switch (align) { + case 'left': marginValue = stateLeft; break; + case 'top': marginValue = stateTop; break; + case 'right': marginValue = stateRight; break; + case 'bottom': marginValue = stateBottom; break; + } + + if (isDecrement) { + marginValue = Math.max(0, marginValue - step); + } else { + marginValue = Math.min((align == 'left' || align == 'right') ? maxMarginsW : maxMarginsH, marginValue + step); + } + + switch (align) { + case 'left': setLeft(marginValue); break; + case 'top': setTop(marginValue); break; + case 'right': setRight(marginValue); break; + case 'bottom': setBottom(marginValue); break; + } + + props.onPageMarginsChange(align, marginValue); + }; + + return ( + + + + + {!isAndroid &&
{parseFloat(stateTop.toFixed(2)) + ' ' + metricText}
} +
+ + + {isAndroid && } + + +
+
+ + {!isAndroid &&
{parseFloat(stateBottom.toFixed(2)) + ' ' + metricText}
} +
+ + + {isAndroid && } + + +
+
+ + {!isAndroid &&
{parseFloat(stateLeft.toFixed(2)) + ' ' + metricText}
} +
+ + + {isAndroid && } + + +
+
+ + {!isAndroid &&
{parseFloat(stateRight.toFixed(2)) + ' ' + metricText}
} +
+ + + {isAndroid && } + + +
+
+
+
+ ) +}; + +const PageSpreadsheetSettings = props => { + const { t } = useTranslation(); + const _t = t('View.Settings', {returnObjects: true}); + const storeSpreadsheetSettings = props.storeSpreadsheetSettings; + const isPortrait = storeSpreadsheetSettings.isPortrait; + const isHideHeadings = storeSpreadsheetSettings.isHideHeadings; + const isHideGridlines = storeSpreadsheetSettings.isHideGridlines; + + // Init Format + + const curMetricName = Common.Utils.Metric.getMetricName(Common.Utils.Metric.getCurrentMetric()); + const pageSizesIndex = storeSpreadsheetSettings.pageSizesIndex; + + const pageSizes = storeSpreadsheetSettings.getPageSizesList(); + const textFormat = pageSizes[pageSizesIndex]['caption']; + const sizeW = parseFloat(Common.Utils.Metric.fnRecalcFromMM(pageSizes[pageSizesIndex]['value'][0]).toFixed(2)); + const sizeH = parseFloat(Common.Utils.Metric.fnRecalcFromMM(pageSizes[pageSizesIndex]['value'][1]).toFixed(2)); + const pageSizeTxt = sizeW + ' ' + curMetricName + ' x ' + sizeH + ' ' + curMetricName; + + return ( + + + {_t.textOrientation} + + { + storeSpreadsheetSettings.resetPortrait(true); + props.onOrientationChange(0)}}> + + { + storeSpreadsheetSettings.resetPortrait(false); + props.onOrientationChange(1)}}> + + + {_t.textFormat} + + + + + + + {_t.textHideHeadings} + { + storeSpreadsheetSettings.changeHideHeadings(!isHideHeadings); + props.clickCheckboxHideHeadings(!isHideHeadings) + }} /> + + + {_t.textHideGridlines} + { + storeSpreadsheetSettings.changeHideGridlines(!isHideGridlines); + props.clickCheckboxHideGridlines(!isHideGridlines) + }} /> + + + + + + + ) +}; + +const SpreadsheetFormats = inject("storeSpreadsheetSettings")(observer(PageSpreadsheetFormats)); +const SpreadsheetMargins = inject("storeSpreadsheetSettings")(observer(PageSpreadsheetMargins)); +const SpreadsheetSettings = inject("storeSpreadsheetSettings")(observer(PageSpreadsheetSettings)); +const SpreadsheetColorSchemes = inject("storeSpreadsheetSettings")(observer(PageSpreadsheetColorSchemes)); + +export { + SpreadsheetSettings, + SpreadsheetFormats, + SpreadsheetMargins, + SpreadsheetColorSchemes +}; From df81b70d06d42733575c4e1a528dc5fb0211e8ff Mon Sep 17 00:00:00 2001 From: SergeyEzhin Date: Fri, 19 Feb 2021 21:09:38 +0300 Subject: [PATCH 13/27] [SSE mobile] Corrected Spreadsheet Settings, added Download, Print --- apps/spreadsheeteditor/mobile/locale/en.json | 16 +- .../src/controller/settings/Download.jsx | 168 ++++++++++++++++++ .../settings/SpreadsheetSettings.jsx | 9 +- .../mobile/src/view/settings/Download.jsx | 40 +++++ .../mobile/src/view/settings/Settings.jsx | 45 ++++- .../src/view/settings/SpreadsheetSettings.jsx | 17 +- 6 files changed, 277 insertions(+), 18 deletions(-) create mode 100644 apps/spreadsheeteditor/mobile/src/controller/settings/Download.jsx create mode 100644 apps/spreadsheeteditor/mobile/src/view/settings/Download.jsx diff --git a/apps/spreadsheeteditor/mobile/locale/en.json b/apps/spreadsheeteditor/mobile/locale/en.json index 266f24b3e..beffa0415 100644 --- a/apps/spreadsheeteditor/mobile/locale/en.json +++ b/apps/spreadsheeteditor/mobile/locale/en.json @@ -242,7 +242,21 @@ "textTop": "Top", "textRight": "Right", "textCustomSize": "Custom Size", - "textSpreadsheetFormats": "Spreadsheet Formats" + "textSpreadsheetFormats": "Spreadsheet Formats", + "textDownloadAs": "Download As", + "warnDownloadAs": "If you continue saving in this format all features except the text will be lost.
Are you sure you want to continue?", + "notcriticalErrorTitle": "Warning", + "txtEncoding": "Encoding", + "txtDelimiter": "Delimiter", + "txtSpace": "Space", + "txtTab": "Tab", + "advCSVOptions": "Choose CSV Options", + "advDRMOptions": "Protected File", + "advDRMEnterPassword": "You password please:", + "advDRMPassword": "Password", + "closeButtonText": "Close File", + "txtProtected": "Once you enter the password and open the file, the current password to the file will be reset", + "textCancel": "Cancel" } }, "Common": { diff --git a/apps/spreadsheeteditor/mobile/src/controller/settings/Download.jsx b/apps/spreadsheeteditor/mobile/src/controller/settings/Download.jsx new file mode 100644 index 000000000..2ee98c31d --- /dev/null +++ b/apps/spreadsheeteditor/mobile/src/controller/settings/Download.jsx @@ -0,0 +1,168 @@ +import React, { Component } from "react"; +import Download from "../../view/settings/Download"; +import { Device } from '../../../../../common/mobile/utils/device'; +import { withTranslation, useTranslation } from 'react-i18next'; +import { f7 } from 'framework7-react'; + +class DownloadController extends Component { + constructor(props) { + super(props); + this.onSaveFormat = this.onSaveFormat.bind(this); + } + + closeModal() { + if (Device.phone) { + f7.sheet.close('.settings-popup', true); + } else { + f7.popover.close('#settings-popover'); + } + } + + onSaveFormat(format) { + const api = Common.EditorApi.get(); + const { t } = this.props; + const _t = t("View.Settings", {returnObjects: true}); + + this.closeModal(); + + if (format) { + if (format == Asc.c_oAscFileType.CSV) { + f7.dialog.confirm( + _t.warnDownloadAs, + _t.notcriticalErrorTitle, + function () { + onAdvancedOptions(Asc.c_oAscAdvancedOptionsID.CSV, api.asc_getAdvancedOptions(), 2, new Asc.asc_CDownloadOptions(format), _t) + } + ) + } else { + api.asc_DownloadAs(new Asc.asc_CDownloadOptions(format)); + } + } + } + + render() { + return ( + + ); + } +} + +const DownloadWithTranslation = withTranslation()(DownloadController); + +const onAdvancedOptions = (type, advOptions, mode, formatOptions, _t, canRequestClose) => { + const api = Common.EditorApi.get(); + + if (type == Asc.c_oAscAdvancedOptionsID.CSV) { + let picker; + const pages = []; + const pagesName = []; + + for (let page of advOptions.asc_getCodePages()) { + pages.push(page.asc_getCodePage()); + pagesName.push(page.asc_getCodePageName()); + } + + // me.onLongActionEnd(Asc.c_oAscAsyncActionType.BlockInteraction, LoadingDocument); + + const buttons = []; + + if (mode === 2) { + buttons.push({ + text: _t.textCancel + }); + } + + buttons.push({ + text: 'OK', + bold: true, + onClick: function() { + let encoding = picker.cols[0].value, + delimiter = picker.cols[1].value; + + if (mode == 2) { + formatOptions && formatOptions.asc_setAdvancedOptions(new Asc.asc_CTextOptions(encoding, delimiter)); + api.asc_DownloadAs(formatOptions); + } else { + api.asc_setAdvancedOptions(type, new Asc.asc_CTextOptions(encoding, delimiter)); + } + + //if (!me._isDocReady) { + //me.onLongActionBegin(Asc.c_oAscAsyncActionType['BlockInteraction'], LoadingDocument); + //} + } + }); + + const dialog = f7.dialog.create({ + title: _t.advCSVOptions, + text: '', + content: + '
' + + '
' + + '
' + _t.txtEncoding + '
' + + '
' + _t.txtDelimiter + '
' + + '
' + + '
' + + '
', + buttons: buttons + }).open(); + + const recommendedSettings = advOptions.asc_getRecommendedSettings(); + + dialog.on('opened', () => { + picker = f7.picker.create({ + containerEl: document.getElementById('txt-encoding'), + cols: [{ + textAlign: 'left', + values: pages, + displayValues: pagesName + },{ + textAlign: 'right', + width: 120, + values: [4, 2, 3, 1, 5], + displayValues: [',', ';', ':', _t.txtTab, _t.txtSpace] + }], + toolbar: false, + rotateEffect: true, + value: [ + recommendedSettings && recommendedSettings.asc_getCodePage(), + (recommendedSettings && recommendedSettings.asc_getDelimiter()) ? recommendedSettings.asc_getDelimiter() : 4 + ], + }); + }); + + } else if (type == Asc.c_oAscAdvancedOptionsID.DRM) { + //me.onLongActionEnd(Asc.c_oAscAsyncActionType.BlockInteraction, LoadingDocument); + const buttons = [{ + text: 'OK', + bold: true, + onClick: function () { + const password = document.getElementById('modal-password').value; + api.asc_setAdvancedOptions(type, new Asc.asc_CDRMAdvancedOptions(password)); + //if (!me._isDocReady) { + //me.onLongActionBegin(Asc.c_oAscAsyncActionType['BlockInteraction'], LoadingDocument); + //} + } + }]; + + if (canRequestClose) + buttons.push({ + text: _t.closeButtonText, + onClick: function () { + Common.Gateway.requestClose(); + } + }); + + f7.dialog.create({ + title: _t.advDRMOptions, + text: _t.txtProtected, + content: + '
', + buttons: buttons + }).open(); + } +}; + +export { + DownloadWithTranslation, + onAdvancedOptions +} \ No newline at end of file diff --git a/apps/spreadsheeteditor/mobile/src/controller/settings/SpreadsheetSettings.jsx b/apps/spreadsheeteditor/mobile/src/controller/settings/SpreadsheetSettings.jsx index 3ac59f0d2..b1030ab10 100644 --- a/apps/spreadsheeteditor/mobile/src/controller/settings/SpreadsheetSettings.jsx +++ b/apps/spreadsheeteditor/mobile/src/controller/settings/SpreadsheetSettings.jsx @@ -35,10 +35,10 @@ class SpreadsheetSettingsController extends Component { this.localMarginProps = props.asc_getPageMargins(); - let left = parseFloat(Common.Utils.Metric.fnRecalcFromMM(this.localMarginProps.asc_getLeft()).toFixed(2)), - top = parseFloat(Common.Utils.Metric.fnRecalcFromMM(this.localMarginProps.asc_getTop()).toFixed(2)), - right = parseFloat(Common.Utils.Metric.fnRecalcFromMM(this.localMarginProps.asc_getRight()).toFixed(2)), - bottom = parseFloat(Common.Utils.Metric.fnRecalcFromMM(this.localMarginProps.asc_getBottom()).toFixed(2)); + let left = this.localMarginProps.asc_getLeft(), + top = this.localMarginProps.asc_getTop(), + right = this.localMarginProps.asc_getRight(), + bottom = this.localMarginProps.asc_getBottom(); return {left, top, right, bottom}; } @@ -60,7 +60,6 @@ class SpreadsheetSettingsController extends Component { } api.asc_changePageMargins(changeProps.asc_getLeft(), changeProps.asc_getRight(), changeProps.asc_getTop(), changeProps.asc_getBottom(), api.asc_getActiveWorksheetIndex()); - // this.initSpreadsheetMargins(); } onOrientationChange(value) { diff --git a/apps/spreadsheeteditor/mobile/src/view/settings/Download.jsx b/apps/spreadsheeteditor/mobile/src/view/settings/Download.jsx new file mode 100644 index 000000000..19e114966 --- /dev/null +++ b/apps/spreadsheeteditor/mobile/src/view/settings/Download.jsx @@ -0,0 +1,40 @@ +import React from 'react'; +import { Page, Navbar, List, ListItem, BlockTitle, Icon } from "framework7-react"; +import { useTranslation } from "react-i18next"; + +const Download = props => { + const { t } = useTranslation(); + const _t = t("View.Settings", { returnObjects: true }); + + return ( + + + {_t.textDownloadAs} + + props.onSaveFormat(Asc.c_oAscFileType.XLSX)}> + + + props.onSaveFormat(Asc.c_oAscFileType.PDF)}> + + + props.onSaveFormat(Asc.c_oAscFileType.PDFA)}> + + + props.onSaveFormat(Asc.c_oAscFileType.ODS)}> + + + props.onSaveFormat(Asc.c_oAscFileType.CSV)}> + + + props.onSaveFormat(Asc.c_oAscFileType.XLTX)}> + + + props.onSaveFormat(Asc.c_oAscFileType.OTS)}> + + + + + ) +} + +export default Download; \ No newline at end of file diff --git a/apps/spreadsheeteditor/mobile/src/view/settings/Settings.jsx b/apps/spreadsheeteditor/mobile/src/view/settings/Settings.jsx index d0940cae1..7b25b93cf 100644 --- a/apps/spreadsheeteditor/mobile/src/view/settings/Settings.jsx +++ b/apps/spreadsheeteditor/mobile/src/view/settings/Settings.jsx @@ -4,6 +4,7 @@ import { withTranslation } from 'react-i18next'; import {f7} from 'framework7-react'; import {Device} from '../../../../../common/mobile/utils/device'; import SpreadsheetSettingsController from '../../controller/settings/SpreadsheetSettings.jsx'; +import {DownloadWithTranslation} from '../../controller/settings/Download.jsx'; import {SpreadsheetColorSchemes, SpreadsheetFormats, SpreadsheetMargins} from './SpreadsheetSettings.jsx'; const routes = [ @@ -26,6 +27,10 @@ const routes = [ { path: '/margins/', component: SpreadsheetMargins + }, + { + path: '/download/', + component: DownloadWithTranslation } ]; @@ -42,6 +47,40 @@ const SettingsList = withTranslation()(props => { props.onOptionClick(page) }; + const closeModal = () => { + if (Device.phone) { + f7.sheet.close('.settings-popup', true); + } else { + f7.popover.close('#settings-popover'); + } + }; + + const onPrint = () => { + closeModal(); + const api = Common.EditorApi.get(); + api.asc_Print(); + }; + + const showHelp = () => { + // let url = '{{HELP_URL}}'; + let url = 'https://helpcenter.onlyoffice.com'; + + if (url.charAt(url.length-1) !== '/') { + url += '/'; + } + + if (Device.sailfish || Device.android) { + url+='mobile-applications/documents/mobile-web-editors/android/index.aspx'; + } + else { + url+='mobile-applications/documents/mobile-web-editors/ios/index.aspx'; + } + + closeModal(); + window.open(url, "_blank"); + }; + + return ( @@ -58,16 +97,16 @@ const SettingsList = withTranslation()(props => { - + - + - + diff --git a/apps/spreadsheeteditor/mobile/src/view/settings/SpreadsheetSettings.jsx b/apps/spreadsheeteditor/mobile/src/view/settings/SpreadsheetSettings.jsx index 461b37081..a39e95f2b 100644 --- a/apps/spreadsheeteditor/mobile/src/view/settings/SpreadsheetSettings.jsx +++ b/apps/spreadsheeteditor/mobile/src/view/settings/SpreadsheetSettings.jsx @@ -85,7 +85,6 @@ const PageSpreadsheetMargins = props => { const _t = t('View.Settings', {returnObjects: true}); const metricText = Common.Utils.Metric.getMetricName(Common.Utils.Metric.getCurrentMetric()); const margins = props.initSpreadsheetMargins(); - console.log(margins); const [stateTop, setTop] = useState(margins.top); const [stateBottom, setBottom] = useState(margins.bottom); @@ -128,13 +127,13 @@ const PageSpreadsheetMargins = props => { - {!isAndroid &&
{parseFloat(stateTop.toFixed(2)) + ' ' + metricText}
} + {!isAndroid &&
{parseFloat(Common.Utils.Metric.fnRecalcFromMM(stateTop).toFixed(2)) + ' ' + metricText}
}
- {isAndroid && } + {isAndroid && } @@ -142,13 +141,13 @@ const PageSpreadsheetMargins = props => {
- {!isAndroid &&
{parseFloat(stateBottom.toFixed(2)) + ' ' + metricText}
} + {!isAndroid &&
{parseFloat(Common.Utils.Metric.fnRecalcFromMM(stateBottom).toFixed(2)) + ' ' + metricText}
}
- {isAndroid && } + {isAndroid && } @@ -156,13 +155,13 @@ const PageSpreadsheetMargins = props => {
- {!isAndroid &&
{parseFloat(stateLeft.toFixed(2)) + ' ' + metricText}
} + {!isAndroid &&
{parseFloat(Common.Utils.Metric.fnRecalcFromMM(stateLeft).toFixed(2)) + ' ' + metricText}
}
- {isAndroid && } + {isAndroid && } @@ -170,13 +169,13 @@ const PageSpreadsheetMargins = props => {
- {!isAndroid &&
{parseFloat(stateRight.toFixed(2)) + ' ' + metricText}
} + {!isAndroid &&
{parseFloat(Common.Utils.Metric.fnRecalcFromMM(stateRight).toFixed(2)) + ' ' + metricText}
}
- {isAndroid && } + {isAndroid && } From 2942114c8259a1f2f42f5737fee6f401f30c99ad Mon Sep 17 00:00:00 2001 From: Maxim Kadushkin Date: Sat, 20 Feb 2021 00:04:12 +0300 Subject: [PATCH 14/27] [SSE mobile] --- .../common/mobile/resources/less/common-ios.less | 16 ++++++++++------ apps/common/mobile/resources/less/common.less | 7 +++---- apps/common/mobile/resources/less/variables.less | 6 ++++++ 3 files changed, 19 insertions(+), 10 deletions(-) diff --git a/apps/common/mobile/resources/less/common-ios.less b/apps/common/mobile/resources/less/common-ios.less index 86b096f6d..0160e25d7 100644 --- a/apps/common/mobile/resources/less/common-ios.less +++ b/apps/common/mobile/resources/less/common-ios.less @@ -393,10 +393,14 @@ // input[type="number"] - input[type="number"]::placeholder { color: @darkGreen;} - input[type="number"]::-webkit-input-placeholder {color: @darkGreen;} - input[type="number"]::-moz-placeholder {color: @darkGreen;} - input[type="number"]:-moz-placeholder {color: @darkGreen;} - input[type="number"]:-ms-input-placeholder {color: @darkGreen;} - + input[type="number"] { + &::placeholder, + &::-webkit-input-placeholder, + &::-moz-placeholder, + &:-moz-placeholder, + &:-ms-input-placeholder + { + color: @darkGreen; + } + } } diff --git a/apps/common/mobile/resources/less/common.less b/apps/common/mobile/resources/less/common.less index 0175df94a..584c33e60 100644 --- a/apps/common/mobile/resources/less/common.less +++ b/apps/common/mobile/resources/less/common.less @@ -4,7 +4,6 @@ @gray: #c4c4c4; @green: #4cd964; @red: #f00; -@background-normal: @white; @autoColor: @black; .popup, .popover, .sheet-modal { @@ -302,7 +301,7 @@ } &.active { .color-auto { - box-shadow: 0 0 0 1px @background-normal, 0 0 0 4px @themeColor; + box-shadow: 0 0 0 1px @white, 0 0 0 4px @themeColor; border-radius: 1px; } } @@ -323,7 +322,7 @@ position: absolute; width: 100%; height: 100%; - box-shadow: 0 0 0 1px @background-normal, 0 0 0 4px @themeColor; + box-shadow: 0 0 0 1px @white, 0 0 0 4px @themeColor; z-index: 1; border-radius: 1px; } @@ -348,7 +347,7 @@ .dynamic-colors { .empty-color { - background-color: @background-normal; + background-color: @white; } } } diff --git a/apps/common/mobile/resources/less/variables.less b/apps/common/mobile/resources/less/variables.less index 2ba2c9402..691855ff5 100644 --- a/apps/common/mobile/resources/less/variables.less +++ b/apps/common/mobile/resources/less/variables.less @@ -1,3 +1,9 @@ +.md { + --background-normal: #f1f1f1; +} + +@background-normal: var(--background-normal, #fff); + @border-regular-control: #cbcbcb; @text-normal: #000; From 1c45047df5b8568a9724ddea35c896458ac671e1 Mon Sep 17 00:00:00 2001 From: Maxim Kadushkin Date: Sat, 20 Feb 2021 00:05:06 +0300 Subject: [PATCH 15/27] [SSE mobile] repaired cell editor --- apps/common/mobile/resources/less/_mixins.less | 4 ++-- .../mobile/src/less/celleditor.less | 13 ++++++++++++- .../mobile/src/less/statusbar.less | 6 +++++- 3 files changed, 19 insertions(+), 4 deletions(-) diff --git a/apps/common/mobile/resources/less/_mixins.less b/apps/common/mobile/resources/less/_mixins.less index bc4541de0..b689522d0 100644 --- a/apps/common/mobile/resources/less/_mixins.less +++ b/apps/common/mobile/resources/less/_mixins.less @@ -1,7 +1,7 @@ // Encoded SVG Background -.encoded-svg-mask(@svg) { +.encoded-svg-mask(@svg, @color: @themeColor) { @url: `encodeURIComponent(@{svg})`; - background-color: @themeColor; + background-color: @color; -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,@{url}"); } diff --git a/apps/spreadsheeteditor/mobile/src/less/celleditor.less b/apps/spreadsheeteditor/mobile/src/less/celleditor.less index 8078b0d05..53be7192a 100644 --- a/apps/spreadsheeteditor/mobile/src/less/celleditor.less +++ b/apps/spreadsheeteditor/mobile/src/less/celleditor.less @@ -13,6 +13,7 @@ } display: flex; + z-index: 5001; height: @cellEditorHeight; min-height: @cellEditorHeight; @@ -27,7 +28,7 @@ &:after { content: ''; position: absolute; - background-color: var(--f7-navbar-border-color, var(--f7-bars-border-color)); + background-color: @border-regular-control; display: block; z-index: 15; top: auto; @@ -43,6 +44,10 @@ #box-cell-name { display: inline-flex; background-color: var(--f7-navbar-bg-color); + + .md & { + background-color: @gray-light; + } } #idx-cell-name { @@ -60,6 +65,12 @@ } } + .phone & { + #idx-cell-name { + display: none; + } + } + #idx-btn-function { height: @cellEditorHeight; line-height: @cellEditorHeight; diff --git a/apps/spreadsheeteditor/mobile/src/less/statusbar.less b/apps/spreadsheeteditor/mobile/src/less/statusbar.less index a142d2bb9..3ce1c36cd 100644 --- a/apps/spreadsheeteditor/mobile/src/less/statusbar.less +++ b/apps/spreadsheeteditor/mobile/src/less/statusbar.less @@ -51,8 +51,12 @@ } i.icon { + width: 22px; + height: 22px; &.icon-plus { - .encoded-svg-background(''); + @source: ''; + .encoded-svg-mask(@source, @fontColor); + background-image: none; } } } From 935b7c7d570a6f578978a5e211ae9c030f97b4ec Mon Sep 17 00:00:00 2001 From: SergeyEzhin Date: Tue, 23 Feb 2021 17:17:44 +0300 Subject: [PATCH 16/27] [SSE mobile] Added Application Settings without Regional Settings --- apps/spreadsheeteditor/mobile/locale/en.json | 19 +- .../settings/ApplicationSettings.jsx | 95 ++++++++++ .../mobile/src/store/applicationSettings.js | 89 +++++++++ .../mobile/src/store/mainStore.js | 3 +- .../src/view/settings/ApplicationSettings.jsx | 179 ++++++++++++++++++ .../mobile/src/view/settings/Settings.jsx | 20 +- 6 files changed, 402 insertions(+), 3 deletions(-) create mode 100644 apps/spreadsheeteditor/mobile/src/controller/settings/ApplicationSettings.jsx create mode 100644 apps/spreadsheeteditor/mobile/src/store/applicationSettings.js create mode 100644 apps/spreadsheeteditor/mobile/src/view/settings/ApplicationSettings.jsx diff --git a/apps/spreadsheeteditor/mobile/locale/en.json b/apps/spreadsheeteditor/mobile/locale/en.json index beffa0415..0f7ab8d02 100644 --- a/apps/spreadsheeteditor/mobile/locale/en.json +++ b/apps/spreadsheeteditor/mobile/locale/en.json @@ -256,7 +256,24 @@ "advDRMPassword": "Password", "closeButtonText": "Close File", "txtProtected": "Once you enter the password and open the file, the current password to the file will be reset", - "textCancel": "Cancel" + "textCancel": "Cancel", + "textUnitOfMeasurement": "Unit Of Measurement", + "textCentimeter": "Centimeter", + "textPoint": "Point", + "textInch": "Inch", + "textMacrosSettings": "Macros Settings", + "textFormulaLanguage": "Formula Language", + "textRegionalSettings": "Regional Settings", + "textCommentingDisplay": "Commenting Display", + "textComments": "Comments", + "textResolvedComments": "Resolved Comments", + "textR1C1Style": "R1C1 Reference Style", + "textDisableAll": "Disable All", + "textDisableAllMacrosWithoutNotification": "Disable all macros without a notification", + "textShowNotification": "Show Notification", + "textDisableAllMacrosWithNotification": "Disable all macros with a notification", + "textEnableAll": "Enable All", + "textEnableAllMacrosWithoutNotification": "Enable all macros without a notification" } }, "Common": { diff --git a/apps/spreadsheeteditor/mobile/src/controller/settings/ApplicationSettings.jsx b/apps/spreadsheeteditor/mobile/src/controller/settings/ApplicationSettings.jsx new file mode 100644 index 000000000..17a307311 --- /dev/null +++ b/apps/spreadsheeteditor/mobile/src/controller/settings/ApplicationSettings.jsx @@ -0,0 +1,95 @@ +import React, { Component } from "react"; +import { ApplicationSettings } from "../../view/settings/ApplicationSettings"; +import {observer, inject} from "mobx-react"; + +class ApplicationSettingsController extends Component { + constructor(props) { + super(props); + this.onFormulaLangChange = this.onFormulaLangChange.bind(this); + this.initRegSettings(); + } + + initRegSettings() { + + // this.props.storeApplicationSettings.initRegSettings(); + + const info = new Asc.asc_CFormatCellsInfo(); + const api = Common.EditorApi.get(); + const regSettings = this.props.storeApplicationSettings.reqSettings; + + info.asc_setType(Asc.c_oAscNumFormatType.None); + info.asc_setSymbol(regSettings); + + let arr = api.asc_getFormatCells(info); + let text = api.asc_getLocaleExample(arr[4], 1000.01, regSettings); + + text = text + ' ' + api.asc_getLocaleExample(arr[5], Asc.cDate().getExcelDateWithTime(), regSettings); + text = text + ' ' + api.asc_getLocaleExample(arr[6], Asc.cDate().getExcelDateWithTime(), regSettings); + + this.textRegSettingsExample = text; + } + + onChangeDisplayComments(displayComments) { + const api = Common.EditorApi.get(); + + if (!displayComments) { + api.asc_hideComments(); + // Common.localStorage.setBool("sse-settings-resolvedcomment", false); + } else { + // let resolved = Common.localStorage.getBool("sse-settings-resolvedcomment"); + api.asc_showComments(displayComments); + } + + // Common.localStorage.setBool("sse-mobile-settings-livecomment", displayComments); + } + + onChangeDisplayResolved(value) { + const api = Common.EditorApi.get(); + // let displayComments = Common.localStorage.getBool("sse-mobile-settings-livecomment"); + + // if (displayComments) { + api.asc_showComments(value); + // Common.localStorage.setBool("sse-settings-resolvedcomment", resolved); + // } + } + + clickR1C1Style(checked) { + const api = Common.EditorApi.get(); + // Common.localStorage.setBool('sse-settings-r1c1', checked); + api.asc_setR1C1Mode(checked); + } + + unitMeasurementChange(value) { + value = value ? +value : Common.Utils.Metric.getDefaultMetric(); + Common.Utils.Metric.setCurrentMetric(value); + // Common.localStorage.setItem("se-mobile-settings-unit", value); + } + + onChangeMacrosSettings(value) { + Common.Utils.InternalSettings.set("sse-mobile-macros-mode", +value); + // Common.localStorage.setItem("sse-mobile-macros-mode", +value); + } + + onFormulaLangChange(value) { + // Common.localStorage.setItem("sse-settings-func-lang", value); + this.initRegSettings(); + // SSE.getController('AddFunction').onDocumentReady(); + } + + render() { + return ( + + ) + } +} + + +export default inject("storeApplicationSettings")(observer(ApplicationSettingsController)); \ No newline at end of file diff --git a/apps/spreadsheeteditor/mobile/src/store/applicationSettings.js b/apps/spreadsheeteditor/mobile/src/store/applicationSettings.js new file mode 100644 index 000000000..051a38dc8 --- /dev/null +++ b/apps/spreadsheeteditor/mobile/src/store/applicationSettings.js @@ -0,0 +1,89 @@ +import {action, observable} from 'mobx'; + +export class storeApplicationSettings { + + @observable unitMeasurement = Common.Utils.Metric.getCurrentMetric(); + @observable macrosMode = 0; + @observable formulaLang = Common.Locale.currentLang || dataLang[0].value; + @observable regSettings = 0x0409; + @observable regData = []; + @observable isRefStyle = false; + @observable isComments = true; + @observable isResolvedComments = true; + + getFormulaLanguages() { + const dataLang = [ + { value: 'en', displayValue: 'English', exampleValue: ' SUM; MIN; MAX; COUNT' }, + { value: 'de', displayValue: 'Deutsch', exampleValue: ' SUMME; MIN; MAX; ANZAHL' }, + { value: 'es', displayValue: 'Spanish', exampleValue: ' SUMA; MIN; MAX; CALCULAR' }, + { value: 'fr', displayValue: 'French', exampleValue: ' SOMME; MIN; MAX; NB' }, + { value: 'it', displayValue: 'Italian', exampleValue: ' SOMMA; MIN; MAX; CONTA.NUMERI' }, + { value: 'ru', displayValue: 'Russian', exampleValue: ' СУММ; МИН; МАКС; СЧЁТ' }, + { value: 'pl', displayValue: 'Polish', exampleValue: ' SUMA; MIN; MAX; ILE.LICZB' } + ] + + return dataLang; + } + + getRegDataCodes() { + const regDataCode = [ + { value: 0x042C }, { value: 0x0402 }, { value: 0x0405 }, { value: 0x0407 }, {value: 0x0807}, { value: 0x0408 }, { value: 0x0C09 }, { value: 0x0809 }, { value: 0x0409 }, { value: 0x0C0A }, { value: 0x080A }, + { value: 0x040B }, { value: 0x040C }, { value: 0x0410 }, { value: 0x0411 }, { value: 0x0412 }, { value: 0x0426 }, { value: 0x0413 }, { value: 0x0415 }, { value: 0x0416 }, + { value: 0x0816 }, { value: 0x0419 }, { value: 0x041B }, { value: 0x0424 }, { value: 0x081D }, { value: 0x041D }, { value: 0x041F }, { value: 0x0422 }, { value: 0x042A }, { value: 0x0804 } + ]; + + return regDataCode; + } + + // @action initRegData() { + // const regDataCodes = this.getRegDataCodes(); + // regDataCodes.forEach(item => { + // let langInfo = Common.util.LanguageInfo.getLocalLanguageName(item.value); + // this.regData.push({code: item.value, displayName: langInfo[1], langName: langInfo[0]}); + // }) + // } + + // @action initRegSettings() { + // const regData = this.getRegDataCodes(); + // let value = Number(Common.localStorage.getItem('sse-settings-regional')); + + // if(!value) { + // this.regSettings = 0x0409; + // } else { + // regData.forEach(obj => { + // if(obj.value === value) { + // this.regSettings = obj.value; + // } + // }); + // } + // } + + @action changeRegSettings(value) { + this.regSettings = value; + } + + @action changeUnitMeasurement(value) { + this.unitMeasurement = +value; + } + + @action changeMacrosSettings(value) { + this.macrosMode = +value; + } + + @action changeDisplayComments(value) { + this.isComments = value; + if (!value) this.changeDisplayResolved(value); + } + + @action changeDisplayResolved(value) { + this.isResolvedComments = value; + } + + @action changeRefStyle(value) { + this.isRefStyle = value; + } + + @action changeFormulaLang(value) { + this.formulaLang = value; + } +} \ No newline at end of file diff --git a/apps/spreadsheeteditor/mobile/src/store/mainStore.js b/apps/spreadsheeteditor/mobile/src/store/mainStore.js index ebf80f0ac..c7d17b90d 100644 --- a/apps/spreadsheeteditor/mobile/src/store/mainStore.js +++ b/apps/spreadsheeteditor/mobile/src/store/mainStore.js @@ -6,7 +6,7 @@ import {storeWorksheets} from './sheets'; import {storeFunctions} from './functions'; import {storePalette} from "./palette"; import {storeTextSettings} from "./textSettings"; -// import {storeParagraphSettings} from "./paragraphSettings"; +import {storeApplicationSettings} from "./applicationSettings"; import {storeShapeSettings} from "./shapeSettings"; import {storeCellSettings} from "./cellSettings"; // import {storeImageSettings} from "./imageSettings"; @@ -17,6 +17,7 @@ import {storeSpreadsheetSettings} from "./spreadsheetSettings"; export const stores = { storeFocusObjects: new storeFocusObjects(), storeSpreadsheetSettings: new storeSpreadsheetSettings(), + storeApplicationSettings: new storeApplicationSettings(), users: new storeUsers(), sheets: new storeWorksheets(), storeFunctions: new storeFunctions(), diff --git a/apps/spreadsheeteditor/mobile/src/view/settings/ApplicationSettings.jsx b/apps/spreadsheeteditor/mobile/src/view/settings/ApplicationSettings.jsx new file mode 100644 index 000000000..fd69d7adb --- /dev/null +++ b/apps/spreadsheeteditor/mobile/src/view/settings/ApplicationSettings.jsx @@ -0,0 +1,179 @@ +import React, {Fragment} from "react"; +import { observer, inject } from "mobx-react"; +import { Page, Navbar, List, ListItem, BlockTitle, Toggle } from "framework7-react"; +import { useTranslation } from "react-i18next"; + +const PageApplicationSettings = props => { + const { t } = useTranslation(); + const _t = t("View.Settings", { returnObjects: true }); + const storeApplicationSettings = props.storeApplicationSettings; + const unitMeasurement = storeApplicationSettings.unitMeasurement; + const formulaLang = storeApplicationSettings.formulaLang; + // const regSettings = storeApplicationSettings.regSettings; + const dataLang = storeApplicationSettings.getFormulaLanguages(); + const dataRegCodes = storeApplicationSettings.getRegDataCodes(); + const defineFormulaLang = () => dataLang.find(obj => obj.value === formulaLang); + // const defineRegSettings = () => dataRegCodes.find(obj => obj.value === regSettings); + const currentFormulaLang = defineFormulaLang(); + // const currentRegSettings = defineRegSettings(); + const textRegSettingsExample = props.textRegSettingsExample; + const isRefStyle = storeApplicationSettings.isRefStyle; + const isComments = storeApplicationSettings.isComments; + const isResolvedComments = storeApplicationSettings.isResolvedComments; + + const changeMeasureSettings = value => { + storeApplicationSettings.changeUnitMeasurement(value); + props.unitMeasurementChange(value); + }; + + // set mode + // const appOptions = props.storeAppOptions; + // const _isEdit = appOptions.isEdit; + // const _isShowMacros = (!appOptions.isDisconnected && appOptions.customization) ? appOptions.customization.macros !== false : true; + + return ( + + + {/* {_isEdit && */} + + {_t.textUnitOfMeasurement} + + changeMeasureSettings(0)}> + changeMeasureSettings(1)}> + changeMeasureSettings(2)}> + + {_t.textFormulaLanguage} + + + + + {_t.textRegionalSettings} + + + + {_t.textCommentingDisplay} + + + {_t.textComments} + { + storeApplicationSettings.changeDisplayComments(!isComments); + props.onChangeDisplayComments(!isComments); + }} + /> + + + {_t.textResolvedComments} + { + storeApplicationSettings.changeDisplayResolved(!isResolvedComments); + props.onChangeDisplayResolved(!isResolvedComments); + }} + /> + + + + + {_t.textR1C1Style} + { + storeApplicationSettings.changeRefStyle(!isRefStyle); + props.clickR1C1Style(!isRefStyle); + }} + /> + + + + {/* } */} + {/* {_isShowMacros && */} + + + + {/* } */} + + ); +}; + +const PageRegionalSettings = props => { + const { t } = useTranslation(); + const _t = t("View.Settings", { returnObjects: true }); + const storeApplicationSettings = props.storeApplicationSettings; + + return ( + + + + ) +} + +const PageFormulaLanguage = props => { + const { t } = useTranslation(); + const _t = t("View.Settings", { returnObjects: true }); + const storeApplicationSettings = props.storeApplicationSettings; + const formulaLang = storeApplicationSettings.formulaLang; + const dataLang = storeApplicationSettings.getFormulaLanguages(); + + return ( + + + + {dataLang.map((elem, index) => { + return ( + { + storeApplicationSettings.changeFormulaLang(elem.value); + props.onFormulaLangChange(elem.value); + }}> + + ) + })} + + + ) +} + +const PageMacrosSettings = props => { + const { t } = useTranslation(); + const _t = t("View.Settings", { returnObjects: true }); + const storeApplicationSettings = props.storeApplicationSettings; + const macrosMode = storeApplicationSettings.macrosMode; + + const changeMacros = value => { + storeApplicationSettings.changeMacrosSettings(value); + props.onChangeMacrosSettings(value); + }; + + return ( + + + + changeMacros(2)}> + changeMacros(0)}> + changeMacros(1)}> + + + ); +}; + +const ApplicationSettings = inject("storeApplicationSettings")(observer(PageApplicationSettings)); +const MacrosSettings = inject("storeApplicationSettings")(observer(PageMacrosSettings)); +const RegionalSettings = inject("storeApplicationSettings")(observer(PageRegionalSettings)); +const FormulaLanguage = inject("storeApplicationSettings")(observer(PageFormulaLanguage)); + +export { + ApplicationSettings, + MacrosSettings, + RegionalSettings, + FormulaLanguage +}; \ No newline at end of file diff --git a/apps/spreadsheeteditor/mobile/src/view/settings/Settings.jsx b/apps/spreadsheeteditor/mobile/src/view/settings/Settings.jsx index 7b25b93cf..2d79a71e9 100644 --- a/apps/spreadsheeteditor/mobile/src/view/settings/Settings.jsx +++ b/apps/spreadsheeteditor/mobile/src/view/settings/Settings.jsx @@ -4,8 +4,10 @@ import { withTranslation } from 'react-i18next'; import {f7} from 'framework7-react'; import {Device} from '../../../../../common/mobile/utils/device'; import SpreadsheetSettingsController from '../../controller/settings/SpreadsheetSettings.jsx'; +import ApplicationSettingsController from '../../controller/settings/ApplicationSettings.jsx'; import {DownloadWithTranslation} from '../../controller/settings/Download.jsx'; import {SpreadsheetColorSchemes, SpreadsheetFormats, SpreadsheetMargins} from './SpreadsheetSettings.jsx'; +import {MacrosSettings, RegionalSettings, FormulaLanguage} from './ApplicationSettings.jsx'; const routes = [ { @@ -31,6 +33,22 @@ const routes = [ { path: '/download/', component: DownloadWithTranslation + }, + { + path: '/application-settings/', + component: ApplicationSettingsController + }, + { + path: '/macros-settings/', + component: MacrosSettings + }, + { + path: '/regional-settings/', + component: RegionalSettings + }, + { + path: '/formula-languages/', + component: FormulaLanguage } ]; @@ -94,7 +112,7 @@ const SettingsList = withTranslation()(props => { - + From 1169d081fb8749480d351eb0e584fb0c27d32d9b Mon Sep 17 00:00:00 2001 From: Maxim Kadushkin Date: Thu, 25 Feb 2021 00:00:53 +0300 Subject: [PATCH 17/27] [common] changed LanguageInfo object to use in mobile apps --- apps/common/main/lib/util/LanguageInfo.js | 5 +++-- apps/spreadsheeteditor/mobile/src/page/app.jsx | 1 + 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/apps/common/main/lib/util/LanguageInfo.js b/apps/common/main/lib/util/LanguageInfo.js index b672b15c6..7a6031c5b 100644 --- a/apps/common/main/lib/util/LanguageInfo.js +++ b/apps/common/main/lib/util/LanguageInfo.js @@ -38,10 +38,11 @@ * */ -if (Common === undefined) { - var Common = {}; +if ( window.Common === undefined ) { + window.Common = {}; } +// TODO: move to Common.Utils Common.util = Common.util||{}; Common.util.LanguageInfo = new(function() { diff --git a/apps/spreadsheeteditor/mobile/src/page/app.jsx b/apps/spreadsheeteditor/mobile/src/page/app.jsx index fe83bfcab..83feeb19a 100644 --- a/apps/spreadsheeteditor/mobile/src/page/app.jsx +++ b/apps/spreadsheeteditor/mobile/src/page/app.jsx @@ -8,6 +8,7 @@ import { f7ready } from 'framework7-react'; import routes from '../router/routes.js'; import '../../../../common/main/lib/util/utils.js'; +import '../../../../common/main/lib/util/LanguageInfo.js'; import Notifications from '../../../../common/mobile/utils/notifications.js' import {MainController} from '../controller/Main'; import {Device} from '../../../../common/mobile/utils/device' From f6ae276b6b2383ac7fdf9fa9b8de77117d85a66c Mon Sep 17 00:00:00 2001 From: Maxim Kadushkin Date: Thu, 25 Feb 2021 00:17:00 +0300 Subject: [PATCH 18/27] [SSE mobile] refactoring --- .../src/controller/settings/ApplicationSettings.jsx | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/apps/spreadsheeteditor/mobile/src/controller/settings/ApplicationSettings.jsx b/apps/spreadsheeteditor/mobile/src/controller/settings/ApplicationSettings.jsx index 17a307311..cf9f616eb 100644 --- a/apps/spreadsheeteditor/mobile/src/controller/settings/ApplicationSettings.jsx +++ b/apps/spreadsheeteditor/mobile/src/controller/settings/ApplicationSettings.jsx @@ -20,13 +20,12 @@ class ApplicationSettingsController extends Component { info.asc_setType(Asc.c_oAscNumFormatType.None); info.asc_setSymbol(regSettings); - let arr = api.asc_getFormatCells(info); - let text = api.asc_getLocaleExample(arr[4], 1000.01, regSettings); + const arr = api.asc_getFormatCells(info); + const text4 = api.asc_getLocaleExample(arr[4], 1000.01, regSettings), + text5 = api.asc_getLocaleExample(arr[5], Asc.cDate().getExcelDateWithTime(), regSettings), + text6 = api.asc_getLocaleExample(arr[6], Asc.cDate().getExcelDateWithTime(), regSettings); - text = text + ' ' + api.asc_getLocaleExample(arr[5], Asc.cDate().getExcelDateWithTime(), regSettings); - text = text + ' ' + api.asc_getLocaleExample(arr[6], Asc.cDate().getExcelDateWithTime(), regSettings); - - this.textRegSettingsExample = text; + this.textRegSettingsExample = `${text4} ${text5} ${text6}`; } onChangeDisplayComments(displayComments) { From 2c44e7f3a3ca87b6fe660676c02f317404bd16e5 Mon Sep 17 00:00:00 2001 From: SergeyEzhin Date: Thu, 25 Feb 2021 17:10:28 +0300 Subject: [PATCH 19/27] [SSE mobile] Added Spreadsheet Info and App Options --- apps/spreadsheeteditor/mobile/locale/en.json | 14 +- .../mobile/src/controller/Main.jsx | 27 +++- .../controller/settings/SpreadsheetInfo.jsx | 103 +++++++++++++++ .../mobile/src/store/appOptions.js | 58 ++++++++ .../mobile/src/store/mainStore.js | 4 + .../mobile/src/store/spreadsheetInfo.js | 10 ++ .../mobile/src/view/settings/Settings.jsx | 5 + .../src/view/settings/SpreadsheetInfo.jsx | 125 ++++++++++++++++++ 8 files changed, 342 insertions(+), 4 deletions(-) create mode 100644 apps/spreadsheeteditor/mobile/src/controller/settings/SpreadsheetInfo.jsx create mode 100644 apps/spreadsheeteditor/mobile/src/store/appOptions.js create mode 100644 apps/spreadsheeteditor/mobile/src/store/spreadsheetInfo.js create mode 100644 apps/spreadsheeteditor/mobile/src/view/settings/SpreadsheetInfo.jsx diff --git a/apps/spreadsheeteditor/mobile/locale/en.json b/apps/spreadsheeteditor/mobile/locale/en.json index 0f7ab8d02..b5fa8b4a1 100644 --- a/apps/spreadsheeteditor/mobile/locale/en.json +++ b/apps/spreadsheeteditor/mobile/locale/en.json @@ -273,7 +273,19 @@ "textShowNotification": "Show Notification", "textDisableAllMacrosWithNotification": "Disable all macros with a notification", "textEnableAll": "Enable All", - "textEnableAllMacrosWithoutNotification": "Enable all macros without a notification" + "textEnableAllMacrosWithoutNotification": "Enable all macros without a notification", + "textSpreadsheetTitle": "Spreadsheet Title", + "textOwner": "Owner", + "textLocation": "Location", + "textUploaded": "Uploaded", + "textTitle": "Title", + "textSubject": "Subject", + "textComment": "Comment", + "textLastModified": "Last Modified", + "textLastModifiedBy": "Last Modified By", + "textCreated": "Created", + "textApplication": "Application", + "textAuthor": "Author" } }, "Common": { diff --git a/apps/spreadsheeteditor/mobile/src/controller/Main.jsx b/apps/spreadsheeteditor/mobile/src/controller/Main.jsx index 4a834e813..f92f57a99 100644 --- a/apps/spreadsheeteditor/mobile/src/controller/Main.jsx +++ b/apps/spreadsheeteditor/mobile/src/controller/Main.jsx @@ -4,8 +4,9 @@ import { inject } from "mobx-react"; import { f7 } from 'framework7-react'; import { withTranslation } from 'react-i18next'; import CollaborationController from '../../../../common/mobile/lib/controller/Collaboration.jsx' +import { onAdvancedOptions } from './settings/Download.jsx'; -@inject("storeFocusObjects", "storeCellSettings", "storeTextSettings", "storeChartSettings", "storeSpreadsheetSettings") +@inject("storeAppOptions", "storeFocusObjects", "storeCellSettings", "storeTextSettings", "storeChartSettings", "storeSpreadsheetSettings", "storeSpreadsheetInfo") class MainController extends Component { constructor(props) { super(props) @@ -52,6 +53,8 @@ class MainController extends Component { me.appOptions.user = Common.Utils.fillUserInfo(me.editorConfig.user, me.editorConfig.lang, me.textAnonymous); me.appOptions.lang = me.editorConfig.lang; + this.props.storeAppOptions.setConfigOptions(this.editorConfig); + // var value = Common.localStorage.getItem("sse-settings-regional"); // if (value!==null) // this.api.asc_setLocale(parseInt(value)); @@ -92,8 +95,10 @@ class MainController extends Component { let _permissions = Object.assign({}, data.doc.permissions), _user = new Asc.asc_CUserInfo(); - _user.put_Id(this.appOptions.user.id); - _user.put_FullName(this.appOptions.user.fullname); + const _userOptions = this.props.storeAppOptions.user; + + _user.put_Id(_userOptions.id); + _user.put_FullName(_userOptions.fullname); docInfo = new Asc.asc_CDocInfo(); docInfo.put_Id(data.doc.key); @@ -124,6 +129,12 @@ class MainController extends Component { this.api.asc_enableKeyEvents(true); // Common.SharedSettings.set('document', data.doc); + + // Document Info + + const storeSpreadsheetInfo = this.props.storeSpreadsheetInfo; + + storeSpreadsheetInfo.setDataDoc(this.document); }; const onEditorPermissions = params => { @@ -131,6 +142,8 @@ class MainController extends Component { const licType = params.asc_getLicenseType(); me.appOptions.canLicense = (licType === Asc.c_oLicenseResult.Success || licType === Asc.c_oLicenseResult.SuccessLimit); + + this.props.storeAppOptions.setPermissionOptions(this.document, licType, params, this.permissions); // me.appOptions.canEdit = (me.permissions.edit !== false || me.permissions.review === true) && // can edit or review // (me.editorConfig.canRequestEditRights || me.editorConfig.mode !== 'view') && // if mode=="view" -> canRequestEditRights must be defined // (!me.appOptions.isReviewOnly || me.appOptions.canLicense) && // if isReviewOnly==true -> canLicense must be true @@ -258,6 +271,14 @@ class MainController extends Component { storeSpreadsheetSettings.addSchemes(schemes); }); + // Downloaded Advanced Options + + this.api.asc_registerCallback('asc_onAdvancedOptions', (type, advOptions, mode, formatOptions) => { + const {t} = this.props; + const _t = t("Settings", { returnObjects: true }); + onAdvancedOptions(type, advOptions, mode, formatOptions, _t, this.props.storeAppOptions.canRequestClose); + }); + } _onLongActionEnd(type, id) { diff --git a/apps/spreadsheeteditor/mobile/src/controller/settings/SpreadsheetInfo.jsx b/apps/spreadsheeteditor/mobile/src/controller/settings/SpreadsheetInfo.jsx new file mode 100644 index 000000000..238036bcd --- /dev/null +++ b/apps/spreadsheeteditor/mobile/src/controller/settings/SpreadsheetInfo.jsx @@ -0,0 +1,103 @@ +import React, { Component } from "react"; +import { observer, inject } from "mobx-react"; +import SpreadsheetInfo from "../../view/settings/SpreadsheetInfo"; + +class SpreadsheetInfoController extends Component { + constructor(props) { + super(props); + this.docProps = this.getDocProps(); + this.getModified = this.getModified(); + this.getModifiedBy = this.getModifiedBy(); + this.getCreators = this.getCreators(); + this.title = this.getTitle(); + this.subject = this.getSubject(); + this.description = this.getDescription(); + this.getCreated = this.getCreated(); + } + + getDocProps() { + const api = Common.EditorApi.get(); + return api.asc_getCoreProps(); + } + + getAppProps() { + const api = Common.EditorApi.get(); + const appProps = api.asc_getAppProps(); + + if (appProps) { + let appName = + (appProps.asc_getApplication() || "") + + (appProps.asc_getAppVersion() ? " " : "") + + (appProps.asc_getAppVersion() || ""); + return appName; + } + } + + getModified() { + let valueModified = this.docProps.asc_getModified(); + const _lang = this.props.storeAppOptions.lang; + + if (valueModified) { + return ( + valueModified.toLocaleString(_lang, { + year: "numeric", + month: "2-digit", + day: "2-digit", + }) + + " " + + valueModified.toLocaleTimeString(_lang, { timeStyle: "short" }) + ); + } + } + + getModifiedBy() { + let valueModifiedBy = this.docProps.asc_getLastModifiedBy(); + + if (valueModifiedBy) { + return Common.Utils.UserInfoParser.getParsedName(valueModifiedBy); + } + } + + getCreators() { + return this.docProps.asc_getCreator(); + } + + getTitle() { + return this.docProps.asc_getTitle(); + } + + getSubject() { + return this.docProps.asc_getSubject(); + } + + getDescription() { + return this.docProps.asc_getDescription(); + } + + getCreated() { + let value = this.docProps.asc_getCreated(); + const _lang = this.props.storeAppOptions.lang; + + if(value) { + return value.toLocaleString(_lang, {year: 'numeric', month: '2-digit', day: '2-digit'}) + ' ' + value.toLocaleTimeString(_lang, {timeStyle: 'short'}); + } + } + + render() { + return ( + + ); + } +} + + +export default inject("storeAppOptions")(observer(SpreadsheetInfoController)); \ No newline at end of file diff --git a/apps/spreadsheeteditor/mobile/src/store/appOptions.js b/apps/spreadsheeteditor/mobile/src/store/appOptions.js new file mode 100644 index 000000000..16cb50352 --- /dev/null +++ b/apps/spreadsheeteditor/mobile/src/store/appOptions.js @@ -0,0 +1,58 @@ +import {action, observable} from 'mobx'; + +export class storeAppOptions { + config = {}; + @action setConfigOptions (config) { + this.config = config; + this.user = Common.Utils.fillUserInfo(config.user, config.lang, "Local.User"/*me.textAnonymous*/); + this.isDesktopApp = config.targetApp == 'desktop'; + this.canCreateNew = !!config.createUrl && !this.isDesktopApp; + this.canOpenRecent = config.recent !== undefined && !this.isDesktopApp; + this.templates = config.templates; + this.recent = config.recent; + this.createUrl = config.createUrl; + this.lang = config.lang; + this.location = (typeof (config.location) == 'string') ? config.location.toLowerCase() : ''; + this.region = (typeof (config.region) == 'string') ? config.region.toLowerCase() : config.region; + this.sharingSettingsUrl = config.sharingSettingsUrl; + this.fileChoiceUrl = config.fileChoiceUrl; + this.isEditDiagram = config.mode == 'editdiagram'; + this.isEditMailMerge = config.mode == 'editmerge'; + this.mergeFolderUrl = config.mergeFolderUrl; + this.canAnalytics = false; + this.canRequestClose = config.canRequestClose; + this.customization = config.customization; + this.canBackToFolder = (config.canBackToFolder!==false) && (typeof (config.customization) == 'object') && (typeof (config.customization.goback) == 'object') + && (!!(config.customization.goback.url) || config.customization.goback.requestClose && this.canRequestClose); + this.canBack = this.canBackToFolder === true; + this.canPlugins = false; + } + @action setPermissionOptions (document, licType, params, permissions) { + permissions.edit = params.asc_getRights() !== Asc.c_oRights.Edit ? false : true; + this.canAutosave = true; + this.canAnalytics = params.asc_getIsAnalyticsEnable(); + this.canLicense = (licType === Asc.c_oLicenseResult.Success || licType === Asc.c_oLicenseResult.SuccessLimit); + this.isLightVersion = params.asc_getIsLight(); + this.canCoAuthoring = !this.isLightVersion; + this.isOffline = Common.EditorApi.get().asc_isOffline(); + this.canRequestEditRights = this.config.canRequestEditRights; + this.canEdit = permissions.edit !== false && // can edit or review + (this.config.canRequestEditRights || this.config.mode !== 'view') && true; // if mode=="view" -> canRequestEditRights must be defined + // (!this.isReviewOnly || this.canLicense) && // if isReviewOnly==true -> canLicense must be true + // true /*isSupportEditFeature*/; + this.isEdit = (this.canLicense || this.isEditDiagram || this.isEditMailMerge) && permissions.edit !== false && this.config.mode !== 'view' && true; + this.canComments = this.canLicense && (permissions.comment === undefined ? this.isEdit : permissions.comment) && (this.config.mode !== 'view'); + this.canComments = this.canComments && !((typeof (this.customization) == 'object') && this.customization.comments===false); + this.canViewComments = this.canComments || !((typeof (this.customization) == 'object') && this.customization.comments===false); + this.canEditComments = this.isOffline || !(typeof (this.customization) == 'object' && this.customization.commentAuthorOnly); + this.canChat = this.canLicense && !this.isOffline && !((typeof (this.customization) == 'object') && this.customization.chat === false); + this.canPrint = (permissions.print !== false); + this.isRestrictedEdit = !this.isEdit && this.canComments; + this.trialMode = params.asc_getLicenseMode(); + this.canDownloadOrigin = permissions.download !== false; + this.canDownload = permissions.download !== false; + this.canBranding = params.asc_getCustomization(); + this.canBrandingExt = params.asc_getCanBranding() && (typeof this.customization == 'object'); + this.canUseReviewPermissions = this.canLicense && this.customization && this.customization.reviewPermissions && (typeof (this.customization.reviewPermissions) == 'object'); + } +} \ No newline at end of file diff --git a/apps/spreadsheeteditor/mobile/src/store/mainStore.js b/apps/spreadsheeteditor/mobile/src/store/mainStore.js index c7d17b90d..c5b523722 100644 --- a/apps/spreadsheeteditor/mobile/src/store/mainStore.js +++ b/apps/spreadsheeteditor/mobile/src/store/mainStore.js @@ -9,6 +9,8 @@ import {storeTextSettings} from "./textSettings"; import {storeApplicationSettings} from "./applicationSettings"; import {storeShapeSettings} from "./shapeSettings"; import {storeCellSettings} from "./cellSettings"; +import {storeSpreadsheetInfo} from "./spreadsheetInfo"; +import {storeAppOptions} from "./appOptions"; // import {storeImageSettings} from "./imageSettings"; // import {storeTableSettings} from "./tableSettings"; import {storeChartSettings} from "./chartSettings"; @@ -22,6 +24,8 @@ export const stores = { sheets: new storeWorksheets(), storeFunctions: new storeFunctions(), storeTextSettings: new storeTextSettings(), + storeSpreadsheetInfo: new storeSpreadsheetInfo(), + storeAppOptions: new storeAppOptions(), // storeParagraphSettings: new storeParagraphSettings(), storeShapeSettings: new storeShapeSettings(), storeChartSettings: new storeChartSettings(), diff --git a/apps/spreadsheeteditor/mobile/src/store/spreadsheetInfo.js b/apps/spreadsheeteditor/mobile/src/store/spreadsheetInfo.js new file mode 100644 index 000000000..c1c4b27f6 --- /dev/null +++ b/apps/spreadsheeteditor/mobile/src/store/spreadsheetInfo.js @@ -0,0 +1,10 @@ +import {action, observable, computed} from 'mobx'; + +export class storeSpreadsheetInfo { + + @observable dataDoc; + + @action setDataDoc(obj) { + this.dataDoc = obj; + } +} \ No newline at end of file diff --git a/apps/spreadsheeteditor/mobile/src/view/settings/Settings.jsx b/apps/spreadsheeteditor/mobile/src/view/settings/Settings.jsx index 2d79a71e9..a994ff86c 100644 --- a/apps/spreadsheeteditor/mobile/src/view/settings/Settings.jsx +++ b/apps/spreadsheeteditor/mobile/src/view/settings/Settings.jsx @@ -5,6 +5,7 @@ import {f7} from 'framework7-react'; import {Device} from '../../../../../common/mobile/utils/device'; import SpreadsheetSettingsController from '../../controller/settings/SpreadsheetSettings.jsx'; import ApplicationSettingsController from '../../controller/settings/ApplicationSettings.jsx'; +import SpreadsheetInfoController from '../../controller/settings/SpreadsheetInfo.jsx'; import {DownloadWithTranslation} from '../../controller/settings/Download.jsx'; import {SpreadsheetColorSchemes, SpreadsheetFormats, SpreadsheetMargins} from './SpreadsheetSettings.jsx'; import {MacrosSettings, RegionalSettings, FormulaLanguage} from './ApplicationSettings.jsx'; @@ -49,6 +50,10 @@ const routes = [ { path: '/formula-languages/', component: FormulaLanguage + }, + { + path: '/spreadsheet-info/', + component: SpreadsheetInfoController } ]; diff --git a/apps/spreadsheeteditor/mobile/src/view/settings/SpreadsheetInfo.jsx b/apps/spreadsheeteditor/mobile/src/view/settings/SpreadsheetInfo.jsx new file mode 100644 index 000000000..294e5ac43 --- /dev/null +++ b/apps/spreadsheeteditor/mobile/src/view/settings/SpreadsheetInfo.jsx @@ -0,0 +1,125 @@ +import React, {Fragment} from "react"; +import { observer, inject } from "mobx-react"; +import { Page, Navbar, List, ListItem, BlockTitle } from "framework7-react"; +import { useTranslation } from "react-i18next"; + +const PageSpreadsheetInfo = (props) => { + const { t } = useTranslation(); + const _t = t("View.Settings", { returnObjects: true }); + const storeSpreadsheetInfo = props.storeSpreadsheetInfo; + const dataApp = props.getAppProps(); + const dataModified = props.getModified; + const dataModifiedBy = props.getModifiedBy; + const creators = props.getCreators; + const dataDoc = storeSpreadsheetInfo.dataDoc; + + return ( + + + {dataDoc.title ? ( + + {_t.textSpreadsheetTitle} + + + + + ) : null} + {dataDoc.info.author || dataDoc.info.owner ? ( + + {_t.textOwner} + + + + + ) : null} + {dataDoc.info.folder ? ( + + {_t.textLocation} + + + + + ) : null} + {dataDoc.info.uploaded || dataDoc.info.created ? ( + + {_t.textUploaded} + + + + + ) : null} + {props.title ? ( + + {_t.textTitle} + + + + + ) : null} + {props.subject ? ( + + {_t.textSubject} + + + + + ) : null} + {props.description ? ( + + {_t.textComment} + + + + + ) : null} + {dataModified ? ( + + {_t.textLastModified} + + + + + ) : null} + {dataModifiedBy ? ( + + {_t.textLastModifiedBy} + + + + + ) : null} + {props.getCreated ? ( + + {_t.textCreated} + + + + + ) : null} + {dataApp ? ( + + {_t.textApplication} + + + + + ) : null} + {creators ? ( + + {_t.textAuthor} + + { + creators.split(/\s*[,;]\s*/).map(item => { + return + }) + } + + + ) : null} + + ); +}; + +const SpreadsheetInfo = inject("storeSpreadsheetInfo")(observer(PageSpreadsheetInfo)); + +export default SpreadsheetInfo; \ No newline at end of file From 9d1ccf2f84e15e5d5e388cda986929e32595e256 Mon Sep 17 00:00:00 2001 From: SergeyEzhin Date: Thu, 25 Feb 2021 20:42:07 +0300 Subject: [PATCH 20/27] [SSE mobile] Added Regional Settings --- .../mobile/resources/less/common-ios.less | 14 ++ .../resources/less/common-material.less | 20 ++ apps/common/mobile/resources/less/common.less | 199 ++++++++++++++++++ .../settings/ApplicationSettings.jsx | 53 +++-- .../spreadsheeteditor/mobile/src/page/app.jsx | 8 +- .../mobile/src/store/applicationSettings.js | 53 ++--- .../src/view/settings/ApplicationSettings.jsx | 37 +++- 7 files changed, 327 insertions(+), 57 deletions(-) diff --git a/apps/common/mobile/resources/less/common-ios.less b/apps/common/mobile/resources/less/common-ios.less index 0160e25d7..00cf701a0 100644 --- a/apps/common/mobile/resources/less/common-ios.less +++ b/apps/common/mobile/resources/less/common-ios.less @@ -403,4 +403,18 @@ color: @darkGreen; } } + + // Regional Settings + + .regional-settings { + .item-title-row { + display: flex; + justify-content: flex-start; + align-items: center; + .item-title { + margin-left: 20px; + white-space: normal; + } + } + } } diff --git a/apps/common/mobile/resources/less/common-material.less b/apps/common/mobile/resources/less/common-material.less index 211c11340..9b7ec4fa2 100644 --- a/apps/common/mobile/resources/less/common-material.less +++ b/apps/common/mobile/resources/less/common-material.less @@ -291,4 +291,24 @@ } } } + + // Regional Settings + + .regional-settings { + .list { + .item-inner { + margin-left: 16px; + } + .item-title-row { + display: flex; + justify-content: space-between; + align-items: center; + width: 100%; + flex-direction: row-reverse; + .item-title { + white-space: normal; + } + } + } + } } diff --git a/apps/common/mobile/resources/less/common.less b/apps/common/mobile/resources/less/common.less index 584c33e60..034ffc5d2 100644 --- a/apps/common/mobile/resources/less/common.less +++ b/apps/common/mobile/resources/less/common.less @@ -463,3 +463,202 @@ input[type="number"]::-webkit-inner-spin-button { margin: 0; } +// Regional Settings + +.icon.lang-flag { + background-size: 48px auto; + background-image: url(../img/controls/flags@2x.png); +} + +.icon.lang-flag { + width: 16px; + height: 12px; +} + +.lang-flag.ca, +.lang-flag.ca-ES { + background-position: 0 0; +} +.lang-flag.cs, +.lang-flag.cs-CZ { + background-position: -16px 0; +} +.lang-flag.da, +.lang-flag.da-DK { + background-position: -32px 0; +} +.lang-flag.de, +.lang-flag.de-DE { + background-position: 0 -12px; +} +.lang-flag.el, +.lang-flag.el-GR { + background-position: -16px -12px; +} +.lang-flag.en, +.lang-flag.en-US { + background-position: -32px -12px; +} +.lang-flag.fr, +.lang-flag.fr-FR { + background-position: 0 -24px; +} +.lang-flag.hu, +.lang-flag.hu-HU { + background-position: -16px -24px; +} +.lang-flag.it, +.lang-flag.it-IT { + background-position: -32px -24px; +} +.lang-flag.ko, +.lang-flag.ko-KR { + background-position: 0 -36px; +} +.lang-flag.nl, +.lang-flag.nl-NL { + background-position: -16px -36px; +} +.lang-flag.nb, +.lang-flag.nb-NO, +.lang-flag.nn, +.lang-flag.nn-NO { + background-position: -32px -36px; +} +.lang-flag.pl, +.lang-flag.pl-PL { + background-position: 0 -48px; +} +.lang-flag.pt, +.lang-flag.pt-BR { + background-position: -16px -48px; +} +.lang-flag.ro, +.lang-flag.ro-RO { + background-position: -32px -48px; +} +.lang-flag.ru, +.lang-flag.ru-RU { + background-position: 0 -60px; +} +.lang-flag.sv, +.lang-flag.sv-SE { + background-position: -32px -60px; +} +.lang-flag.tr, +.lang-flag.tr-TR { + background-position: 0 -72px; +} +.lang-flag.uk, +.lang-flag.uk-UA { + background-position: -16px -72px; +} +.lang-flag.lv, +.lang-flag.lv-LV { + background-position: -32px -72px; +} +.lang-flag.lt, +.lang-flag.lt-LT { + background-position: 0 -84px; +} +.lang-flag.vi, +.lang-flag.vi-VN { + background-position: -16px -84px; +} +.lang-flag.de-CH { + background-position: -32px -84px; +} +.lang-flag.pt-PT { + background-position: -16px -96px; +} +.lang-flag.de-AT { + background-position: -32px -96px; +} +.lang-flag.es, +.lang-flag.es-ES { + background-position: 0 -108px; +} +.lang-flag.en-GB { + background-position: -32px -108px; +} +.lang-flag.en-AU { + background-position: 0 -120px; +} +.lang-flag.az-Latn-AZ { + background-position: -16px -120px; +} +.lang-flag.id, +.lang-flag.id-ID { + background-position: -32px -120px; +} +.lang-flag.bg, +.lang-flag.bg-BG { + background-position: 0 -132px; +} +.lang-flag.ca-ES-valencia { + background-position: -16px -132px; +} +.lang-flag.en-CA { + background-position: -32px -132px; +} +.lang-flag.en-ZA { + background-position: 0 -144px; +} +.lang-flag.eu, +.lang-flag.eu-ES { + background-position: -16px -144px; +} +.lang-flag.gl, +.lang-flag.gl-ES { + background-position: -32px -144px; +} +.lang-flag.hr, +.lang-flag.hr-HR { + background-position: 0 -156px; +} +.lang-flag.lb, +.lang-flag.lb-LU { + background-position: -16px -156px; +} +.lang-flag.mn, +.lang-flag.mn-MN { + background-position: -32px -156px; +} +.lang-flag.sl, +.lang-flag.sl-SI { + background-position: 0 -168px; +} +.lang-flag.sr, +.lang-flag.sr-Cyrl-RS, +.lang-flag.sr-Latn-RS { + background-position: -16px -168px; +} +.lang-flag.sk, +.lang-flag.sk-SK { + background-position: -32px -168px; +} +.lang-flag.kk, +.lang-flag.kk-KZ { + background-position: 0 -180px; +} +.lang-flag.fi, +.lang-flag.fi-FI, +.lang-flag.sv-FI { + background-position: -16px -180px; +} +.lang-flag.zh, +.lang-flag.zh-CN { + background-position: -32px -180px; +} +.lang-flag.ja, +.lang-flag.ja-JP { + background-position: 0 -192px; +} +.lang-flag.es-MX { + background-position: -16px -192px; +} + + + + + diff --git a/apps/spreadsheeteditor/mobile/src/controller/settings/ApplicationSettings.jsx b/apps/spreadsheeteditor/mobile/src/controller/settings/ApplicationSettings.jsx index cf9f616eb..1704fee0c 100644 --- a/apps/spreadsheeteditor/mobile/src/controller/settings/ApplicationSettings.jsx +++ b/apps/spreadsheeteditor/mobile/src/controller/settings/ApplicationSettings.jsx @@ -6,26 +6,28 @@ class ApplicationSettingsController extends Component { constructor(props) { super(props); this.onFormulaLangChange = this.onFormulaLangChange.bind(this); + this.onRegSettings = this.onRegSettings.bind(this); + this.initRegSettings = this.initRegSettings.bind(this); + this.props.storeApplicationSettings.initRegData(); this.initRegSettings(); } initRegSettings() { - - // this.props.storeApplicationSettings.initRegSettings(); + this.props.storeApplicationSettings.getRegCode(); const info = new Asc.asc_CFormatCellsInfo(); const api = Common.EditorApi.get(); - const regSettings = this.props.storeApplicationSettings.reqSettings; + const regCode = this.props.storeApplicationSettings.regCode; info.asc_setType(Asc.c_oAscNumFormatType.None); - info.asc_setSymbol(regSettings); + info.asc_setSymbol(regCode); const arr = api.asc_getFormatCells(info); - const text4 = api.asc_getLocaleExample(arr[4], 1000.01, regSettings), - text5 = api.asc_getLocaleExample(arr[5], Asc.cDate().getExcelDateWithTime(), regSettings), - text6 = api.asc_getLocaleExample(arr[6], Asc.cDate().getExcelDateWithTime(), regSettings); + const text4 = api.asc_getLocaleExample(arr[4], 1000.01, regCode), + text5 = api.asc_getLocaleExample(arr[5], Asc.cDate().getExcelDateWithTime(), regCode), + text6 = api.asc_getLocaleExample(arr[6], Asc.cDate().getExcelDateWithTime(), regCode); - this.textRegSettingsExample = `${text4} ${text5} ${text6}`; + this.props.storeApplicationSettings.setRegExample(`${text4} ${text5} ${text6}`); } onChangeDisplayComments(displayComments) { @@ -33,51 +35,59 @@ class ApplicationSettingsController extends Component { if (!displayComments) { api.asc_hideComments(); - // Common.localStorage.setBool("sse-settings-resolvedcomment", false); + Common.localStorage.setBool("sse-settings-resolvedcomment", false); } else { - // let resolved = Common.localStorage.getBool("sse-settings-resolvedcomment"); - api.asc_showComments(displayComments); + let resolved = Common.localStorage.getBool("sse-settings-resolvedcomment"); + api.asc_showComments(resolved); } - // Common.localStorage.setBool("sse-mobile-settings-livecomment", displayComments); + Common.localStorage.setBool("sse-mobile-settings-livecomment", displayComments); } onChangeDisplayResolved(value) { const api = Common.EditorApi.get(); - // let displayComments = Common.localStorage.getBool("sse-mobile-settings-livecomment"); + let displayComments = Common.localStorage.getBool("sse-mobile-settings-livecomment"); - // if (displayComments) { - api.asc_showComments(value); - // Common.localStorage.setBool("sse-settings-resolvedcomment", resolved); - // } + if (displayComments) { + api.asc_showComments(value); + Common.localStorage.setBool("sse-settings-resolvedcomment", value); + } } clickR1C1Style(checked) { const api = Common.EditorApi.get(); - // Common.localStorage.setBool('sse-settings-r1c1', checked); + Common.localStorage.setBool('sse-settings-r1c1', checked); api.asc_setR1C1Mode(checked); } unitMeasurementChange(value) { value = value ? +value : Common.Utils.Metric.getDefaultMetric(); Common.Utils.Metric.setCurrentMetric(value); - // Common.localStorage.setItem("se-mobile-settings-unit", value); + Common.localStorage.setItem("se-mobile-settings-unit", value); } onChangeMacrosSettings(value) { Common.Utils.InternalSettings.set("sse-mobile-macros-mode", +value); - // Common.localStorage.setItem("sse-mobile-macros-mode", +value); + Common.localStorage.setItem("sse-mobile-macros-mode", +value); } onFormulaLangChange(value) { - // Common.localStorage.setItem("sse-settings-func-lang", value); + Common.localStorage.setItem("sse-settings-func-lang", value); this.initRegSettings(); // SSE.getController('AddFunction').onDocumentReady(); } + onRegSettings(regCode) { + const api = Common.EditorApi.get(); + Common.localStorage.setItem("sse-settings-regional", regCode); + this.initRegSettings(); + if (regCode!==null) api.asc_setLocale(+regCode); + } + render() { return ( ) } diff --git a/apps/spreadsheeteditor/mobile/src/page/app.jsx b/apps/spreadsheeteditor/mobile/src/page/app.jsx index 83feeb19a..28fac09c7 100644 --- a/apps/spreadsheeteditor/mobile/src/page/app.jsx +++ b/apps/spreadsheeteditor/mobile/src/page/app.jsx @@ -9,9 +9,10 @@ import routes from '../router/routes.js'; import '../../../../common/main/lib/util/utils.js'; import '../../../../common/main/lib/util/LanguageInfo.js'; -import Notifications from '../../../../common/mobile/utils/notifications.js' +import {LocalStorage} from '../../../../common/mobile/utils/LocalStorage.js'; +import Notifications from '../../../../common/mobile/utils/notifications.js'; import {MainController} from '../controller/Main'; -import {Device} from '../../../../common/mobile/utils/device' +import {Device} from '../../../../common/mobile/utils/device'; import CellEditor from '../controller/CellEditor'; const f7params = { @@ -24,8 +25,9 @@ const f7params = { export default class extends React.Component { constructor() { super(); - + Common.Notifications = new Notifications(); + Common.localStorage = LocalStorage; } render() { diff --git a/apps/spreadsheeteditor/mobile/src/store/applicationSettings.js b/apps/spreadsheeteditor/mobile/src/store/applicationSettings.js index 051a38dc8..a752ecc6d 100644 --- a/apps/spreadsheeteditor/mobile/src/store/applicationSettings.js +++ b/apps/spreadsheeteditor/mobile/src/store/applicationSettings.js @@ -1,11 +1,11 @@ import {action, observable} from 'mobx'; - export class storeApplicationSettings { @observable unitMeasurement = Common.Utils.Metric.getCurrentMetric(); @observable macrosMode = 0; @observable formulaLang = Common.Locale.currentLang || dataLang[0].value; - @observable regSettings = 0x0409; + @observable regCode = undefined; + @observable regExample = ''; @observable regData = []; @observable isRefStyle = false; @observable isComments = true; @@ -35,31 +35,36 @@ export class storeApplicationSettings { return regDataCode; } - // @action initRegData() { - // const regDataCodes = this.getRegDataCodes(); - // regDataCodes.forEach(item => { - // let langInfo = Common.util.LanguageInfo.getLocalLanguageName(item.value); - // this.regData.push({code: item.value, displayName: langInfo[1], langName: langInfo[0]}); - // }) - // } + @action initRegData() { + const regDataCodes = this.getRegDataCodes(); - // @action initRegSettings() { - // const regData = this.getRegDataCodes(); - // let value = Number(Common.localStorage.getItem('sse-settings-regional')); + regDataCodes.forEach(item => { + let langInfo = Common.util.LanguageInfo.getLocalLanguageName(item.value); + this.regData.push({code: item.value, displayName: langInfo[1], langName: langInfo[0]}); + }) + } - // if(!value) { - // this.regSettings = 0x0409; - // } else { - // regData.forEach(obj => { - // if(obj.value === value) { - // this.regSettings = obj.value; - // } - // }); - // } - // } + @action getRegCode() { + const regData = this.regData; + let value = Number(Common.localStorage.getItem('sse-settings-regional')); + + regData.forEach(obj => { + if(obj.code === value) { + this.regCode = obj.code; + } + }); - @action changeRegSettings(value) { - this.regSettings = value; + if(!this.regCode) { + this.regCode = 0x0409; + } + } + + @action changeRegCode(value) { + this.regCode = value; + } + + @action setRegExample(value) { + this.regExample = value; } @action changeUnitMeasurement(value) { diff --git a/apps/spreadsheeteditor/mobile/src/view/settings/ApplicationSettings.jsx b/apps/spreadsheeteditor/mobile/src/view/settings/ApplicationSettings.jsx index fd69d7adb..4755b03b0 100644 --- a/apps/spreadsheeteditor/mobile/src/view/settings/ApplicationSettings.jsx +++ b/apps/spreadsheeteditor/mobile/src/view/settings/ApplicationSettings.jsx @@ -1,6 +1,6 @@ import React, {Fragment} from "react"; import { observer, inject } from "mobx-react"; -import { Page, Navbar, List, ListItem, BlockTitle, Toggle } from "framework7-react"; +import { Page, Navbar, List, ListItem, BlockTitle, Toggle, Icon } from "framework7-react"; import { useTranslation } from "react-i18next"; const PageApplicationSettings = props => { @@ -9,14 +9,14 @@ const PageApplicationSettings = props => { const storeApplicationSettings = props.storeApplicationSettings; const unitMeasurement = storeApplicationSettings.unitMeasurement; const formulaLang = storeApplicationSettings.formulaLang; - // const regSettings = storeApplicationSettings.regSettings; + const regData = storeApplicationSettings.regData; + const regCode = storeApplicationSettings.regCode; + const regExample = storeApplicationSettings.regExample; const dataLang = storeApplicationSettings.getFormulaLanguages(); - const dataRegCodes = storeApplicationSettings.getRegDataCodes(); const defineFormulaLang = () => dataLang.find(obj => obj.value === formulaLang); - // const defineRegSettings = () => dataRegCodes.find(obj => obj.value === regSettings); const currentFormulaLang = defineFormulaLang(); - // const currentRegSettings = defineRegSettings(); - const textRegSettingsExample = props.textRegSettingsExample; + const defineRegSetting = () => regData.find(obj => regCode === obj.code); + const currentRegSetting = defineRegSetting(); const isRefStyle = storeApplicationSettings.isRefStyle; const isComments = storeApplicationSettings.isComments; const isResolvedComments = storeApplicationSettings.isResolvedComments; @@ -55,7 +55,9 @@ const PageApplicationSettings = props => { {_t.textRegionalSettings} - + {_t.textCommentingDisplay} @@ -106,10 +108,27 @@ const PageRegionalSettings = props => { const { t } = useTranslation(); const _t = t("View.Settings", { returnObjects: true }); const storeApplicationSettings = props.storeApplicationSettings; - + const regData = storeApplicationSettings.regData; + const regCode = storeApplicationSettings.regCode; + return ( - + + + {regData.length ? regData.map((elem, index) => { + return ( + { + storeApplicationSettings.changeRegCode(elem.code); + props.onRegSettings(elem.code); + }}> +
+ +
{elem.displayName}
+
+
+ ) + }) : null} +
) } From 4ed2a8a3c42a7724f9a47b609bd53e1db4059757 Mon Sep 17 00:00:00 2001 From: SergeyEzhin Date: Mon, 1 Mar 2021 21:11:29 +0300 Subject: [PATCH 21/27] [SSE mobile] Added Spreadsheet About --- apps/common/mobile/resources/less/common.less | 3 + apps/spreadsheeteditor/mobile/locale/en.json | 7 +- .../mobile/src/view/settings/Settings.jsx | 7 +- .../src/view/settings/SpreadsheetAbout.jsx | 98 +++++++++++++++++++ 4 files changed, 113 insertions(+), 2 deletions(-) create mode 100644 apps/spreadsheeteditor/mobile/src/view/settings/SpreadsheetAbout.jsx diff --git a/apps/common/mobile/resources/less/common.less b/apps/common/mobile/resources/less/common.less index 034ffc5d2..8988e12c8 100644 --- a/apps/common/mobile/resources/less/common.less +++ b/apps/common/mobile/resources/less/common.less @@ -1,3 +1,4 @@ +@import './about'; @white: #ffffff; @black: #000000; @@ -662,3 +663,5 @@ input[type="number"]::-webkit-inner-spin-button { + + diff --git a/apps/spreadsheeteditor/mobile/locale/en.json b/apps/spreadsheeteditor/mobile/locale/en.json index b5fa8b4a1..a3174d952 100644 --- a/apps/spreadsheeteditor/mobile/locale/en.json +++ b/apps/spreadsheeteditor/mobile/locale/en.json @@ -285,7 +285,12 @@ "textLastModifiedBy": "Last Modified By", "textCreated": "Created", "textApplication": "Application", - "textAuthor": "Author" + "textAuthor": "Author", + "textVersion": "Version", + "textEmail": "Email", + "textAddress": "Address", + "textTel": "Tel", + "textPoweredBy": "Powered By" } }, "Common": { diff --git a/apps/spreadsheeteditor/mobile/src/view/settings/Settings.jsx b/apps/spreadsheeteditor/mobile/src/view/settings/Settings.jsx index a994ff86c..70a87ae49 100644 --- a/apps/spreadsheeteditor/mobile/src/view/settings/Settings.jsx +++ b/apps/spreadsheeteditor/mobile/src/view/settings/Settings.jsx @@ -9,6 +9,7 @@ import SpreadsheetInfoController from '../../controller/settings/SpreadsheetInfo import {DownloadWithTranslation} from '../../controller/settings/Download.jsx'; import {SpreadsheetColorSchemes, SpreadsheetFormats, SpreadsheetMargins} from './SpreadsheetSettings.jsx'; import {MacrosSettings, RegionalSettings, FormulaLanguage} from './ApplicationSettings.jsx'; +import SpreadsheetAbout from './SpreadsheetAbout.jsx'; const routes = [ { @@ -54,6 +55,10 @@ const routes = [ { path: '/spreadsheet-info/', component: SpreadsheetInfoController + }, + { + path: '/spreadsheet-about/', + component: SpreadsheetAbout } ]; @@ -132,7 +137,7 @@ const SettingsList = withTranslation()(props => { - +
diff --git a/apps/spreadsheeteditor/mobile/src/view/settings/SpreadsheetAbout.jsx b/apps/spreadsheeteditor/mobile/src/view/settings/SpreadsheetAbout.jsx new file mode 100644 index 000000000..532e0435a --- /dev/null +++ b/apps/spreadsheeteditor/mobile/src/view/settings/SpreadsheetAbout.jsx @@ -0,0 +1,98 @@ +import React, { Fragment } from 'react'; +import { observer, inject } from "mobx-react"; +import { Page, Navbar, Link } from "framework7-react"; +import { useTranslation } from "react-i18next"; + +const PageSpreadsheetAbout = props => { + const { t } = useTranslation(); + const _t = t("View.Settings", { returnObjects: true }); + const storeAppOptions = props.storeAppOptions; + const isCanBranding = storeAppOptions.canBranding; + const licInfo = isCanBranding ? storeAppOptions.customization : null; + const customer = licInfo ? licInfo.customer : null; + const nameCustomer = customer ? customer.name : null; + const mailCustomer = customer ? customer.mail : null; + const addressCustomer = customer ? customer.address : null; + const urlCustomer = customer ? customer.www : null; + const infoCustomer = customer ? customer.info : null; + const logoCustomer = customer ? customer.logo : null; + + // console.log(storeAppOptions); + // console.log(isCanBranding); + + return ( + + + {licInfo && typeof licInfo == 'object' && typeof(customer) == 'object' ? + +
+ {/* {licInfo && typeof licInfo == 'object' && typeof(customer) == 'object' ? null : ( + + )} */} + {logoCustomer && logoCustomer.length ? ( + + ) : null} +
+
+

SPREADSHEET EDITOR

+

{_t.textVersion} 6.1.1

+
+
+ {nameCustomer && nameCustomer.length ? ( +

{nameCustomer}

+ ) : null} + {addressCustomer && addressCustomer.length ? ( +

+ + {addressCustomer} +

+ ) : null} + {mailCustomer && mailCustomer.length ? ( +

+ + {mailCustomer} +

+ ) : null} +

+ + +371 633-99867 +

+ {urlCustomer && urlCustomer.length ? ( +

+ + {urlCustomer} + +

+ ) : null} + {infoCustomer && infoCustomer.length ? ( +

+ +

+ ) : null} +
+
+
+

+ +

+

Ascensio System SIA

+

+ www.onlyoffice.com +

+
+
: + +
+ +
+
} +
+ ); +}; + +const SpreadsheetAbout = inject("storeAppOptions")(observer(PageSpreadsheetAbout)); + +export default SpreadsheetAbout; \ No newline at end of file From 56c323c0e1151aed30a85ed412179c3fef12ca83 Mon Sep 17 00:00:00 2001 From: SergeyEzhin Date: Fri, 5 Mar 2021 00:22:28 +0300 Subject: [PATCH 22/27] [SSE mobile] Refactoring Chart Settings --- .../mobile/src/controller/edit/EditChart.jsx | 23 - .../mobile/src/store/chartSettings.js | 112 ----- .../mobile/src/view/edit/Edit.jsx | 34 +- .../mobile/src/view/edit/EditChart.jsx | 405 +++++++++--------- 4 files changed, 208 insertions(+), 366 deletions(-) diff --git a/apps/spreadsheeteditor/mobile/src/controller/edit/EditChart.jsx b/apps/spreadsheeteditor/mobile/src/controller/edit/EditChart.jsx index aaa2ce74d..55876d155 100644 --- a/apps/spreadsheeteditor/mobile/src/controller/edit/EditChart.jsx +++ b/apps/spreadsheeteditor/mobile/src/controller/edit/EditChart.jsx @@ -8,7 +8,6 @@ import { EditChart } from '../../view/edit/EditChart'; class EditChartController extends Component { constructor (props) { super(props); - this.props.storeChartSettings.initChartLayout(this.props.storeFocusObjects.chartObject.get_ChartProperties()); this.onRemoveChart = this.onRemoveChart.bind(this); this.onType = this.onType.bind(this); this.onStyle = this.onStyle.bind(this); @@ -179,16 +178,6 @@ class EditChartController extends Component { } } - initVertAxis() { - const api = Common.EditorApi.get(); - const chartProperty = api.asc_getChartObject(); - - let verAxisProps = chartProperty.getVertAxisProps(); - let axisVertProps = (verAxisProps.getAxisType() == Asc.c_oAscAxisType.val) ? verAxisProps : chartProperty.getHorAxisProps(); - - return axisVertProps; - } - getVerticalAxisProp() { const api = Common.EditorApi.get(); let chartObject = api.asc_getChartObject(), @@ -293,16 +282,6 @@ class EditChartController extends Component { // Horizontal - initHorAxis() { - const api = Common.EditorApi.get(); - const chartProperty = api.asc_getChartObject(); - - let horAxisProps = chartProperty.getHorAxisProps(); - let axisHorProps = (horAxisProps.getAxisType() == Asc.c_oAscAxisType.val) ? chartProperty.getVertAxisProps() : horAxisProps; - - return axisHorProps; - } - getHorizontalAxisProp() { const api = Common.EditorApi.get(); let chartObject = api.asc_getChartObject(), @@ -390,7 +369,6 @@ class EditChartController extends Component { onStyle={this.onStyle} onRemoveChart={this.onRemoveChart} setLayoutProperty={this.setLayoutProperty} - initVertAxis={this.initVertAxis} onVerAxisMinValue={this.onVerAxisMinValue} onVerAxisMaxValue={this.onVerAxisMaxValue} onVerAxisCrossType={this.onVerAxisCrossType} @@ -400,7 +378,6 @@ class EditChartController extends Component { onVerAxisTickMajor={this.onVerAxisTickMajor} onVerAxisTickMinor={this.onVerAxisTickMinor} onVerAxisLabelPos={this.onVerAxisLabelPos} - initHorAxis={this.initHorAxis} getHorizontalAxisProp={this.getHorizontalAxisProp} setHorizontalAxisProp={this.setHorizontalAxisProp} onHorAxisCrossType={this.onHorAxisCrossType} diff --git a/apps/spreadsheeteditor/mobile/src/store/chartSettings.js b/apps/spreadsheeteditor/mobile/src/store/chartSettings.js index 0d10d78b4..40db02f77 100644 --- a/apps/spreadsheeteditor/mobile/src/store/chartSettings.js +++ b/apps/spreadsheeteditor/mobile/src/store/chartSettings.js @@ -30,118 +30,6 @@ export class storeChartSettings { return this.fillColor; } - @observable chartTitle = undefined; - @observable chartLegend = undefined; - @observable chartAxisHorTitle = undefined; - @observable chartAxisVertTitle = undefined; - @observable chartHorGridlines = undefined; - @observable chartVertGridlines = undefined; - @observable chartDataLabel = undefined; - - @action initChartLayout(chartProperties) { - this.chartTitle = chartProperties.getTitle() ? chartProperties.getTitle() : 0; - this.chartLegend = chartProperties.getLegendPos() ? chartProperties.getLegendPos() : 0; - this.chartAxisHorTitle = chartProperties.getHorAxisLabel() ? chartProperties.getHorAxisLabel() : 0; - this.chartAxisVertTitle = chartProperties.getVertAxisLabel() ? chartProperties.getVertAxisLabel() : 0; - this.chartHorGridlines = chartProperties.getHorGridLines() ? chartProperties.getHorGridLines() : 0; - this.chartVertGridlines = chartProperties.getVertGridLines() ? chartProperties.getVertGridLines() : 0; - this.chartDataLabel = chartProperties.getDataLabelsPos() ? chartProperties.getDataLabelsPos() : 0; - } - - @action changeChartTitle(value) { - this.chartTitle = value; - } - - @action changeChartLegend(value) { - this.chartLegend = value; - } - - @action changeChartAxisHorTitle(value) { - this.chartAxisHorTitle = value; - } - - @action changeChartAxisVertTitle(value) { - this.chartAxisVertTitle = value; - } - - @action changeChartHorGridlines(value) { - this.chartHorGridlines = value; - } - - @action changeChartVertGridlines(value) { - this.chartVertGridlines = value; - } - - @action changeChartDataLabel(value) { - this.chartDataLabel = value; - } - - @observable axisVertCrosses = undefined; - @observable axisHorCrosses = undefined; - @observable displayUnits = undefined; - @observable valuesVertReverseOrder = undefined; - @observable valuesHorReverseOrder = undefined; - @observable vertMajorType = undefined; - @observable vertMinorType = undefined; - @observable vertLabelPosition = undefined; - @observable horMajorType = undefined; - @observable horMinorType = undefined; - @observable horLabelPosition = undefined; - @observable axisPosition = undefined; - - // Vertical - - @action changeVertAxisCrosses(value) { - this.axisVertCrosses = value; - } - - @action changeDisplayUnits(value) { - this.displayUnits = value; - } - - @action toggleVertValuesReverseOrder(value) { - this.valuesVertReverseOrder = value; - } - - @action changeVertMajorType(value) - { - this.vertMajorType = value; - } - - @action changeVertMinorType(value) { - this.vertMinorType = value; - } - - @action changeVertLabelPosition(value) { - this.vertLabelPosition = value; - } - - // Horizontal - - @action changeHorAxisCrosses(value) { - this.axisHorCrosses = value; - } - - @action toggleHorValuesReverseOrder(value) { - this.valuesHorReverseOrder = value; - } - - @action changeHorMajorType(value){ - this.horMajorType = value; - } - - @action changeHorMinorType(value) { - this.horMinorType = value; - } - - @action changeHorLabelPosition(value) { - this.horLabelPosition = value; - } - - @action changeAxisPosition(value) { - this.axisPosition = value; - } - @observable chartStyles = null; @action clearChartStyles () { diff --git a/apps/spreadsheeteditor/mobile/src/view/edit/Edit.jsx b/apps/spreadsheeteditor/mobile/src/view/edit/Edit.jsx index 23ba85f20..3df3425df 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, PageChartLegend, PageChartTitle, PageChartHorizontalAxisTitle, PageChartVerticalAxisTitle, PageChartHorizontalGridlines, PageChartVerticalGridlines, PageChartDataLabels, PageChartVerticalAxis, PageChartVertAxisCrosses, PageChartDisplayUnits, PageChartVertMajorType, PageChartVertMinorType, PageChartVertLabelPosition, PageChartHorizontalAxis, PageChartHorAxisCrosses, PageChartHorAxisPosition, PageChartHorMajorType, PageChartHorMinorType, PageChartHorLabelPosition } from './EditChart'; +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 { PageTypeLink, PageSheet } from './EditLink'; const routes = [ @@ -181,27 +181,27 @@ const routes = [ }, { path: '/edit-chart-legend/', - component: PageChartLegend + component: PageLegend }, { path: '/edit-horizontal-axis-title/', - component: PageChartHorizontalAxisTitle + component: PageHorizontalAxisTitle }, { path: '/edit-vertical-axis-title/', - component: PageChartVerticalAxisTitle + component: PageVerticalAxisTitle }, { path: '/edit-horizontal-gridlines/', - component: PageChartHorizontalGridlines + component: PageHorizontalGridlines }, { path: '/edit-vertical-gridlines/', - component: PageChartVerticalGridlines + component: PageVerticalGridlines }, { path: '/edit-data-labels/', - component: PageChartDataLabels + component: PageDataLabels }, // Vertical Axis @@ -212,23 +212,23 @@ const routes = [ }, { path: '/edit-vert-axis-crosses/', - component: PageChartVertAxisCrosses + component: PageVertAxisCrosses }, { path: '/edit-display-units/', - component: PageChartDisplayUnits + component: PageDisplayUnits }, { path: '/edit-vert-major-type/', - component: PageChartVertMajorType + component: PageVertMajorType }, { path: '/edit-vert-minor-type/', - component: PageChartVertMinorType + component: PageVertMinorType }, { path: '/edit-vert-label-position/', - component: PageChartVertLabelPosition + component: PageVertLabelPosition }, // Horizontal Axis @@ -239,23 +239,23 @@ const routes = [ }, { path: '/edit-hor-axis-crosses/', - component: PageChartHorAxisCrosses + component: PageHorAxisCrosses }, { path: '/edit-hor-axis-position/', - component: PageChartHorAxisPosition + component: PageHorAxisPosition }, { path: '/edit-hor-major-type/', - component: PageChartHorMajorType + component: PageHorMajorType }, { path: '/edit-hor-minor-type/', - component: PageChartHorMinorType + component: PageHorMinorType }, { path: '/edit-hor-label-position/', - component: PageChartHorLabelPosition + component: PageHorLabelPosition }, // Link diff --git a/apps/spreadsheeteditor/mobile/src/view/edit/EditChart.jsx b/apps/spreadsheeteditor/mobile/src/view/edit/EditChart.jsx index 30cb1e916..d7c291a6a 100644 --- a/apps/spreadsheeteditor/mobile/src/view/edit/EditChart.jsx +++ b/apps/spreadsheeteditor/mobile/src/view/edit/EditChart.jsx @@ -268,18 +268,17 @@ const PageLayout = props => { const { t } = useTranslation(); const _t = t('View.Edit', {returnObjects: true}); const storeFocusObjects = props.storeFocusObjects; - const storeChartSettings = props.storeChartSettings; const chartObject = storeFocusObjects.chartObject; const chartProperties = chartObject.get_ChartProperties(); const chartType = chartProperties.getType(); - const chartTitle = storeChartSettings.chartTitle; - const chartLegend = storeChartSettings.chartLegend; - const chartAxisHorTitle = storeChartSettings.chartAxisHorTitle; - const chartAxisVertTitle = storeChartSettings.chartAxisVertTitle; - const chartHorGridlines = storeChartSettings.chartHorGridlines; - const chartVertGridlines = storeChartSettings.chartVertGridlines; - const chartDataLabel = storeChartSettings.chartDataLabel; + 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 dataLabelPos = [ { value: Asc.c_oAscChartDataLabelsPos.none, displayValue: _t.textNone }, @@ -325,7 +324,7 @@ const PageLayout = props => { 0: `${_t.textNone}`, 1: `${_t.textOverlay}`, 2: `${_t.textNoOverlay}` - } + }; const chartLayoutLegends = { 0: `${_t.textNone}`, @@ -335,32 +334,32 @@ const PageLayout = props => { 4: `${_t.textBottom}`, 5: `${_t.textLeftOverlay}`, 6: `${_t.textRightOverlay}` - } + }; const chartLayoutAxisTitleHorizontal = { 0: `${_t.textNone}`, 1: `${_t.textNoOverlay}` - } + }; const chartLayoutAxisTitleVertical = { 0: `${_t.textNone}`, 1: `${_t.textRotated}`, 3: `${_t.textHorizontal}` - } + }; const chartLayoutGridlinesHorizontal = { 0: `${_t.textNone}`, 1: `${_t.textMajor}`, 2: `${_t.textMinor}`, 3: `${_t.textMajorAndMinor}` - } + }; const chartLayoutGridlinesVertical = { 0: `${_t.textNone}`, 1: `${_t.textMajor}`, 2: `${_t.textMinor}`, 3: `${_t.textMajorAndMinor}` - } + }; const chartDataLabels = { 0: `${_t.textNone}`, @@ -368,7 +367,7 @@ const PageLayout = props => { 2: `${_t.textFit}`, 5: `${_t.textInnerTop}`, 7: `${_t.textOuterTop}` - } + }; return ( @@ -377,13 +376,17 @@ const PageLayout = props => { @@ -392,13 +395,17 @@ const PageLayout = props => { @@ -407,20 +414,26 @@ const PageLayout = props => { @@ -431,9 +444,8 @@ const PageLayout = props => { const PageChartTitle = props => { const { t } = useTranslation(); const _t = t('View.Edit', {returnObjects: true}); - const storeChartSettings = props.storeChartSettings; const chartLayoutTitles = props.chartLayoutTitles; - const currentTitle = storeChartSettings.chartTitle; + const [currentTitle, setTitle] = useState(props.chartTitle); return ( @@ -442,7 +454,8 @@ const PageChartTitle = props => { {Object.keys(chartLayoutTitles).map(key => { return ( { - storeChartSettings.changeChartTitle(+key); + props.setTitle(+key); + setTitle(+key); props.setLayoutProperty('putTitle', key); props.f7router.back(); }}> @@ -456,9 +469,8 @@ const PageChartTitle = props => { const PageLegend = props => { const { t } = useTranslation(); const _t = t('View.Edit', {returnObjects: true}); - const storeChartSettings = props.storeChartSettings; const chartLayoutLegends = props.chartLayoutLegends; - const currentLegend = storeChartSettings.chartLegend; + const [currentLegend, setLegend] = useState(props.chartLegend); return ( @@ -467,7 +479,8 @@ const PageLegend = props => { {Object.keys(chartLayoutLegends).map(key => { return ( { - storeChartSettings.changeChartLegend(+key); + props.setLegend(+key); + setLegend(+key); props.setLayoutProperty('putLegendPos', key); props.f7router.back(); }}> @@ -481,9 +494,8 @@ const PageLegend = props => { const PageHorizontalAxisTitle = props => { const { t } = useTranslation(); const _t = t('View.Edit', {returnObjects: true}); - const storeChartSettings = props.storeChartSettings; const chartLayoutAxisTitleHorizontal = props.chartLayoutAxisTitleHorizontal; - const currentAxisHorTitle = storeChartSettings.chartAxisHorTitle; + const [currentAxisHorTitle, setAxisHorTitle] = useState(props.chartAxisHorTitle); return ( @@ -492,7 +504,8 @@ const PageHorizontalAxisTitle = props => { {Object.keys(chartLayoutAxisTitleHorizontal).map(key => { return ( { - storeChartSettings.changeChartAxisHorTitle(+key); + props.setAxisHorTitle(+key); + setAxisHorTitle(+key); props.setLayoutProperty('putHorAxisLabel', key); props.f7router.back(); }}> @@ -506,9 +519,8 @@ const PageHorizontalAxisTitle = props => { const PageVerticalAxisTitle = props => { const { t } = useTranslation(); const _t = t('View.Edit', {returnObjects: true}); - const storeChartSettings = props.storeChartSettings; const chartLayoutAxisTitleVertical = props.chartLayoutAxisTitleVertical; - const currentAxisVertTitle = storeChartSettings.chartAxisVertTitle; + const [currentAxisVertTitle, setAxisVertTitle] = useState(props.chartAxisVertTitle); return ( @@ -517,7 +529,8 @@ const PageVerticalAxisTitle = props => { {Object.keys(chartLayoutAxisTitleVertical).map(key => { return ( { - storeChartSettings.changeChartAxisVertTitle(+key); + props.setAxisVertTitle(+key); + setAxisVertTitle(+key); props.setLayoutProperty('putVertAxisLabel', key); props.f7router.back(); }}> @@ -531,9 +544,8 @@ const PageVerticalAxisTitle = props => { const PageHorizontalGridlines = props => { const { t } = useTranslation(); const _t = t('View.Edit', {returnObjects: true}); - const storeChartSettings = props.storeChartSettings; const chartLayoutGridlinesHorizontal = props.chartLayoutGridlinesHorizontal; - const currentChartHorGridlines = storeChartSettings.chartHorGridlines; + const [currentChartHorGridlines, setHorGridlines] = useState(props.chartHorGridlines); return ( @@ -542,7 +554,8 @@ const PageHorizontalGridlines = props => { {Object.keys(chartLayoutGridlinesHorizontal).map(key => { return ( { - storeChartSettings.changeChartHorGridlines(+key); + props.setHorGridlines(+key); + setHorGridlines(+key); props.setLayoutProperty('putHorGridLines', key); props.f7router.back(); }}> @@ -556,9 +569,8 @@ const PageHorizontalGridlines = props => { const PageVerticalGridlines = props => { const { t } = useTranslation(); const _t = t('View.Edit', {returnObjects: true}); - const storeChartSettings = props.storeChartSettings; const chartLayoutGridlinesVertical = props.chartLayoutGridlinesVertical; - const currentChartVertGridlines = storeChartSettings.chartVertGridlines; + const [currentChartVertGridlines, setVertGridlines] = useState(props.chartVertGridlines); return ( @@ -567,7 +579,8 @@ const PageVerticalGridlines = props => { {Object.keys(chartLayoutGridlinesVertical).map(key => { return ( { - storeChartSettings.changeChartVertGridlines(+key); + props.setVertGridlines(+key); + setVertGridlines(+key); props.setLayoutProperty('putVertGridLines', key); props.f7router.back(); }}> @@ -581,10 +594,9 @@ const PageVerticalGridlines = props => { const PageDataLabels = props => { const { t } = useTranslation(); const _t = t('View.Edit', {returnObjects: true}); - const storeChartSettings = props.storeChartSettings; const chartDataLabels = props.chartDataLabels; - const currentChartDataLabel = storeChartSettings.chartDataLabel; - + const [currentChartDataLabel, setDataLabel] = useState(props.chartDataLabel); + return ( @@ -592,7 +604,8 @@ const PageDataLabels = props => { {Object.keys(chartDataLabels).map(key => { return ( { - storeChartSettings.changeChartDataLabel(+key); + props.setDataLabel(+key); + setDataLabel(+key); props.setLayoutProperty('putDataLabelsPos', key); props.f7router.back(); }}> @@ -606,9 +619,11 @@ const PageDataLabels = props => { const PageVerticalAxis = props => { const { t } = useTranslation(); const _t = t('View.Edit', {returnObjects: true}); + const api = Common.EditorApi.get(); + const chartProperty = api.asc_getChartObject(); const isIos = Device.ios; - const storeChartSettings = props.storeChartSettings; - const axisProps = props.initVertAxis(); + const verAxisProps = chartProperty.getVertAxisProps(); + const axisProps = (verAxisProps.getAxisType() == Asc.c_oAscAxisType.val) ? verAxisProps : chartProperty.getHorAxisProps(); const crossValue = axisProps.getCrossesRule(); const axisCrosses = [ @@ -646,44 +661,22 @@ const PageVerticalAxis = props => { ]; const defineCurrentAxisCrosses = () => axisCrosses.find(elem => elem.value === crossValue); - const currentAxisCrosses = defineCurrentAxisCrosses(); - - if(!storeChartSettings.axisVertCrosses) { - storeChartSettings.changeVertAxisCrosses(currentAxisCrosses); - } + const [currentAxisCrosses, setAxisCrosses] = useState(defineCurrentAxisCrosses()); const defineCurrentDisplayUnits = () => vertAxisDisplayUnits.find(elem => elem.value === axisProps.getDispUnitsRule()); - const currentDisplayUnits = defineCurrentDisplayUnits(); + const [currentDisplayUnits, setDisplayUnits] = useState(defineCurrentDisplayUnits()); - if(!storeChartSettings.displayUnits) { - storeChartSettings.changeDisplayUnits(currentDisplayUnits); - } - - if(storeChartSettings.valuesVertReverseOrder == undefined) { - storeChartSettings.toggleVertValuesReverseOrder(axisProps.getInvertValOrder()); - } + const [valuesReverseOrder, toggleValuesReverseOrder] = useState(axisProps.getInvertValOrder()); const valueMajorType = axisProps.getMajorTickMark(); const valueMinorType = axisProps.getMinorTickMark(); + const defineCurrentTickOption = (elemType) => tickOptions.find(elem => elem.value === elemType); - const currentMajorType = defineCurrentTickOption(valueMajorType); - - if(!storeChartSettings.vertMajorType) { - storeChartSettings.changeVertMajorType(currentMajorType); - } - - const currentMinorType = defineCurrentTickOption(valueMinorType); - - if(!storeChartSettings.vertMinorType) { - storeChartSettings.changeVertMinorType(currentMinorType); - } + const [currentMajorType, setMajorType] = useState(defineCurrentTickOption(valueMajorType)); + const [currentMinorType, setMinorType] = useState(defineCurrentTickOption(valueMinorType)); const defineLabelsPosition = () => verticalAxisLabelsPosition.find(elem => elem.value === axisProps.getTickLabelsPos()); - const currentLabelsPosition = defineLabelsPosition(); - - if(!storeChartSettings.vertLabelPosition) { - storeChartSettings.changeVertLabelPosition(currentLabelsPosition); - } + const [currentLabelsPosition, setLabelsPosition] = useState(defineLabelsPosition()); const [minValue, setMinValue] = useState(axisProps.getMinValRule() == Asc.c_oAscValAxisRule.auto ? '' : axisProps.getMinVal()); const [maxValue, setMaxValue] = useState(axisProps.getMaxValRule() == Asc.c_oAscValAxisRule.auto ? '' : axisProps.getMaxVal()); @@ -716,11 +709,13 @@ const PageVerticalAxis = props => { /> - - {storeChartSettings.axisVertCrosses.value == Asc.c_oAscCrossesRule.value ? ( + {currentAxisCrosses.value == Asc.c_oAscCrossesRule.value ? ( { ) : null} -
- { - storeChartSettings.toggleVertValuesReverseOrder(!storeChartSettings.valuesVertReverseOrder); - props.onVerAxisReverse(!storeChartSettings.valuesVertReverseOrder); + { + toggleValuesReverseOrder(!valuesReverseOrder); + props.onVerAxisReverse(!valuesReverseOrder); }} />
{_t.textTickOptions} - - {_t.textLabelOptions} -
@@ -772,9 +775,8 @@ const PageVerticalAxis = props => { const PageVertAxisCrosses = props => { const { t } = useTranslation(); const _t = t('View.Edit', {returnObjects: true}); - const storeChartSettings = props.storeChartSettings; - const currentAxisCrosses = storeChartSettings.axisVertCrosses; const axisCrosses = props.axisCrosses; + const [currentAxisCrosses, setAxisCrosses] = useState(props.currentAxisCrosses); return ( @@ -785,7 +787,8 @@ const PageVertAxisCrosses = props => { { - storeChartSettings.changeVertAxisCrosses(elem); + props.setAxisCrosses(elem); + setAxisCrosses(elem); props.onVerAxisCrossType(elem.value); props.f7router.back(); }}> @@ -800,9 +803,8 @@ const PageVertAxisCrosses = props => { const PageDisplayUnits = props => { const { t } = useTranslation(); const _t = t('View.Edit', {returnObjects: true}); - const storeChartSettings = props.storeChartSettings; - const displayUnits = storeChartSettings.displayUnits; const vertAxisDisplayUnits = props.vertAxisDisplayUnits; + const [currentDisplayUnits, setDisplayUnits] = useState(props.currentDisplayUnits); return ( @@ -811,9 +813,10 @@ const PageDisplayUnits = props => { {vertAxisDisplayUnits.map((elem, index) => { return ( { - storeChartSettings.changeDisplayUnits(elem); + props.setDisplayUnits(elem); + setDisplayUnits(elem); props.onVerAxisDisplayUnits(elem.value); props.f7router.back(); }}> @@ -828,8 +831,7 @@ const PageDisplayUnits = props => { const PageVertMajorType = props => { const { t } = useTranslation(); const _t = t('View.Edit', {returnObjects: true}); - const storeChartSettings = props.storeChartSettings; - const vertMajorType = storeChartSettings.vertMajorType; + const [currentMajorType, setMajorType] = useState(props.currentMajorType); const tickOptions = props.tickOptions; return ( @@ -839,9 +841,10 @@ const PageVertMajorType = props => { {tickOptions.map((elem, index) => { return ( { - storeChartSettings.changeVertMajorType(elem); + props.setMajorType(elem); + setMajorType(elem); props.onVerAxisTickMajor(elem.value); props.f7router.back(); }}> @@ -856,8 +859,7 @@ const PageVertMajorType = props => { const PageVertMinorType = props => { const { t } = useTranslation(); const _t = t('View.Edit', {returnObjects: true}); - const storeChartSettings = props.storeChartSettings; - const vertMinorType = storeChartSettings.vertMinorType; + const [currentMinorType, setMinorType] = useState(props.currentMinorType); const tickOptions = props.tickOptions; return ( @@ -867,9 +869,10 @@ const PageVertMinorType = props => { {tickOptions.map((elem, index) => { return ( { - storeChartSettings.changeVertMinorType(elem); + props.setMinorType(elem); + setMinorType(elem); props.onVerAxisTickMinor(elem.value); props.f7router.back(); }}> @@ -884,8 +887,7 @@ const PageVertMinorType = props => { const PageVertLabelPosition = props => { const { t } = useTranslation(); const _t = t('View.Edit', {returnObjects: true}); - const storeChartSettings = props.storeChartSettings; - const vertLabelPosition = storeChartSettings.vertLabelPosition; + const [currentLabelsPosition, setLabelsPosition] = useState(props.currentLabelsPosition); const verticalAxisLabelsPosition = props.verticalAxisLabelsPosition; return ( @@ -895,9 +897,10 @@ const PageVertLabelPosition = props => { {verticalAxisLabelsPosition.map((elem, index) => { return ( { - storeChartSettings.changeVertLabelPosition(elem); + props.setLabelsPosition(elem); + setLabelsPosition(elem); props.onVerAxisLabelPos(elem.value); props.f7router.back(); }}> @@ -912,8 +915,11 @@ const PageVertLabelPosition = props => { const PageHorizontalAxis = props => { const { t } = useTranslation(); const _t = t('View.Edit', {returnObjects: true}); - const storeChartSettings = props.storeChartSettings; - const axisProps = props.initHorAxis(); + const api = Common.EditorApi.get(); + const isIos = Device.ios; + const chartProperty = api.asc_getChartObject(); + const horAxisProps = chartProperty.getHorAxisProps(); + const axisProps = (horAxisProps.getAxisType() == Asc.c_oAscAxisType.val) ? chartProperty.getVertAxisProps() : horAxisProps; const crossValue = axisProps.getCrossesRule(); const axisCrosses = [ @@ -943,44 +949,23 @@ const PageHorizontalAxis = props => { ]; const defineCurrentAxisCrosses = () => axisCrosses.find(elem => elem.value === crossValue); - const currentAxisCrosses = defineCurrentAxisCrosses(); - - if(!storeChartSettings.axisHorCrosses) { - storeChartSettings.changeHorAxisCrosses(currentAxisCrosses); - } + const [currentAxisCrosses, setAxisCrosses] = useState(defineCurrentAxisCrosses()); const defineAxisPosition = () => horAxisPosition.find(elem => elem.value === axisProps.getLabelsPosition()); - const axisPosition = defineAxisPosition(); + const [axisPosition, setAxisPosition] = useState(defineAxisPosition()); - if(!storeChartSettings.axisPosition) { - storeChartSettings.changeAxisPosition(axisPosition); - } - - if(storeChartSettings.valuesHorReverseOrder == undefined) { - storeChartSettings.toggleHorValuesReverseOrder(axisProps.getInvertCatOrder()); - } + const [valuesReverseOrder, toggleValuesReverseOrder] = useState(axisProps.getInvertCatOrder()); const valueMajorType = axisProps.getMajorTickMark(); const valueMinorType = axisProps.getMinorTickMark(); + const defineCurrentTickOption = (elemType) => tickOptions.find(elem => elem.value === elemType); - const currentMajorType = defineCurrentTickOption(valueMajorType); - if(!storeChartSettings.horMajorType) { - storeChartSettings.changeHorMajorType(currentMajorType); - } - - const currentMinorType = defineCurrentTickOption(valueMinorType); - - if(!storeChartSettings.horMinorType) { - storeChartSettings.changeHorMinorType(currentMinorType); - } + const [currentMajorType, setMajorType] = useState(defineCurrentTickOption(valueMajorType)); + const [currentMinorType, setMinorType] = useState(defineCurrentTickOption(valueMinorType)); const defineLabelsPosition = () => horAxisLabelsPosition.find(elem => elem.value === axisProps.getTickLabelsPos()); - const currentLabelsPosition = defineLabelsPosition(); - - if(!storeChartSettings.horLabelPosition) { - storeChartSettings.changeHorLabelPosition(currentLabelsPosition); - } + const [currentLabelsPosition, setLabelsPosition] = useState(defineLabelsPosition()); const currentCrossesValue = axisProps.getCrosses(); const [crossesValue, setCrossesValue] = useState(!currentCrossesValue ? '' : currentCrossesValue); @@ -988,15 +973,17 @@ const PageHorizontalAxis = props => { return ( - - + - {storeChartSettings.axisHorCrosses.value == Asc.c_oAscCrossesRule.value ? ( + {currentAxisCrosses.value == Asc.c_oAscCrossesRule.value ? ( props.onHorAxisCrossValue(e.target.value)} @@ -1006,36 +993,44 @@ const PageHorizontalAxis = props => { ) : null} -
- { - storeChartSettings.toggleHorValuesReverseOrder(!storeChartSettings.valuesHorReverseOrder); - props.onHorAxisReverse(!storeChartSettings.valuesHorReverseOrder); + { + toggleValuesReverseOrder(!valuesReverseOrder); + props.onHorAxisReverse(!valuesReverseOrder); }} />
{_t.textTickOptions} - - {_t.textLabelOptions} -
@@ -1045,8 +1040,7 @@ const PageHorizontalAxis = props => { const PageHorAxisCrosses = props => { const { t } = useTranslation(); const _t = t('View.Edit', {returnObjects: true}); - const storeChartSettings = props.storeChartSettings; - const currentAxisCrosses = storeChartSettings.axisHorCrosses; + const [currentAxisCrosses, setAxisCrosses] = useState(props.currentAxisCrosses); const axisCrosses = props.axisCrosses; return ( @@ -1058,7 +1052,8 @@ const PageHorAxisCrosses = props => { { - storeChartSettings.changeHorAxisCrosses(elem); + props.setAxisCrosses(elem); + setAxisCrosses(elem); props.onHorAxisCrossType(elem.value); props.f7router.back(); }}> @@ -1073,8 +1068,7 @@ const PageHorAxisCrosses = props => { const PageHorAxisPosition = props => { const { t } = useTranslation(); const _t = t('View.Edit', {returnObjects: true}); - const storeChartSettings = props.storeChartSettings; - const axisPosition = storeChartSettings.axisPosition; + const [axisPosition, setAxisPosition] = useState(props.axisPosition); const horAxisPosition = props.horAxisPosition; return ( @@ -1086,7 +1080,8 @@ const PageHorAxisPosition = props => { { - storeChartSettings.changeAxisPosition(elem); + props.setAxisPosition(elem); + setAxisPosition(elem); props.onHorAxisPos(elem.value); props.f7router.back(); }}> @@ -1101,8 +1096,7 @@ const PageHorAxisPosition = props => { const PageHorMajorType = props => { const { t } = useTranslation(); const _t = t('View.Edit', {returnObjects: true}); - const storeChartSettings = props.storeChartSettings; - const horMajorType = storeChartSettings.horMajorType; + const [currentMajorType, setMajorType] = useState(props.currentMajorType); const tickOptions = props.tickOptions; return ( @@ -1112,9 +1106,10 @@ const PageHorMajorType = props => { {tickOptions.map((elem, index) => { return ( { - storeChartSettings.changeHorMajorType(elem); + props.setMajorType(elem); + setMajorType(elem); props.onHorAxisTickMajor(elem.value); props.f7router.back(); }}> @@ -1129,8 +1124,7 @@ const PageHorMajorType = props => { const PageHorMinorType = props => { const { t } = useTranslation(); const _t = t('View.Edit', {returnObjects: true}); - const storeChartSettings = props.storeChartSettings; - const horMinorType = storeChartSettings.horMinorType; + const [currentMinorType, setMinorType] = useState(props.currentMinorType); const tickOptions = props.tickOptions; return ( @@ -1140,9 +1134,10 @@ const PageHorMinorType = props => { {tickOptions.map((elem, index) => { return ( { - storeChartSettings.changeHorMinorType(elem); + props.setMinorType(elem); + setMinorType(elem); props.onHorAxisTickMinor(elem.value); props.f7router.back(); }}> @@ -1157,8 +1152,7 @@ const PageHorMinorType = props => { const PageHorLabelPosition = props => { const { t } = useTranslation(); const _t = t('View.Edit', {returnObjects: true}); - const storeChartSettings = props.storeChartSettings; - const horLabelPosition = storeChartSettings.horLabelPosition; + const [currentLabelsPosition, setLabelsPosition] = useState(props.currentLabelsPosition); const horAxisLabelsPosition = props.horAxisLabelsPosition; return ( @@ -1168,9 +1162,10 @@ const PageHorLabelPosition = props => { {horAxisLabelsPosition.map((elem, index) => { return ( { - storeChartSettings.changeHorLabelPosition(elem); + props.setLabelsPosition(elem); + setLabelsPosition(elem); props.onHorAxisLabelPos(elem.value); props.f7router.back(); }}> @@ -1207,10 +1202,10 @@ const EditChart = props => { }}> { onVerAxisLabelPos: props.onVerAxisLabelPos }}> Date: Mon, 8 Mar 2021 00:28:37 +0300 Subject: [PATCH 23/27] [SSE mobile] fix according to mobx v. 6 --- .../mobile/src/store/applicationSettings.js | 67 ++++++++---- .../mobile/src/store/cellSettings.js | 100 +++++++++++------- 2 files changed, 110 insertions(+), 57 deletions(-) diff --git a/apps/spreadsheeteditor/mobile/src/store/applicationSettings.js b/apps/spreadsheeteditor/mobile/src/store/applicationSettings.js index a752ecc6d..ac459aa5a 100644 --- a/apps/spreadsheeteditor/mobile/src/store/applicationSettings.js +++ b/apps/spreadsheeteditor/mobile/src/store/applicationSettings.js @@ -1,15 +1,40 @@ -import {action, observable} from 'mobx'; +import {makeObservable, action, observable} from 'mobx'; + export class storeApplicationSettings { - - @observable unitMeasurement = Common.Utils.Metric.getCurrentMetric(); - @observable macrosMode = 0; - @observable formulaLang = Common.Locale.currentLang || dataLang[0].value; - @observable regCode = undefined; - @observable regExample = ''; - @observable regData = []; - @observable isRefStyle = false; - @observable isComments = true; - @observable isResolvedComments = true; + constructor() { + makeObservable(this, { + unitMeasurement: observable + , macrosMode: observable + , formulaLang: observable + , regCode: observable + , regExample: observable + , regData: observable + , isRefStyle: observable + , isComments: observable + , isResolvedComments: observable + , initRegData: action + , getRegCode: action + , changeRegCode: action + , setRegExample: action + , changeUnitMeasurement: action + , changeMacrosSettings: action + , changeDisplayComments: action + , changeDisplayResolved: action + , changeRefStyle: action + , changeFormulaLang: action + + }) + } + + unitMeasurement = Common.Utils.Metric.getCurrentMetric(); + macrosMode = 0; + formulaLang = Common.Locale.currentLang || dataLang[0].value; + regCode = undefined; + regExample = ''; + regData = []; + isRefStyle = false; + isComments = true; + isResolvedComments = true; getFormulaLanguages() { const dataLang = [ @@ -35,7 +60,7 @@ export class storeApplicationSettings { return regDataCode; } - @action initRegData() { + initRegData() { const regDataCodes = this.getRegDataCodes(); regDataCodes.forEach(item => { @@ -44,7 +69,7 @@ export class storeApplicationSettings { }) } - @action getRegCode() { + getRegCode() { const regData = this.regData; let value = Number(Common.localStorage.getItem('sse-settings-regional')); @@ -59,36 +84,36 @@ export class storeApplicationSettings { } } - @action changeRegCode(value) { + changeRegCode(value) { this.regCode = value; } - @action setRegExample(value) { + setRegExample(value) { this.regExample = value; } - @action changeUnitMeasurement(value) { + changeUnitMeasurement(value) { this.unitMeasurement = +value; } - @action changeMacrosSettings(value) { + changeMacrosSettings(value) { this.macrosMode = +value; } - @action changeDisplayComments(value) { + changeDisplayComments(value) { this.isComments = value; if (!value) this.changeDisplayResolved(value); } - @action changeDisplayResolved(value) { + changeDisplayResolved(value) { this.isResolvedComments = value; } - @action changeRefStyle(value) { + changeRefStyle(value) { this.isRefStyle = value; } - @action changeFormulaLang(value) { + changeFormulaLang(value) { this.formulaLang = value; } } \ No newline at end of file diff --git a/apps/spreadsheeteditor/mobile/src/store/cellSettings.js b/apps/spreadsheeteditor/mobile/src/store/cellSettings.js index 924699fee..3266e24af 100644 --- a/apps/spreadsheeteditor/mobile/src/store/cellSettings.js +++ b/apps/spreadsheeteditor/mobile/src/store/cellSettings.js @@ -1,47 +1,78 @@ -import {action, observable, computed} from 'mobx'; +import {makeObservable, action, observable, computed} from 'mobx'; export class storeCellSettings { + constructor() { + makeObservable(this, { + styleSize: observable + , borderInfo: observable + , borderStyle: observable + , cellStyles: observable + , fontsArray: observable + , fontInfo: observable + , fillColor: observable + , fontColor: observable + , styleName: observable + , isBold: observable + , isItalic: observable + , isUnderline: observable + , hAlignStr: observable + , vAlignStr: observable + , isWrapText: observable + , orientationStr: observable + , initCellSettings: action + , initTextFormat: action + , initTextOrientation: action + , initFontSettings: action + , initEditorFonts: action + , initCellStyles: action + , initFontInfo: action + , changeFontColor: action + , changeFillColor: action + , changeBorderColor: action + , changeBorderSize: action + , changeBorderStyle: action + }) + } - @observable styleSize = { + styleSize = { width: 100, height: 50 }; - @observable borderInfo = { + borderInfo = { color: '000000', - width: Asc.c_oAscBorderStyles.Medium + width: 12 // Asc.c_oAscBorderStyles.Medium }; - @observable borderStyle = 'none'; + borderStyle = 'none'; - @observable cellStyles = []; - @observable fontsArray = []; - @observable fontInfo = {}; + cellStyles = []; + fontsArray = []; + fontInfo = {}; - @observable fillColor = undefined; - @observable fontColor = undefined; - @observable styleName = undefined; + fillColor = undefined; + fontColor = undefined; + styleName = undefined; - @observable isBold = false; - @observable isItalic = false; - @observable isUnderline = false; + isBold = false; + isItalic = false; + isUnderline = false; - @observable hAlignStr = 'left'; - @observable vAlignStr = 'bottom'; - @observable isWrapText; + hAlignStr = 'left'; + vAlignStr = 'bottom'; + isWrapText; - @observable orientationStr = 'horizontal'; + orientationStr = 'horizontal'; - @action initCellSettings(cellInfo) { + initCellSettings(cellInfo) { let xfs = cellInfo.asc_getXfs(); - this.initFontSettings(xfs); let color = xfs.asc_getFillColor(); // console.log(color); - let clr = color.get_auto() ? 'transparent' : this.resetColor(color); + const clr = color.get_auto() ? 'transparent' : this.resetColor(color); this.fillColor = clr; this.styleName = cellInfo.asc_getStyleName(); @@ -51,7 +82,7 @@ export class storeCellSettings { } - @action initTextFormat(xfs) { + initTextFormat(xfs) { let hAlign = xfs.asc_getHorAlign(); let vAlign = xfs.asc_getVertAlign(); let isWrapText = xfs.asc_getWrapText(); @@ -73,10 +104,8 @@ export class storeCellSettings { this.isWrapText = isWrapText; } - @action initTextOrientation(xfs) { - let textAngle = xfs.asc_getAngle(); - - switch(textAngle) { + initTextOrientation(xfs) { + switch( xfs.asc_getAngle() ) { case 45: this.orientationStr = 'anglecount'; break; case -45: this.orientationStr = 'angleclock'; break; case 255: this.orientationStr = 'vertical'; break; @@ -86,8 +115,7 @@ export class storeCellSettings { } } - @action initFontSettings(xfs) { - + initFontSettings(xfs) { this.fontInfo.name = xfs.asc_getFontName(); this.fontInfo.size = xfs.asc_getFontSize(); @@ -100,7 +128,7 @@ export class storeCellSettings { this.isUnderline = xfs.asc_getFontUnderline(); } - @action initEditorFonts(fonts, select) { + initEditorFonts(fonts, select) { let array = []; for (let font of fonts) { @@ -117,31 +145,31 @@ export class storeCellSettings { this.fontsArray = array; } - @action initCellStyles(styles) { + initCellStyles(styles) { this.cellStyles = styles; } - @action initFontInfo(fontObj) { + initFontInfo(fontObj) { this.fontInfo = fontObj; } - @action changeFontColor(color) { + changeFontColor(color) { this.fontColor = color; } - @action changeFillColor(color) { + changeFillColor(color) { this.fillColor = color; } - @action changeBorderColor(color) { + changeBorderColor(color) { this.borderInfo.color = color; } - @action changeBorderSize(size) { + changeBorderSize(size) { this.borderInfo.width = size; } - @action changeBorderStyle(type) { + changeBorderStyle(type) { this.borderStyle = type; } From d116f5e0a01647c247a08b7f8fd77998aa818598 Mon Sep 17 00:00:00 2001 From: Maxim Kadushkin Date: Mon, 8 Mar 2021 00:28:57 +0300 Subject: [PATCH 24/27] [SSE mobile] refactoring --- apps/spreadsheeteditor/mobile/src/store/cellSettings.js | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/apps/spreadsheeteditor/mobile/src/store/cellSettings.js b/apps/spreadsheeteditor/mobile/src/store/cellSettings.js index 3266e24af..2ee0fbe9f 100644 --- a/apps/spreadsheeteditor/mobile/src/store/cellSettings.js +++ b/apps/spreadsheeteditor/mobile/src/store/cellSettings.js @@ -120,8 +120,7 @@ export class storeCellSettings { this.fontInfo.size = xfs.asc_getFontSize(); this.fontInfo.color = xfs.asc_getFontColor(); - let clr = this.resetColor(this.fontInfo.color); - this.fontColor = clr; + this.fontColor = this.resetColor(this.fontInfo.color); this.isBold = xfs.asc_getFontBold(); this.isItalic = xfs.asc_getFontItalic(); @@ -132,9 +131,8 @@ export class storeCellSettings { let array = []; for (let font of fonts) { - let fontId = font.asc_getFontId(); array.push({ - id : fontId, + id : font.asc_getFontId(), name : font.asc_getFontName(), //displayValue: font.asc_getFontName(), imgidx : font.asc_getFontThumbnail(), @@ -167,6 +165,7 @@ export class storeCellSettings { changeBorderSize(size) { this.borderInfo.width = size; + console.log('change border width ' + size); } changeBorderStyle(type) { From 99fc32bf993cef7f27acc379ae73bb3c2c75d582 Mon Sep 17 00:00:00 2001 From: SergeyEzhin Date: Thu, 11 Mar 2021 20:21:05 +0300 Subject: [PATCH 25/27] [SSE mobile] Added Find and Replace --- apps/common/mobile/lib/view/Search.jsx | 152 ++++++++++---- .../mobile/resources/less/common-ios.less | 67 ++++++ .../resources/less/common-material.less | 112 ++++++++++ apps/common/mobile/resources/less/icons.less | 10 + .../mobile/resources/less/ios/icons.less | 23 +++ .../mobile/resources/less/material/icons.less | 23 +++ apps/common/mobile/resources/less/search.less | 56 ++++- apps/spreadsheeteditor/mobile/locale/en.json | 19 +- .../mobile/src/controller/Search.jsx | 195 ++++++++++++++++++ .../mobile/src/less/app.less | 2 + .../mobile/src/page/main.jsx | 77 +++---- .../mobile/src/view/settings/Settings.jsx | 2 +- 12 files changed, 662 insertions(+), 76 deletions(-) create mode 100644 apps/common/mobile/resources/less/icons.less create mode 100644 apps/common/mobile/resources/less/ios/icons.less create mode 100644 apps/common/mobile/resources/less/material/icons.less create mode 100644 apps/spreadsheeteditor/mobile/src/controller/Search.jsx diff --git a/apps/common/mobile/lib/view/Search.jsx b/apps/common/mobile/lib/view/Search.jsx index 51bca9ca5..9decff1c8 100644 --- a/apps/common/mobile/lib/view/Search.jsx +++ b/apps/common/mobile/lib/view/Search.jsx @@ -1,11 +1,13 @@ + import React, { Component } from 'react'; import { Searchbar, Popover, Popup, View, Page, List, ListItem, Navbar, NavRight, Link } from 'framework7-react'; import { Toggle } from 'framework7-react'; import { f7 } from 'framework7-react'; import { Dom7 } from 'framework7'; import { Device } from '../../../../common/mobile/utils/device'; -import { observable } from "mobx"; +import { observable, runInAction } from "mobx"; import { observer } from "mobx-react"; +import { useTranslation, withTranslation } from 'react-i18next'; const searchOptions = observable({ usereplace: false @@ -24,18 +26,23 @@ class SearchSettingsView extends Component { this.state = { useReplace: false, - caseSensitive: false, - markResults: false + // caseSensitive: false, + // markResults: false + searchIn: 0, + searchBy: 1, + lookIn: 1, + isMatchCase: false, + isMatchCell: false }; } onFindReplaceClick(action) { - searchOptions.usereplace = action == 'replace'; + runInAction(() => searchOptions.usereplace = action == 'replace'); + this.setState({ useReplace: searchOptions.usereplace }); - if (this.onReplaceChecked) {} } @@ -43,17 +50,18 @@ class SearchSettingsView extends Component { } render() { - const show_popover = true; + const show_popover = !Device.phone; const navbar = {!show_popover && Done - } + + } ; const extra = this.extraSearchOptions(); const content = - + {navbar} @@ -66,7 +74,7 @@ class SearchSettingsView extends Component { return ( show_popover ? {content} : - {content} + {content} ) } } @@ -76,6 +84,13 @@ class SearchView extends Component { constructor(props) { super(props); + this.state = { + searchQuery: '', + replaceQuery: '' + }; + + const $$ = Dom7; + $$(document).on('page:init', (e, page) => { if ( page.name == 'home' ) { this.searchbar = f7.searchbar.create({ @@ -84,7 +99,7 @@ class SearchView extends Component { expandable: true, backdrop: false, on: { - search: (bar, curval, prevval) => { + search: (bar, curval, prevval) => { }, enable: this.onSearchbarShow.bind(this, true), disable: this.onSearchbarShow.bind(this, false) @@ -97,8 +112,9 @@ class SearchView extends Component { // return (m = /(iPad|iPhone|iphone).*?(OS |os |OS\_)(\d+((_|\.)\d)?((_|\.)\d)?)/.exec(ua)) ? parseFloat(m[3]) : 0; // } - const $$ = Dom7; const $editor = $$('#editor_sdk'); + const $replaceLink = $$('#replace-link'); + if (false /*iOSVersion() < 13*/) { // $editor.single('mousedown touchstart', _.bind(me.onEditorTouchStart, me)); // $editor.single('mouseup touchend', _.bind(me.onEditorTouchEnd, me)); @@ -109,21 +125,23 @@ class SearchView extends Component { $editor.on('pointerdown', this.onEditorTouchStart.bind(this)); $editor.on('pointerup', this.onEditorTouchEnd.bind(this)); + // $replaceLink.on('click', this.onReplaceHold.bind(this)); } }); this.onSettingsClick = this.onSettingsClick.bind(this); this.onSearchClick = this.onSearchClick.bind(this); + this.onReplaceClick = this.onReplaceClick.bind(this); } componentDidMount(){ const $$ = Dom7; - this.$repalce = $$('#idx-replace-val'); + this.$replace = $$('#idx-replace-val'); } onSettingsClick(e) { if ( Device.phone ) { - // f7.popup.open('.settings-popup'); + f7.popup.open('.search-settings-popup'); } else f7.popover.open('#idx-search-settings', '#idx-btn-search-settings'); } @@ -132,35 +150,64 @@ class SearchView extends Component { find: this.searchbar.query }; - if ( searchOptions.usereplace ) + if (searchOptions.usereplace) { params.replace = this.$replace.val(); + } return params; } onSearchClick(action) { - if ( this.searchbar && this.searchbar.query) { - if ( this.props.onSearchQuery ) { + if (this.searchbar && this.state.searchQuery) { + if (this.props.onSearchQuery) { let params = this.searchParams(); + params.find = this.state.searchQuery; params.forward = action != SEARCH_BACKWARD; + console.log(params); this.props.onSearchQuery(params); } } } + onReplaceClick() { + if (this.searchbar && this.state.searchQuery) { + if (this.props.onReplaceQuery) { + let params = this.searchParams(); + params.find = this.state.searchQuery; + // console.log(params); + + this.props.onReplaceQuery(params); + } + } + } + + onReplaceAllClick() { + if (this.searchbar && this.state.searchQuery) { + if (this.props.onReplaceAllQuery) { + let params = this.searchParams(); + params.find = this.state.searchQuery; + // console.log(params); + + this.props.onReplaceAllQuery(params); + } + } + } + onSearchbarShow(isshowed, bar) { if ( !isshowed ) { - this.$repalce.val(''); + this.$replace.val(''); } } onEditorTouchStart(e) { this.startPoint = this.pointerPosition(e); + // console.log(this.startPoint); } onEditorTouchEnd(e) { const endPoint = this.pointerPosition(e); + // console.log(endPoint); if ( this.searchbar.enabled ) { const distance = (this.startPoint.x === undefined || this.startPoint.y === undefined) ? 0 : @@ -187,35 +234,68 @@ class SearchView extends Component { return out; } + changeSearchQuery(value) { + this.setState({ + searchQuery: value + }); + } + + changeReplaceQuery(value) { + this.setState({ + replaceQuery: value + }); + } + render() { const usereplace = searchOptions.usereplace; const hidden = {display: "none"}; + const searchQuery = this.state.searchQuery; + const replaceQuery = this.state.replaceQuery; + const isIos = Device.ios; + + // const _t = this.t('View.Settings', {returnObjects: true}); + // console.log(this.state.searchQuery, this.state.replaceQuery); + + if(this.searchbar && this.searchbar.enabled) { + usereplace ? this.searchbar.el.classList.add('replace') : this.searchbar.el.classList.remove('replace'); + } + return (
-
+ {isIos ?
: null}
-
+ -
- - - +
+
+ {this.changeSearchQuery(e.target.value)}} /> + {isIos ? : null} + +
+
+ {this.changeReplaceQuery(e.target.value)}} /> + {isIos ? : null} + +
-
- - - -
- @@ -223,4 +303,4 @@ class SearchView extends Component { } } -export {SearchView as default, SearchView, SearchSettingsView}; +export {SearchView as default, SearchView, SearchSettingsView}; \ No newline at end of file diff --git a/apps/common/mobile/resources/less/common-ios.less b/apps/common/mobile/resources/less/common-ios.less index 00cf701a0..df66e1e81 100644 --- a/apps/common/mobile/resources/less/common-ios.less +++ b/apps/common/mobile/resources/less/common-ios.less @@ -417,4 +417,71 @@ } } } + + // Find and Replace + + .navbar { + .searchbar-input-wrap { + margin-right: 10px; + height: 28px; + } + .buttons-row-replace a { + color: @themeColor; + } + } + + .searchbar input[type=search] { + box-sizing: border-box; + width: 100%; + height: 100%; + display: block; + border: none; + appearance: none; + border-radius: 5px; + font-family: inherit; + color: @black; + font-size: 14px; + font-weight: 400; + padding: 0 8px; + background-color: @white; + padding: 0 28px; + } + + .searchbar-inner { + &__right { + .buttons-row a.next { + margin-left: 15px; + } + } + } + + @media(max-width: 550px) + { + .searchbar-expandable.searchbar-enabled { + top: 0; + .searchbar-inner { + &__left { + margin-right: 15px; + } + &__center { + flex-direction: column; + } + &__right { + flex-direction: column-reverse; + margin-left: 10px; + } + } + &.replace { + height: 88px; + .searchbar-inner { + height: 100%; + &__center { + .searchbar-input-wrap { + margin: 8px 0; + } + } + } + } + } + } } diff --git a/apps/common/mobile/resources/less/common-material.less b/apps/common/mobile/resources/less/common-material.less index 9b7ec4fa2..6887a13fc 100644 --- a/apps/common/mobile/resources/less/common-material.less +++ b/apps/common/mobile/resources/less/common-material.less @@ -311,4 +311,116 @@ } } } + + // Find and Replace + + .searchbar-inner { + &__center { + flex-wrap: wrap; + } + &__left { + padding-top: 4px; + } + } + + .buttons-row-replace a { + color: @white; + } + + .navbar { + .searchbar-input-wrap { + height: 32px; + margin-right: 10px; + margin: 4px 0; + } + &-inner { + overflow: initial; + } + } + + .searchbar .input-clear-button { + width: 18px; + height: 18px; + &:after { + color: @white; + font-size: 19px; + } + } + + .searchbar-icon { + &:after { + color: @white; + font-size: 19px; + } + } + + .searchbar input[type=search] { + box-sizing: border-box; + width: 100%; + display: block; + border: none; + appearance: none; + border-radius: 0; + font-family: inherit; + color: @white; + font-size: 16px; + font-weight: 400; + padding: 0; + border-bottom: 1px solid @white; + height: 100%; + padding: 0 36px 0 24px; + background-color: transparent; + background-repeat: no-repeat; + background-position: 0 center; + opacity: 1; + background-size: 24px 24px; + transition-duration: .3s; + .encoded-svg-background(''); + } + + .searchbar input[type=search]::placeholder { + color: @white; + } + + .navbar { + .searchbar-expandable.searchbar-enabled { + top: 0; + // height: 100%; + .searchbar-inner { + height: 100%; + &__center { + flex-direction: column; + } + &__right { + flex-direction: column-reverse; + } + } + &.replace { + height: 96px; + } + } + a.link { + padding: 0 16px; + } + a.icon-only { + width: auto; + height: 48px; + } + .buttons-row-replace a { + color: @white; + } + .searchbar .buttons-row { + align-self: flex-start; + } + } + + @media(max-width: 550px) { + .searchbar-expandable.searchbar-enabled { + .searchbar-inner { + &__left { + margin-right: 33px; + } + } + } + } } diff --git a/apps/common/mobile/resources/less/icons.less b/apps/common/mobile/resources/less/icons.less new file mode 100644 index 000000000..72d751add --- /dev/null +++ b/apps/common/mobile/resources/less/icons.less @@ -0,0 +1,10 @@ +@import "./ios/icons"; +@import "./material/icons"; + +i.icon { + // &.icon-paste { + // width: 24px; + // height: 24px; + // .encoded-svg-uncolored-mask(''); + // } +} \ No newline at end of file diff --git a/apps/common/mobile/resources/less/ios/icons.less b/apps/common/mobile/resources/less/ios/icons.less new file mode 100644 index 000000000..726a98f46 --- /dev/null +++ b/apps/common/mobile/resources/less/ios/icons.less @@ -0,0 +1,23 @@ +.device-ios { + i.icon { + &.icon_mask { + background-color: white; + } + &.icon-prev { + width: 22px; + height: 22px; + .encoded-svg-background(''); + &:after { + display: none; + } + } + &.icon-next { + width: 22px; + height: 22px; + .encoded-svg-background(''); + &:after { + display: none; + } + } + } +} \ No newline at end of file diff --git a/apps/common/mobile/resources/less/material/icons.less b/apps/common/mobile/resources/less/material/icons.less new file mode 100644 index 000000000..d1865a795 --- /dev/null +++ b/apps/common/mobile/resources/less/material/icons.less @@ -0,0 +1,23 @@ +.device-android { + i.icon { + &.icon_mask { + background-color: black; + } + &.icon-prev { + width: 20px; + height: 20px; + .encoded-svg-background(''); + &:after { + display: none; + } + } + &.icon-next { + width: 20px; + height: 20px; + .encoded-svg-background(''); + &:after { + display: none; + } + } + } +} \ No newline at end of file diff --git a/apps/common/mobile/resources/less/search.less b/apps/common/mobile/resources/less/search.less index 21249b941..caf870f49 100644 --- a/apps/common/mobile/resources/less/search.less +++ b/apps/common/mobile/resources/less/search.less @@ -14,7 +14,59 @@ } } - .searchbar-input-wrap { - margin-right: 10px; + .searchbar-inner { + &__center { + display: flex; + align-items: center; + width: 100%; + } + &__right { + display: flex; + align-items: center; + } + } + + .searchbar-expandable { + transition-duration: 0s; + } + + .buttons-row-replace { + display: flex; + flex-direction: column; + align-items: center; + width: max-content; + a { + font-size: 15px; + height: auto; + display: block; + line-height: normal; + } + } + + @media(max-width: 550px) + { + .searchbar-expandable.searchbar-enabled { + .searchbar-inner { + &__left { + min-width: 22px; + max-width: 22px; + } + &__center { + flex-direction: column; + } + &__right { + flex-direction: column-reverse; + } + } + &.replace { + top: 0; + .searchbar-inner { + height: 100%; + &__left { + align-self: flex-start; + } + } + } + } } } diff --git a/apps/spreadsheeteditor/mobile/locale/en.json b/apps/spreadsheeteditor/mobile/locale/en.json index a3174d952..a7c61168d 100644 --- a/apps/spreadsheeteditor/mobile/locale/en.json +++ b/apps/spreadsheeteditor/mobile/locale/en.json @@ -290,7 +290,24 @@ "textEmail": "Email", "textAddress": "Address", "textTel": "Tel", - "textPoweredBy": "Powered By" + "textPoweredBy": "Powered By", + "textFind": "Find", + "textSearch": "Search", + "textReplace": "Replace", + "textMatchCase": "Match Case", + "textMatchCell": "Match Cell", + "textSearchIn": "Search In", + "textWorkbook": "Workbook", + "textSheet": "Sheet", + "textHighlightRes": "Highlight results", + "textByColumns": "By columns", + "textByRows": "By rows", + "textSearchBy": "Search", + "textLookIn": "Look In", + "textFormulas": "Formulas", + "textValues": "Values", + "textNoTextFound": "Text not found", + "textReplaceAll": "Replace All" } }, "Common": { diff --git a/apps/spreadsheeteditor/mobile/src/controller/Search.jsx b/apps/spreadsheeteditor/mobile/src/controller/Search.jsx new file mode 100644 index 000000000..52ec2cb8c --- /dev/null +++ b/apps/spreadsheeteditor/mobile/src/controller/Search.jsx @@ -0,0 +1,195 @@ +import React, { Fragment } from 'react'; +import { List, ListItem, Toggle, BlockTitle } from 'framework7-react'; +import { SearchController, SearchView, SearchSettingsView } from '../../../../common/mobile/lib/controller/Search'; +import { f7 } from 'framework7-react'; +import { useTranslation, withTranslation } from 'react-i18next'; +import { Dom7 } from 'framework7'; + +class SearchSettings extends SearchSettingsView { + constructor(props) { + super(props); + + // this.state = { + // searchIn: 0, + // searchBy: 1, + // lookIn: 1, + // isMatchCase: false, + // isMatchCell: false + // } + + this.onToggleMarkResults = this.onToggleMarkResults.bind(this); + } + + onToggleMarkResults(checked) { + const api = Common.EditorApi.get(); + api.asc_selectSearchingResults(checked); + } + + extraSearchOptions() { + const anc_markup = super.extraSearchOptions(); + + const markup = ( + + Search In + + this.setState({ + searchIn: 0 + })} /> + this.setState({ + searchIn: 1 + })} /> + + Search + + this.setState({ + searchBy: 0 + })} /> + this.setState({ + searchBy: 1 + })} /> + + Look In + + this.setState({ + lookIn: 0 + })} /> + this.setState({ + lookIn: 1 + })} /> + + + + this.setState({ + isMatchCase: !this.state.isMatchCase + })} /> + + + this.setState({ + isMatchCell: !this.state.isMatchCell + })} /> + + + + + + + ) + + return {...anc_markup, ...markup}; + } +} + +class SESearchView extends SearchView { + searchParams() { + let params = super.searchParams(); + const $$ = Dom7; + + const checkboxMatchCase = f7.toggle.get('.toggle-match-case'), + checkboxMatchCell = f7.toggle.get('.toggle-match-cell'), + checkboxMarkResults = f7.toggle.get('.toggle-mark-results'), + checkboxSearchIn = $$('[name="search-in-checkbox"]:checked')[0], + checkboxSearchBy = $$('[name="search-by-checkbox"]:checked')[0], + checkboxLookIn = $$('[name="look-in-checkbox"]:checked')[0]; + + const searchOptions = { + caseSensitive: checkboxMatchCase.checked, + highlight: checkboxMarkResults.checked, + matchCell: checkboxMatchCell.checked, + searchIn: checkboxSearchIn.value, + searchBy: checkboxSearchBy.value, + lookIn: checkboxLookIn.value, + }; + + return {...params, ...searchOptions}; + } + + onSearchbarShow(isshowed, bar) { + super.onSearchbarShow(isshowed, bar); + + const api = Common.EditorApi.get(); + if ( isshowed ) { + const checkboxMarkResults = f7.toggle.get('.toggle-mark-results'); + api.asc_selectSearchingResults(checkboxMarkResults.checked); + } else api.asc_selectSearchingResults(false); + } +} + +const Search = props => { + // const { t } = useTranslation(); + // const _t = t('View.Settings', {returnObjects: true}); + + const onSearchQuery = params => { + const api = Common.EditorApi.get(); + let lookIn = +params.lookIn === 0; + let searchIn = +params.searchIn === 1; + let searchBy = +params.searchBy === 0; + + if (params.find && params.find.length) { + let options = new Asc.asc_CFindOptions(); + + options.asc_setFindWhat(params.find); + options.asc_setScanForward(params.forward); + options.asc_setIsMatchCase(params.caseSensitive); + options.asc_setIsWholeCell(params.matchCell); + options.asc_setScanOnOnlySheet(searchIn); + options.asc_setScanByRows(searchBy); + options.asc_setLookIn(lookIn ? Asc.c_oAscFindLookIn.Formulas : Asc.c_oAscFindLookIn.Value); + + if (!api.asc_findText(options)) { + f7.dialog.alert(null, 'Text not Found'); + } + } + }; + + const onReplaceQuery = params => { + const api = Common.EditorApi.get(); + let lookIn = +params.lookIn === 0; + let searchIn = +params.searchIn === 1; + let searchBy = +params.searchBy === 0; + + if (params.find && params.find.length) { + api.isReplaceAll = false; + + let options = new Asc.asc_CFindOptions(); + + options.asc_setFindWhat(params.find); + options.asc_setReplaceWith(params.replace); + options.asc_setIsMatchCase(params.caseSensitive); + options.asc_setIsWholeCell(params.matchCell); + options.asc_setScanOnOnlySheet(searchIn); + options.asc_setScanByRows(searchBy); + options.asc_setLookIn(lookIn ? Asc.c_oAscFindLookIn.Formulas : Asc.c_oAscFindLookIn.Value); + options.asc_setIsReplaceAll(false); + + api.asc_replaceText(options); + } + } + + const onReplaceAllQuery = params => { + const api = Common.EditorApi.get(); + let lookIn = +params.lookIn === 0; + let searchIn = +params.searchIn === 1; + let searchBy = +params.searchBy === 0; + + if (params.find && params.find.length) { + api.isReplaceAll = true; + + let options = new Asc.asc_CFindOptions(); + + options.asc_setFindWhat(params.find); + options.asc_setReplaceWith(params.replace); + options.asc_setIsMatchCase(params.caseSensitive); + options.asc_setIsWholeCell(params.matchCell); + options.asc_setScanOnOnlySheet(searchIn); + options.asc_setScanByRows(searchBy); + options.asc_setLookIn(lookIn ? Asc.c_oAscFindLookIn.Formulas : Asc.c_oAscFindLookIn.Value); + options.asc_setIsReplaceAll(true); + + api.asc_replaceText(options); + } + } + + return +}; + +export {Search, SearchSettings} \ No newline at end of file diff --git a/apps/spreadsheeteditor/mobile/src/less/app.less b/apps/spreadsheeteditor/mobile/src/less/app.less index 3941298d0..386e8d550 100644 --- a/apps/spreadsheeteditor/mobile/src/less/app.less +++ b/apps/spreadsheeteditor/mobile/src/less/app.less @@ -9,7 +9,9 @@ @import '../../../../common/mobile/resources/less/common.less'; @import '../../../../common/mobile/resources/less/common-ios.less'; @import '../../../../common/mobile/resources/less/common-material.less'; +@import '../../../../common/mobile/resources/less/icons.less'; @import '../../../../common/mobile/resources/less/dataview.less'; +@import '../../../../common/mobile/resources/less/search.less'; @import './app-material.less'; @import './app-ios.less'; @import './icons-ios.less'; diff --git a/apps/spreadsheeteditor/mobile/src/page/main.jsx b/apps/spreadsheeteditor/mobile/src/page/main.jsx index 8ea7ea17a..94680f9f4 100644 --- a/apps/spreadsheeteditor/mobile/src/page/main.jsx +++ b/apps/spreadsheeteditor/mobile/src/page/main.jsx @@ -8,6 +8,8 @@ import CellEditor from '../controller/CellEditor'; import Statusbar from '../controller/StatusBar' import AddOptions from "../view/add/Add"; import EditOptions from "../view/edit/Edit"; +import { Device } from '../../../../common/mobile/utils/device'; +import { Search, SearchSettings } from '../controller/Search'; import {FunctionGroups} from "../controller/add/AddFunction"; @@ -56,44 +58,47 @@ export default class MainPage extends Component { render() { return ( - + {/* Top Navbar */} - - {/*
*/} - - - - - - this.handleClickToOpenOptions('edit')}> - this.handleClickToOpenOptions('add')}> - this.handleClickToOpenOptions('coauth')}> - this.handleClickToOpenOptions('settings')}> - -
- this.handleClickToOpenOptions('add', {panels: panels, button: button})}/> - {/* Page content */} - - { - !this.state.editOptionsVisible ? null : - - } - { - !this.state.addOptionsVisible ? null : - - } - { - !this.state.settingsVisible ? null : - - } - { - !this.state.collaborationVisible ? null : - - } - + + {/*
*/} + + + + + + this.handleClickToOpenOptions('edit')}> + this.handleClickToOpenOptions('add')}> + { Device.phone ? null : } + this.handleClickToOpenOptions('coauth')}> + this.handleClickToOpenOptions('settings')}> + + +
+ this.handleClickToOpenOptions('add', {panels: panels, button: button})}/> + {/* Page content */} + + + { + !this.state.editOptionsVisible ? null : + + } + { + !this.state.addOptionsVisible ? null : + + } + { + !this.state.settingsVisible ? null : + + } + { + !this.state.collaborationVisible ? null : + + } + - {/* hidden component*/} -
+ {/* hidden component*/} +
) } }; \ No newline at end of file diff --git a/apps/spreadsheeteditor/mobile/src/view/settings/Settings.jsx b/apps/spreadsheeteditor/mobile/src/view/settings/Settings.jsx index 70a87ae49..938900eff 100644 --- a/apps/spreadsheeteditor/mobile/src/view/settings/Settings.jsx +++ b/apps/spreadsheeteditor/mobile/src/view/settings/Settings.jsx @@ -115,7 +115,7 @@ const SettingsList = withTranslation()(props => { {navbar} {!props.inPopover && - + } From a556f4e19644ea56f036d91107f6c10bf5dbdf3b Mon Sep 17 00:00:00 2001 From: SergeyEzhin Date: Fri, 12 Mar 2021 20:54:11 +0300 Subject: [PATCH 26/27] [SSE mobile] Correcting Find and Replace --- apps/common/mobile/lib/controller/Search.jsx | 5 +- apps/common/mobile/lib/view/Search.jsx | 77 +++++++++--------- .../mobile/src/controller/Search.jsx | 78 +++++++++++-------- .../mobile/src/page/main.jsx | 4 +- 4 files changed, 89 insertions(+), 75 deletions(-) diff --git a/apps/common/mobile/lib/controller/Search.jsx b/apps/common/mobile/lib/controller/Search.jsx index fa60859ec..8727aa450 100644 --- a/apps/common/mobile/lib/controller/Search.jsx +++ b/apps/common/mobile/lib/controller/Search.jsx @@ -1,13 +1,12 @@ import React from 'react'; -import SearchView, {SearchSettingsView} from '../view/Search' - +import {SearchView, SearchSettingsView} from '../view/Search'; const SearchController = props => { const onSearchQuery = params => { console.log('on search: ' + params); }; - return + return }; export {SearchController, SearchView, SearchSettingsView}; diff --git a/apps/common/mobile/lib/view/Search.jsx b/apps/common/mobile/lib/view/Search.jsx index 9decff1c8..225e8f175 100644 --- a/apps/common/mobile/lib/view/Search.jsx +++ b/apps/common/mobile/lib/view/Search.jsx @@ -7,7 +7,6 @@ import { Dom7 } from 'framework7'; import { Device } from '../../../../common/mobile/utils/device'; import { observable, runInAction } from "mobx"; import { observer } from "mobx-react"; -import { useTranslation, withTranslation } from 'react-i18next'; const searchOptions = observable({ usereplace: false @@ -51,25 +50,21 @@ class SearchSettingsView extends Component { render() { const show_popover = !Device.phone; - const navbar = - - {!show_popover && - - Done - - } - ; + // const navbar = + // + // {!show_popover && + // + // Done + // + // } + // ; const extra = this.extraSearchOptions(); const content = - - {navbar} - - this.onFindReplaceClick('find')} /> - this.onFindReplaceClick('replace')} /> - - { extra } - + {/* + {navbar} */} + {extra} + {/* */} ; return ( show_popover ? @@ -113,14 +108,14 @@ class SearchView extends Component { // } const $editor = $$('#editor_sdk'); - const $replaceLink = $$('#replace-link'); + // const $replaceLink = $$('#replace-link'); - if (false /*iOSVersion() < 13*/) { - // $editor.single('mousedown touchstart', _.bind(me.onEditorTouchStart, me)); - // $editor.single('mouseup touchend', _.bind(me.onEditorTouchEnd, me)); + if (false /* iOSVersion < 13 */) { + // $editor.on('mousedown touchstart', this.onEditorTouchStart.bind(this)); + // $editor.on('mouseup touchend', this.onEditorTouchEnd.bind(this)); } else { - // $editor.single('pointerdown', this.onEditorTouchStart, me)); - // $editor.single('pointerup', _.bind(me.onEditorTouchEnd, me)); + // $editor.on('pointerdown', this.onEditorTouchStart.bind(this)); + // $editor.on('pointerup', this.onEditorTouchEnd.bind(this)); } $editor.on('pointerdown', this.onEditorTouchStart.bind(this)); @@ -163,7 +158,7 @@ class SearchView extends Component { let params = this.searchParams(); params.find = this.state.searchQuery; params.forward = action != SEARCH_BACKWARD; - console.log(params); + // console.log(params); this.props.onSearchQuery(params); } @@ -209,11 +204,20 @@ class SearchView extends Component { const endPoint = this.pointerPosition(e); // console.log(endPoint); - if ( this.searchbar.enabled ) { - const distance = (this.startPoint.x === undefined || this.startPoint.y === undefined) ? 0 : - Math.sqrt((endPoint.x -= this.startPoint.x) * endPoint.x + (endPoint.y -= this.startPoint.y) * endPoint.y); + if (this.searchbar.enabled) { + let distance; - if ( distance < 1 ) { + if(this.startPoint) { + distance = (!!this.startPoint.x || !!this.startPoint.y) ? 0 : + Math.sqrt((endPoint.x -= this.startPoint.x) * endPoint.x + (endPoint.y -= this.startPoint.y) * endPoint.y); + } else { + distance = 0; + } + + // const distance = (this.startPoint === undefined || this.startPoint === undefined) ? 0 : + // Math.sqrt((endPoint.x -= this.startPoint.x) * endPoint.x + (endPoint.y -= this.startPoint.y) * endPoint.y); + + if (distance < 1) { this.searchbar.disable(); } } @@ -225,8 +229,7 @@ class SearchView extends Component { const touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0]; out.x = touch.pageX; out.y = touch.pageY; - } else - if ( e.type == 'mousedown' || e.type == 'mouseup' ) { + } else if ( e.type == 'mousedown' || e.type == 'mouseup' ) { out.x = e.pageX; out.y = e.pageY; } @@ -252,9 +255,7 @@ class SearchView extends Component { const searchQuery = this.state.searchQuery; const replaceQuery = this.state.replaceQuery; const isIos = Device.ios; - - // const _t = this.t('View.Settings', {returnObjects: true}); - // console.log(this.state.searchQuery, this.state.replaceQuery); + const { _t } = this.props; if(this.searchbar && this.searchbar.enabled) { usereplace ? this.searchbar.el.classList.add('replace') : this.searchbar.el.classList.remove('replace'); @@ -271,13 +272,13 @@ class SearchView extends Component {
- {this.changeSearchQuery(e.target.value)}} /> {isIos ? : null}
- {this.changeReplaceQuery(e.target.value)}} /> {isIos ? : null} @@ -285,8 +286,8 @@ class SearchView extends Component {
this.onSearchClick(SEARCH_BACKWARD)}> @@ -303,4 +304,4 @@ class SearchView extends Component { } } -export {SearchView as default, SearchView, SearchSettingsView}; \ No newline at end of file +export {SearchView, SearchSettingsView}; \ No newline at end of file diff --git a/apps/spreadsheeteditor/mobile/src/controller/Search.jsx b/apps/spreadsheeteditor/mobile/src/controller/Search.jsx index 52ec2cb8c..c5da9a6b1 100644 --- a/apps/spreadsheeteditor/mobile/src/controller/Search.jsx +++ b/apps/spreadsheeteditor/mobile/src/controller/Search.jsx @@ -1,22 +1,15 @@ -import React, { Fragment } from 'react'; -import { List, ListItem, Toggle, BlockTitle } from 'framework7-react'; +import React, { Fragment, useEffect } from 'react'; +import { List, ListItem, Toggle, BlockTitle, Navbar, NavRight, Link, Page } from 'framework7-react'; import { SearchController, SearchView, SearchSettingsView } from '../../../../common/mobile/lib/controller/Search'; import { f7 } from 'framework7-react'; -import { useTranslation, withTranslation } from 'react-i18next'; +import { withTranslation } from 'react-i18next'; import { Dom7 } from 'framework7'; +import { Device } from '../../../../common/mobile/utils/device'; class SearchSettings extends SearchSettingsView { constructor(props) { super(props); - // this.state = { - // searchIn: 0, - // searchBy: 1, - // lookIn: 1, - // isMatchCase: false, - // isMatchCell: false - // } - this.onToggleMarkResults = this.onToggleMarkResults.bind(this); } @@ -27,52 +20,66 @@ class SearchSettings extends SearchSettingsView { extraSearchOptions() { const anc_markup = super.extraSearchOptions(); + const show_popover = !Device.phone; + const { t } = this.props; + const _t = t("View.Settings", { returnObjects: true }); const markup = ( - - Search In + + + {!show_popover && + + {_t.textDone} + + } + - this.setState({ + this.onFindReplaceClick('find')} /> + this.onFindReplaceClick('replace')} /> + + {_t.textSearchIn} + + this.setState({ searchIn: 0 })} /> - this.setState({ + this.setState({ searchIn: 1 })} /> - Search + {_t.textSearchBy} - this.setState({ + this.setState({ searchBy: 0 })} /> - this.setState({ + this.setState({ searchBy: 1 })} /> - Look In + {_t.textLookIn} - this.setState({ + this.setState({ lookIn: 0 })} /> - this.setState({ + this.setState({ lookIn: 1 })} /> - + this.setState({ isMatchCase: !this.state.isMatchCase })} /> - + this.setState({ isMatchCell: !this.state.isMatchCell })} /> - + - + ) return {...anc_markup, ...markup}; @@ -80,6 +87,10 @@ class SearchSettings extends SearchSettingsView { } class SESearchView extends SearchView { + constructor(props) { + super(props); + } + searchParams() { let params = super.searchParams(); const $$ = Dom7; @@ -114,12 +125,13 @@ class SESearchView extends SearchView { } } -const Search = props => { - // const { t } = useTranslation(); - // const _t = t('View.Settings', {returnObjects: true}); +const Search = withTranslation()(props => { + const { t } = props; + const _t = t('View.Settings', {returnObjects: true}); const onSearchQuery = params => { const api = Common.EditorApi.get(); + let lookIn = +params.lookIn === 0; let searchIn = +params.searchIn === 1; let searchBy = +params.searchBy === 0; @@ -136,7 +148,7 @@ const Search = props => { options.asc_setLookIn(lookIn ? Asc.c_oAscFindLookIn.Formulas : Asc.c_oAscFindLookIn.Value); if (!api.asc_findText(options)) { - f7.dialog.alert(null, 'Text not Found'); + f7.dialog.alert(null, _t.textNoTextFound); } } }; @@ -189,7 +201,9 @@ const Search = props => { } } - return -}; + return +}); -export {Search, SearchSettings} \ No newline at end of file +const SearchSettingsWithTranslation = withTranslation()(SearchSettings); + +export {Search, SearchSettingsWithTranslation as SearchSettings} \ No newline at end of file diff --git a/apps/spreadsheeteditor/mobile/src/page/main.jsx b/apps/spreadsheeteditor/mobile/src/page/main.jsx index 94680f9f4..1ccf46b6b 100644 --- a/apps/spreadsheeteditor/mobile/src/page/main.jsx +++ b/apps/spreadsheeteditor/mobile/src/page/main.jsx @@ -73,12 +73,12 @@ export default class MainPage extends Component { this.handleClickToOpenOptions('coauth')}> this.handleClickToOpenOptions('settings')}> - + this.handleClickToOpenOptions('add', {panels: panels, button: button})}/> {/* Page content */} - + { !this.state.editOptionsVisible ? null : From 0fa56cd60b2ef3037a0c92ed08ff962ec8109886 Mon Sep 17 00:00:00 2001 From: SergeyEzhin Date: Mon, 15 Mar 2021 16:39:45 +0300 Subject: [PATCH 27/27] [SSE mobile] Corrected stores according to mobx v. 6 --- apps/common/mobile/lib/view/Search.jsx | 6 +- .../mobile/src/store/appOptions.js | 15 ++++- .../mobile/src/store/applicationSettings.js | 41 +++++++------ .../mobile/src/store/cellSettings.js | 58 +++++++++--------- .../mobile/src/store/chartSettings.js | 37 ++++++++---- .../mobile/src/store/focusObjects.js | 36 +++++++---- .../mobile/src/store/functions.js | 14 ++++- .../mobile/src/store/palette.js | 13 +++- .../mobile/src/store/shapeSettings.js | 20 +++++-- .../mobile/src/store/sheets.js | 18 ++++-- .../mobile/src/store/spreadsheetInfo.js | 14 +++-- .../mobile/src/store/spreadsheetSettings.js | 42 +++++++++---- .../mobile/src/store/textSettings.js | 59 +++++++++++++------ 13 files changed, 245 insertions(+), 128 deletions(-) diff --git a/apps/common/mobile/lib/view/Search.jsx b/apps/common/mobile/lib/view/Search.jsx index 225e8f175..fbc0f9665 100644 --- a/apps/common/mobile/lib/view/Search.jsx +++ b/apps/common/mobile/lib/view/Search.jsx @@ -74,7 +74,7 @@ class SearchSettingsView extends Component { } } -@observer +// @observer class SearchView extends Component { constructor(props) { super(props); @@ -304,4 +304,6 @@ class SearchView extends Component { } } -export {SearchView, SearchSettingsView}; \ No newline at end of file +const SearchViewWithObserver = observer(SearchView); + +export {SearchViewWithObserver as SearchView, SearchSettingsView}; \ No newline at end of file diff --git a/apps/spreadsheeteditor/mobile/src/store/appOptions.js b/apps/spreadsheeteditor/mobile/src/store/appOptions.js index 16cb50352..70d85c02d 100644 --- a/apps/spreadsheeteditor/mobile/src/store/appOptions.js +++ b/apps/spreadsheeteditor/mobile/src/store/appOptions.js @@ -1,8 +1,16 @@ -import {action, observable} from 'mobx'; +import {action, observable, makeObservable} from 'mobx'; export class storeAppOptions { + constructor() { + makeObservable(this, { + setConfigOptions: action, + setPermissionOptions: action + }); + } + config = {}; - @action setConfigOptions (config) { + + setConfigOptions (config) { this.config = config; this.user = Common.Utils.fillUserInfo(config.user, config.lang, "Local.User"/*me.textAnonymous*/); this.isDesktopApp = config.targetApp == 'desktop'; @@ -27,7 +35,8 @@ export class storeAppOptions { this.canBack = this.canBackToFolder === true; this.canPlugins = false; } - @action setPermissionOptions (document, licType, params, permissions) { + + setPermissionOptions (document, licType, params, permissions) { permissions.edit = params.asc_getRights() !== Asc.c_oRights.Edit ? false : true; this.canAutosave = true; this.canAnalytics = params.asc_getIsAnalyticsEnable(); diff --git a/apps/spreadsheeteditor/mobile/src/store/applicationSettings.js b/apps/spreadsheeteditor/mobile/src/store/applicationSettings.js index ac459aa5a..faea20f77 100644 --- a/apps/spreadsheeteditor/mobile/src/store/applicationSettings.js +++ b/apps/spreadsheeteditor/mobile/src/store/applicationSettings.js @@ -3,27 +3,26 @@ import {makeObservable, action, observable} from 'mobx'; export class storeApplicationSettings { constructor() { makeObservable(this, { - unitMeasurement: observable - , macrosMode: observable - , formulaLang: observable - , regCode: observable - , regExample: observable - , regData: observable - , isRefStyle: observable - , isComments: observable - , isResolvedComments: observable - , initRegData: action - , getRegCode: action - , changeRegCode: action - , setRegExample: action - , changeUnitMeasurement: action - , changeMacrosSettings: action - , changeDisplayComments: action - , changeDisplayResolved: action - , changeRefStyle: action - , changeFormulaLang: action - - }) + unitMeasurement: observable, + macrosMode: observable, + formulaLang: observable, + regCode: observable, + regExample: observable, + regData: observable, + isRefStyle: observable, + isComments: observable, + isResolvedComments: observable, + initRegData: action, + getRegCode: action, + changeRegCode: action, + setRegExample: action, + changeUnitMeasurement: action, + changeMacrosSettings: action, + changeDisplayComments: action, + changeDisplayResolved: action, + changeRefStyle: action, + changeFormulaLang: action + }); } unitMeasurement = Common.Utils.Metric.getCurrentMetric(); diff --git a/apps/spreadsheeteditor/mobile/src/store/cellSettings.js b/apps/spreadsheeteditor/mobile/src/store/cellSettings.js index 2ee0fbe9f..f4b7e4e81 100644 --- a/apps/spreadsheeteditor/mobile/src/store/cellSettings.js +++ b/apps/spreadsheeteditor/mobile/src/store/cellSettings.js @@ -3,35 +3,35 @@ import {makeObservable, action, observable, computed} from 'mobx'; export class storeCellSettings { constructor() { makeObservable(this, { - styleSize: observable - , borderInfo: observable - , borderStyle: observable - , cellStyles: observable - , fontsArray: observable - , fontInfo: observable - , fillColor: observable - , fontColor: observable - , styleName: observable - , isBold: observable - , isItalic: observable - , isUnderline: observable - , hAlignStr: observable - , vAlignStr: observable - , isWrapText: observable - , orientationStr: observable - , initCellSettings: action - , initTextFormat: action - , initTextOrientation: action - , initFontSettings: action - , initEditorFonts: action - , initCellStyles: action - , initFontInfo: action - , changeFontColor: action - , changeFillColor: action - , changeBorderColor: action - , changeBorderSize: action - , changeBorderStyle: action - }) + styleSize: observable, + borderInfo: observable, + borderStyle: observable, + cellStyles: observable, + fontsArray: observable, + fontInfo: observable, + fillColor: observable, + fontColor: observable, + styleName: observable, + isBold: observable, + isItalic: observable, + isUnderline: observable, + hAlignStr: observable, + vAlignStr: observable, + isWrapText: observable, + orientationStr: observable, + initCellSettings: action, + initTextFormat: action, + initTextOrientation: action, + initFontSettings: action, + initEditorFonts: action, + initCellStyles: action, + initFontInfo: action, + changeFontColor: action, + changeFillColor: action, + changeBorderColor: action, + changeBorderSize: action, + changeBorderStyle: action + }); } styleSize = { diff --git a/apps/spreadsheeteditor/mobile/src/store/chartSettings.js b/apps/spreadsheeteditor/mobile/src/store/chartSettings.js index 40db02f77..3d1ea1dbb 100644 --- a/apps/spreadsheeteditor/mobile/src/store/chartSettings.js +++ b/apps/spreadsheeteditor/mobile/src/store/chartSettings.js @@ -1,25 +1,40 @@ -import {action, observable, computed} from 'mobx'; +import {action, observable, computed, makeObservable} from 'mobx'; export class storeChartSettings { - - @observable borderColor = undefined; + constructor() { + makeObservable(this, { + borderColor: observable, + fillColor: observable, + chartStyles: observable, + setBorderColor: action, + initBorderColor: action, + setFillColor: action, + getFillColor: action, + clearChartStyles: action, + updateChartStyles: action, + styles: computed, + types: computed, + }); + } + + borderColor = undefined; setBorderColor (color) { this.borderColor = color; } - @action initBorderColor(shapeProperties) { + initBorderColor(shapeProperties) { let stroke = shapeProperties.get_stroke(); this.borderColor = (stroke && stroke.get_type() == Asc.c_oAscStrokeType.STROKE_COLOR) ? this.resetColor(stroke.get_color()) : 'transparent'; } - @observable fillColor = undefined; + fillColor = undefined; setFillColor (color) { this.fillColor = color; } - @action getFillColor (shapeProperties) { + getFillColor (shapeProperties) { const fill = shapeProperties.asc_getFill(); const fillType = fill.asc_getType(); @@ -30,17 +45,17 @@ export class storeChartSettings { return this.fillColor; } - @observable chartStyles = null; + chartStyles = null; - @action clearChartStyles () { + clearChartStyles () { this.chartStyles = null; } - @action updateChartStyles (styles) { + updateChartStyles (styles) { this.chartStyles = styles; } - @computed get styles () { + get styles () { if (!this.chartStyles) return null; const widthContainer = document.querySelector(".page-content").clientWidth; const columns = parseInt(widthContainer / 70); // magic @@ -58,7 +73,7 @@ export class storeChartSettings { return styles; } - @computed get types () { + get types () { const _types = [ { type: Asc.c_oAscChartTypeSettings.barNormal, thumb: 'bar-normal'}, { type: Asc.c_oAscChartTypeSettings.barStacked, thumb: 'bar-stacked'}, diff --git a/apps/spreadsheeteditor/mobile/src/store/focusObjects.js b/apps/spreadsheeteditor/mobile/src/store/focusObjects.js index 6addcb154..a5d710292 100644 --- a/apps/spreadsheeteditor/mobile/src/store/focusObjects.js +++ b/apps/spreadsheeteditor/mobile/src/store/focusObjects.js @@ -1,16 +1,30 @@ -import {action, observable, computed} from 'mobx'; +import {action, observable, computed, makeObservable} from 'mobx'; export class storeFocusObjects { - @observable focusOn = undefined; + constructor() { + makeObservable(this, { + focusOn: observable, + _focusObjects: observable, + _cellInfo: observable, + resetFocusObjects: action, + objects: computed, + resetCellInfo: action, + selections: computed, + shapeObject: computed, + imageObject: computed, + chartObject: computed + }); + } - @observable _focusObjects = []; + focusOn = undefined; + _focusObjects = []; - @action resetFocusObjects(objects) { + resetFocusObjects(objects) { this.focusOn = 'obj'; this._focusObjects = objects; } - @computed get objects() { + get objects() { const _objects = []; for (let object of this._focusObjects) { const type = object.get_ObjectType(); @@ -39,14 +53,14 @@ export class storeFocusObjects { return resultArr; } - @observable _cellInfo; + _cellInfo; - @action resetCellInfo (cellInfo) { + resetCellInfo (cellInfo) { this.focusOn = 'cell'; this._cellInfo = cellInfo; } - @computed get selections () { + get selections () { const _selections = []; let isCell, isRow, isCol, isAll, isChart, isImage, isTextShape, isShape, isTextChart, @@ -134,7 +148,7 @@ export class storeFocusObjects { return _selections; } - @computed get shapeObject() { + get shapeObject() { const shapes = []; for (let object of this._focusObjects) { if (object.get_ObjectType() === Asc.c_oAscTypeSelectElement.Image) { @@ -151,7 +165,7 @@ export class storeFocusObjects { } } - @computed get imageObject() { + get imageObject() { const images = []; for (let object of this._focusObjects) { if (object.get_ObjectType() === Asc.c_oAscTypeSelectElement.Image) { @@ -166,7 +180,7 @@ export class storeFocusObjects { } } - @computed get chartObject() { + get chartObject() { const charts = []; for (let object of this._focusObjects) { if (object.get_ObjectType() === Asc.c_oAscTypeSelectElement.Image) { diff --git a/apps/spreadsheeteditor/mobile/src/store/functions.js b/apps/spreadsheeteditor/mobile/src/store/functions.js index b719d5583..7c5b90a6d 100644 --- a/apps/spreadsheeteditor/mobile/src/store/functions.js +++ b/apps/spreadsheeteditor/mobile/src/store/functions.js @@ -1,11 +1,19 @@ -import {action, computed} from 'mobx'; +import {action, computed, makeObservable} from 'mobx'; export class storeFunctions { - @action initFunctions (groups, data) { + constructor() { + makeObservable(this, { + initFunctions: action, + functions: computed + }); + } + + initFunctions (groups, data) { this.groups = groups; this.data = data; } - @computed get functions () { + + get functions () { const groups = this.groups; const data = this.data; const functions = {}; diff --git a/apps/spreadsheeteditor/mobile/src/store/palette.js b/apps/spreadsheeteditor/mobile/src/store/palette.js index 01ec9aa24..0633a3140 100644 --- a/apps/spreadsheeteditor/mobile/src/store/palette.js +++ b/apps/spreadsheeteditor/mobile/src/store/palette.js @@ -1,9 +1,16 @@ -import {action, observable} from 'mobx'; +import {action, makeObservable, observable} from 'mobx'; export class storePalette { - @observable customColors = []; + constructor() { + makeObservable(this, { + customColors: observable, + changeCustomColors: action + }); + } + + customColors = []; - @action changeCustomColors (colors) { + changeCustomColors (colors) { this.customColors = colors; } } \ No newline at end of file diff --git a/apps/spreadsheeteditor/mobile/src/store/shapeSettings.js b/apps/spreadsheeteditor/mobile/src/store/shapeSettings.js index 7a4ea1929..f9cdad438 100644 --- a/apps/spreadsheeteditor/mobile/src/store/shapeSettings.js +++ b/apps/spreadsheeteditor/mobile/src/store/shapeSettings.js @@ -1,6 +1,16 @@ -import {action, observable, computed} from 'mobx'; +import {action, observable, computed, makeObservable} from 'mobx'; export class storeShapeSettings { + constructor() { + makeObservable(this, { + fillColor: observable, + borderColorView: observable, + setFillColor: action, + getFillColor: action, + setBorderColor: action, + initBorderColorView: action + }); + } getStyleGroups () { const styles = [ @@ -125,8 +135,10 @@ export class storeShapeSettings { type: 'cloudCallout' } ]; + const groups = []; let i = 0; + for (let row=0; row { if ( model.active ) diff --git a/apps/spreadsheeteditor/mobile/src/store/spreadsheetInfo.js b/apps/spreadsheeteditor/mobile/src/store/spreadsheetInfo.js index c1c4b27f6..406bda2ec 100644 --- a/apps/spreadsheeteditor/mobile/src/store/spreadsheetInfo.js +++ b/apps/spreadsheeteditor/mobile/src/store/spreadsheetInfo.js @@ -1,10 +1,16 @@ -import {action, observable, computed} from 'mobx'; +import {action, observable, makeObservable} from 'mobx'; export class storeSpreadsheetInfo { - - @observable dataDoc; + constructor() { + makeObservable(this, { + dataDoc: observable, + setDataDoc: action + }) + } + + dataDoc; - @action setDataDoc(obj) { + setDataDoc(obj) { this.dataDoc = obj; } } \ No newline at end of file diff --git a/apps/spreadsheeteditor/mobile/src/store/spreadsheetSettings.js b/apps/spreadsheeteditor/mobile/src/store/spreadsheetSettings.js index f466f3c6d..9d2757b44 100644 --- a/apps/spreadsheeteditor/mobile/src/store/spreadsheetSettings.js +++ b/apps/spreadsheeteditor/mobile/src/store/spreadsheetSettings.js @@ -1,19 +1,35 @@ -import {action, observable, computed} from 'mobx'; +import {action, observable, computed, makeObservable} from 'mobx'; export class storeSpreadsheetSettings { + constructor() { + makeObservable(this, { + isPortrait: observable, + widthDocument: observable, + heightDocument: observable, + allSchemes: observable, + isHideHeadings: observable, + isHideGridlines: observable, + resetPortrait: action, + changeDocSize: action, + pageSizesIndex: computed, + addSchemes: action, + changeHideHeadings: action, + changeHideGridlines: action + }) + } - @observable isPortrait = true; + isPortrait = true; - @action resetPortrait (isPortrait) { + resetPortrait (isPortrait) { this.isPortrait = isPortrait === true; } // Spreadsheet Formats - @observable widthDocument; - @observable heightDocument; + widthDocument; + heightDocument; - @action changeDocSize (width, height) { + changeDocSize (width, height) { this.widthDocument = width; this.heightDocument = height; } @@ -43,7 +59,7 @@ export class storeSpreadsheetSettings { return pageSizes; } - @computed get pageSizesIndex () { + get pageSizesIndex () { let w = this.widthDocument; let h = this.heightDocument; let ind; @@ -60,20 +76,20 @@ export class storeSpreadsheetSettings { // Color Schemes - @observable allSchemes; + allSchemes; - @action addSchemes(arr) { + addSchemes(arr) { this.allSchemes = arr; } - @observable isHideHeadings; - @observable isHideGridlines; + isHideHeadings; + isHideGridlines; - @action changeHideHeadings(value) { + changeHideHeadings(value) { this.isHideHeadings = value; } - @action changeHideGridlines(value) { + changeHideGridlines(value) { this.isHideGridlines = value; } diff --git a/apps/spreadsheeteditor/mobile/src/store/textSettings.js b/apps/spreadsheeteditor/mobile/src/store/textSettings.js index 674239912..38dc619da 100644 --- a/apps/spreadsheeteditor/mobile/src/store/textSettings.js +++ b/apps/spreadsheeteditor/mobile/src/store/textSettings.js @@ -1,21 +1,42 @@ -import {action, observable, computed} from 'mobx'; +import {action, observable, makeObservable, computed} from 'mobx'; export class storeTextSettings { + constructor() { + makeObservable(this, { + fontsArray: observable, + fontInfo: observable, + fontName: observable, + fontSize: observable, + isBold: observable, + isItalic: observable, + isUnderline: observable, + textColor: observable, + customTextColors: observable, + paragraphAlign: observable, + paragraphValign: observable, + textIn: observable, + initTextSettings: action, + initEditorFonts: action, + initFontInfo: action, + changeTextColor: action, + changeCustomTextColors: action + }); + } + + fontsArray = []; + fontInfo = {}; + fontName = ''; + fontSize = undefined; + isBold = false; + isItalic = false; + isUnderline = false; + textColor = undefined; + customTextColors = []; + paragraphAlign = undefined; + paragraphValign = undefined; + textIn = undefined; - @observable fontsArray = []; - @observable fontInfo = {}; - @observable fontName = ''; - @observable fontSize = undefined; - @observable isBold = false; - @observable isItalic = false; - @observable isUnderline = false; - @observable textColor = undefined; - @observable customTextColors = []; - @observable paragraphAlign = undefined; - @observable paragraphValign = undefined; - @observable textIn = undefined; - - @action initTextSettings(cellInfo) { + initTextSettings(cellInfo) { let xfs = cellInfo.asc_getXfs(); let selectType = cellInfo.asc_getSelectionType(); @@ -40,7 +61,7 @@ export class storeTextSettings { this.paragraphValign = xfs.asc_getVertAlign(); } - @action initEditorFonts (fonts, select) { + initEditorFonts (fonts, select) { let array = []; for (let font of fonts) { let fontId = font.asc_getFontId(); @@ -56,11 +77,11 @@ export class storeTextSettings { this.fontsArray = array; } - @action initFontInfo(fontObj) { + initFontInfo(fontObj) { this.fontInfo = fontObj; } - @action changeTextColor(value) { + changeTextColor(value) { this.textColor = value; } @@ -85,7 +106,7 @@ export class storeTextSettings { return value; } - @action changeCustomTextColors (colors) { + changeCustomTextColors (colors) { this.customTextColors = colors; } } \ No newline at end of file