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

[PE mobile] Added highlight color palette

Browse source
This commit is contained in:
SergeyEzhin 2021-09-15 14:49:29 +03:00
parent 4dccf5a7dd
commit ad11eec233
8 changed files with 92 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -24,7 +24,7 @@ const HighlightColorPalette = ({changeColor, curColor}) => {
))}
</div>
</ListItem>
<ListItem radio checked={(curColor && curColor === 'transparent')} onClick={() => changeColor('transparent')} title={t('Edit.textNoFill')}></ListItem>
<ListItem radio checked={(curColor && curColor === 'transparent')} onClick={() => changeColor('transparent')} title={t('Common.HighlightColorPalette.textNoFill')}></ListItem>
</List>
)
};

6
apps/documenteditor/mobile/locale/en.json
View file

@ -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.",

3
apps/presentationeditor/mobile/locale/en.json
View file

@ -37,6 +37,9 @@
"textCustomColors": "Custom Colors",
"textStandartColors": "Standard Colors",
"textThemeColors": "Theme Colors"
},
"HighlightColorPalette": {
"textNoFill": "No Fill"
}
},
"ContextMenu": {

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

@ -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);
});

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

@ -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}

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

@ -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();
}
}
}
}

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 { 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

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

@ -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 => {
<span className="color-preview" style={{ background: `#${(typeof fontColor === "object" ? fontColor.color : fontColor)}`}}></span> :
<span className="color-preview auto"></span>;
const backgroundColorPreview = backgroundColor !== 'transparent' ?
<span className="color-preview" style={{ background: `#${(typeof backgroundColor === "object" ? backgroundColor.color : backgroundColor)}`}}></span> :
<span className="color-preview"></span>;
return (
<Fragment>
<List>
@ -76,6 +82,13 @@ const EditText = props => {
fontColorPreview
}
</ListItem>
<ListItem title={t("View.Edit.textHighlightColor")} link="/edit-text-background-color/" routeProps={{
onBackgroundColor: props.onBackgroundColor
}}>
{!isAndroid ?
<Icon slot="media" icon="icon-text-selection">{backgroundColorPreview}</Icon> : backgroundColorPreview
}
</ListItem>
<ListItem title={_t.textAdditionalFormatting} link="/edit-text-add-formatting/" routeProps={{
onAdditionalStrikethrough: props.onAdditionalStrikethrough,
onAdditionalCaps: props.onAdditionalCaps,
@ -369,6 +382,37 @@ const PageCustomFontColor = props => {
)
};
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 (
<Page>
<Navbar title={_t.textHighlightColor} backLink={_t.textBack}>
{Device.phone &&
<NavRight>
<Link sheetClose='#edit-sheet'>
<Icon icon='icon-expand-down'/>
</Link>
</NavRight>
}
</Navbar>
<HighlightColorPalette changeColor={changeColor} curColor={backgroundColor} />
</Page>
)
};
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,