[PE mobile] Maked Style Settings
This commit is contained in:
parent
a6e1bf5394
commit
923cb7f3f5
|
@ -130,7 +130,7 @@
|
|||
"Common": {
|
||||
"ThemeColorPalette": {
|
||||
"textThemeColors": "Theme Colors",
|
||||
"textStandardColors": "Standard Colors",
|
||||
"textStandartColors": "Standard Colors",
|
||||
"textCustomColors": "Custom Colors"
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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;
|
|
@ -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;
|
|
@ -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) {
|
||||
|
|
|
@ -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
|
||||
}
|
||||
];
|
||||
|
||||
|
|
|
@ -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};
|
|
@ -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;
|
Loading…
Reference in a new issue