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

[PE mobile] Make Presentation Settings

Browse source
This commit is contained in:
SergeyEzhin 2020-12-10 23:02:25 +03:00
parent 38029deadb
commit c7f7006400
7 changed files with 194 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -48,7 +48,11 @@
"textShowNotification": "Show Notification",
"textDisableAllMacrosWithNotification": "Disable all macros with notification",
"textEnableAll": "Enable All",
"textEnableAllMacrosWithoutNotification": "Enable all macros without notification"
"textEnableAllMacrosWithoutNotification": "Enable all macros without notification",
"textSlideSize": "Slide Size",
"mniSlideStandard": "Standard (4:3)",
"mniSlideWide": "Widescreen (16:9)",
"textColorSchemes": "Color Schemes"
}
}
}

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

@ -4,6 +4,7 @@ import { inject } from "mobx-react";
import { withTranslation } from 'react-i18next';
import CollaborationController from '../../../../common/mobile/lib/controller/Collaboration.jsx'
@inject("storePresentationSettings")
class MainController extends Component {
constructor(props) {
super(props)
@ -160,9 +161,19 @@ class MainController extends Component {
bindEvents() {
const me = this;
// me.api.asc_registerCallback('asc_onError', _.bind(me.onError, me));
me.api.asc_registerCallback('asc_onDocumentContentReady', me._onDocumentContentReady.bind(me));
me.api.asc_registerCallback('asc_onOpenDocumentProgress', me._onOpenDocumentProgress.bind(me));
const storePresentationSettings = this.props.storePresentationSettings;
me.api.asc_registerCallback('asc_onPresentationSize', (width, height) => {
// const api = Common.EditorApi.get();
storePresentationSettings.changeSlideSize(width, height);
});
// api.asc_registerCallback('asc_onSendThemeColorSchemes', _.bind(this.onSendThemeColorSchemes, this));
// me.api.asc_registerCallback('asc_onDocumentUpdateVersion', _.bind(me.onUpdateVersion, me));
// me.api.asc_registerCallback('asc_onServerVersion', _.bind(me.onServerVersion, me));
// me.api.asc_registerCallback('asc_onAdvancedOptions', _.bind(me.onAdvancedOptions, me));

24
apps/presentationeditor/mobile/src/controller/settings/PresentationSettings.jsx Normal file
View file

@ -0,0 +1,24 @@
import React, {Component} from 'React';
import {PresentationSettings} from '../../view/settings/PresentationSettings';
class PresentationSettingsController extends Component {
constructor(props) {
super(props);
// this.onSlideSize = this.onSlideSize.bind(this);
}
onSlideSize(value, slideSizeArr) {
const api = Common.EditorApi.get();
api.changeSlideSize(slideSizeArr[value][0], slideSizeArr[value][1]);
}
render() {
return (
<PresentationSettings
onSlideSize={this.onSlideSize}
/>
)
}
}
export default PresentationSettingsController;

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

@ -3,6 +3,7 @@
// import {storeFocusObjects} from "./focusObjects";
import {storeUsers} from '../../../../common/mobile/lib/store/users';
import {storeApplicationSettings} from './applicationSettings';
import {storePresentationSettings} from './presentationSettings';
// import {storeTextSettings} from "./textSettings";
// import {storeParagraphSettings} from "./paragraphSettings";
// import {storeShapeSettings} from "./shapeSettings";
@ -14,7 +15,8 @@ export const stores = {
// storeFocusObjects: new storeFocusObjects(),
// storeDocumentSettings: new storeDocumentSettings(),
users: new storeUsers(),
storeApplicationSettings: new storeApplicationSettings()
storeApplicationSettings: new storeApplicationSettings(),
storePresentationSettings: new storePresentationSettings()
// storeTextSettings: new storeTextSettings(),
// storeParagraphSettings: new storeParagraphSettings(),
// storeShapeSettings: new storeShapeSettings(),

38
apps/presentationeditor/mobile/src/store/presentationSettings.js Normal file
View file

@ -0,0 +1,38 @@
import {action, observable, computed} from 'mobx';
export class storePresentationSettings {
@observable widthSlide;
@observable heightSlide;
@observable slideSize = 0;
@action changeSlideSize(width, height) {
this.widthSlide = width;
this.heightSlide = height;
}
getSlideSizes() {
const slideSizeArr = [[254, 190.5], [254, 143]];
return slideSizeArr;
}
@action changeSlideFormat(value) {
this.slideSize = value;
}
@computed get pageSizesIndex() {
const slideSizes = this.getSlideSizes();
let ind = -1;
slideSizes.forEach((size, index) => {
if(Math.abs(size[0] - this.widthSlide) < 0.001 && Math.abs(size[1] - this.heightSlide) < 0.001) {
ind = index;
}
});
if (ind === -1) {
ind = -1;
}
return ind;
}
}

103
apps/presentationeditor/mobile/src/view/settings/PresentationSettings.jsx Normal file
View file

@ -0,0 +1,103 @@
import React, {Fragment} from "react";
import { observer, inject } from "mobx-react";
import { Page, Navbar, List, ListItem, BlockTitle, Toggle } from "framework7-react";
import { useTranslation } from "react-i18next";
const PagePresentationSettings = props => {
const { t } = useTranslation();
const _t = t("View.Settings", { returnObjects: true });
const store = props.storePresentationSettings;
const slideSizeArr = store.getSlideSizes();
console.log(slideSizeArr);
const widthSlide = store.widthSlide;
const heightSlide = store.heightSlide;
const slideSize = store.slideSize;
console.log(widthSlide, heightSlide);
return (
<Page>
<Navbar title={_t.textPresentationSettings} backLink={_t.textBack} />
{slideSizeArr.length ? (
<Fragment>
<BlockTitle>{_t.textSlideSize}</BlockTitle>
<List>
{/* {slideSizeArr.map((size, index) => {
if(Math.abs(size[0] - widthSlide) < 0.001 && Math.abs(size[1] - heightSlide) < 0.001) {
console.log(true);
return (
<ListItem radio name="slide-size" value={index} title={index === 0 ? _t.mniSlideStandard : _t.mniSlideWide}></ListItem>
)
}
})} */}
<ListItem radio name="slide-size" value="0" checked={slideSize === 0}
onChange={() => {
props.onSlideSize(0, slideSizeArr);
store.changeSlideFormat(0);
}} title={_t.mniSlideStandard}></ListItem>
<ListItem radio name="slide-size" value="1" checked={slideSize === 1}
onChange={() => {
props.onSlideSize(1, slideSizeArr);
store.changeSlideFormat(1);
}} title={_t.mniSlideWide}></ListItem>
</List>
</Fragment>
): null}
<List mediaList>
<ListItem title={_t.textColorSchemes} link="/color-schemes/"></ListItem>
</List>
</Page>
)
}
const PagePresentationColorSchemes = props => {
const { t } = useTranslation();
// const curScheme = props.initPageColorSchemes();
// const [stateScheme, setScheme] = useState(curScheme);
const _t = t('View.Settings', {returnObjects: true});
// const storeSettings = props.storeDocumentSettings;
// const allSchemes = storeSettings.allSchemes;
return (
<Page>
<Navbar title={_t.textColorSchemes} backLink={_t.textBack} />
{/* <List>
{
allSchemes ? allSchemes.map((scheme, index) => {
return (
<ListItem radio={true} className="color-schemes-menu" key={index} title={scheme.get_name()} checked={stateScheme === index}
onChange={() => {
if(index !== curScheme) {
setScheme(index);
props.onColorSchemeChange(index);
};
}}>
<div slot="before-title">
<span className="color-schema-block">
{
scheme.get_colors().map((elem, index) => {
if(index >=2 && index < 7) {
let clr = {background: "#" + Common.Utils.ThemeColor.getHexColor(elem.get_r(), elem.get_g(), elem.get_b())};
return (
<span className="color" key={index} style={clr}></span>
)
}
})
}
</span>
</div>
</ListItem>
)
}) : null
}
</List> */}
</Page>
)
};
const PresentationSettings = inject("storePresentationSettings")(observer(PagePresentationSettings));
const PresentationColorSchemes = inject("storePresentationSettings")(observer(PagePresentationColorSchemes));
export { PresentationSettings, PresentationColorSchemes }

10
apps/presentationeditor/mobile/src/view/settings/Settings.jsx
View file

@ -5,6 +5,8 @@ import {f7} from 'framework7-react';
import {Device} from '../../../../../common/mobile/utils/device';
import ApplicationSettingsController from "../../controller/settings/ApplicationSettings";
import { MacrosSettings } from "./ApplicationSettings";
import PresentationSettingsController from "../../controller/settings/PresentationSettings";
import { PresentationColorSchemes } from "./PresentationSettings";
const routes = [
{
@ -18,6 +20,14 @@ const routes = [
{
path: '/macros-settings/',
component: MacrosSettings
},
{
path: '/presentation-settings/',
component: PresentationSettingsController
},
{
path: '/color-schemes/',
component: PresentationColorSchemes
}
/*{
path: '/presentation-settings/',