Responsive menu panel for wrapper and apps (#539)

* MenuPanel: add responsive behaviour and styles * Remove zoom from mobile via meta viewport * Wrapper: add menu panel state and handler for apps messaging * Home: add prototype for mobile menu behavior * Permissions: add prototype for mobile menu panel behavior * Icons: add menu icon * MenuPanel: add styled menu button * Home: add menu button for mobile navigation * Apps: add menu button for mobile navigation * Permissions: add menu button for mobile navigation * Settings: add menu button for mobile navigation * Onboarding: update z-index to show onboarding on top of menu panel * Apps: add responsive styles for app list (#554) * Contexts: add screen size provider and consumer * App: add screensize provider * Wrapper: add screensize consumer
aragon · Jan 15, 2019 · d2e98f4 · d2e98f4
1 parent 1b5f5de
commit d2e98f4
Show file tree

Hide file tree

Showing 12 changed files with 415 additions and 56 deletions.
diff --git a/src/App.js b/src/App.js
@@ -14,6 +14,7 @@ import { getWeb3, getUnknownBalance, identifyProvider } from './web3-utils'
 import { log } from './utils'
 import { PermissionsProvider } from './contexts/PermissionsContext'
 import { FavoriteDaosProvider } from './contexts/FavoriteDaosContext'
+import { ScreenSizeProvider } from './contexts/ScreenSize'
 import { ModalProvider } from './components/ModalManager/ModalManager'
 import DeprecatedBanner from './components/DeprecatedBanner/DeprecatedBanner'
 import {
@@ -303,48 +304,50 @@ class App extends React.Component {
     return (
       <ModalProvider>
         <FavoriteDaosProvider>
-          <PermissionsProvider
-            wrapper={wrapper}
-            apps={apps}
-            permissions={permissions}
-          >
-            <Wrapper
-              banner={showDeprecatedBanner && <DeprecatedBanner dao={dao} />}
-              historyBack={this.historyBack}
-              historyPush={this.historyPush}
-              locator={locator}
+          <ScreenSizeProvider>
+            <PermissionsProvider
               wrapper={wrapper}
               apps={apps}
-              appsStatus={appsStatus}
-              permissionsLoading={permissionsLoading}
+              permissions={permissions}
+            >
+              <Wrapper
+                banner={showDeprecatedBanner && <DeprecatedBanner dao={dao} />}
+                historyBack={this.historyBack}
+                historyPush={this.historyPush}
+                locator={locator}
+                wrapper={wrapper}
+                apps={apps}
+                appsStatus={appsStatus}
+                permissionsLoading={permissionsLoading}
+                account={account}
+                walletNetwork={walletNetwork}
+                walletWeb3={walletWeb3}
+                daoAddress={daoAddress}
+                transactionBag={transactionBag}
+                connected={connected}
+                onRequestAppsReload={this.handleRequestAppsReload}
+              />
+            </PermissionsProvider>
+
+            <Onboarding
+              banner={
+                showDeprecatedBanner && <DeprecatedBanner dao={dao} lightMode />
+              }
+              visible={mode === 'home' || mode === 'setup'}
               account={account}
+              balance={balance}
               walletNetwork={walletNetwork}
+              walletProviderId={walletProviderId}
+              onBuildDao={this.handleBuildDao}
+              daoCreationStatus={daoCreationStatus}
+              onComplete={this.handleCompleteOnboarding}
+              onOpenOrganization={this.handleOpenOrganization}
+              onResetDaoBuilder={this.handleResetDaoBuilder}
+              onRequestEnable={this.handleRequestEnable}
+              selectorNetworks={selectorNetworks}
               walletWeb3={walletWeb3}
-              daoAddress={daoAddress}
-              transactionBag={transactionBag}
-              connected={connected}
-              onRequestAppsReload={this.handleRequestAppsReload}
             />
-          </PermissionsProvider>
-
-          <Onboarding
-            banner={
-              showDeprecatedBanner && <DeprecatedBanner dao={dao} lightMode />
-            }
-            visible={mode === 'home' || mode === 'setup'}
-            account={account}
-            balance={balance}
-            walletNetwork={walletNetwork}
-            walletProviderId={walletProviderId}
-            onBuildDao={this.handleBuildDao}
-            daoCreationStatus={daoCreationStatus}
-            onComplete={this.handleCompleteOnboarding}
-            onOpenOrganization={this.handleOpenOrganization}
-            onResetDaoBuilder={this.handleResetDaoBuilder}
-            onRequestEnable={this.handleRequestEnable}
-            selectorNetworks={selectorNetworks}
-            walletWeb3={walletWeb3}
-          />
+          </ScreenSizeProvider>
         </FavoriteDaosProvider>
       </ModalProvider>
     )

diff --git a/src/Wrapper.js b/src/Wrapper.js
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types'
 import styled from 'styled-components'
 import { Apps, Permissions, Settings } from './apps'
 import ethereumLoadingAnimation from './assets/ethereum-loading.svg'
+import { ScreenSizeConsumer, SMALL } from './contexts/ScreenSize'
 import AppIFrame from './components/App/AppIFrame'
 import App404 from './components/App404/App404'
 import Home from './components/Home/Home'
@@ -42,6 +43,7 @@ class Wrapper extends React.Component {
     locator: PropTypes.object.isRequired,
     onRequestAppsReload: PropTypes.func.isRequired,
     permissionsLoading: PropTypes.bool.isRequired,
+    screenSize: PropTypes.symbol.isRequired,
     transactionBag: PropTypes.object,
     walletNetwork: PropTypes.string.isRequired,
     walletWeb3: PropTypes.object,
@@ -68,8 +70,13 @@ class Wrapper extends React.Component {
   }
   state = {
     appInstance: {},
+    menuPanelOpened: this.props.screenSize !== SMALL,
   }
   openApp = (instanceId, params) => {
+    if (this.props.screenSize === SMALL) {
+      this.handleMenuPanelClose()
+    }
+
     const { historyPush, locator } = this.props
     historyPush(getAppPath({ dao: locator.dao, instanceId, params }))
   }
@@ -97,6 +104,14 @@ class Wrapper extends React.Component {
       value: true,
     })
   }
+  handleAppMessage = ({ data: { name, value } }) => {
+    if (name === 'menuPanel') {
+      this.setState({ menuPanelOpened: Boolean(value) })
+    }
+  }
+  handleMenuPanelClose = () => {
+    this.setState({ menuPanelOpened: false })
+  }
   handleNotificationsClearAll = () => {
     const { wrapper } = this.props
     wrapper && wrapper.clearNotifications()
@@ -136,6 +151,7 @@ class Wrapper extends React.Component {
       walletWeb3,
       wrapper,
     } = this.props
+    const { menuPanelOpened } = this.state
 
     return (
       <Main>
@@ -147,9 +163,11 @@ class Wrapper extends React.Component {
             activeInstanceId={locator.instanceId}
             connected={connected}
             daoAddress={daoAddress}
+            menuPanelOpened={menuPanelOpened}
             notificationsObservable={wrapper && wrapper.notifications}
             onOpenApp={this.openApp}
             onClearAllNotifications={this.handleNotificationsClearAll}
+            onCloseMenuPanel={this.handleMenuPanelClose}
             onOpenNotification={this.handleNotificationNavigation}
             onRequestAppsReload={onRequestAppsReload}
           />
@@ -191,6 +209,7 @@ class Wrapper extends React.Component {
         <Home
           connected={connected}
           appsLoading={appsLoading}
+          onMessage={this.handleAppMessage}
           onOpenApp={this.openApp}
           locator={locator}
           apps={apps}
@@ -205,13 +224,14 @@ class Wrapper extends React.Component {
           appsLoading={appsLoading}
           permissionsLoading={permissionsLoading}
           params={params}
+          onMessage={this.handleAppMessage}
           onParamsRequest={this.handleParamsRequest}
         />
       )
     }
 
     if (instanceId === 'apps') {
-      return <Apps />
+      return <Apps onMessage={this.handleAppMessage} />
     }
 
     if (instanceId === 'settings') {
@@ -220,6 +240,7 @@ class Wrapper extends React.Component {
           account={account}
           apps={apps}
           daoAddress={daoAddress}
+          onMessage={this.handleAppMessage}
           onOpenApp={this.openApp}
           walletNetwork={walletNetwork}
           walletWeb3={walletWeb3}
@@ -238,6 +259,7 @@ class Wrapper extends React.Component {
         app={app}
         ref={this.handleAppIFrameRef}
         onLoad={this.handleAppIFrameLoad}
+        onMessage={this.handleAppMessage}
       />
     ) : (
       <App404 onNavigateBack={this.props.historyBack} />
@@ -291,4 +313,8 @@ const LoadingApps = () => (
   </div>
 )
 
-export default Wrapper
+export default props => (
+  <ScreenSizeConsumer>
+    {({ screenSize }) => <Wrapper {...props} screenSize={screenSize} />}
+  </ScreenSizeConsumer>
+)
diff --git a/src/apps/Apps/Apps.js b/src/apps/Apps/Apps.js
@@ -9,18 +9,35 @@ import {
   theme,
   colors,
   unselectable,
+  font,
+  breakpoint,
+  BreakPoint,
 } from '@aragon/ui'
 import AppLayout from '../../components/AppLayout/AppLayout'
+import MenuButton from '../../components/MenuPanel/MenuButton'
 
 import defaultIcon from './icons/default.png'
 import payrollIcon from './icons/payroll.png'
 import espressoIcon from './icons/espresso.png'
 
 class Apps extends React.Component {
+  handleMenuPanelOpen = () => {
+    this.props.onMessage({
+      data: { from: 'app', name: 'menuPanel', value: true },
+    })
+  }
+
   render() {
     return (
       <AppLayout
-        title="Apps"
+        title={
+          <AppBarTitle>
+            <BreakPoint to="medium">
+              <MenuButton onClick={this.handleMenuPanelOpen} />
+            </BreakPoint>
+            <AppBarLabel>Apps</AppBarLabel>
+          </AppBarTitle>
+        }
         endContent={
           <DevPortalAnchor
             mode="strong"
@@ -72,6 +89,24 @@ class Apps extends React.Component {
   }
 }
 
+const AppBarTitle = styled.span`
+  display: flex;
+  align-items: center;
+  margin-left: -30px;
+`
+
+const AppBarLabel = styled.span`
+  margin-left: 8px;
+  ${font({ size: 'xxlarge' })};
+
+  ${breakpoint(
+    'medium',
+    `
+      margin-left: 24px;
+    `
+  )};
+`
+
 const DevPortalAnchor = styled(Button.Anchor)`
   display: block;
 `
@@ -90,7 +125,14 @@ const AppsGrid = styled.div`
   grid-auto-flow: row;
   grid-gap: 25px;
   justify-items: start;
-  grid-template-columns: repeat(auto-fill, 224px);
+  grid-template-columns: 1fr;
+
+  ${breakpoint(
+    'medium',
+    `
+      grid-template-columns: repeat(auto-fill, 224px);
+    `
+  )};
 `
 
 const Main = styled(Card).attrs({ width: '100%', height: '288px' })`

diff --git a/src/apps/Permissions/Permissions.js b/src/apps/Permissions/Permissions.js
@@ -1,7 +1,15 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import styled from 'styled-components'
-import { AppBar, AppView, NavigationBar, Button } from '@aragon/ui'
+import {
+  AppBar,
+  AppView,
+  NavigationBar,
+  Button,
+  font,
+  breakpoint,
+  BreakPoint,
+} from '@aragon/ui'
 import { addressesEqual, shortenAddress, isAddress } from '../../web3-utils'
 import Screen from './Screen'
 import Home from './Home/Home'
@@ -10,6 +18,7 @@ import EntityPermissions from './EntityPermissions'
 import NavigationItem from './NavigationItem'
 import AssignPermissionPanel from './AssignPermissionPanel'
 import ManageRolePanel from './ManageRolePanel'
+import MenuButton from '../../components/MenuPanel/MenuButton'
 import { PermissionsConsumer } from '../../contexts/PermissionsContext'
 
 class Permissions extends React.Component {
@@ -119,6 +128,12 @@ class Permissions extends React.Component {
     }
   }
 
+  handleMenuPanelOpen = () => {
+    this.props.onMessage({
+      data: { from: 'app', name: 'menuPanel', value: true },
+    })
+  }
+
   // Assemble the navigation items
   getNavigationItems(location, resolveEntity) {
     const items = ['Permissions']
@@ -204,10 +219,25 @@ class Permissions extends React.Component {
                       </Button>
                     }
                   >
-                    <NavigationBar
-                      items={navigationItems}
-                      onBack={this.goToHome}
-                    />
+                    <BreakPoint to="medium">
+                      {navigationItems.length === 1 ? (
+                        <AppBarTitle>
+                          <MenuButton onClick={this.handleMenuPanelOpen} />
+                          <AppBarLabel>Permissions</AppBarLabel>
+                        </AppBarTitle>
+                      ) : (
+                        <NavigationBar
+                          items={navigationItems}
+                          onBack={this.goToHome}
+                        />
+                      )}
+                    </BreakPoint>
+                    <BreakPoint from="medium">
+                      <NavigationBar
+                        items={navigationItems}
+                        onBack={this.goToHome}
+                      />
+                    </BreakPoint>
                   </AppBar>
                 }
               >
@@ -284,6 +314,23 @@ class Permissions extends React.Component {
   }
 }
 
+const AppBarTitle = styled.span`
+  display: flex;
+  align-items: center;
+`
+
+const AppBarLabel = styled.span`
+  margin: 0 10px 0 8px;
+  ${font({ size: 'xxlarge' })};
+
+  ${breakpoint(
+    'medium',
+    `
+      margin-left: 24px;
+    `
+  )};
+`
+
 // This element is only used to reset the view scroll using scrollIntoView()
 const ScrollTopElement = styled.div`
   position: absolute;