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

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

@ -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;
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;

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

63
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 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

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

@ -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