From 2ef63fcc7a8c16b122dcfcfa88b4d1b5d3826f6f Mon Sep 17 00:00:00 2001
From: rr- <rr-@sakuya.pl>
Date: Wed, 24 Aug 2016 00:47:15 +0200
Subject: [PATCH] client/tag-input: move removal links to left

---
 client/css/tag-input.styl               | 59 ++++++++++++++-----------
 client/js/controls/tag_input_control.js | 20 ++++-----
 2 files changed, 41 insertions(+), 38 deletions(-)

diff --git a/client/css/tag-input.styl b/client/css/tag-input.styl
index f073ddd3..c84ceab3 100644
--- a/client/css/tag-input.styl
+++ b/client/css/tag-input.styl
@@ -85,33 +85,38 @@ div.tag-input
             font-size: 90%
             unselectable()
 
-ul.compact-tags
-    width: 100%
-    margin-top: 0.5em
-    li
-        margin: 0
+    ul.compact-tags
         width: 100%
-        line-height: 140%
-        white-space: nowrap
-        overflow: hidden
-        text-overflow: ellipsis
-        transition: background-color 0.5s linear
-        a:focus
-            outline: 0
-            box-shadow: inset 0 0 0 2px $main-color
-        &.implication
-            background: $implied-tag-background-color
-            color: $implied-tag-text-color
-        &.new
-            background: $new-tag-background-color
-            color: $new-tag-text-color
-        &.duplicate
-            background: $duplicate-tag-background-color
-            color: $duplicate-tag-text-color
-    i
-        padding-right: 0.4em
-    .append
+        margin-top: 0.5em
+        li
+            margin: 0
+            width: 100%
+            line-height: 140%
+            white-space: nowrap
+            overflow: hidden
+            text-overflow: ellipsis
+            transition: background-color 0.5s linear
+            a:focus
+                outline: 0
+                box-shadow: inset 0 0 0 2px $main-color
+            &.implication
+                background: $implied-tag-background-color
+                color: $implied-tag-text-color
+            &.new
+                background: $new-tag-background-color
+                color: $new-tag-text-color
+            &.duplicate
+                background: $duplicate-tag-background-color
+                color: $duplicate-tag-text-color
+        i
+            padding-right: 0.4em
+
+    .tag-usages, .tag-weight, .remove-tag
         color: $inactive-link-color
-        margin-left: 0.7em
-        font-size: 90%
         unselectable()
+    .tag-usages, .tag-weight
+        font-size: 90%
+    .tag-usages, .tag-weight
+        margin-left: 0.7em
+    .remove-tag
+        margin-right: 0.5em
diff --git a/client/js/controls/tag_input_control.js b/client/js/controls/tag_input_control.js
index e4f45bbf..c917b636 100644
--- a/client/js/controls/tag_input_control.js
+++ b/client/js/controls/tag_input_control.js
@@ -319,12 +319,12 @@ class TagInputControl extends events.EventTarget {
         });
 
         const usagesNode = document.createElement('span');
-        usagesNode.classList.add('append');
+        usagesNode.classList.add('tag-usages');
         usagesNode.setAttribute(
             'data-pseudo-content', actualTag ? actualTag.usages : 0);
 
         const removalLinkNode = document.createElement('a');
-        removalLinkNode.classList.add('append');
+        removalLinkNode.classList.add('remove-tag');
         removalLinkNode.setAttribute('href', '');
         removalLinkNode.setAttribute('data-pseudo-content', '×');
         removalLinkNode.addEventListener('click', e => {
@@ -334,10 +334,10 @@ class TagInputControl extends events.EventTarget {
 
         const listItemNode = document.createElement('li');
         listItemNode.setAttribute('data-tag', tagName);
+        listItemNode.appendChild(removalLinkNode);
         listItemNode.appendChild(tagLinkNode);
         listItemNode.appendChild(searchLinkNode);
         listItemNode.appendChild(usagesNode);
-        listItemNode.appendChild(removalLinkNode);
         return listItemNode;
     }
 
@@ -402,24 +402,22 @@ class TagInputControl extends events.EventTarget {
 
             const weightNode = document.createElement('span');
             weightNode.classList.add('tag-weight');
-            weightNode.classList.add('append');
             weightNode.setAttribute('data-pseudo-content', weight);
 
-            const removeLinkNode = document.createElement('a');
-            removeLinkNode.classList.add('remove-tag');
-            removeLinkNode.classList.add('append');
-            removeLinkNode.setAttribute('href', '');
-            removeLinkNode.setAttribute('data-pseudo-content', '×');
-            removeLinkNode.addEventListener('click', e => {
+            const removalLinkNode = document.createElement('a');
+            removalLinkNode.classList.add('remove-tag');
+            removalLinkNode.setAttribute('href', '');
+            removalLinkNode.setAttribute('data-pseudo-content', '×');
+            removalLinkNode.addEventListener('click', e => {
                 e.preventDefault();
                 listNode.removeChild(listItemNode);
                 this._suggestions.ban(tagName);
             });
 
             const listItemNode = document.createElement('li');
+            listItemNode.appendChild(removalLinkNode);
             listItemNode.appendChild(weightNode);
             listItemNode.appendChild(addLinkNode);
-            listItemNode.appendChild(removeLinkNode);
             listNode.appendChild(listItemNode);
         }
     }