diff --git a/apps/presentationeditor/mobile/locale/en.json b/apps/presentationeditor/mobile/locale/en.json index 4dea6ae79..d4ae0d7d0 100644 --- a/apps/presentationeditor/mobile/locale/en.json +++ b/apps/presentationeditor/mobile/locale/en.json @@ -62,7 +62,11 @@ "textAuthor": "Author", "textPresentationTitle": "Presentation Title", "textOwner": "Owner", - "textUploaded": "Uploaded" + "textUploaded": "Uploaded", + "textSlideSize": "Slide Size", + "mniSlideStandard": "Standard (4:3)", + "mniSlideWide": "Widescreen (16:9)", + "textColorSchemes": "Color Schemes" }, "Add": { "textSlide": "Slide", diff --git a/apps/presentationeditor/mobile/src/controller/Main.jsx b/apps/presentationeditor/mobile/src/controller/Main.jsx index 6cd58cd2d..00beac336 100644 --- a/apps/presentationeditor/mobile/src/controller/Main.jsx +++ b/apps/presentationeditor/mobile/src/controller/Main.jsx @@ -4,7 +4,7 @@ import { inject } from "mobx-react"; import { withTranslation } from 'react-i18next'; import CollaborationController from '../../../../common/mobile/lib/controller/Collaboration.jsx' -@inject("storeFocusObjects", "storeAppOptions", "storePresentationInfo") +@inject("storeFocusObjects", "storeAppOptions", "storePresentationInfo", "storePresentationSettings") class MainController extends Component { constructor(props) { super(props) @@ -167,9 +167,22 @@ 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) => { + storePresentationSettings.changeSizeIndex(width, height); + }); + + me.api.asc_registerCallback('asc_onSendThemeColorSchemes', (arr) => { + storePresentationSettings.addSchemes(arr); + }); + + // 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..144d4a66e --- /dev/null +++ b/apps/presentationeditor/mobile/src/controller/settings/PresentationSettings.jsx @@ -0,0 +1,49 @@ +import React, {Component} from 'React'; +import { observer, inject } from "mobx-react"; +import {PresentationSettings} from '../../view/settings/PresentationSettings'; + +class PresentationSettingsController extends Component { + constructor(props) { + super(props); + this.initSlideSize = this.initSlideSize.bind(this); + } + + initSlideSize() { + if (!this.init) { + const api = Common.EditorApi.get(); + this.props.storePresentationSettings.changeSizeIndex(api.get_PresentationWidth(), api.get_PresentationHeight()); + this.init = true; + } + } + + onSlideSize(slideSizeArr) { + const api = Common.EditorApi.get(); + api.changeSlideSize(slideSizeArr[0], slideSizeArr[1]); + } + + // Color Schemes + + initPageColorSchemes() { + const api = Common.EditorApi.get(); + return api.asc_GetCurrentColorSchemeIndex(); + } + + onColorSchemeChange(newScheme) { + const api = Common.EditorApi.get(); + api.asc_ChangeColorSchemeByIdx(newScheme); + } + + + render() { + return ( + + ) + } +} + +export default inject("storePresentationSettings")(observer(PresentationSettingsController)); \ No newline at end of file diff --git a/apps/presentationeditor/mobile/src/less/app-ios.less b/apps/presentationeditor/mobile/src/less/app-ios.less index a1575794a..55a23a31e 100644 --- a/apps/presentationeditor/mobile/src/less/app-ios.less +++ b/apps/presentationeditor/mobile/src/less/app-ios.less @@ -3,3 +3,27 @@ } + +// Color Schemes + +.color-schemes-menu { + cursor: pointer; + display: block; + background-color: #fff; + .item-inner { + justify-content: flex-start; + } + .color-schema-block { + display: flex; + } + .color { + min-width: 26px; + min-height: 26px; + margin: 0 2px 0 0; + box-shadow: 0 0 0 1px rgba(0,0,0,.15) inset; + } + .item-title { + margin-left: 20px; + color: #212121; + } +} diff --git a/apps/presentationeditor/mobile/src/less/app-material.less b/apps/presentationeditor/mobile/src/less/app-material.less index 879f3a67c..3a7fb97e7 100644 --- a/apps/presentationeditor/mobile/src/less/app-material.less +++ b/apps/presentationeditor/mobile/src/less/app-material.less @@ -21,4 +21,28 @@ align-items: center; width: auto; } +} + +// Color Schemes + +.color-schemes-menu { + cursor: pointer; + display: block; + background-color: #fff; + .item-inner { + justify-content: flex-start; + } + .color-schema-block { + display: flex; + } + .color { + min-width: 26px; + min-height: 26px; + margin: 0 2px 0 0; + box-shadow: 0 0 0 1px rgba(0,0,0,.15) inset; + } + .item-title { + margin-left: 20px; + color: #212121; + } } \ 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 f5e8f767a..4db12d1fd 100644 --- a/apps/presentationeditor/mobile/src/store/mainStore.js +++ b/apps/presentationeditor/mobile/src/store/mainStore.js @@ -5,6 +5,7 @@ import {storeFocusObjects} from "./focusObjects"; import {storeUsers} from '../../../../common/mobile/lib/store/users'; import {storeApplicationSettings} from './applicationSettings'; import {storePresentationInfo} from './presentationInfo'; +import {storePresentationSettings} from './presentationSettings'; // import {storeTextSettings} from "./textSettings"; // import {storeParagraphSettings} from "./paragraphSettings"; // import {storeShapeSettings} from "./shapeSettings"; @@ -18,7 +19,8 @@ export const stores = { // storeDocumentSettings: new storeDocumentSettings(), users: new storeUsers(), storeApplicationSettings: new storeApplicationSettings(), - storePresentationInfo: new storePresentationInfo() + storePresentationInfo: new storePresentationInfo(), + 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..6ae95de51 --- /dev/null +++ b/apps/presentationeditor/mobile/src/store/presentationSettings.js @@ -0,0 +1,27 @@ +import {action, observable} from 'mobx'; + +export class storePresentationSettings { + slideSize = [[254, 190.5], [254, 143]]; + @observable slideSizeIndex; + + get getSlideSizes() { + return this.slideSize; + } + + @action changeSizeIndex(width, height) { + this.slideSize.forEach((array, index) => { + if(Math.abs(array[0] - width) < 0.001 && Math.abs((array[1] - height)) < 0.001) { + this.slideSizeIndex = index; + } + }) + } + + // Color Schemes + + @observable allSchemes; + + @action addSchemes(arr) { + this.allSchemes = arr; + } + +} \ 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..e6da2e822 --- /dev/null +++ b/apps/presentationeditor/mobile/src/view/settings/PresentationSettings.jsx @@ -0,0 +1,86 @@ +import React, {useState} from "react"; +import { observer, inject } from "mobx-react"; +import { Page, Navbar, List, ListItem, BlockTitle } from "framework7-react"; +import { useTranslation } from "react-i18next"; + +const PagePresentationSettings = props => { + const { t } = useTranslation(); + const _t = t("View.Settings", { returnObjects: true }); + props.initSlideSize(); + const store = props.storePresentationSettings; + const slideSizeArr = store.getSlideSizes; + const slideSizeIndex = store.slideSizeIndex; + + return ( + + + + {_t.textSlideSize} + + props.onSlideSize(slideSizeArr[0])} title={_t.mniSlideStandard}> + props.onSlideSize(slideSizeArr[1])} title={_t.mniSlideWide}> + + + + + + + ) +} + +const PagePresentationColorSchemes = props => { + const { t } = useTranslation(); + const curScheme = props.initPageColorSchemes(); + const [stateScheme, setScheme] = useState(curScheme); + const _t = t('View.Settings', {returnObjects: true}); + const store = props.storePresentationSettings; + const allSchemes = store.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 283f866a2..c0471856f 100644 --- a/apps/presentationeditor/mobile/src/view/settings/Settings.jsx +++ b/apps/presentationeditor/mobile/src/view/settings/Settings.jsx @@ -7,6 +7,8 @@ import ApplicationSettingsController from "../../controller/settings/Application import { MacrosSettings } from "./ApplicationSettings"; import DownloadController from "../../controller/settings/Download"; import PresentationInfoController from "../../controller/settings/PresentationInfo"; +import PresentationSettingsController from "../../controller/settings/PresentationSettings"; +import { PresentationColorSchemes } from "./PresentationSettings"; const routes = [ { @@ -28,6 +30,14 @@ const routes = [ { path: '/presentation-info/', component: PresentationInfoController + }, + { + path: '/presentation-settings/', + component: PresentationSettingsController + }, + { + path: '/color-schemes/', + component: PresentationColorSchemes } /*{ path: '/presentation-settings/', @@ -52,6 +62,21 @@ const SettingsList = withTranslation()(props => { props.onOptionClick(page) }; + const closeModal = () => { + if (Device.phone) { + f7.sheet.close('.settings-popup', true); + } else { + f7.popover.close('#settings-popover'); + } + } + + const onPrint = () => { + closeModal(); + const api = Common.EditorApi.get(); + api.asc_Print(); + } + + return ( @@ -71,7 +96,7 @@ const SettingsList = withTranslation()(props => { - +