From 9ab7e7e17003581f5f8d2d2f73dd60356434c418 Mon Sep 17 00:00:00 2001 From: Connor Turland Date: Fri, 8 Sep 2017 16:58:17 -0400 Subject: [PATCH 1/7] 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, From ec3e09c57868cfbfabb81cfbb72220b0936ddc25 Mon Sep 17 00:00:00 2001 From: Connor Turland <connorturland@gmail.com> Date: Sun, 10 Sep 2017 17:17:56 -0400 Subject: [PATCH 2/7] topic card design changes --- app/assets/stylesheets/application.scss.erb | 13 +- app/assets/stylesheets/base.scss.erb | 169 ++++++++++---------- frontend/src/Metamaps/DataModel/Map.js | 2 +- frontend/src/Metamaps/DataModel/Topic.js | 2 +- frontend/src/components/MetacodeSelect.js | 1 + frontend/src/components/TopicCard/Desc.js | 2 +- frontend/src/components/TopicCard/Follow.js | 9 +- frontend/src/components/TopicCard/Info.js | 104 ++++++++++++ frontend/src/components/TopicCard/Links.js | 15 +- frontend/src/components/TopicCard/index.js | 85 +--------- 10 files changed, 219 insertions(+), 183 deletions(-) create mode 100644 frontend/src/components/TopicCard/Info.js diff --git a/app/assets/stylesheets/application.scss.erb b/app/assets/stylesheets/application.scss.erb index cdf74866..f0c3bd5a 100644 --- a/app/assets/stylesheets/application.scss.erb +++ b/app/assets/stylesheets/application.scss.erb @@ -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; } diff --git a/app/assets/stylesheets/base.scss.erb b/app/assets/stylesheets/base.scss.erb index 0341a9a1..c4c7ab7c 100644 --- a/app/assets/stylesheets/base.scss.erb +++ b/app/assets/stylesheets/base.scss.erb @@ -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; diff --git a/frontend/src/Metamaps/DataModel/Map.js b/frontend/src/Metamaps/DataModel/Map.js index b64f9f89..1f618763 100644 --- a/frontend/src/Metamaps/DataModel/Map.js +++ b/frontend/src/Metamaps/DataModel/Map.js @@ -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')) diff --git a/frontend/src/Metamaps/DataModel/Topic.js b/frontend/src/Metamaps/DataModel/Topic.js index 29c271d4..6ce59d6e 100644 --- a/frontend/src/Metamaps/DataModel/Topic.js +++ b/frontend/src/Metamaps/DataModel/Topic.js @@ -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() { diff --git a/frontend/src/components/MetacodeSelect.js b/frontend/src/components/MetacodeSelect.js index 68da09e8..d9c61ed6 100644 --- a/frontend/src/components/MetacodeSelect.js +++ b/frontend/src/components/MetacodeSelect.js @@ -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> diff --git a/frontend/src/components/TopicCard/Desc.js b/frontend/src/components/TopicCard/Desc.js index c94f30fb..f9c8750e 100644 --- a/frontend/src/components/TopicCard/Desc.js +++ b/frontend/src/components/TopicCard/Desc.js @@ -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) { diff --git a/frontend/src/components/TopicCard/Follow.js b/frontend/src/components/TopicCard/Follow.js index 653d8b18..67b5a89c 100644 --- a/frontend/src/components/TopicCard/Follow.js +++ b/frontend/src/components/TopicCard/Follow.js @@ -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 diff --git a/frontend/src/components/TopicCard/Info.js b/frontend/src/components/TopicCard/Info.js new file mode 100644 index 00000000..5803df65 --- /dev/null +++ b/frontend/src/components/TopicCard/Info.js @@ -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 diff --git a/frontend/src/components/TopicCard/Links.js b/frontend/src/components/TopicCard/Links.js index 88da7c33..b3dbba22 100644 --- a/frontend/src/components/TopicCard/Links.js +++ b/frontend/src/components/TopicCard/Links.js @@ -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> ) diff --git a/frontend/src/components/TopicCard/index.js b/frontend/src/components/TopicCard/index.js index 2dc87e95..f7a52133 100644 --- a/frontend/src/components/TopicCard/index.js +++ b/frontend/src/components/TopicCard/index.js @@ -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> From 4cc420eb63a14f6dc3bddd06c8e09ac191209e12 Mon Sep 17 00:00:00 2001 From: Connor Turland <connorturland@gmail.com> Date: Sun, 10 Sep 2017 18:13:25 -0400 Subject: [PATCH 3/7] eslint fixes --- frontend/src/components/TopicCard/Info.js | 4 ++-- frontend/src/components/TopicCard/Links.js | 3 +-- frontend/src/components/TopicCard/index.js | 6 +----- 3 files changed, 4 insertions(+), 9 deletions(-) diff --git a/frontend/src/components/TopicCard/Info.js b/frontend/src/components/TopicCard/Info.js index 5803df65..03d5da89 100644 --- a/frontend/src/components/TopicCard/Info.js +++ b/frontend/src/components/TopicCard/Info.js @@ -31,7 +31,7 @@ class Info extends Component { let firstFiveLinks = [] let extraLinks = [] - for (let i = 0; i < inmapsArray.length; i ++) { + for (let i = 0; i < inmapsArray.length; i++) { if (i < 5) { firstFiveLinks.push({ mapName: inmapsArray[i], mapId: inmapsLinks[i] }) } else { @@ -98,7 +98,7 @@ class Info extends Component { } Info.propTypes = { - topic: PropTypes.object, // backbone object + topic: PropTypes.object // backbone object } export default Info diff --git a/frontend/src/components/TopicCard/Links.js b/frontend/src/components/TopicCard/Links.js index b3dbba22..e1f873ce 100644 --- a/frontend/src/components/TopicCard/Links.js +++ b/frontend/src/components/TopicCard/Links.js @@ -1,7 +1,6 @@ /* global $ */ import React, { PropTypes, Component } from 'react' -import { Link } from 'react-router' import MetacodeSelect from '../MetacodeSelect' import Permission from './Permission' @@ -55,7 +54,7 @@ class Links extends Component { > <MetacodeSelect onMetacodeSelect={this.handleMetacodeSelect} metacodeSets={this.props.metacodeSets} /> </div> - </div> + </div> <Follow ActiveMapper={ActiveMapper} isFollowing={isFollowing} onTopicFollow={wrappedTopicFollow} /> <Permission permission={topic.get('permission')} diff --git a/frontend/src/components/TopicCard/index.js b/frontend/src/components/TopicCard/index.js index f7a52133..23bb93ed 100644 --- a/frontend/src/components/TopicCard/index.js +++ b/frontend/src/components/TopicCard/index.js @@ -8,7 +8,6 @@ import Attachments from './Attachments' import Info from './Info' class ReactTopicCard extends Component { - render = () => { const { currentUser, onTopicFollow, updateTopic } = this.props const topic = this.props.openTopic @@ -16,10 +15,8 @@ class ReactTopicCard extends Component { if (!topic) return null const wrappedUpdateTopic = obj => updateTopic(topic, obj) - const wrappedTopicFollow = () => onTopicFollow(topic) const authorizedToEdit = topic.authorizeToEdit(currentUser) - const isFollowing = topic.isFollowedBy(currentUser) const hasAttachment = topic.get('link') && topic.get('link') !== '' let classname = 'permission' @@ -54,7 +51,7 @@ class ReactTopicCard extends Component { authorizedToEdit={authorizedToEdit} updateTopic={wrappedUpdateTopic} /> - <Info topic={topic} /> + <Info topic={topic} /> <div className="clearfloat"></div> </div> </div> @@ -64,7 +61,6 @@ class ReactTopicCard extends Component { } } -// ReactTopicCard.propTypes = { openTopic: PropTypes.object, currentUser: PropTypes.object, From 29bf2a23e8f937041c096fd5a73fe05fec890019 Mon Sep 17 00:00:00 2001 From: Connor Turland <connorturland@gmail.com> Date: Tue, 12 Sep 2017 17:01:08 -0400 Subject: [PATCH 4/7] review changes --- app/assets/images/arrowperms_sprite.png | Bin 543 -> 0 bytes app/assets/stylesheets/application.scss.erb | 4 ---- app/views/layouts/_foot.html.erb | 2 +- ...olors.html.erb => _metacodeCssColors.html.erb} | 3 ++- frontend/src/components/TopicCard/Follow.js | 14 ++++++++++++-- frontend/src/components/TopicCard/Info.js | 3 ++- frontend/src/components/TopicCard/Links.js | 2 +- frontend/src/components/TopicCard/index.js | 6 +++--- 8 files changed, 21 insertions(+), 13 deletions(-) delete mode 100644 app/assets/images/arrowperms_sprite.png rename app/views/shared/{_metacodeBgColors.html.erb => _metacodeCssColors.html.erb} (51%) diff --git a/app/assets/images/arrowperms_sprite.png b/app/assets/images/arrowperms_sprite.png deleted file mode 100644 index eff00341973b69fc75f27f31f32ecc4f0aed0132..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 543 zcmeAS@N?(olHy`uVBq!ia0vp^4nVBH!3HE3&8=$zQk(@Ik;M!Q+`=Ht$S`Y;1W-`2 z#5JNMI6tkVJh3R1!7(L2DOJHUH!(dmC^a#qvhZZ84Fdz?8c!F;kcwMxA|4ht8Hlin zYe-+=?GpA#Y`Dc)(tL@xfcb8NUw~}GYCna%1oI5_1@FJ^yH^>*!P!}Vs=EBXtLLYu zPfs6r=9#^W^O(%!geQtj9Slkh910N1Kx30mx5Rd@bL{4YKKV)vg6dadB!0Z9{>)vV zFJn=Zl_l$*@msGUSd&A4?K<7~^{ZZ;p3I<X>RnT-{AAgk6NT<G{-0gGQ#+kqpzutW zmYMv6s9r<6N58I2d*J6Yw|MJMv+D+o9W(s@y6m{l^LU@|v0caf4*qq#BkgPZ$nt&5 zZaKZr(G2RR%4z~i_B*`|+W2DT2Bp_m`$`u~mp-Q<+Wxt>@Gy&mpeB#d45h}MN{s8c zrH`vK7Tas?y56$l@w7Y2?zwkgh%|`VX_$T4tuaw-T9a(1-=heT-8-1YFP54vh&^M+ z*&jRm`GG~8GK(H>;wvydA86e3J4yPuFHiRcu_NrwF4;~z)!)Pvy#@6OF6}xzle7Qh zSMLILYg^&Wyx%qL!D$73;*279(i4^yFEiW0R-)*8+2i_ud4W^=4}CJzKnltO9*^A{ a7#T!w7q91RJYEWnTn0~9KbLh*2~7a^EY{Tk diff --git a/app/assets/stylesheets/application.scss.erb b/app/assets/stylesheets/application.scss.erb index f0c3bd5a..15eacb3a 100644 --- a/app/assets/stylesheets/application.scss.erb +++ b/app/assets/stylesheets/application.scss.erb @@ -1914,14 +1914,10 @@ input.collaboratorSearchField { background-position: -32px 0; } .yourMap .mapPermission:hover { - background-image: url(<%= asset_data_uri('arrowperms_sprite.png') %>); cursor: pointer; - background-position: -32px 0; } .yourMap .mapPermission.minimize { - background-image: url(<%= asset_data_uri('arrowperms_sprite.png') %>) !important; cursor: pointer; - background-position: 0 0; } .mapInfoBox .mapPermission .permissionSelect { list-style: none; diff --git a/app/views/layouts/_foot.html.erb b/app/views/layouts/_foot.html.erb index fd35e765..bc3d4223 100644 --- a/app/views/layouts/_foot.html.erb +++ b/app/views/layouts/_foot.html.erb @@ -15,7 +15,7 @@ </script> <%= render :partial => 'layouts/lightboxes' %> <%= render :partial => 'layouts/templates' %> -<%= render :partial => 'shared/metacodeBgColors' %> +<%= render :partial => 'shared/metacodeCssColors' %> <%= render :partial => 'layouts/googleanalytics' if ENV["GA_TRACKING_CODE"].present? %> </body> </html> diff --git a/app/views/shared/_metacodeBgColors.html.erb b/app/views/shared/_metacodeCssColors.html.erb similarity index 51% rename from app/views/shared/_metacodeBgColors.html.erb rename to app/views/shared/_metacodeCssColors.html.erb index 0fcf86dc..5ef6119e 100644 --- a/app/views/shared/_metacodeBgColors.html.erb +++ b/app/views/shared/_metacodeCssColors.html.erb @@ -1,7 +1,8 @@ <style> +<% # give text the color of the metacode by adding the class .metacodeColor{metacode-id} %> <% Metacode.all.each do |m| %> <% if m.color %> - <%= ".mbg" + m.id.to_s + "{" %> + <%= ".metacodeColor" + m.id.to_s + "{" %> <%= "color:" + m.color + " !important;" %> <%= "}" %> <% end %> diff --git a/frontend/src/components/TopicCard/Follow.js b/frontend/src/components/TopicCard/Follow.js index 509855e8..1aec6525 100644 --- a/frontend/src/components/TopicCard/Follow.js +++ b/frontend/src/components/TopicCard/Follow.js @@ -4,8 +4,18 @@ import PropTypes from 'prop-types' class Follow extends Component { render = () => { const { ActiveMapper, isFollowing, onTopicFollow } = this.props - return <div className='topicFollow' onClick={() => ActiveMapper && onTopicFollow()}> - {ActiveMapper ? isFollowing ? 'Unfollow' : 'Follow' : ''} + function onClick () { + if (ActiveMapper) { + onTopicFollow() + } + } + let innerValue + // only display either option if there is a user signed in + if (ActiveMapper) { + innerValue = isFollowing ? 'Unfollow' : 'Follow' + } + return <div className='topicFollow' onClick={onClick}> + {innerValue} </div> } } diff --git a/frontend/src/components/TopicCard/Info.js b/frontend/src/components/TopicCard/Info.js index 03d5da89..22c51189 100644 --- a/frontend/src/components/TopicCard/Info.js +++ b/frontend/src/components/TopicCard/Info.js @@ -1,6 +1,7 @@ /* global $ */ -import React, { PropTypes, Component } from 'react' +import React, { Component } from 'react' +import PropTypes from 'prop-types' import { Link } from 'react-router' class Info extends Component { diff --git a/frontend/src/components/TopicCard/Links.js b/frontend/src/components/TopicCard/Links.js index d245e945..1c822c34 100644 --- a/frontend/src/components/TopicCard/Links.js +++ b/frontend/src/components/TopicCard/Links.js @@ -40,7 +40,7 @@ class Links extends Component { return ( <div className="links"> <div className="linkItem icon metacodeItem"> - <div className={`metacodeTitle mbg${metacode.get('id')}`} + <div className={`metacodeTitle metacodeColor${metacode.get('id')}`} onClick={() => authorizedToEdit && this.handleMetacodeBarClick()} > {metacode.get('name')} diff --git a/frontend/src/components/TopicCard/index.js b/frontend/src/components/TopicCard/index.js index 7a6723f4..69ffa4e7 100644 --- a/frontend/src/components/TopicCard/index.js +++ b/frontend/src/components/TopicCard/index.js @@ -29,8 +29,8 @@ class ReactTopicCard extends Component { if (topic.authorizePermissionChange(currentUser)) classname += ' yourTopic' return ( - <Draggable handle=".metacodeImage" defaultPosition={{x: 100, y: 100}}> - <div className="showcard mapElement mapElementHidden"> + <Draggable handle='.metacodeImage' defaultPosition={{x: 100, y: 100}}> + <div className='showcard mapElement mapElementHidden'> <div className={classname}> <div className={`CardOnGraph ${hasAttachment ? 'hasAttachment' : ''}`} id={`topic_${topic.id}`}> <Links topic={topic} @@ -53,7 +53,7 @@ class ReactTopicCard extends Component { updateTopic={wrappedUpdateTopic} /> <Info topic={topic} /> - <div className="clearfloat"></div> + <div className='clearfloat' /> </div> </div> </div> From 21518c86964d141815337531d306a6049ea8f661 Mon Sep 17 00:00:00 2001 From: Connor Turland <connorturland@gmail.com> Date: Tue, 12 Sep 2017 17:07:57 -0400 Subject: [PATCH 5/7] revert react router update and webpack config --- package.json | 2 +- webpack.config.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index 1dde78ad..f0afc5f7 100644 --- a/package.json +++ b/package.json @@ -48,7 +48,7 @@ "react-draggable": "3.0.3", "react-dropzone": "4.1.2", "react-onclickoutside": "6.5.0", - "react-router": "4.2.0", + "react-router": "3.0.5", "redux": "3.7.2", "riek": "1.1.0", "simplewebrtc": "2.2.2", diff --git a/webpack.config.js b/webpack.config.js index d55d151f..b24e1513 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -47,7 +47,7 @@ module.exports = { 'metamaps.bundle': './frontend/src/index.js' }, output: { - path: './app/assets/javascripts/webpacked', + path: __dirname + '/app/assets/javascripts/webpacked', filename: '[name].js', devtoolModuleFilenameTemplate: '[absolute-resource-path]' } From 672b4561930df8d34813bb8c8fe9633ea376e267 Mon Sep 17 00:00:00 2001 From: Connor Turland <connorturland@gmail.com> Date: Tue, 12 Sep 2017 21:37:49 -0400 Subject: [PATCH 6/7] add markdown clarifications --- app/assets/stylesheets/base.scss.erb | 5 +++++ frontend/src/components/TopicCard/Desc.js | 3 ++- 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/app/assets/stylesheets/base.scss.erb b/app/assets/stylesheets/base.scss.erb index c4c7ab7c..40884078 100644 --- a/app/assets/stylesheets/base.scss.erb +++ b/app/assets/stylesheets/base.scss.erb @@ -120,6 +120,11 @@ p.emptyDesc { color: rgba(66, 66, 66, 0.6); } + + a.mdSupport { + color: #4fb5c0; + font-size: 11px; + } } .CardOnGraph.hasAttachment .scroll { height: auto; diff --git a/frontend/src/components/TopicCard/Desc.js b/frontend/src/components/TopicCard/Desc.js index 99e342cd..9529cbfe 100644 --- a/frontend/src/components/TopicCard/Desc.js +++ b/frontend/src/components/TopicCard/Desc.js @@ -26,7 +26,7 @@ class MdTextArea extends RIETextArea { class Desc extends Component { render = () => { const descHTML = (!this.props.desc && this.props.authorizedToEdit) - ? '<p class="emptyDesc">Edit the description...</p>' + ? '<p class="emptyDesc">Edit the description... (supports markdown)</p>' : Util.mdToHTML(this.props.desc) if (this.props.authorizedToEdit) { @@ -51,6 +51,7 @@ class Desc extends Component { dangerouslySetInnerHTML: { __html: descHTML } }} /> + <a className="mdSupport" href="http://commonmark.org/help/" target="_blank">learn markdown</a> <div className="clearfloat"></div> </div> </div> From 1174123b60718e0fcc40fa0473548f4f76e4356e Mon Sep 17 00:00:00 2001 From: Connor Turland <connorturland@gmail.com> Date: Wed, 13 Sep 2017 10:31:48 -0400 Subject: [PATCH 7/7] use scss vars and font fallbacks --- app/assets/stylesheets/application.scss.erb | 2 +- app/assets/stylesheets/base.scss.erb | 23 ++++++++++++--------- 2 files changed, 14 insertions(+), 11 deletions(-) diff --git a/app/assets/stylesheets/application.scss.erb b/app/assets/stylesheets/application.scss.erb index 15eacb3a..d255b652 100644 --- a/app/assets/stylesheets/application.scss.erb +++ b/app/assets/stylesheets/application.scss.erb @@ -3149,7 +3149,7 @@ script.data-gratipay-username { height: 24px; line-height: 24px; cursor: pointer; - font-family: helvetica; + font-family: helvetica, sans-serif; float: left; width: 72px; text-align: right; diff --git a/app/assets/stylesheets/base.scss.erb b/app/assets/stylesheets/base.scss.erb index 40884078..6415d535 100644 --- a/app/assets/stylesheets/base.scss.erb +++ b/app/assets/stylesheets/base.scss.erb @@ -1,9 +1,12 @@ +$mid-gray: #8A8A8A; +$mid-gray-opacity: rgba(66, 66, 66, 0.6); + .nameCounter { position: absolute; bottom: 1px; right: 2px; font-size: 11px; - font-family: helvetica; + font-family: helvetica, sans-serif; color: #727272; line-height: 11px; display: none; @@ -118,7 +121,7 @@ overflow-y: auto; p.emptyDesc { - color: rgba(66, 66, 66, 0.6); + color: $mid-gray-opacity; } a.mdSupport { @@ -235,15 +238,15 @@ float: left; z-index: 1; position: relative; - color: rgba(66, 66, 66, 0.6); + color: $mid-gray-opacity; font-size: 14px; line-height: 14px; a { - color: rgba(66, 66, 66, 0.6); + color: $mid-gray-opacity; } } - + .contributor { bottom: 7px; margin-left: 16px; @@ -311,7 +314,7 @@ margin-top: -30px; width: 0; height: 0; - border-bottom: 4px solid #8A8A8A; + border-bottom: 4px solid $mid-gray; border-left: 5px solid transparent; border-right: 5px solid transparent; } @@ -323,7 +326,7 @@ top: 44px; font-size: 12px !important; position: absolute; - background: #8A8A8A; + background: $mid-gray; color: white; border-radius: 4px; line-height: 17px; @@ -376,7 +379,7 @@ } .tip { position: absolute; - background: #8A8A8A; + background: $mid-gray; width: auto; top: 44px; right: 0px; @@ -397,7 +400,7 @@ right: 12px; width: 0; height: 0; - border-bottom: 4px solid #8A8A8A; + border-bottom: 4px solid $mid-gray; border-left: 5px solid transparent; border-right: 5px solid transparent; } @@ -611,7 +614,7 @@ background-color: #E0E0E0; } .CardOnGraph .tip { position: absolute; - background: #8A8A8A; + background: $mid-gray; top: 35px; right: 0; color: white;