diff --git a/apps/documenteditor/mobile/src/controller/edit/EditText.jsx b/apps/documenteditor/mobile/src/controller/edit/EditText.jsx
index 12f5445093..271741f520 100644
--- a/apps/documenteditor/mobile/src/controller/edit/EditText.jsx
+++ b/apps/documenteditor/mobile/src/controller/edit/EditText.jsx
@@ -45,6 +45,15 @@ class EditTextController extends Component {
api.put_TextColor(Common.Utils.ThemeColor.getRgbColor(color));
}
+ onBackgroundColor(color) {
+ const api = Common.EditorApi.get();
+ if (color == 'transparent') {
+ api.put_ParagraphShade(false);
+ } else {
+ api.put_ParagraphShade(true, Common.Utils.ThemeColor.getRgbColor(color));
+ }
+ }
+
toggleBold(value) {
const api = Common.EditorApi.get();
if (api) {
@@ -188,6 +197,7 @@ class EditTextController extends Component {
changeFontFamily={this.changeFontFamily}
onTextColorAuto={this.onTextColorAuto}
onTextColor={this.onTextColor}
+ onBackgroundColor={this.onBackgroundColor}
toggleBold={this.toggleBold}
toggleItalic={this.toggleItalic}
toggleUnderline={this.toggleUnderline}
diff --git a/apps/documenteditor/mobile/src/css/icons-ios.less b/apps/documenteditor/mobile/src/css/icons-ios.less
index d33fe58f66..25313b2969 100644
--- a/apps/documenteditor/mobile/src/css/icons-ios.less
+++ b/apps/documenteditor/mobile/src/css/icons-ios.less
@@ -165,6 +165,11 @@
height: 22px;
.encoded-svg-background('');
}
+ &.icon-text-selection {
+ width: 22px;
+ height: 22px;
+ .encoded-svg-background('');
+ }
// Align
&.icon-text-align-left {
width: 22px;
diff --git a/apps/documenteditor/mobile/src/store/mainStore.js b/apps/documenteditor/mobile/src/store/mainStore.js
index a8390c1e1a..ffa31bf479 100644
--- a/apps/documenteditor/mobile/src/store/mainStore.js
+++ b/apps/documenteditor/mobile/src/store/mainStore.js
@@ -11,6 +11,7 @@ import {storeChartSettings} from "./chartSettings";
import {storeDocumentInfo} from "./documentInfo";
import {storeApplicationSettings} from './applicationSettings';
import {storeAppOptions} from "./appOptions";
+import {storePalette} from "./palette";
export const stores = {
storeAppOptions: new storeAppOptions(),
@@ -24,6 +25,7 @@ export const stores = {
storeImageSettings: new storeImageSettings(),
storeTableSettings: new storeTableSettings(),
storeDocumentInfo: new storeDocumentInfo(),
- storeApplicationSettings: new storeApplicationSettings()
+ storeApplicationSettings: new storeApplicationSettings(),
+ storePalette: new storePalette()
};
diff --git a/apps/documenteditor/mobile/src/store/palette.js b/apps/documenteditor/mobile/src/store/palette.js
new file mode 100644
index 0000000000..f5e40e59b7
--- /dev/null
+++ b/apps/documenteditor/mobile/src/store/palette.js
@@ -0,0 +1,9 @@
+import {action, observable} from 'mobx';
+
+export class storePalette {
+ @observable customColors = [];
+
+ @action changeCustomColors (colors) {
+ this.customColors = colors;
+ }
+}
\ 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 2adafc0773..a9c47e2482 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, PageTextBullets, PageTextNumbers, PageTextLineSpacing, PageTextFontColor, PageTextCustomFontColor} from "./EditText";
+import {PageTextFonts, PageTextAddFormatting, PageTextBullets, PageTextNumbers, PageTextLineSpacing, PageTextFontColor, PageTextCustomFontColor, PageTextBackgroundColor, PageTextCustomBackColor} from "./EditText";
import {PageAdvancedSettings} from "./EditParagraph";
import {PageWrap, PageReorder, PageReplace} from "./EditShape";
import {PageImageReorder, PageImageReplace, PageImageWrap, PageLinkSettings} from "./EditImage";
@@ -51,6 +51,14 @@ const routes = [
path: '/edit-text-custom-font-color/',
component: PageTextCustomFontColor,
},
+ {
+ path: '/edit-text-background-color/',
+ component: PageTextBackgroundColor,
+ },
+ {
+ path: '/edit-text-custom-back-color/',
+ component: PageTextCustomBackColor,
+ },
//Edit paragraph
{
path: '/edit-paragraph-adv/',
diff --git a/apps/documenteditor/mobile/src/view/edit/EditText.jsx b/apps/documenteditor/mobile/src/view/edit/EditText.jsx
index e98736d418..3ad6f5aaad 100644
--- a/apps/documenteditor/mobile/src/view/edit/EditText.jsx
+++ b/apps/documenteditor/mobile/src/view/edit/EditText.jsx
@@ -220,7 +220,7 @@ const PageCustomFontColor = props => {
}
const autoColor = textColor === 'auto' ? window.getComputedStyle(document.getElementById('font-color-auto')).backgroundColor : null;
const onAddNewColor = (colors, color) => {
- props.storeTextSettings.changeCustomTextColors(colors);
+ props.storePalette.changeCustomColors(colors);
props.onTextColor(color);
props.f7router.back();
};
@@ -235,9 +235,8 @@ const PageCustomFontColor = props => {
const PageFontColor = props => {
const { t } = useTranslation();
const _t = t('Edit', {returnObjects: true});
- const store = props.storeTextSettings;
- const textColor = store.textColor;
- const customColors = store.customTextColors;
+ const textColor = props.storeTextSettings.textColor;
+ const customColors = props.storePalette.customColors;
const changeColor = (color, effectId) => {
if (color !== 'empty') {
if (effectId !==undefined ) {
@@ -272,6 +271,56 @@ const PageFontColor = props => {
)
};
+const PageCustomBackColor = props => {
+ const { t } = useTranslation();
+ const _t = t('Edit', {returnObjects: true});
+ let backgroundColor = props.storeTextSettings.backgroundColor;
+ if (typeof backgroundColor === 'object') {
+ backgroundColor = backgroundColor.color;
+ }
+ const onAddNewColor = (colors, color) => {
+ props.storePalette.changeCustomColors(colors);
+ props.onBackgroundColor(color);
+ props.f7router.back();
+ };
+ return(
+
+
+
+
+ )
+};
+
+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 ) {
+ props.onBackgroundColor({color: color, effectId: effectId});
+ } else {
+ props.onBackgroundColor(color);
+ }
+ } else {
+ // open custom color menu
+ props.f7router.navigate('/edit-text-custom-back-color/');
+ }
+ };
+ return(
+
+
+
+
+
+
+
+ )
+};
+
const EditText = props => {
const isAndroid = Device.android;
const { t } = useTranslation();
@@ -279,6 +328,7 @@ const EditText = props => {
const fontName = storeTextSettings.fontName || t('Edit.textFonts');
const fontSize = storeTextSettings.fontSize;
const fontColor = storeTextSettings.textColor;
+ const backgroundColor = storeTextSettings.backgroundColor;
const displaySize = typeof fontSize === 'undefined' ? t('Edit.textAuto') : fontSize + ' ' + t('Edit.textPt');
const isBold = storeTextSettings.isBold;
const isItalic = storeTextSettings.isItalic;
@@ -287,7 +337,7 @@ const EditText = props => {
const paragraphAlign = storeTextSettings.paragraphAlign;
const fontColorPreview = fontColor !== 'auto' ?
- :
+ :
;
return (
@@ -314,8 +364,13 @@ const EditText = props => {
fontColorPreview
}
-
- {!isAndroid && }
+
+ {!isAndroid ?
+ :
+
+ }