From 64fa1f868faf2c14fa2ed9e1567818d0cc75ec5b Mon Sep 17 00:00:00 2001
From: Mickael KERJEAN <mickael.kerjean@gmail.com>
Date: Mon, 30 Apr 2018 02:10:25 +1000
Subject: [PATCH] improvement (UI): improve transitions

---
 client/pages/viewerpage/editor.js    |  1 -
 client/pages/viewerpage/editor.scss  |  6 ++----
 client/pages/viewerpage/ide.js       | 14 ++++++++------
 client/pages/viewerpage/ide.scss     | 14 ++++++++++++++
 client/pages/viewerpage/menubar.js   |  2 +-
 client/pages/viewerpage/menubar.scss |  7 +++++--
 6 files changed, 30 insertions(+), 14 deletions(-)

diff --git a/client/pages/viewerpage/editor.js b/client/pages/viewerpage/editor.js
index d8a8c7ff..a4172c1a 100644
--- a/client/pages/viewerpage/editor.js
+++ b/client/pages/viewerpage/editor.js
@@ -82,7 +82,6 @@ export class Editor extends React.Component {
                 }
             });
 
-            //debugger;
             if(!('ontouchstart' in window)) editor.focus();
 
             if(CodeMirror.afterInit){
diff --git a/client/pages/viewerpage/editor.scss b/client/pages/viewerpage/editor.scss
index 7aa41c27..9f95eac5 100644
--- a/client/pages/viewerpage/editor.scss
+++ b/client/pages/viewerpage/editor.scss
@@ -1,10 +1,8 @@
 .component_editor{
-    height: 100%;
-    display: flex;
+    width: 100%;
     > div{
-        width: 100%;
+
         #editor{
-            width: 100%;
             height: 100%;
             flex: 1;
             display: flex;
diff --git a/client/pages/viewerpage/ide.js b/client/pages/viewerpage/ide.js
index 05cfeb3e..b4da2089 100644
--- a/client/pages/viewerpage/ide.js
+++ b/client/pages/viewerpage/ide.js
@@ -93,12 +93,14 @@ export class IDE extends React.Component {
                 </NgIf>
               </MenuBar>
 
-              <Editor onSave={this.save.bind(this)} filename={this.props.filename}
-                      content={this.state.contentToSave}
-                      event={this.state.event.asObservable()}
-                      onModeChange={this.onUpdate.bind(this, 'mode', false)}
-                      onFoldChange={this.onUpdate.bind(this, 'folding', false)}
-                      onChange={this.onUpdate.bind(this, 'contentToSave', false)} />
+              <ReactCSSTransitionGroup transitionName="editor" transitionAppear={true} transitionEnter={false} transitionLeave={false} transitionAppearTimeout={300} className="editor_container">
+                <Editor onSave={this.save.bind(this)} filename={this.props.filename}
+                        content={this.state.contentToSave}
+                        event={this.state.event.asObservable()}
+                        onModeChange={this.onUpdate.bind(this, 'mode', false)}
+                        onFoldChange={this.onUpdate.bind(this, 'folding', false)}
+                        onChange={this.onUpdate.bind(this, 'contentToSave', false)} />
+              </ReactCSSTransitionGroup>
 
               <ReactCSSTransitionGroup transitionName="fab" transitionLeave={true} transitionEnter={true} transitionAppear={true} transitionAppearTimeout={400} transitionEnterTimeout={400} transitionLeaveTimeout={200}>
                 <NgIf key={this.props.needSaving} cond={this.props.needSaving}>
diff --git a/client/pages/viewerpage/ide.scss b/client/pages/viewerpage/ide.scss
index c356790d..84e15c05 100644
--- a/client/pages/viewerpage/ide.scss
+++ b/client/pages/viewerpage/ide.scss
@@ -2,6 +2,20 @@
     display: flex;
     flex-direction: column;
     height: 100%;
+    .editor_container{
+        height: 100%;
+        display: flex;
+    }
+}
+
+
+
+.editor-appear{
+    opacity: 0;
+}
+.editor-appear.editor-appear-active{
+    transition: opacity 0.3s ease-out;
+    opacity: 1;
 }
 
 
diff --git a/client/pages/viewerpage/menubar.js b/client/pages/viewerpage/menubar.js
index f766e93b..d07c1689 100644
--- a/client/pages/viewerpage/menubar.js
+++ b/client/pages/viewerpage/menubar.js
@@ -10,7 +10,7 @@ export const MenuBar = (props) => {
     return (
         <div className="component_menubar">
           <Container>
-            <ReactCSSTransitionGroup transitionName="menubar" transitionLeave={false} transitionEnter={false} transitionAppear={true} transitionAppearTimeout={500}>
+            <ReactCSSTransitionGroup transitionName="menubar" transitionLeave={false} transitionEnter={false} transitionAppear={true} transitionAppearTimeout={550}>
               <div className="titlebar" style={{letterSpacing: '0.3px'}}>{props.title}</div>
               <div className="action-item">
                 <span className="specific">
diff --git a/client/pages/viewerpage/menubar.scss b/client/pages/viewerpage/menubar.scss
index 6ac21552..3ba7b1b4 100644
--- a/client/pages/viewerpage/menubar.scss
+++ b/client/pages/viewerpage/menubar.scss
@@ -44,6 +44,9 @@
 }
 
 
+
+
+
 .menubar-appear{
     display: inline-block;
     opacity: 0;
@@ -52,6 +55,6 @@
 .menubar-appear.menubar-appear-active{
     opacity: 1;
     transform: translateY(0px);
-    transition: all 0.15s ease-out;
-    transition-delay: 0.35s;
+    transition: all 0.25s ease-out;
+    transition-delay: 0.30s;
 }