From ad11eec2337882e40ddc9e82b713db7627f10e98 Mon Sep 17 00:00:00 2001 From: SergeyEzhin Date: Wed, 15 Sep 2021 14:49:29 +0300 Subject: [PATCH] [PE mobile] Added highlight color palette --- .../lib/component/HighlightColorPalette.jsx | 2 +- apps/documenteditor/mobile/locale/en.json | 6 ++- apps/presentationeditor/mobile/locale/en.json | 3 ++ .../mobile/src/controller/Main.jsx | 6 ++- .../mobile/src/controller/edit/EditText.jsx | 14 ++++++ .../mobile/src/store/textSettings.js | 15 +++++- .../mobile/src/view/edit/Edit.jsx | 6 ++- .../mobile/src/view/edit/EditText.jsx | 46 +++++++++++++++++++ 8 files changed, 92 insertions(+), 6 deletions(-) diff --git a/apps/common/mobile/lib/component/HighlightColorPalette.jsx b/apps/common/mobile/lib/component/HighlightColorPalette.jsx index 5057895be..8ca49f41c 100644 --- a/apps/common/mobile/lib/component/HighlightColorPalette.jsx +++ b/apps/common/mobile/lib/component/HighlightColorPalette.jsx @@ -24,7 +24,7 @@ const HighlightColorPalette = ({changeColor, curColor}) => { ))} - changeColor('transparent')} title={t('Edit.textNoFill')}> + changeColor('transparent')} title={t('Common.HighlightColorPalette.textNoFill')}> ) }; diff --git a/apps/documenteditor/mobile/locale/en.json b/apps/documenteditor/mobile/locale/en.json index 3cdc9b2d0..21a4728b3 100644 --- a/apps/documenteditor/mobile/locale/en.json +++ b/apps/documenteditor/mobile/locale/en.json @@ -161,6 +161,9 @@ "textCustomColors": "Custom Colors", "textStandartColors": "Standard Colors", "textThemeColors": "Theme Colors" + }, + "HighlightColorPalette": { + "textNoFill": "No Fill" } }, "ContextMenu": { @@ -304,8 +307,7 @@ "textTopAndBottom": "Top and Bottom", "textTotalRow": "Total Row", "textType": "Type", - "textWrap": "Wrap", - "textNoFill": "No Fill" + "textWrap": "Wrap" }, "Error": { "convertationTimeoutText": "Conversion timeout exceeded.", diff --git a/apps/presentationeditor/mobile/locale/en.json b/apps/presentationeditor/mobile/locale/en.json index eb61a4bb9..cb5fee058 100644 --- a/apps/presentationeditor/mobile/locale/en.json +++ b/apps/presentationeditor/mobile/locale/en.json @@ -37,6 +37,9 @@ "textCustomColors": "Custom Colors", "textStandartColors": "Standard Colors", "textThemeColors": "Theme Colors" + }, + "HighlightColorPalette": { + "textNoFill": "No Fill" } }, "ContextMenu": { diff --git a/apps/presentationeditor/mobile/src/controller/Main.jsx b/apps/presentationeditor/mobile/src/controller/Main.jsx index 5984a6681..4b5d35d57 100644 --- a/apps/presentationeditor/mobile/src/controller/Main.jsx +++ b/apps/presentationeditor/mobile/src/controller/Main.jsx @@ -372,10 +372,14 @@ class MainController extends Component { storeTextSettings.resetDecreaseIndent(value); }); - this.api.asc_registerCallback('asc_onTextColor', (color) => { + this.api.asc_registerCallback('asc_onTextColor', color => { storeTextSettings.resetTextColor(color); }); + this.api.asc_registerCallback('asc_onTextHighLight', color => { + storeTextSettings.resetBackgroundColor(color); + }); + this.api.asc_registerCallback('asc_onParaSpacingLine', (vc) => { storeTextSettings.resetLineSpacing(vc); }); diff --git a/apps/presentationeditor/mobile/src/controller/edit/EditText.jsx b/apps/presentationeditor/mobile/src/controller/edit/EditText.jsx index af17d99a8..67837492e 100644 --- a/apps/presentationeditor/mobile/src/controller/edit/EditText.jsx +++ b/apps/presentationeditor/mobile/src/controller/edit/EditText.jsx @@ -155,6 +155,19 @@ class EditTextController extends Component { api.put_TextColor(Common.Utils.ThemeColor.getRgbColor(color)); } + onBackgroundColor(strColor) { + const api = Common.EditorApi.get(); + + if (strColor == 'transparent') { + api.SetMarkerFormat(true, false); + } else { + let r = strColor[0] + strColor[1], + g = strColor[2] + strColor[3], + b = strColor[4] + strColor[5]; + api.SetMarkerFormat(true, true, parseInt(r, 16), parseInt(g, 16), parseInt(b, 16)); + } + } + // Additional onAdditionalStrikethrough(type, value) { @@ -243,6 +256,7 @@ class EditTextController extends Component { changeFontSize={this.changeFontSize} changeFontFamily={this.changeFontFamily} onTextColor={this.onTextColor} + onBackgroundColor={this.onBackgroundColor} onAdditionalStrikethrough={this.onAdditionalStrikethrough} onAdditionalCaps={this.onAdditionalCaps} onAdditionalScript={this.onAdditionalScript} diff --git a/apps/presentationeditor/mobile/src/store/textSettings.js b/apps/presentationeditor/mobile/src/store/textSettings.js index e82800153..891d2cfd9 100644 --- a/apps/presentationeditor/mobile/src/store/textSettings.js +++ b/apps/presentationeditor/mobile/src/store/textSettings.js @@ -52,7 +52,9 @@ export class storeTextSettings { listItemHeight: observable, spriteCols: observable, loadSprite: action, - addFontToRecent:action + addFontToRecent:action, + backgroundColor: observable, + resetBackgroundColor: action }); } @@ -81,6 +83,7 @@ export class storeTextSettings { canIncreaseIndent = undefined; canDecreaseIndent = undefined; textColor = undefined; + backgroundColor = undefined; customTextColors = []; lineSpacing = undefined; @@ -280,4 +283,14 @@ export class storeTextSettings { this.lineSpacing = line; } + resetBackgroundColor(color) { + if (color) { + console.log(color); + if (color == -1) { + this.backgroundColor = 'transparent'; + } else { + this.backgroundColor = color.get_hex(); + } + } + } } \ No newline at end of file diff --git a/apps/presentationeditor/mobile/src/view/edit/Edit.jsx b/apps/presentationeditor/mobile/src/view/edit/Edit.jsx index 6bf147ace..60fdbd8a3 100644 --- a/apps/presentationeditor/mobile/src/view/edit/Edit.jsx +++ b/apps/presentationeditor/mobile/src/view/edit/Edit.jsx @@ -14,7 +14,7 @@ import EditChartController from "../../controller/edit/EditChart"; import { EditLinkController } from "../../controller/edit/EditLink"; import { Theme, Layout, Transition, Type, Effect, StyleFillColor, CustomFillColor } from './EditSlide'; -import { PageTextFonts, PageTextFontColor, PageTextCustomFontColor, PageTextAddFormatting, PageTextBulletsAndNumbers, PageTextLineSpacing } from './EditText'; +import { PageTextFonts, PageTextFontColor, PageTextBackgroundColor, PageTextCustomFontColor, PageTextAddFormatting, PageTextBulletsAndNumbers, PageTextLineSpacing } from './EditText'; import { PageShapeStyle, PageShapeStyleNoFill, PageReplaceContainer, PageReorderContainer, PageAlignContainer, PageShapeBorderColor, PageShapeCustomBorderColor, PageShapeCustomFillColor } from './EditShape'; import { PageImageReplace, PageImageReorder, PageImageAlign, PageLinkSettings } from './EditImage'; import { PageTableStyle, PageTableStyleOptions, PageTableCustomFillColor, PageTableBorderColor, PageTableCustomBorderColor, PageTableReorder, PageTableAlign } from './EditTable'; @@ -64,6 +64,10 @@ const routes = [ path: '/edit-text-font-color/', component: PageTextFontColor }, + { + path: '/edit-text-background-color/', + component: PageTextBackgroundColor + }, { path: '/edit-text-custom-font-color/', component: PageTextCustomFontColor diff --git a/apps/presentationeditor/mobile/src/view/edit/EditText.jsx b/apps/presentationeditor/mobile/src/view/edit/EditText.jsx index d6c4084d9..73e2bb05e 100644 --- a/apps/presentationeditor/mobile/src/view/edit/EditText.jsx +++ b/apps/presentationeditor/mobile/src/view/edit/EditText.jsx @@ -5,6 +5,7 @@ import { useTranslation } from 'react-i18next'; import {Device} from '../../../../../common/mobile/utils/device'; import { ThemeColorPalette, CustomColorPicker } from '../../../../../common/mobile/lib/component/ThemeColorPalette.jsx'; import { LocalStorage } from '../../../../../common/mobile/utils/LocalStorage'; +import HighlightColorPalette from '../../../../../common/mobile/lib/component/HighlightColorPalette.jsx'; const EditText = props => { const isAndroid = Device.android; @@ -16,6 +17,7 @@ const EditText = props => { const fontName = storeTextSettings.fontName || _t.textFonts; const fontSize = storeTextSettings.fontSize; const fontColor = storeTextSettings.textColor; + const backgroundColor = storeTextSettings.backgroundColor; const displaySize = typeof fontSize === 'undefined' || fontSize == '' ? _t.textAuto : fontSize + ' ' + _t.textPt; const isBold = storeTextSettings.isBold; const isItalic = storeTextSettings.isItalic; @@ -53,6 +55,10 @@ const EditText = props => { : ; + const backgroundColorPreview = backgroundColor !== 'transparent' ? + : + ; + return ( @@ -76,6 +82,13 @@ const EditText = props => { fontColorPreview } + + {!isAndroid ? + {backgroundColorPreview} : backgroundColorPreview + } + { ) }; +const PageBackgroundColor = props => { + const { t } = useTranslation(); + const _t = t('View.Edit', {returnObjects: true}); + const backgroundColor = props.storeTextSettings.backgroundColor; + + const changeColor = (color, effectId) => { + if (color !== 'empty') { + if (effectId !== undefined ) { + props.onBackgroundColor({color: color, effectId: effectId}); + } else { + props.onBackgroundColor(color); + } + } + }; + + return ( + + + {Device.phone && + + + + + + } + + + + ) +}; + const PageAdditionalFormatting = props => { const isAndroid = Device.android; const { t } = useTranslation(); @@ -609,6 +653,7 @@ const PageLineSpacing = props => { const EditTextContainer = inject("storeTextSettings", "storeFocusObjects")(observer(EditText)); const PageTextFonts = inject("storeTextSettings", "storeFocusObjects")(observer(PageFonts)); const PageTextFontColor = inject("storeTextSettings", "storePalette", "storeFocusObjects")(observer(PageFontColor)); +const PageTextBackgroundColor = inject("storeTextSettings", "storePalette")(observer(PageBackgroundColor)); const PageTextCustomFontColor = inject("storeTextSettings", "storePalette")(observer(PageCustomFontColor)); const PageTextAddFormatting = inject("storeTextSettings", "storeFocusObjects")(observer(PageAdditionalFormatting)); const PageTextBulletsAndNumbers = inject("storeTextSettings", "storeFocusObjects")(observer(PageBulletsAndNumbers)); @@ -618,6 +663,7 @@ export { EditTextContainer as EditText, PageTextFonts, PageTextFontColor, + PageTextBackgroundColor, PageTextCustomFontColor, PageTextAddFormatting, PageTextBulletsAndNumbers,