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

[DE mobile] Added Fill color page into edit shape settings

Browse source
This commit is contained in:
JuliaSvinareva 2021-01-12 20:22:16 +03:00
parent e00ef7022e
commit cf14a2d56d
5 changed files with 144 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -176,7 +176,10 @@
"textAutomatic": "Automatic",
"textAddCustomColor": "Add Custom Color",
"textCustomColor": "Custom Color",
"textBackground": "Background"
"textBackground": "Background",
"textFill": "Fill",
"textBorder": "Border",
"textEffects": "Effects"
},
"Add": {
"textTable": "Table",

23
apps/documenteditor/mobile/src/controller/edit/EditShape.jsx
View file

@ -9,6 +9,8 @@ class EditShapeController extends Component {
constructor (props) {
super(props);
this.onWrapType = this.onWrapType.bind(this);
this.props.storeShapeSettings.setFillColor(undefined);
}
onRemoveShape () {
@ -104,6 +106,24 @@ class EditShapeController extends Component {
}
}
onFillColor (color) {
const api = Common.EditorApi.get();
const image = new Asc.asc_CImgProperty();
const shape = new Asc.asc_CShapeProperty();
const fill = new Asc.asc_CShapeFill();
if (color == 'transparent') {
fill.put_type(Asc.c_oAscFill.FILL_TYPE_NOFILL);
fill.put_fill(null);
} else {
fill.put_type(Asc.c_oAscFill.FILL_TYPE_SOLID);
fill.put_fill(new Asc.asc_CFillSolid());
fill.get_fill().put_color(Common.Utils.ThemeColor.getRgbColor(color));
}
shape.put_fill(fill);
image.put_ShapeProperties(shape);
api.ImgApply(image);
}
render () {
return (
<EditShape onRemoveShape={this.onRemoveShape}
@ -114,9 +134,10 @@ class EditShapeController extends Component {
onWrapDistance={this.onWrapDistance}
onReorder={this.onReorder}
onReplace={this.onReplace}
onFillColor={this.onFillColor}
/>
)
}
}
export default inject("storeShapeSettings")(observer(EditShapeController));
export default inject("storeShapeSettings", "storeFocusObjects")(observer(EditShapeController));

25
apps/documenteditor/mobile/src/store/shapeSettings.js
View file

@ -189,4 +189,29 @@ export class storeShapeSettings {
getWrapDistance (shapeObject) {
return shapeObject.get_Paddings().get_Top();
}
// Fill Color
@observable fillColor = undefined;
setFillColor (color) {
this.fillColor = color;
}
getFillColor (shapeObject) {
let fill = shapeObject.get_ShapeProperties().get_fill();
const fillType = fill.get_type();
let color = 'transparent';
if (fillType == Asc.c_oAscFill.FILL_TYPE_SOLID) {
fill = fill.get_fill();
const sdkColor = fill.get_color();
if (sdkColor) {
if (sdkColor.get_type() == Asc.c_oAscColor.COLOR_TYPE_SCHEME) {
color = {color: Common.Utils.ThemeColor.getHexColor(sdkColor.get_r(), sdkColor.get_g(), sdkColor.get_b()), effectValue: sdkColor.get_value()};
} else {
color = Common.Utils.ThemeColor.getHexColor(sdkColor.get_r(), sdkColor.get_g(), sdkColor.get_b());
}
}
}
this.fillColor = color;
return color;
}
}

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

@ -16,7 +16,7 @@ import EditHeaderController from "../../controller/edit/EditHeader";
import {PageTextFonts, PageTextAddFormatting, PageTextBullets, PageTextNumbers, PageTextLineSpacing, PageTextFontColor, PageTextCustomFontColor, PageTextBackgroundColor, PageTextCustomBackColor} from "./EditText";
import {ParagraphAdvSettings, PageParagraphBackColor, PageParagraphCustomColor} from "./EditParagraph";
import {PageWrap, PageReorder, PageReplace} from "./EditShape";
import {PageShapeStyle, PageShapeCustomFillColor, PageWrap, PageReorder, PageReplace} from "./EditShape";
import {PageImageReorder, PageImageReplace, PageImageWrap, PageLinkSettings} from "./EditImage";
import {PageTableOptions, PageTableWrap, PageTableStyle} from "./EditTable";
import {PageChartWrap, PageChartReorder} from "./EditChart";
@ -73,6 +73,14 @@ const routes = [
component: PageParagraphCustomColor,
},
//Edit shape
{
path: '/edit-shape-style/',
component: PageShapeStyle,
},
{
path: '/edit-shape-custom-fill-color/',
component: PageShapeCustomFillColor,
},
{
path: '/edit-shape-wrap/',
component: PageWrap,

89
apps/documenteditor/mobile/src/view/edit/EditShape.jsx
View file

@ -1,13 +1,88 @@
import React, {Fragment, useState} from 'react';
import {observer, inject} from "mobx-react";
import {List, ListItem, Icon, Row, Page, Navbar, BlockTitle, Toggle, Range, ListButton} from 'framework7-react';
import {List, ListItem, Icon, Row, Page, Navbar, BlockTitle, Toggle, Range, ListButton, Link, Tabs, Tab} from 'framework7-react';
import { useTranslation } from 'react-i18next';
import {Device} from '../../../../../common/mobile/utils/device';
import {CustomColorPicker, ThemeColorPalette} from "../../../../../common/mobile/lib/component/ThemeColorPalette.jsx";
const PageCustomFillColor = props => {
const { t } = useTranslation();
const _t = t('Edit', {returnObjects: true});
let fillColor = props.storeShapeSettings.fillColor;
if (typeof fillColor === 'object') {
fillColor = fillColor.color;
}
const onAddNewColor = (colors, color) => {
props.storePalette.changeCustomColors(colors);
props.onFillColor(color);
props.storeShapeSettings.setFillColor(color);
props.f7router.back();
};
return(
<Page>
<Navbar title={_t.textCustomColor} backLink={_t.textBack} />
<CustomColorPicker currentColor={fillColor} onAddNewColor={onAddNewColor}/>
</Page>
)
};
const FillTab = inject("storeFocusObjects", "storeShapeSettings", "storePalette")(observer(props => {
const { t } = useTranslation();
const _t = t('Edit', {returnObjects: true});
const storeShapeSettings = props.storeShapeSettings;
const shapeObject = props.storeFocusObjects.shapeObject;
const curFillColor = storeShapeSettings.fillColor ? storeShapeSettings.fillColor : storeShapeSettings.getFillColor(shapeObject);
const customColors = props.storePalette.customColors;
const changeColor = (color, effectId, effectValue) => {
if (color !== 'empty') {
if (effectId !==undefined ) {
const newColor = {color: color, effectId: effectId, effectValue: effectValue};
props.onFillColor(newColor);
storeShapeSettings.setFillColor(newColor);
} else {
props.onFillColor(color);
storeShapeSettings.setFillColor(color);
}
} else {
// open custom color menu
props.f7router.navigate('/edit-shape-custom-fill-color/');
}
};
return(
<Fragment>
<ThemeColorPalette changeColor={changeColor} curColor={curFillColor} customColors={customColors} transparent={true}/>
<List>
<ListItem title={_t.textAddCustomColor} link={'/edit-shape-custom-fill-color/'} routeProps={{
onFillColor: props.onFillColor
}}></ListItem>
</List>
</Fragment>
)
}));
const PageStyle = props => {
const { t } = useTranslation();
const _t = t('Edit', {returnObjects: true});
return (
<Page>
<Navbar backLink={_t.textBack}>
<div className='tab-buttons tabbar'>
<Link key={"de-link-shape-fill"} tabLink={"#edit-shape-fill"} tabLinkActive={true}>{_t.textFill}</Link>
<Link key={"de-link-shape-border"} tabLink={"#edit-shape-border"}>{_t.textBorder}</Link>
<Link key={"de-link-shape-effects"} tabLink={"#edit-shape-effects"}>{_t.textEffects}</Link>
</div>
</Navbar>
<Tabs animated>
<Tab key={"de-tab-shape-fill"} id={"edit-shape-fill"} className="page-content" tabActive={true}>
<FillTab onFillColor={props.onFillColor}/>
</Tab>
<Tab key={"de-tab-shape-border"} id={"edit-shape-border"} className="page-content">
border
</Tab>
<Tab key={"de-tab-shape-effects"} id={"edit-shape-effects"} className="page-content">
effects
</Tab>
</Tabs>
</Page>
)
};
@ -170,7 +245,9 @@ const EditShape = props => {
return (
<Fragment>
<List>
<ListItem title={_t.textStyle}></ListItem>
<ListItem title={_t.textStyle} link='/edit-shape-style/' routeProps={{
onFillColor: props.onFillColor
}}></ListItem>
<ListItem title={_t.textWrap} link='/edit-shape-wrap/' routeProps={{
onWrapType: props.onWrapType,
onShapeAlign: props.onShapeAlign,
@ -193,13 +270,15 @@ const EditShape = props => {
};
const EditShapeContainer = inject("storeFocusObjects")(observer(EditShape));
const PageStyleContainer = inject("storeFocusObjects")(observer(PageStyle));
const PageShapeStyle = inject("storeFocusObjects")(observer(PageStyle));
const PageShapeCustomFillColor = inject("storeFocusObjects", "storeShapeSettings", "storePalette")(observer(PageCustomFillColor));
const PageWrapContainer = inject("storeShapeSettings", "storeFocusObjects")(observer(PageWrap));
const PageReplaceContainer = inject("storeShapeSettings","storeFocusObjects")(observer(PageReplace));
const PageReorderContainer = inject("storeFocusObjects")(observer(PageReorder));
export {EditShapeContainer as EditShape,
PageStyleContainer as PageStyle,
PageShapeStyle,
PageShapeCustomFillColor,
PageWrapContainer as PageWrap,
PageReplaceContainer as PageReplace,
PageReorderContainer as PageReorder}