Lea/web-apps
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

[DE PE mobile] Correct highlight color palette and edit settings

Browse source
This commit is contained in:
SergeyEzhin 2021-09-17 01:59:05 +03:00
parent ad11eec233
commit 03533acc56
14 changed files with 88 additions and 90 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
apps/common/mobile/lib/component/HighlightColorPalette.jsx
View file

@ -1,8 +1,10 @@
import React from 'react'; import React from 'react';
import { f7, ListItem, List, Icon, Page } from 'framework7-react'; import { f7, ListItem, List, Icon, Page } from 'framework7-react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import {Device} from '../../utils/device';
const HighlightColorPalette = ({changeColor, curColor}) => { const HighlightColorPalette = ({changeColor, curColor}) => {
const isAndroid = Device.android;
const { t } = useTranslation(); const { t } = useTranslation();
const highlightColors = [ const highlightColors = [
['ffff00', '00ff00', '00ffff', 'ff00ff', '0000ff', 'ff0000', '00008b', '008b8b'], ['ffff00', '00ff00', '00ffff', 'ff00ff', '0000ff', 'ff0000', '00008b', '008b8b'],
@ -24,7 +26,9 @@ const HighlightColorPalette = ({changeColor, curColor}) => {
))} ))}
</div> </div>
</ListItem> </ListItem>
<ListItem radio checked={(curColor && curColor === 'transparent')} onClick={() => changeColor('transparent')} title={t('Common.HighlightColorPalette.textNoFill')}></ListItem> <ListItem radio checked={(curColor && curColor === 'transparent')} onClick={() => changeColor('transparent')} title={t('Common.HighlightColorPalette.textNoFill')}>
{!isAndroid && <Icon slot="media" icon="icon-cancellation"></Icon>}
</ListItem>
</List> </List>
) )
}; };

5
apps/common/mobile/resources/less/icons.less
View file

@ -25,4 +25,9 @@ i.icon {
height: 24px; height: 24px;
.encoded-svg-background('<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g><path fill-rule="evenodd" clip-rule="evenodd" d="M15.9912 6C15.9912 8.34102 15.4074 10.1346 14.6055 11.3121C13.7983 12.4974 12.8249 13 11.9912 13C11.1575 13 10.1841 12.4974 9.37695 11.3121C8.57501 10.1346 7.99121 8.34102 7.99121 6C7.99121 3.61508 9.96974 2 11.9912 2C14.0127 2 15.9912 3.61508 15.9912 6ZM14.5015 12.9506C13.7365 13.6361 12.8649 14 11.9912 14C11.1195 14 10.2499 13.6378 9.48619 12.9554C7.78363 13.6081 6.36015 14.2591 5.26963 14.9224C3.55256 15.9667 3 16.8326 3 17.5C3 18.2545 3.4257 19.0877 4.82302 19.7879C6.25015 20.5031 8.57272 20.9999 12 21C15.4273 21 17.7499 20.5031 19.177 19.7879C20.5743 19.0877 21 18.2545 21 17.5C21 16.8326 20.4474 15.9667 18.7304 14.9224C17.6372 14.2575 16.2095 13.605 14.5015 12.9506ZM15.2272 12.1594C16.2765 10.7825 16.9912 8.67814 16.9912 6C16.9912 3 14.5 1 11.9912 1C9.48242 1 6.99121 3 6.99121 6C6.99121 8.68159 7.70777 10.7879 8.75931 12.1647C4.60309 13.7964 2 15.4951 2 17.5C2 19.9852 5 21.9999 12 22C19 22 22 19.9852 22 17.5C22 15.4929 19.3913 13.7927 15.2272 12.1594Z" fill="@{themeColor}"/></g></svg>'); .encoded-svg-background('<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g><path fill-rule="evenodd" clip-rule="evenodd" d="M15.9912 6C15.9912 8.34102 15.4074 10.1346 14.6055 11.3121C13.7983 12.4974 12.8249 13 11.9912 13C11.1575 13 10.1841 12.4974 9.37695 11.3121C8.57501 10.1346 7.99121 8.34102 7.99121 6C7.99121 3.61508 9.96974 2 11.9912 2C14.0127 2 15.9912 3.61508 15.9912 6ZM14.5015 12.9506C13.7365 13.6361 12.8649 14 11.9912 14C11.1195 14 10.2499 13.6378 9.48619 12.9554C7.78363 13.6081 6.36015 14.2591 5.26963 14.9224C3.55256 15.9667 3 16.8326 3 17.5C3 18.2545 3.4257 19.0877 4.82302 19.7879C6.25015 20.5031 8.57272 20.9999 12 21C15.4273 21 17.7499 20.5031 19.177 19.7879C20.5743 19.0877 21 18.2545 21 17.5C21 16.8326 20.4474 15.9667 18.7304 14.9224C17.6372 14.2575 16.2095 13.605 14.5015 12.9506ZM15.2272 12.1594C16.2765 10.7825 16.9912 8.67814 16.9912 6C16.9912 3 14.5 1 11.9912 1C9.48242 1 6.99121 3 6.99121 6C6.99121 8.68159 7.70777 10.7879 8.75931 12.1647C4.60309 13.7964 2 15.4951 2 17.5C2 19.9852 5 21.9999 12 22C19 22 22 19.9852 22 17.5C22 15.4929 19.3913 13.7927 15.2272 12.1594Z" fill="@{themeColor}"/></g></svg>');
} }
&.icon-cancellation {
width: 24px;
height: 24px;
.encoded-svg-background('<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><mask id="mask0" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="2" y="2" width="20" height="20"><circle cx="12" cy="12" r="9.5" fill="@{gray}" stroke="@{themeColor}"/></mask><g mask="url(#mask0)"><circle cx="12" cy="12" r="9.5" transform="rotate(-90 12 12)" stroke="@{themeColor}"/><line x1="5.09054" y1="19.2024" x2="19.1919" y2="5.10094" stroke="@{themeColor}"/></g></svg>');
}
} }

11
apps/documenteditor/mobile/src/controller/Main.jsx
View file

@ -573,9 +573,14 @@ class MainController extends Component {
this.api.asc_registerCallback('asc_onParaSpacingLine', (vc) => { this.api.asc_registerCallback('asc_onParaSpacingLine', (vc) => {
storeTextSettings.resetLineSpacing(vc); storeTextSettings.resetLineSpacing(vc);
}); });
this.api.asc_registerCallback('asc_onTextShd', (shd) => {
let color = shd.get_Color(); this.api.asc_registerCallback('asc_onTextHighLight', color => {
storeTextSettings.resetBackgroundColor(color); let textPr = this.api.get_TextProps().get_TextPr();
if(textPr) {
color = textPr.get_HighLight();
storeTextSettings.resetHighlightColor(color);
}
}); });
// link settings // link settings

10
apps/documenteditor/mobile/src/controller/edit/EditParagraph.jsx
View file

@ -133,15 +133,13 @@ class EditParagraphController extends Component {
onBackgroundColor (color) { onBackgroundColor (color) {
const api = Common.EditorApi.get(); const api = Common.EditorApi.get();
const properties = new Asc.asc_CParagraphProperty();
properties.put_Shade(new Asc.asc_CParagraphShd());
if (color == 'transparent') { if (color == 'transparent') {
properties.get_Shade().put_Value(Asc.c_oAscShdNil); api.put_ParagraphShade(false);
} else { } else {
properties.get_Shade().put_Value(Asc.c_oAscShdClear); api.put_ParagraphShade(true, Common.Utils.ThemeColor.getRgbColor(color));
properties.get_Shade().put_Color(Common.Utils.ThemeColor.getRgbColor(color));
} }
api.paraApply(properties);
} }
render () { render () {

15
apps/documenteditor/mobile/src/controller/edit/EditText.jsx
View file

@ -45,12 +45,17 @@ class EditTextController extends Component {
api.put_TextColor(Common.Utils.ThemeColor.getRgbColor(color)); api.put_TextColor(Common.Utils.ThemeColor.getRgbColor(color));
} }
onBackgroundColor(color) { onHighlightColor(strColor) {
const api = Common.EditorApi.get(); const api = Common.EditorApi.get();
if (color == 'transparent') {
api.put_ParagraphShade(false); if (strColor == 'transparent') {
api.SetMarkerFormat(true, false);
} else { } 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} changeFontFamily={this.changeFontFamily}
onTextColorAuto={this.onTextColorAuto} onTextColorAuto={this.onTextColorAuto}
onTextColor={this.onTextColor} onTextColor={this.onTextColor}
onBackgroundColor={this.onBackgroundColor} onHighlightColor={this.onHighlightColor}
toggleBold={this.toggleBold} toggleBold={this.toggleBold}
toggleItalic={this.toggleItalic} toggleItalic={this.toggleItalic}
toggleUnderline={this.toggleUnderline} toggleUnderline={this.toggleUnderline}

2
apps/documenteditor/mobile/src/store/paragraphSettings.js
View file

@ -51,6 +51,7 @@ export class storeParagraphSettings {
getBackgroundColor (paragraphObject) { getBackgroundColor (paragraphObject) {
const shade = paragraphObject.get_Shade(); const shade = paragraphObject.get_Shade();
let backColor = 'transparent'; let backColor = 'transparent';
if (!!shade && shade.get_Value() === Asc.c_oAscShdClear) { if (!!shade && shade.get_Value() === Asc.c_oAscShdClear) {
const color = shade.get_Color(); const color = shade.get_Color();
if (color) { if (color) {
@ -64,6 +65,7 @@ export class storeParagraphSettings {
} }
} }
} }
this.backColor = backColor; this.backColor = backColor;
return backColor; return backColor;
} }

31
apps/documenteditor/mobile/src/store/textSettings.js
View file

@ -20,7 +20,7 @@ export class storeTextSettings {
textColor: observable, textColor: observable,
customTextColors: observable, customTextColors: observable,
lineSpacing: observable, lineSpacing: observable,
backgroundColor: observable, highlightColor: observable,
initEditorFonts: action, initEditorFonts: action,
resetFontName: action, resetFontName: action,
resetFontsRecent:action, resetFontsRecent:action,
@ -40,7 +40,7 @@ export class storeTextSettings {
resetTextColor: action, resetTextColor: action,
changeCustomTextColors: action, changeCustomTextColors: action,
resetLineSpacing: action, resetLineSpacing: action,
resetBackgroundColor: action, resetHighlightColor: action,
changeFontFamily: action, changeFontFamily: action,
iconWidth: observable, iconWidth: observable,
iconHeight: observable, iconHeight: observable,
@ -80,7 +80,7 @@ export class storeTextSettings {
textColor = undefined; textColor = undefined;
customTextColors = []; customTextColors = [];
lineSpacing = undefined; lineSpacing = undefined;
backgroundColor = undefined; highlightColor = undefined;
initEditorFonts (fonts, select) { initEditorFonts (fonts, select) {
@ -251,24 +251,11 @@ export class storeTextSettings {
this.lineSpacing = line; this.lineSpacing = line;
} }
resetBackgroundColor (color) { resetHighlightColor (color) {
let value; if (color == -1) {
this.highlightColor = 'transparent';
if(color) { } else {
if (color.get_auto()) { this.highlightColor = color.get_hex();
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;
} }
} }

10
apps/documenteditor/mobile/src/view/edit/Edit.jsx
View file

@ -14,7 +14,7 @@ import EditChartController from "../../controller/edit/EditChart";
import EditHyperlinkController from "../../controller/edit/EditHyperlink"; import EditHyperlinkController from "../../controller/edit/EditHyperlink";
import EditHeaderController from "../../controller/edit/EditHeader"; 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 {ParagraphAdvSettings, PageParagraphBackColor, PageParagraphCustomColor} from "./EditParagraph";
import {PageShapeStyleNoFill, PageShapeStyle, PageShapeCustomFillColor, PageShapeBorderColor, PageShapeCustomBorderColor, PageWrap, PageReorder, PageReplace} from "./EditShape"; import {PageShapeStyleNoFill, PageShapeStyle, PageShapeCustomFillColor, PageShapeBorderColor, PageShapeCustomBorderColor, PageWrap, PageReorder, PageReplace} from "./EditShape";
import {PageImageReorder, PageImageReplace, PageImageWrap, PageLinkSettings} from "./EditImage"; import {PageImageReorder, PageImageReplace, PageImageWrap, PageLinkSettings} from "./EditImage";
@ -48,12 +48,8 @@ const routes = [
component: PageTextCustomFontColor, component: PageTextCustomFontColor,
}, },
{ {
path: '/edit-text-background-color/', path: '/edit-text-highlight-color/',
component: PageTextBackgroundColor, component: PageTextHighlightColor,
},
{
path: '/edit-text-custom-back-color/',
component: PageTextCustomBackColor,
}, },
//Edit paragraph //Edit paragraph
{ {

30
apps/documenteditor/mobile/src/view/edit/EditText.jsx
View file

@ -462,17 +462,17 @@ const PageCustomBackColor = props => {
) )
}; };
const PageBackgroundColor = props => { const PageHighlightColor = props => {
const { t } = useTranslation(); const { t } = useTranslation();
const _t = t('Edit', {returnObjects: true}); const _t = t('Edit', {returnObjects: true});
const backgroundColor = props.storeTextSettings.backgroundColor; const highlightColor = props.storeTextSettings.highlightColor;
const changeColor = (color, effectId) => { const changeColor = (color, effectId) => {
if (color !== 'empty') { if (color !== 'empty') {
if (effectId !== undefined ) { if (effectId !== undefined ) {
props.onBackgroundColor({color: color, effectId: effectId}); props.onHighlightColor({color: color, effectId: effectId});
} else { } else {
props.onBackgroundColor(color); props.onHighlightColor(color);
} }
} }
}; };
@ -488,7 +488,7 @@ const PageBackgroundColor = props => {
</NavRight> </NavRight>
} }
</Navbar> </Navbar>
<HighlightColorPalette changeColor={changeColor} curColor={backgroundColor} /> <HighlightColorPalette changeColor={changeColor} curColor={highlightColor} />
</Page> </Page>
) )
}; };
@ -500,7 +500,7 @@ const EditText = props => {
const fontName = storeTextSettings.fontName || t('Edit.textFonts'); const fontName = storeTextSettings.fontName || t('Edit.textFonts');
const fontSize = storeTextSettings.fontSize; const fontSize = storeTextSettings.fontSize;
const fontColor = storeTextSettings.textColor; 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 displaySize = typeof fontSize === 'undefined' ? t('Edit.textAuto') : fontSize + ' ' + t('Edit.textPt');
const isBold = storeTextSettings.isBold; const isBold = storeTextSettings.isBold;
const isItalic = storeTextSettings.isItalic; const isItalic = storeTextSettings.isItalic;
@ -525,8 +525,8 @@ const EditText = props => {
<span className="color-preview" style={{ background: `#${(typeof fontColor === "object" ? fontColor.color : fontColor)}`}}></span> : <span className="color-preview" style={{ background: `#${(typeof fontColor === "object" ? fontColor.color : fontColor)}`}}></span> :
<span className="color-preview auto"></span>; <span className="color-preview auto"></span>;
const backgroundColorPreview = backgroundColor !== 'transparent' ? const highlightColorPreview = highlightColor !== 'transparent' ?
<span className="color-preview" style={{ background: `#${(typeof backgroundColor === "object" ? backgroundColor.color : backgroundColor)}`}}></span> : <span className="color-preview" style={{ background: `#${(typeof highlightColor === "object" ? highlightColor.color : highlightColor)}`}}></span> :
<span className="color-preview"></span>; <span className="color-preview"></span>;
return ( return (
@ -553,11 +553,11 @@ const EditText = props => {
fontColorPreview fontColorPreview
} }
</ListItem> </ListItem>
<ListItem title={t("Edit.textHighlightColor")} link="/edit-text-background-color/" routeProps={{ <ListItem title={t("Edit.textHighlightColor")} link="/edit-text-highlight-color/" routeProps={{
onBackgroundColor: props.onBackgroundColor onHighlightColor: props.onHighlightColor
}}> }}>
{!isAndroid ? {!isAndroid ?
<Icon slot="media" icon="icon-text-selection">{backgroundColorPreview}</Icon> : backgroundColorPreview <Icon slot="media" icon="icon-text-selection">{highlightColorPreview}</Icon> : highlightColorPreview
} }
</ListItem> </ListItem>
<ListItem title={t("Edit.textAdditionalFormatting")} link="/edit-text-add-formatting/" routeProps={{ <ListItem title={t("Edit.textAdditionalFormatting")} link="/edit-text-add-formatting/" routeProps={{
@ -621,9 +621,7 @@ const PageTextBulletsAndNumbers = inject("storeTextSettings")(observer(PageBulle
const PageTextLineSpacing = inject("storeTextSettings")(observer(PageLineSpacing)); const PageTextLineSpacing = inject("storeTextSettings")(observer(PageLineSpacing));
const PageTextFontColor = inject("storeTextSettings", "storePalette")(observer(PageFontColor)); const PageTextFontColor = inject("storeTextSettings", "storePalette")(observer(PageFontColor));
const PageTextCustomFontColor = inject("storeTextSettings", "storePalette")(observer(PageCustomFontColor)); const PageTextCustomFontColor = inject("storeTextSettings", "storePalette")(observer(PageCustomFontColor));
const PageTextBackgroundColor = inject("storeTextSettings", "storePalette")(observer(PageBackgroundColor)); const PageTextHighlightColor = inject("storeTextSettings")(observer(PageHighlightColor));
const PageTextCustomBackColor = inject("storeTextSettings", "storePalette")(observer(PageCustomBackColor));
export { export {
EditTextContainer as EditText, EditTextContainer as EditText,
@ -633,6 +631,6 @@ export {
PageTextLineSpacing, PageTextLineSpacing,
PageTextFontColor, PageTextFontColor,
PageTextCustomFontColor, PageTextCustomFontColor,
PageTextBackgroundColor, PageTextHighlightColor,
PageTextCustomBackColor // PageTextCustomBackColor
}; };

2
apps/presentationeditor/mobile/src/controller/Main.jsx
View file

@ -377,7 +377,7 @@ class MainController extends Component {
}); });
this.api.asc_registerCallback('asc_onTextHighLight', color => { this.api.asc_registerCallback('asc_onTextHighLight', color => {
storeTextSettings.resetBackgroundColor(color); storeTextSettings.resetHighlightColor(color);
}); });
this.api.asc_registerCallback('asc_onParaSpacingLine', (vc) => { this.api.asc_registerCallback('asc_onParaSpacingLine', (vc) => {

4
apps/presentationeditor/mobile/src/controller/edit/EditText.jsx
View file

@ -155,7 +155,7 @@ class EditTextController extends Component {
api.put_TextColor(Common.Utils.ThemeColor.getRgbColor(color)); api.put_TextColor(Common.Utils.ThemeColor.getRgbColor(color));
} }
onBackgroundColor(strColor) { onHighlightColor(strColor) {
const api = Common.EditorApi.get(); const api = Common.EditorApi.get();
if (strColor == 'transparent') { if (strColor == 'transparent') {
@ -256,7 +256,7 @@ class EditTextController extends Component {
changeFontSize={this.changeFontSize} changeFontSize={this.changeFontSize}
changeFontFamily={this.changeFontFamily} changeFontFamily={this.changeFontFamily}
onTextColor={this.onTextColor} onTextColor={this.onTextColor}
onBackgroundColor={this.onBackgroundColor} onHighlightColor={this.onHighlightColor}
onAdditionalStrikethrough={this.onAdditionalStrikethrough} onAdditionalStrikethrough={this.onAdditionalStrikethrough}
onAdditionalCaps={this.onAdditionalCaps} onAdditionalCaps={this.onAdditionalCaps}
onAdditionalScript={this.onAdditionalScript} onAdditionalScript={this.onAdditionalScript}

20
apps/presentationeditor/mobile/src/store/textSettings.js
View file

@ -53,8 +53,8 @@ export class storeTextSettings {
spriteCols: observable, spriteCols: observable,
loadSprite: action, loadSprite: action,
addFontToRecent:action, addFontToRecent:action,
backgroundColor: observable, highlightColor: observable,
resetBackgroundColor: action resetHighlightColor: action
}); });
} }
@ -83,7 +83,7 @@ export class storeTextSettings {
canIncreaseIndent = undefined; canIncreaseIndent = undefined;
canDecreaseIndent = undefined; canDecreaseIndent = undefined;
textColor = undefined; textColor = undefined;
backgroundColor = undefined; highlightColor = undefined;
customTextColors = []; customTextColors = [];
lineSpacing = undefined; lineSpacing = undefined;
@ -283,14 +283,12 @@ export class storeTextSettings {
this.lineSpacing = line; this.lineSpacing = line;
} }
resetBackgroundColor(color) { resetHighlightColor(color) {
if (color) { if (color == -1) {
console.log(color); this.highlightColor = 'transparent';
if (color == -1) { } else {
this.backgroundColor = 'transparent'; this.highlightColor = color.get_hex();
} else {
this.backgroundColor = color.get_hex();
}
} }
} }
} }

6
apps/presentationeditor/mobile/src/view/edit/Edit.jsx
View file

@ -14,7 +14,7 @@ import EditChartController from "../../controller/edit/EditChart";
import { EditLinkController } from "../../controller/edit/EditLink"; import { EditLinkController } from "../../controller/edit/EditLink";
import { Theme, Layout, Transition, Type, Effect, StyleFillColor, CustomFillColor } from './EditSlide'; 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 { PageShapeStyle, PageShapeStyleNoFill, PageReplaceContainer, PageReorderContainer, PageAlignContainer, PageShapeBorderColor, PageShapeCustomBorderColor, PageShapeCustomFillColor } from './EditShape';
import { PageImageReplace, PageImageReorder, PageImageAlign, PageLinkSettings } from './EditImage'; import { PageImageReplace, PageImageReorder, PageImageAlign, PageLinkSettings } from './EditImage';
import { PageTableStyle, PageTableStyleOptions, PageTableCustomFillColor, PageTableBorderColor, PageTableCustomBorderColor, PageTableReorder, PageTableAlign } from './EditTable'; import { PageTableStyle, PageTableStyleOptions, PageTableCustomFillColor, PageTableBorderColor, PageTableCustomBorderColor, PageTableReorder, PageTableAlign } from './EditTable';
@ -65,8 +65,8 @@ const routes = [
component: PageTextFontColor component: PageTextFontColor
}, },
{ {
path: '/edit-text-background-color/', path: '/edit-text-highlight-color/',
component: PageTextBackgroundColor component: PageTextHighlightColor
}, },
{ {
path: '/edit-text-custom-font-color/', path: '/edit-text-custom-font-color/',

26
apps/presentationeditor/mobile/src/view/edit/EditText.jsx
View file

@ -17,7 +17,7 @@ const EditText = props => {
const fontName = storeTextSettings.fontName || _t.textFonts; const fontName = storeTextSettings.fontName || _t.textFonts;
const fontSize = storeTextSettings.fontSize; const fontSize = storeTextSettings.fontSize;
const fontColor = storeTextSettings.textColor; const fontColor = storeTextSettings.textColor;
const backgroundColor = storeTextSettings.backgroundColor; const highlightColor = storeTextSettings.highlightColor;
const displaySize = typeof fontSize === 'undefined' || fontSize == '' ? _t.textAuto : fontSize + ' ' + _t.textPt; const displaySize = typeof fontSize === 'undefined' || fontSize == '' ? _t.textAuto : fontSize + ' ' + _t.textPt;
const isBold = storeTextSettings.isBold; const isBold = storeTextSettings.isBold;
const isItalic = storeTextSettings.isItalic; const isItalic = storeTextSettings.isItalic;
@ -55,8 +55,8 @@ const EditText = props => {
<span className="color-preview" style={{ background: `#${(typeof fontColor === "object" ? fontColor.color : fontColor)}`}}></span> : <span className="color-preview" style={{ background: `#${(typeof fontColor === "object" ? fontColor.color : fontColor)}`}}></span> :
<span className="color-preview auto"></span>; <span className="color-preview auto"></span>;
const backgroundColorPreview = backgroundColor !== 'transparent' ? const highlightColorPreview = highlightColor !== 'transparent' ?
<span className="color-preview" style={{ background: `#${(typeof backgroundColor === "object" ? backgroundColor.color : backgroundColor)}`}}></span> : <span className="color-preview" style={{ background: `#${(typeof highlightColor === "object" ? highlightColor.color : highlightColor)}`}}></span> :
<span className="color-preview"></span>; <span className="color-preview"></span>;
return ( return (
@ -82,11 +82,11 @@ const EditText = props => {
fontColorPreview fontColorPreview
} }
</ListItem> </ListItem>
<ListItem title={t("View.Edit.textHighlightColor")} link="/edit-text-background-color/" routeProps={{ <ListItem title={t("View.Edit.textHighlightColor")} link="/edit-text-highlight-color/" routeProps={{
onBackgroundColor: props.onBackgroundColor onHighlightColor: props.onHighlightColor
}}> }}>
{!isAndroid ? {!isAndroid ?
<Icon slot="media" icon="icon-text-selection">{backgroundColorPreview}</Icon> : backgroundColorPreview <Icon slot="media" icon="icon-text-selection">{highlightColorPreview}</Icon> : highlightColorPreview
} }
</ListItem> </ListItem>
<ListItem title={_t.textAdditionalFormatting} link="/edit-text-add-formatting/" routeProps={{ <ListItem title={_t.textAdditionalFormatting} link="/edit-text-add-formatting/" routeProps={{
@ -382,17 +382,17 @@ const PageCustomFontColor = props => {
) )
}; };
const PageBackgroundColor = props => { const PageHighlightColor = props => {
const { t } = useTranslation(); const { t } = useTranslation();
const _t = t('View.Edit', {returnObjects: true}); const _t = t('View.Edit', {returnObjects: true});
const backgroundColor = props.storeTextSettings.backgroundColor; const highlightColor = props.storeTextSettings.highlightColor;
const changeColor = (color, effectId) => { const changeColor = (color, effectId) => {
if (color !== 'empty') { if (color !== 'empty') {
if (effectId !== undefined ) { if (effectId !== undefined ) {
props.onBackgroundColor({color: color, effectId: effectId}); props.onHighlightColor({color: color, effectId: effectId});
} else { } else {
props.onBackgroundColor(color); props.onHighlightColor(color);
} }
} }
}; };
@ -408,7 +408,7 @@ const PageBackgroundColor = props => {
</NavRight> </NavRight>
} }
</Navbar> </Navbar>
<HighlightColorPalette changeColor={changeColor} curColor={backgroundColor} /> <HighlightColorPalette changeColor={changeColor} curColor={highlightColor} />
</Page> </Page>
) )
}; };
@ -653,7 +653,7 @@ const PageLineSpacing = props => {
const EditTextContainer = inject("storeTextSettings", "storeFocusObjects")(observer(EditText)); const EditTextContainer = inject("storeTextSettings", "storeFocusObjects")(observer(EditText));
const PageTextFonts = inject("storeTextSettings", "storeFocusObjects")(observer(PageFonts)); const PageTextFonts = inject("storeTextSettings", "storeFocusObjects")(observer(PageFonts));
const PageTextFontColor = inject("storeTextSettings", "storePalette", "storeFocusObjects")(observer(PageFontColor)); 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 PageTextCustomFontColor = inject("storeTextSettings", "storePalette")(observer(PageCustomFontColor));
const PageTextAddFormatting = inject("storeTextSettings", "storeFocusObjects")(observer(PageAdditionalFormatting)); const PageTextAddFormatting = inject("storeTextSettings", "storeFocusObjects")(observer(PageAdditionalFormatting));
const PageTextBulletsAndNumbers = inject("storeTextSettings", "storeFocusObjects")(observer(PageBulletsAndNumbers)); const PageTextBulletsAndNumbers = inject("storeTextSettings", "storeFocusObjects")(observer(PageBulletsAndNumbers));
@ -663,7 +663,7 @@ export {
EditTextContainer as EditText, EditTextContainer as EditText,
PageTextFonts, PageTextFonts,
PageTextFontColor, PageTextFontColor,
PageTextBackgroundColor, PageTextHighlightColor,
PageTextCustomFontColor, PageTextCustomFontColor,
PageTextAddFormatting, PageTextAddFormatting,
PageTextBulletsAndNumbers, PageTextBulletsAndNumbers,