toggle button

3 files changed, 65 insertions, 26 deletions

diff --git a/src/client/views/animationtimeline/Timeline.scss b/src/client/views/animationtimeline/Timeline.scss
index 990bc681c..09fc593fc 100644
--- a/src/client/views/animationtimeline/Timeline.scss
+++ b/src/client/views/animationtimeline/Timeline.scss
@@ -1,11 +1,6 @@
 @import "./../globalCssVariables.scss"; 
 
-.minimize{
-    position:relative; 
-    z-index: 1000; 
-    height: 30px; 
-    width: 100px; 
-}
+
 
 .timeline-toolbox{
     position:absolute; 
@@ -17,6 +12,8 @@
         margin-left:10px; 
     }
 }
+
+
 .timeline-container{
     width:100%;
     height:300px; 
@@ -37,12 +34,10 @@
             background-color: transparent; 
             height: 30px;
             width:100%; 
-            
             .tick{
                 height:100%; 
                 width: 1px; 
                 background-color:black; 
-
             }   
         }
         .scrubber{
@@ -128,15 +123,40 @@
     background-color: white;
     border: 2px solid purple;
     border-radius: 20px;
+    animation-fill-mode: forwards; 
+    animation-duration: 500ms;
     input{
+        position:absolute; 
         opacity: 0; 
         height: 0; 
         width: 0; 
     }
-    .slider{
-        height: 40px; 
-        width: 40px; 
-        background-color: black; 
+    .round-toggle-slider{
+        position:absolute; 
+        height: 35px; 
+        width: 35px; 
+        top: 0.5px;
+        background-color: white;
+        border:1px solid grey;
         border-radius: 20px; 
+        transition: transform 500ms ease-in-out; 
+
+    } 
+ 
+}
+@keyframes turnon{
+    from{
+        background-color: white;
+    }
+    to{
+        background-color: purple; 
+    }
+}   
+@keyframes turnoff{
+    from{
+        background-color: purple; 
+    }
+    to{
+        background-color: white; 
     }
 }
\ No newline at end of file
diff --git a/src/client/views/animationtimeline/Timeline.tsx b/src/client/views/animationtimeline/Timeline.tsx
index 8f96315a0..8127e4de2 100644
--- a/src/client/views/animationtimeline/Timeline.tsx
+++ b/src/client/views/animationtimeline/Timeline.tsx
@@ -29,6 +29,8 @@ export class Timeline extends React.Component<FieldViewProps> {
     @observable private _titleContainer = React.createRef<HTMLDivElement>();
     @observable private _timelineContainer = React.createRef<HTMLDivElement>();
     @observable private _infoContainer = React.createRef<HTMLDivElement>();
+    @observable private _roundToggleRef = React.createRef<HTMLDivElement>();  
+    @observable private _roundToggleContainerRef = React.createRef<HTMLDivElement>(); 
 
     @observable private _currentBarX: number = 0;
     @observable private _windSpeed: number = 1;
@@ -331,23 +333,45 @@ export class Timeline extends React.Component<FieldViewProps> {
 
     private timelineToolBox = (scale:number) => {
         let size = 50 * scale; //50 is default
-        return (
+        return (   
+      
         <div key="timeline_toolbox" className="timeline-toolbox" style={{height:`${size}px`}}>
-                <div key="timeline_windBack" onClick={this.windBackward}> <FontAwesomeIcon icon={faBackward} style={{height:`${size}px`, width: `${size}px`}} /> </div>
-                <div key =" timeline_play" onClick={this.onPlay}> <FontAwesomeIcon icon={this._playButton} style={{height:`${size}px`, width: `${size}px`}}  /> </div>
-                <div key="timeline_windForward" onClick={this.windForward}> <FontAwesomeIcon icon={faForward} style={{height:`${size}px`, width: `${size}px`}}  /> </div>
-                <TimelineOverview scale={scale} currentBarX={this._currentBarX} totalLength={this._totalLength} visibleLength={this._visibleLength} visibleStart={this._visibleStart} changeCurrentBarX={this.changeCurrentBarX} movePanX={this.movePanX}/> 
+            <div key="timeline_windBack" onClick={this.windBackward}> <FontAwesomeIcon icon={faBackward} style={{height:`${size}px`, width: `${size}px`}} /> </div>
+            <div key =" timeline_play" onClick={this.onPlay}> <FontAwesomeIcon icon={this._playButton} style={{height:`${size}px`, width: `${size}px`}}  /> </div>
+            <div key="timeline_windForward" onClick={this.windForward}> <FontAwesomeIcon icon={faForward} style={{height:`${size}px`, width: `${size}px`}}  /> </div>
+            <TimelineOverview scale={scale} currentBarX={this._currentBarX} totalLength={this._totalLength} visibleLength={this._visibleLength} visibleStart={this._visibleStart} changeCurrentBarX={this.changeCurrentBarX} movePanX={this.movePanX}/>            
+            <div ref={this._roundToggleContainerRef}key="round-toggle" className="round-toggle">
+                <div ref={this._roundToggleRef} className="round-toggle-slider" onPointerDown = {this.toggleChecked}> </div>                    
+            </div>
         </div>
         );
     }
 
+    @action
+    private toggleChecked = (e:React.PointerEvent) => {
+        e.preventDefault(); 
+        e.stopPropagation(); 
+        let roundToggle = this._roundToggleRef.current!; 
+        let roundToggleContainer = this._roundToggleContainerRef.current!; 
+        if (BoolCast(this.props.Document.isAnimating)){
+            roundToggle.style.transform = "translate(0px, 0px)";
+            roundToggle.style.animationName = "turnoff"; 
+            roundToggleContainer.style.animationName = "turnoff"; 
+ 
+            this.props.Document.isAnimating = false;
+        } else {
+            roundToggle.style.transform = "translate(45px, 0px)"; 
+            roundToggle.style.animationName = "turnon"; 
+            roundToggleContainer.style.animationName = "turnon"; 
+            this.props.Document.isAnimating = true; 
+        }
+    }
     render() {
         return (
             <div>
                 <div style={{visibility: this._timelineVisible ? "visible" : "hidden"}}>
                     <div key="timeline_wrapper" style={{visibility: BoolCast(this.props.Document.isAnimating && this._timelineVisible) ? "visible" :"hidden", left: "0px", top: "0px", position: "absolute", width: "100%", transform: "translate(0px, 0px)"}}>
                         <div key="timeline_container" className="timeline-container" ref={this._timelineContainer} style={{ height: `${this._containerHeight}px`, left: "0px", top: "30px" }}>
-                            {this.timelineToolBox(0.5)}
                             <div key ="timeline_info"className="info-container" ref={this._infoContainer} onWheel={this.onWheelZoom}>
                                 <div key="timeline_scrubberbox" className="scrubberbox" ref={this._scrubberbox} style={{width: `${this._totalLength}px`}} onClick={this.onScrubberClick}>
                                     {this._ticks.map(element => {
@@ -365,16 +389,13 @@ export class Timeline extends React.Component<FieldViewProps> {
                                 {DocListCast(this.children).map(doc => <div className="datapane" onPointerOver={() => {Doc.BrushDoc(doc);}} onPointerOut={() => {Doc.UnBrushDoc(doc);}}><p>{doc.title}</p></div>)}
                             </div>
                             <div key="timeline_resize" onPointerDown={this.onResizeDown}>
-                                <FontAwesomeIcon className="resize" icon={faGripLines} />
+                                <FontAwesomeIcon className="resize" icon={faGripLines}/>
                             </div>
                         </div>
                     </div>
-                    {BoolCast(this.props.Document.isAnimating) ? <div></div>: this.timelineToolBox(1) }
+                    { this.timelineToolBox(1) }
                 </div>
-                <label key="round-toggle" className="round-toggle">
-                    <input type="checkbox"/>
-                    <span className="round-toggle-slider"> </span>                    
-                </label>
+      
 
             </div>
         );
diff --git a/src/client/views/animationtimeline/TimelineOverview.tsx b/src/client/views/animationtimeline/TimelineOverview.tsx
index a8f7faba8..38b823cbc 100644
--- a/src/client/views/animationtimeline/TimelineOverview.tsx
+++ b/src/client/views/animationtimeline/TimelineOverview.tsx
@@ -78,8 +78,6 @@ export class TimelineOverview extends React.Component<TimelineOverviewProps>{
     }
 
     render(){
-        console.log("rendered"); 
-        console.log(this.props.visibleStart); 
         return(
             <div key="timeline-overview-container" className="timeline-overview-container" style={{height: `${this.DEFAULT_HEIGHT * this.props.scale * 0.8}px` ,width:`${this.DEFAULT_WIDTH * this.props.scale}`}}>
                 <div ref={this._visibleRef} key="timeline-overview-visible" className="timeline-overview-visible" style={{marginLeft:`${(this.props.visibleStart / this.props.totalLength)* this.DEFAULT_WIDTH * this.props.scale}px`, width:`${(this.props.visibleLength / this.props.totalLength) * this.DEFAULT_WIDTH * this.props.scale}px`}} onPointerDown={this.onPointerDown}></div>