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

[PE mobile] Start to make Style Settings

Browse source
This commit is contained in:
SergeyEzhin 2021-01-12 16:51:57 +03:00
parent 093fd8f5ed
commit 9d02e5ef86
9 changed files with 116 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
apps/presentationeditor/mobile/locale/en.json
View file

@ -122,7 +122,16 @@
"textZoomIn": "Zoom In",
"textZoomOut": "Zoom Out",
"textZoomRotate": "Zoom and Rotate",
"textSec": "s"
"textSec": "s",
"textAddCustomColor": "Add Custom Color",
"textFill": "Fill"
}
},
"Common": {
"ThemeColorPalette": {
"textThemeColors": "Theme Colors",
"textStandardColors": "Standard Colors",
"textCustomColors": "Custom Colors"
}
}
}

4
apps/presentationeditor/mobile/src/controller/Main.jsx
View file

@ -224,6 +224,10 @@ class MainController extends Component {
storeLayout.addArrayLayouts(layouts);
});
this.api.asc_registerCallback('asc_onSendThemeColors', (colors, standart_colors) => {
Common.Utils.ThemeColor.setColors(colors, standart_colors);
});
}
_onDocumentContentReady() {

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

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

6
apps/presentationeditor/mobile/src/store/mainStore.js
View file

@ -9,6 +9,8 @@ import {storePresentationSettings} from './presentationSettings';
import { storeLayout } from './layout';
import { storeTransition } from './transition';
import { storeTheme } from './theme';
import { storeStyle } from './style';
import { storePalette } from './palette';
// import {storeTextSettings} from "./textSettings";
// import {storeParagraphSettings} from "./paragraphSettings";
// import {storeShapeSettings} from "./shapeSettings";
@ -26,7 +28,9 @@ export const stores = {
storePresentationSettings: new storePresentationSettings(),
storeLayout: new storeLayout(),
storeTransition: new storeTransition(),
storeTheme: new storeTheme()
storeTheme: new storeTheme(),
storeStyle: new storeStyle(),
storePalette: new storePalette()
// storeTextSettings: new storeTextSettings(),
// storeParagraphSettings: new storeParagraphSettings(),
// storeShapeSettings: new storeShapeSettings(),

9
apps/presentationeditor/mobile/src/store/palette.js Normal file
View file

@ -0,0 +1,9 @@
import {action, observable} from 'mobx';
export class storePalette {
@observable customColors = [];
@action changeCustomColors (colors) {
this.customColors = colors;
}
}

23
apps/presentationeditor/mobile/src/store/style.js Normal file
View file

@ -0,0 +1,23 @@
import {action, observable} from 'mobx';
export class storeStyle {
@observable color = 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()
}
} else {
value = Common.Utils.ThemeColor.getHexColor(color.get_r(), color.get_g(), color.get_b());
}
this.color = value;
}
// @action changeCustomColors (colors) {
// this.customColors = colors;
// }
}

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

@ -10,6 +10,7 @@ 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 { Effect } from './Transition';
import { Type } from './Transition';
//import EditShapeController from "../../controller/edit/EditShape";
@ -38,6 +39,10 @@ const routes = [
{
path: '/type/',
component: Type
},
{
path: '/style/',
component: StyleController
}
];

2
apps/presentationeditor/mobile/src/view/edit/EditSlide.jsx
View file

@ -15,7 +15,7 @@ const EditSlide = props => {
<ListItem title={_t.textTheme} link="/theme/"></ListItem>
<ListItem title={_t.textLayout} link="/layout/"></ListItem>
<ListItem title={_t.textTransition} link="/transition/"></ListItem>
<ListItem title={_t.textStyle} link="#"></ListItem>
<ListItem title={_t.textStyle} link="/style/"></ListItem>
</List>
</Fragment>
)

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

@ -0,0 +1,43 @@
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';
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/');
// }
// };
return (
<Page className="slide-style">
<Navbar title={_t.textFill} backLink={_t.textBack}>
<NavRight>
<Link icon='icon-expand-down' sheetClose></Link>
</NavRight>
</Navbar>
<ThemeColorPalette curColor={color} customColors={customColors} transparent={true} />
<List>
<ListItem title={_t.textAddCustomColor} link={'/edit-text-custom-font-color/'}></ListItem>
</List>
</Page>
);
};
const Style = inject("storeStyle", "storePalette")(observer(PageStyle));
export default Style;