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

[PE mobile] Make Style Settings

Browse source
This commit is contained in:
SergeyEzhin 2021-01-13 17:08:35 +03:00
parent b5748db742
commit 0512adb054
4 changed files with 106 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
apps/presentationeditor/mobile/src/controller/edit/Style.jsx
View file

@ -1,14 +1,34 @@
import React, { Component } from "react";
import Style from "../../view/edit/Style";
import { Style } from "../../view/edit/Style";
class StyleController extends Component {
constructor(props) {
super(props);
}
onFillColor(color) {
const api = Common.EditorApi.get();
let props = new Asc.CAscSlideProps(),
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));
}
props.put_background(fill);
api.SetSlideProps(props);
};
render() {
return (
<Style />
<Style onFillColor={this.onFillColor} />
);
}
}

36
apps/presentationeditor/mobile/src/store/style.js
View file

@ -1,23 +1,33 @@
import {action, observable} from 'mobx';
export class storeStyle {
@observable color = undefined;
@observable fillColor = undefined;
@action resetColor (color) {
let value;
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()
@action getFillColor (slideObject) {
let color = 'transparent';
let fill = slideObject.get_background(),
fillType = fill.get_type();
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());
}
}
} else {
value = Common.Utils.ThemeColor.getHexColor(color.get_r(), color.get_g(), color.get_b());
}
this.color = value;
this.fillColor = color;
}
// @action changeCustomColors (colors) {
// this.customColors = colors;
// }
@action changeCustomColors (colors) {
this.customColors = colors;
}
}

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

@ -11,6 +11,7 @@ import LayoutController from "../../controller/edit/Layout";
import TransitionController from '../../controller/edit/Transition';
import ThemeController from '../../controller/edit/Theme';
import StyleController from '../../controller/edit/Style';
import { CustomColor } from './Style';
import { Effect } from './Transition';
import { Type } from './Transition';
//import EditShapeController from "../../controller/edit/EditShape";
@ -43,6 +44,10 @@ const routes = [
{
path: '/style/',
component: StyleController
},
{
path: '/edit-custom-color/',
component: CustomColor
}
];

74
apps/presentationeditor/mobile/src/view/edit/Style.jsx
View file

@ -7,21 +7,30 @@ import { ThemeColorPalette, CustomColorPicker } from '../../../../../common/mobi
const PageStyle = props => {
const { t } = useTranslation();
const _t = t("View.Edit", { returnObjects: true });
const color = props.storeStyle.color;
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/');
// }
// };
const storeFocusObjects = props.storeFocusObjects;
const slideObject = storeFocusObjects.slideObject;
const storePalette = props.storePalette;
const storeStyle = props.storeStyle;
storeStyle.getFillColor(slideObject);
const customColors = storePalette.customColors;
const fillColor = storeStyle.fillColor;
const changeColor = (color, effectId) => {
if (color !== 'empty') {
if (effectId !==undefined ) {
props.onFillColor({color: color, effectId: effectId});
} else {
props.onFillColor(color);
}
} else {
// open custom color menu
props.f7router.navigate('/edit-custom-color/');
}
};
return (
<Page className="slide-style">
@ -30,14 +39,43 @@ const PageStyle = props => {
<Link icon='icon-expand-down' sheetClose></Link>
</NavRight>
</Navbar>
<ThemeColorPalette curColor={color} customColors={customColors} transparent={true} />
<ThemeColorPalette changeColor={changeColor} curColor={fillColor} customColors={customColors} transparent={true} />
<List>
<ListItem title={_t.textAddCustomColor} link={'/edit-text-custom-font-color/'}></ListItem>
<ListItem title={_t.textAddCustomColor} link={'/edit-custom-color/'} routeProps={{
onFillColor: props.onFillColor
}}></ListItem>
</List>
</Page>
);
};
const Style = inject("storeStyle", "storePalette")(observer(PageStyle));
const PageStyleCustomColor = props => {
const { t } = useTranslation();
const _t = t('View.Edit', {returnObjects: true});
export default Style;
let fillColor = props.storeStyle.fillColor;
if (typeof fillColor === 'object') {
fillColor = fillColor.color;
}
const onAddNewColor = (colors, color) => {
props.storePalette.changeCustomColors(colors);
props.onFillColor(color);
// props.f7router.back();
};
return(
<Page>
<Navbar title={_t.textCustomColor} backLink={_t.textBack} />
<CustomColorPicker currentColor={fillColor} onAddNewColor={onAddNewColor} routeProps={{
onFillColor: props.onFillColor
}}/>
</Page>
)
};
const Style = inject("storeStyle", "storePalette", "storeFocusObjects")(observer(PageStyle));
const CustomColor = inject("storeStyle", "storePalette", "storeFocusObjects")(observer(PageStyleCustomColor));
export {Style, CustomColor};