Merge pull request infinitered#605 from alin23/toggle-sidebar

skellock · web-flow · commit 1382435056e2 · 2018-02-22T12:27:23.000-05:00
Add Sidebar toggle icon and shortcut
diff --git a/packages/reactotron-app/App/Foundation/BackupsHeader.js b/packages/reactotron-app/App/Foundation/BackupsHeader.js
@@ -3,6 +3,7 @@ import Colors from '../Theme/Colors'
 import AppStyles from '../Theme/AppStyles'
 import { inject, observer } from 'mobx-react'
 import IconAdd from 'react-icons/lib/md/file-download'
+import SidebarToggleButton from './SidebarToggleButton'
 
 const TITLE = 'State Snapshots'
 
@@ -27,7 +28,8 @@ const Styles = {
   },
   left: {
     ...AppStyles.Layout.hbox,
-    width: 100
+    width: 100,
+    alignItems: 'center'
   },
   right: {
     width: 100,
@@ -60,7 +62,9 @@ class BackupsHeader extends Component {
     return (
       <div style={Styles.container}>
         <div style={Styles.content}>
-          <div style={Styles.left} />
+          <div style={Styles.left}>
+            <SidebarToggleButton onClick={ui.toggleSidebar} isSidebarVisible={ui.isSidebarVisible} />
+          </div>
           <div style={Styles.center}>
             <div style={Styles.title}>{TITLE}</div>
           </div>
diff --git a/packages/reactotron-app/App/Foundation/HelpHeader.js b/packages/reactotron-app/App/Foundation/HelpHeader.js
@@ -2,6 +2,7 @@ import React, { Component } from 'react'
 import Colors from '../Theme/Colors'
 import AppStyles from '../Theme/AppStyles'
 import { inject, observer } from 'mobx-react'
+import SidebarToggleButton from './SidebarToggleButton'
 
 const TITLE = 'Using Reactotron'
 
@@ -15,9 +16,22 @@ const Styles = {
   },
   content: {
     height: 60,
+    paddingLeft: 10,
+    paddingRight: 10,
     ...AppStyles.Layout.hbox,
     alignItems: 'center',
-    justifyContent: 'center'
+    justifyContent: 'space-between'
+  },
+  left: {
+    ...AppStyles.Layout.hbox,
+    width: 100,
+    alignItems: 'center'
+  },
+  right: {
+    width: 100,
+    ...AppStyles.Layout.hbox,
+    justifyContent: 'flex-end',
+    alignItems: 'center'
   },
   title: {
     color: Colors.foregroundLight,
@@ -27,16 +41,24 @@ const Styles = {
 
 @inject('session')
 @observer
-class TimelineHeader extends Component {
+class HelpHeader extends Component {
   render () {
+    const { ui } = this.props.session
+
     return (
       <div style={Styles.container}>
         <div style={Styles.content}>
-          <div style={Styles.title}>{TITLE}</div>
+          <div style={Styles.left}>
+            <SidebarToggleButton onClick={ui.toggleSidebar} isSidebarVisible={ui.isSidebarVisible} />
+          </div>
+          <div style={Styles.center}>
+            <div style={Styles.title}>{TITLE}</div>
+          </div>
+          <div style={Styles.right} />
         </div>
       </div>
     )
   }
 }
 
-export default TimelineHeader
+export default HelpHeader
diff --git a/packages/reactotron-app/App/Foundation/HelpKeystrokes.js b/packages/reactotron-app/App/Foundation/HelpKeystrokes.js
@@ -130,6 +130,12 @@ const HelpKeystrokes = () => (
           </div>
           <div style={Styles.helpDetail}>clear the timeline</div>
         </div>
+        <div style={Styles.helpShortcut}>
+          <div style={Styles.helpLabel}>
+            <Key text={Keystroke.modifierName} />+<Key text='⬆' />+<Key text='S' />
+          </div>
+          <div style={Styles.helpDetail}>toggle sidebar</div>
+        </div>
       </div>
     </div>
   </div>
diff --git a/packages/reactotron-app/App/Foundation/NativeHeader.js b/packages/reactotron-app/App/Foundation/NativeHeader.js
@@ -2,6 +2,7 @@ import React, { Component } from 'react'
 import Colors from '../Theme/Colors'
 import AppStyles from '../Theme/AppStyles'
 import { inject, observer } from 'mobx-react'
+import SidebarToggleButton from './SidebarToggleButton'
 
 const TITLE = 'React Native'
 
@@ -26,7 +27,8 @@ const Styles = {
   },
   left: {
     ...AppStyles.Layout.hbox,
-    width: 100
+    width: 100,
+    alignItems: 'center'
   },
   right: {
     width: 100,
@@ -54,10 +56,14 @@ const Styles = {
 @observer
 class NativeHeader extends Component {
   render () {
+    const { ui } = this.props.session
+
     return (
       <div style={Styles.container}>
         <div style={Styles.content}>
-          <div style={Styles.left} />
+          <div style={Styles.left}>
+            <SidebarToggleButton onClick={ui.toggleSidebar} isSidebarVisible={ui.isSidebarVisible} />
+          </div>
           <div style={Styles.center}>
             <div style={Styles.title}>{TITLE}</div>
           </div>
diff --git a/packages/reactotron-app/App/Foundation/Sidebar.js b/packages/reactotron-app/App/Foundation/Sidebar.js
@@ -11,7 +11,8 @@ const Styles = {
     backgroundColor: Colors.backgroundSubtleDark,
     boxShadow: `0px 0px 30px ${Colors.glow}`,
     borderRight: `1px solid ${Colors.chromeLine}`,
-    WebkitAppRegion: 'drag'
+    WebkitAppRegion: 'drag',
+    transition: 'margin 0.2s ease-out'
   },
   content: {
     ...AppStyles.Layout.vbox,
@@ -56,7 +57,7 @@ class Sidebar extends Component {
     const { ui } = session
 
     return (
-      <div style={Styles.container}>
+      <div style={{...Styles.container, ...(!ui.isSidebarVisible ? { marginLeft: -Styles.container.maxWidth } : {})}}>
         <div style={Styles.content}>
           <div style={Styles.tabs}>
             <SidebarButton
diff --git a/packages/reactotron-app/App/Foundation/SidebarToggleButton.js b/packages/reactotron-app/App/Foundation/SidebarToggleButton.js
@@ -0,0 +1,25 @@
+import React from 'react'
+import IconArrowBack from 'react-icons/lib/md/arrow-back'
+
+const Styles = {
+  iconSize: 32,
+  sidebarIcon: { paddingRight: 7, cursor: 'pointer', transition: 'transform 0.2s ease-in 0.2s, margin 0.2s' },
+  sidebarHiddenIcon: { transform: 'rotate(0.5turn)', marginTop: 20 }
+}
+
+const SidebarToggleButton = props => {
+  const sidebarIconStyle = {
+    ...Styles.sidebarIcon,
+    ...(props.isSidebarVisible ? {} : Styles.sidebarHiddenIcon)
+  }
+
+  return (
+    <IconArrowBack
+      size={Styles.iconSize}
+      style={sidebarIconStyle}
+      onClick={props.onClick}
+    />
+  )
+}
+
+export default SidebarToggleButton
diff --git a/packages/reactotron-app/App/Foundation/SubscriptionsHeader.js b/packages/reactotron-app/App/Foundation/SubscriptionsHeader.js
@@ -4,6 +4,7 @@ import AppStyles from '../Theme/AppStyles'
 import { inject, observer } from 'mobx-react'
 import IconAdd from 'react-icons/lib/md/add'
 import IconClear from 'react-icons/lib/md/delete-forever'
+import SidebarToggleButton from './SidebarToggleButton'
 
 const TITLE = 'State Subscriptions'
 
@@ -28,7 +29,8 @@ const Styles = {
   },
   left: {
     ...AppStyles.Layout.hbox,
-    width: 100
+    width: 100,
+    alignItems: 'center'
   },
   right: {
     width: 100,
@@ -64,7 +66,9 @@ class SubscriptionsHeader extends Component {
     return (
       <div style={Styles.container}>
         <div style={Styles.content}>
-          <div style={Styles.left} />
+          <div style={Styles.left}>
+            <SidebarToggleButton onClick={ui.toggleSidebar} isSidebarVisible={ui.isSidebarVisible} />
+          </div>
           <div style={Styles.center}>
             <div style={Styles.title}>{TITLE}</div>
           </div>
diff --git a/packages/reactotron-app/App/Foundation/TimelineHeader.js b/packages/reactotron-app/App/Foundation/TimelineHeader.js
@@ -6,6 +6,7 @@ import { inject, observer } from 'mobx-react'
 import IconFilter from 'react-icons/lib/md/filter-list'
 import IconClear from 'react-icons/lib/md/delete-sweep'
 import IconSearch from 'react-icons/lib/md/search'
+import SidebarToggleButton from './SidebarToggleButton'
 
 const TITLE = 'Timeline'
 
@@ -28,7 +29,7 @@ const Styles = {
     ...AppStyles.Layout.hbox,
     justifyContent: 'space-between'
   },
-  left: { ...AppStyles.Layout.hbox, width: 100 },
+  left: { ...AppStyles.Layout.hbox, width: 100, alignItems: 'center' },
   right: { ...AppStyles.Layout.hbox, justifyContent: 'flex-end', alignItems: 'center', width: 100 },
   center: { ...AppStyles.Layout.vbox, flex: 1, alignItems: 'center', justifyContent: 'center' },
   title: { color: Colors.foregroundLight, textAlign: 'center' },
@@ -115,7 +116,9 @@ class TimelineHeader extends Component {
     return (
       <div style={Styles.container}>
         <div style={Styles.content}>
-          <div style={Styles.left} />
+          <div style={Styles.left}>
+            <SidebarToggleButton onClick={ui.toggleSidebar} isSidebarVisible={ui.isSidebarVisible} />
+          </div>
           <div style={Styles.center}>
             <div style={Styles.title}>{TITLE}</div>
           </div>
diff --git a/packages/reactotron-app/App/Stores/UiStore.js b/packages/reactotron-app/App/Stores/UiStore.js
@@ -57,6 +57,9 @@ class UI {
   // show the timeline search
   @observable isTimelineSearchVisible = false
 
+  // hide the sidebar
+  @observable isSidebarVisible = true
+
   /**
    * The current search phrase used to narrow down visible commands.
    */
@@ -89,6 +92,7 @@ class UI {
     Mousetrap.bind(`${Keystroke.mousetrap}+?`, this.switchTab.bind(this, 'help'))
     Mousetrap.bind(`${Keystroke.mousetrap}+f`, this.showTimelineSearch)
     Mousetrap.bind(`${Keystroke.mousetrap}+.`, this.openSendCustomDialog)
+    Mousetrap.bind(`${Keystroke.mousetrap}+shift+s`, this.toggleSidebar)
   }
 
   @action
@@ -145,6 +149,25 @@ class UI {
     }
   }
 
+  @action
+  hideSidebar = () => {
+    this.isSidebarVisible = false
+  }
+
+  @action
+  showSidebar = () => {
+    this.isSidebarVisible = true
+  }
+
+  @action
+  toggleSidebar = () => {
+    if (this.isSidebarVisible) {
+      this.hideSidebar()
+    } else {
+      this.showSidebar()
+    }
+  }
+
   @action
   switchTab = newTab => {
     this.tab = newTab
