topic card re-org

.gitignore

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

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

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: 'din-regular';
-  font-family: 'vinyl';
-  text-transform: uppercase;
-  position: absolute;
   line-height: 24px;
   height: 26px;
   font-size: 24px;
-  display: none;
+  padding: 13px 24px 9px 25px;
-  width: 90%;
-  padding: 13px 0 9px 10%;
-  background-color: #E0E0E0;
   color: #424242;
 }
 .permission.canEdit .metacodeTitle {
@@ -496,8 +484,8 @@ cursor: pointer;
 
 .permission.canEdit .expandMetacodeSelect {
   position: absolute;
-  top: 16px;
+  top: 18px;
-  right: 16px;
+  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 {

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 %>
-</style>
+</style>

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
-      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
   }
 
-  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 = () => {
     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 (
       <div className="links">
         <div className="linkItem icon metacodeItem"
-          style={{ zIndex: this.state.showMetacodeTitle ? 4 : 1 }}
-          onMouseLeave={() => this.setState({ showMetacodeTitle: false, showMetacodeSelect: false })}
           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')}
             <div className="expandMetacodeSelect"/>
           </div>
@@ -107,38 +58,13 @@ class Links extends Component {
           >
             <MetacodeSelect onMetacodeSelect={this.handleMetacodeSelect} metacodeSets={this.props.metacodeSets} />
           </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={topic.get('permission')}
           authorizedToEdit={authorizedPermissionChange}
           updateTopic={this.props.updateTopic}
         />
+        <Follow isFollowing={isFollowing} onTopicFollow={wrappedTopicFollow} />
         <div className="clearfloat"></div>
       </div>
     )
@@ -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({

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(<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
     const topic = this.props.openTopic
@@ -34,16 +88,16 @@ class ReactTopicCard extends Component {
         <div className="showcard mapElement mapElementHidden">
           <div className={classname}>
             <div className={`CardOnGraph ${hasAttachment ? 'hasAttachment' : ''}`} id={`topic_${topic.id}`}>
-              <Title name={topic.get('name')}
-                authorizedToEdit={authorizedToEdit}
-                onChange={wrappedUpdateTopic}
-              />
               <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,