From 21621ac406b7703811ac40b429c51dac752dd142 Mon Sep 17 00:00:00 2001
From: andrewdkim <adkim414@gmail.com>
Date: Sat, 26 Oct 2019 16:47:42 -0400
Subject: ui changes, bug fix, icon fix

---
 src/client/views/animationtimeline/Keyframe.tsx  |  1 +
 src/client/views/animationtimeline/Timeline.scss | 21 +++++++--------------
 src/client/views/animationtimeline/Timeline.tsx  | 10 ++++++----
 3 files changed, 14 insertions(+), 18 deletions(-)

(limited to 'src')

diff --git a/src/client/views/animationtimeline/Keyframe.tsx b/src/client/views/animationtimeline/Keyframe.tsx
index c872b8740..6a5163cde 100644
--- a/src/client/views/animationtimeline/Keyframe.tsx
+++ b/src/client/views/animationtimeline/Keyframe.tsx
@@ -125,6 +125,7 @@ interface IProps {
     tickSpacing: number; 
     tickIncrement: number; 
     time: number; 
+    
     changeCurrentBarX: (x: number) => void;
     transform: Transform;
 }
diff --git a/src/client/views/animationtimeline/Timeline.scss b/src/client/views/animationtimeline/Timeline.scss
index f6a48d876..8317a3606 100644
--- a/src/client/views/animationtimeline/Timeline.scss
+++ b/src/client/views/animationtimeline/Timeline.scss
@@ -156,19 +156,12 @@
 }
 
 
-@keyframes turnon{
-    from{
-        background-color: white;
-    }
-    to{
-        background-color: purple; 
-    }
-}   
-@keyframes turnoff{
-    from{
-        background-color: purple; 
-    }
-    to{
-        background-color: white; 
+.timeline-checker{
+    height: auto; 
+    width: auto; 
+    position: absolute;     
+    .check{
+        width: 100px; 
+        height: 100px; 
     }
 }
\ No newline at end of file
diff --git a/src/client/views/animationtimeline/Timeline.tsx b/src/client/views/animationtimeline/Timeline.tsx
index 30fa70b12..0b6b06aaa 100644
--- a/src/client/views/animationtimeline/Timeline.tsx
+++ b/src/client/views/animationtimeline/Timeline.tsx
@@ -8,7 +8,7 @@ import { Cast, NumCast, StrCast, BoolCast } from "../../../new_fields/Types";
 import { List } from "../../../new_fields/List";
 import { Doc, DocListCast } from "../../../new_fields/Doc";
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faPlayCircle, faBackward, faForward, faGripLines, faArrowUp, faArrowDown, faClock, faPauseCircle, faEyeSlash, faTimes } from "@fortawesome/free-solid-svg-icons";
+import { faPlayCircle, faBackward, faForward, faGripLines, faArrowUp, faArrowDown, faClock, faPauseCircle, faEyeSlash, faTimes, faEye, faCheck, faCross} from "@fortawesome/free-solid-svg-icons";
 import { ContextMenuProps } from "../ContextMenuItem";
 import { ContextMenu } from "../ContextMenu";
 import { TimelineOverview } from "./TimelineOverview";
@@ -265,7 +265,7 @@ export class Timeline extends React.Component<FieldViewProps> {
     timelineContextMenu = (e: MouseEvent): void => {
         ContextMenu.Instance.addItem({description: (this._timelineVisible ? "Close" : "Open") + " Animation Timeline", event: action(() => {
             this._timelineVisible = !this._timelineVisible; 
-        }), icon: faTimes}); 
+        }), icon: this._timelineVisible ? faEyeSlash : faEye }); 
     }
 
 
@@ -329,7 +329,6 @@ export class Timeline extends React.Component<FieldViewProps> {
                 </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>
         );
     }
@@ -341,7 +340,6 @@ export class Timeline extends React.Component<FieldViewProps> {
             this._time = parseInt(timeInput.value, 10);
             this._totalLength = KeyframeFunc.convertPixelTime(this._time, "mili", "pixel", this._tickSpacing, this._tickIncrement); 
             this.props.Document.AnimationLength = this._time; 
-            
         }
     }
 
@@ -392,6 +390,10 @@ export class Timeline extends React.Component<FieldViewProps> {
                                 <FontAwesomeIcon className="resize" icon={faGripLines} />
                             </div>
                         </div>
+                        <div key="timeline-checker"> 
+                            <FontAwesomeIcon className="check" icon={faCheck} />
+                            <FontAwesomeIcon className="check" icon={faCross} />
+                        </div>
                     </div>
                     {this.timelineToolBox(1)}
                 </div>
-- 
cgit v1.2.3-70-g09d2