Manage project -> item transition via props

tropy · Mar 3, 2017 · 5c3fdd0 · 5c3fdd0
1 parent 2cfaaf2
commit 5c3fdd0
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 17 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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 {