changes to timeline overview

5 files changed, 109 insertions, 40 deletions

diff --git a/src/client/views/animationtimeline/Keyframe.tsx b/src/client/views/animationtimeline/Keyframe.tsx
index 35d7afc7a..55a2b2075 100644
--- a/src/client/views/animationtimeline/Keyframe.tsx
+++ b/src/client/views/animationtimeline/Keyframe.tsx
@@ -138,7 +138,6 @@ export class Keyframe extends React.Component<IProps> {
     @observable private _gain = 20; //default
     @observable private _mouseToggled = false; 
     @observable private _doubleClickEnabled = false; 
-    @observable private _index:number = 0; 
 
     @computed private get regiondata() { return RegionData(this.regions[this.regions.indexOf(this.props.RegionData)] as Doc);}
     @computed private get regions() { return Cast(this.props.node.regions, listSpec(Doc)) as List<Doc>;}
diff --git a/src/client/views/animationtimeline/Timeline.scss b/src/client/views/animationtimeline/Timeline.scss
index 0f98ed7c4..6270eed41 100644
--- a/src/client/views/animationtimeline/Timeline.scss
+++ b/src/client/views/animationtimeline/Timeline.scss
@@ -4,25 +4,33 @@
 
 .timeline-toolbox{
     position:absolute; 
+    margin: 0px; 
+    padding: 0px; 
     display:flex;
     align-items: flex-start; 
-    flex-direction: row;  
-    justify-content: space-evenly; 
-    align-items: baseline; 
-    top: 10px;
+    flex-direction: row;
+    justify-content: space-evenly;
+    align-items: center;
+    top: 15px;
     div{
+        padding: 0px; 
         margin-left:10px; 
     }
     .animation-text{
         font-size: 20px; 
         height: auto; 
         width: auto; 
+        white-space: nowrap;
+        font-size: 16px;
+        color: grey;
+        letter-spacing: 2px;
+        text-transform: uppercase;
     }
     .round-toggle {
         height: 40px;
         width: 80px;
         background-color: white;
-        border: 2px solid purple;
+        border: 2px solid grey;
         border-radius: 20px;
         animation-fill-mode: forwards; 
         animation-duration: 500ms;
@@ -44,13 +52,18 @@
             margin-top: 0.5px; 
         } 
     }
-    .time-input{
-        height: 40px; 
-        width: 100px; 
-        
-    }
+    
+}
+.time-input{
+    height: 40px; 
+    width: 100px; 
+    white-space: nowrap;
+    font-size: 16px;
+    color: grey;
+    letter-spacing: 2px;
+    text-transform: uppercase;
+    
 }
-
 .tick{
     height:100%; 
     width: 1px; 
diff --git a/src/client/views/animationtimeline/Timeline.tsx b/src/client/views/animationtimeline/Timeline.tsx
index 6028656dc..94cd0629d 100644
--- a/src/client/views/animationtimeline/Timeline.tsx
+++ b/src/client/views/animationtimeline/Timeline.tsx
@@ -321,14 +321,14 @@ export class Timeline extends React.Component<FieldViewProps> {
                 <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>                
-                <div key="overview-text" className="animation-text"><p>Timeline Overview</p></div>
-                <TimelineOverview scale={scale} currentBarX={this._currentBarX} totalLength={this._totalLength} visibleLength={this._visibleLength} visibleStart={this._visibleStart} changeCurrentBarX={this.changeCurrentBarX} movePanX={this.movePanX} />
-                <div key="animation-text" className="animation-text"><p>Mode: {this.props.Document.isAnimating ? "Authoring" : "Play"}</p></div>
+                <div key="overview-text" className="animation-text">Timeline Overview</div>
+                <TimelineOverview isAuthoring = {BoolCast(this.props.Document.isAnimating)} currentBarX={this._currentBarX} totalLength={this._totalLength} visibleLength={this._visibleLength} visibleStart={this._visibleStart} changeCurrentBarX={this.changeCurrentBarX} movePanX={this.movePanX} />
+                <div key="animation-text" className="animation-text">Mode: {this.props.Document.isAnimating ? "Authoring" : "Play"}</div>
                 <div key="round-toggle" ref={this._roundToggleContainerRef} className="round-toggle">
                     <div key="round-toggle-slider" ref={this._roundToggleRef} className="round-toggle-slider" onPointerDown={this.toggleChecked}> </div>
                 </div>
-                <div key="time-text" className="animation-text"><p>Length: </p></div>
-                <input placeholder={String(this._time) + "ms"} ref = {this._timeInputRef} onKeyDown={this.onTimeInput}/>
+                <div key="time-text" className="animation-text" style ={{visibility: this.props.Document.isAnimating ? "visible" : "hidden"}}>Length: </div>
+                <input className="time-input" style={{visibility: this.props.Document.isAnimating ? "visible" : "hidden"}} placeholder={String(this._time) + "ms"} ref = {this._timeInputRef} onKeyDown={this.onTimeInput}/>
             </div>
         );
     }
diff --git a/src/client/views/animationtimeline/TimelineOverview.scss b/src/client/views/animationtimeline/TimelineOverview.scss
index 9e69c2adf..c7f9bd059 100644
--- a/src/client/views/animationtimeline/TimelineOverview.scss
+++ b/src/client/views/animationtimeline/TimelineOverview.scss
@@ -1,38 +1,85 @@
 @import "./../globalCssVariables.scss"; 
 
-.timeline-overview-container{
+
+.timeline-overview-container{ 
+    padding: 0px; 
+    margin: 0px; 
     width: 300px; 
     height: 40px;
-    margin-top: 10px; 
-    margin-left: 20px;  
     background: white; 
+    position: relative; 
     border: 2px solid black; 
-    padding: 0px; 
-    display:inline-block; 
+    
     .timeline-overview-visible{
+        position: absolute; 
         height: 100%; 
         background: green; 
+        display: inline-block;
         margin: 0px; 
+        padding: 0px; 
     }
-    .timeline-overview-scrubber-container{
+    .timeline-overview-scrubber-container{   
+        margin: 0px; 
+        padding: 0px; 
+        position: absolute; 
         height: 100%;
-        margin-top: -40px;  
-        margin-left: 0px; 
         width: 2px; 
+        top: 0px; 
+        left: 0px; 
         z-index: 1001;
         background-color:black; 
         display: inline-block; 
-        .timeline-overview-scrubber-head{
+
+        .timeline-overview-scrubber-head{   
+            padding: 0px; 
+            margin: 0px; 
             position:absolute; 
             height: 30px; 
             width: 30px;
             background-color:transparent; 
             border-radius: 50%; 
             border: 5px solid black; 
-            margin-left: -15px; 
-            top: -15px; 
-
+            left: -15px;
+            top: -30px; 
         }
-        
     }
+}
+
+
+
+.timeline-play-bar{
+    position: relative; 
+    padding: 0px; 
+    margin: 0px; 
+    width: 300px; 
+    height: 4px; 
+    background-color: grey;
+    border-radius: 20px;
+    cursor: pointer; 
+    
+    .timeline-play-head{
+        position: absolute; 
+        padding: 0px; 
+        margin: 0px; 
+        width: 20px; 
+        height: 20px; 
+        border-radius: 50%; 
+        background-color: white; 
+        border: 3px grey solid; 
+        left: 0px; 
+        top: -10px; 
+        cursor: pointer; 
+    }
+}  
+.timeline-play-tail{
+    position: absolute; 
+    padding: 0px; 
+    margin: 0px; 
+    height: 4px; 
+    width: 0px;   
+    z-index: 1000; 
+    background-color: green;
+    border-radius: 20px;
+    margin-top: -4px; 
+    cursor: pointer; 
 }
\ No newline at end of file
diff --git a/src/client/views/animationtimeline/TimelineOverview.tsx b/src/client/views/animationtimeline/TimelineOverview.tsx
index 38b823cbc..4741969dc 100644
--- a/src/client/views/animationtimeline/TimelineOverview.tsx
+++ b/src/client/views/animationtimeline/TimelineOverview.tsx
@@ -6,11 +6,11 @@ import "./TimelineOverview.scss";
 
 
 interface TimelineOverviewProps{
-    scale: number; 
     totalLength: number; 
     visibleLength:number; 
     visibleStart:number;
-    currentBarX:number; 
+    currentBarX:number;
+    isAuthoring: boolean;  
     changeCurrentBarX: (pixel:number) => void; 
     movePanX: (pixel:number) => any;
 }
@@ -37,8 +37,8 @@ export class TimelineOverview extends React.Component<TimelineOverviewProps>{
     onPanX = (e: PointerEvent) => {
         e.stopPropagation(); 
         e.preventDefault(); 
-        let movX = (this.props.visibleStart / this.props.totalLength)* (this.DEFAULT_WIDTH * this.props.scale) + e.movementX; 
-        this.props.movePanX((movX / (this.DEFAULT_WIDTH * this.props.scale)) * this.props.totalLength); 
+        let movX = (this.props.visibleStart / this.props.totalLength)* (this.DEFAULT_WIDTH) + e.movementX; 
+        this.props.movePanX((movX / (this.DEFAULT_WIDTH )) * this.props.totalLength); 
     }
 
     @action
@@ -66,7 +66,7 @@ export class TimelineOverview extends React.Component<TimelineOverviewProps>{
         let scrubberRef = this._scrubberRef.current!; 
         let left = scrubberRef.getBoundingClientRect().left; 
         let offsetX = Math.round(e.clientX - left); 
-        this.props.changeCurrentBarX(((offsetX / (this.DEFAULT_WIDTH * this.props.scale)) * this.props.totalLength) + this.props.currentBarX); 
+        this.props.changeCurrentBarX((offsetX / (this.DEFAULT_WIDTH) * this.props.totalLength) + this.props.currentBarX); 
     }
 
     @action
@@ -78,12 +78,22 @@ export class TimelineOverview extends React.Component<TimelineOverviewProps>{
     }
 
     render(){
+        let timeline = this.props.isAuthoring ? [
+            <div key="timeline-overview-container" className="timeline-overview-container">
+                <div ref={this._visibleRef} key="timeline-overview-visible" className="timeline-overview-visible" style={{left:`${(Math.round(this.props.visibleStart) / Math.round(this.props.totalLength)) * 296}px`, width:`${(Math.round(this.props.visibleLength) / Math.round(this.props.totalLength)) * 296}px`}} onPointerDown={this.onPointerDown}></div>,
+                <div ref={this._scrubberRef} key="timeline-overview-scrubber-container" className="timeline-overview-scrubber-container" style={{left:`${(this.props.currentBarX / this.props.totalLength) * 294}px`}} onPointerDown={this.onScrubberDown}>
+                    <div key="timeline-overview-scrubber-head" className="timeline-overview-scrubber-head"></div>
+                </div>            
+            </div>
+        ] : [
+            <div className="timeline-play-bar">
+                <div ref={this._scrubberRef} className="timeline-play-head" style={{left:`${(this.props.currentBarX / this.props.totalLength) * 294}px`}} onPointerDown={this.onScrubberDown}></div>
+            </div>,
+            <div className="timeline-play-tail" style={{width: `${(this.props.currentBarX / this.props.totalLength) * 294}px`}}></div>
+        ]; 
         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>
-                <div ref={this._scrubberRef} key="timeline-overview-scrubber-container" className="timeline-overview-scrubber-container" style={{marginLeft:`${(this.props.currentBarX / this.props.totalLength) * this.DEFAULT_WIDTH * this.props.scale}px`, marginTop: `${-this.DEFAULT_HEIGHT * this.props.scale * 0.8}px`}} onPointerDown={this.onScrubberDown}>
-                    <div key="timeline-overview-scrubber-head" className="timeline-overview-scrubber-head" style={{}}></div>
-                </div>
+            <div>
+                {timeline}
             </div>
         ); 
     }