From ed76162b63b3d6b2013d7f3affffc72e6181a577 Mon Sep 17 00:00:00 2001 From: Connor Turland Date: Fri, 17 Mar 2017 01:32:01 -0400 Subject: [PATCH] added icons to mobile menu fixes #1095 --- .../javascripts/Metamaps.ServerData.js.erb | 3 + app/assets/stylesheets/mobile.scss.erb | 10 ++- frontend/src/Metamaps/GlobalUI/ReactApp.js | 5 +- frontend/src/components/App/MobileHeader.js | 67 ++++++++++++++++--- frontend/src/components/App/index.js | 8 ++- frontend/src/components/common/Sprite.js | 24 +++++++ 6 files changed, 103 insertions(+), 14 deletions(-) create mode 100644 frontend/src/components/common/Sprite.js diff --git a/app/assets/javascripts/Metamaps.ServerData.js.erb b/app/assets/javascripts/Metamaps.ServerData.js.erb index 86c8d2b9..bd412a93 100644 --- a/app/assets/javascripts/Metamaps.ServerData.js.erb +++ b/app/assets/javascripts/Metamaps.ServerData.js.erb @@ -10,6 +10,9 @@ Metamaps.ServerData['topic_link_signifier.png'] = '<%= asset_path('topic_link_si Metamaps.ServerData['synapse16.png'] = '<%= asset_path('synapse16.png') %>' Metamaps.ServerData['sounds/MM_sounds.mp3'] = '<%= asset_path 'sounds/MM_sounds.mp3' %>' Metamaps.ServerData['sounds/MM_sounds.ogg'] = '<%= asset_path 'sounds/MM_sounds.ogg' %>' +Metamaps.ServerData['exploremaps_sprite.png'] = '<%= asset_path 'exploremaps_sprite.png' %>' +Metamaps.ServerData['map_control_sprite.png'] = '<%= asset_path 'map_control_sprite.png' %>' +Metamaps.ServerData['user_sprite.png'] = '<%= asset_path 'user_sprite.png' %>' Metamaps.ServerData.Metacodes = <%= Metacode.all.to_json.gsub(%r[(icon.*?)(\"},)], '\1?purple=stupid\2').html_safe %> Metamaps.ServerData.REALTIME_SERVER = '<%= ENV['REALTIME_SERVER'] %>' Metamaps.ServerData.RAILS_ENV = '<%= ENV['RAILS_ENV'] %>' diff --git a/app/assets/stylesheets/mobile.scss.erb b/app/assets/stylesheets/mobile.scss.erb index 7bf57d63..704569c8 100644 --- a/app/assets/stylesheets/mobile.scss.erb +++ b/app/assets/stylesheets/mobile.scss.erb @@ -260,8 +260,16 @@ z-index: 2; li { - padding: 10px; + padding: 7px 10px; list-style: none; + font-family: 'din-regular', arial, sans-serif; + + .sprite { + margin-right: 6px; + margin-top: -2px; + display: inline-block; + vertical-align: middle; + } &.notifications { position: relative; diff --git a/frontend/src/Metamaps/GlobalUI/ReactApp.js b/frontend/src/Metamaps/GlobalUI/ReactApp.js index eccdaa8a..7f560169 100644 --- a/frontend/src/Metamaps/GlobalUI/ReactApp.js +++ b/frontend/src/Metamaps/GlobalUI/ReactApp.js @@ -26,6 +26,7 @@ const MOBILE_VIEW_PADDING = 40 const MAX_COLUMNS = 4 const ReactApp = { + serverData: {}, mapId: null, topicId: null, unreadNotificationsCount: 0, @@ -36,6 +37,7 @@ const ReactApp = { mobileTitleWidth: 0, init: function(serverData, openLightbox) { const self = ReactApp + self.serverData = serverData self.unreadNotificationsCount = serverData.unreadNotificationsCount self.mobileTitle = serverData.mobileTitle self.openLightbox = openLightbox @@ -102,7 +104,8 @@ const ReactApp = { mobileTitle: self.mobileTitle, mobileTitleWidth: self.mobileTitleWidth, mobileTitleClick: (e) => Active.Map && InfoBox.toggleBox(e), - openInviteLightbox: () => self.openLightbox('invite') + openInviteLightbox: () => self.openLightbox('invite'), + serverData: self.serverData }, self.getMapProps(), self.getTopicProps(), diff --git a/frontend/src/components/App/MobileHeader.js b/frontend/src/components/App/MobileHeader.js index 0c300248..16821853 100644 --- a/frontend/src/components/App/MobileHeader.js +++ b/frontend/src/components/App/MobileHeader.js @@ -1,6 +1,8 @@ import React, { Component, PropTypes } from 'react' import { Link } from 'react-router' +import Sprite from '../common/Sprite' + class MobileHeader extends Component { static propTypes = { unreadNotificationsCount: PropTypes.number, @@ -20,7 +22,8 @@ class MobileHeader extends Component { } render() { - const { unreadNotificationsCount, currentUser, mobileTitle, mobileTitleWidth, onTitleClick } = this.props + const { unreadNotificationsCount, currentUser, mobileTitle, + mobileTitleWidth, onTitleClick, serverData } = this.props const { open } = this.state return
@@ -39,17 +42,63 @@ class MobileHeader extends Component { {currentUser.get('name')} -
  • New Map
    • -
  • My Maps
    • -
  • Shared With Me
    • -
  • Starred By Me
    • -
  • All Maps
    • -
  • Account
    • +
  • + + + New Map + +
    • +
  • + + + My Maps + +
    • +
  • + + + Shared With Me + +
    • +
  • + + + Starred By Me + +
    • +
  • + + + All Maps + +
    • +
  • + + + Account + +
  • - Notifications + + + Notifications + {unreadNotificationsCount > 0 &&
    }
    • -
  • Sign Out
    • +
  • + + + Sign Out + +
    • } {!currentUser &&
    • Home
      • diff --git a/frontend/src/components/App/index.js b/frontend/src/components/App/index.js index 22d327a2..fdf2a203 100644 --- a/frontend/src/components/App/index.js +++ b/frontend/src/components/App/index.js @@ -20,7 +20,8 @@ class App extends Component { userRequested: PropTypes.bool, requestAnswered: PropTypes.bool, requestApproved: PropTypes.bool, - onRequestAccess: PropTypes.func + onRequestAccess: PropTypes.func, + serverData: PropTypes.object } static childContextTypes = { @@ -35,7 +36,7 @@ class App extends Component { render () { const { children, toast, unreadNotificationsCount, openInviteLightbox, mobile, mobileTitle, mobileTitleWidth, mobileTitleClick, location, - map, userRequested, requestAnswered, requestApproved, + map, userRequested, requestAnswered, requestApproved, serverData, onRequestAccess } = this.props const { pathname } = location || {} // this fixes a bug that happens otherwise when you logout @@ -46,7 +47,8 @@ class App extends Component { unreadNotificationsCount={unreadNotificationsCount} mobileTitle={mobileTitle} mobileTitleWidth={mobileTitleWidth} - onTitleClick={mobileTitleClick} />} + onTitleClick={mobileTitleClick} + serverData={serverData} />} {!unauthedHome &&
    + } +}