diff --git a/apps/common/mobile/resources/less/common.less b/apps/common/mobile/resources/less/common.less index 3a1cd4156..9bc7c4338 100644 --- a/apps/common/mobile/resources/less/common.less +++ b/apps/common/mobile/resources/less/common.less @@ -74,7 +74,7 @@ // Layout .slide-layout { - .list { + &__list { margin: auto; } ul { @@ -115,25 +115,21 @@ // Theme -.slide-theme .item-theme { - background-image: url(../img/themes/themes.png); -} - .slide-theme { + &__list { + margin: auto; + ul { + display: flex; + justify-content: space-between; + flex-wrap: wrap; + padding-left: 18px; + padding-right: 18px; + padding-bottom: 14px; + } + } .item-inner:after { display: none; } - .list { - margin: auto; - } - ul { - display: flex; - justify-content: space-between; - flex-wrap: wrap; - padding-left: 18px; - padding-right: 18px; - padding-bottom: 14px; - } .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,54 +179,50 @@ border-radius: 0 5px 5px 0; } } - // .range-slider { - // .range-bar { - // height: 2px; - // } - // .range-bar-active { - // background: transparent; - // } - // } - .range-slider-delay { - width: 100%; - margin: 4px 0 5px 0; - appearance: none; - background: linear-gradient(to right,#b7b8b7 0,#b7b8b7 100%); - background-position: center; - background-size: 100% 2px; - background-repeat: no-repeat; - outline: 0; - border: none; - box-sizing: content-box; - &:disabled { - opacity: .55; - } - &::-webkit-slider-thumb { - appearance: none; - height: 28px; - width: 28px; - border-radius: 50%; - background: @white; - cursor: pointer; - box-shadow: 0 2px 4px rgba(0, 0, 0, .3); - } - &::-ms-thumb { - appearance: none; - height: 28px; - width: 28px; - border-radius: 50%; - background: @white; - cursor: pointer; - box-shadow: 0 2px 4px rgba(0, 0, 0, .3); - } +} + +.range-slider-delay { + width: 100%; + margin: 4px 0 5px 0; + appearance: none; + background: linear-gradient(to right,#b7b8b7 0,#b7b8b7 100%); + background-position: center; + background-size: 100% 2px; + background-repeat: no-repeat; + outline: 0; + border: none; + box-sizing: content-box; + &:disabled { + opacity: .55; } - .slide-apply-all { - color: @themeColor; - border: 0; - .item-inner { - justify-content: center; - } - .item-inner::before { + &::-webkit-slider-thumb { + appearance: none; + height: 28px; + width: 28px; + border-radius: 50%; + background: @white; + cursor: pointer; + box-shadow: 0 2px 4px rgba(0, 0, 0, .3); + } + &::-ms-thumb { + appearance: none; + height: 28px; + width: 28px; + border-radius: 50%; + background: @white; + cursor: pointer; + box-shadow: 0 2px 4px rgba(0, 0, 0, .3); + } +} + +.apply-all { + color: @themeColor; + border: 0; + .item-inner { + justify-content: center; + } + &__elem { + .item-link .item-inner::before { display: none; } } diff --git a/apps/presentationeditor/mobile/src/controller/edit/Transition.jsx b/apps/presentationeditor/mobile/src/controller/edit/Transition.jsx index e8df180f7..d9a217472 100644 --- a/apps/presentationeditor/mobile/src/controller/edit/Transition.jsx +++ b/apps/presentationeditor/mobile/src/controller/edit/Transition.jsx @@ -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(), - // _effectType = this.fillEffectTypes(value); + 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 ( ); } diff --git a/apps/presentationeditor/mobile/src/store/transition.js b/apps/presentationeditor/mobile/src/store/transition.js index e6f3e6d17..d537e66e6 100644 --- a/apps/presentationeditor/mobile/src/store/transition.js +++ b/apps/presentationeditor/mobile/src/store/transition.js @@ -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; + } } \ No newline at end of file diff --git a/apps/presentationeditor/mobile/src/view/edit/Layout.jsx b/apps/presentationeditor/mobile/src/view/edit/Layout.jsx index b74547b5d..b543fcbce 100644 --- a/apps/presentationeditor/mobile/src/view/edit/Layout.jsx +++ b/apps/presentationeditor/mobile/src/view/edit/Layout.jsx @@ -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 ( @@ -23,7 +23,7 @@ const PageLayout = props => { {arrayLayouts.length ? ( - + {arrayLayouts.map((elem, index) => { return ( { const defaultThemes = arrayThemes[0]; const docThemes = arrayThemes[1]; - console.log(slideThemeIndex); - console.log(arrayThemes); + // console.log(slideThemeIndex); + // console.log(arrayThemes); return ( @@ -23,7 +23,7 @@ const PageTheme = props => { {arrayThemes.length ? ( - + {defaultThemes.map((elem, index) => { return ( { } return (_arrCurrentEffectTypes.length > 0) ? _arrCurrentEffectTypes[0].value : -1; }; - + const getEffectName = effect => { for (var i=0; i < _arrEffect.length; i++) { if (_arrEffect[i].value == effect) return _arrEffect[i].displayValue; @@ -90,16 +90,25 @@ const PageTransition = props => { const storeFocusObjects = props.storeFocusObjects; const storeTransition = props.storeTransition; const transitionObj = storeFocusObjects.slideObject.get_transition(); - storeTransition.changeEffect(transitionObj.get_TransitionType()); - const _effect = storeTransition.effect; + 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(); const [stateRange, changeRange] = useState((_effectDelay !== null && _effectDelay !== undefined) ? parseInt(_effectDelay / 1000.) : 0); 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 => { - -
+ disabled={_effect == Asc.c_oAscSlideTransitionTypes.None} routeProps={{ + _arrCurrentEffectTypes, + onEffectTypeClick: props.onEffectTypeClick + }}>
@@ -161,8 +173,8 @@ const PageTransition = props => { - - {_t.textApplyAll} + + {_t.textApplyAll} ); @@ -175,7 +187,7 @@ const PageEffect = props => { const storeTransition = props.storeTransition; const _effect = storeTransition.effect; const _arrEffect = props._arrEffect; - + return ( @@ -186,7 +198,9 @@ const PageEffect = props => { { storeTransition.changeEffect(elem.value); - props.onEffectClick(elem.value); + let valueEffectTypes = props.fillEffectTypes(elem.value); + storeTransition.changeType(valueEffectTypes); + props.onEffectClick(elem.value, valueEffectTypes); }}> ) })} @@ -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 ( @@ -209,11 +225,20 @@ const PageType= props => { - - - - - + {_arrCurrentEffectTypes.length ? ( + + {_arrCurrentEffectTypes.map((elem, index) => { + return ( + { + storeTransition.changeType(elem.value); + props.onEffectTypeClick(elem.value, _effect); + }}> + + ) + })} + + ) : null} ); };