From 871c491097b43718a4541a13c81b7c7fa95ac185 Mon Sep 17 00:00:00 2001 From: Connor Turland Date: Sun, 12 Mar 2017 03:26:00 -0400 Subject: [PATCH] redo the mobile menu in react --- app/assets/stylesheets/mobile.scss.erb | 23 +------ app/views/layouts/_mobilemenu.html.erb | 67 --------------------- app/views/layouts/application.html.erb | 4 +- frontend/src/Metamaps/GlobalUI/ReactApp.js | 18 +++--- frontend/src/Metamaps/Listeners.js | 3 +- frontend/src/Metamaps/index.js | 2 - frontend/src/components/App/MobileHeader.js | 66 ++++++++++++++++++++ frontend/src/components/App/index.js | 19 ++++-- frontend/src/components/MapView/index.js | 10 ++- 9 files changed, 107 insertions(+), 105 deletions(-) delete mode 100644 app/views/layouts/_mobilemenu.html.erb create mode 100644 frontend/src/components/App/MobileHeader.js diff --git a/app/assets/stylesheets/mobile.scss.erb b/app/assets/stylesheets/mobile.scss.erb index fc34168d..1bbd614c 100644 --- a/app/assets/stylesheets/mobile.scss.erb +++ b/app/assets/stylesheets/mobile.scss.erb @@ -1,7 +1,3 @@ -#mobile_header { - display: none; -} - @media only screen and (max-width : 752px) and (min-width : 504px) { .sidebarSearch .tt-hint, .sidebarSearch .sidebarSearchField { width: 160px !important; @@ -51,10 +47,6 @@ display: none; } - #mobile_header { - display: block; - } - .homeWrapper { width: 96%; padding: 0 2%; @@ -116,7 +108,7 @@ #exploreMaps > div { margin-top: 70px; } - + .mapper { width: 100%; margin: 0 0 30px 0; @@ -217,6 +209,7 @@ width: 100%; box-shadow: 0px 3px 3px rgba(0,0,0,0.23), 0 3px 3px rgba(0,0,0,0.16); position: fixed; + z-index: 1; } #menu_icon { @@ -249,7 +242,6 @@ } #mobile_menu { - display: none; background: #EEE; position: fixed; top: 50px; @@ -257,6 +249,7 @@ padding: 10px; width: 200px; box-shadow: 3px 3px 3px rgba(0,0,0,0.23), 3px 3px 3px rgba(0,0,0,0.16); + z-index: 2; li { padding: 10px; @@ -274,16 +267,6 @@ } } -/* - * the mobile menu, even if it's been opened by a user, should - * not show up if they resize their browser back to full size - */ -@media only screen and (max-width : 504px) { - #mobile_menu.visible { - display: block; - } -} - li.mobileMenuUser { border-bottom: 1px solid #BBB; } diff --git a/app/views/layouts/_mobilemenu.html.erb b/app/views/layouts/_mobilemenu.html.erb deleted file mode 100644 index 5ef3a66d..00000000 --- a/app/views/layouts/_mobilemenu.html.erb +++ /dev/null @@ -1,67 +0,0 @@ -
-
- <%= yield(:mobile_title) %> -
- -
-
- -
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index 34e0a479..3123e633 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -9,7 +9,6 @@ controller-<%= controller_name %> action-<%= action_name %>"> <%= content_tag :div, class: "main", id: "react-app" do %> <%= yield %> - <%= render :partial => 'layouts/mobilemenu' %> <% end %> <% if devise_error_messages? %> <%= devise_error_messages! %> @@ -35,6 +34,9 @@ Metamaps.ServerData.mapIsStarred = <%= @map && current_user.starred_map?(@map) ? true : false %> <% end %> +
<%= render :partial => 'layouts/foot' %> diff --git a/frontend/src/Metamaps/GlobalUI/ReactApp.js b/frontend/src/Metamaps/GlobalUI/ReactApp.js index d317d4c8..0b215178 100644 --- a/frontend/src/Metamaps/GlobalUI/ReactApp.js +++ b/frontend/src/Metamaps/GlobalUI/ReactApp.js @@ -30,14 +30,15 @@ const ReactApp = { unreadNotificationsCount: 0, mapsWidth: 0, mobile: false, + mobileTitle: '', + mobileTitleWidth: 0, init: function(serverData, openLightbox) { const self = ReactApp self.unreadNotificationsCount = serverData.unreadNotificationsCount + self.mobileTitle = serverData.mobileTitle self.openLightbox = openLightbox routes = makeRoutes() self.resize() - self.setMobile() - self.render() window && window.addEventListener('resize', self.resize) }, handleUpdate: function(location) { @@ -72,7 +73,10 @@ const ReactApp = { return merge({ unreadNotificationsCount: self.unreadNotificationsCount, currentUser: Active.Mapper, - mobile: self.mobile + mobile: self.mobile, + mobileTitle: self.mobileTitle, + mobileTitleWidth: self.mobileTitleWidth, + mobileTitleClick: (e) => Active.Map && InfoBox.toggleBox(e) }, self.getMapProps(), self.getTopicProps(), @@ -155,11 +159,6 @@ const ReactApp = { handleInputMessage: ChatView.handleInputMessage } }, - setMobile: function() { - const self = ReactApp - self.mobile = document && document.body.clientWidth <= MOBILE_VIEW_BREAKPOINT - self.render() - }, resize: function() { const self = ReactApp const maps = ExploreMaps.collection @@ -170,7 +169,10 @@ const ReactApp = { const mapsWidth = document.body.clientWidth <= MOBILE_VIEW_BREAKPOINT ? document.body.clientWidth - MOBILE_VIEW_PADDING : Math.min(MAX_COLUMNS, Math.min(numCards, mapSpaces)) * MAP_WIDTH + self.mapsWidth = mapsWidth + self.mobileTitleWidth = document ? document.body.clientWidth - 70 : 0 + self.mobile = document && document.body.clientWidth <= MOBILE_VIEW_BREAKPOINT self.render() } } diff --git a/frontend/src/Metamaps/Listeners.js b/frontend/src/Metamaps/Listeners.js index d55abf92..c9a320c6 100644 --- a/frontend/src/Metamaps/Listeners.js +++ b/frontend/src/Metamaps/Listeners.js @@ -20,7 +20,7 @@ const Listeners = { if (!(Active.Map || Active.Topic)) return const onCanvas = e.target.tagName === 'BODY' - + switch (e.which) { case 13: // if enter key is pressed // prevent topic creation if sending a message @@ -141,7 +141,6 @@ const Listeners = { } if (Active.Map && Realtime.inConversation) Realtime.positionVideos() - Mobile.resizeTitle() }) }, centerAndReveal: function(nodes, opts) { diff --git a/frontend/src/Metamaps/index.js b/frontend/src/Metamaps/index.js index 8be91f94..7a55017a 100644 --- a/frontend/src/Metamaps/index.js +++ b/frontend/src/Metamaps/index.js @@ -17,7 +17,6 @@ import Listeners from './Listeners' import Loading from './Loading' import Map, { CheatSheet, InfoBox } from './Map' import Mapper from './Mapper' -import Mobile from './Mobile' import Mouse from './Mouse' import Organize from './Organize' import PasteInput from './PasteInput' @@ -57,7 +56,6 @@ Metamaps.Map.CheatSheet = CheatSheet Metamaps.Map.InfoBox = InfoBox Metamaps.Maps = {} Metamaps.Mapper = Mapper -Metamaps.Mobile = Mobile Metamaps.Mouse = Mouse Metamaps.Organize = Organize Metamaps.PasteInput = PasteInput diff --git a/frontend/src/components/App/MobileHeader.js b/frontend/src/components/App/MobileHeader.js new file mode 100644 index 00000000..0c300248 --- /dev/null +++ b/frontend/src/components/App/MobileHeader.js @@ -0,0 +1,66 @@ +import React, { Component, PropTypes } from 'react' +import { Link } from 'react-router' + +class MobileHeader extends Component { + static propTypes = { + unreadNotificationsCount: PropTypes.number, + currentUser: PropTypes.object, + mobileTitle: PropTypes.string, + mobileTitleWidth: PropTypes.number, + onTitleClick: PropTypes.func + } + + constructor(props) { + super(props) + this.state = {open: false} + } + + toggle = () => { + this.setState({open: !this.state.open}) + } + + render() { + const { unreadNotificationsCount, currentUser, mobileTitle, mobileTitleWidth, onTitleClick } = this.props + const { open } = this.state + return
+
+
+ {mobileTitle} +
+ +
+ {open &&
+ {currentUser &&
    +
  • + + + {currentUser.get('name')} + +
    • +
  • New Map
    • +
  • My Maps
    • +
  • Shared With Me
    • +
  • Starred By Me
    • +
  • All Maps
    • +
  • Account
    • +
  • + Notifications + {unreadNotificationsCount > 0 &&
    } +
    • +
  • Sign Out
    • +
} + {!currentUser && } +
} +
+ } +} + +export default MobileHeader diff --git a/frontend/src/components/App/index.js b/frontend/src/components/App/index.js index 9424052a..6bde4748 100644 --- a/frontend/src/components/App/index.js +++ b/frontend/src/components/App/index.js @@ -1,5 +1,6 @@ import React, { Component, PropTypes } from 'react' +import MobileHeader from './MobileHeader' import Toast from './Toast' import UpperLeftUI from './UpperLeftUI' import UpperRightUI from './UpperRightUI' @@ -9,7 +10,11 @@ class App extends Component { children: PropTypes.object, toast: PropTypes.string, unreadNotificationsCount: PropTypes.number, - location: PropTypes.object + location: PropTypes.object, + mobile: PropTypes.bool, + mobileTitle: PropTypes.string, + mobileTitleWidth: PropTypes.number, + mobileTitleClick: PropTypes.func } static childContextTypes = { @@ -23,12 +28,18 @@ class App extends Component { } render () { - const { children, toast, currentUser, unreadNotificationsCount } = this.props + const { children, toast, currentUser, unreadNotificationsCount, + mobile, mobileTitle, mobileTitleWidth, mobileTitleClick } = this.props return
+ {mobile && } - + {!mobile && } - {currentUser && } + {!mobile && currentUser && } {children}
} diff --git a/frontend/src/components/MapView/index.js b/frontend/src/components/MapView/index.js index a6004463..91fb495f 100644 --- a/frontend/src/components/MapView/index.js +++ b/frontend/src/components/MapView/index.js @@ -10,9 +10,12 @@ import TopicCard from '../TopicCard' class MapView extends Component { static propTypes = { + mobile: PropTypes.bool, mapId: PropTypes.string, map: PropTypes.object, mapIsStarred: PropTypes.bool, + onMapStar: PropTypes.func, + onMapUnstar: PropTypes.func, toggleFilterBox: PropTypes.func, filterBoxHtml: PropTypes.string, toggleMapInfoBox: PropTypes.func, @@ -20,6 +23,12 @@ class MapView extends Component { currentUser: PropTypes.object, endActiveMap: PropTypes.func, launchNewMap: PropTypes.func, + openImportLightbox: PropTypes.func, + forkMap: PropTypes.func, + openHelpLightbox: PropTypes.func, + onZoomExtents: PropTypes.func, + onZoomIn: PropTypes.func, + onZoomOut: PropTypes.func } constructor(props) { @@ -31,7 +40,6 @@ class MapView extends Component { endMap() { this.setState({ - filterBoxOpen: false, chatOpen: false }) this.props.endActiveMap()