Add "Add" button for tags in "Used recently" and "Popular" (#430)

Lokiedu · Aug 7, 2016 · 0fbef5b · 0fbef5b
1 parent 12e8c4c
commit 0fbef5b
Show file tree

Hide file tree

Showing 6 changed files with 23 additions and 9 deletions.
diff --git a/src/components/add-tag-modal/form/geotag/index.js b/src/components/add-tag-modal/form/geotag/index.js
@@ -111,6 +111,7 @@ export default class AddGeotagForm extends Component {
               Used recently:
               <div className="layout__row">
                 <TagCloud
+                  addable
                   geotags={this.props.userRecentGeotags}
                   onClick={this._selectRecentlyUsedGeotag}
                 />
@@ -121,6 +122,7 @@ export default class AddGeotagForm extends Component {
               Popular:
               <div className="layout__row">
                 <TagCloud
+                  addable
                   geotags={popularGeotags}
                 />
               </div>

diff --git a/src/components/add-tag-modal/form/hashtag/index.js b/src/components/add-tag-modal/form/hashtag/index.js
@@ -106,6 +106,7 @@ export default class AddHashtagForm extends Component {
               Used recently:
               <div className="layout__row">
                 <TagCloud
+                  addable
                   hashtags={this.props.userRecentHashtags}
                   onClick={this._selectRecentlyUsedHashtag}
                 />
@@ -116,6 +117,7 @@ export default class AddHashtagForm extends Component {
               Popular:
               <div className="layout__row">
                 <TagCloud
+                  addable
                   hashtags={popularHashtags}
                 />
               </div>

diff --git a/src/components/add-tag-modal/form/school/index.js b/src/components/add-tag-modal/form/school/index.js
@@ -115,6 +115,7 @@ export default class AddSchoolForm extends Component {
               Used recently:
               <div className="layout__row">
                 <TagCloud
+                  addable
                   schools={this.props.userRecentSchools}
                   onClick={this._selectRecentlyUsedSchool}
                 />
@@ -124,7 +125,10 @@ export default class AddSchoolForm extends Component {
             <Tab.Content className={tabClassName} index={2}>
               Popular:
               <div className="layout__row">
-                <TagCloud schools={popularSchools} />
+                <TagCloud
+                  addable
+                  schools={popularSchools}
+                />
               </div>
             </Tab.Content>
           </div>

diff --git a/src/components/tag-cloud.js b/src/components/tag-cloud.js
@@ -31,6 +31,7 @@ const TagCloud = (props) => {
   const tags = convertModelsToTags(props)
     .map((tag, index) => (
       <Tag
+        addable={props.addable}
         deletable={props.deletable}
         key={index}
         showPostCount={props.showPostCount}
@@ -51,6 +52,7 @@ const TagCloud = (props) => {
 TagCloud.displayName = 'TagCloud';
 
 TagCloud.propTypes = {
+  addable: PropTypes.bool,
   deletable: PropTypes.bool,
   geotags: ArrayOfGeotagsPropType,
   hashtags: ArrayOfHashtagsPropType,

diff --git a/src/components/tag.js b/src/components/tag.js
@@ -28,6 +28,7 @@ export default class Tag extends React.Component {
   static displayName = 'Tag';
 
   static propTypes = {
+    addable: PropTypes.bool,
     collapsed: PropTypes.bool,
     deletable: PropTypes.bool,
     inactive: PropTypes.bool,
@@ -155,7 +156,7 @@ export default class Tag extends React.Component {
       return (
         <div className={`tag ${className}`} title={name}>
           <div className="tag__icon_wrapper">
-            <span className="micon tag__icon tag__delete clickable" onClick={this._handleDelete}>close</span>
+            <span className="micon tag__icon tag__action clickable" onClick={this._handleDelete}>close</span>
             {tagIcon}
           </div>
           {tagNameComponent}
@@ -165,6 +166,9 @@ export default class Tag extends React.Component {
       return (
         <div className={`tag tag-clickable ${className}`} title={name} onClick={this._handleClick}>
           <div className="tag__icon_wrapper">
+            {this.props.addable &&
+              <span className="micon tag__icon tag__action clickable">add</span>
+            }
             {tagIcon}
           </div>
           {tagNameComponent}

diff --git a/src/less/blocks/tag.less b/src/less/blocks/tag.less
@@ -36,7 +36,7 @@
   margin-left: 1px;
 
   &:hover {
-    .tag__delete {
+    .tag__action {
       opacity: 1;
     }
   }
@@ -104,7 +104,7 @@
     color: @color__dark_gray;
   }
 
-  &__delete {
+  &__action {
     cursor: pointer;
     line-height: @height;
     opacity: 0;
@@ -119,39 +119,39 @@
   &-hashtag {
     border-color: #689ACA;
 
-    .tag__delete {
+    .tag__action {
       background: #689ACA;
     }
   }
 
   &-school {
     border-color: #DC3457;
 
-    .tag__delete {
+    .tag__action {
       background: #DC3457;
     }
   }
 
   &-event {
     border-color: #98C646;
 
-    .tag__delete {
+    .tag__action {
       background: #98C646;
     }
   }
 
   &-mention {
     border-color: #F8A232;
 
-    .tag__delete {
+    .tag__action {
       background: #F8A232;
     }
   }
 
   &-location {
     border-color: #47B8E7;
 
-    .tag__delete {
+    .tag__action {
       background: #47B8E7;
     }
   }