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

Merge branch 'feature/mobile-apps-on-reactjs-pe-presentation-settings' into feature/mobile-apps-on-reactjs

Browse source
This commit is contained in:
JuliaSvinareva 2020-12-17 22:59:32 +03:00
parent cccc7b413b 55f0865749
commit 62e21edc83
9 changed files with 258 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -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",

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

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

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

@ -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 (
<PresentationSettings
initSlideSize={this.initSlideSize}
onSlideSize={this.onSlideSize}
onColorSchemeChange={this.onColorSchemeChange}
initPageColorSchemes={this.initPageColorSchemes}
/>
)
}
}
export default inject("storePresentationSettings")(observer(PresentationSettingsController));

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

@ -22,3 +22,27 @@
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;
}
}

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

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

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

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

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

@ -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 (
<Page>
<Navbar title={_t.textPresentationSettings} backLink={_t.textBack} />
<BlockTitle>{_t.textSlideSize}</BlockTitle>
<List>
<ListItem radio name="slide-size" checked={slideSizeIndex === 0}
onChange={() => props.onSlideSize(slideSizeArr[0])} title={_t.mniSlideStandard}></ListItem>
<ListItem radio name="slide-size" checked={slideSizeIndex === 1}
onChange={() => props.onSlideSize(slideSizeArr[1])} title={_t.mniSlideWide}></ListItem>
</List>
<List mediaList>
<ListItem title={_t.textColorSchemes} link="/color-schemes/" routeProps={{
onColorSchemeChange: props.onColorSchemeChange,
initPageColorSchemes: props.initPageColorSchemes
}}></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 store = props.storePresentationSettings;
const allSchemes = store.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 }

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

@ -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 (
<View style={props.style} stackPages={true} routes={routes}>
<Page>
@ -71,7 +96,7 @@ const SettingsList = withTranslation()(props => {
<ListItem title={_t.textDownload} link="#" onClick={onoptionclick.bind(this, '/download/')}>
<Icon slot="media" icon="icon-download"></Icon>
</ListItem>
<ListItem title={_t.textPrint}>
<ListItem title={_t.textPrint} onClick={onPrint}>
<Icon slot="media" icon="icon-print"></Icon>
</ListItem>
<ListItem title={_t.textPresentationInfo} link="#" onClick={onoptionclick.bind(this, "/presentation-info/")}>