topic card re-org

This commit is contained in:
Connor Turland 2017-09-08 16:58:17 -04:00
parent 8af66b1b2c
commit 9ab7e7e170
6 changed files with 105 additions and 111 deletions

1
.gitignore vendored
View file

@ -15,6 +15,7 @@ app/assets/javascripts/webpacked
#secrets and config #secrets and config
.env .env
*.swp
# Ignore bundler config # Ignore bundler config
.bundle .bundle

View file

@ -3150,11 +3150,8 @@ script.data-gratipay-username {
} }
.topicFollow { .topicFollow {
text-align: center;
height: 48px; height: 48px;
line-height: 48px; line-height: 48px;
border-top: 1px solid #BDBDBD;
background: #FFF;
cursor: pointer; cursor: pointer;
font-family: din-regular; font-family: din-regular;
} }

View file

@ -42,7 +42,7 @@
z-index:2; z-index:2;
color: #424242; color: #424242;
border-radius:2px; border-radius:2px;
box-shadow: 0px 3px 3px rgba(0,0,0,0.23), 0 3px 3px rgba(0,0,0,0.16); box-shadow: 2px 3px 3px rgba(125, 125, 125, 0.23), -2px -1px 3px rgba(125, 125, 125, 0.16);
} }
.text { .text {
@ -195,9 +195,6 @@
.CardOnGraph .links { .CardOnGraph .links {
position: relative; position: relative;
border-bottom: 1px solid #BDBDBD;
border-top: 1px solid #BDBDBD;
background-color: #e0e0e0;
.linkItem { .linkItem {
float: left; float: left;
@ -213,15 +210,12 @@
} }
.icon { .icon {
position: absolute;
z-index: 1;
padding: 0; padding: 0;
height: 48px; height: 48px;
width: 100%;
.metacodeImage { .metacodeImage {
cursor: move; cursor: move;
position: relative; position: absolute;
left: -23px; left: -23px;
top: 1px; top: 1px;
width: 46px; width: 46px;
@ -477,17 +471,11 @@ cursor: pointer;
} }
.CardOnGraph .metacodeTitle { .CardOnGraph .metacodeTitle {
font-style: italic; font-family: 'din-regular';
font-family: 'vinyl';
text-transform: uppercase;
position: absolute;
line-height: 24px; line-height: 24px;
height: 26px; height: 26px;
font-size: 24px; font-size: 24px;
display: none; padding: 13px 24px 9px 25px;
width: 90%;
padding: 13px 0 9px 10%;
background-color: #E0E0E0;
color: #424242; color: #424242;
} }
.permission.canEdit .metacodeTitle { .permission.canEdit .metacodeTitle {
@ -496,8 +484,8 @@ cursor: pointer;
.permission.canEdit .expandMetacodeSelect { .permission.canEdit .expandMetacodeSelect {
position: absolute; position: absolute;
top: 16px; top: 18px;
right: 16px; right: 4px;
width: 16px; width: 16px;
height: 16px; height: 16px;
background-image: url(<%= asset_data_uri('arrowright_sprite.png') %>); background-image: url(<%= asset_data_uri('arrowright_sprite.png') %>);
@ -633,7 +621,6 @@ background-color: #E0E0E0;
width:100%; width:100%;
height:47px; height:47px;
position: relative; position: relative;
border-top: 1px solid #BDBDBD;
} }
.link-adder a { .link-adder a {

View file

@ -2,7 +2,7 @@
<% Metacode.all.each do |m| %> <% Metacode.all.each do |m| %>
<% if m.color %> <% if m.color %>
<%= ".mbg" + m.id.to_s + "{" %> <%= ".mbg" + m.id.to_s + "{" %>
<%= "background-color:" + m.color + " !important;" %> <%= "color:" + m.color + " !important;" %>
<%= "}" %> <%= "}" %>
<% end %> <% end %>
<% end %> <% end %>

View file

@ -5,18 +5,14 @@ import { Link } from 'react-router'
import MetacodeSelect from '../MetacodeSelect' import MetacodeSelect from '../MetacodeSelect'
import Permission from './Permission' import Permission from './Permission'
import Follow from './Follow'
class Links extends Component { class Links extends Component {
constructor(props) { constructor(props) {
super(props) super(props)
this.state = { this.state = {
showMetacodeTitle: false, showMetacodeSelect: false
showMetacodeSelect: false,
showInMaps: false,
showMoreMaps: false,
hoveringMapCount: false,
hoveringSynapseCount: false
} }
} }
@ -29,49 +25,6 @@ class Links extends Component {
// which it currently does using backbone. If backbone comes out, make sure it still does // which it currently does using backbone. If backbone comes out, make sure it still does
} }
toggleShowMoreMaps = e => {
e.stopPropagation()
e.preventDefault()
this.setState({ showMoreMaps: !this.state.showMoreMaps })
}
updateState = (key, value) => () => {
this.setState({ [key]: value })
}
inMaps = (topic) => {
const inmapsArray = topic.get('inmaps') || []
const inmapsLinks = topic.get('inmapsLinks') || []
let firstFiveLinks = []
let extraLinks = []
for (let i = 0; i < inmapsArray.length; i ++) {
if (i < 5) {
firstFiveLinks.push({ mapName: inmapsArray[i], mapId: inmapsLinks[i] })
} else {
extraLinks.push({ mapName: inmapsArray[i], mapId: inmapsLinks[i] })
}
}
let output = []
firstFiveLinks.forEach(obj => {
output.push(<li key={obj.mapId}><Link to={`/maps/${obj.mapId}`}>{obj.mapName}</Link></li>)
})
if (extraLinks.length > 0) {
if (this.state.showMoreMaps) {
extraLinks.forEach(obj => {
output.push(<li key={obj.mapId} className="hideExtra extraText"><Link to={`/maps/${obj.mapId}`}>{obj.mapName}</Link></li>)
})
}
const text = this.state.showMoreMaps ? 'See less...' : `See ${extraLinks.length} more...`
output.push(<li key="showMore"><span className="showMore" onClick={this.toggleShowMoreMaps}>{text}</span></li>)
}
return output
}
handleMetacodeBarClick = () => { handleMetacodeBarClick = () => {
if (this.state.showMetacodeTitle) { if (this.state.showMetacodeTitle) {
this.setState({ showMetacodeSelect: !this.state.showMetacodeSelect }) this.setState({ showMetacodeSelect: !this.state.showMetacodeSelect })
@ -79,21 +32,19 @@ class Links extends Component {
} }
render = () => { render = () => {
const { topic, ActiveMapper } = this.props const { topic, onTopicFollow, ActiveMapper } = this.props
const authorizedToEdit = topic.authorizeToEdit(ActiveMapper) const authorizedToEdit = topic.authorizeToEdit(ActiveMapper)
const authorizedPermissionChange = topic.authorizePermissionChange(ActiveMapper) const authorizedPermissionChange = topic.authorizePermissionChange(ActiveMapper)
const metacode = topic.getMetacode() const metacode = topic.getMetacode()
const wrappedTopicFollow = () => onTopicFollow(topic)
const isFollowing = topic.isFollowedBy(ActiveMapper)
return ( return (
<div className="links"> <div className="links">
<div className="linkItem icon metacodeItem" <div className="linkItem icon metacodeItem"
style={{ zIndex: this.state.showMetacodeTitle ? 4 : 1 }}
onMouseLeave={() => this.setState({ showMetacodeTitle: false, showMetacodeSelect: false })}
onClick={() => authorizedToEdit && this.handleMetacodeBarClick()} onClick={() => authorizedToEdit && this.handleMetacodeBarClick()}
> >
<div className={`metacodeTitle mbg${metacode.get('id')}`} <div className={`metacodeTitle mbg${metacode.get('id')}`}>
style={{ display: this.state.showMetacodeTitle ? 'block' : 'none' }}
>
{metacode.get('name')} {metacode.get('name')}
<div className="expandMetacodeSelect"/> <div className="expandMetacodeSelect"/>
</div> </div>
@ -108,37 +59,12 @@ class Links extends Component {
<MetacodeSelect onMetacodeSelect={this.handleMetacodeSelect} metacodeSets={this.props.metacodeSets} /> <MetacodeSelect onMetacodeSelect={this.handleMetacodeSelect} metacodeSets={this.props.metacodeSets} />
</div> </div>
</div> </div>
<div className="linkItem contributor">
<a href={`/explore/mapper/${topic.get('user_id')}`} target="_blank"><img src={topic.get('user_image')} className="contributorIcon" width="32" height="32" /></a>
<div className="contributorName">{topic.get('user_name')}</div>
</div>
<div className="linkItem mapCount"
onMouseOver={this.updateState('hoveringMapCount', true)}
onMouseOut={this.updateState('hoveringMapCount', false)}
onClick={this.updateState('showInMaps', !this.state.showInMaps)}
>
<div className="mapCountIcon"></div>
{topic.get('map_count').toString()}
{!this.state.showInMaps && this.state.hoveringMapCount && (
<div className="hoverTip">Click to see which maps topic appears on</div>
)}
{this.state.showInMaps && <div className="tip"><ul>{this.inMaps(topic)}</ul></div>}
</div>
<a href={`/topics/${topic.id}`}
target="_blank"
className="linkItem synapseCount"
onMouseOver={this.updateState('hoveringSynapseCount', true)}
onMouseOut={this.updateState('hoveringSynapseCount', false)}
>
<div className="synapseCountIcon"></div>
{topic.get('synapse_count').toString()}
{this.state.hoveringSynapseCount && <div className="tip">Click to see this topics synapses</div>}
</a>
<Permission <Permission
permission={topic.get('permission')} permission={topic.get('permission')}
authorizedToEdit={authorizedPermissionChange} authorizedToEdit={authorizedPermissionChange}
updateTopic={this.props.updateTopic} updateTopic={this.props.updateTopic}
/> />
<Follow isFollowing={isFollowing} onTopicFollow={wrappedTopicFollow} />
<div className="clearfloat"></div> <div className="clearfloat"></div>
</div> </div>
) )
@ -149,6 +75,7 @@ Links.propTypes = {
topic: PropTypes.object, // backbone object topic: PropTypes.object, // backbone object
ActiveMapper: PropTypes.object, ActiveMapper: PropTypes.object,
updateTopic: PropTypes.func, updateTopic: PropTypes.func,
onTopicFollow: PropTypes.func,
metacodeSets: PropTypes.arrayOf(PropTypes.shape({ metacodeSets: PropTypes.arrayOf(PropTypes.shape({
name: PropTypes.string, name: PropTypes.string,
metacodes: PropTypes.arrayOf(PropTypes.shape({ metacodes: PropTypes.arrayOf(PropTypes.shape({

View file

@ -8,6 +8,60 @@ import Attachments from './Attachments'
import Follow from './Follow' import Follow from './Follow'
class ReactTopicCard extends Component { class ReactTopicCard extends Component {
constructor(props) {
super(props)
this.state = {
showInMaps: false,
showMoreMaps: false,
hoveringMapCount: false,
hoveringSynapseCount: false
}
}
toggleShowMoreMaps = e => {
e.stopPropagation()
e.preventDefault()
this.setState({ showMoreMaps: !this.state.showMoreMaps })
}
updateState = (key, value) => () => {
this.setState({ [key]: value })
}
inMaps = (topic) => {
const inmapsArray = topic.get('inmaps') || []
const inmapsLinks = topic.get('inmapsLinks') || []
let firstFiveLinks = []
let extraLinks = []
for (let i = 0; i < inmapsArray.length; i ++) {
if (i < 5) {
firstFiveLinks.push({ mapName: inmapsArray[i], mapId: inmapsLinks[i] })
} else {
extraLinks.push({ mapName: inmapsArray[i], mapId: inmapsLinks[i] })
}
}
let output = []
firstFiveLinks.forEach(obj => {
output.push(<li key={obj.mapId}><Link to={`/maps/${obj.mapId}`}>{obj.mapName}</Link></li>)
})
if (extraLinks.length > 0) {
if (this.state.showMoreMaps) {
extraLinks.forEach(obj => {
output.push(<li key={obj.mapId} className="hideExtra extraText"><Link to={`/maps/${obj.mapId}`}>{obj.mapName}</Link></li>)
})
}
const text = this.state.showMoreMaps ? 'See less...' : `See ${extraLinks.length} more...`
output.push(<li key="showMore"><span className="showMore" onClick={this.toggleShowMoreMaps}>{text}</span></li>)
}
return output
}
render = () => { render = () => {
const { currentUser, onTopicFollow, updateTopic } = this.props const { currentUser, onTopicFollow, updateTopic } = this.props
const topic = this.props.openTopic const topic = this.props.openTopic
@ -34,16 +88,16 @@ class ReactTopicCard extends Component {
<div className="showcard mapElement mapElementHidden"> <div className="showcard mapElement mapElementHidden">
<div className={classname}> <div className={classname}>
<div className={`CardOnGraph ${hasAttachment ? 'hasAttachment' : ''}`} id={`topic_${topic.id}`}> <div className={`CardOnGraph ${hasAttachment ? 'hasAttachment' : ''}`} id={`topic_${topic.id}`}>
<Title name={topic.get('name')}
authorizedToEdit={authorizedToEdit}
onChange={wrappedUpdateTopic}
/>
<Links topic={topic} <Links topic={topic}
ActiveMapper={this.props.currentUser} ActiveMapper={this.props.currentUser}
updateTopic={wrappedUpdateTopic} updateTopic={wrappedUpdateTopic}
metacodeSets={this.props.metacodeSets} metacodeSets={this.props.metacodeSets}
redrawCanvas={this.props.redrawCanvas} redrawCanvas={this.props.redrawCanvas}
/> />
<Title name={topic.get('name')}
authorizedToEdit={authorizedToEdit}
onChange={wrappedUpdateTopic}
/>
<Desc desc={topic.get('desc')} <Desc desc={topic.get('desc')}
authorizedToEdit={authorizedToEdit} authorizedToEdit={authorizedToEdit}
onChange={wrappedUpdateTopic} onChange={wrappedUpdateTopic}
@ -52,7 +106,34 @@ class ReactTopicCard extends Component {
authorizedToEdit={authorizedToEdit} authorizedToEdit={authorizedToEdit}
updateTopic={wrappedUpdateTopic} updateTopic={wrappedUpdateTopic}
/> />
<Follow isFollowing={isFollowing} onTopicFollow={wrappedTopicFollow} /> <div className="linkItem contributor">
<a href={`/explore/mapper/${topic.get('user_id')}`} target="_blank">
<img src={topic.get('user_image')} className="contributorIcon" width="32" height="32" />
<div className="contributorName">{topic.get('user_name')}</div>
</a>
</div>
<div className="linkItem mapCount"
onMouseOver={this.updateState('hoveringMapCount', true)}
onMouseOut={this.updateState('hoveringMapCount', false)}
onClick={this.updateState('showInMaps', !this.state.showInMaps)}
>
<div className="mapCountIcon"></div>
{topic.get('map_count').toString()}
{!this.state.showInMaps && this.state.hoveringMapCount && (
<div className="hoverTip">Click to see which maps topic appears on</div>
)}
{this.state.showInMaps && <div className="tip"><ul>{this.inMaps(topic)}</ul></div>}
</div>
<a href={`/topics/${topic.id}`}
target="_blank"
className="linkItem synapseCount"
onMouseOver={this.updateState('hoveringSynapseCount', true)}
onMouseOut={this.updateState('hoveringSynapseCount', false)}
>
<div className="synapseCountIcon"></div>
{topic.get('synapse_count').toString()}
{this.state.hoveringSynapseCount && <div className="tip">Click to see this topics synapses</div>}
</a>
<div className="clearfloat"></div> <div className="clearfloat"></div>
</div> </div>
</div> </div>
@ -62,6 +143,7 @@ class ReactTopicCard extends Component {
} }
} }
//
ReactTopicCard.propTypes = { ReactTopicCard.propTypes = {
openTopic: PropTypes.object, openTopic: PropTypes.object,
currentUser: PropTypes.object, currentUser: PropTypes.object,