Show input on edit tag

Sacret · Sacret · commit 51fceede5bd2 · 2016-04-19T23:59:15.000+03:00
diff --git a/js/components/blocks/ReposBlock.js b/js/components/blocks/ReposBlock.js
@@ -145,7 +145,7 @@ const ReposBlock = React.createClass({
                 {tag.key}
                 { isCurrentUser ?
                     <FontAwesome
-                      className="tag-remove-icon"
+                      className="tag-icon tag-remove-icon"
                       name="times"
                       onClick={() => this.removeRepoTag(tag.key, tag.repos, repo.id)}
                     /> :
diff --git a/js/components/blocks/TagsBlock.js b/js/components/blocks/TagsBlock.js
@@ -28,6 +28,12 @@ const TagsBlock = React.createClass({
     Reflux.connect(FilterStore, 'filterStore')
   ],
 
+  getInitialState() {
+    return({
+      tagEditingKey: ''
+    });
+  },
+
   componentDidMount() {
     const userID = this.props.openUser.id;
     const query = this.props.query;
@@ -73,18 +79,40 @@ const TagsBlock = React.createClass({
     //
     const openUserName = this.props.openUser.login;
     const tagKey = tag.key;
-    const isRemoving = event && ~event.target.className.indexOf('tag-remove-icon');
+    const targetClassName = event.target.className;
+    const isRemoving = ~targetClassName.indexOf('tag-remove-icon');
+    const isEditing = ~targetClassName.indexOf('tag-edit-icon');
+    if (~targetClassName.indexOf('tag-edit-input')) {
+      return;
+    }
     if (isRemoving) {
       this.props.setFirebaseTags(tagKey);
       activeTags = _.difference(activeTags, [tagKey]);
     }
+    else if (isEditing) {
+      this.setState({
+        tagEditingKey: tag.key
+      });
+    }
     else {
       activeTags = _.xor(activeTags, [tagKey]);
     }
     //
-    const tagReposIds = this.getTagReposIds(this.props.tags, activeTags);
-    FilterActions.setTagsReposIds(tagReposIds);
-    FilterActions.setTags(activeTags);
+    if (!isEditing) {
+      const tagReposIds = this.getTagReposIds(this.props.tags, activeTags);
+      FilterActions.setTagsReposIds(tagReposIds);
+      FilterActions.setTags(activeTags);
+    }
+  },
+
+  handleKeyUp(e) {
+    if (e.keyCode == 13) {
+      this.submitTagEdit();
+    }
+  },
+
+  submitTagEdit() {
+    this.props.editTag(this.state.tagEditingKey, this.refs.inputTagEdit.getValue().trim());
   },
 
   render() {
@@ -120,19 +148,41 @@ const TagsBlock = React.createClass({
         let activeClass = filterStore && _.includes(filterStore.tags, tag.key) ?
           ' active' :
           '';
+        let editingClass = (this.state.tagEditingKey === tag.key) ?
+          ' active editing-tag' :
+          '';
         //
         return (
           <span
-            className={'tag' + activeClass}
+            className={'tag' + activeClass + editingClass}
             key={'tag-' + tag.key}
             onClick={(e) => this.filterReposByTags(e, tag)}
           >
-            {tag.key}
+            { this.state.tagEditingKey !== tag.key ?
+                tag.key :
+                <Input
+                  type="text"
+                  ref="inputTagEdit"
+                  defaultValue={tag.key}
+                  className="tag-edit-input"
+                  onKeyUp={(e) => this.handleKeyUp(e)}
+                />
+            }
             { isCurrentUser ?
-                <FontAwesome
-                  className="tag-remove-icon"
-                  name="times"
-                /> :
+                [
+                  <FontAwesome
+                    key="tag-remove-icon"
+                    className="tag-icon tag-remove-icon"
+                    name="times"
+                    title="Remove tag"
+                  />,
+                  <FontAwesome
+                    key="tag-edit-icon"
+                    className="tag-icon tag-edit-icon"
+                    name="pencil"
+                    title="Edit tag"
+                  />
+                ]:
                 null
             }
           </span>
diff --git a/less/components.less b/less/components.less
@@ -90,6 +90,7 @@
 
 .tag {
   .tag-decorations(@brand-primary);
+  .no-select();
   font-size: @font-size-h4;
   margin-right: 5px;
   margin-bottom: 5px;
@@ -105,21 +106,44 @@
 }
 
 .tag, .repo-tag {
-  .tag-remove-icon {
+  .tag-icon {
     visibility: hidden;
     position: absolute;
     right: 3px;
-    top: 3px;
     font-size: 10px;
     cursor: pointer;
   }
+  .tag-remove-icon {
+    top: 3px;
+  }
+  .tag-edit-icon {
+    bottom: 3px;
+  }
   &:hover {
-    .tag-remove-icon {
+    .tag-icon {
       visibility: initial;
+      &:hover {
+        font-size: 16px;
+      }
     }
   }
 }
 
+.editing-tag {
+  .tag-icon {
+    visibility: hidden !important;
+  }
+  .form-group {
+    margin-bottom: 0;
+  }
+}
+
+.tag-edit-input {
+  color: darken(@brand-primary, 10%);
+  border: 1px solid @brand-primary;
+  font-size: @font-size-h4;
+}
+
 .repo-tag {
   .text-overflow();
   .tag-decorations(@brand-primary);
diff --git a/less/mixins.less b/less/mixins.less
@@ -15,3 +15,13 @@
     background: @color;
   }
 }
+
+.no-select {
+  -webkit-touch-callout: none; /* iOS Safari */
+  -webkit-user-select: none;   /* Chrome/Safari/Opera */
+  -khtml-user-select: none;    /* Konqueror */
+  -moz-user-select: none;      /* Firefox */
+  -ms-user-select: none;       /* Internet Explorer/Edge */
+  user-select: none;           /* Non-prefixed version, currently
+                                  not supported by any browser */
+}

Original file line number	Diff line number	Diff line change
`@@ -15,3 +15,13 @@`
`15`	`15`	`background: @color;`
`16`	`16`	`}`
`17`	`17`	`}`
	`18`	`+`
	`19`	`+.no-select {`
	`20`	`+ -webkit-touch-callout: none; /* iOS Safari */`
	`21`	`+ -webkit-user-select: none; /* Chrome/Safari/Opera */`
	`22`	`+ -khtml-user-select: none; /* Konqueror */`
	`23`	`+ -moz-user-select: none; /* Firefox */`
	`24`	`+ -ms-user-select: none; /* Internet Explorer/Edge */`
	`25`	`+ user-select: none; /* Non-prefixed version, currently`
	`26`	`+ not supported by any browser */`
	`27`	`+}`