bug fix with ui changes

3 files changed, 17 insertions, 11 deletions

diff --git a/src/client/views/animationtimeline/Keyframe.tsx b/src/client/views/animationtimeline/Keyframe.tsx
index 55a2b2075..424f4ed8d 100644
--- a/src/client/views/animationtimeline/Keyframe.tsx
+++ b/src/client/views/animationtimeline/Keyframe.tsx
@@ -572,11 +572,11 @@ export class Keyframe extends React.Component<IProps> {
                 keyframeDivs.push(
                     <div className="keyframe" style={{ left: `${KeyframeFunc.convertPixelTime(NumCast(kf.time), "mili", "pixel", this.props.tickSpacing, this.props.tickIncrement) - this.pixelPosition}px` }}>
                         <div className="divider"></div>
-                        <div className="keyframeCircle" onPointerDown={(e) => { this.moveKeyframe(e, kf); }} onContextMenu={(e: React.MouseEvent) => {
+                        <div className="keyframeCircle" onPointerDown={(e) => { e.preventDefault(); e.stopPropagation(); this.moveKeyframe(e, kf); }} onContextMenu={(e: React.MouseEvent) => {
                             e.preventDefault();
                             e.stopPropagation();
                             this.makeKeyframeMenu(kf, e.nativeEvent); 
-                        }}></div>
+                        }} onDoubleClick={(e) => {e.preventDefault(); e.stopPropagation(); }}></div>
                     </div>
                 );
             }
@@ -595,7 +595,8 @@ export class Keyframe extends React.Component<IProps> {
     drawKeyframeDividers = () =>  {
         let keyframeDividers:JSX.Element[] = []; 
         DocListCast(this.regiondata.keyframes).forEach(kf => {
-            if(this.keyframes.indexOf(kf ) !== this.keyframes.length - 1) {
+            let index = this.keyframes.indexOf(kf); 
+            if(index !== this.keyframes.length - 1 ) {
                 let left = this.keyframes[this.keyframes.indexOf(kf) + 1]; 
                 let bodyRef = React.createRef<HTMLDivElement>(); 
                 let kfPos = KeyframeFunc.convertPixelTime(NumCast(kf.time), "mili", "pixel", this.props.tickSpacing, this.props.tickIncrement); 
@@ -606,8 +607,10 @@ export class Keyframe extends React.Component<IProps> {
                     onPointerOut={(e) => { e.preventDefault(); e.stopPropagation(); this.onContainerOut(e, bodyRef); }}
                     onContextMenu={(e) => {
                         e.preventDefault(); 
-                        e.stopPropagation(); 
-                        this._mouseToggled = true; 
+                        e.stopPropagation();
+                        if (index !== 0 || index !== this.keyframes.length - 2){
+                            this._mouseToggled = true; 
+                        }
                         this.makeRegionMenu(kf, e.nativeEvent); 
                     }}>
                     </div>
diff --git a/src/client/views/animationtimeline/Timeline.scss b/src/client/views/animationtimeline/Timeline.scss
index 6270eed41..88d602d76 100644
--- a/src/client/views/animationtimeline/Timeline.scss
+++ b/src/client/views/animationtimeline/Timeline.scss
@@ -11,7 +11,7 @@
     flex-direction: row;
     justify-content: space-evenly;
     align-items: center;
-    top: 15px;
+    top: 20px;
     div{
         padding: 0px; 
         margin-left:10px; 
@@ -56,12 +56,13 @@
 }
 .time-input{
     height: 40px; 
-    width: 100px; 
+    width: 120px; 
     white-space: nowrap;
     font-size: 16px;
     color: grey;
     letter-spacing: 2px;
     text-transform: uppercase;
+    padding-left: 5px; 
     
 }
 .tick{
diff --git a/src/client/views/animationtimeline/Timeline.tsx b/src/client/views/animationtimeline/Timeline.tsx
index 94cd0629d..73e6c600f 100644
--- a/src/client/views/animationtimeline/Timeline.tsx
+++ b/src/client/views/animationtimeline/Timeline.tsx
@@ -315,12 +315,12 @@ export class Timeline extends React.Component<FieldViewProps> {
     }
 
     private timelineToolBox = (scale: number) => {
-        let size = 50 * scale; //50 is default
+        let size = 40 * scale; //50 is default
         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>                
+                <div key="timeline_windBack" onClick={this.windBackward}> <FontAwesomeIcon icon={faBackward} style={{ height: `${size}px`, width: `${size}px`, color:"grey"}} /> </div>
+                <div key=" timeline_play" onClick={this.onPlay}> <FontAwesomeIcon icon={this._playButton} style={{ height: `${size}px`, width: `${size}px`, color:"grey"}} /> </div>
+                <div key="timeline_windForward" onClick={this.windForward}> <FontAwesomeIcon icon={faForward} style={{ height: `${size}px`, width: `${size}px`, color: "grey"}} /> </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>
@@ -358,12 +358,14 @@ export class Timeline extends React.Component<FieldViewProps> {
             roundToggle.style.transform = "translate(0px, 0px)";
             roundToggle.style.animationName = "turnoff";
             roundToggleContainer.style.animationName = "turnoff";
+            roundToggleContainer.style.backgroundColor = "white"; 
             timelineContainer.style.top = `${-this._containerHeight}px`;
             this.props.Document.isAnimating = false;
         } else {
             roundToggle.style.transform = "translate(45px, 0px)";
             roundToggle.style.animationName = "turnon";
             roundToggleContainer.style.animationName = "turnon";
+            roundToggleContainer.style.backgroundColor = "green"; 
             timelineContainer.style.top = "0px"; 
             this.props.Document.isAnimating = true;
         }