From ea7c1dbd4572293d839b5719e4e0b2f622ed92d0 Mon Sep 17 00:00:00 2001
From: SergeyEzhin <ezhin@mail.ru>
Date: Fri, 11 Dec 2020 23:14:14 +0300
Subject: [PATCH] [PE mobile] Maked Presentation Settings
---
.../mobile/src/controller/Main.jsx | 7 +-
.../settings/PresentationSettings.jsx | 21 +++++-
.../mobile/src/less/app-ios.less | 24 +++++++
.../mobile/src/less/app-material.less | 24 +++++++
.../mobile/src/store/presentationSettings.js | 38 ++++------
.../view/settings/PresentationSettings.jsx | 70 ++++++++-----------
6 files changed, 115 insertions(+), 69 deletions(-)
diff --git a/apps/presentationeditor/mobile/src/controller/Main.jsx b/apps/presentationeditor/mobile/src/controller/Main.jsx
index 678c493bd..af08919e5 100644
--- a/apps/presentationeditor/mobile/src/controller/Main.jsx
+++ b/apps/presentationeditor/mobile/src/controller/Main.jsx
@@ -161,7 +161,7 @@ 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));
@@ -169,10 +169,13 @@ class MainController extends Component {
const storePresentationSettings = this.props.storePresentationSettings;
me.api.asc_registerCallback('asc_onPresentationSize', (width, height) => {
- // const api = Common.EditorApi.get();
storePresentationSettings.changeSlideSize(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));
diff --git a/apps/presentationeditor/mobile/src/controller/settings/PresentationSettings.jsx b/apps/presentationeditor/mobile/src/controller/settings/PresentationSettings.jsx
index 86d6ee3a0..de1a0dd7d 100644
--- a/apps/presentationeditor/mobile/src/controller/settings/PresentationSettings.jsx
+++ b/apps/presentationeditor/mobile/src/controller/settings/PresentationSettings.jsx
@@ -4,18 +4,33 @@ import {PresentationSettings} from '../../view/settings/PresentationSettings';
class PresentationSettingsController extends Component {
constructor(props) {
super(props);
- // this.onSlideSize = this.onSlideSize.bind(this);
}
- onSlideSize(value, slideSizeArr) {
+ onSlideSize(slideSizeArr) {
const api = Common.EditorApi.get();
- api.changeSlideSize(slideSizeArr[value][0], slideSizeArr[value][1]);
+ // api.changeSlideSize(slideSizeArr[value][0], slideSizeArr[value][1]);
+ 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 (
<PresentationSettings
onSlideSize={this.onSlideSize}
+ onColorSchemeChange={this.onColorSchemeChange}
+ initPageColorSchemes={this.initPageColorSchemes}
/>
)
}
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/presentationSettings.js b/apps/presentationeditor/mobile/src/store/presentationSettings.js
index e582d1693..ce06a4582 100644
--- a/apps/presentationeditor/mobile/src/store/presentationSettings.js
+++ b/apps/presentationeditor/mobile/src/store/presentationSettings.js
@@ -1,38 +1,28 @@
-import {action, observable, computed} from 'mobx';
+import {action, observable} from 'mobx';
export class storePresentationSettings {
- @observable widthSlide;
- @observable heightSlide;
- @observable slideSize = 0;
+ @observable slideSize = [];
+ @observable slideSizeValue;
- @action changeSlideSize(width, height) {
- this.widthSlide = width;
- this.heightSlide = height;
+ get getSlideSizes() {
+ return [[254, 190.5], [254, 143]];
}
- getSlideSizes() {
- const slideSizeArr = [[254, 190.5], [254, 143]];
- return slideSizeArr;
+ @action changeSlideSize(width, height) {
+ this.slideSize[0] = width;
+ this.slideSize[1] = height;
}
@action changeSlideFormat(value) {
- this.slideSize = value;
+ this.slideSizeValue = +value;
}
- @computed get pageSizesIndex() {
- const slideSizes = this.getSlideSizes();
- let ind = -1;
+ // Color Schemes
- slideSizes.forEach((size, index) => {
- if(Math.abs(size[0] - this.widthSlide) < 0.001 && Math.abs(size[1] - this.heightSlide) < 0.001) {
- ind = index;
- }
- });
+ @observable allSchemes;
- if (ind === -1) {
- ind = -1;
- }
-
- return ind;
+ @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
index 6b47b1112..a635eaaea 100644
--- a/apps/presentationeditor/mobile/src/view/settings/PresentationSettings.jsx
+++ b/apps/presentationeditor/mobile/src/view/settings/PresentationSettings.jsx
@@ -1,50 +1,40 @@
-import React, {Fragment} from "react";
+import React, {useState} from "react";
import { observer, inject } from "mobx-react";
-import { Page, Navbar, List, ListItem, BlockTitle, Toggle } from "framework7-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 });
const store = props.storePresentationSettings;
- const slideSizeArr = store.getSlideSizes();
- console.log(slideSizeArr);
- const widthSlide = store.widthSlide;
- const heightSlide = store.heightSlide;
+ const slideSizeArr = store.getSlideSizes;
const slideSize = store.slideSize;
- console.log(widthSlide, heightSlide);
+ const slideSizeValue = store.slideSizeValue;
+ console.log(slideSize);
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}
-
+
+ <BlockTitle>{_t.textSlideSize}</BlockTitle>
+ <List>
+ <ListItem radio name="slide-size" value="0" checked={slideSizeValue === 0}
+ onChange={(e) => {
+ props.onSlideSize(slideSizeArr[e.target.value]);
+ store.changeSlideFormat(e.target.value);
+ }} title={_t.mniSlideStandard}></ListItem>
+ <ListItem radio name="slide-size" value="1" checked={slideSizeValue === 1}
+ onChange={(e) => {
+ props.onSlideSize(slideSizeArr[e.target.value]);
+ store.changeSlideFormat(e.target.value);
+ }} title={_t.mniSlideWide}></ListItem>
+ </List>
+
<List mediaList>
- <ListItem title={_t.textColorSchemes} link="/color-schemes/"></ListItem>
+ <ListItem title={_t.textColorSchemes} link="/color-schemes/" routeProps={{
+ onColorSchemeChange: props.onColorSchemeChange,
+ initPageColorSchemes: props.initPageColorSchemes
+ }}></ListItem>
</List>
</Page>
)
@@ -52,16 +42,16 @@ const PagePresentationSettings = props => {
const PagePresentationColorSchemes = props => {
const { t } = useTranslation();
- // const curScheme = props.initPageColorSchemes();
- // const [stateScheme, setScheme] = useState(curScheme);
+ const curScheme = props.initPageColorSchemes();
+ const [stateScheme, setScheme] = useState(curScheme);
const _t = t('View.Settings', {returnObjects: true});
- // const storeSettings = props.storeDocumentSettings;
- // const allSchemes = storeSettings.allSchemes;
+ const store = props.storePresentationSettings;
+ const allSchemes = store.allSchemes;
return (
<Page>
<Navbar title={_t.textColorSchemes} backLink={_t.textBack} />
- {/* <List>
+ <List>
{
allSchemes ? allSchemes.map((scheme, index) => {
return (
@@ -91,7 +81,7 @@ const PagePresentationColorSchemes = props => {
)
}) : null
}
- </List> */}
+ </List>
</Page>
)