From 0fbef5b685e8579fade16be80584c657cd3f36d0 Mon Sep 17 00:00:00 2001
From: Dmitry Vdovin <voidxnull@gmail.com>
Date: Mon, 8 Aug 2016 01:48:44 +0200
Subject: [PATCH] Add "Add" button for tags in "Used recently" and "Popular"
 (#430)

---
 src/components/add-tag-modal/form/geotag/index.js  |  2 ++
 src/components/add-tag-modal/form/hashtag/index.js |  2 ++
 src/components/add-tag-modal/form/school/index.js  |  6 +++++-
 src/components/tag-cloud.js                        |  2 ++
 src/components/tag.js                              |  6 +++++-
 src/less/blocks/tag.less                           | 14 +++++++-------
 6 files changed, 23 insertions(+), 9 deletions(-)

diff --git a/src/components/add-tag-modal/form/geotag/index.js b/src/components/add-tag-modal/form/geotag/index.js
index bf1051bb..d64114ea 100644
--- 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
index 17c508bf..1f056a0d 100644
--- 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
index f42ce751..a5fc7c0d 100644
--- 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
index ba72d779..76e2e7d4 100644
--- 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
index db7e4911..a504c4a2 100644
--- 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
index de2317be..68778b35 100644
--- 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,7 +119,7 @@
   &-hashtag {
     border-color: #689ACA;
 
-    .tag__delete {
+    .tag__action {
       background: #689ACA;
     }
   }
@@ -127,7 +127,7 @@
   &-school {
     border-color: #DC3457;
 
-    .tag__delete {
+    .tag__action {
       background: #DC3457;
     }
   }
@@ -135,7 +135,7 @@
   &-event {
     border-color: #98C646;
 
-    .tag__delete {
+    .tag__action {
       background: #98C646;
     }
   }
@@ -143,7 +143,7 @@
   &-mention {
     border-color: #F8A232;
 
-    .tag__delete {
+    .tag__action {
       background: #F8A232;
     }
   }
@@ -151,7 +151,7 @@
   &-location {
     border-color: #47B8E7;
 
-    .tag__delete {
+    .tag__action {
       background: #47B8E7;
     }
   }