From 4fd68c0ec41f2871ae24a87d8e5316d093bdb505 Mon Sep 17 00:00:00 2001
From: monikahedman <monika_hedman@brown.edu>
Date: Sun, 2 Feb 2020 15:10:34 -0500
Subject: changes

---
 src/client/views/animationtimeline/Keyframe.scss | 15 +++++++++++
 src/client/views/animationtimeline/Keyframe.tsx  |  8 +++++-
 src/client/views/animationtimeline/Timeline.scss | 32 +++++++++++++++---------
 src/client/views/animationtimeline/Timeline.tsx  |  2 +-
 src/client/views/animationtimeline/Track.scss    | 17 +++++++------
 5 files changed, 52 insertions(+), 22 deletions(-)

(limited to 'src')

diff --git a/src/client/views/animationtimeline/Keyframe.scss b/src/client/views/animationtimeline/Keyframe.scss
index 8ff1c53f5..f0685943b 100644
--- a/src/client/views/animationtimeline/Keyframe.scss
+++ b/src/client/views/animationtimeline/Keyframe.scss
@@ -46,6 +46,21 @@ $timelineDark: #77a1aa;
         position: absolute;
     }
 
+    .keyframe:hover~.keyframe-information {
+        display: flex;
+    }
+
+    .keyframe-information {
+        display: none;
+        position: relative;
+        // z-index: 100000;
+        // background: $timelineDark;
+        width: 100px;
+        // left: -50px;
+        height: 100px;
+        // top: 40px;
+    }
+
     .keyframeCircle {
         left: -10px;
         border: 3px solid $timelineDark;
diff --git a/src/client/views/animationtimeline/Keyframe.tsx b/src/client/views/animationtimeline/Keyframe.tsx
index 9c486a6d6..2348da813 100644
--- a/src/client/views/animationtimeline/Keyframe.tsx
+++ b/src/client/views/animationtimeline/Keyframe.tsx
@@ -522,14 +522,18 @@ export class Keyframe extends React.Component<IProps> {
         DocListCast(this.regiondata.keyframes).forEach(kf => {
             if (kf.type as KeyframeFunc.KeyframeType !== KeyframeFunc.KeyframeType.end) {
                 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="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 keyframe-indicator" onPointerDown={(e) => { e.preventDefault(); e.stopPropagation(); this.moveKeyframe(e, kf); }} onContextMenu={(e: React.MouseEvent) => {
                             e.preventDefault();
                             e.stopPropagation();
                             this.makeKeyframeMenu(kf, e.nativeEvent);
                         }} onDoubleClick={(e) => { e.preventDefault(); e.stopPropagation(); }}></div>
+
                     </div>
+                        <div className="keyframe-information"></div>
+                    </>
+
                 );
             } else {
                 keyframeDivs.push(
@@ -589,7 +593,9 @@ export class Keyframe extends React.Component<IProps> {
                     onPointerDown={this.onBarPointerDown
                     }>
                     <div className="leftResize keyframe-indicator" onPointerDown={this.onResizeLeft} ></div>
+                    {/* <div className="keyframe-information"></div> */}
                     <div className="rightResize keyframe-indicator" onPointerDown={this.onResizeRight}></div>
+                    {/* <div className="keyframe-information"></div> */}
                     {this.drawKeyframes()}
                     {this.drawKeyframeDividers()}
                 </div>
diff --git a/src/client/views/animationtimeline/Timeline.scss b/src/client/views/animationtimeline/Timeline.scss
index 40479559d..dbdade03f 100644
--- a/src/client/views/animationtimeline/Timeline.scss
+++ b/src/client/views/animationtimeline/Timeline.scss
@@ -206,18 +206,26 @@ $timelineDark: #77a1aa;
         border-right: 2px solid $timelineDark;
 
         .datapane {
-    top: 0px;
-    width: 100px;
-    height: 30%;
-    border: 1px solid $dark-color;
-    background-color: $intermediate-color;
-    color: white;
-    position: relative;
-    float: left;
-    border-style: solid;
-    overflow-y: scroll;
-    overflow-x: hidden;
-}
+            top: 0px;
+            width: 100px;
+            height: 30%;
+            border: 1px solid $dark-color;
+            font-size: 12px;
+            line-height: 11px;
+            background-color: $timelineDark;
+            color: white;
+            position: relative;
+            float: left;
+            padding: 3px;
+            border-style: solid;
+            overflow-y: scroll;
+            overflow-x: hidden;
+
+            p {
+                hyphens: auto;
+            }
+
+        }
     }
 
     .resize {
diff --git a/src/client/views/animationtimeline/Timeline.tsx b/src/client/views/animationtimeline/Timeline.tsx
index 5ff721ebb..f0ca1c0ab 100644
--- a/src/client/views/animationtimeline/Timeline.tsx
+++ b/src/client/views/animationtimeline/Timeline.tsx
@@ -100,7 +100,7 @@ export class Timeline extends React.Component<FieldViewProps> {
 
     /////////lifecycle functions////////////
     componentWillMount() {
-        let relativeHeight = window.innerHeight / 14; //sets height to arbitrary size, relative to innerHeight
+        let relativeHeight = window.innerHeight / 20; //sets height to arbitrary size, relative to innerHeight
         this._titleHeight = relativeHeight < this.MAX_TITLE_HEIGHT ? relativeHeight : this.MAX_TITLE_HEIGHT; //check if relHeight is less than Maxheight. Else, just set relheight to max
         this.MIN_CONTAINER_HEIGHT = this._titleHeight + 130; //offset
         this.DEFAULT_CONTAINER_HEIGHT = this._titleHeight * 2 + 130; //twice the titleheight + offset
diff --git a/src/client/views/animationtimeline/Track.scss b/src/client/views/animationtimeline/Track.scss
index 61a8e0b88..aec587a79 100644
--- a/src/client/views/animationtimeline/Track.scss
+++ b/src/client/views/animationtimeline/Track.scss
@@ -1,14 +1,15 @@
-@import "./../globalCssVariables.scss"; 
+@import "./../globalCssVariables.scss";
 
-.track-container{
+.track-container {
 
     .track {
-        .inner {  
-            top:0px; 
-            width: calc(100%); 
-            background-color: $light-color;     
-            border: 1px solid $dark-color;        
-            position:relative; 
+        .inner {
+            top: 0px;
+            width: calc(100%);
+            background-color: $light-color;
+            border: 1px solid $dark-color;
+            position: relative;
+            z-index: 100;
         }
     }
 }
\ No newline at end of file
-- 
cgit v1.2.3-70-g09d2