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

[DE mobile] Added font color page, custom font color page into text settings

Browse source
This commit is contained in:
JuliaSvinareva 2020-12-28 23:05:32 +03:00
parent 355d2535f4
commit d8d040733b
5 changed files with 84 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -174,7 +174,8 @@
"textStartAt": "Start at",
"textFontColors": "Font Colors",
"textAutomatic": "Automatic",
"textAddCustomColor": "Add Custom Color"
"textAddCustomColor": "Add Custom Color",
"textCustomColor": "Custom Color"
},
"Add": {
"textTable": "Table",

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

@ -40,6 +40,11 @@ class EditTextController extends Component {
api.put_TextColor(color);
}
onTextColor(color) {
const api = Common.EditorApi.get();
api.put_TextColor(Common.Utils.ThemeColor.getRgbColor(color));
}
toggleBold(value) {
const api = Common.EditorApi.get();
if (api) {
@ -182,6 +187,7 @@ class EditTextController extends Component {
<EditText changeFontSize={this.changeFontSize}
changeFontFamily={this.changeFontFamily}
onTextColorAuto={this.onTextColorAuto}
onTextColor={this.onTextColor}
toggleBold={this.toggleBold}
toggleItalic={this.toggleItalic}
toggleUnderline={this.toggleUnderline}

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

@ -14,6 +14,7 @@ export class storeTextSettings {
@observable typeNumbers = undefined;
@observable paragraphAlign = undefined;
@observable textColor = undefined;
@observable customTextColors = [];
@observable lineSpacing = undefined;
@observable backgroundColor = undefined;
@ -97,7 +98,7 @@ export class storeTextSettings {
let value;
if (color) {
if (color.get_auto()) {
value = '000000';
value = 'auto';
} else {
if (color.get_type() == Asc.c_oAscColor.COLOR_TYPE_SCHEME) {
value = {
@ -112,6 +113,10 @@ export class storeTextSettings {
this.textColor = value;
}
@action changeCustomTextColors (colors) {
this.customTextColors = colors;
}
@action resetLineSpacing (vc) {
let line = (vc.get_Line() === null || vc.get_LineRule() === null || vc.get_LineRule() != 1) ? -1 : vc.get_Line();
this.lineSpacing = line;

18
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 EditHeaderController from "../../controller/edit/EditHeader";
import {PageAdditionalFormatting, PageBullets, PageFonts, PageLineSpacing, PageNumbers, PageFontColor} from "./EditText";
import {PageTextFonts, PageTextAddFormatting, PageTextBullets, PageTextNumbers, PageTextLineSpacing, PageTextFontColor, PageTextCustomFontColor} from "./EditText";
import {PageAdvancedSettings} from "./EditParagraph";
import {PageWrap, PageReorder, PageReplace} from "./EditShape";
import {PageImageReorder, PageImageReplace, PageImageWrap, PageLinkSettings} from "./EditImage";
@ -25,27 +25,31 @@ const routes = [
//Edit text
{
path: '/edit-text-fonts/',
component: PageFonts,
component: PageTextFonts,
},
{
path: '/edit-text-add-formatting/',
component: PageAdditionalFormatting,
component: PageTextAddFormatting,
},
{
path: '/edit-text-bullets/',
component: PageBullets,
component: PageTextBullets,
},
{
path: '/edit-text-numbers/',
component: PageNumbers,
component: PageTextNumbers,
},
{
path: '/edit-text-line-spacing/',
component: PageLineSpacing,
component: PageTextLineSpacing,
},
{
path: '/edit-text-font-color/',
component: PageFontColor,
component: PageTextFontColor,
},
{
path: '/edit-text-custom-font-color/',
component: PageTextCustomFontColor,
},
//Edit paragraph
{

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

@ -1,10 +1,10 @@
import React, {Fragment, useState} from 'react';
import React, {Fragment, useState } from 'react';
import {observer, inject} from "mobx-react";
import {List, ListItem, Icon, Row, Button, Page, Navbar, Segmented, BlockTitle} from 'framework7-react';
import {f7, List, ListItem, Icon, Row, Button, Page, Navbar, Segmented, BlockTitle} from 'framework7-react';
import { useTranslation } from 'react-i18next';
import {Device} from '../../../../../common/mobile/utils/device';
import ThemeColorPalette from '../../../../../common/mobile/lib/component/ThemeColorPalette.jsx';
import { ThemeColorPalette, CustomColorPicker } from '../../../../../common/mobile/lib/component/ThemeColorPalette.jsx';
const PageFonts = props => {
const isAndroid = Device.android;
@ -210,32 +210,62 @@ const PageLineSpacing = props => {
)
};
const PageCustomFontColor = props => {
const { t } = useTranslation();
const _t = t('Edit', {returnObjects: true});
const store = props.storeTextSettings;
let textColor = store.textColor;
if (typeof textColor === 'object') {
textColor = textColor.color;
}
const onAddNewColor = (colors, color) => {
props.storeTextSettings.changeCustomTextColors(colors);
props.onTextColor(color);
props.f7router.back();
};
return(
<Page>
<Navbar title={_t.textCustomColor} backLink={_t.textBack} />
<CustomColorPicker currentColor={textColor} onAddNewColor={onAddNewColor}/>
</Page>
)
};
const PageFontColor = props => {
const { t } = useTranslation();
const _t = t('Edit', {returnObjects: true});
const [stateColor, setColor] = useState();
const changeCurColor = (color) => {
setColor(color);
};
const onAddCustomColor = () => {
console.log('add custom color');
const store = props.storeTextSettings;
const textColor = store.textColor;
const customColors = store.customTextColors;
const changeColor = (color, effectId) => {
if (color !== 'empty') {
if (effectId !==undefined ) {
props.onTextColor({color: color, effectId: effectId});
} else {
props.onTextColor(color);
}
} else {
// open custom color menu
props.f7router.navigate('/edit-text-custom-font-color/');
}
};
return(
<Page>
<Navbar title={_t.textFontColors} backLink={_t.textBack} />
<List>
<ListItem className={'font-color-auto' + (stateColor === 'auto' ? ' active' : '')} title={_t.textAutomatic} onClick={() => {
<ListItem className={'font-color-auto' + (textColor === 'auto' ? ' active' : '')} title={_t.textAutomatic} onClick={() => {
props.onTextColorAuto();
setColor('auto');
}}>
<div slot="media">
<div className={'color-auto'}></div>
</div>
</ListItem>
</List>
<ThemeColorPalette changeCurColor={changeCurColor} curColor={stateColor}/>
<ThemeColorPalette changeColor={changeColor} curColor={textColor} customColors={customColors}/>
<List>
<ListItem title={_t.textAddCustomColor} onClick={() => {onAddCustomColor()}}></ListItem>
<ListItem title={_t.textAddCustomColor} link={'/edit-text-custom-font-color/'} routeProps={{
onTextColor: props.onTextColor
}}></ListItem>
</List>
</Page>
)
@ -269,7 +299,8 @@ const EditText = props => {
</Row>
</ListItem>
<ListItem title={t("Edit.textFontColor")} link="/edit-text-font-color/" routeProps={{
onTextColorAuto: props.onTextColorAuto
onTextColorAuto: props.onTextColorAuto,
onTextColor: props.onTextColor
}}>
{!isAndroid && <Icon slot="media" icon="icon-text-color"></Icon>}
<span className="color-preview"></span>
@ -334,18 +365,21 @@ const EditText = props => {
};
const EditTextContainer = inject("storeTextSettings", "storeFocusObjects")(observer(EditText));
const PageFontsContainer = inject("storeTextSettings", "storeFocusObjects")(observer(PageFonts));
const PageAddFormattingContainer = inject("storeTextSettings", "storeFocusObjects")(observer(PageAdditionalFormatting));
const PageBulletsContainer = inject("storeTextSettings")(observer(PageBullets));
const PageNumbersContainer = inject("storeTextSettings")(observer(PageNumbers));
const PageLineSpacingContainer = inject("storeTextSettings")(observer(PageLineSpacing));
const PageTextFonts = inject("storeTextSettings", "storeFocusObjects")(observer(PageFonts));
const PageTextAddFormatting = inject("storeTextSettings", "storeFocusObjects")(observer(PageAdditionalFormatting));
const PageTextBullets = inject("storeTextSettings")(observer(PageBullets));
const PageTextNumbers = inject("storeTextSettings")(observer(PageNumbers));
const PageTextLineSpacing = inject("storeTextSettings")(observer(PageLineSpacing));
const PageTextFontColor = inject("storeTextSettings")(observer(PageFontColor));
const PageTextCustomFontColor = inject("storeTextSettings")(observer(PageCustomFontColor));
export {
EditTextContainer as EditText,
PageFontsContainer as PageFonts,
PageAddFormattingContainer as PageAdditionalFormatting,
PageBulletsContainer as PageBullets,
PageNumbersContainer as PageNumbers,
PageLineSpacingContainer as PageLineSpacing,
PageFontColor
PageTextFonts,
PageTextAddFormatting,
PageTextBullets,
PageTextNumbers,
PageTextLineSpacing,
PageTextFontColor,
PageTextCustomFontColor
};