glenux-contrib/metamaps--metamaps
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

add card features (#793)

Browse source
This commit is contained in:
Connor Turland 2016-10-21 17:42:21 -04:00 committed by GitHub
parent 439527c464
commit be8efa6025
4 changed files with 219 additions and 64 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

119
app/assets/stylesheets/mapcard.scss.erb
View file

@ -61,18 +61,113 @@
padding: 0 0 16px 0; padding: 0 0 16px 0;
color: #424242; 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 { .mapHasMapper, .mapHasConversation {
position: absolute; position: absolute;
top: 5px; top: 8px;
left: 5px; left: 8px;
width: 32px; min-width: 32px;
height: 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 { .mapHasMapper {
background: url('<%= asset_path('junto.png') %>'); background: url('<%= asset_path('junto.png') %>') no-repeat 4px 0;
} }
.mapHasConversation { .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 { .mapScreenshot {
@ -117,6 +212,12 @@
margin-left: 8px; margin-left: 8px;
} }
.cardViewOnly {
float: right;
line-height: 32px;
padding-right: 10px;
color: #454545;
}
.scroll { .scroll {
display:block; display:block;
@ -127,13 +228,7 @@
margin-top: 16px; margin-top: 16px;
} }
&:hover .mainContent {
filter: blur(2px);
}
&:hover .mapMetadata {
display: block;
}
.mapMetadata { .mapMetadata {
display: none; display: none;

17
frontend/src/Metamaps/Views/ExploreMaps.js
View file

@ -4,6 +4,7 @@ import React from 'react'
import ReactDOM from 'react-dom' // TODO ensure this isn't a double import import ReactDOM from 'react-dom' // TODO ensure this isn't a double import
import Active from '../Active' import Active from '../Active'
import GlobalUI from '../GlobalUI'
import Realtime from '../Realtime' import Realtime from '../Realtime'
import Maps from '../../components/Maps' import Maps from '../../components/Maps'
@ -42,7 +43,21 @@ const ExploreMaps = {
juntoState: Realtime.juntoState, juntoState: Realtime.juntoState,
moreToLoad: self.collection.page != 'loadedAll', moreToLoad: self.collection.page != 'loadedAll',
user: mapperObj, 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( ReactDOM.render(
React.createElement(Maps, exploreObj), React.createElement(Maps, exploreObj),

139
frontend/src/components/Maps/MapCard.js
View file

@ -4,16 +4,57 @@ import { find, values } from 'lodash'
const IN_CONVERSATION = 1 // shared with /realtime/reducer.js const IN_CONVERSATION = 1 // shared with /realtime/reducer.js
const MapperList = (props) => { 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 { class MapCard extends Component {
render = () => { render = () => {
const { map, juntoState, currentUser } = this.props const { map, juntoState, currentUser, onRequest, onStar } = this.props
const hasMap = juntoState.liveMaps[map.id] const hasMap = juntoState.liveMaps[map.id]
const hasConversation = hasMap && find(values(hasMap), v => v === IN_CONVERSATION) const hasConversation = hasMap && find(values(hasMap), v => v === IN_CONVERSATION)
const hasMapper = hasMap && !hasConversation const hasMapper = hasMap && !hasConversation
const mapperList = hasMap && Object.keys(hasMap).map(id => juntoState.connectedPeople[id])
function capitalize (string) { function capitalize (string) {
return string.charAt(0).toUpperCase() + string.slice(1) return string.charAt(0).toUpperCase() + string.slice(1)
@ -30,51 +71,51 @@ class MapCard extends Component {
return ( return (
<div className="map" id={ map.id }> <div className="map" id={ map.id }>
<a href={ '/maps/' + map.id } data-router="true"> <div className={ 'permission ' + editPermission }>
<div className={ 'permission ' + editPermission }> <div className='mapCard'>
<div className='mapCard'> <div className='mainContent'>
<div className='mainContent'> <div className='mapScreenshot'>
<div className='mapScreenshot'> <img src={ map.get('screenshot_url') } />
<img src={ map.get('screenshot_url') } /> </div>
</div> <div className='title' title={ map.get('name') }>
<div className='title' title={ map.get('name') }> <div className='innerTitle'>{ truncatedName }</div>
<div className='innerTitle'>{ truncatedName }</div> </div>
</div> <div className='creatorAndPerm'>
<div className='creatorAndPerm'> <img className='creatorImage' src={ map.get('user_image') } />
<img className='creatorImage' src={ map.get('user_image') } /> <span className='creatorName'>{ map.get('user_name') }</span>
<span className='creatorName'>{ map.get('user_name') }</span> { !map.authorizeToEdit(currentUser) && <div className='cardViewOnly'>View Only</div> }
</div> </div>
</div> </div>
<div className="mapMetadata"> <a className='mapMetadata' href={ '/maps/' + map.id } data-router="true">
<div className="metadataSection numContributors"> <div className="metadataSection numContributors">
{ map.get('contributor_count') }<br/> { map.get('contributor_count') }<br/>
{ map.get('contributor_count') === 1 ? 'contributor' : 'contributors' } { map.get('contributor_count') === 1 ? 'contributor' : 'contributors' }
</div> </div>
<div className="metadataSection numTopics"> <div className="metadataSection numTopics">
{ map.get('topic_count') }<br/> { map.get('topic_count') }<br/>
{ map.get('topic_count') === 1 ? 'topic' : 'topics' } { map.get('topic_count') === 1 ? 'topic' : 'topics' }
</div> </div>
<div className="metadataSection numStars"> <div className="metadataSection numStars">
{ map.get('star_count') }<br/> { map.get('star_count') }<br/>
{ map.get('star_count') === 1 ? 'star' : 'stars' } { map.get('star_count') === 1 ? 'star' : 'stars' }
</div> </div>
<div className="metadataSection numSynapses"> <div className="metadataSection numSynapses">
{ map.get('synapse_count') }<br/> { map.get('synapse_count') }<br/>
{ map.get('synapse_count') === 1 ? 'synapse' : 'synapses' } { map.get('synapse_count') === 1 ? 'synapse' : 'synapses' }
</div> </div>
<div className="clearfloat"></div> <div className="clearfloat"></div>
<div className="scroll"> <div className="scroll">
<div className="desc"> <div className="desc">
{ truncatedDesc } { truncatedDesc }
<div className="clearfloat"></div> <div className="clearfloat"></div>
</div> </div>
</div> </div>
</div> </a>
{ hasMapper && <div className='mapHasMapper'></div> } { hasMapper && <div className='mapHasMapper'><MapperList mappers={ mapperList } /></div> }
{ hasConversation && <div className='mapHasConversation'></div> } { hasConversation && <div className='mapHasConversation'><MapperList mappers={ mapperList } /></div> }
</div> { currentUser && <Menu currentUser={ currentUser } map={ map } onStar= { onStar } onRequest={ onRequest } /> }
</div> </div>
</a> </div>
</div> </div>
) )
} }
@ -83,7 +124,9 @@ class MapCard extends Component {
MapCard.propTypes = { MapCard.propTypes = {
map: PropTypes.object.isRequired, map: PropTypes.object.isRequired,
juntoState: PropTypes.object, juntoState: PropTypes.object,
currentUser: PropTypes.object currentUser: PropTypes.object,
onStar: PropTypes.func.isRequired,
onRequest: PropTypes.func.isRequired
} }
export default MapCard export default MapCard

8
frontend/src/components/Maps/index.js
View file

@ -41,7 +41,7 @@ class Maps extends Component {
} }
render = () => { 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' } const style = { width: this.state.mapsWidth + 'px' }
return ( return (
@ -50,7 +50,7 @@ class Maps extends Component {
<div style={ style }> <div style={ style }>
{ user ? <MapperCard user={ user } /> : null } { 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 } { 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> <div className='clearfloat'></div>
{!moreToLoad ? null : [ {!moreToLoad ? null : [
<button className="button loadMore" onClick={ loadMore }>load more</button>, <button className="button loadMore" onClick={ loadMore }>load more</button>,
@ -74,7 +74,9 @@ Maps.propTypes = {
moreToLoad: PropTypes.bool.isRequired, moreToLoad: PropTypes.bool.isRequired,
user: PropTypes.object, user: PropTypes.object,
currentUser: PropTypes.object, currentUser: PropTypes.object,
loadMore: PropTypes.func loadMore: PropTypes.func,
onStar: PropTypes.func.isRequired,
onRequest: PropTypes.func.isRequired
} }
export default Maps export default Maps