client/tags: add toggle suggestions opacity

client/css/forms.styl

@@ -199,9 +199,15 @@ div.tag-input
         &:not(.shown)
             display: none
 
-        .close
+        &.translucent
+            opacity: .5
+
+        .buttons
+            margin: 0
             float: right
-            color: $inactive-link-color
+            a
+                margin-left: 1em
+                color: $inactive-link-color
         .wrapper
             margin-left: 0.5em
             background: $tag-suggestions-background-color

client/css/posts.styl

@@ -319,15 +319,10 @@ $safety-unsafe = #F3985F
         margin-bottom: 0.3em
         display: block
 
-    .buttons
-        display: flex
-        flex-wrap: wrap
-        margin-top: 2em
-        input, button
-            flex-grow: 1
-
     input[type=submit],
     input[type=button],
     button
+        margin-top: 1em
+        width: 100%
         &:focus
             border: 2px solid $text-color !important

client/js/controls/tag_input_control.js

@@ -119,11 +119,22 @@ class TagInputControl extends events.EventTarget {
         this._suggestionsNode = views.htmlToDom(
             '<div class="tag-suggestions">' +
             '<div class="wrapper">' +
-            '<p>Suggested tags<a class="close">×</a></p>' +
+            '<p>' +
+            '<span class="buttons">' +
+            '<a class="opacity"><i class="fa fa-eye"></i></a>' +
+            '<a class="close">×</a>' +
+            '</span>' +
+            'Suggested tags' +
+            '</p>' +
             '<ul></ul>' +
             '</div>' +
             '</div>');
         this._editAreaNode.appendChild(this._suggestionsNode);
+        this._editAreaNode.querySelector('a.opacity').addEventListener(
+            'click', e => {
+                e.preventDefault();
+                this._toggleSuggestionsPopupOpacity();
+            });
         this._editAreaNode.querySelector('a.close').addEventListener(
             'click', e => {
                 e.preventDefault();
@@ -308,6 +319,7 @@ class TagInputControl extends events.EventTarget {
             if (actualTag) {
                 this._suggestions.clear();
                 this._loadSuggestions(actualTag);
+                this._removeSuggestionsPopupOpacity();
             } else {
                 this._closeSuggestionsPopup();
             }
@@ -421,6 +433,14 @@ class TagInputControl extends events.EventTarget {
         this._suggestionsNode.classList.remove('shown');
     }
 
+    _removeSuggestionsPopupOpacity() {
+        this._suggestionsNode.classList.remove('translucent');
+    }
+
+    _toggleSuggestionsPopupOpacity() {
+        this._suggestionsNode.classList.toggle('translucent');
+    }
+
     _openSuggestionsPopup() {
         this._suggestionsNode.classList.add('shown');
         this._refreshSuggestionsPopup();