topic card re-org

2017-09-08 16:58:17 -04:00 · 2017-09-08 16:58:17 -04:00 · 9ab7e7e170
parent 8af66b1b2c
commit 9ab7e7e170
6 changed files with 105 additions and 111 deletions
--- a/.gitignore
+++ b/.gitignore
@ -15,6 +15,7 @@ app/assets/javascripts/webpacked

 #secrets and config
 .env
+*.swp

 # Ignore bundler config
 .bundle
--- 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;
 }
--- 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 {
--- 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 %>
-</style>
+</style>
--- 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(<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')}`}
-            style={{ display: this.state.showMetacodeTitle ? 'block' : 'none' }}
-          >
+          <div className={`metacodeTitle mbg${metacode.get('id')}`}>
            {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 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>
+        </div>  
        <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({
--- 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(<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,