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

[PE mobile] Continue make transition settings

Browse source
This commit is contained in:
SergeyEzhin 2020-12-30 02:51:05 +03:00
parent b948e839db
commit b7ed3bee64
4 changed files with 68 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -182,12 +182,45 @@
border-radius: 0 5px 5px 0;
}
}
.range-slider {
.range-bar {
height: 2px;
// .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;
}
.range-bar-active {
background: transparent;
&::-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);
}
}
.slide-apply-all {
@ -196,6 +229,9 @@
.item-inner {
justify-content: center;
}
.item-inner::before {
display: none;
}
}
}

5
apps/presentationeditor/mobile/src/controller/Main.jsx
View file

@ -196,17 +196,14 @@ class MainController extends Component {
const storeTransition = this.props.storeTransition;
this.api.asc_registerCallback('asc_onFocusObject', objects => {
console.log(objects);
// console.log(objects);
storeFocusObjects.resetFocusObjects(objects);
const settings = storeFocusObjects.settings;
console.log(settings);
if(settings[0] === "slide") {
const slideObject = objects[0].get_ObjectValue();
storeLayout.changeSlideLayoutIndex(slideObject.get_LayoutIndex());
// const timing = slideObject.get_transition();
// console.log(timing);
storeTransition.addTransition(slideObject.get_transition());
}
});

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

@ -8,48 +8,49 @@ class TransitionController extends Component {
onApplyAll() {
const api = Common.EditorApi.get();
console.log(api);
// api.SlideTimingApplyToAll();
api.SlideTransitionApplyToAll();
};
changeDuration(_effectDuration) {
changeDuration(duration) {
const api = Common.EditorApi.get();
let props = new Asc.CAscSlideProps(),
timing = new Asc.CAscSlideTiming();
timing = new Asc.CAscSlideTransition();
_effectDuration = duration * 1000;
timing.put_TransitionDuration(_effectDuration);
props.put_timing(timing);
props.put_transition(timing);
api.SetSlideProps(props);
};
onStartClick(value) {
const api = Common.EditorApi.get();
let props = new Asc.CAscSlideProps(),
timing = new Asc.CAscSlideTiming();
timing = new Asc.CAscSlideTransition();
timing.put_SlideAdvanceOnMouseClick(value);
props.put_timing(timing);
props.put_transition(timing);
api.SetSlideProps(props);
};
onDelayCheck(value, _effectDelay) {
const api = Common.EditorApi.get();
let props = new Asc.CAscSlideProps(),
timing = new Asc.CAscSlideTiming();
timing = new Asc.CAscSlideTransition();
timing.put_SlideAdvanceAfter(value);
timing.put_SlideAdvanceDuration(_effectDelay);
props.put_timing(timing);
props.put_transition(timing);
api.SetSlideProps(props);
}
onDelay(_effectDelay) {
onDelay(value) {
const api = Common.EditorApi.get();
let props = new Asc.CAscSlideProps(),
timing = new Asc.CAscSlideTiming();
timing = new Asc.CAscSlideTransition(),
_effectDelay = value * 1000;
timing.put_SlideAdvanceDuration(_effectDelay);
props.put_timing(timing);
props.put_transition(timing);
api.SetSlideProps(props);
};

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

@ -12,8 +12,8 @@ const PageTransition = props => {
let _arrCurrentEffectTypes;
let _effectDelay = transition.get_SlideAdvanceDuration();
const [stateRange, changeRange] = useState((_effectDelay !== null && _effectDelay !== undefined) ? parseInt(_effectDelay / 1000.) : 0);
const [stateRange, changeRange] = useState((_effectDelay !== null && _effectDelay !== undefined) ? parseInt(_effectDelay / 1000.) : 0);
const isDelay = store.isDelay;
const isStartOnClick = store.isStartOnClick;
@ -126,17 +126,15 @@ const PageTransition = props => {
<div slot="after" className="splitter">
<label>{(_effectDuration !== null && _effectDuration !== undefined) ? (parseInt(_effectDuration / 1000.) + ' ' + _t.textSec) : ''}</label>
<p className="buttons-row">
<span className="button decrement" onClick={() => {
<span className="button" onClick={() => {
let duration = parseInt(_effectDuration / 1000);
duration = Math.max(0, --duration);
_effectDuration = duration * 1000;
props.changeDuration(_effectDuration);
props.changeDuration(duration);
}}>-</span>
<span className="button increment" onClick={() => {
<span className="button" onClick={() => {
let duration = parseInt(_effectDuration / 1000);
duration = Math.min(300, ++duration);
_effectDuration = duration * 1000;
props.changeDuration(_effectDuration);
props.changeDuration(duration);
}}>+</span>
</p>
</div>
@ -147,23 +145,23 @@ const PageTransition = props => {
<span>{_t.textStartOnClick}</span>
<Toggle checked={isStartOnClick} onChange={() => {
store.toggleStartOnClick();
// props.onStartClick(isStartOnClick);
props.onStartClick(isStartOnClick);
}} />
</ListItem>
<ListItem>
<span>{_t.textDelay}</span>
<Toggle checked={isDelay} onChange={() => {
store.toggleDelay();
// props.onDelayCheck(isDelay, _effectDelay);
props.onDelayCheck(isDelay, _effectDelay);
}} />
</ListItem>
<ListItem>
<ListItemCell className="flex-shrink-3">
<Range min={0} max={300} step={1} value={stateRange} onRangeChange={() => {
// changeRange()
// _effectDelay = stateRange * 1000;
// props.onDelay(_effectDelay);
}} disabled={!isDelay}></Range>
<input type="range" className="range-slider-delay" min="0" max="300" value={stateRange} step="1"
onChange={(e) => {
changeRange(e.target.value);
props.onDelay(stateRange);
}} disabled={!isDelay} />
</ListItemCell>
<ListItemCell className="width-auto flex-shrink-0">
<span>{stateRange} {_t.textSec}</span>
@ -171,7 +169,7 @@ const PageTransition = props => {
</ListItem>
</List>
<List>
<ListItem className="slide-apply-all" onClick={props.onApplyAll}>{_t.textApplyAll}</ListItem>
<ListItem className="slide-apply-all" href="#" onClick={props.onApplyAll}>{_t.textApplyAll}</ListItem>
</List>
</Page>
);