[PE mobile] Maked Style Settings

This commit is contained in:
SergeyEzhin 2021-01-14 17:02:36 +03:00
parent a6e1bf5394
commit 923cb7f3f5
7 changed files with 29 additions and 75 deletions

View file

@ -130,7 +130,7 @@
"Common": {
"ThemeColorPalette": {
"textThemeColors": "Theme Colors",
"textStandardColors": "Standard Colors",
"textStandartColors": "Standard Colors",
"textCustomColors": "Custom Colors"
}
}

View file

@ -1,7 +1,7 @@
import React, { Component } from "react";
import { Style } from "../../view/edit/Style";
import { StyleFillColor } from "../../view/edit/StyleSlideSettings";
class StyleController extends Component {
class StyleSlideController extends Component {
constructor(props) {
super(props);
}
@ -28,9 +28,9 @@ class StyleController extends Component {
render() {
return (
<Style onFillColor={this.onFillColor} />
<StyleFillColor onFillColor={this.onFillColor} />
);
}
}
export default StyleController;
export default StyleSlideController;

View file

@ -1,16 +0,0 @@
import React, { Component } from "react";
import Type from "../../view/edit/Type";
class TypeController extends Component {
constructor(props) {
super(props);
}
render() {
return (
<Type />
);
}
}
export default TypeController;

View file

@ -6,13 +6,13 @@ export class storeStyle {
@action getFillColor (slideObject) {
let color = 'transparent';
let fill = slideObject.get_background(),
fillType = fill.get_type();
let sdkColor;
if (fillType == Asc.c_oAscFill.FILL_TYPE_SOLID) {
fill = fill.get_fill();
const sdkColor = fill.get_color();
sdkColor = fill.get_color();
if (sdkColor) {
if (sdkColor.get_type() == Asc.c_oAscColor.COLOR_TYPE_SCHEME) {
@ -24,7 +24,7 @@ export class storeStyle {
}
this.fillColor = color;
return this.fillColor;
return color;
}
@action changeFillColor (color) {

View file

@ -10,8 +10,8 @@ import EditTextController from "../../controller/edit/EditText";
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 StyleSlideController from '../../controller/edit/StyleSlideSettings';
import { CustomFillColor } from './StyleSlideSettings';
import { Effect } from './Transition';
import { Type } from './Transition';
//import EditShapeController from "../../controller/edit/EditShape";
@ -43,11 +43,11 @@ const routes = [
},
{
path: '/style/',
component: StyleController
component: StyleSlideController
},
{
path: '/edit-custom-color/',
component: CustomColor
component: CustomFillColor
}
];

View file

@ -2,9 +2,9 @@ import React from "react";
import { observer, inject } from "mobx-react";
import { Page, Navbar, List, ListItem, NavRight, Link } from "framework7-react";
import { useTranslation } from "react-i18next";
import { ThemeColorPalette, CustomColorPicker } from '../../../../../common/mobile/lib/component/ThemeColorPalette.jsx';
import { ThemeColorPalette, CustomColorPicker } from '../../../../../common/mobile/lib/component/ThemeColorPalette.js';
const PageStyle = props => {
const PageFillColor = props => {
const { t } = useTranslation();
const _t = t("View.Edit", { returnObjects: true });
const storeFocusObjects = props.storeFocusObjects;
@ -12,18 +12,17 @@ const PageStyle = props => {
const storePalette = props.storePalette;
const storeStyle = props.storeStyle;
const customColors = storePalette.customColors;
storeStyle.fillColor ? storeStyle.fillColor : storeStyle.getFillColor(slideObject);
const fillColor = JSON.parse(JSON.stringify(storeStyle.fillColor));
console.log(fillColor);
const fillColor = storeStyle.fillColor ? storeStyle.fillColor : storeStyle.getFillColor(slideObject);
const changeColor = (color, effectId, effectValue) => {
if (color !== 'empty') {
if (effectId !==undefined ) {
storeStyle.changeFillColor({color: color, effectId: effectId, effectValue: effectValue});
props.onFillColor({color: color, effectId: effectId, effectValue: effectValue});
if (effectId !== undefined ) {
const newColor = {color: color, effectId: effectId, effectValue: effectValue};
props.onFillColor(newColor);
storeStyle.changeFillColor(newColor);
} else {
storeStyle.changeFillColor(color);
props.onFillColor(color);
storeStyle.changeFillColor(color);
}
} else {
// open custom color menu
@ -32,7 +31,7 @@ const PageStyle = props => {
};
return (
<Page className="slide-style">
<Page>
<Navbar title={_t.textFill} backLink={_t.textBack}>
<NavRight>
<Link icon='icon-expand-down' sheetClose></Link>
@ -48,7 +47,7 @@ const PageStyle = props => {
);
};
const PageStyleCustomColor = props => {
const PageCustomFillColor = props => {
const { t } = useTranslation();
const _t = t('View.Edit', {returnObjects: true});
@ -61,20 +60,19 @@ const PageStyleCustomColor = props => {
const onAddNewColor = (colors, color) => {
props.storePalette.changeCustomColors(colors);
props.onFillColor(color);
// props.f7router.back();
props.storeStyle.changeFillColor(color);
props.f7router.back();
};
return(
return (
<Page>
<Navbar title={_t.textCustomColor} backLink={_t.textBack} />
<CustomColorPicker currentColor={fillColor} onAddNewColor={onAddNewColor} routeProps={{
onFillColor: props.onFillColor
}}/>
<CustomColorPicker currentColor={fillColor} onAddNewColor={onAddNewColor} />
</Page>
)
};
const Style = inject("storeStyle", "storePalette", "storeFocusObjects")(observer(PageStyle));
const CustomColor = inject("storeStyle", "storePalette", "storeFocusObjects")(observer(PageStyleCustomColor));
const StyleFillColor = inject("storeStyle", "storePalette", "storeFocusObjects")(observer(PageFillColor));
const CustomFillColor = inject("storeStyle", "storePalette", "storeFocusObjects")(observer(PageCustomFillColor));
export {Style, CustomColor};
export {StyleFillColor, CustomFillColor};

View file

@ -1,28 +0,0 @@
import React, {useState} from "react";
import { observer, inject } from "mobx-react";
import { Page, Navbar, List, ListItem, NavRight, Link, Toggle, Range, ListItemCell } from "framework7-react";
import { useTranslation } from "react-i18next";
const PageType= props => {
const { t } = useTranslation();
const _t = t("View.Edit", { returnObjects: true });
return (
<Page>
<Navbar title={_t.textType} backLink={_t.textBack}>
<NavRight>
<Link icon='icon-expand-down' sheetClose></Link>
</NavRight>
</Navbar>
<List mediaList>
<ListItem radio name="editslide-effect-type"></ListItem>
<ListItem radio name="editslide-effect-type"></ListItem>
<ListItem radio name="editslide-effect-type"></ListItem>
</List>
</Page>
);
};
const Type = inject("storeType")(observer(PageType));
export default Type;