reset view done

3 files changed, 28 insertions, 14 deletions

diff --git a/src/client/views/animationtimeline/Keyframe.scss b/src/client/views/animationtimeline/Keyframe.scss
index 8dcf71994..84c8de287 100644
--- a/src/client/views/animationtimeline/Keyframe.scss
+++ b/src/client/views/animationtimeline/Keyframe.scss
@@ -46,10 +46,6 @@ $timelineDark: #77a1aa;
         position: absolute;
     }
 
-    // .keyframe:hover~.keyframe-information {
-    //     display: flex;
-    // }
-
     .keyframe-information {
         display: none;
         position: relative;
diff --git a/src/client/views/animationtimeline/Timeline.scss b/src/client/views/animationtimeline/Timeline.scss
index a99d017f4..f90249771 100644
--- a/src/client/views/animationtimeline/Timeline.scss
+++ b/src/client/views/animationtimeline/Timeline.scss
@@ -34,29 +34,44 @@ $timelineDark: #77a1aa;
     }
 
     .grid-box {
-        display: grid;
-        grid-template-columns: [first] 50% [line2] 25% [line3] 25%;
+        display: flex;
+        // grid-template-columns: [first] 20% [line2] 20% [line3] 60%;
         width: calc(100% - 150px);
         // width: 100%;
         margin-left: 10px;
 
         .time-box {
-            margin-left: 5px;
+            margin-left: 10px;
             min-width: 140px;
             display: flex;
             justify-content: center;
             align-items: center;
-            // grid-column-start: line2;
+
+            .resetView-tool {
+                width: 30px;
+                height: 30px;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                margin: 3px;
+                color: $timelineDark;
+            }
+
+            .resetView-tool:hover {
+                -webkit-transform: scale(1.1);
+                -ms-transform: scale(1.1);
+                transform: scale(1.1);
+                transition: .2s ease;
+            }
         }
 
         .mode-box {
             display: flex;
             margin-left: 5px;
-            // grid-column-start: line3;
         }
 
         .overview-box {
-            width: 100%;
+            width: 80%;
             display: flex;
         }
 
diff --git a/src/client/views/animationtimeline/Timeline.tsx b/src/client/views/animationtimeline/Timeline.tsx
index 3942499c9..256b98ffa 100644
--- a/src/client/views/animationtimeline/Timeline.tsx
+++ b/src/client/views/animationtimeline/Timeline.tsx
@@ -459,6 +459,9 @@ export class Timeline extends React.Component<FieldViewProps> {
                     </div>
                     <div className="time-box overview-tool" style={{ display: this._timelineVisible ? "flex" : "none" }}>
                         {this.timeIndicator(lengthString)}
+                        <div className="resetView-tool" title="Return to Default View" onClick={() => Doc.resetView(this.props.Document)}><FontAwesomeIcon icon="compress-arrows-alt" size="lg" /></div>
+                        <div className="resetView-tool" style={{ display: this._isAuthoring ? "flex" : "none" }} title="Set Default View" onClick={() => Doc.setView(this.props.Document)}><FontAwesomeIcon icon="expand-arrows-alt" size="lg" /></div>
+
                     </div>
                 </div>
             </div>
@@ -477,8 +480,8 @@ export class Timeline extends React.Component<FieldViewProps> {
         else {
             return (
                 <div style={{ flexDirection: "column" }}>
-                    <div className="animation-text" style={{ width: "100%", display: !this.props.Document.isATOn ? "block" : "none" }}>{`Current: ${this.getCurrentTime()}`}</div>
-                    <div className="animation-text" style={{ width: "100%", display: !this.props.Document.isATOn ? "block" : "none" }}>{`Total: 1:40.07`}</div>
+                    <div className="animation-text" style={{ fontSize: "10px", width: "100%", display: !this.props.Document.isATOn ? "block" : "none" }}>{`Current: ${this.getCurrentTime()}`}</div>
+                    <div className="animation-text" style={{ fontSize: "10px", width: "100%", display: !this.props.Document.isATOn ? "block" : "none" }}>{`Total: 1:40.07`}</div>
                 </div>
             );
         }
@@ -539,7 +542,7 @@ export class Timeline extends React.Component<FieldViewProps> {
 
 
     @action.bound
-    changeLenths() {
+    changeLengths() {
         if (this._infoContainer.current) {
             this._visibleLength = this._infoContainer.current!.getBoundingClientRect().width; //the visible length of the timeline (the length that you current see)
             this._visibleStart = this._infoContainer.current!.scrollLeft; //where the div starts
@@ -572,7 +575,7 @@ export class Timeline extends React.Component<FieldViewProps> {
     render() {
         runInAction(() => {
             this._panelWidth = this.props.PanelWidth();
-            this.changeLenths();
+            this.changeLengths();
         });
 
         // change visible and total width