From af455b901f04e40f822915093b6c917bdc934e3d Mon Sep 17 00:00:00 2001
From: rr- <rr-@sakuya.pl>
Date: Sat, 30 Jul 2016 12:57:34 +0200
Subject: [PATCH] client/tags: make implications yellow

---
 client/css/colors.styl                  |  4 +++-
 client/css/forms.styl                   |  3 +++
 client/js/controls/tag_input_control.js | 24 ++++++++++++++++--------
 3 files changed, 22 insertions(+), 9 deletions(-)

diff --git a/client/css/colors.styl b/client/css/colors.styl
index 5c2ad11..b2aabc9 100644
--- a/client/css/colors.styl
+++ b/client/css/colors.styl
@@ -28,9 +28,11 @@ $button-enabled-text-color = white
 $button-enabled-background-color = $main-color
 $button-disabled-text-color = #666
 $button-disabled-background-color = #CCC
+$default-tag-category-background-color = $active-tab-background-color
 $new-tag-background-color = #DFC
 $new-tag-text-color = black
-$default-tag-category-background-color = $active-tab-background-color
+$implied-tag-background-color = #FFC
+$implied-tag-text-color = black
 $duplicate-tag-background-color = #FDC
 $duplicate-tag-text-color = black
 $note-overlay-background-color = rgba(255, 255, 255, 0.3)
diff --git a/client/css/forms.styl b/client/css/forms.styl
index 1252dd9..3916f63 100644
--- a/client/css/forms.styl
+++ b/client/css/forms.styl
@@ -174,6 +174,9 @@ input:disabled
     cursor: not-allowed
 
 div.tag-input
+    li.implication
+        background: $implied-tag-background-color
+        color: $implied-tag-text-color
     li.new
         background: $new-tag-background-color
         color: $new-tag-text-color
diff --git a/client/js/controls/tag_input_control.js b/client/js/controls/tag_input_control.js
index fe36f2c..521cfa1 100644
--- a/client/js/controls/tag_input_control.js
+++ b/client/js/controls/tag_input_control.js
@@ -10,6 +10,10 @@ const TagAutoCompleteControl = require('./tag_auto_complete_control.js');
 const KEY_SPACE = 32;
 const KEY_RETURN = 13;
 
+const SOURCE_INIT = 'init';
+const SOURCE_IMPLICATION = 'implication';
+const SOURCE_USER_INPUT = 'user-input';
+
 class TagInputControl extends events.EventTarget {
     constructor(sourceInputNode) {
         super();
@@ -34,7 +38,7 @@ class TagInputControl extends events.EventTarget {
                 },
                 confirm: text => {
                     this._tagInputNode.value = '';
-                    this.addTag(text, true);
+                    this.addTag(text, SOURCE_USER_INPUT);
                 },
                 verticalShift: -2,
             });
@@ -57,7 +61,7 @@ class TagInputControl extends events.EventTarget {
         this.addEventListener('remove', e => this._evtTagRemoved(e));
 
         // add existing tags
-        this.addMultipleTags(this._sourceInputNode.value, false);
+        this.addMultipleTags(this._sourceInputNode.value, SOURCE_INIT);
     }
 
     isTaggedWith(tagName) {
@@ -66,13 +70,13 @@ class TagInputControl extends events.EventTarget {
             .includes(tagName.toLowerCase());
     }
 
-    addMultipleTags(text, addImplications) {
+    addMultipleTags(text, source) {
         for (let tagName of text.split(/\s+/).filter(word => word).reverse()) {
-            this.addTag(tagName, addImplications);
+            this.addTag(tagName, source);
         }
     }
 
-    addTag(tagName, addImplications) {
+    addTag(tagName, source) {
         tagName = tags.getOriginalTagName(tagName);
 
         if (!tagName) {
@@ -85,15 +89,16 @@ class TagInputControl extends events.EventTarget {
         this.dispatchEvent(new CustomEvent('add', {
             detail: {
                 tagName: tagName,
+                source: source,
             },
         }));
         this.dispatchEvent(new CustomEvent('change'));
 
         // XXX: perhaps we should aggregate suggestions from all implications
         // for call to the _suggestRelations
-        if (addImplications) {
+        if ([SOURCE_USER_INPUT, SOURCE_IMPLICATION].includes(source)) {
             for (let otherTagName of tags.getAllImplications(tagName)) {
-                this.addTag(otherTagName, true, false);
+                this.addTag(otherTagName, SOURCE_IMPLICATION);
             }
         }
     }
@@ -130,6 +135,9 @@ class TagInputControl extends events.EventTarget {
             if (!tags.getTagByName(tagName)) {
                 listItemNode.classList.add('new');
             }
+            if (e.detail.source === SOURCE_IMPLICATION) {
+                listItemNode.classList.add('implication');
+            }
             this._tagListNode.prependChild(listItemNode);
         }
     }
@@ -173,7 +181,7 @@ class TagInputControl extends events.EventTarget {
 
     _addTagsFromInput(text) {
         this._hideAutoComplete();
-        this.addMultipleTags(text, true);
+        this.addMultipleTags(text, SOURCE_USER_INPUT);
         this._tagInputNode.value = '';
         // TODO: suggest relations!
     }