add card features (#793)

app/assets/stylesheets/mapcard.scss.erb

@@ -61,18 +61,113 @@
     padding: 0 0 16px 0;
     color: #424242;
 
+    &:hover {
+      .dropdownMenu .menuToggle .circle {
+        background-color: #FFF;
+      }
+      .dropdownMenu .menuToggle:hover .circle {
+        background-color: #DDD;
+      }
+
+     .mainContent {
+        filter: blur(2px);
+      }
+
+      .mapMetadata {
+        display: block;
+      }
+    }
+
     .mapHasMapper, .mapHasConversation {
       position: absolute;
-      top: 5px;
+      top: 8px;
-      left: 5px;
+      left: 8px;
-      width: 32px;
+      min-width: 32px;
+      min-height: 32px;
+
+      &:hover {
+        background-color: #FFF;
+        border-radius: 2px;
+
+        .mapperList {
+          display: block;
+        }
+      }
+
+      .mapperList {
+        display: none;
+        padding: 8px; 
+        list-style-type: none;
+
+        li {
+          &.live {
             height: 32px;
+            padding-left: 32px;
+            font-size: 16px;
+          }
+
+          img {
+            width: 24px;
+            height: 24px;
+            display: inline-block;
+            vertical-align: middle;
+          }
+          span {
+            padding-left: 10px;
+            font-size: 14px;
+          }
+        } 
+      }
     }
     .mapHasMapper {
-      background: url('<%= asset_path('junto.png') %>');
+      background: url('<%= asset_path('junto.png') %>') no-repeat 4px 0;
     }
     .mapHasConversation {
-      background: url('<%= asset_path('junto.gif') %>');
+      background: url('<%= asset_path('junto.gif') %>') no-repeat 4px 0;
+    }
+
+    .dropdownMenu {
+      position: absolute;
+      top: 8px;
+      right: 8px;
+      cursor: pointer;
+
+      .menuToggle {
+        width: 30px;
+        height: 10px;
+
+        .circle {
+          display: inline-block;
+          background-color: #454545;
+          width: 6px;
+          height: 6px;
+          border-radius: 3px;
+          margin: 2px;
+        }
+
+        &:hover .circle {
+          background-color: #222;
+        }
+      } 
+
+      .menuItems {
+        position: absolute;
+        top: 18px;
+        right: 0px;
+        background: #FFF;
+        border-radius: 2px;
+        list-style-type: none;
+        color: #454545;
+
+        li {
+          white-space: nowrap;
+          padding: 6px;
+
+          &:hover {
+            background-color: #DDD;
+          }
+        } 
+      } 
     }
 
     .mapScreenshot {
@@ -117,6 +212,12 @@
       margin-left: 8px;
     }
 
+    .cardViewOnly {
+      float: right;
+      line-height: 32px;
+      padding-right: 10px;
+      color: #454545;
+    }
 
     .scroll {
        display:block;
@@ -127,13 +228,7 @@
        margin-top: 16px;
     }
 
-    &:hover .mainContent {
-      filter: blur(2px);
-    }
 
-    &:hover .mapMetadata {
-      display: block;
-    }
 
     .mapMetadata {
       display: none;

frontend/src/Metamaps/Views/ExploreMaps.js

@@ -4,6 +4,7 @@ import React from 'react'
 import ReactDOM from 'react-dom' // TODO ensure this isn't a double import
 
 import Active from '../Active'
+import GlobalUI from '../GlobalUI'
 import Realtime from '../Realtime'
 import Maps from '../../components/Maps'
 
@@ -42,7 +43,21 @@ const ExploreMaps = {
       juntoState: Realtime.juntoState,
       moreToLoad: self.collection.page != 'loadedAll',
       user: mapperObj,
-      loadMore: self.loadMore
+      loadMore: self.loadMore,
+      onStar: function (map) {
+        $.post('/maps/' + map.id + '/star')
+        map.set('star_count', map.get('star_count') + 1)
+        if (Metamaps.Stars) Metamaps.Stars.push({ user_id: Active.Mapper.id, map_id: map.id })
+        Metamaps.Maps.Starred.add(map)
+        GlobalUI.notifyUser('Map is now starred')
+        self.render()
+      },
+      onRequest: function (map) {
+        $.post({
+          url: `/maps/${map.id}/access_request`
+        })
+        GlobalUI.notifyUser('You will be notified by email if request accepted') 
+      }
     }
     ReactDOM.render(
       React.createElement(Maps, exploreObj),

frontend/src/components/Maps/MapCard.js

@@ -4,16 +4,57 @@ import { find, values } from 'lodash'
 const IN_CONVERSATION = 1 // shared with /realtime/reducer.js
 
 const MapperList = (props) => {
-
+  return <ul className='mapperList'>
+    <li className='live'>LIVE</li>
+    { props.mappers.map(mapper => <li key={ mapper.id } ><img src={ mapper.avatar } /><span>{ mapper.username }</span></li>) }
+  </ul>
 }
 
+class Menu extends Component {
+
+  constructor(props) {
+    super(props)
+    this.state = { open: false }
+  }
+
+  toggle = () => {
+    this.setState({ open: !this.state.open })
+    return true
+  }
+
+  render = () => {
+    const { currentUser, map, onStar, onRequest } = this.props
+    const style = { display: this.state.open ? 'block' : 'none' } 
+
+    return <div className='dropdownMenu'>
+      <div className='menuToggle' onClick={ this.toggle }>
+        <div className='circle'></div>
+        <div className='circle'></div>
+        <div className='circle'></div>
+      </div> 
+      <ul className='menuItems' style={ style }>
+	<li className='star' onClick={ () => { this.toggle() && onStar(map) }}>Star Map</li>
+	{ !map.authorizeToEdit(currentUser) && <li className='request' onClick={ () => { this.toggle() && onRequest(map) }}>Request Access</li> }
+      </ul>
+    </div>
+  }
+}
+Menu.propTypes = {
+  currentUser: PropTypes.object.isRequired,
+  map: PropTypes.object.isRequired,
+  onStar: PropTypes.func.isRequired,
+  onRequest: PropTypes.func.isRequired 
+}
+
+
 class MapCard extends Component {
   render = () => {
-    const { map, juntoState, currentUser } = this.props
+    const { map, juntoState, currentUser, onRequest, onStar } = this.props
 
     const hasMap = juntoState.liveMaps[map.id]
     const hasConversation = hasMap && find(values(hasMap), v => v === IN_CONVERSATION) 
     const hasMapper = hasMap && !hasConversation
+    const mapperList = hasMap && Object.keys(hasMap).map(id => juntoState.connectedPeople[id])
 
     function capitalize (string) {
       return string.charAt(0).toUpperCase() + string.slice(1)
@@ -30,7 +71,6 @@ class MapCard extends Component {
 
     return (
       <div className="map" id={ map.id }>
-        <a href={ '/maps/' + map.id } data-router="true">
 	<div className={ 'permission ' + editPermission }>
 	  <div className='mapCard'>
 	    <div className='mainContent'>
@@ -43,9 +83,10 @@ class MapCard extends Component {
 	      <div className='creatorAndPerm'>
 		<img className='creatorImage' src={ map.get('user_image') } />  
 		<span className='creatorName'>{ map.get('user_name') }</span>
+	        { !map.authorizeToEdit(currentUser) && <div className='cardViewOnly'>View Only</div> }
 	      </div>
 	    </div>
-              <div className="mapMetadata">
+	    <a className='mapMetadata' href={ '/maps/' + map.id } data-router="true">
 	      <div className="metadataSection numContributors">
 		{ map.get('contributor_count') }<br/>
 		{ map.get('contributor_count') === 1 ? 'contributor' : 'contributors' }
@@ -69,12 +110,12 @@ class MapCard extends Component {
 		  <div className="clearfloat"></div>
 		</div>
 	      </div>
-              </div>
-              { hasMapper && <div className='mapHasMapper'></div> }
-              { hasConversation && <div className='mapHasConversation'></div> }
-            </div>
-          </div>
 	    </a>
+	    { hasMapper && <div className='mapHasMapper'><MapperList mappers={ mapperList } /></div> }
+	    { hasConversation && <div className='mapHasConversation'><MapperList mappers={ mapperList } /></div> }
+	    { currentUser && <Menu currentUser={ currentUser } map={ map } onStar= { onStar } onRequest={ onRequest } /> }
+	  </div>
+	</div>
       </div>
     )
   }
@@ -83,7 +124,9 @@ class MapCard extends Component {
 MapCard.propTypes = {
   map: PropTypes.object.isRequired,
   juntoState: PropTypes.object,
-  currentUser: PropTypes.object
+  currentUser: PropTypes.object,
+  onStar: PropTypes.func.isRequired,
+  onRequest: PropTypes.func.isRequired
 }
 
 export default MapCard

frontend/src/components/Maps/index.js

@@ -41,7 +41,7 @@ class Maps extends Component {
   }
 
   render = () => {
-    const { maps, currentUser, juntoState, section, user, moreToLoad, loadMore } = this.props
+    const { maps, currentUser, juntoState, section, user, moreToLoad, loadMore, onStar, onRequest } = this.props
     const style = { width: this.state.mapsWidth + 'px' }
 
     return (
@@ -50,7 +50,7 @@ class Maps extends Component {
           <div style={ style }>
             { user ? <MapperCard user={ user } /> : null }
             { currentUser && !user ? <div className="map newMap"><a href="/maps/new"><div className="newMapImage"></div><span>Create new map...</span></a></div> : null }
-            { maps.models.map(map => <MapCard key={ map.id } map={ map } juntoState={ juntoState } currentUser={ currentUser } />) }
+            { maps.models.map(map => <MapCard key={ map.id } map={ map } juntoState={ juntoState } currentUser={ currentUser } onStar={ onStar } onRequest={ onRequest } />) }
             <div className='clearfloat'></div>
             {!moreToLoad ? null : [
               <button className="button loadMore" onClick={ loadMore }>load more</button>,
@@ -74,7 +74,9 @@ Maps.propTypes = {
   moreToLoad: PropTypes.bool.isRequired,
   user: PropTypes.object,
   currentUser: PropTypes.object,
-  loadMore: PropTypes.func
+  loadMore: PropTypes.func,
+  onStar: PropTypes.func.isRequired,
+  onRequest: PropTypes.func.isRequired
 }
 
 export default Maps