From 754affaea31d15a29aa131c73037391b669c2a71 Mon Sep 17 00:00:00 2001
From: Coleman Watts <coleman@civicrm.org>
Date: Mon, 30 Jan 2017 15:14:27 -0500
Subject: [PATCH] CRM-19943 - Improve contact tag UI

---
 js/Common.js                       |  5 +++-
 templates/CRM/Tag/Form/Tag.tpl     | 42 ++++++++++++++++++++++++------
 templates/CRM/Tag/Form/Tagtree.tpl |  4 +--
 3 files changed, 40 insertions(+), 11 deletions(-)

diff --git a/js/Common.js b/js/Common.js
index 86f21fb46e..ac8b8768d1 100644
--- a/js/Common.js
+++ b/js/Common.js
@@ -1522,10 +1522,13 @@ if (!CRM.vars) CRM.vars = {};
         $(this).siblings('input:text').val('').trigger('change', ['crmClear']);
         return false;
       })
-      .on('change', 'input.crm-form-radio:checked, input[allowclear=1]', function(e, context) {
+      .on('change keyup', 'input.crm-form-radio:checked, input[allowclear=1]', function(e, context) {
         if (context !== 'crmClear' && ($(this).is(':checked') || ($(this).is('[allowclear=1]') && $(this).val()))) {
           $(this).siblings('.crm-clear-link').css({visibility: ''});
         }
+        if (context !== 'crmClear' && $(this).is('[allowclear=1]') && $(this).val() === '') {
+          $(this).siblings('.crm-clear-link').css({visibility: 'hidden'});
+        }
       })
 
       // Allow normal clicking of links within accordions
diff --git a/templates/CRM/Tag/Form/Tag.tpl b/templates/CRM/Tag/Form/Tag.tpl
index 817fdddba8..37ff7634fe 100644
--- a/templates/CRM/Tag/Form/Tag.tpl
+++ b/templates/CRM/Tag/Form/Tag.tpl
@@ -46,7 +46,7 @@
     {literal}
     CRM.updateContactSummaryTags = function() {
       var tags = [];
-      $('#tagtree input:checkbox:checked+span label').each(function() {
+      $('#tagtree input:checkbox:checked+a label').each(function() {
         tags.push('<span class="crm-tag-item" style="' + $(this).attr('style') + '" title="' + ($(this).attr('title') || '') + '">' + $(this).text() + '</span>');
       });
       $('input.crm-contact-tagset').each(function() {
@@ -83,8 +83,12 @@
       if (childTag) {
         //load js tree.
         $("#tagtree").jstree({
-          plugins : ["themes", "html_data"],
+          plugins : ["themes", "html_data", "search"],
           core: {animation: 100},
+          'search': {
+            'case_insensitive' : true,
+            'show_only_matches': true
+          },
           themes: {
             "theme": 'classic',
             "dots": false,
@@ -102,15 +106,37 @@
       {literal}
 
       $(document).on('change', 'input.crm-contact-tagset', CRM.updateContactSummaryTags);
+
+      $('input[name=filter_tag_tree]', '#Tag').on('keyup change', function() {
+        $("#tagtree").jstree('search', $(this).val());
+      });
     });
   })(CRM.$, CRM._);
   {/literal}
 </script>
 <div id="Tag" class="view-content">
-  <h3>{if !$hideContext}{ts}Tags{/ts}{/if}</h3>
-  <div id="tagtree">
-    {include file="CRM/Tag/Form/Tagtree.tpl" level=1}
-  </div>
-  <br />
-{include file="CRM/common/Tagset.tpl"}
+  <table class="">
+    <thead>
+      <tr>
+        <th>{ts}Tag Tree{/ts}</th>
+        {if $tagsetInfo.contact}<th>{ts}Tag Sets{/ts}</th>{/if}
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>
+          <input class="crm-form-text big" name="filter_tag_tree" placeholder="{ts}Filter List{/ts}" allowclear="1"/>
+          <a class="crm-hover-button crm-clear-link" style="visibility:hidden;" title="{ts}Clear{/ts}"><i class="crm-i fa-times"></i></a>
+          <div id="tagtree">
+            {include file="CRM/Tag/Form/Tagtree.tpl" level=1}
+          </div>
+        </td>
+        {if $tagsetInfo.contact}
+        <td>
+          {include file="CRM/common/Tagset.tpl"}
+        </td>
+        {/if}
+      </tr>
+    </tbody>
+  </table>
 </div>
diff --git a/templates/CRM/Tag/Form/Tagtree.tpl b/templates/CRM/Tag/Form/Tagtree.tpl
index 8102dabb92..5c27022c2a 100644
--- a/templates/CRM/Tag/Form/Tagtree.tpl
+++ b/templates/CRM/Tag/Form/Tagtree.tpl
@@ -28,11 +28,11 @@
   {foreach from=$tree item="node" key="id"}
     <li id="tag_{$id}">
       <input name="tagList[{$id}]" id="check_{$id}" type="checkbox" {if $node.is_selectable EQ 0}disabled=""{/if} {if $tagged[$id]}checked="checked"{/if}/>
-      <span>
+      <a>
         <label for="check_{$id}" id="tagLabel_{$id}" class="crm-tag-item" {if !empty($allTags.$id.color)}style="background-color: {$allTags.$id.color}; color: {$allTags.$id.color|colorContrast};"{/if} title="{$node.description}">
           {$node.name}
         </label>
-      </span>
+      </a>
       {if $node.children}
         {* Recurse... *}
         {include file="CRM/Tag/Form/Tagtree.tpl" tree=$node.children level=$level+1}
-- 
2.25.1