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

[PE mobile] Maked Layout, Theme and Transition Settings

Browse source
This commit is contained in:
SergeyEzhin 2021-01-11 17:29:59 +03:00
parent b92ba29b6f
commit 4feecef046
6 changed files with 131 additions and 96 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -74,7 +74,7 @@
// Layout // Layout
.slide-layout { .slide-layout {
.list { &__list {
margin: auto; margin: auto;
} }
ul { ul {
@ -115,17 +115,9 @@
// Theme // Theme
.slide-theme .item-theme {
background-image: url(../img/themes/themes.png);
}
.slide-theme { .slide-theme {
.item-inner:after { &__list {
display: none;
}
.list {
margin: auto; margin: auto;
}
ul { ul {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@ -134,6 +126,10 @@
padding-right: 18px; padding-right: 18px;
padding-bottom: 14px; padding-bottom: 14px;
} }
}
.item-inner:after {
display: none;
}
.item-theme { .item-theme {
position: relative; position: relative;
margin: 0; margin: 0;
@ -141,6 +137,7 @@
width: 85px; width: 85px;
height: 38px; height: 38px;
margin-top: 14px; margin-top: 14px;
background-image: url(../img/themes/themes.png);
} }
.item-theme.active:before { .item-theme.active:before {
content: ''; content: '';
@ -182,15 +179,9 @@
border-radius: 0 5px 5px 0; border-radius: 0 5px 5px 0;
} }
} }
// .range-slider { }
// .range-bar {
// height: 2px; .range-slider-delay {
// }
// .range-bar-active {
// background: transparent;
// }
// }
.range-slider-delay {
width: 100%; width: 100%;
margin: 4px 0 5px 0; margin: 4px 0 5px 0;
appearance: none; appearance: none;
@ -222,14 +213,16 @@
cursor: pointer; cursor: pointer;
box-shadow: 0 2px 4px rgba(0, 0, 0, .3); box-shadow: 0 2px 4px rgba(0, 0, 0, .3);
} }
} }
.slide-apply-all {
.apply-all {
color: @themeColor; color: @themeColor;
border: 0; border: 0;
.item-inner { .item-inner {
justify-content: center; justify-content: center;
} }
.item-inner::before { &__elem {
.item-link .item-inner::before {
display: none; display: none;
} }
} }

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

@ -57,20 +57,31 @@ class TransitionController extends Component {
api.SetSlideProps(props); api.SetSlideProps(props);
}; };
onEffectClick(value) { onEffectClick(value, effectType) {
const api = Common.EditorApi.get(); const api = Common.EditorApi.get();
// let props = new Asc.CAscSlideProps(), let props = new Asc.CAscSlideProps(),
// timing = new Asc.CAscSlideTransition(), timing = new Asc.CAscSlideTransition();
// _effectType = this.fillEffectTypes(value); // _effectType = this.fillEffectTypes(value);
// timing.put_TransitionType(value); timing.put_TransitionType(value);
// timing.put_TransitionOption(_effectType); timing.put_TransitionOption(effectType);
// props.put_transition(timing); props.put_transition(timing);
// api.SetSlideProps(props); api.SetSlideProps(props);
}; };
onEffectTypeClick(value, effect) {
const api = Common.EditorApi.get();
let props = new Asc.CAscSlideProps(),
timing = new Asc.CAscSlideTransition();
timing.put_TransitionType(effect);
timing.put_TransitionOption(value);
props.put_transition(timing);
api.SetSlideProps(props);
}
render() { render() {
return ( return (
<Transition <Transition
@ -80,6 +91,7 @@ class TransitionController extends Component {
onDelayCheck={this.onDelayCheck} onDelayCheck={this.onDelayCheck}
onDelay={this.onDelay} onDelay={this.onDelay}
onEffectClick={this.onEffectClick} onEffectClick={this.onEffectClick}
onEffectTypeClick={this.onEffectTypeClick}
/> />
); );
} }

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

@ -3,8 +3,13 @@ import {action, observable} from 'mobx';
export class storeTransition { export class storeTransition {
@observable effect; @observable effect;
@observable type;
@action changeEffect(value) { @action changeEffect(value) {
this.effect = value; this.effect = value;
} }
@action changeType(value) {
this.type = value;
}
} }

6
apps/presentationeditor/mobile/src/view/edit/Layout.jsx
View file

@ -12,8 +12,8 @@ const PageLayout = props => {
const arrayLayouts = JSON.parse(JSON.stringify(storeLayout.arrayLayouts)); const arrayLayouts = JSON.parse(JSON.stringify(storeLayout.arrayLayouts));
const slideLayoutIndex = storeLayout.slideLayoutIndex; const slideLayoutIndex = storeLayout.slideLayoutIndex;
console.log(slideLayoutIndex); // console.log(slideLayoutIndex);
console.log(arrayLayouts); // console.log(arrayLayouts);
return ( return (
<Page className="slide-layout"> <Page className="slide-layout">
@ -23,7 +23,7 @@ const PageLayout = props => {
</NavRight> </NavRight>
</Navbar> </Navbar>
{arrayLayouts.length ? ( {arrayLayouts.length ? (
<List> <List className="slide-layout__list">
{arrayLayouts.map((elem, index) => { {arrayLayouts.map((elem, index) => {
return ( return (
<ListItem key={index} className={slideLayoutIndex === index ? "active" : ""} <ListItem key={index} className={slideLayoutIndex === index ? "active" : ""}

6
apps/presentationeditor/mobile/src/view/edit/Theme.jsx
View file

@ -12,8 +12,8 @@ const PageTheme = props => {
const defaultThemes = arrayThemes[0]; const defaultThemes = arrayThemes[0];
const docThemes = arrayThemes[1]; const docThemes = arrayThemes[1];
console.log(slideThemeIndex); // console.log(slideThemeIndex);
console.log(arrayThemes); // console.log(arrayThemes);
return ( return (
<Page className="slide-theme"> <Page className="slide-theme">
@ -23,7 +23,7 @@ const PageTheme = props => {
</NavRight> </NavRight>
</Navbar> </Navbar>
{arrayThemes.length ? ( {arrayThemes.length ? (
<List> <List className="slide-theme__list">
{defaultThemes.map((elem, index) => { {defaultThemes.map((elem, index) => {
return ( return (
<ListItem key={elem.Index} className={elem.Index === slideThemeIndex ? "item-theme active" : "item-theme"} <ListItem key={elem.Index} className={elem.Index === slideThemeIndex ? "item-theme active" : "item-theme"}

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

@ -90,8 +90,17 @@ const PageTransition = props => {
const storeFocusObjects = props.storeFocusObjects; const storeFocusObjects = props.storeFocusObjects;
const storeTransition = props.storeTransition; const storeTransition = props.storeTransition;
const transitionObj = storeFocusObjects.slideObject.get_transition(); const transitionObj = storeFocusObjects.slideObject.get_transition();
if(!storeTransition.effect) {
storeTransition.changeEffect(transitionObj.get_TransitionType()); storeTransition.changeEffect(transitionObj.get_TransitionType());
}
const _effect = storeTransition.effect; const _effect = storeTransition.effect;
const valueEffectTypes = fillEffectTypes(_effect);
if(!storeTransition.type) {
storeTransition.changeType(valueEffectTypes);
}
let _effectDelay = transitionObj.get_SlideAdvanceDuration(); let _effectDelay = transitionObj.get_SlideAdvanceDuration();
@ -99,7 +108,7 @@ const PageTransition = props => {
const isDelay = transitionObj.get_SlideAdvanceAfter(); const isDelay = transitionObj.get_SlideAdvanceAfter();
const isStartOnClick = transitionObj.get_SlideAdvanceOnMouseClick(); const isStartOnClick = transitionObj.get_SlideAdvanceOnMouseClick();
const nameEffect = getEffectName(_effect); const nameEffect = getEffectName(_effect);
const arrEffectType = fillEffectTypes(_effect);
const _effectType = transitionObj.get_TransitionOption(); const _effectType = transitionObj.get_TransitionOption();
const nameEffectType = getEffectTypeName(_effectType); const nameEffectType = getEffectTypeName(_effectType);
const _effectDuration = transitionObj.get_TransitionDuration(); const _effectDuration = transitionObj.get_TransitionDuration();
@ -114,12 +123,15 @@ const PageTransition = props => {
<List> <List>
<ListItem link="/effect/" title={_t.textEffect} after={nameEffect} routeProps={{ <ListItem link="/effect/" title={_t.textEffect} after={nameEffect} routeProps={{
_arrEffect, _arrEffect,
onEffectClick: props.onEffectClick onEffectClick: props.onEffectClick,
fillEffectTypes
}}></ListItem> }}></ListItem>
<ListItem link="/type/" title={_t.textType} <ListItem link="/type/" title={_t.textType}
after={_effect != Asc.c_oAscSlideTransitionTypes.None ? nameEffectType : ''} after={_effect != Asc.c_oAscSlideTransitionTypes.None ? nameEffectType : ''}
disabled={_effect == Asc.c_oAscSlideTransitionTypes.None}> disabled={_effect == Asc.c_oAscSlideTransitionTypes.None} routeProps={{
<div slot="after"></div> _arrCurrentEffectTypes,
onEffectTypeClick: props.onEffectTypeClick
}}>
</ListItem> </ListItem>
<ListItem title={_t.textDuration} disabled={_effect == Asc.c_oAscSlideTransitionTypes.None}> <ListItem title={_t.textDuration} disabled={_effect == Asc.c_oAscSlideTransitionTypes.None}>
<div slot="after" className="splitter"> <div slot="after" className="splitter">
@ -161,8 +173,8 @@ const PageTransition = props => {
</ListItemCell> </ListItemCell>
</ListItem> </ListItem>
</List> </List>
<List> <List className="apply-all">
<ListItem className="slide-apply-all" href="#" onClick={props.onApplyAll}>{_t.textApplyAll}</ListItem> <ListItem className="apply-all__elem" href="#" onClick={props.onApplyAll}>{_t.textApplyAll}</ListItem>
</List> </List>
</Page> </Page>
); );
@ -186,7 +198,9 @@ const PageEffect = props => {
<ListItem key={index} radio name="editslide-effect" title={elem.displayValue} value={elem.value} <ListItem key={index} radio name="editslide-effect" title={elem.displayValue} value={elem.value}
checked={elem.value === _effect} onChange={() => { checked={elem.value === _effect} onChange={() => {
storeTransition.changeEffect(elem.value); storeTransition.changeEffect(elem.value);
props.onEffectClick(elem.value); let valueEffectTypes = props.fillEffectTypes(elem.value);
storeTransition.changeType(valueEffectTypes);
props.onEffectClick(elem.value, valueEffectTypes);
}}></ListItem> }}></ListItem>
) )
})} })}
@ -199,8 +213,10 @@ const PageEffect = props => {
const PageType= props => { const PageType= props => {
const { t } = useTranslation(); const { t } = useTranslation();
const _t = t("View.Edit", { returnObjects: true }); const _t = t("View.Edit", { returnObjects: true });
console.log(props); const _arrCurrentEffectTypes = props._arrCurrentEffectTypes;
const storeTransition = props.storeTransition; const storeTransition = props.storeTransition;
const _effect = storeTransition.effect;
const type = storeTransition.type;
return ( return (
<Page> <Page>
@ -209,11 +225,20 @@ const PageType= props => {
<Link icon='icon-expand-down' sheetClose></Link> <Link icon='icon-expand-down' sheetClose></Link>
</NavRight> </NavRight>
</Navbar> </Navbar>
{_arrCurrentEffectTypes.length ? (
<List mediaList> <List mediaList>
<ListItem radio name="editslide-effect-type"></ListItem> {_arrCurrentEffectTypes.map((elem, index) => {
<ListItem radio name="editslide-effect-type"></ListItem> return (
<ListItem radio name="editslide-effect-type"></ListItem> <ListItem key={index} radio name="editslide-effect-type" title={elem.displayValue} value={elem.value}
checked={elem.value === type} onChange={() => {
storeTransition.changeType(elem.value);
props.onEffectTypeClick(elem.value, _effect);
}}>
</ListItem>
)
})}
</List> </List>
) : null}
</Page> </Page>
); );
}; };