added icons to mobile menu fixes #1095

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'] %>'

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;

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(),

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 <div>
       <div id="mobile_header">
@@ -39,17 +42,63 @@ class MobileHeader extends Component {
                 <span>{currentUser.get('name')}</span>
               </Link>
             </li>
-            <li><a href="/maps/new">New Map</a></li>
-            <li><Link to="/explore/mine">My Maps</Link></li>
-            <li><Link to="/explore/shared">Shared With Me</Link></li>
-            <li><Link to="/explore/starred">Starred By Me</Link></li>
-            <li><Link to="/explore/active">All Maps</Link></li>
-            <li><a href={`/users/${currentUser.id}/edit`}>Account</a></li>
+            <li>
+              <a href="/maps/new">
+                <Sprite src={serverData['map_control_sprite.png']}
+                      width={32} height={32} xIndex={4} yIndex={0} />
+                New Map
+              </a>
+            </li>
+            <li>
+              <Link to="/explore/mine">
+                <Sprite src={serverData['exploremaps_sprite.png']}
+                      width={32} height={32} xIndex={1} yIndex={0} />
+                My Maps
+              </Link>
+            </li>
+            <li>
+              <Link to="/explore/shared">
+                <Sprite src={serverData['exploremaps_sprite.png']}
+                        width={32} height={32} xIndex={4} yIndex={0} />
+                Shared With Me
+              </Link>
+            </li>
+            <li>
+              <Link to="/explore/starred">
+                <Sprite src={serverData['exploremaps_sprite.png']}
+                        width={32} height={32} xIndex={3} yIndex={0} />
+                Starred By Me
+              </Link>
+            </li>
+            <li>
+              <Link to="/explore/active">
+                <Sprite src={serverData['exploremaps_sprite.png']}
+                        width={32} height={32} xIndex={0} yIndex={0} />
+                All Maps
+              </Link>
+            </li>
+            <li>
+              <a href={`/users/${currentUser.id}/edit`}>
+                <Sprite src={serverData['user_sprite.png']}
+                        width={32} height={32} xIndex={0} yIndex={0} />
+                Account
+              </a>
+            </li>
             <li className="notifications">
-              <a href="/notifications">Notifications</a>
+              <a href="/notifications">
+                <Sprite src={serverData['map_control_sprite.png']}
+                        width={32} height={32} xIndex={0} yIndex={0} />
+                Notifications
+              </a>
               {unreadNotificationsCount > 0 && <div className="unread-notifications-dot"></div>}
             </li>
-            <li><a id="Logout" href="/logout">Sign Out</a></li>
+            <li>
+              <a id="Logout" href="/logout">
+                <Sprite src={serverData['user_sprite.png']}
+                        width={32} height={32} xIndex={0} yIndex={3} />
+                Sign Out
+              </a>
+            </li>
         </ul>}
         {!currentUser && <ul onClick={this.toggle}>
           <li><a href="/">Home</a></li>

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 && <UpperLeftUI currentUser={currentUser}
                                      map={map}
                                      userRequested={userRequested}

frontend/src/components/common/Sprite.js

@@ -0,0 +1,24 @@
+import React, { Component, PropTypes } from 'react'
+
+export default class Sprite extends Component {
+  static propTypes = {
+    src: PropTypes.string,
+    width: PropTypes.number,
+    height: PropTypes.number,
+    xIndex: PropTypes.number,
+    yIndex: PropTypes.number
+  }
+
+  render () {
+    const { src, width, height, xIndex, yIndex } = this.props
+    const styles = {
+      overflow: 'hidden',
+      backgroundImage: `url(${src})`,
+      backgroundRepeat: 'no-repeat',
+      backgroundPosition: `-${xIndex * width}px -${yIndex * height}px`,
+      width: `${width}px`,
+      height: `${height}px`
+    }
+    return <div className='sprite' style={styles}></div>
+  }
+}