From 717bc848048d67f5f9b389925d1ba6428acdcf3f Mon Sep 17 00:00:00 2001 From: JuliaSvinareva Date: Tue, 12 Jan 2021 16:29:56 +0300 Subject: [PATCH 01/10] [common mobile] Fixed theme color palette --- apps/common/mobile/lib/component/ThemeColorPalette.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/common/mobile/lib/component/ThemeColorPalette.jsx b/apps/common/mobile/lib/component/ThemeColorPalette.jsx index 8b6f4548a..e9d73ea7f 100644 --- a/apps/common/mobile/lib/component/ThemeColorPalette.jsx +++ b/apps/common/mobile/lib/component/ThemeColorPalette.jsx @@ -13,7 +13,7 @@ const ThemeColors = ({ themeColors, onColorClick, curColor }) => { {onColorClick(effect.color, effect.effectId)}} + onClick={() => {onColorClick(effect.color, effect.effectId, effect.effectValue)}} > ) })} From c2ef4ad5ff1ec480145130735f83abd78292fde8 Mon Sep 17 00:00:00 2001 From: JuliaSvinareva Date: Tue, 12 Jan 2021 16:30:50 +0300 Subject: [PATCH 02/10] [common mobile] Fixed color-preview styles for ios --- apps/common/mobile/resources/less/common-ios.less | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/apps/common/mobile/resources/less/common-ios.less b/apps/common/mobile/resources/less/common-ios.less index bb1dad5ee..325b67602 100644 --- a/apps/common/mobile/resources/less/common-ios.less +++ b/apps/common/mobile/resources/less/common-ios.less @@ -172,6 +172,13 @@ background-color: @autoColor; } } + .item-after { + .color-preview { + width: 75px; + height: 30px; + margin-top: -3px; + } + } } li.no-indicator { .item-link { From 0c74ef648ab148da36fa78d73e4f0c2fb7565831 Mon Sep 17 00:00:00 2001 From: JuliaSvinareva Date: Tue, 12 Jan 2021 16:42:00 +0300 Subject: [PATCH 03/10] [DE mobile] Added background color into edit paragraph settings --- apps/documenteditor/mobile/locale/en.json | 3 +- .../src/controller/edit/EditParagraph.jsx | 20 ++++- .../mobile/src/store/paragraphSettings.js | 24 ++++++ .../mobile/src/view/edit/Edit.jsx | 12 ++- .../mobile/src/view/edit/EditParagraph.jsx | 82 +++++++++++++++++-- 5 files changed, 130 insertions(+), 11 deletions(-) diff --git a/apps/documenteditor/mobile/locale/en.json b/apps/documenteditor/mobile/locale/en.json index 82355eea9..2f0c058a2 100644 --- a/apps/documenteditor/mobile/locale/en.json +++ b/apps/documenteditor/mobile/locale/en.json @@ -175,7 +175,8 @@ "textFontColors": "Font Colors", "textAutomatic": "Automatic", "textAddCustomColor": "Add Custom Color", - "textCustomColor": "Custom Color" + "textCustomColor": "Custom Color", + "textBackground": "Background" }, "Add": { "textTable": "Table", diff --git a/apps/documenteditor/mobile/src/controller/edit/EditParagraph.jsx b/apps/documenteditor/mobile/src/controller/edit/EditParagraph.jsx index a41b624c8..0ecbe0bfa 100644 --- a/apps/documenteditor/mobile/src/controller/edit/EditParagraph.jsx +++ b/apps/documenteditor/mobile/src/controller/edit/EditParagraph.jsx @@ -1,9 +1,11 @@ import React, {Component} from 'react'; -import { EditParagraph } from '../../view/edit/EditParagraph' +import { EditParagraph } from '../../view/edit/EditParagraph'; +import {observer, inject} from "mobx-react"; class EditParagraphController extends Component { constructor (props) { super(props); + props.storeParagraphSettings.setBackColor(undefined); } onStyleClick (name) { @@ -129,6 +131,19 @@ class EditParagraphController extends Component { } } + onBackgroundColor (color) { + const api = Common.EditorApi.get(); + const properties = new Asc.asc_CParagraphProperty(); + properties.put_Shade(new Asc.asc_CParagraphShd()); + if (color == 'transparent') { + properties.get_Shade().put_Value(Asc.c_oAscShdNil); + } else { + properties.get_Shade().put_Value(Asc.c_oAscShdClear); + properties.get_Shade().put_Color(Common.Utils.ThemeColor.getRgbColor(color)); + } + api.paraApply(properties); + } + render () { return ( ) } } -export default EditParagraphController; \ No newline at end of file +export default inject("storeParagraphSettings")(observer(EditParagraphController)); \ No newline at end of file diff --git a/apps/documenteditor/mobile/src/store/paragraphSettings.js b/apps/documenteditor/mobile/src/store/paragraphSettings.js index 618f15996..70c465092 100644 --- a/apps/documenteditor/mobile/src/store/paragraphSettings.js +++ b/apps/documenteditor/mobile/src/store/paragraphSettings.js @@ -25,4 +25,28 @@ export class storeParagraphSettings { @action changeParaStyleName (name) { this.styleName = name; } + + @observable backColor = undefined; + setBackColor (color) { + this.backColor = color; + } + getBackgroundColor (paragraphObject) { + const shade = paragraphObject.get_Shade(); + let backColor = 'transparent'; + if (!!shade && shade.get_Value() === Asc.c_oAscShdClear) { + const color = shade.get_Color(); + if (color) { + if (color.get_type() == Asc.c_oAscColor.COLOR_TYPE_SCHEME) { + backColor = { + color: Common.Utils.ThemeColor.getHexColor(color.get_r(), color.get_g(), color.get_b()), + effectValue: color.get_value() + }; + } else { + backColor = Common.Utils.ThemeColor.getHexColor(color.get_r(), color.get_g(), color.get_b()); + } + } + } + this.backColor = backColor; + return backColor; + } } \ No newline at end of file diff --git a/apps/documenteditor/mobile/src/view/edit/Edit.jsx b/apps/documenteditor/mobile/src/view/edit/Edit.jsx index a9c47e248..547517d53 100644 --- a/apps/documenteditor/mobile/src/view/edit/Edit.jsx +++ b/apps/documenteditor/mobile/src/view/edit/Edit.jsx @@ -15,7 +15,7 @@ import EditHyperlinkController from "../../controller/edit/EditHyperlink"; import EditHeaderController from "../../controller/edit/EditHeader"; import {PageTextFonts, PageTextAddFormatting, PageTextBullets, PageTextNumbers, PageTextLineSpacing, PageTextFontColor, PageTextCustomFontColor, PageTextBackgroundColor, PageTextCustomBackColor} from "./EditText"; -import {PageAdvancedSettings} from "./EditParagraph"; +import {ParagraphAdvSettings, PageParagraphBackColor, PageParagraphCustomColor} from "./EditParagraph"; import {PageWrap, PageReorder, PageReplace} from "./EditShape"; import {PageImageReorder, PageImageReplace, PageImageWrap, PageLinkSettings} from "./EditImage"; import {PageTableOptions, PageTableWrap, PageTableStyle} from "./EditTable"; @@ -62,7 +62,15 @@ const routes = [ //Edit paragraph { path: '/edit-paragraph-adv/', - component: PageAdvancedSettings, + component: ParagraphAdvSettings, + }, + { + path: '/edit-paragraph-back-color/', + component: PageParagraphBackColor, + }, + { + path: '/edit-paragraph-custom-color/', + component: PageParagraphCustomColor, }, //Edit shape { diff --git a/apps/documenteditor/mobile/src/view/edit/EditParagraph.jsx b/apps/documenteditor/mobile/src/view/edit/EditParagraph.jsx index 2bcc9ddbf..bd1d8c762 100644 --- a/apps/documenteditor/mobile/src/view/edit/EditParagraph.jsx +++ b/apps/documenteditor/mobile/src/view/edit/EditParagraph.jsx @@ -3,6 +3,7 @@ import {observer, inject} from "mobx-react"; import {List, ListItem, Icon, Button, Page, Navbar, Segmented, BlockTitle, 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'; const PageAdvancedSettings = props => { const isAndroid = Device.android; @@ -99,21 +100,86 @@ const PageAdvancedSettings = props => { ) }; +const PageCustomBackColor = props => { + const { t } = useTranslation(); + const _t = t('Edit', {returnObjects: true}); + let backgroundColor = props.storeParagraphSettings.backColor; + if (typeof backgroundColor === 'object') { + backgroundColor = backgroundColor.color; + } + const onAddNewColor = (colors, color) => { + props.storePalette.changeCustomColors(colors); + props.onBackgroundColor(color); + props.storeParagraphSettings.setBackColor(color); + props.f7router.back(); + }; + return( + + + + + ) +}; + +const PageBackgroundColor = props => { + const { t } = useTranslation(); + const _t = t('Edit', {returnObjects: true}); + const backgroundColor = props.storeParagraphSettings.backColor; + 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.onBackgroundColor(newColor); + props.storeParagraphSettings.setBackColor(newColor); + } else { + props.onBackgroundColor(color); + props.storeParagraphSettings.setBackColor(color); + } + } else { + // open custom color menu + props.f7router.navigate('/edit-paragraph-custom-color/'); + } + }; + return( + + + + + + + + ) +}; + const EditParagraph = props => { const { t } = useTranslation(); + const _t = t('Edit', {returnObjects: true}); const storeParagraphSettings = props.storeParagraphSettings; const paragraphStyles = storeParagraphSettings.paragraphStyles; const curStyleName = storeParagraphSettings.styleName; const thumbSize = storeParagraphSettings.styleThumbSize; + + const paragraph = props.storeFocusObjects.paragraphObject; + const curBackColor = storeParagraphSettings.backColor ? storeParagraphSettings.backColor : storeParagraphSettings.getBackgroundColor(paragraph); + const background = curBackColor !== 'transparent' ? `#${(typeof curBackColor === "object" ? curBackColor.color : curBackColor)}` : curBackColor; + return ( - - + + - { onKeepNext: props.onKeepNext }}> - {t('Edit.textParagraphStyles')} + {_t.textParagraphStyles} {paragraphStyles.map((style, index) => ( { }; const EditParagraphContainer = inject("storeParagraphSettings", "storeFocusObjects")(observer(EditParagraph)); -const AdvSettingsContainer = inject("storeParagraphSettings", "storeFocusObjects")(observer(PageAdvancedSettings)); +const ParagraphAdvSettings = inject("storeParagraphSettings", "storeFocusObjects")(observer(PageAdvancedSettings)); +const PageParagraphBackColor = inject("storeParagraphSettings", "storePalette")(observer(PageBackgroundColor)); +const PageParagraphCustomColor = inject("storeParagraphSettings", "storePalette")(observer(PageCustomBackColor)); export {EditParagraphContainer as EditParagraph, - AdvSettingsContainer as PageAdvancedSettings}; \ No newline at end of file + ParagraphAdvSettings, + PageParagraphBackColor, + PageParagraphCustomColor}; \ No newline at end of file From d089a266b0e1cddde1c2203aaae6d15f1762b65a Mon Sep 17 00:00:00 2001 From: JuliaSvinareva Date: Tue, 12 Jan 2021 16:43:56 +0300 Subject: [PATCH 04/10] [common mobile] Fixed init transparent color into CustomColorPicker component --- apps/common/mobile/lib/component/ThemeColorPalette.jsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/apps/common/mobile/lib/component/ThemeColorPalette.jsx b/apps/common/mobile/lib/component/ThemeColorPalette.jsx index e9d73ea7f..31eeb3d09 100644 --- a/apps/common/mobile/lib/component/ThemeColorPalette.jsx +++ b/apps/common/mobile/lib/component/ThemeColorPalette.jsx @@ -139,6 +139,9 @@ const CustomColorPicker = props => { if (props.autoColor) { currentColor = rgb2hex(props.autoColor); } + if (currentColor === 'transparent') { + currentColor = 'ffffff'; + } const countDynamicColors = props.countdynamiccolors || 10; const [stateColor, setColor] = useState(`#${currentColor}`); useEffect(() => { From eb5b8e7973f5d58e5dbee1ee01d17e6924834600 Mon Sep 17 00:00:00 2001 From: JuliaSvinareva Date: Tue, 12 Jan 2021 20:19:16 +0300 Subject: [PATCH 05/10] [common mobile] Added check for existence of current color into Custom color component --- apps/common/mobile/lib/component/ThemeColorPalette.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/common/mobile/lib/component/ThemeColorPalette.jsx b/apps/common/mobile/lib/component/ThemeColorPalette.jsx index 31eeb3d09..e16403d72 100644 --- a/apps/common/mobile/lib/component/ThemeColorPalette.jsx +++ b/apps/common/mobile/lib/component/ThemeColorPalette.jsx @@ -139,7 +139,7 @@ const CustomColorPicker = props => { if (props.autoColor) { currentColor = rgb2hex(props.autoColor); } - if (currentColor === 'transparent') { + if (currentColor === 'transparent' || !currentColor) { currentColor = 'ffffff'; } const countDynamicColors = props.countdynamiccolors || 10; From e00ef7022e712dea42b260a2c1ad4c2ea55ed9b6 Mon Sep 17 00:00:00 2001 From: JuliaSvinareva Date: Tue, 12 Jan 2021 20:19:54 +0300 Subject: [PATCH 06/10] [common mobile] Fixed styles --- apps/common/mobile/resources/less/common.less | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/apps/common/mobile/resources/less/common.less b/apps/common/mobile/resources/less/common.less index 03a5de5a5..c3bdbb3e2 100644 --- a/apps/common/mobile/resources/less/common.less +++ b/apps/common/mobile/resources/less/common.less @@ -60,6 +60,12 @@ } } +.page-content { + &.tab { + padding-top: 0; + } +} + .color-palettes { .palette { padding: 8px 0px; From cf14a2d56d67479908093a4d5277a26536a65271 Mon Sep 17 00:00:00 2001 From: JuliaSvinareva Date: Tue, 12 Jan 2021 20:22:16 +0300 Subject: [PATCH 07/10] [DE mobile] Added Fill color page into edit shape settings --- apps/documenteditor/mobile/locale/en.json | 5 +- .../mobile/src/controller/edit/EditShape.jsx | 23 ++++- .../mobile/src/store/shapeSettings.js | 25 ++++++ .../mobile/src/view/edit/Edit.jsx | 10 ++- .../mobile/src/view/edit/EditShape.jsx | 89 +++++++++++++++++-- 5 files changed, 144 insertions(+), 8 deletions(-) diff --git a/apps/documenteditor/mobile/locale/en.json b/apps/documenteditor/mobile/locale/en.json index 2f0c058a2..6343e637d 100644 --- a/apps/documenteditor/mobile/locale/en.json +++ b/apps/documenteditor/mobile/locale/en.json @@ -176,7 +176,10 @@ "textAutomatic": "Automatic", "textAddCustomColor": "Add Custom Color", "textCustomColor": "Custom Color", - "textBackground": "Background" + "textBackground": "Background", + "textFill": "Fill", + "textBorder": "Border", + "textEffects": "Effects" }, "Add": { "textTable": "Table", diff --git a/apps/documenteditor/mobile/src/controller/edit/EditShape.jsx b/apps/documenteditor/mobile/src/controller/edit/EditShape.jsx index c703860f1..5b70601e0 100644 --- a/apps/documenteditor/mobile/src/controller/edit/EditShape.jsx +++ b/apps/documenteditor/mobile/src/controller/edit/EditShape.jsx @@ -9,6 +9,8 @@ class EditShapeController extends Component { constructor (props) { super(props); this.onWrapType = this.onWrapType.bind(this); + + this.props.storeShapeSettings.setFillColor(undefined); } onRemoveShape () { @@ -104,6 +106,24 @@ class EditShapeController extends Component { } } + onFillColor (color) { + const api = Common.EditorApi.get(); + const image = new Asc.asc_CImgProperty(); + const shape = new Asc.asc_CShapeProperty(); + const 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.ImgApply(image); + } + render () { return ( ) } } -export default inject("storeShapeSettings")(observer(EditShapeController)); \ No newline at end of file +export default inject("storeShapeSettings", "storeFocusObjects")(observer(EditShapeController)); \ No newline at end of file diff --git a/apps/documenteditor/mobile/src/store/shapeSettings.js b/apps/documenteditor/mobile/src/store/shapeSettings.js index 3c7635e66..7413bf3be 100644 --- a/apps/documenteditor/mobile/src/store/shapeSettings.js +++ b/apps/documenteditor/mobile/src/store/shapeSettings.js @@ -189,4 +189,29 @@ export class storeShapeSettings { getWrapDistance (shapeObject) { return shapeObject.get_Paddings().get_Top(); } + + // Fill Color + @observable fillColor = undefined; + setFillColor (color) { + this.fillColor = color; + } + getFillColor (shapeObject) { + let fill = shapeObject.get_ShapeProperties().get_fill(); + const fillType = fill.get_type(); + let color = 'transparent'; + if (fillType == Asc.c_oAscFill.FILL_TYPE_SOLID) { + fill = fill.get_fill(); + const sdkColor = fill.get_color(); + if (sdkColor) { + if (sdkColor.get_type() == Asc.c_oAscColor.COLOR_TYPE_SCHEME) { + color = {color: Common.Utils.ThemeColor.getHexColor(sdkColor.get_r(), sdkColor.get_g(), sdkColor.get_b()), effectValue: sdkColor.get_value()}; + } else { + color = Common.Utils.ThemeColor.getHexColor(sdkColor.get_r(), sdkColor.get_g(), sdkColor.get_b()); + } + } + } + this.fillColor = color; + return color; + } + } \ No newline at end of file diff --git a/apps/documenteditor/mobile/src/view/edit/Edit.jsx b/apps/documenteditor/mobile/src/view/edit/Edit.jsx index 547517d53..05df7f5bd 100644 --- a/apps/documenteditor/mobile/src/view/edit/Edit.jsx +++ b/apps/documenteditor/mobile/src/view/edit/Edit.jsx @@ -16,7 +16,7 @@ import EditHeaderController from "../../controller/edit/EditHeader"; import {PageTextFonts, PageTextAddFormatting, PageTextBullets, PageTextNumbers, PageTextLineSpacing, PageTextFontColor, PageTextCustomFontColor, PageTextBackgroundColor, PageTextCustomBackColor} from "./EditText"; import {ParagraphAdvSettings, PageParagraphBackColor, PageParagraphCustomColor} from "./EditParagraph"; -import {PageWrap, PageReorder, PageReplace} from "./EditShape"; +import {PageShapeStyle, PageShapeCustomFillColor, PageWrap, PageReorder, PageReplace} from "./EditShape"; import {PageImageReorder, PageImageReplace, PageImageWrap, PageLinkSettings} from "./EditImage"; import {PageTableOptions, PageTableWrap, PageTableStyle} from "./EditTable"; import {PageChartWrap, PageChartReorder} from "./EditChart"; @@ -73,6 +73,14 @@ const routes = [ component: PageParagraphCustomColor, }, //Edit shape + { + path: '/edit-shape-style/', + component: PageShapeStyle, + }, + { + path: '/edit-shape-custom-fill-color/', + component: PageShapeCustomFillColor, + }, { path: '/edit-shape-wrap/', component: PageWrap, diff --git a/apps/documenteditor/mobile/src/view/edit/EditShape.jsx b/apps/documenteditor/mobile/src/view/edit/EditShape.jsx index 782943f81..2d7f18653 100644 --- a/apps/documenteditor/mobile/src/view/edit/EditShape.jsx +++ b/apps/documenteditor/mobile/src/view/edit/EditShape.jsx @@ -1,13 +1,88 @@ import React, {Fragment, useState} from 'react'; import {observer, inject} from "mobx-react"; -import {List, ListItem, Icon, Row, Page, Navbar, BlockTitle, Toggle, Range, ListButton} from 'framework7-react'; +import {List, ListItem, Icon, Row, Page, Navbar, BlockTitle, Toggle, Range, ListButton, Link, Tabs, Tab} 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('Edit', {returnObjects: true}); + let fillColor = props.storeShapeSettings.fillColor; + if (typeof fillColor === 'object') { + fillColor = fillColor.color; + } + const onAddNewColor = (colors, color) => { + props.storePalette.changeCustomColors(colors); + props.onFillColor(color); + props.storeShapeSettings.setFillColor(color); + props.f7router.back(); + }; + return( + + + + + ) +}; + +const FillTab = inject("storeFocusObjects", "storeShapeSettings", "storePalette")(observer(props => { + const { t } = useTranslation(); + const _t = t('Edit', {returnObjects: true}); + const storeShapeSettings = props.storeShapeSettings; + const shapeObject = props.storeFocusObjects.shapeObject; + const curFillColor = storeShapeSettings.fillColor ? storeShapeSettings.fillColor : storeShapeSettings.getFillColor(shapeObject); + 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); + storeShapeSettings.setFillColor(newColor); + } else { + props.onFillColor(color); + storeShapeSettings.setFillColor(color); + } + } else { + // open custom color menu + props.f7router.navigate('/edit-shape-custom-fill-color/'); + } + }; + return( + + + + + + + ) +})); const PageStyle = props => { + const { t } = useTranslation(); + const _t = t('Edit', {returnObjects: true}); return ( - + +
+ {_t.textFill} + {_t.textBorder} + {_t.textEffects} +
+ + + + + + + border + + + effects + + ) }; @@ -170,7 +245,9 @@ const EditShape = props => { return ( - + { }; const EditShapeContainer = inject("storeFocusObjects")(observer(EditShape)); -const PageStyleContainer = inject("storeFocusObjects")(observer(PageStyle)); +const PageShapeStyle = inject("storeFocusObjects")(observer(PageStyle)); +const PageShapeCustomFillColor = inject("storeFocusObjects", "storeShapeSettings", "storePalette")(observer(PageCustomFillColor)); const PageWrapContainer = inject("storeShapeSettings", "storeFocusObjects")(observer(PageWrap)); const PageReplaceContainer = inject("storeShapeSettings","storeFocusObjects")(observer(PageReplace)); const PageReorderContainer = inject("storeFocusObjects")(observer(PageReorder)); export {EditShapeContainer as EditShape, - PageStyleContainer as PageStyle, + PageShapeStyle, + PageShapeCustomFillColor, PageWrapContainer as PageWrap, PageReplaceContainer as PageReplace, PageReorderContainer as PageReorder} \ No newline at end of file From ade1f81420c7254986b00d59067a647981222578 Mon Sep 17 00:00:00 2001 From: Maxim Kadushkin Date: Tue, 12 Jan 2021 23:44:36 +0300 Subject: [PATCH 08/10] [mobile] added LocalStorage utility --- apps/common/mobile/utils/LocalStorage.js | 80 +++++++++++++++++++ .../settings/ApplicationSettings.jsx | 11 ++- apps/documenteditor/mobile/src/view/app.jsx | 5 +- 3 files changed, 90 insertions(+), 6 deletions(-) create mode 100644 apps/common/mobile/utils/LocalStorage.js diff --git a/apps/common/mobile/utils/LocalStorage.js b/apps/common/mobile/utils/LocalStorage.js new file mode 100644 index 000000000..b4b9970b3 --- /dev/null +++ b/apps/common/mobile/utils/LocalStorage.js @@ -0,0 +1,80 @@ + +class LocalStorage { + constructor() { + Common.Gateway.on('internalcommand', data => { + if (data.type == 'localstorage') { + this._store = data.keys; + } + }); + + this._store = {}; + + try { + this._isAllowed = !!window.localStorage; + } catch (e) { + this._isAllowed = false; + } + } + + get id() { + return this._storeName; + } + + set id(name) { + this._storeName = name; + } + + set keysFilter(value) { + this._filter = value; + } + + get keysFilter() { + return this._filter; + } + + sync() { + if ( !this._isAllowed ) + Common.Gateway.internalMessage('localstorage', {cmd:'get', keys:this._filter}); + } + + save() { + if ( !this._isAllowed ) + Common.Gateway.internalMessage('localstorage', {cmd:'set', keys:this._store}); + } + + setItem(name, value, just) { + if ( this._isAllowed ) { + try { + localStorage.setItem(name, value); + } catch (error){} + } else { + this._store[name] = value; + + if ( just===true ) { + Common.Gateway.internalMessage('localstorage', {cmd:'set', keys: {name: value}}); + } + } + } + + getItem(name) { + if ( this._isAllowed ) + return localStorage.getItem(name); + else return this._store[name]===undefined ? null : this._store[name]; + }; + + setBool(name, value, just) { + this.setItem(name, value ? 1 : 0, just); + } + + getBool(name, defValue) { + const value = this.getItem(name); + return (value !== null) ? (parseInt(value) != 0) : !!defValue; + } + + itemExists(name) { + return this.getItem(name) !== null; + } +} + +const instance = new LocalStorage(); +export {instance as LocalStorage}; \ No newline at end of file diff --git a/apps/documenteditor/mobile/src/controller/settings/ApplicationSettings.jsx b/apps/documenteditor/mobile/src/controller/settings/ApplicationSettings.jsx index dda7195ff..b3914a9c6 100644 --- a/apps/documenteditor/mobile/src/controller/settings/ApplicationSettings.jsx +++ b/apps/documenteditor/mobile/src/controller/settings/ApplicationSettings.jsx @@ -1,5 +1,6 @@ import React, { Component } from "react"; import { ApplicationSettings } from "../../view/settings/ApplicationSettings"; +import { LocalStorage } from '../../../../../common/mobile/utils/LocalStorage'; class ApplicationSettingsController extends Component { constructor(props) { @@ -8,10 +9,11 @@ class ApplicationSettingsController extends Component { } setUnitMeasurement(value) { - const api = Common.EditorApi.get(); value = (value !== null) ? parseInt(value) : Common.Utils.Metric.getDefaultMetric(); Common.Utils.Metric.setCurrentMetric(value); - // Common.localStorage.setItem("de-mobile-settings-unit", value); + LocalStorage.setItem("de-mobile-settings-unit", value); + + const api = Common.EditorApi.get(); api.asc_SetDocumentUnits((value == Common.Utils.Metric.c_MetricUnits.inch) ? Asc.c_oAscDocumentUnits.Inch : ((value == Common.Utils.Metric.c_MetricUnits.pt) ? Asc.c_oAscDocumentUnits.Point : Asc.c_oAscDocumentUnits.Millimeter)); } @@ -23,14 +25,15 @@ class ApplicationSettingsController extends Component { } switchNoCharacters(value) { + Common.localStorage.setItem("de-mobile-no-characters", value); + const api = Common.EditorApi.get(); - // Common.localStorage.setItem("de-mobile-no-characters", value); api.put_ShowParaMarks(value); } switchShowTableEmptyLine(value) { + Common.localStorage.setItem("de-mobile-hidden-borders", value); const api = Common.EditorApi.get(); - // Common.localStorage.setItem("de-mobile-hidden-borders", state); api.put_ShowTableEmptyLine(value); } diff --git a/apps/documenteditor/mobile/src/view/app.jsx b/apps/documenteditor/mobile/src/view/app.jsx index da82af4b7..23137afc5 100644 --- a/apps/documenteditor/mobile/src/view/app.jsx +++ b/apps/documenteditor/mobile/src/view/app.jsx @@ -2,10 +2,11 @@ import React from 'react'; import {App,Panel,Views,View,Popup,Page,Navbar,Toolbar,NavRight,Link,Block,BlockTitle,List,ListItem,ListInput,ListButton,BlockFooter} from 'framework7-react'; -import routes from '../js/routes'; - import '../../../../common/Gateway.js'; import '../../../../common/main/lib/util/utils.js'; + +import routes from '../js/routes'; + import Notifications from '../../../../common/mobile/utils/notifications.js' import {MainController} from '../controller/Main'; import {Device} from '../../../../common/mobile/utils/device' From 6149c9026f84d91961500a557385cc27860c75eb Mon Sep 17 00:00:00 2001 From: Maxim Kadushkin Date: Wed, 13 Jan 2021 12:48:03 +0300 Subject: [PATCH 09/10] [SSE mobile] added view to show cell name in formula bar --- .../mobile/src/controller/CellEditor.jsx | 16 +++++++-- .../mobile/src/less/celleditor.less | 35 ++++++++++++++++++- .../mobile/src/view/CellEditor.jsx | 11 +++--- 3 files changed, 55 insertions(+), 7 deletions(-) diff --git a/apps/spreadsheeteditor/mobile/src/controller/CellEditor.jsx b/apps/spreadsheeteditor/mobile/src/controller/CellEditor.jsx index 09ae62fec..79f782f80 100644 --- a/apps/spreadsheeteditor/mobile/src/controller/CellEditor.jsx +++ b/apps/spreadsheeteditor/mobile/src/controller/CellEditor.jsx @@ -1,9 +1,21 @@ -import React from 'react'; +import React, { useEffect, useState } from 'react'; import CellEditorView from '../view/CellEditor'; const CellEditor = props => { - return + useEffect(() => { + Common.Notifications.on('engineCreated', api => { + api.asc_registerCallback('asc_onSelectionNameChanged', onApiCellSelection.bind(this)); + }); + }, []); + + const [cellName, setCellName] = useState(''); + + const onApiCellSelection = info => { + setCellName(typeof(info)=='string' ? info : info.asc_getName()); + }; + + return }; export default CellEditor; \ No newline at end of file diff --git a/apps/spreadsheeteditor/mobile/src/less/celleditor.less b/apps/spreadsheeteditor/mobile/src/less/celleditor.less index fbb524834..a66ba45ff 100644 --- a/apps/spreadsheeteditor/mobile/src/less/celleditor.less +++ b/apps/spreadsheeteditor/mobile/src/less/celleditor.less @@ -3,8 +3,15 @@ @cellEditorExpandedHeight: 70px; @contentBackColor: #fff; @gray-light: #f1f1f1; +@gray-darker: #848484; //rgb(132, 132, 132) +@statusBarBorderColor: #cbcbcb; #idx-celleditor { + box-sizing: border-box; + * { + box-sizing: border-box; + } + display: flex; height: @cellEditorHeight; @@ -34,10 +41,31 @@ } #box-cell-name { + display: inline-flex; background-color: var(--f7-navbar-bg-color); } - #ce-cell-content { + #idx-cell-name { + display: inline-block; + width: 90px; + padding: 0 4px; + border: 0 none; + line-height: 30px; + //font-size: 17px; + text-align: center; + + &[disabled] { + color: @gray-darker; + opacity: 0.5; + } + } + + #idx-btn-function { + line-height: @cellEditorHeight; + padding: 0 10px; + } + + #idx-cell-content { padding: 3px 3px; line-height: 1.428571429; color: #000; @@ -76,4 +104,9 @@ } } } + + .group--content { + position: relative; + .hairline(left, @statusBarBorderColor); + } } diff --git a/apps/spreadsheeteditor/mobile/src/view/CellEditor.jsx b/apps/spreadsheeteditor/mobile/src/view/CellEditor.jsx index 68d939427..e9b889a78 100644 --- a/apps/spreadsheeteditor/mobile/src/view/CellEditor.jsx +++ b/apps/spreadsheeteditor/mobile/src/view/CellEditor.jsx @@ -19,13 +19,16 @@ const CellEditorView = props => { return
- F(x) + {props.cellName} + + +
-
- +
+