From e4c58e80bdb4f8aad3a4f48e004ab0b7820da74d Mon Sep 17 00:00:00 2001 From: SergeyEzhin Date: Mon, 13 Sep 2021 17:29:12 +0300 Subject: [PATCH 1/6] Make highlight color palette --- apps/common/mobile/resources/less/common.less | 8 ++++++++ apps/documenteditor/mobile/locale/en.json | 3 ++- .../mobile/src/view/edit/EditText.jsx | 17 ++++++++++------- 3 files changed, 20 insertions(+), 8 deletions(-) diff --git a/apps/common/mobile/resources/less/common.less b/apps/common/mobile/resources/less/common.less index d14b0f595..85881fbba 100644 --- a/apps/common/mobile/resources/less/common.less +++ b/apps/common/mobile/resources/less/common.less @@ -901,6 +901,14 @@ input[type="number"]::-webkit-inner-spin-button { } } +// Highlight Colors + +.highlight-color { + width: 38px; + height: 38px; + margin: 1px; + border: 0.5px solid #9E9E9E; +} diff --git a/apps/documenteditor/mobile/locale/en.json b/apps/documenteditor/mobile/locale/en.json index 626c53d84..3cdc9b2d0 100644 --- a/apps/documenteditor/mobile/locale/en.json +++ b/apps/documenteditor/mobile/locale/en.json @@ -304,7 +304,8 @@ "textTopAndBottom": "Top and Bottom", "textTotalRow": "Total Row", "textType": "Type", - "textWrap": "Wrap" + "textWrap": "Wrap", + "textNoFill": "No Fill" }, "Error": { "convertationTimeoutText": "Conversion timeout exceeded.", diff --git a/apps/documenteditor/mobile/src/view/edit/EditText.jsx b/apps/documenteditor/mobile/src/view/edit/EditText.jsx index b07f4eb7d..8f86a0cca 100644 --- a/apps/documenteditor/mobile/src/view/edit/EditText.jsx +++ b/apps/documenteditor/mobile/src/view/edit/EditText.jsx @@ -4,6 +4,7 @@ import {f7, Swiper, View, SwiperSlide, List, ListItem, Icon, Row, Button, Page, import { useTranslation } from 'react-i18next'; import {Device} from '../../../../../common/mobile/utils/device'; import { ThemeColorPalette, CustomColorPicker } from '../../../../../common/mobile/lib/component/ThemeColorPalette.jsx'; +import HighlightColorPalette from '../../../../../common/mobile/lib/component/HighlightColorPalette.jsx'; import { LocalStorage } from '../../../../../common/mobile/utils/LocalStorage'; const PageFonts = props => { @@ -465,18 +466,19 @@ const PageBackgroundColor = props => { const { t } = useTranslation(); const _t = t('Edit', {returnObjects: true}); const backgroundColor = props.storeTextSettings.backgroundColor; - const customColors = props.storePalette.customColors; + // const customColors = props.storePalette.customColors; const changeColor = (color, effectId) => { if (color !== 'empty') { - if (effectId !==undefined ) { + if (effectId !== undefined ) { props.onBackgroundColor({color: color, effectId: effectId}); } else { props.onBackgroundColor(color); } - } else { - // open custom color menu - props.f7router.navigate('/edit-text-custom-back-color/', {props: {onBackgroundColor: props.onBackgroundColor}}); } + // } else { + // // open custom color menu + // props.f7router.navigate('/edit-text-custom-back-color/', {props: {onBackgroundColor: props.onBackgroundColor}}); + // } }; return( @@ -489,12 +491,13 @@ const PageBackgroundColor = props => { } - + + {/* - + */} ) }; From 50ce0cd3593d91f6b6491ee9069717c61ada87e9 Mon Sep 17 00:00:00 2001 From: SergeyEzhin Date: Mon, 13 Sep 2021 17:31:30 +0300 Subject: [PATCH 2/6] Make highlight color palette --- .../lib/component/HighlightColorPalette.jsx | 30 +++++++++++++++++++ 1 file changed, 30 insertions(+) create mode 100644 apps/common/mobile/lib/component/HighlightColorPalette.jsx diff --git a/apps/common/mobile/lib/component/HighlightColorPalette.jsx b/apps/common/mobile/lib/component/HighlightColorPalette.jsx new file mode 100644 index 000000000..fffaaa325 --- /dev/null +++ b/apps/common/mobile/lib/component/HighlightColorPalette.jsx @@ -0,0 +1,30 @@ +import React from 'react'; +import { f7, ListItem, List, Icon, Page } from 'framework7-react'; +import { useTranslation } from 'react-i18next'; + +const HighlightColorPalette = ({onColorClick, curColor}) => { + const { t } = useTranslation(); + const highlightColors = [ + 'FFFF00', '00FF00', '00FFFF', 'FF00FF', '0000FF', 'FF0000', '00008B', '008B8B', + '006400', '800080', '8B0000', '808000', 'FFFFFF', 'D3D3D3', 'A9A9A9', '000000' + ]; + + return ( + + +
+
+ {highlightColors.map((effect, index) => { + return ( + {onColorClick(effect)}}> + ); + })} +
+
+ + + + ) +}; + +export default HighlightColorPalette; \ No newline at end of file From d92e4f23df10054dd6d2919559e4156e773dd86d Mon Sep 17 00:00:00 2001 From: SergeyEzhin Date: Tue, 14 Sep 2021 00:07:36 +0300 Subject: [PATCH 3/6] Make highlight color palette v.2 --- .../lib/component/HighlightColorPalette.jsx | 26 ++++++++++--------- .../resources/less/common-material.less | 2 +- apps/common/mobile/resources/less/common.less | 22 +++++++++++++--- .../mobile/src/view/edit/EditText.jsx | 2 +- 4 files changed, 35 insertions(+), 17 deletions(-) diff --git a/apps/common/mobile/lib/component/HighlightColorPalette.jsx b/apps/common/mobile/lib/component/HighlightColorPalette.jsx index fffaaa325..86ca4db01 100644 --- a/apps/common/mobile/lib/component/HighlightColorPalette.jsx +++ b/apps/common/mobile/lib/component/HighlightColorPalette.jsx @@ -2,27 +2,29 @@ import React from 'react'; import { f7, ListItem, List, Icon, Page } from 'framework7-react'; import { useTranslation } from 'react-i18next'; -const HighlightColorPalette = ({onColorClick, curColor}) => { +const HighlightColorPalette = ({changeColor, curColor}) => { const { t } = useTranslation(); const highlightColors = [ - 'FFFF00', '00FF00', '00FFFF', 'FF00FF', '0000FF', 'FF0000', '00008B', '008B8B', - '006400', '800080', '8B0000', '808000', 'FFFFFF', 'D3D3D3', 'A9A9A9', '000000' + ['ffff00', '00ff00', '00ffff', 'ff00ff', '0000ff', 'ff0000', '00008b', '008b8b'], + ['006400', '800080', '8b0000', '808000', 'ffffff', 'd3d3d3', 'a9a9a9', '000000'] ]; return ( -
-
- {highlightColors.map((effect, index) => { - return ( - {onColorClick(effect)}}> - ); - })} -
+
+ {highlightColors.map((row, index) => ( +
+ {row.map((effect, index) => { + return ( + {changeColor(effect)}}> + ); + })} +
+ ))}
- + ) }; diff --git a/apps/common/mobile/resources/less/common-material.less b/apps/common/mobile/resources/less/common-material.less index 65c4f182d..0101358f7 100644 --- a/apps/common/mobile/resources/less/common-material.less +++ b/apps/common/mobile/resources/less/common-material.less @@ -294,7 +294,7 @@ .color-preview { width: 30px; height: 30px; - border-radius: 16px; + border-radius: 4px; margin-top: -3px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .15) inset; &.auto { diff --git a/apps/common/mobile/resources/less/common.less b/apps/common/mobile/resources/less/common.less index 85881fbba..3d714e111 100644 --- a/apps/common/mobile/resources/less/common.less +++ b/apps/common/mobile/resources/less/common.less @@ -903,11 +903,26 @@ input[type="number"]::-webkit-inner-spin-button { // Highlight Colors +.highlight-palette { + width: 100%; +} + .highlight-color { - width: 38px; - height: 38px; + min-width: 10px; + min-height: 34px; margin: 1px; - border: 0.5px solid #9E9E9E; + box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15) inset; + position: relative; + flex-grow: 1; + &_active:after { + content: ' '; + position: absolute; + width: 100%; + height: 100%; + box-shadow: 0 0 0 1px #ffffff, 0 0 0 4px #446995; + z-index: 1; + border-radius: 1px; + } } @@ -916,3 +931,4 @@ input[type="number"]::-webkit-inner-spin-button { + diff --git a/apps/documenteditor/mobile/src/view/edit/EditText.jsx b/apps/documenteditor/mobile/src/view/edit/EditText.jsx index 8f86a0cca..b0995a6f8 100644 --- a/apps/documenteditor/mobile/src/view/edit/EditText.jsx +++ b/apps/documenteditor/mobile/src/view/edit/EditText.jsx @@ -491,7 +491,7 @@ const PageBackgroundColor = props => { } - + {/* Date: Tue, 14 Sep 2021 17:56:08 +0300 Subject: [PATCH 4/6] Correct highlight color palette --- .../lib/component/HighlightColorPalette.jsx | 2 +- .../mobile/src/view/edit/EditText.jsx | 22 +++++++------------ 2 files changed, 9 insertions(+), 15 deletions(-) diff --git a/apps/common/mobile/lib/component/HighlightColorPalette.jsx b/apps/common/mobile/lib/component/HighlightColorPalette.jsx index 86ca4db01..5057895be 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')}> ) }; diff --git a/apps/documenteditor/mobile/src/view/edit/EditText.jsx b/apps/documenteditor/mobile/src/view/edit/EditText.jsx index b0995a6f8..147bbcda0 100644 --- a/apps/documenteditor/mobile/src/view/edit/EditText.jsx +++ b/apps/documenteditor/mobile/src/view/edit/EditText.jsx @@ -466,7 +466,7 @@ const PageBackgroundColor = props => { const { t } = useTranslation(); const _t = t('Edit', {returnObjects: true}); const backgroundColor = props.storeTextSettings.backgroundColor; - // const customColors = props.storePalette.customColors; + const changeColor = (color, effectId) => { if (color !== 'empty') { if (effectId !== undefined ) { @@ -475,12 +475,9 @@ const PageBackgroundColor = props => { props.onBackgroundColor(color); } } - // } else { - // // open custom color menu - // props.f7router.navigate('/edit-text-custom-back-color/', {props: {onBackgroundColor: props.onBackgroundColor}}); - // } }; - return( + + return ( {Device.phone && @@ -492,12 +489,6 @@ const PageBackgroundColor = props => { } - {/* - - - */} ) }; @@ -534,6 +525,10 @@ const EditText = props => { : ; + const backgroundColorPreview = backgroundColor !== 'transparent' ? + : + ; + return ( @@ -562,8 +557,7 @@ const EditText = props => { onBackgroundColor: props.onBackgroundColor }}> {!isAndroid ? - : - + {backgroundColorPreview} : backgroundColorPreview } Date: Wed, 15 Sep 2021 14:49:29 +0300 Subject: [PATCH 5/6] [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, From 03533acc5609e88480293322c78518666d86dc3c Mon Sep 17 00:00:00 2001 From: SergeyEzhin Date: Fri, 17 Sep 2021 01:59:05 +0300 Subject: [PATCH 6/6] [DE PE mobile] Correct highlight color palette and edit settings --- .../lib/component/HighlightColorPalette.jsx | 6 +++- apps/common/mobile/resources/less/icons.less | 5 +++ .../mobile/src/controller/Main.jsx | 11 +++++-- .../src/controller/edit/EditParagraph.jsx | 10 +++--- .../mobile/src/controller/edit/EditText.jsx | 15 ++++++--- .../mobile/src/store/paragraphSettings.js | 2 ++ .../mobile/src/store/textSettings.js | 31 ++++++------------- .../mobile/src/view/edit/Edit.jsx | 10 ++---- .../mobile/src/view/edit/EditText.jsx | 30 +++++++++--------- .../mobile/src/controller/Main.jsx | 2 +- .../mobile/src/controller/edit/EditText.jsx | 4 +-- .../mobile/src/store/textSettings.js | 20 ++++++------ .../mobile/src/view/edit/Edit.jsx | 6 ++-- .../mobile/src/view/edit/EditText.jsx | 26 ++++++++-------- 14 files changed, 88 insertions(+), 90 deletions(-) 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,