From 5c3fdd034ccca7b881a427933a3f138d59f91812 Mon Sep 17 00:00:00 2001
From: Sylvester Keil <sylvester@keil.or.at>
Date: Fri, 3 Mar 2017 20:54:30 +0100
Subject: [PATCH] Manage project -> item transition via props

---
 src/components/item/view.js                | 12 ++++++------
 src/components/project/container.js        |  2 ++
 src/stylesheets/components/_project.scss   |  1 -
 src/stylesheets/components/item/_view.scss | 10 ----------
 4 files changed, 8 insertions(+), 17 deletions(-)

diff --git a/src/components/item/view.js b/src/components/item/view.js
index eda18b3a3..f6f878938 100644
--- a/src/components/item/view.js
+++ b/src/components/item/view.js
@@ -29,13 +29,12 @@ class ItemView extends PureComponent {
   }
 
   get offset() {
-    return this.isItemOpen ? 0 : `calc(100% - ${this.props.offset}px)`
+    return (this.isItemOpen ^ this.props.isModeChanging) ?
+      0 : `calc(100% - ${this.props.offset}px)`
   }
 
   get style() {
-    return {
-      transform: `translate3d(${this.offset}, 0, 0)`
-    }
+    return { transform: `translate3d(${this.offset}, 0, 0)` }
   }
 
   handleEsperResize = (height) => {
@@ -99,13 +98,14 @@ class ItemView extends PureComponent {
       })
     ),
 
-    offset: number.isRequired,
-
     esper: shape({
       height: number.isRequired
     }).isRequired,
 
+    offset: number.isRequired,
     mode: string.isRequired,
+    isModeChanging: bool.isRequired,
+
     onPanelResize: func.isRequired,
     onPanelResizeStop: func.isRequired,
     onUiUpdate: func.isRequired
diff --git a/src/components/project/container.js b/src/components/project/container.js
index efba42840..a7453ab65 100644
--- a/src/components/project/container.js
+++ b/src/components/project/container.js
@@ -186,6 +186,8 @@ class ProjectContainer extends Component {
           panel={ui.panel}
           esper={ui.esper}
           offset={this.state.offset}
+          mode={this.state.mode}
+          isModeChanging={this.state.isModeChanging}
           onPanelResize={this.handlePanelResize}
           onPanelResizeStop={this.handlePanelResizeStop}
           onMetadataSave={this.handleMetadataSave}/>
diff --git a/src/stylesheets/components/_project.scss b/src/stylesheets/components/_project.scss
index 368dcf399..1ba2315f4 100644
--- a/src/stylesheets/components/_project.scss
+++ b/src/stylesheets/components/_project.scss
@@ -63,7 +63,6 @@ main {
 }
 
 #items {
-  //flex-basis: calc(100% - #{$panels-default-width});
   display: flex;
   flex-direction: column;
 
diff --git a/src/stylesheets/components/item/_view.scss b/src/stylesheets/components/item/_view.scss
index 1c5215837..74fb5251c 100644
--- a/src/stylesheets/components/item/_view.scss
+++ b/src/stylesheets/components/item/_view.scss
@@ -5,7 +5,6 @@
 .item.view {
   position: absolute;
   left: 0;
-  // transform: translate3d(calc(100% - #{$panels-default-width}), 0, 0);
   top: 0;
   width: 100%;
   height: 100%;
@@ -18,15 +17,6 @@
     transition: transform $mode-transition;
   }
 
-  .item-mode &,
-  .item-mode-enter-active & {
-    transform: translate3d(0, 0, 0);
-  }
-
-  .item-mode-leave-active & {
-    transform: translate3d(calc(100% - #{$panels-default-width}), 0, 0);
-  }
-
   @if $platform == darwin {
     .panel-group-header {
       .toolbar-left {