From c7f7006400c774a2064b422c5620bc23ebca5f29 Mon Sep 17 00:00:00 2001 From: SergeyEzhin Date: Thu, 10 Dec 2020 23:02:25 +0300 Subject: [PATCH] [PE mobile] Make Presentation Settings --- apps/presentationeditor/mobile/locale/en.json | 6 +- .../mobile/src/controller/Main.jsx | 11 ++ .../settings/PresentationSettings.jsx | 24 ++++ .../mobile/src/store/mainStore.js | 4 +- .../mobile/src/store/presentationSettings.js | 38 +++++++ .../view/settings/PresentationSettings.jsx | 103 ++++++++++++++++++ .../mobile/src/view/settings/Settings.jsx | 10 ++ 7 files changed, 194 insertions(+), 2 deletions(-) create mode 100644 apps/presentationeditor/mobile/src/controller/settings/PresentationSettings.jsx create mode 100644 apps/presentationeditor/mobile/src/store/presentationSettings.js create mode 100644 apps/presentationeditor/mobile/src/view/settings/PresentationSettings.jsx diff --git a/apps/presentationeditor/mobile/locale/en.json b/apps/presentationeditor/mobile/locale/en.json index 4988d8b44..075e88334 100644 --- a/apps/presentationeditor/mobile/locale/en.json +++ b/apps/presentationeditor/mobile/locale/en.json @@ -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" } } } \ No newline at end of file diff --git a/apps/presentationeditor/mobile/src/controller/Main.jsx b/apps/presentationeditor/mobile/src/controller/Main.jsx index 06c2b87c1..678c493bd 100644 --- a/apps/presentationeditor/mobile/src/controller/Main.jsx +++ b/apps/presentationeditor/mobile/src/controller/Main.jsx @@ -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)); diff --git a/apps/presentationeditor/mobile/src/controller/settings/PresentationSettings.jsx b/apps/presentationeditor/mobile/src/controller/settings/PresentationSettings.jsx new file mode 100644 index 000000000..86d6ee3a0 --- /dev/null +++ b/apps/presentationeditor/mobile/src/controller/settings/PresentationSettings.jsx @@ -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 ( + + ) + } +} + +export default PresentationSettingsController; \ No newline at end of file diff --git a/apps/presentationeditor/mobile/src/store/mainStore.js b/apps/presentationeditor/mobile/src/store/mainStore.js index 3a22172b7..63a6bc6f6 100644 --- a/apps/presentationeditor/mobile/src/store/mainStore.js +++ b/apps/presentationeditor/mobile/src/store/mainStore.js @@ -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(), diff --git a/apps/presentationeditor/mobile/src/store/presentationSettings.js b/apps/presentationeditor/mobile/src/store/presentationSettings.js new file mode 100644 index 000000000..e582d1693 --- /dev/null +++ b/apps/presentationeditor/mobile/src/store/presentationSettings.js @@ -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; + } +} \ No newline at end of file diff --git a/apps/presentationeditor/mobile/src/view/settings/PresentationSettings.jsx b/apps/presentationeditor/mobile/src/view/settings/PresentationSettings.jsx new file mode 100644 index 000000000..6b47b1112 --- /dev/null +++ b/apps/presentationeditor/mobile/src/view/settings/PresentationSettings.jsx @@ -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 ( + + + {slideSizeArr.length ? ( + + {_t.textSlideSize} + + {/* {slideSizeArr.map((size, index) => { + if(Math.abs(size[0] - widthSlide) < 0.001 && Math.abs(size[1] - heightSlide) < 0.001) { + console.log(true); + return ( + + ) + } + })} */} + { + props.onSlideSize(0, slideSizeArr); + store.changeSlideFormat(0); + }} title={_t.mniSlideStandard}> + { + props.onSlideSize(1, slideSizeArr); + store.changeSlideFormat(1); + }} title={_t.mniSlideWide}> + + + ): null} + + + + + + ) +} + +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 ( + + + {/* + { + allSchemes ? allSchemes.map((scheme, index) => { + return ( + { + if(index !== curScheme) { + setScheme(index); + props.onColorSchemeChange(index); + }; + }}> +
+ + { + 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 ( + + ) + } + }) + } + + +
+ + ) + }) : null + } + */} + + + ) +}; + +const PresentationSettings = inject("storePresentationSettings")(observer(PagePresentationSettings)); +const PresentationColorSchemes = inject("storePresentationSettings")(observer(PagePresentationColorSchemes)); + +export { PresentationSettings, PresentationColorSchemes } \ No newline at end of file diff --git a/apps/presentationeditor/mobile/src/view/settings/Settings.jsx b/apps/presentationeditor/mobile/src/view/settings/Settings.jsx index fb1e66dbf..edda8fc9e 100644 --- a/apps/presentationeditor/mobile/src/view/settings/Settings.jsx +++ b/apps/presentationeditor/mobile/src/view/settings/Settings.jsx @@ -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/',