diff --git a/apps/common/mobile/lib/component/HighlightColorPalette.jsx b/apps/common/mobile/lib/component/HighlightColorPalette.jsx index 8ca49f41c..32980e2cf 100644 --- a/apps/common/mobile/lib/component/HighlightColorPalette.jsx +++ b/apps/common/mobile/lib/component/HighlightColorPalette.jsx @@ -1,8 +1,10 @@ import React from 'react'; import { f7, ListItem, List, Icon, Page } from 'framework7-react'; import { useTranslation } from 'react-i18next'; +import {Device} from '../../utils/device'; const HighlightColorPalette = ({changeColor, curColor}) => { + const isAndroid = Device.android; const { t } = useTranslation(); const highlightColors = [ ['ffff00', '00ff00', '00ffff', 'ff00ff', '0000ff', 'ff0000', '00008b', '008b8b'], @@ -24,7 +26,9 @@ const HighlightColorPalette = ({changeColor, curColor}) => { ))} - changeColor('transparent')} title={t('Common.HighlightColorPalette.textNoFill')}> + changeColor('transparent')} title={t('Common.HighlightColorPalette.textNoFill')}> + {!isAndroid && } + ) }; diff --git a/apps/common/mobile/resources/less/icons.less b/apps/common/mobile/resources/less/icons.less index 234485c7a..638f99f5e 100644 --- a/apps/common/mobile/resources/less/icons.less +++ b/apps/common/mobile/resources/less/icons.less @@ -25,4 +25,9 @@ i.icon { height: 24px; .encoded-svg-background(''); } + &.icon-cancellation { + width: 24px; + height: 24px; + .encoded-svg-background(''); + } } diff --git a/apps/documenteditor/mobile/src/controller/Main.jsx b/apps/documenteditor/mobile/src/controller/Main.jsx index b39ad5f69..99215476c 100644 --- a/apps/documenteditor/mobile/src/controller/Main.jsx +++ b/apps/documenteditor/mobile/src/controller/Main.jsx @@ -573,9 +573,14 @@ class MainController extends Component { this.api.asc_registerCallback('asc_onParaSpacingLine', (vc) => { storeTextSettings.resetLineSpacing(vc); }); - this.api.asc_registerCallback('asc_onTextShd', (shd) => { - let color = shd.get_Color(); - storeTextSettings.resetBackgroundColor(color); + + this.api.asc_registerCallback('asc_onTextHighLight', color => { + let textPr = this.api.get_TextProps().get_TextPr(); + + if(textPr) { + color = textPr.get_HighLight(); + storeTextSettings.resetHighlightColor(color); + } }); // link settings diff --git a/apps/documenteditor/mobile/src/controller/edit/EditParagraph.jsx b/apps/documenteditor/mobile/src/controller/edit/EditParagraph.jsx index 0ecbe0bfa..016449ba3 100644 --- a/apps/documenteditor/mobile/src/controller/edit/EditParagraph.jsx +++ b/apps/documenteditor/mobile/src/controller/edit/EditParagraph.jsx @@ -133,15 +133,13 @@ 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); + api.put_ParagraphShade(false); } else { - properties.get_Shade().put_Value(Asc.c_oAscShdClear); - properties.get_Shade().put_Color(Common.Utils.ThemeColor.getRgbColor(color)); + api.put_ParagraphShade(true, Common.Utils.ThemeColor.getRgbColor(color)); } - api.paraApply(properties); + } render () { diff --git a/apps/documenteditor/mobile/src/controller/edit/EditText.jsx b/apps/documenteditor/mobile/src/controller/edit/EditText.jsx index 3f22efa08..4b8e57998 100644 --- a/apps/documenteditor/mobile/src/controller/edit/EditText.jsx +++ b/apps/documenteditor/mobile/src/controller/edit/EditText.jsx @@ -45,12 +45,17 @@ class EditTextController extends Component { api.put_TextColor(Common.Utils.ThemeColor.getRgbColor(color)); } - onBackgroundColor(color) { + onHighlightColor(strColor) { const api = Common.EditorApi.get(); - if (color == 'transparent') { - api.put_ParagraphShade(false); + + if (strColor == 'transparent') { + api.SetMarkerFormat(true, false); } else { - api.put_ParagraphShade(true, Common.Utils.ThemeColor.getRgbColor(color)); + 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)); } } @@ -203,7 +208,7 @@ class EditTextController extends Component { changeFontFamily={this.changeFontFamily} onTextColorAuto={this.onTextColorAuto} onTextColor={this.onTextColor} - onBackgroundColor={this.onBackgroundColor} + onHighlightColor={this.onHighlightColor} toggleBold={this.toggleBold} toggleItalic={this.toggleItalic} toggleUnderline={this.toggleUnderline} diff --git a/apps/documenteditor/mobile/src/store/paragraphSettings.js b/apps/documenteditor/mobile/src/store/paragraphSettings.js index ed5bd2004..db7e81b87 100644 --- a/apps/documenteditor/mobile/src/store/paragraphSettings.js +++ b/apps/documenteditor/mobile/src/store/paragraphSettings.js @@ -51,6 +51,7 @@ export class storeParagraphSettings { 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) { @@ -64,6 +65,7 @@ export class storeParagraphSettings { } } } + this.backColor = backColor; return backColor; } diff --git a/apps/documenteditor/mobile/src/store/textSettings.js b/apps/documenteditor/mobile/src/store/textSettings.js index e6a64506c..6d31f9fb3 100644 --- a/apps/documenteditor/mobile/src/store/textSettings.js +++ b/apps/documenteditor/mobile/src/store/textSettings.js @@ -20,7 +20,7 @@ export class storeTextSettings { textColor: observable, customTextColors: observable, lineSpacing: observable, - backgroundColor: observable, + highlightColor: observable, initEditorFonts: action, resetFontName: action, resetFontsRecent:action, @@ -40,7 +40,7 @@ export class storeTextSettings { resetTextColor: action, changeCustomTextColors: action, resetLineSpacing: action, - resetBackgroundColor: action, + resetHighlightColor: action, changeFontFamily: action, iconWidth: observable, iconHeight: observable, @@ -80,7 +80,7 @@ export class storeTextSettings { textColor = undefined; customTextColors = []; lineSpacing = undefined; - backgroundColor = undefined; + highlightColor = undefined; initEditorFonts (fonts, select) { @@ -251,24 +251,11 @@ export class storeTextSettings { this.lineSpacing = line; } - resetBackgroundColor (color) { - let value; - - if(color) { - if (color.get_auto()) { - value = 'transparent' - } 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()); - } - } - } - - this.backgroundColor = value; + resetHighlightColor (color) { + if (color == -1) { + this.highlightColor = 'transparent'; + } else { + this.highlightColor = color.get_hex(); + } } } \ 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 7554124c2..7b8b04ef9 100644 --- a/apps/documenteditor/mobile/src/view/edit/Edit.jsx +++ b/apps/documenteditor/mobile/src/view/edit/Edit.jsx @@ -14,7 +14,7 @@ import EditChartController from "../../controller/edit/EditChart"; import EditHyperlinkController from "../../controller/edit/EditHyperlink"; import EditHeaderController from "../../controller/edit/EditHeader"; -import {PageTextFonts, PageTextAddFormatting, PageTextBulletsAndNumbers, PageTextLineSpacing, PageTextFontColor, PageTextCustomFontColor, PageTextBackgroundColor, PageTextCustomBackColor} from "./EditText"; +import {PageTextFonts, PageTextAddFormatting, PageTextBulletsAndNumbers, PageTextLineSpacing, PageTextFontColor, PageTextCustomFontColor, PageTextHighlightColor} from "./EditText"; import {ParagraphAdvSettings, PageParagraphBackColor, PageParagraphCustomColor} from "./EditParagraph"; import {PageShapeStyleNoFill, PageShapeStyle, PageShapeCustomFillColor, PageShapeBorderColor, PageShapeCustomBorderColor, PageWrap, PageReorder, PageReplace} from "./EditShape"; import {PageImageReorder, PageImageReplace, PageImageWrap, PageLinkSettings} from "./EditImage"; @@ -48,12 +48,8 @@ const routes = [ component: PageTextCustomFontColor, }, { - path: '/edit-text-background-color/', - component: PageTextBackgroundColor, - }, - { - path: '/edit-text-custom-back-color/', - component: PageTextCustomBackColor, + path: '/edit-text-highlight-color/', + component: PageTextHighlightColor, }, //Edit paragraph { diff --git a/apps/documenteditor/mobile/src/view/edit/EditText.jsx b/apps/documenteditor/mobile/src/view/edit/EditText.jsx index 147bbcda0..2b568f068 100644 --- a/apps/documenteditor/mobile/src/view/edit/EditText.jsx +++ b/apps/documenteditor/mobile/src/view/edit/EditText.jsx @@ -462,17 +462,17 @@ const PageCustomBackColor = props => { ) }; -const PageBackgroundColor = props => { +const PageHighlightColor = props => { const { t } = useTranslation(); const _t = t('Edit', {returnObjects: true}); - const backgroundColor = props.storeTextSettings.backgroundColor; + const highlightColor = props.storeTextSettings.highlightColor; const changeColor = (color, effectId) => { if (color !== 'empty') { if (effectId !== undefined ) { - props.onBackgroundColor({color: color, effectId: effectId}); + props.onHighlightColor({color: color, effectId: effectId}); } else { - props.onBackgroundColor(color); + props.onHighlightColor(color); } } }; @@ -488,7 +488,7 @@ const PageBackgroundColor = props => { } - + ) }; @@ -500,7 +500,7 @@ const EditText = props => { const fontName = storeTextSettings.fontName || t('Edit.textFonts'); const fontSize = storeTextSettings.fontSize; const fontColor = storeTextSettings.textColor; - const backgroundColor = storeTextSettings.backgroundColor; + const highlightColor = storeTextSettings.highlightColor; const displaySize = typeof fontSize === 'undefined' ? t('Edit.textAuto') : fontSize + ' ' + t('Edit.textPt'); const isBold = storeTextSettings.isBold; const isItalic = storeTextSettings.isItalic; @@ -525,8 +525,8 @@ const EditText = props => { : ; - const backgroundColorPreview = backgroundColor !== 'transparent' ? - : + const highlightColorPreview = highlightColor !== 'transparent' ? + : ; return ( @@ -553,11 +553,11 @@ const EditText = props => { fontColorPreview } - {!isAndroid ? - {backgroundColorPreview} : backgroundColorPreview + {highlightColorPreview} : highlightColorPreview } { - storeTextSettings.resetBackgroundColor(color); + storeTextSettings.resetHighlightColor(color); }); this.api.asc_registerCallback('asc_onParaSpacingLine', (vc) => { diff --git a/apps/presentationeditor/mobile/src/controller/edit/EditText.jsx b/apps/presentationeditor/mobile/src/controller/edit/EditText.jsx index 67837492e..e7fb78aa2 100644 --- a/apps/presentationeditor/mobile/src/controller/edit/EditText.jsx +++ b/apps/presentationeditor/mobile/src/controller/edit/EditText.jsx @@ -155,7 +155,7 @@ class EditTextController extends Component { api.put_TextColor(Common.Utils.ThemeColor.getRgbColor(color)); } - onBackgroundColor(strColor) { + onHighlightColor(strColor) { const api = Common.EditorApi.get(); if (strColor == 'transparent') { @@ -256,7 +256,7 @@ class EditTextController extends Component { changeFontSize={this.changeFontSize} changeFontFamily={this.changeFontFamily} onTextColor={this.onTextColor} - onBackgroundColor={this.onBackgroundColor} + onHighlightColor={this.onHighlightColor} 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 891d2cfd9..98330ea8f 100644 --- a/apps/presentationeditor/mobile/src/store/textSettings.js +++ b/apps/presentationeditor/mobile/src/store/textSettings.js @@ -53,8 +53,8 @@ export class storeTextSettings { spriteCols: observable, loadSprite: action, addFontToRecent:action, - backgroundColor: observable, - resetBackgroundColor: action + highlightColor: observable, + resetHighlightColor: action }); } @@ -83,7 +83,7 @@ export class storeTextSettings { canIncreaseIndent = undefined; canDecreaseIndent = undefined; textColor = undefined; - backgroundColor = undefined; + highlightColor = undefined; customTextColors = []; lineSpacing = undefined; @@ -283,14 +283,12 @@ 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(); - } + resetHighlightColor(color) { + if (color == -1) { + this.highlightColor = 'transparent'; + } else { + this.highlightColor = 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 60fdbd8a3..e231dfc26 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, PageTextBackgroundColor, PageTextCustomFontColor, PageTextAddFormatting, PageTextBulletsAndNumbers, PageTextLineSpacing } from './EditText'; +import { PageTextFonts, PageTextFontColor, PageTextHighlightColor, 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'; @@ -65,8 +65,8 @@ const routes = [ component: PageTextFontColor }, { - path: '/edit-text-background-color/', - component: PageTextBackgroundColor + path: '/edit-text-highlight-color/', + component: PageTextHighlightColor }, { path: '/edit-text-custom-font-color/', diff --git a/apps/presentationeditor/mobile/src/view/edit/EditText.jsx b/apps/presentationeditor/mobile/src/view/edit/EditText.jsx index 73e2bb05e..65917805e 100644 --- a/apps/presentationeditor/mobile/src/view/edit/EditText.jsx +++ b/apps/presentationeditor/mobile/src/view/edit/EditText.jsx @@ -17,7 +17,7 @@ const EditText = props => { const fontName = storeTextSettings.fontName || _t.textFonts; const fontSize = storeTextSettings.fontSize; const fontColor = storeTextSettings.textColor; - const backgroundColor = storeTextSettings.backgroundColor; + const highlightColor = storeTextSettings.highlightColor; const displaySize = typeof fontSize === 'undefined' || fontSize == '' ? _t.textAuto : fontSize + ' ' + _t.textPt; const isBold = storeTextSettings.isBold; const isItalic = storeTextSettings.isItalic; @@ -55,8 +55,8 @@ const EditText = props => { : ; - const backgroundColorPreview = backgroundColor !== 'transparent' ? - : + const highlightColorPreview = highlightColor !== 'transparent' ? + : ; return ( @@ -82,11 +82,11 @@ const EditText = props => { fontColorPreview } - {!isAndroid ? - {backgroundColorPreview} : backgroundColorPreview + {highlightColorPreview} : highlightColorPreview } { ) }; -const PageBackgroundColor = props => { +const PageHighlightColor = props => { const { t } = useTranslation(); const _t = t('View.Edit', {returnObjects: true}); - const backgroundColor = props.storeTextSettings.backgroundColor; + const highlightColor = props.storeTextSettings.highlightColor; const changeColor = (color, effectId) => { if (color !== 'empty') { if (effectId !== undefined ) { - props.onBackgroundColor({color: color, effectId: effectId}); + props.onHighlightColor({color: color, effectId: effectId}); } else { - props.onBackgroundColor(color); + props.onHighlightColor(color); } } }; @@ -408,7 +408,7 @@ const PageBackgroundColor = props => { } - + ) }; @@ -653,7 +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 PageTextHighlightColor = inject("storeTextSettings")(observer(PageHighlightColor)); const PageTextCustomFontColor = inject("storeTextSettings", "storePalette")(observer(PageCustomFontColor)); const PageTextAddFormatting = inject("storeTextSettings", "storeFocusObjects")(observer(PageAdditionalFormatting)); const PageTextBulletsAndNumbers = inject("storeTextSettings", "storeFocusObjects")(observer(PageBulletsAndNumbers)); @@ -663,7 +663,7 @@ export { EditTextContainer as EditText, PageTextFonts, PageTextFontColor, - PageTextBackgroundColor, + PageTextHighlightColor, PageTextCustomFontColor, PageTextAddFormatting, PageTextBulletsAndNumbers,