From 7ccce9564e11ede82bec01b9eea3889da4dc1bc2 Mon Sep 17 00:00:00 2001
From: andrewdkim <adkim414@gmail.com>
Date: Tue, 1 Oct 2019 17:10:17 -0400
Subject: changes with toggling

---
 src/client/views/animationtimeline/Timeline.scss | 11 +++++------
 src/client/views/animationtimeline/Timeline.tsx  |  8 +++++---
 2 files changed, 10 insertions(+), 9 deletions(-)

(limited to 'src')

diff --git a/src/client/views/animationtimeline/Timeline.scss b/src/client/views/animationtimeline/Timeline.scss
index 09fc593fc..71fac876d 100644
--- a/src/client/views/animationtimeline/Timeline.scss
+++ b/src/client/views/animationtimeline/Timeline.scss
@@ -22,7 +22,7 @@
     box-shadow: 0px 10px 20px; 
 
     .info-container{ 
-        margin-top: 50px; 
+        margin-top: 80px; 
         right:20px; 
         position:absolute; 
         height: calc(100% - 100px); 
@@ -72,7 +72,7 @@
         
     }
     .title-container{
-        margin-top: 80px; 
+        margin-top: 110px; 
         margin-left: 20px; 
         height: calc(100% - 100px - 30px); 
         width: 100px; 
@@ -117,7 +117,6 @@
 }
 
 .round-toggle {
-    position: absolute;
     height: 40px;
     width: 80px;
     background-color: white;
@@ -125,6 +124,7 @@
     border-radius: 20px;
     animation-fill-mode: forwards; 
     animation-duration: 500ms;
+    top: 20px; 
     input{
         position:absolute; 
         opacity: 0; 
@@ -132,15 +132,14 @@
         width: 0; 
     }
     .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; 
-
+        margin-left: 0px; 
+        margin-top: 0.5px; 
     } 
  
 }
diff --git a/src/client/views/animationtimeline/Timeline.tsx b/src/client/views/animationtimeline/Timeline.tsx
index 8127e4de2..bc48f422a 100644
--- a/src/client/views/animationtimeline/Timeline.tsx
+++ b/src/client/views/animationtimeline/Timeline.tsx
@@ -18,7 +18,7 @@ import { KeyframeFunc } from "./Keyframe";
 @observer
 export class Timeline extends React.Component<FieldViewProps> {
 
-    private readonly DEFAULT_CONTAINER_HEIGHT: number = 300;
+    private readonly DEFAULT_CONTAINER_HEIGHT: number = 330;
     private readonly DEFAULT_TICK_SPACING: number = 50;
     private readonly MIN_CONTAINER_HEIGHT: number = 205;
     private readonly MAX_CONTAINER_HEIGHT: number = 800;
@@ -353,16 +353,18 @@ export class Timeline extends React.Component<FieldViewProps> {
         e.stopPropagation(); 
         let roundToggle = this._roundToggleRef.current!; 
         let roundToggleContainer = this._roundToggleContainerRef.current!; 
+        let timelineContainer = this._timelineContainer.current!; 
         if (BoolCast(this.props.Document.isAnimating)){
             roundToggle.style.transform = "translate(0px, 0px)";
             roundToggle.style.animationName = "turnoff"; 
             roundToggleContainer.style.animationName = "turnoff"; 
- 
+            timelineContainer.style.transform = `translate(0px, ${this._containerHeight}px)`; 
             this.props.Document.isAnimating = false;
         } else {
             roundToggle.style.transform = "translate(45px, 0px)"; 
             roundToggle.style.animationName = "turnon"; 
             roundToggleContainer.style.animationName = "turnon"; 
+            timelineContainer.style.transform = `translate(0px, ${-this._containerHeight}px)`; 
             this.props.Document.isAnimating = true; 
         }
     }
@@ -371,7 +373,7 @@ export class Timeline extends React.Component<FieldViewProps> {
             <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" }}>
+                        <div key="timeline_container" className="timeline-container" ref={this._timelineContainer} style={{ height: `${this._containerHeight}px`, top:`${-this._containerHeight}`}}>
                             <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 => {
-- 
cgit v1.2.3-70-g09d2