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

[PE mobile] Make Transition settings

Browse source
This commit is contained in:
SergeyEzhin 2020-12-26 00:26:51 +03:00
parent dbd4ae73dd
commit 57b7d0c410
13 changed files with 236 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

47
apps/common/mobile/resources/less/common.less
View file

@ -154,3 +154,50 @@
}
}
// Transition
.slide-transition {
.splitter {
display: flex;
align-items: center;
color: @black;
label {
margin: 0 5px;
}
}
.buttons-row {
display: flex;
margin: 0;
min-width: 90px;
margin-left: 10px;
.button {
width: 100%;
}
.button:first-child {
border-radius: 5px 0 0 5px;
border-left-width: 1px;
border-left-style: solid;
}
.button:last-child {
border-radius: 0 5px 5px 0;
}
}
.range-slider {
.range-bar {
height: 2px;
}
.range-bar-active {
background: transparent;
}
}
.slide-apply-all {
color: @themeColor;
border: 0;
.item-inner {
justify-content: center;
}
}
}

6
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", "storePresentationSettings", "storeLayout", "storeTheme")
@inject("storeFocusObjects", "storeAppOptions", "storePresentationInfo", "storePresentationSettings", "storeLayout", "storeTheme", "storeTransition")
class MainController extends Component {
constructor(props) {
super(props)
@ -193,6 +193,7 @@ class MainController extends Component {
const storeFocusObjects = this.props.storeFocusObjects;
const storeLayout = this.props.storeLayout;
const storeTransition = this.props.storeTransition;
this.api.asc_registerCallback('asc_onFocusObject', objects => {
console.log(objects);
@ -204,6 +205,9 @@ class MainController extends Component {
if(settings[0] === "slide") {
const slideObject = objects[0].get_ObjectValue();
storeLayout.changeSlideLayoutIndex(slideObject.get_LayoutIndex());
// const timing = slideObject.get_transition();
// console.log(timing);
storeTransition.addTransitionObj(slideObject.get_transition());
}
});

16
apps/presentationeditor/mobile/src/controller/edit/Effect.jsx Normal file
View file

@ -0,0 +1,16 @@
import React, { Component } from "react";
import Effect from "../../view/edit/Effect";
class EffectController extends Component {
constructor(props) {
super(props);
}
render() {
return (
<Effect />
);
}
}
export default EffectController;

27
apps/presentationeditor/mobile/src/controller/edit/Transition.jsx
View file

@ -6,6 +6,29 @@ class TransitionController extends Component {
super(props);
}
initTransitionView(timing) {
const _effect = timing.get_TransitionType();
// me.getView('EditSlide').fillEffectTypes(_effect);
// $('#edit-slide-effect .item-after').text(me.getView('EditSlide').getEffectName(_effect));
// $('#edit-slide-effect-type').toggleClass('disabled', _effect == Asc.c_oAscSlideTransitionTypes.None);
// $('#edit-slide-duration').toggleClass('disabled', _effect == Asc.c_oAscSlideTransitionTypes.None);
// _effectType = timing.get_TransitionOption();
// $('#edit-slide-effect-type .item-after').text((_effect != Asc.c_oAscSlideTransitionTypes.None) ? me.getView('EditSlide').getEffectTypeName(_effectType) : '');
// _effectDuration = timing.get_TransitionDuration();
// $('#edit-slide-duration .item-after label').text((_effectDuration!==null && _effectDuration!==undefined) ? (parseInt(_effectDuration/1000.) + ' ' + me.textSec) : '');
// $('#edit-slide-start-click input:checkbox').prop('checked', !!timing.get_SlideAdvanceOnMouseClick());
// $('#edit-slide-delay input:checkbox').prop('checked', !!timing.get_SlideAdvanceAfter());
// $('#edit-slide-delay .item-content:nth-child(2)').toggleClass('disabled',!timing.get_SlideAdvanceAfter());
// _effectDelay = timing.get_SlideAdvanceDuration();
// $('#edit-slide-delay .item-content:nth-child(2) .item-after').text((_effectDelay!==null && _effectDelay!==undefined) ? (parseInt(_effectDelay/1000.) + ' ' + me.textSec) : '');
// $('#edit-slide-delay .item-content:nth-child(2) input').val([(_effectDelay!==null && _effectDelay!==undefined) ? parseInt(_effectDelay/1000.) : 0]);
}
render() {
return (
<Transition />
@ -13,4 +36,8 @@ class TransitionController extends Component {
}
}
// const initTransitionView = (timing) => {
// }
export default TransitionController;

16
apps/presentationeditor/mobile/src/controller/edit/Type.jsx Normal file
View file

@ -0,0 +1,16 @@
import React, { Component } from "react";
import Type from "../../view/edit/Type";
class TypeController extends Component {
constructor(props) {
super(props);
}
render() {
return (
<Type />
);
}
}
export default TypeController;

5
apps/presentationeditor/mobile/src/store/effect.js Normal file
View file

@ -0,0 +1,5 @@
import {action, observable} from 'mobx';
export class storeEffect {
}

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

@ -9,6 +9,8 @@ import {storePresentationSettings} from './presentationSettings';
import { storeLayout } from './layout';
import { storeTransition } from './transition';
import { storeTheme } from './theme';
import { storeEffect } from './effect';
import { storeType } from './type';
// import {storeTextSettings} from "./textSettings";
// import {storeParagraphSettings} from "./paragraphSettings";
// import {storeShapeSettings} from "./shapeSettings";
@ -26,7 +28,9 @@ export const stores = {
storePresentationSettings: new storePresentationSettings(),
storeLayout: new storeLayout(),
storeTransition: new storeTransition(),
storeTheme: new storeTheme()
storeTheme: new storeTheme(),
storeEffect: new storeEffect(),
storeType: new storeType()
// storeTextSettings: new storeTextSettings(),
// storeParagraphSettings: new storeParagraphSettings(),
// storeShapeSettings: new storeShapeSettings(),

17
apps/presentationeditor/mobile/src/store/transition.js
View file

@ -2,15 +2,14 @@ import {action, observable} from 'mobx';
export class storeTransition {
// @observable arrayLayouts;
// @observable slideLayoutIndex = -1;
@observable isDelay = false;
@observable transitionObj = {};
// @action addArrayLayouts(array) {
// this.arrayLayouts = array;
// }
// @action changeSlideLayoutIndex(index) {
// this.slideLayoutIndex = index;
// }
@action toggleDelay() {
this.isDelay = !this.isDelay;
}
@action addTransitionObj(obj) {
this.transitionObj = obj;
}
}

5
apps/presentationeditor/mobile/src/store/type.js Normal file
View file

@ -0,0 +1,5 @@
import {action, observable} from 'mobx';
export class storeType {
}

10
apps/presentationeditor/mobile/src/view/edit/Edit.jsx
View file

@ -10,6 +10,8 @@ import EditTextController from "../../controller/edit/EditText";
import LayoutController from "../../controller/edit/Layout";
import TransitionController from '../../controller/edit/Transition';
import ThemeController from '../../controller/edit/Theme';
import EffectController from '../../controller/edit/Effect';
import TypeController from '../../controller/edit/Type';
//import EditShapeController from "../../controller/edit/EditShape";
//import EditImageController from "../../controller/edit/EditImage";
//import EditTableController from "../../controller/edit/EditTable";
@ -28,6 +30,14 @@ const routes = [
{
path: '/transition/',
component: TransitionController
},
{
path: '/effect/',
component: EffectController
},
{
path: '/type/',
component: TypeController
}
];

24
apps/presentationeditor/mobile/src/view/edit/Effect.jsx Normal file
View file

@ -0,0 +1,24 @@
import React, {useState} from "react";
import { observer, inject } from "mobx-react";
import { Page, Navbar, List, ListItem, NavRight, Link, Toggle, Range, ListItemCell } from "framework7-react";
import { useTranslation } from "react-i18next";
const PageEffect= props => {
const { t } = useTranslation();
const _t = t("View.Edit", { returnObjects: true });
return (
<Page>
<Navbar title={_t.textEffect} backLink={_t.textBack} />
<List mediaList>
<ListItem radio name="editslide-effect"></ListItem>
<ListItem radio name="editslide-effect"></ListItem>
<ListItem radio name="editslide-effect"></ListItem>
</List>
</Page>
);
};
const Effect = inject("storeEffect")(observer(PageEffect));
export default Effect;

48
apps/presentationeditor/mobile/src/view/edit/Transition.jsx
View file

@ -1,12 +1,14 @@
import React, {Fragment} from "react";
import React, {useState} from "react";
import { observer, inject } from "mobx-react";
import { Page, Navbar, List, ListItem, BlockTitle, NavRight, Link } from "framework7-react";
import { Page, Navbar, List, ListItem, NavRight, Link, Toggle, Range, ListItemCell } from "framework7-react";
import { useTranslation } from "react-i18next";
const PageTransition = props => {
const { t } = useTranslation();
const _t = t("View.Edit", { returnObjects: true });
// const storeInfo = props.storePresentationInfo;
const [stateRange, changeRange] = useState(0);
const store = props.storeTransition;
const isDelay = store.isDelay;
// const dataApp = props.getAppProps();
// const dataModified = props.getModified;
// const dataModifiedBy = props.getModifiedBy;
@ -14,18 +16,48 @@ const PageTransition = props => {
// const dataDoc = JSON.parse(JSON.stringify(storeInfo.dataDoc));
return (
<Page>
<Page className="slide-transition">
<Navbar title={_t.textTransition} backLink={_t.textBack}>
<NavRight>
<Link icon='icon-expand-down' sheetClose></Link>
</NavRight>
</Navbar>
<List>
<ListItem link="#" title={_t.textEffect} after="None"></ListItem>
<ListItem link="#" title={_t.textType}></ListItem>
<ListItem link="#" title={_t.textDuration}></ListItem>
<ListItem link="/effect/" title={_t.textEffect} after="None"></ListItem>
<ListItem link="/type/" title={_t.textType}>
<div slot="after"></div>
</ListItem>
<ListItem title={_t.textDuration}>
<div slot="after" className="splitter">
<label>2 s</label>
<p className="buttons-row">
<span className="button">-</span>
<span className="button">+</span>
</p>
</div>
</ListItem>
</List>
<List>
<ListItem>
<span>{_t.textStartOnClick}</span>
<Toggle />
</ListItem>
<ListItem>
<span>{_t.textDelay}</span>
<Toggle checked={isDelay} onChange={store.toggleDelay.bind(store)} />
</ListItem>
<ListItem>
<ListItemCell className="flex-shrink-3">
<Range min={0} max={300} step={1} value={stateRange} onRangeChange={changeRange.bind(this)} disabled={!isDelay}></Range>
</ListItemCell>
<ListItemCell className="width-auto flex-shrink-0">
<span>{stateRange} s</span>
</ListItemCell>
</ListItem>
</List>
<List>
<ListItem className="slide-apply-all">{_t.textApplyAll}</ListItem>
</List>
</Page>
);
};

28
apps/presentationeditor/mobile/src/view/edit/Type.jsx Normal file
View file

@ -0,0 +1,28 @@
import React, {useState} from "react";
import { observer, inject } from "mobx-react";
import { Page, Navbar, List, ListItem, NavRight, Link, Toggle, Range, ListItemCell } from "framework7-react";
import { useTranslation } from "react-i18next";
const PageType= props => {
const { t } = useTranslation();
const _t = t("View.Edit", { returnObjects: true });
return (
<Page>
<Navbar title={_t.textType} backLink={_t.textBack}>
<NavRight>
<Link icon='icon-expand-down' sheetClose></Link>
</NavRight>
</Navbar>
<List mediaList>
<ListItem radio name="editslide-effect-type"></ListItem>
<ListItem radio name="editslide-effect-type"></ListItem>
<ListItem radio name="editslide-effect-type"></ListItem>
</List>
</Page>
);
};
const Type = inject("storeType")(observer(PageType));
export default Type;