topic card design changes

This commit is contained in:
Connor Turland 2017-09-10 17:17:56 -04:00
parent 9ab7e7e170
commit ec3e09c578
10 changed files with 219 additions and 183 deletions

View file

@ -3150,8 +3150,15 @@ script.data-gratipay-username {
}
.topicFollow {
height: 48px;
line-height: 48px;
height: 24px;
line-height: 24px;
cursor: pointer;
font-family: din-regular;
font-family: helvetica;
float: left;
width: 72px;
text-align: right;
padding: 12px 0;
color: #4fb5c0;
font-size: 13px;
font-weight: bold;
}

View file

@ -64,7 +64,6 @@
display:block;
position:relative;
width:100%;
min-height:360px;
z-index: 25;
}
.CardOnGraph.hasAttachment {
@ -73,11 +72,10 @@
.CardOnGraph .title {
word-break: break-word;
font-size: 18px;
line-height: 22px;
font-size: 20px;
line-height: 24px;
display: table;
padding: 8px 0 16px;
height: 80px;
padding: 20px 0;
text-align: center;
font-family: 'din-regular', sans-serif;
width: 300px;
@ -88,11 +86,6 @@
display: table-cell;
vertical-align: middle;
padding: 0 16px;
&.riek-editing {
position: absolute;
top: 32px;
}
}
.canEdit #titleActivator:hover {
background-image: url(<%= asset_data_uri('edit.png') %>);
@ -104,9 +97,8 @@
.showcard .title .riek-editing {
font-family: 'din-regular', sans-serif;
color: #424242;
font-size: 18px;
line-height: 22px;
height: 3em;
font-size: 20px;
line-height: 24px;
padding: 5px 0;
width: 100%;
margin: 0;
@ -120,11 +112,14 @@
.CardOnGraph .scroll {
display:block;
padding: 8px 0 8px 16px;
height: 152px;
font-size: 13px;
line-height:15px;
font-family: helvetica, sans-serif;
overflow-y: auto;
p.emptyDesc {
color: rgba(66, 66, 66, 0.6);
}
}
.CardOnGraph.hasAttachment .scroll {
height: auto;
@ -180,7 +175,6 @@
margin-top:2px;
padding-right: 18px;
margin-right: 8px;
min-height: 7em;
}
.canEdit .CardOnGraph .riek_desc:hover {
background-image: url(<%= asset_data_uri('edit.png') %>);
@ -195,6 +189,7 @@
.CardOnGraph .links {
position: relative;
z-index: 2;
.linkItem {
float: left;
@ -212,32 +207,50 @@
.icon {
padding: 0;
height: 48px;
margin-right: 10px;
.metacodeImage {
cursor: move;
position: absolute;
left: -23px;
top: 1px;
width: 46px;
height: 46px;
background-size:46px 46px;
left: -18px;
top: 6px;
width: 36px;
height: 36px;
background-size:36px 36px;
background-position:0 0;
background-repeat:no-repeat;
}
}
}
.CardOnGraph .info {
position: relative;
.linkItem {
float: left;
z-index: 1;
position: relative;
color: rgba(66, 66, 66, 0.6);
font-size: 14px;
line-height: 14px;
a {
color: rgba(66, 66, 66, 0.6);
}
}
.contributor {
bottom: 7px;
margin-left: 40px;
margin-left: 16px;
.contributorIcon {
position: relative;
display: inline-block;
vertical-align: middle;
border-radius: 16px;
margin: 5px;
top: 8px;
margin: 5px 5px 5px 0;
top: 11px;
left: 0;
border-radius: 16px;
}
span {
@ -246,52 +259,34 @@
}
.contributorName {
display: none;
position: absolute;
background: black;
text-align: center;
color: white;
border-radius: 2px;
font-family: din-regular;
line-height: 15px;
font-size: 12px;
padding: 3px 5px 2px;
margin-top: 20px;
display: inline-block;
vertical-align: middle;
width: 97px;
padding: 0 8px 0 4px;
white-space: nowrap;
margin-top: 8px;
&:before {
content: '';
position: absolute;
top: 26px;
left: 10px;
margin-top: -30px;
width: 0;
height: 0;
border-bottom: 4px solid #000000;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
}
}
&:hover .contributorName {
display: block;
overflow: hidden;
text-overflow: ellipsis;
}
}
.mapCount {
padding:17px 0 17px 36px;
margin-left: 12px;
padding:17px 38px 17px 0;
width: 22px;
text-align: right;
.mapCountIcon {
position: absolute;
top: 8px;
left: 0;
right: 0;
width: 32px;
height: 32px;
background-image: url(<%= asset_data_uri('map32_sprite.png') %>);
background-repeat: no-repeat;
background-position: 0 0;
cursor: pointer;
opacity: 0.6;
}
&:hover .mapCountIcon {
@ -300,18 +295,18 @@
.tip, .hoverTip {
top: 44px;
left: 0px;
right: 0px;
font-size: 12px !important;
&:before {
content: '';
position: absolute;
top: 26px;
left: 10px;
right: 10px;
margin-top: -30px;
width: 0;
height: 0;
border-bottom: 4px solid #000000;
border-bottom: 4px solid #8A8A8A;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
}
@ -321,10 +316,9 @@
white-space: nowrap;
font-family: 'din-regular';
top: 44px;
left: 0px;
font-size: 12px !important;
position: absolute;
background: black;
background: #8A8A8A;
color: white;
border-radius: 4px;
line-height: 17px;
@ -356,28 +350,31 @@
}
.synapseCount {
margin-left: 26px;
width: 24px;
padding:17px 0 17px 32px;
width: 22px;
padding:17px 38px 17px 0;
text-align: right;
margin-right: 4px;
.synapseCountIcon {
position: absolute;
top: 8px;
left: 0;
right: 0;
width: 32px;
height: 32px;
background-image: url(<%= asset_data_uri('synapse32_sprite.png') %>);
background-repeat: no-repeat;
background-position: 0 0;
opacity: 0.6;
}
hover .synapseCountIcon {
background-position: 0 -32px;
}
.tip {
position: absolute;
background: black;
background: #8A8A8A;
width: auto;
top: 44px;
right: 0px;
color: white;
white-space: nowrap;
border-radius: 2px;
@ -392,10 +389,10 @@
content: '';
position: absolute;
margin-top: -8px;
margin-left: 6px;
right: 12px;
width: 0;
height: 0;
border-bottom: 4px solid black;
border-bottom: 4px solid #8A8A8A;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
}
@ -407,6 +404,10 @@
color: #4FC059;
}
.linkItem.mapPerm {
margin-right: 8px;
}
.mapPerm {
width: 32px;
height: 32px;
@ -428,14 +429,10 @@
}
.yourTopic .mapPerm:hover, .yourEdge .mapPerm:hover {
background-image: url(<%= asset_data_uri('arrowperms_sprite.png') %>);
background-position: -32px 0;
cursor:pointer;
}
.yourTopic .mapPerm.minimize, .yourEdge .mapPerm.minimize {
background-image: url(<%= asset_data_uri('arrowperms_sprite.png') %>) !important;
background-position: 0 0;
cursor: pointer;
cursor: pointer;
}
.mapPerm .permissionSelect {
list-style: none;
@ -474,23 +471,31 @@ cursor: pointer;
font-family: 'din-regular';
line-height: 24px;
height: 26px;
font-size: 24px;
padding: 13px 24px 9px 25px;
font-size: 18px;
padding: 13px 24px 9px 24px;
color: #424242;
width: 120px;
max-width: 120px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.permission.canEdit .metacodeTitle {
cursor:pointer;
}
.permission.canEdit .expandMetacodeSelect {
position: absolute;
top: 18px;
right: 4px;
position: relative;
top: 2px;
left: 4px;
width: 16px;
height: 16px;
background-image: url(<%= asset_data_uri('arrowright_sprite.png') %>);
background-repeat: no-repeat;
background-position: 0 -32px;
display: inline-block;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.permission.canEdit .minimize .expandMetacodeSelect {
@ -507,8 +512,8 @@ cursor: pointer;
background: #EAEAEA;
white-space: nowrap;
position: absolute;
left: 300px;
top: -1px;
top: 48px;
box-shadow: 2px 2px 2px rgba(125, 125, 125, 0.23), -2px -1px 3px rgba(125, 125, 125, 0.16);
}
.CardOnGraph .metacodeSelect ul {
position: relative;
@ -601,9 +606,9 @@ background-color: #E0E0E0;
}
.CardOnGraph .tip {
position: absolute;
background: black;
background: #8A8A8A;
top: 35px;
left: 0;
right: 0;
color: white;
border-radius: 4px;
font-size:15px !important;
@ -682,9 +687,9 @@ background-color: #E0E0E0;
}
#addLinkInput input{
padding: 9px 7px 9px 31px;
padding: 9px 27px 9px 31px;
height: 12px;
width: 198px;
width: 210px;
margin: 0 0 0 0;
border: none;
outline: none;

View file

@ -35,7 +35,7 @@ const Map = Backbone.Model.extend({
}
},
isFollowedBy: function(mapper) {
return mapper.get('follows') && mapper.get('follows').maps.indexOf(this.get('id')) > -1
return mapper && mapper.get('follows') && mapper.get('follows').maps.indexOf(this.get('id')) > -1
},
getUser: function() {
return Mapper.get(this.get('user_id'))

View file

@ -48,7 +48,7 @@ const Topic = Backbone.Model.extend({
else return false
},
isFollowedBy: function(mapper) {
return mapper.get('follows') && mapper.get('follows').topics.indexOf(this.get('id')) > -1
return mapper && mapper.get('follows') && mapper.get('follows').topics.indexOf(this.get('id')) > -1
},
getDate: function() {},
getMetacode: function() {

View file

@ -12,6 +12,7 @@ import React, { PropTypes, Component } from 'react'
class MetacodeSelect extends Component {
render = () => {
if (!this.props.metacodeSets) return null
return (
<div id="metacodeOptions">
<ul>

View file

@ -25,7 +25,7 @@ class MdTextArea extends RIETextArea {
class Desc extends Component {
render = () => {
const descHTML = (!this.props.desc && this.props.authorizedToEdit)
? '<p>Click to add description...</p>'
? '<p class="emptyDesc">Edit the description...</p>'
: Util.mdToHTML(this.props.desc)
if (this.props.authorizedToEdit) {

View file

@ -2,16 +2,17 @@ import React, { PropTypes, Component } from 'react'
class Follow extends Component {
render = () => {
const { isFollowing, onTopicFollow } = this.props
return <div className='topicFollow' onClick={onTopicFollow}>
{isFollowing ? 'Unfollow' : 'Follow'}
const { ActiveMapper, isFollowing, onTopicFollow } = this.props
return <div className='topicFollow' onClick={() => ActiveMapper && onTopicFollow()}>
{ActiveMapper ? isFollowing ? 'Unfollow' : 'Follow' : ''}
</div>
}
}
Follow.propTypes = {
isFollowing: PropTypes.bool,
onTopicFollow: PropTypes.func
onTopicFollow: PropTypes.func,
ActiveMapper: PropTypes.object
}
export default Follow

View file

@ -0,0 +1,104 @@
/* global $ */
import React, { PropTypes, Component } from 'react'
import { Link } from 'react-router'
class Info 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 = () => {
const { topic } = this.props
return (
<div className="info">
<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>
<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="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>
<div className="clearfloat"></div>
</div>
)
}
}
Info.propTypes = {
topic: PropTypes.object, // backbone object
}
export default Info

View file

@ -26,9 +26,7 @@ class Links extends Component {
}
handleMetacodeBarClick = () => {
if (this.state.showMetacodeTitle) {
this.setState({ showMetacodeSelect: !this.state.showMetacodeSelect })
}
this.setState({ showMetacodeSelect: !this.state.showMetacodeSelect })
}
render = () => {
@ -41,17 +39,16 @@ class Links extends Component {
return (
<div className="links">
<div className="linkItem icon metacodeItem"
onClick={() => authorizedToEdit && this.handleMetacodeBarClick()}
>
<div className={`metacodeTitle mbg${metacode.get('id')}`}>
<div className="linkItem icon metacodeItem">
<div className={`metacodeTitle mbg${metacode.get('id')}`}
onClick={() => authorizedToEdit && this.handleMetacodeBarClick()}
>
{metacode.get('name')}
<div className="expandMetacodeSelect"/>
</div>
<div className="metacodeImage"
style={{backgroundImage: `url(${metacode.get('icon')})`}}
title="click and drag to move card"
onMouseEnter={() => this.setState({ showMetacodeTitle: true })}
/>
<div className="metacodeSelect"
style={{ display: this.state.showMetacodeSelect ? 'block' : 'none' }}
@ -59,12 +56,12 @@ class Links extends Component {
<MetacodeSelect onMetacodeSelect={this.handleMetacodeSelect} metacodeSets={this.props.metacodeSets} />
</div>
</div>
<Follow ActiveMapper={ActiveMapper} isFollowing={isFollowing} onTopicFollow={wrappedTopicFollow} />
<Permission
permission={topic.get('permission')}
authorizedToEdit={authorizedPermissionChange}
updateTopic={this.props.updateTopic}
/>
<Follow isFollowing={isFollowing} onTopicFollow={wrappedTopicFollow} />
<div className="clearfloat"></div>
</div>
)

View file

@ -5,62 +5,9 @@ import Title from './Title'
import Links from './Links'
import Desc from './Desc'
import Attachments from './Attachments'
import Follow from './Follow'
import Info from './Info'
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 = () => {
const { currentUser, onTopicFollow, updateTopic } = this.props
@ -89,6 +36,7 @@ class ReactTopicCard extends Component {
<div className={classname}>
<div className={`CardOnGraph ${hasAttachment ? 'hasAttachment' : ''}`} id={`topic_${topic.id}`}>
<Links topic={topic}
onTopicFollow={onTopicFollow}
ActiveMapper={this.props.currentUser}
updateTopic={wrappedUpdateTopic}
metacodeSets={this.props.metacodeSets}
@ -106,34 +54,7 @@ class ReactTopicCard extends Component {
authorizedToEdit={authorizedToEdit}
updateTopic={wrappedUpdateTopic}
/>
<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>
<Info topic={topic} />
<div className="clearfloat"></div>
</div>
</div>