[PE mobile] Maked Layout, Theme and Transition Settings
This commit is contained in:
SergeyEzhin
parent
b92ba29b6f
commit
4feecef046
|
|
@ -74,7 +74,7 @@
|
|||
// Layout
|
||||
|
||||
.slide-layout {
|
||||
.list {
|
||||
&__list {
|
||||
margin: auto;
|
||||
}
|
||||
ul {
|
||||
|
|
@ -115,17 +115,9 @@
|
|||
|
||||
// Theme
|
||||
|
||||
.slide-theme .item-theme {
|
||||
background-image: url(../img/themes/themes.png);
|
||||
}
|
||||
|
||||
.slide-theme {
|
||||
.item-inner:after {
|
||||
display: none;
|
||||
}
|
||||
.list {
|
||||
&__list {
|
||||
margin: auto;
|
||||
}
|
||||
ul {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
|
@ -134,6 +126,10 @@
|
|||
padding-right: 18px;
|
||||
padding-bottom: 14px;
|
||||
}
|
||||
}
|
||||
.item-inner:after {
|
||||
display: none;
|
||||
}
|
||||
.item-theme {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
|
|
@ -141,6 +137,7 @@
|
|||
width: 85px;
|
||||
height: 38px;
|
||||
margin-top: 14px;
|
||||
background-image: url(../img/themes/themes.png);
|
||||
}
|
||||
.item-theme.active:before {
|
||||
content: '';
|
||||
|
|
@ -182,15 +179,9 @@
|
|||
border-radius: 0 5px 5px 0;
|
||||
}
|
||||
}
|
||||
// .range-slider {
|
||||
// .range-bar {
|
||||
// height: 2px;
|
||||
// }
|
||||
// .range-bar-active {
|
||||
// background: transparent;
|
||||
// }
|
||||
// }
|
||||
.range-slider-delay {
|
||||
}
|
||||
|
||||
.range-slider-delay {
|
||||
width: 100%;
|
||||
margin: 4px 0 5px 0;
|
||||
appearance: none;
|
||||
|
|
@ -222,14 +213,16 @@
|
|||
cursor: pointer;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, .3);
|
||||
}
|
||||
}
|
||||
.slide-apply-all {
|
||||
}
|
||||
|
||||
.apply-all {
|
||||
color: @themeColor;
|
||||
border: 0;
|
||||
.item-inner {
|
||||
justify-content: center;
|
||||
}
|
||||
.item-inner::before {
|
||||
&__elem {
|
||||
.item-link .item-inner::before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -57,20 +57,31 @@ class TransitionController extends Component {
|
|||
api.SetSlideProps(props);
|
||||
};
|
||||
|
||||
onEffectClick(value) {
|
||||
onEffectClick(value, effectType) {
|
||||
const api = Common.EditorApi.get();
|
||||
|
||||
// let props = new Asc.CAscSlideProps(),
|
||||
// timing = new Asc.CAscSlideTransition(),
|
||||
let props = new Asc.CAscSlideProps(),
|
||||
timing = new Asc.CAscSlideTransition();
|
||||
// _effectType = this.fillEffectTypes(value);
|
||||
|
||||
// timing.put_TransitionType(value);
|
||||
// timing.put_TransitionOption(_effectType);
|
||||
// props.put_transition(timing);
|
||||
// api.SetSlideProps(props);
|
||||
|
||||
timing.put_TransitionType(value);
|
||||
timing.put_TransitionOption(effectType);
|
||||
props.put_transition(timing);
|
||||
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() {
|
||||
return (
|
||||
<Transition
|
||||
|
|
@ -80,6 +91,7 @@ class TransitionController extends Component {
|
|||
onDelayCheck={this.onDelayCheck}
|
||||
onDelay={this.onDelay}
|
||||
onEffectClick={this.onEffectClick}
|
||||
onEffectTypeClick={this.onEffectTypeClick}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,8 +3,13 @@ import {action, observable} from 'mobx';
|
|||
export class storeTransition {
|
||||
|
||||
@observable effect;
|
||||
@observable type;
|
||||
|
||||
@action changeEffect(value) {
|
||||
this.effect = value;
|
||||
}
|
||||
|
||||
@action changeType(value) {
|
||||
this.type = value;
|
||||
}
|
||||
}
|
||||
|
|
@ -12,8 +12,8 @@ const PageLayout = props => {
|
|||
const arrayLayouts = JSON.parse(JSON.stringify(storeLayout.arrayLayouts));
|
||||
const slideLayoutIndex = storeLayout.slideLayoutIndex;
|
||||
|
||||
console.log(slideLayoutIndex);
|
||||
console.log(arrayLayouts);
|
||||
// console.log(slideLayoutIndex);
|
||||
// console.log(arrayLayouts);
|
||||
|
||||
return (
|
||||
<Page className="slide-layout">
|
||||
|
|
@ -23,7 +23,7 @@ const PageLayout = props => {
|
|||
</NavRight>
|
||||
</Navbar>
|
||||
{arrayLayouts.length ? (
|
||||
<List>
|
||||
<List className="slide-layout__list">
|
||||
{arrayLayouts.map((elem, index) => {
|
||||
return (
|
||||
<ListItem key={index} className={slideLayoutIndex === index ? "active" : ""}
|
||||
|
|
|
|||
|
|
@ -12,8 +12,8 @@ const PageTheme = props => {
|
|||
const defaultThemes = arrayThemes[0];
|
||||
const docThemes = arrayThemes[1];
|
||||
|
||||
console.log(slideThemeIndex);
|
||||
console.log(arrayThemes);
|
||||
// console.log(slideThemeIndex);
|
||||
// console.log(arrayThemes);
|
||||
|
||||
return (
|
||||
<Page className="slide-theme">
|
||||
|
|
@ -23,7 +23,7 @@ const PageTheme = props => {
|
|||
</NavRight>
|
||||
</Navbar>
|
||||
{arrayThemes.length ? (
|
||||
<List>
|
||||
<List className="slide-theme__list">
|
||||
{defaultThemes.map((elem, index) => {
|
||||
return (
|
||||
<ListItem key={elem.Index} className={elem.Index === slideThemeIndex ? "item-theme active" : "item-theme"}
|
||||
|
|
|
|||
|
|
@ -90,8 +90,17 @@ const PageTransition = props => {
|
|||
const storeFocusObjects = props.storeFocusObjects;
|
||||
const storeTransition = props.storeTransition;
|
||||
const transitionObj = storeFocusObjects.slideObject.get_transition();
|
||||
|
||||
if(!storeTransition.effect) {
|
||||
storeTransition.changeEffect(transitionObj.get_TransitionType());
|
||||
}
|
||||
|
||||
const _effect = storeTransition.effect;
|
||||
const valueEffectTypes = fillEffectTypes(_effect);
|
||||
|
||||
if(!storeTransition.type) {
|
||||
storeTransition.changeType(valueEffectTypes);
|
||||
}
|
||||
|
||||
let _effectDelay = transitionObj.get_SlideAdvanceDuration();
|
||||
|
||||
|
|
@ -99,7 +108,7 @@ const PageTransition = props => {
|
|||
const isDelay = transitionObj.get_SlideAdvanceAfter();
|
||||
const isStartOnClick = transitionObj.get_SlideAdvanceOnMouseClick();
|
||||
const nameEffect = getEffectName(_effect);
|
||||
const arrEffectType = fillEffectTypes(_effect);
|
||||
|
||||
const _effectType = transitionObj.get_TransitionOption();
|
||||
const nameEffectType = getEffectTypeName(_effectType);
|
||||
const _effectDuration = transitionObj.get_TransitionDuration();
|
||||
|
|
@ -114,12 +123,15 @@ const PageTransition = props => {
|
|||
<List>
|
||||
<ListItem link="/effect/" title={_t.textEffect} after={nameEffect} routeProps={{
|
||||
_arrEffect,
|
||||
onEffectClick: props.onEffectClick
|
||||
onEffectClick: props.onEffectClick,
|
||||
fillEffectTypes
|
||||
}}></ListItem>
|
||||
<ListItem link="/type/" title={_t.textType}
|
||||
after={_effect != Asc.c_oAscSlideTransitionTypes.None ? nameEffectType : ''}
|
||||
disabled={_effect == Asc.c_oAscSlideTransitionTypes.None}>
|
||||
<div slot="after"></div>
|
||||
disabled={_effect == Asc.c_oAscSlideTransitionTypes.None} routeProps={{
|
||||
_arrCurrentEffectTypes,
|
||||
onEffectTypeClick: props.onEffectTypeClick
|
||||
}}>
|
||||
</ListItem>
|
||||
<ListItem title={_t.textDuration} disabled={_effect == Asc.c_oAscSlideTransitionTypes.None}>
|
||||
<div slot="after" className="splitter">
|
||||
|
|
@ -161,8 +173,8 @@ const PageTransition = props => {
|
|||
</ListItemCell>
|
||||
</ListItem>
|
||||
</List>
|
||||
<List>
|
||||
<ListItem className="slide-apply-all" href="#" onClick={props.onApplyAll}>{_t.textApplyAll}</ListItem>
|
||||
<List className="apply-all">
|
||||
<ListItem className="apply-all__elem" href="#" onClick={props.onApplyAll}>{_t.textApplyAll}</ListItem>
|
||||
</List>
|
||||
</Page>
|
||||
);
|
||||
|
|
@ -186,7 +198,9 @@ const PageEffect = props => {
|
|||
<ListItem key={index} radio name="editslide-effect" title={elem.displayValue} value={elem.value}
|
||||
checked={elem.value === _effect} onChange={() => {
|
||||
storeTransition.changeEffect(elem.value);
|
||||
props.onEffectClick(elem.value);
|
||||
let valueEffectTypes = props.fillEffectTypes(elem.value);
|
||||
storeTransition.changeType(valueEffectTypes);
|
||||
props.onEffectClick(elem.value, valueEffectTypes);
|
||||
}}></ListItem>
|
||||
)
|
||||
})}
|
||||
|
|
@ -199,8 +213,10 @@ const PageEffect = props => {
|
|||
const PageType= props => {
|
||||
const { t } = useTranslation();
|
||||
const _t = t("View.Edit", { returnObjects: true });
|
||||
console.log(props);
|
||||
const _arrCurrentEffectTypes = props._arrCurrentEffectTypes;
|
||||
const storeTransition = props.storeTransition;
|
||||
const _effect = storeTransition.effect;
|
||||
const type = storeTransition.type;
|
||||
|
||||
return (
|
||||
<Page>
|
||||
|
|
@ -209,11 +225,20 @@ const PageType= props => {
|
|||
<Link icon='icon-expand-down' sheetClose></Link>
|
||||
</NavRight>
|
||||
</Navbar>
|
||||
{_arrCurrentEffectTypes.length ? (
|
||||
<List mediaList>
|
||||
<ListItem radio name="editslide-effect-type"></ListItem>
|
||||
<ListItem radio name="editslide-effect-type"></ListItem>
|
||||
<ListItem radio name="editslide-effect-type"></ListItem>
|
||||
{_arrCurrentEffectTypes.map((elem, index) => {
|
||||
return (
|
||||
<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>
|
||||
) : null}
|
||||
</Page>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in a new issue