diff --git a/apps/documenteditor/mobile/locale/en.json b/apps/documenteditor/mobile/locale/en.json index 82355eea9d..2f0c058a2a 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 a41b624c80..0ecbe0bfad 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 618f159960..70c4650928 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 a9c47e2482..547517d535 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 2bcc9ddbf1..bd1d8c762b 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