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

[PE mobile] Maked Presentation Settings

Browse source
This commit is contained in:
SergeyEzhin 2020-12-11 23:14:14 +03:00
parent c7f7006400
commit ea7c1dbd45
6 changed files with 115 additions and 69 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -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));

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

@ -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}
/>
)
}

24
apps/presentationeditor/mobile/src/less/app-ios.less
View file

@ -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;
}
}

24
apps/presentationeditor/mobile/src/less/app-material.less
View file

@ -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;
}
}

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

@ -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;
}
}

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

@ -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>
)