From 9ab7e7e17003581f5f8d2d2f73dd60356434c418 Mon Sep 17 00:00:00 2001 From: Connor Turland Date: Fri, 8 Sep 2017 16:58:17 -0400 Subject: [PATCH] topic card re-org --- .gitignore | 1 + app/assets/stylesheets/application.scss.erb | 3 - app/assets/stylesheets/base.scss.erb | 25 ++---- app/views/shared/_metacodeBgColors.html.erb | 4 +- frontend/src/components/TopicCard/Links.js | 91 ++------------------ frontend/src/components/TopicCard/index.js | 92 +++++++++++++++++++-- 6 files changed, 105 insertions(+), 111 deletions(-) diff --git a/.gitignore b/.gitignore index de3cc231..91b6ef85 100644 --- a/.gitignore +++ b/.gitignore @@ -15,6 +15,7 @@ app/assets/javascripts/webpacked #secrets and config .env +*.swp # Ignore bundler config .bundle diff --git a/app/assets/stylesheets/application.scss.erb b/app/assets/stylesheets/application.scss.erb index 52b0fc29..cdf74866 100644 --- a/app/assets/stylesheets/application.scss.erb +++ b/app/assets/stylesheets/application.scss.erb @@ -3150,11 +3150,8 @@ script.data-gratipay-username { } .topicFollow { - text-align: center; height: 48px; line-height: 48px; - border-top: 1px solid #BDBDBD; - background: #FFF; cursor: pointer; font-family: din-regular; } diff --git a/app/assets/stylesheets/base.scss.erb b/app/assets/stylesheets/base.scss.erb index fd2349a7..0341a9a1 100644 --- a/app/assets/stylesheets/base.scss.erb +++ b/app/assets/stylesheets/base.scss.erb @@ -42,7 +42,7 @@ z-index:2; color: #424242; 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 { @@ -195,9 +195,6 @@ .CardOnGraph .links { position: relative; - border-bottom: 1px solid #BDBDBD; - border-top: 1px solid #BDBDBD; - background-color: #e0e0e0; .linkItem { float: left; @@ -213,15 +210,12 @@ } .icon { - position: absolute; - z-index: 1; padding: 0; height: 48px; - width: 100%; .metacodeImage { cursor: move; - position: relative; + position: absolute; left: -23px; top: 1px; width: 46px; @@ -477,17 +471,11 @@ cursor: pointer; } .CardOnGraph .metacodeTitle { - font-style: italic; - font-family: 'vinyl'; - text-transform: uppercase; - position: absolute; + font-family: 'din-regular'; line-height: 24px; height: 26px; font-size: 24px; - display: none; - width: 90%; - padding: 13px 0 9px 10%; - background-color: #E0E0E0; + padding: 13px 24px 9px 25px; color: #424242; } .permission.canEdit .metacodeTitle { @@ -496,8 +484,8 @@ cursor: pointer; .permission.canEdit .expandMetacodeSelect { position: absolute; - top: 16px; - right: 16px; + top: 18px; + right: 4px; width: 16px; height: 16px; background-image: url(<%= asset_data_uri('arrowright_sprite.png') %>); @@ -633,7 +621,6 @@ background-color: #E0E0E0; width:100%; height:47px; position: relative; - border-top: 1px solid #BDBDBD; } .link-adder a { diff --git a/app/views/shared/_metacodeBgColors.html.erb b/app/views/shared/_metacodeBgColors.html.erb index 09396a3b..0fcf86dc 100644 --- a/app/views/shared/_metacodeBgColors.html.erb +++ b/app/views/shared/_metacodeBgColors.html.erb @@ -2,8 +2,8 @@ <% Metacode.all.each do |m| %> <% if m.color %> <%= ".mbg" + m.id.to_s + "{" %> - <%= "background-color:" + m.color + " !important;" %> + <%= "color:" + m.color + " !important;" %> <%= "}" %> <% end %> <% end %> - \ No newline at end of file + diff --git a/frontend/src/components/TopicCard/Links.js b/frontend/src/components/TopicCard/Links.js index accf2bfa..88da7c33 100644 --- a/frontend/src/components/TopicCard/Links.js +++ b/frontend/src/components/TopicCard/Links.js @@ -5,18 +5,14 @@ import { Link } from 'react-router' import MetacodeSelect from '../MetacodeSelect' import Permission from './Permission' +import Follow from './Follow' class Links extends Component { constructor(props) { super(props) this.state = { - showMetacodeTitle: false, - showMetacodeSelect: false, - showInMaps: false, - showMoreMaps: false, - hoveringMapCount: false, - hoveringSynapseCount: false + showMetacodeSelect: false } } @@ -29,49 +25,6 @@ class Links extends Component { // 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(
  • {obj.mapName}
    • ) - }) - - if (extraLinks.length > 0) { - if (this.state.showMoreMaps) { - extraLinks.forEach(obj => { - output.push(
  • {obj.mapName}
    • ) - }) - } - const text = this.state.showMoreMaps ? 'See less...' : `See ${extraLinks.length} more...` - output.push(
  • {text}
    • ) - } - - return output - } - handleMetacodeBarClick = () => { if (this.state.showMetacodeTitle) { this.setState({ showMetacodeSelect: !this.state.showMetacodeSelect }) @@ -79,21 +32,19 @@ class Links extends Component { } render = () => { - const { topic, ActiveMapper } = this.props + const { topic, onTopicFollow, ActiveMapper } = this.props const authorizedToEdit = topic.authorizeToEdit(ActiveMapper) const authorizedPermissionChange = topic.authorizePermissionChange(ActiveMapper) const metacode = topic.getMetacode() + const wrappedTopicFollow = () => onTopicFollow(topic) + const isFollowing = topic.isFollowedBy(ActiveMapper) return (
    this.setState({ showMetacodeTitle: false, showMetacodeSelect: false })} onClick={() => authorizedToEdit && this.handleMetacodeBarClick()} > -
    +
    {metacode.get('name')}
    @@ -107,38 +58,13 @@ class Links extends Component { >
    -
    -
    - -
    {topic.get('user_name')}
    -
    -
    -
    - {topic.get('map_count').toString()} - {!this.state.showInMaps && this.state.hoveringMapCount && ( -
    Click to see which maps topic appears on
    - )} - {this.state.showInMaps &&
      {this.inMaps(topic)}
    } -
    - -
    - {topic.get('synapse_count').toString()} - {this.state.hoveringSynapseCount &&
    Click to see this topics synapses
    } -     +
    +
    ) @@ -149,6 +75,7 @@ Links.propTypes = { topic: PropTypes.object, // backbone object ActiveMapper: PropTypes.object, updateTopic: PropTypes.func, + onTopicFollow: PropTypes.func, metacodeSets: PropTypes.arrayOf(PropTypes.shape({ name: PropTypes.string, metacodes: PropTypes.arrayOf(PropTypes.shape({ diff --git a/frontend/src/components/TopicCard/index.js b/frontend/src/components/TopicCard/index.js index 0ed56224..2dc87e95 100644 --- a/frontend/src/components/TopicCard/index.js +++ b/frontend/src/components/TopicCard/index.js @@ -8,6 +8,60 @@ import Attachments from './Attachments' import Follow from './Follow' 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(
  • {obj.mapName}
    • ) + }) + + if (extraLinks.length > 0) { + if (this.state.showMoreMaps) { + extraLinks.forEach(obj => { + output.push(
  • {obj.mapName}
    • ) + }) + } + const text = this.state.showMoreMaps ? 'See less...' : `See ${extraLinks.length} more...` + output.push(
  • {text}
    • ) + } + + return output + } + render = () => { const { currentUser, onTopicFollow, updateTopic } = this.props const topic = this.props.openTopic @@ -34,16 +88,16 @@ class ReactTopicCard extends Component {
    - <Links topic={topic} ActiveMapper={this.props.currentUser} updateTopic={wrappedUpdateTopic} metacodeSets={this.props.metacodeSets} redrawCanvas={this.props.redrawCanvas} /> + <Title name={topic.get('name')} + authorizedToEdit={authorizedToEdit} + onChange={wrappedUpdateTopic} + /> <Desc desc={topic.get('desc')} authorizedToEdit={authorizedToEdit} onChange={wrappedUpdateTopic} @@ -52,7 +106,34 @@ class ReactTopicCard extends Component { authorizedToEdit={authorizedToEdit} 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> </div> @@ -62,6 +143,7 @@ class ReactTopicCard extends Component { } } +// ReactTopicCard.propTypes = { openTopic: PropTypes.object, currentUser: PropTypes.object,