add card features (#793)
This commit is contained in:
Connor Turland
GitHub
parent
439527c464
commit
be8efa6025
|
|
@ -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;
|
||||
left: 5px;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
top: 8px;
|
||||
left: 8px;
|
||||
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;
|
||||
|
|
|
|||
|
|
@ -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),
|
||||
|
|
|
|||
|
|
@ -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,51 +71,51 @@ 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'>
|
||||
<div className='mapScreenshot'>
|
||||
<img src={ map.get('screenshot_url') } />
|
||||
</div>
|
||||
<div className='title' title={ map.get('name') }>
|
||||
<div className='innerTitle'>{ truncatedName }</div>
|
||||
</div>
|
||||
<div className='creatorAndPerm'>
|
||||
<img className='creatorImage' src={ map.get('user_image') } />
|
||||
<span className='creatorName'>{ map.get('user_name') }</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mapMetadata">
|
||||
<div className="metadataSection numContributors">
|
||||
{ map.get('contributor_count') }<br/>
|
||||
{ map.get('contributor_count') === 1 ? 'contributor' : 'contributors' }
|
||||
</div>
|
||||
<div className="metadataSection numTopics">
|
||||
{ map.get('topic_count') }<br/>
|
||||
{ map.get('topic_count') === 1 ? 'topic' : 'topics' }
|
||||
</div>
|
||||
<div className="metadataSection numStars">
|
||||
{ map.get('star_count') }<br/>
|
||||
{ map.get('star_count') === 1 ? 'star' : 'stars' }
|
||||
</div>
|
||||
<div className="metadataSection numSynapses">
|
||||
{ map.get('synapse_count') }<br/>
|
||||
{ map.get('synapse_count') === 1 ? 'synapse' : 'synapses' }
|
||||
</div>
|
||||
<div className="clearfloat"></div>
|
||||
<div className="scroll">
|
||||
<div className="desc">
|
||||
{ truncatedDesc }
|
||||
<div className="clearfloat"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{ hasMapper && <div className='mapHasMapper'></div> }
|
||||
{ hasConversation && <div className='mapHasConversation'></div> }
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<div className={ 'permission ' + editPermission }>
|
||||
<div className='mapCard'>
|
||||
<div className='mainContent'>
|
||||
<div className='mapScreenshot'>
|
||||
<img src={ map.get('screenshot_url') } />
|
||||
</div>
|
||||
<div className='title' title={ map.get('name') }>
|
||||
<div className='innerTitle'>{ truncatedName }</div>
|
||||
</div>
|
||||
<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>
|
||||
<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' }
|
||||
</div>
|
||||
<div className="metadataSection numTopics">
|
||||
{ map.get('topic_count') }<br/>
|
||||
{ map.get('topic_count') === 1 ? 'topic' : 'topics' }
|
||||
</div>
|
||||
<div className="metadataSection numStars">
|
||||
{ map.get('star_count') }<br/>
|
||||
{ map.get('star_count') === 1 ? 'star' : 'stars' }
|
||||
</div>
|
||||
<div className="metadataSection numSynapses">
|
||||
{ map.get('synapse_count') }<br/>
|
||||
{ map.get('synapse_count') === 1 ? 'synapse' : 'synapses' }
|
||||
</div>
|
||||
<div className="clearfloat"></div>
|
||||
<div className="scroll">
|
||||
<div className="desc">
|
||||
{ truncatedDesc }
|
||||
<div className="clearfloat"></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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Reference in a new issue