From 9cb655a325bc454221f70919487e4546f594f1e5 Mon Sep 17 00:00:00 2001
From: Richard Evans <rmevans9@gmail.com>
Date: Sat, 29 Jul 2017 22:57:45 -0400
Subject: [PATCH 1/8] Tweak the UI to make the menu not so intrusive

---
 .../preview/components/OnDeviceUI/index.js    | 59 ++++++++++++++-----
 .../preview/components/OnDeviceUI/style.js    | 23 ++++++--
 .../preview/components/StoryListView/index.js |  2 +-
 .../preview/components/StoryListView/style.js |  2 +-
 4 files changed, 65 insertions(+), 21 deletions(-)

diff --git a/app/react-native/src/preview/components/OnDeviceUI/index.js b/app/react-native/src/preview/components/OnDeviceUI/index.js
index d52f3f3d787f..67adc4a8ca54 100644
--- a/app/react-native/src/preview/components/OnDeviceUI/index.js
+++ b/app/react-native/src/preview/components/OnDeviceUI/index.js
@@ -1,24 +1,55 @@
-import React, { PropTypes } from 'react';
-import { View } from 'react-native';
+import React, { Component, PropTypes } from 'react';
+import { View, TouchableOpacity, Text } from 'react-native';
 import style from './style';
 import StoryListView from '../StoryListView';
 import StoryView from '../StoryView';
 
-export default function OnDeviceUI(props) {
-  const { stories, events, url } = props;
+export default class OnDeviceUI extends Component {
+  state = {
+    isMenuOpen: false,
+  };
 
-  return (
-    <View style={style.main}>
-      <View style={style.leftPanel}>
-        <StoryListView stories={stories} events={events} />
-      </View>
-      <View style={style.rightPanel}>
-        <View style={style.preview}>
-          <StoryView url={url} events={events} />
+  handleOpenMenu = () => {
+    this.setState({
+      isMenuOpen: true,
+    });
+  };
+
+  handleCloseMenu = () => {
+    this.setState({
+      isMenuOpen: false,
+    });
+  };
+
+  render() {
+    const { stories, events, url } = this.props;
+    const { isMenuOpen } = this.state;
+
+    return (
+      <View style={style.main}>
+        <View style={style.previewContainer}>
+          <View style={style.preview}>
+            <StoryView url={url} events={events} />
+          </View>
+        </View>
+        <View style={style.openMenuButton}>
+          <TouchableOpacity onPress={this.handleOpenMenu}>
+            <View>
+              <Text>Open Menu</Text>
+            </View>
+          </TouchableOpacity>
+        </View>
+        <View style={[style.menuContainer, isMenuOpen && style.menuContainerOpen]}>
+          <TouchableOpacity onPress={this.handleCloseMenu}>
+            <View>
+              <Text>Close Menu</Text>
+            </View>
+          </TouchableOpacity>
+          <StoryListView stories={stories} events={events} />
         </View>
       </View>
-    </View>
-  );
+    );
+  }
 }
 
 OnDeviceUI.propTypes = {
diff --git a/app/react-native/src/preview/components/OnDeviceUI/style.js b/app/react-native/src/preview/components/OnDeviceUI/style.js
index 819d4cd6449c..9d5363bad7f1 100644
--- a/app/react-native/src/preview/components/OnDeviceUI/style.js
+++ b/app/react-native/src/preview/components/OnDeviceUI/style.js
@@ -3,17 +3,24 @@ import { StyleSheet } from 'react-native';
 export default {
   main: {
     flex: 1,
-    flexDirection: 'row',
     paddingTop: 20,
     backgroundColor: 'rgba(247, 247, 247, 1)',
   },
-  leftPanel: {
-    flex: 1,
-    maxWidth: 250,
+  menuContainer: {
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+    left: -250,
+    width: 250,
     paddingHorizontal: 8,
+    paddingTop: 20,
     paddingBottom: 8,
+    backgroundColor: 'rgba(247, 247, 247, 1)',
   },
-  rightPanel: {
+  menuContainerOpen: {
+    left: 0,
+  },
+  previewContainer: {
     flex: 1,
     backgroundColor: 'rgba(255, 255, 255, 1)',
     borderWidth: StyleSheet.hairlineWidth,
@@ -22,6 +29,12 @@ export default {
     marginBottom: 8,
     marginHorizontal: 8,
   },
+  openMenuButton: {
+    position: 'absolute',
+    top: 20,
+    left: 10,
+    backgroundColor: 'transparent',
+  },
   preview: {
     ...StyleSheet.absoluteFillObject,
   },
diff --git a/app/react-native/src/preview/components/StoryListView/index.js b/app/react-native/src/preview/components/StoryListView/index.js
index b8a0bb179b9e..27407204befb 100644
--- a/app/react-native/src/preview/components/StoryListView/index.js
+++ b/app/react-native/src/preview/components/StoryListView/index.js
@@ -54,7 +54,7 @@ export default class StoryListView extends Component {
   }
 
   componentWillUnmount() {
-    this.props.stories.removeListener('storyAdded', this.storiesHandler);
+    this.props.stories.removeListener('storyAdded', this.storyAddedHandler);
     this.props.events.removeListener('story', this.storyChangedHandler);
   }
 
diff --git a/app/react-native/src/preview/components/StoryListView/style.js b/app/react-native/src/preview/components/StoryListView/style.js
index 00b79d358308..0a37211c86f0 100644
--- a/app/react-native/src/preview/components/StoryListView/style.js
+++ b/app/react-native/src/preview/components/StoryListView/style.js
@@ -4,7 +4,7 @@ export default {
     maxWidth: 250,
   },
   header: {
-    paddingTop: 24,
+    paddingTop: 4,
     paddingBottom: 4,
   },
   headerText: {

From feb86f314622684d222c139cf6756d9e86b5a0d0 Mon Sep 17 00:00:00 2001
From: Richard Evans <rmevans9@gmail.com>
Date: Sun, 30 Jul 2017 06:26:10 -0400
Subject: [PATCH 2/8] Add animations to the open/close of the menu

---
 .../preview/components/OnDeviceUI/index.js    | 36 ++++++++++++-------
 .../preview/components/OnDeviceUI/style.js    |  3 --
 2 files changed, 23 insertions(+), 16 deletions(-)

diff --git a/app/react-native/src/preview/components/OnDeviceUI/index.js b/app/react-native/src/preview/components/OnDeviceUI/index.js
index 67adc4a8ca54..5c9737efb1a9 100644
--- a/app/react-native/src/preview/components/OnDeviceUI/index.js
+++ b/app/react-native/src/preview/components/OnDeviceUI/index.js
@@ -1,29 +1,39 @@
 import React, { Component, PropTypes } from 'react';
-import { View, TouchableOpacity, Text } from 'react-native';
+import { Animated, Easing, View, TouchableOpacity, Text } from 'react-native';
 import style from './style';
 import StoryListView from '../StoryListView';
 import StoryView from '../StoryView';
 
 export default class OnDeviceUI extends Component {
   state = {
+    menuAnimation: new Animated.Value(0),
     isMenuOpen: false,
   };
 
-  handleOpenMenu = () => {
-    this.setState({
-      isMenuOpen: true,
-    });
-  };
+  handleToggleMenu = () => {
+    const isMenuOpen = !this.state.isMenuOpen;
+
+    Animated.timing(this.state.menuAnimation, {
+      toValue: isMenuOpen ? 250 : 0,
+      duration: 150,
+      easing: Easing.linear,
+    }).start();
 
-  handleCloseMenu = () => {
     this.setState({
-      isMenuOpen: false,
+      isMenuOpen,
     });
   };
 
   render() {
     const { stories, events, url } = this.props;
-    const { isMenuOpen } = this.state;
+    const { menuAnimation } = this.state;
+
+    const menuStyles = [
+      style.menuContainer,
+      {
+        transform: [{ translateX: menuAnimation }],
+      },
+    ];
 
     return (
       <View style={style.main}>
@@ -33,20 +43,20 @@ export default class OnDeviceUI extends Component {
           </View>
         </View>
         <View style={style.openMenuButton}>
-          <TouchableOpacity onPress={this.handleOpenMenu}>
+          <TouchableOpacity onPress={this.handleToggleMenu}>
             <View>
               <Text>Open Menu</Text>
             </View>
           </TouchableOpacity>
         </View>
-        <View style={[style.menuContainer, isMenuOpen && style.menuContainerOpen]}>
-          <TouchableOpacity onPress={this.handleCloseMenu}>
+        <Animated.View style={menuStyles}>
+          <TouchableOpacity onPress={this.handleToggleMenu}>
             <View>
               <Text>Close Menu</Text>
             </View>
           </TouchableOpacity>
           <StoryListView stories={stories} events={events} />
-        </View>
+        </Animated.View>
       </View>
     );
   }
diff --git a/app/react-native/src/preview/components/OnDeviceUI/style.js b/app/react-native/src/preview/components/OnDeviceUI/style.js
index 9d5363bad7f1..12a3dc462102 100644
--- a/app/react-native/src/preview/components/OnDeviceUI/style.js
+++ b/app/react-native/src/preview/components/OnDeviceUI/style.js
@@ -17,9 +17,6 @@ export default {
     paddingBottom: 8,
     backgroundColor: 'rgba(247, 247, 247, 1)',
   },
-  menuContainerOpen: {
-    left: 0,
-  },
   previewContainer: {
     flex: 1,
     backgroundColor: 'rgba(255, 255, 255, 1)',

From 2c095c242b7d7b518979291690ac2710d70b19b9 Mon Sep 17 00:00:00 2001
From: Richard Evans <rmevans9@gmail.com>
Date: Sun, 30 Jul 2017 07:06:55 -0400
Subject: [PATCH 3/8] Add a overlay over the preview window when the menu is
 open that is touchable to close

---
 .../preview/components/OnDeviceUI/index.js    | 29 ++++++++++++++-----
 .../preview/components/OnDeviceUI/style.js    |  8 +++++
 2 files changed, 29 insertions(+), 8 deletions(-)

diff --git a/app/react-native/src/preview/components/OnDeviceUI/index.js b/app/react-native/src/preview/components/OnDeviceUI/index.js
index 5c9737efb1a9..47061abd9a45 100644
--- a/app/react-native/src/preview/components/OnDeviceUI/index.js
+++ b/app/react-native/src/preview/components/OnDeviceUI/index.js
@@ -1,5 +1,5 @@
 import React, { Component, PropTypes } from 'react';
-import { Animated, Easing, View, TouchableOpacity, Text } from 'react-native';
+import { Animated, Easing, View, TouchableWithoutFeedback, Text } from 'react-native';
 import style from './style';
 import StoryListView from '../StoryListView';
 import StoryView from '../StoryView';
@@ -14,7 +14,7 @@ export default class OnDeviceUI extends Component {
     const isMenuOpen = !this.state.isMenuOpen;
 
     Animated.timing(this.state.menuAnimation, {
-      toValue: isMenuOpen ? 250 : 0,
+      toValue: isMenuOpen ? 1 : 0,
       duration: 150,
       easing: Easing.linear,
     }).start();
@@ -26,12 +26,21 @@ export default class OnDeviceUI extends Component {
 
   render() {
     const { stories, events, url } = this.props;
-    const { menuAnimation } = this.state;
+    const { isMenuOpen, menuAnimation } = this.state;
+
+    const overlayStyles = [style.overlayContainer, { opacity: menuAnimation }];
 
     const menuStyles = [
       style.menuContainer,
       {
-        transform: [{ translateX: menuAnimation }],
+        transform: [
+          {
+            translateX: menuAnimation.interpolate({
+              inputRange: [0, 1],
+              outputRange: [0, 250],
+            }),
+          },
+        ],
       },
     ];
 
@@ -43,18 +52,22 @@ export default class OnDeviceUI extends Component {
           </View>
         </View>
         <View style={style.openMenuButton}>
-          <TouchableOpacity onPress={this.handleToggleMenu}>
+          <TouchableWithoutFeedback onPress={this.handleToggleMenu}>
             <View>
               <Text>Open Menu</Text>
             </View>
-          </TouchableOpacity>
+          </TouchableWithoutFeedback>
         </View>
+        {isMenuOpen &&
+          <TouchableWithoutFeedback onPress={this.handleToggleMenu}>
+            <Animated.View style={overlayStyles} />
+          </TouchableWithoutFeedback>}
         <Animated.View style={menuStyles}>
-          <TouchableOpacity onPress={this.handleToggleMenu}>
+          <TouchableWithoutFeedback onPress={this.handleToggleMenu}>
             <View>
               <Text>Close Menu</Text>
             </View>
-          </TouchableOpacity>
+          </TouchableWithoutFeedback>
           <StoryListView stories={stories} events={events} />
         </Animated.View>
       </View>
diff --git a/app/react-native/src/preview/components/OnDeviceUI/style.js b/app/react-native/src/preview/components/OnDeviceUI/style.js
index 12a3dc462102..a1ba4e636ac8 100644
--- a/app/react-native/src/preview/components/OnDeviceUI/style.js
+++ b/app/react-native/src/preview/components/OnDeviceUI/style.js
@@ -6,6 +6,14 @@ export default {
     paddingTop: 20,
     backgroundColor: 'rgba(247, 247, 247, 1)',
   },
+  overlayContainer: {
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0,
+    backgroundColor: 'rgba(0, 0, 0, 0.6)',
+  },
   menuContainer: {
     position: 'absolute',
     top: 0,

From 80b90157de98e721614ab3d8a23e9b5f1edb20c5 Mon Sep 17 00:00:00 2001
From: Richard Evans <rmevans9@gmail.com>
Date: Sun, 30 Jul 2017 07:21:10 -0400
Subject: [PATCH 4/8] Add images instead of text for buttons.

---
 .../src/preview/components/OnDeviceUI/index.js    |  11 ++++++++---
 .../preview/components/OnDeviceUI/menu_close.png  | Bin 0 -> 215 bytes
 .../preview/components/OnDeviceUI/menu_open.png   | Bin 0 -> 184 bytes
 3 files changed, 8 insertions(+), 3 deletions(-)
 create mode 100644 app/react-native/src/preview/components/OnDeviceUI/menu_close.png
 create mode 100644 app/react-native/src/preview/components/OnDeviceUI/menu_open.png

diff --git a/app/react-native/src/preview/components/OnDeviceUI/index.js b/app/react-native/src/preview/components/OnDeviceUI/index.js
index 47061abd9a45..e0a1512a58e5 100644
--- a/app/react-native/src/preview/components/OnDeviceUI/index.js
+++ b/app/react-native/src/preview/components/OnDeviceUI/index.js
@@ -1,5 +1,5 @@
 import React, { Component, PropTypes } from 'react';
-import { Animated, Easing, View, TouchableWithoutFeedback, Text } from 'react-native';
+import { Animated, Easing, View, TouchableWithoutFeedback, Image } from 'react-native';
 import style from './style';
 import StoryListView from '../StoryListView';
 import StoryView from '../StoryView';
@@ -44,6 +44,11 @@ export default class OnDeviceUI extends Component {
       },
     ];
 
+    /* eslint-disable global-require */
+    const openMenuImage = require('./menu_open.png');
+    const closeMenuImage = require('./menu_close.png');
+    /* eslint-enable global-require */
+
     return (
       <View style={style.main}>
         <View style={style.previewContainer}>
@@ -54,7 +59,7 @@ export default class OnDeviceUI extends Component {
         <View style={style.openMenuButton}>
           <TouchableWithoutFeedback onPress={this.handleToggleMenu}>
             <View>
-              <Text>Open Menu</Text>
+              <Image source={openMenuImage} />
             </View>
           </TouchableWithoutFeedback>
         </View>
@@ -65,7 +70,7 @@ export default class OnDeviceUI extends Component {
         <Animated.View style={menuStyles}>
           <TouchableWithoutFeedback onPress={this.handleToggleMenu}>
             <View>
-              <Text>Close Menu</Text>
+              <Image source={closeMenuImage} />
             </View>
           </TouchableWithoutFeedback>
           <StoryListView stories={stories} events={events} />
diff --git a/app/react-native/src/preview/components/OnDeviceUI/menu_close.png b/app/react-native/src/preview/components/OnDeviceUI/menu_close.png
new file mode 100644
index 0000000000000000000000000000000000000000..4d27a9ad6553a5cd8ae171e430ec10c1c32862e9
GIT binary patch
literal 215
zcmeAS@N?(olHy`uVBq!ia0vp^3LwnE1|*BCs=fdzwj^(N7l!{JxM1({$v_d#0*}aI
z1_o|n5N2eUHAey{$X?><>&pI+U5=Yy_44DLAfr+|T^vIq4!@mtkdr}?hb8><PPLFX
z`<LB$&UA1(zpu@m#@h2uo&pLjXD&0GnEp(6z1up@soq=m1k}y_(>dk6M|h?Y>ye+^
zR2WWNd~V9`|G?G0h@(HkdD@TA&T2aqFT+n<PA8P&#GA9qGfnR=1KP*n>FVdQ&MBb@
E0G-)M!2kdN

literal 0
HcmV?d00001

diff --git a/app/react-native/src/preview/components/OnDeviceUI/menu_open.png b/app/react-native/src/preview/components/OnDeviceUI/menu_open.png
new file mode 100644
index 0000000000000000000000000000000000000000..300b8dbb3cc088b5683be5c492845a8ca72f218e
GIT binary patch
literal 184
zcmeAS@N?(olHy`uVBq!ia0vp^3LwnE1|*BCs=fdzwj^(N7l!{JxM1({$v_d#0*}aI
z1_o|n5N2eUHAey{$X?><>&pI+U5=aITp{X&6i~?3)5S3);_%xm2YG=;vK%~mZOQ*>
zA5xbv{duFZkFnTt!k3%{ZTI#$FV+n>%+7w`*Wb6bjWTm)tHph5uuXWB%724dEp8WI
YR%q~>2^s3!fCe&ny85}Sb4q9e03ESBc>n+a

literal 0
HcmV?d00001


From 79deb675e4d03ea0a6a4c7712b0ac2323f9814bd Mon Sep 17 00:00:00 2001
From: Richard Evans <rmevans9@gmail.com>
Date: Sun, 30 Jul 2017 07:30:45 -0400
Subject: [PATCH 5/8] Style the buttons a little better

---
 .../src/preview/components/OnDeviceUI/index.js    | 15 +++++++++------
 .../src/preview/components/OnDeviceUI/style.js    | 13 +++++++++++++
 2 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/app/react-native/src/preview/components/OnDeviceUI/index.js b/app/react-native/src/preview/components/OnDeviceUI/index.js
index e0a1512a58e5..10b9fa92d4f8 100644
--- a/app/react-native/src/preview/components/OnDeviceUI/index.js
+++ b/app/react-native/src/preview/components/OnDeviceUI/index.js
@@ -1,5 +1,5 @@
 import React, { Component, PropTypes } from 'react';
-import { Animated, Easing, View, TouchableWithoutFeedback, Image } from 'react-native';
+import { Animated, Easing, View, TouchableWithoutFeedback, Image, Text } from 'react-native';
 import style from './style';
 import StoryListView from '../StoryListView';
 import StoryView from '../StoryView';
@@ -68,11 +68,14 @@ export default class OnDeviceUI extends Component {
             <Animated.View style={overlayStyles} />
           </TouchableWithoutFeedback>}
         <Animated.View style={menuStyles}>
-          <TouchableWithoutFeedback onPress={this.handleToggleMenu}>
-            <View>
-              <Image source={closeMenuImage} />
-            </View>
-          </TouchableWithoutFeedback>
+          <View style={style.headerContainer}>
+            <Text style={style.headerText}>Storybook</Text>
+            <TouchableWithoutFeedback onPress={this.handleToggleMenu}>
+              <View>
+                <Image source={closeMenuImage} />
+              </View>
+            </TouchableWithoutFeedback>
+          </View>
           <StoryListView stories={stories} events={events} />
         </Animated.View>
       </View>
diff --git a/app/react-native/src/preview/components/OnDeviceUI/style.js b/app/react-native/src/preview/components/OnDeviceUI/style.js
index a1ba4e636ac8..e18e6401f5df 100644
--- a/app/react-native/src/preview/components/OnDeviceUI/style.js
+++ b/app/react-native/src/preview/components/OnDeviceUI/style.js
@@ -25,6 +25,19 @@ export default {
     paddingBottom: 8,
     backgroundColor: 'rgba(247, 247, 247, 1)',
   },
+  headerContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingBottom: 5,
+    marginBottom: 5,
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    borderBottomColor: 'rgba(0, 0, 0, 0.6)',
+  },
+  headerText: {
+    flex: 1,
+    fontSize: 20,
+    fontWeight: 'bold',
+  },
   previewContainer: {
     flex: 1,
     backgroundColor: 'rgba(255, 255, 255, 1)',

From f425d2f90235eeca36d4d369332bf5339ec38353 Mon Sep 17 00:00:00 2001
From: Richard Evans <rmevans9@gmail.com>
Date: Sun, 30 Jul 2017 12:28:51 -0400
Subject: [PATCH 6/8] Updates

---
 .../preview/components/OnDeviceUI/index.js    |  78 ++++++++++++------
 .../components/OnDeviceUI/menu_close.png      | Bin 215 -> 313 bytes
 .../preview/components/OnDeviceUI/style.js    |  44 +++++-----
 .../preview/components/StoryListView/index.js |  24 ++----
 4 files changed, 83 insertions(+), 63 deletions(-)

diff --git a/app/react-native/src/preview/components/OnDeviceUI/index.js b/app/react-native/src/preview/components/OnDeviceUI/index.js
index 10b9fa92d4f8..57700fa8d31e 100644
--- a/app/react-native/src/preview/components/OnDeviceUI/index.js
+++ b/app/react-native/src/preview/components/OnDeviceUI/index.js
@@ -5,12 +5,35 @@ import StoryListView from '../StoryListView';
 import StoryView from '../StoryView';
 
 export default class OnDeviceUI extends Component {
-  state = {
-    menuAnimation: new Animated.Value(0),
-    isMenuOpen: false,
-  };
+  constructor(props, ...args) {
+    super(props, ...args);
 
-  handleToggleMenu = () => {
+    this.state = {
+      menuAnimation: new Animated.Value(0),
+      isMenuOpen: false,
+      selectedKind: null,
+      selectedStory: null,
+    };
+
+    this.storyChangedHandler = this.handleStoryChanged.bind(this);
+    this.handleToggleMenu = this.handleToggleMenu.bind(this);
+
+    this.props.events.on('story', this.storyChangedHandler);
+  }
+
+  componentWillUnmount() {
+    this.props.events.removeListener('story', this.storyChangedHandler);
+  }
+
+  handleStoryChanged(storyFn, selection) {
+    const { kind, story } = selection;
+    this.setState({
+      selectedKind: kind,
+      selectedStory: story,
+    });
+  }
+
+  handleToggleMenu() {
     const isMenuOpen = !this.state.isMenuOpen;
 
     Animated.timing(this.state.menuAnimation, {
@@ -22,11 +45,11 @@ export default class OnDeviceUI extends Component {
     this.setState({
       isMenuOpen,
     });
-  };
+  }
 
   render() {
     const { stories, events, url } = this.props;
-    const { isMenuOpen, menuAnimation } = this.state;
+    const { isMenuOpen, menuAnimation, selectedKind, selectedStory } = this.state;
 
     const overlayStyles = [style.overlayContainer, { opacity: menuAnimation }];
 
@@ -52,31 +75,38 @@ export default class OnDeviceUI extends Component {
     return (
       <View style={style.main}>
         <View style={style.previewContainer}>
-          <View style={style.preview}>
-            <StoryView url={url} events={events} />
+          <View style={style.headerContainer}>
+            <TouchableWithoutFeedback onPress={this.handleToggleMenu}>
+              <View>
+                <Image source={openMenuImage} style={style.icon} />
+              </View>
+            </TouchableWithoutFeedback>
+            <Text style={style.headerText} numberOfLines={1}>
+              {selectedKind} / {selectedStory}
+            </Text>
           </View>
-        </View>
-        <View style={style.openMenuButton}>
-          <TouchableWithoutFeedback onPress={this.handleToggleMenu}>
-            <View>
-              <Image source={openMenuImage} />
+          <View style={style.previewWrapper}>
+            <View style={style.preview}>
+              <StoryView url={url} events={events} />
             </View>
-          </TouchableWithoutFeedback>
+          </View>
         </View>
         {isMenuOpen &&
           <TouchableWithoutFeedback onPress={this.handleToggleMenu}>
             <Animated.View style={overlayStyles} />
           </TouchableWithoutFeedback>}
         <Animated.View style={menuStyles}>
-          <View style={style.headerContainer}>
-            <Text style={style.headerText}>Storybook</Text>
-            <TouchableWithoutFeedback onPress={this.handleToggleMenu}>
-              <View>
-                <Image source={closeMenuImage} />
-              </View>
-            </TouchableWithoutFeedback>
-          </View>
-          <StoryListView stories={stories} events={events} />
+          <TouchableWithoutFeedback onPress={this.handleToggleMenu}>
+            <View style={style.closeButton}>
+              <Image source={closeMenuImage} style={style.icon} />
+            </View>
+          </TouchableWithoutFeedback>
+          <StoryListView
+            stories={stories}
+            events={events}
+            selectedKind={selectedKind}
+            selectedStory={selectedStory}
+          />
         </Animated.View>
       </View>
     );
diff --git a/app/react-native/src/preview/components/OnDeviceUI/menu_close.png b/app/react-native/src/preview/components/OnDeviceUI/menu_close.png
index 4d27a9ad6553a5cd8ae171e430ec10c1c32862e9..0ced03b917bdac2b8b0d293ac4c393537ed731b5 100644
GIT binary patch
delta 237
zcmV<J022S#0l5N@RDTc*7_imq5dZ)H#z{m$R9M69mq8AMAPhyThfxnB4JR7BIkOoy
zh5{|W<HjbeNc&ze`He(x)$4e2=0!xAh!_ZuznN(io`DkaHZ!%JC|3>x;pOa70|O-_
zc<41EB+PJx#58<H0tUB8z~LGRH+WAXbnc)ff&K#5NVvgEg=Pl))DBw>0*mnuy46~T
zpM<+f#Kt!d-V!4r!(I}ago8_1;uR(_lkL+Ih{a--KyEd)#Nm+blEfx8B!|Uvm-zG=
nlEYTxQFy7{A<DP+kGED|)_?XaDn7$G00000NkvXXu0mjfFREv#

delta 139
zcmV;60CfMk0@neMRDTN(CDY@%QUCw|WJyFpR9M69mca=CAq)gp%ef|0?7ybm=K{f(
z4^2GWfql<{Nf01}%+mnKm*y?6My?5!OSHUDex3Y@l<!DaX)*=G`L-kg$kFFD4^QAl
tKXM3<SVNZhRf&5(BuX*z3PQ*tUKfLEcWE`>rT_o{07*qoL<FuvV1j=EI_LlZ

diff --git a/app/react-native/src/preview/components/OnDeviceUI/style.js b/app/react-native/src/preview/components/OnDeviceUI/style.js
index e18e6401f5df..f80f3831117e 100644
--- a/app/react-native/src/preview/components/OnDeviceUI/style.js
+++ b/app/react-native/src/preview/components/OnDeviceUI/style.js
@@ -4,7 +4,22 @@ export default {
   main: {
     flex: 1,
     paddingTop: 20,
-    backgroundColor: 'rgba(247, 247, 247, 1)',
+    backgroundColor: 'rgba(255, 255, 255, 1)',
+  },
+  icon: {
+    width: 20,
+    height: 20,
+    opacity: 0.5,
+  },
+  headerContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    margin: 5,
+  },
+  headerText: {
+    marginLeft: 5,
+    fontSize: 14,
+    color: 'rgba(0, 0, 0, 0.5)',
   },
   overlayContainer: {
     position: 'absolute',
@@ -25,33 +40,14 @@ export default {
     paddingBottom: 8,
     backgroundColor: 'rgba(247, 247, 247, 1)',
   },
-  headerContainer: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    paddingBottom: 5,
-    marginBottom: 5,
-    borderBottomWidth: StyleSheet.hairlineWidth,
-    borderBottomColor: 'rgba(0, 0, 0, 0.6)',
-  },
-  headerText: {
+  previewContainer: {
     flex: 1,
-    fontSize: 20,
-    fontWeight: 'bold',
   },
-  previewContainer: {
+  previewWrapper: {
     flex: 1,
-    backgroundColor: 'rgba(255, 255, 255, 1)',
-    borderWidth: StyleSheet.hairlineWidth,
-    borderColor: 'rgba(236, 236, 236, 1)',
-    borderRadius: 4,
-    marginBottom: 8,
-    marginHorizontal: 8,
   },
-  openMenuButton: {
-    position: 'absolute',
-    top: 20,
-    left: 10,
-    backgroundColor: 'transparent',
+  closeButton: {
+    marginVertical: 5,
   },
   preview: {
     ...StyleSheet.absoluteFillObject,
diff --git a/app/react-native/src/preview/components/StoryListView/index.js b/app/react-native/src/preview/components/StoryListView/index.js
index 27407204befb..7340cd5971d1 100644
--- a/app/react-native/src/preview/components/StoryListView/index.js
+++ b/app/react-native/src/preview/components/StoryListView/index.js
@@ -32,16 +32,12 @@ export default class StoryListView extends Component {
     super(props, ...args);
     this.state = {
       sections: [],
-      selectedKind: null,
-      selectedStory: null,
     };
 
     this.storyAddedHandler = this.handleStoryAdded.bind(this);
-    this.storyChangedHandler = this.handleStoryChanged.bind(this);
     this.changeStoryHandler = this.changeStory.bind(this);
 
     this.props.stories.on('storyAdded', this.storyAddedHandler);
-    this.props.events.on('story', this.storyChangedHandler);
   }
 
   componentDidMount() {
@@ -55,7 +51,6 @@ export default class StoryListView extends Component {
 
   componentWillUnmount() {
     this.props.stories.removeListener('storyAdded', this.storyAddedHandler);
-    this.props.events.removeListener('story', this.storyChangedHandler);
   }
 
   handleStoryAdded() {
@@ -75,14 +70,6 @@ export default class StoryListView extends Component {
     }
   }
 
-  handleStoryChanged(storyFn, selection) {
-    const { kind, story } = selection;
-    this.setState({
-      selectedKind: kind,
-      selectedStory: story,
-    });
-  }
-
   changeStory(kind, story) {
     this.props.events.emit('setCurrentStory', { kind, story });
   }
@@ -95,14 +82,14 @@ export default class StoryListView extends Component {
           <ListItem
             title={item.name}
             selected={
-              item.kind === this.state.selectedKind && item.name === this.state.selectedStory
+              item.kind === this.props.selectedKind && item.name === this.props.selectedStory
             }
             onPress={() => this.changeStory(item.kind, item.name)}
           />}
         renderSectionHeader={({ section }) =>
           <SectionHeader
             title={section.title}
-            selected={section.title === this.state.selectedKind}
+            selected={section.title === this.props.selectedKind}
           />}
         sections={this.state.sections}
         stickySectionHeadersEnabled={false}
@@ -123,4 +110,11 @@ StoryListView.propTypes = {
     emit: PropTypes.func.isRequired,
     removeListener: PropTypes.func.isRequired,
   }).isRequired,
+  selectedKind: PropTypes.string,
+  selectedStory: PropTypes.string,
+};
+
+StoryListView.defaultProps = {
+  selectedKind: null,
+  selectedStory: null,
 };

From d6c21281b66d61af91293959ffa54c3a5e49f546 Mon Sep 17 00:00:00 2001
From: Richard Evans <rmevans9@gmail.com>
Date: Sun, 30 Jul 2017 18:18:00 -0400
Subject: [PATCH 7/8] Android fixes + design change

---
 .../preview/components/OnDeviceUI/index.js    | 54 +++++++++++++------
 .../preview/components/OnDeviceUI/style.js    | 24 +++------
 2 files changed, 46 insertions(+), 32 deletions(-)

diff --git a/app/react-native/src/preview/components/OnDeviceUI/index.js b/app/react-native/src/preview/components/OnDeviceUI/index.js
index 57700fa8d31e..d35bd59a7a63 100644
--- a/app/react-native/src/preview/components/OnDeviceUI/index.js
+++ b/app/react-native/src/preview/components/OnDeviceUI/index.js
@@ -5,18 +5,20 @@ import StoryListView from '../StoryListView';
 import StoryView from '../StoryView';
 
 export default class OnDeviceUI extends Component {
-  constructor(props, ...args) {
-    super(props, ...args);
+  constructor(...args) {
+    super(...args);
 
     this.state = {
       menuAnimation: new Animated.Value(0),
       isMenuOpen: false,
       selectedKind: null,
       selectedStory: null,
+      menuWidth: 0,
     };
 
     this.storyChangedHandler = this.handleStoryChanged.bind(this);
-    this.handleToggleMenu = this.handleToggleMenu.bind(this);
+    this.menuToggledHandler = this.handleToggleMenu.bind(this);
+    this.menuLayoutHandler = this.handleMenuLayout.bind(this);
 
     this.props.events.on('story', this.storyChangedHandler);
   }
@@ -47,11 +49,15 @@ export default class OnDeviceUI extends Component {
     });
   }
 
+  handleMenuLayout(e) {
+    this.setState({
+      menuWidth: e.nativeEvent.layout.width,
+    });
+  }
+
   render() {
     const { stories, events, url } = this.props;
-    const { isMenuOpen, menuAnimation, selectedKind, selectedStory } = this.state;
-
-    const overlayStyles = [style.overlayContainer, { opacity: menuAnimation }];
+    const { menuAnimation, selectedKind, selectedStory, menuWidth } = this.state;
 
     const menuStyles = [
       style.menuContainer,
@@ -60,13 +66,32 @@ export default class OnDeviceUI extends Component {
           {
             translateX: menuAnimation.interpolate({
               inputRange: [0, 1],
-              outputRange: [0, 250],
+              outputRange: [menuWidth * -1, 0],
             }),
           },
         ],
       },
     ];
 
+    const menuSpacerStyles = [
+      {
+        width: menuAnimation.interpolate({
+          inputRange: [0, 1],
+          outputRange: [0, menuWidth],
+        }),
+      },
+    ];
+
+    const headerStyles = [
+      style.headerContainer,
+      {
+        opacity: menuAnimation.interpolate({
+          inputRange: [0, 1],
+          outputRange: [1, 0],
+        }),
+      },
+    ];
+
     /* eslint-disable global-require */
     const openMenuImage = require('./menu_open.png');
     const closeMenuImage = require('./menu_close.png');
@@ -74,9 +99,10 @@ export default class OnDeviceUI extends Component {
 
     return (
       <View style={style.main}>
+        <Animated.View style={menuSpacerStyles} />
         <View style={style.previewContainer}>
-          <View style={style.headerContainer}>
-            <TouchableWithoutFeedback onPress={this.handleToggleMenu}>
+          <Animated.View style={headerStyles}>
+            <TouchableWithoutFeedback onPress={this.menuToggledHandler}>
               <View>
                 <Image source={openMenuImage} style={style.icon} />
               </View>
@@ -84,19 +110,15 @@ export default class OnDeviceUI extends Component {
             <Text style={style.headerText} numberOfLines={1}>
               {selectedKind} / {selectedStory}
             </Text>
-          </View>
+          </Animated.View>
           <View style={style.previewWrapper}>
             <View style={style.preview}>
               <StoryView url={url} events={events} />
             </View>
           </View>
         </View>
-        {isMenuOpen &&
-          <TouchableWithoutFeedback onPress={this.handleToggleMenu}>
-            <Animated.View style={overlayStyles} />
-          </TouchableWithoutFeedback>}
-        <Animated.View style={menuStyles}>
-          <TouchableWithoutFeedback onPress={this.handleToggleMenu}>
+        <Animated.View style={menuStyles} onLayout={this.menuLayoutHandler}>
+          <TouchableWithoutFeedback onPress={this.menuToggledHandler}>
             <View style={style.closeButton}>
               <Image source={closeMenuImage} style={style.icon} />
             </View>
diff --git a/app/react-native/src/preview/components/OnDeviceUI/style.js b/app/react-native/src/preview/components/OnDeviceUI/style.js
index f80f3831117e..97f622ba723d 100644
--- a/app/react-native/src/preview/components/OnDeviceUI/style.js
+++ b/app/react-native/src/preview/components/OnDeviceUI/style.js
@@ -1,9 +1,12 @@
-import { StyleSheet } from 'react-native';
+import { StyleSheet, Platform } from 'react-native';
+
+const STATUS_BAR_HEIGHT = Platform.OS === 'ios' ? 20 : 0;
 
 export default {
   main: {
     flex: 1,
-    paddingTop: 20,
+    flexDirection: 'row',
+    paddingTop: STATUS_BAR_HEIGHT,
     backgroundColor: 'rgba(255, 255, 255, 1)',
   },
   icon: {
@@ -21,22 +24,11 @@ export default {
     fontSize: 14,
     color: 'rgba(0, 0, 0, 0.5)',
   },
-  overlayContainer: {
-    position: 'absolute',
-    top: 0,
-    bottom: 0,
-    left: 0,
-    right: 0,
-    backgroundColor: 'rgba(0, 0, 0, 0.6)',
-  },
   menuContainer: {
-    position: 'absolute',
-    top: 0,
-    bottom: 0,
-    left: -250,
-    width: 250,
+    ...StyleSheet.absoluteFillObject,
+    right: null,
     paddingHorizontal: 8,
-    paddingTop: 20,
+    paddingTop: STATUS_BAR_HEIGHT,
     paddingBottom: 8,
     backgroundColor: 'rgba(247, 247, 247, 1)',
   },

From bcb4db8fbaafe2ecb15660dcd363c91640f12bf1 Mon Sep 17 00:00:00 2001
From: Richard Evans <rmevans9@gmail.com>
Date: Sun, 30 Jul 2017 18:40:20 -0400
Subject: [PATCH 8/8] Hide the statusbar for now to avoid an ackward situation
 in landscape

---
 .../src/preview/components/OnDeviceUI/index.js        | 11 ++++++++++-
 .../src/preview/components/OnDeviceUI/style.js        |  6 +-----
 2 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/app/react-native/src/preview/components/OnDeviceUI/index.js b/app/react-native/src/preview/components/OnDeviceUI/index.js
index d35bd59a7a63..6097b551022d 100644
--- a/app/react-native/src/preview/components/OnDeviceUI/index.js
+++ b/app/react-native/src/preview/components/OnDeviceUI/index.js
@@ -1,5 +1,13 @@
 import React, { Component, PropTypes } from 'react';
-import { Animated, Easing, View, TouchableWithoutFeedback, Image, Text } from 'react-native';
+import {
+  Animated,
+  Easing,
+  View,
+  TouchableWithoutFeedback,
+  Image,
+  Text,
+  StatusBar,
+} from 'react-native';
 import style from './style';
 import StoryListView from '../StoryListView';
 import StoryView from '../StoryView';
@@ -99,6 +107,7 @@ export default class OnDeviceUI extends Component {
 
     return (
       <View style={style.main}>
+        <StatusBar hidden />
         <Animated.View style={menuSpacerStyles} />
         <View style={style.previewContainer}>
           <Animated.View style={headerStyles}>
diff --git a/app/react-native/src/preview/components/OnDeviceUI/style.js b/app/react-native/src/preview/components/OnDeviceUI/style.js
index 97f622ba723d..a69912eac871 100644
--- a/app/react-native/src/preview/components/OnDeviceUI/style.js
+++ b/app/react-native/src/preview/components/OnDeviceUI/style.js
@@ -1,12 +1,9 @@
-import { StyleSheet, Platform } from 'react-native';
-
-const STATUS_BAR_HEIGHT = Platform.OS === 'ios' ? 20 : 0;
+import { StyleSheet } from 'react-native';
 
 export default {
   main: {
     flex: 1,
     flexDirection: 'row',
-    paddingTop: STATUS_BAR_HEIGHT,
     backgroundColor: 'rgba(255, 255, 255, 1)',
   },
   icon: {
@@ -28,7 +25,6 @@ export default {
     ...StyleSheet.absoluteFillObject,
     right: null,
     paddingHorizontal: 8,
-    paddingTop: STATUS_BAR_HEIGHT,
     paddingBottom: 8,
     backgroundColor: 'rgba(247, 247, 247, 1)',
   },