Merge branch 'feature/mobile-apps-on-reactjs-pe-presentation-settings' into feature/mobile-apps-on-reactjs
This commit is contained in:
commit
62e21edc83
|
@ -62,7 +62,11 @@
|
||||||
"textAuthor": "Author",
|
"textAuthor": "Author",
|
||||||
"textPresentationTitle": "Presentation Title",
|
"textPresentationTitle": "Presentation Title",
|
||||||
"textOwner": "Owner",
|
"textOwner": "Owner",
|
||||||
"textUploaded": "Uploaded"
|
"textUploaded": "Uploaded",
|
||||||
|
"textSlideSize": "Slide Size",
|
||||||
|
"mniSlideStandard": "Standard (4:3)",
|
||||||
|
"mniSlideWide": "Widescreen (16:9)",
|
||||||
|
"textColorSchemes": "Color Schemes"
|
||||||
},
|
},
|
||||||
"Add": {
|
"Add": {
|
||||||
"textSlide": "Slide",
|
"textSlide": "Slide",
|
||||||
|
|
|
@ -4,7 +4,7 @@ import { inject } from "mobx-react";
|
||||||
import { withTranslation } from 'react-i18next';
|
import { withTranslation } from 'react-i18next';
|
||||||
import CollaborationController from '../../../../common/mobile/lib/controller/Collaboration.jsx'
|
import CollaborationController from '../../../../common/mobile/lib/controller/Collaboration.jsx'
|
||||||
|
|
||||||
@inject("storeFocusObjects", "storeAppOptions", "storePresentationInfo")
|
@inject("storeFocusObjects", "storeAppOptions", "storePresentationInfo", "storePresentationSettings")
|
||||||
class MainController extends Component {
|
class MainController extends Component {
|
||||||
constructor(props) {
|
constructor(props) {
|
||||||
super(props)
|
super(props)
|
||||||
|
@ -167,9 +167,22 @@ class MainController extends Component {
|
||||||
|
|
||||||
bindEvents() {
|
bindEvents() {
|
||||||
const me = this;
|
const me = this;
|
||||||
|
|
||||||
// me.api.asc_registerCallback('asc_onError', _.bind(me.onError, me));
|
// 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_onDocumentContentReady', me._onDocumentContentReady.bind(me));
|
||||||
me.api.asc_registerCallback('asc_onOpenDocumentProgress', me._onOpenDocumentProgress.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_onDocumentUpdateVersion', _.bind(me.onUpdateVersion, me));
|
||||||
// me.api.asc_registerCallback('asc_onServerVersion', _.bind(me.onServerVersion, me));
|
// me.api.asc_registerCallback('asc_onServerVersion', _.bind(me.onServerVersion, me));
|
||||||
// me.api.asc_registerCallback('asc_onAdvancedOptions', _.bind(me.onAdvancedOptions, me));
|
// me.api.asc_registerCallback('asc_onAdvancedOptions', _.bind(me.onAdvancedOptions, me));
|
||||||
|
|
|
@ -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));
|
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
@ -21,4 +21,28 @@
|
||||||
align-items: center;
|
align-items: center;
|
||||||
width: auto;
|
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;
|
||||||
|
}
|
||||||
}
|
}
|
|
@ -5,6 +5,7 @@ import {storeFocusObjects} from "./focusObjects";
|
||||||
import {storeUsers} from '../../../../common/mobile/lib/store/users';
|
import {storeUsers} from '../../../../common/mobile/lib/store/users';
|
||||||
import {storeApplicationSettings} from './applicationSettings';
|
import {storeApplicationSettings} from './applicationSettings';
|
||||||
import {storePresentationInfo} from './presentationInfo';
|
import {storePresentationInfo} from './presentationInfo';
|
||||||
|
import {storePresentationSettings} from './presentationSettings';
|
||||||
// import {storeTextSettings} from "./textSettings";
|
// import {storeTextSettings} from "./textSettings";
|
||||||
// import {storeParagraphSettings} from "./paragraphSettings";
|
// import {storeParagraphSettings} from "./paragraphSettings";
|
||||||
// import {storeShapeSettings} from "./shapeSettings";
|
// import {storeShapeSettings} from "./shapeSettings";
|
||||||
|
@ -18,7 +19,8 @@ export const stores = {
|
||||||
// storeDocumentSettings: new storeDocumentSettings(),
|
// storeDocumentSettings: new storeDocumentSettings(),
|
||||||
users: new storeUsers(),
|
users: new storeUsers(),
|
||||||
storeApplicationSettings: new storeApplicationSettings(),
|
storeApplicationSettings: new storeApplicationSettings(),
|
||||||
storePresentationInfo: new storePresentationInfo()
|
storePresentationInfo: new storePresentationInfo(),
|
||||||
|
storePresentationSettings: new storePresentationSettings()
|
||||||
// storeTextSettings: new storeTextSettings(),
|
// storeTextSettings: new storeTextSettings(),
|
||||||
// storeParagraphSettings: new storeParagraphSettings(),
|
// storeParagraphSettings: new storeParagraphSettings(),
|
||||||
// storeShapeSettings: new storeShapeSettings(),
|
// storeShapeSettings: new storeShapeSettings(),
|
||||||
|
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
|
@ -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 }
|
|
@ -7,6 +7,8 @@ import ApplicationSettingsController from "../../controller/settings/Application
|
||||||
import { MacrosSettings } from "./ApplicationSettings";
|
import { MacrosSettings } from "./ApplicationSettings";
|
||||||
import DownloadController from "../../controller/settings/Download";
|
import DownloadController from "../../controller/settings/Download";
|
||||||
import PresentationInfoController from "../../controller/settings/PresentationInfo";
|
import PresentationInfoController from "../../controller/settings/PresentationInfo";
|
||||||
|
import PresentationSettingsController from "../../controller/settings/PresentationSettings";
|
||||||
|
import { PresentationColorSchemes } from "./PresentationSettings";
|
||||||
|
|
||||||
const routes = [
|
const routes = [
|
||||||
{
|
{
|
||||||
|
@ -28,6 +30,14 @@ const routes = [
|
||||||
{
|
{
|
||||||
path: '/presentation-info/',
|
path: '/presentation-info/',
|
||||||
component: PresentationInfoController
|
component: PresentationInfoController
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/presentation-settings/',
|
||||||
|
component: PresentationSettingsController
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/color-schemes/',
|
||||||
|
component: PresentationColorSchemes
|
||||||
}
|
}
|
||||||
/*{
|
/*{
|
||||||
path: '/presentation-settings/',
|
path: '/presentation-settings/',
|
||||||
|
@ -52,6 +62,21 @@ const SettingsList = withTranslation()(props => {
|
||||||
props.onOptionClick(page)
|
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 (
|
return (
|
||||||
<View style={props.style} stackPages={true} routes={routes}>
|
<View style={props.style} stackPages={true} routes={routes}>
|
||||||
<Page>
|
<Page>
|
||||||
|
@ -71,7 +96,7 @@ const SettingsList = withTranslation()(props => {
|
||||||
<ListItem title={_t.textDownload} link="#" onClick={onoptionclick.bind(this, '/download/')}>
|
<ListItem title={_t.textDownload} link="#" onClick={onoptionclick.bind(this, '/download/')}>
|
||||||
<Icon slot="media" icon="icon-download"></Icon>
|
<Icon slot="media" icon="icon-download"></Icon>
|
||||||
</ListItem>
|
</ListItem>
|
||||||
<ListItem title={_t.textPrint}>
|
<ListItem title={_t.textPrint} onClick={onPrint}>
|
||||||
<Icon slot="media" icon="icon-print"></Icon>
|
<Icon slot="media" icon="icon-print"></Icon>
|
||||||
</ListItem>
|
</ListItem>
|
||||||
<ListItem title={_t.textPresentationInfo} link="#" onClick={onoptionclick.bind(this, "/presentation-info/")}>
|
<ListItem title={_t.textPresentationInfo} link="#" onClick={onoptionclick.bind(this, "/presentation-info/")}>
|
||||||
|
|
Loading…
Reference in a new issue