[PE mobile] Continue make transition settings

apps/common/mobile/resources/less/common.less

@@ -182,12 +182,45 @@
             border-radius: 0 5px 5px 0;
         }
     }
-    .range-slider {
+    // .range-slider {
-        .range-bar {
+    //     .range-bar {
-            height: 2px;
+    //         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 {
+        &::-webkit-slider-thumb {
-            background: transparent;
+            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;
+        }
     }
 }
 

apps/presentationeditor/mobile/src/controller/Main.jsx

@@ -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());
             }
         });

apps/presentationeditor/mobile/src/controller/edit/Transition.jsx

@@ -8,48 +8,49 @@ class TransitionController extends Component {
 
     onApplyAll() {
         const api = Common.EditorApi.get();
-        console.log(api);
+        api.SlideTransitionApplyToAll();
-        // api.SlideTimingApplyToAll();
     };
 
-    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);
     };
 

apps/presentationeditor/mobile/src/view/edit/Transition.jsx

@@ -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(duration);
-                                props.changeDuration(_effectDuration);
                             }}>-</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(duration);
-                                props.changeDuration(_effectDuration);
                             }}>+</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={() => {
+                        <input type="range" className="range-slider-delay" min="0" max="300" value={stateRange} step="1"
-                            // changeRange()
+                            onChange={(e) => {
-                            // _effectDelay = stateRange * 1000;
+                                changeRange(e.target.value);
-                            // props.onDelay(_effectDelay);
+                                props.onDelay(stateRange);
-                        }} disabled={!isDelay}></Range>
+                            }} 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>
     );