From 7eaa27683e973e3b5e74e8736c387f293653cbe3 Mon Sep 17 00:00:00 2001
From: epriestley <git@epriestley.com>
Date: Fri, 30 Mar 2018 08:42:18 -0700
Subject: [PATCH] Make closed/disabled results in the remarkup autocomplete
 more visually clear

Summary:
Ref T13114. See PHI522. Although it looks like results are already ordered correctly, the override rendering isn't accommodating disabled results gracefully.

Give closed results a distinctive look (grey + strikethru) so it's clear when you're autocompleting `@mention...` into a disabled user.

Test Plan: {F5497621}

Maniphest Tasks: T13114

Differential Revision: https://secure.phabricator.com/D19272
---
 resources/celerity/map.php                 | 22 +++++++++++-----------
 webroot/rsrc/css/core/remarkup.css         |  5 +++++
 webroot/rsrc/js/phuix/PHUIXAutocomplete.js |  5 ++++-
 3 files changed, 20 insertions(+), 12 deletions(-)

diff --git a/resources/celerity/map.php b/resources/celerity/map.php
index f7a1f391d0..c9768ce456 100644
--- a/resources/celerity/map.php
+++ b/resources/celerity/map.php
@@ -9,7 +9,7 @@ return array(
   'names' => array(
     'conpherence.pkg.css' => 'e68cf1fa',
     'conpherence.pkg.js' => '15191c65',
-    'core.pkg.css' => '3fd3b7b8',
+    'core.pkg.css' => '1dd5fa4b',
     'core.pkg.js' => 'b9b4a943',
     'differential.pkg.css' => '113e692c',
     'differential.pkg.js' => 'f6d809c0',
@@ -112,7 +112,7 @@ return array(
     'rsrc/css/application/tokens/tokens.css' => '3d0f239e',
     'rsrc/css/application/uiexample/example.css' => '528b19de',
     'rsrc/css/core/core.css' => '62fa3ace',
-    'rsrc/css/core/remarkup.css' => 'b375546d',
+    'rsrc/css/core/remarkup.css' => '1828e2ad',
     'rsrc/css/core/syntax.css' => 'cae95e89',
     'rsrc/css/core/z-index.css' => '9d8f7c4b',
     'rsrc/css/diviner/diviner-shared.css' => '896f1d43',
@@ -509,7 +509,7 @@ return array(
     'rsrc/js/phui/behavior-phui-tab-group.js' => '0a0b10e9',
     'rsrc/js/phuix/PHUIXActionListView.js' => 'b5c256b8',
     'rsrc/js/phuix/PHUIXActionView.js' => 'ed18356a',
-    'rsrc/js/phuix/PHUIXAutocomplete.js' => '7fa5c915',
+    'rsrc/js/phuix/PHUIXAutocomplete.js' => 'df1bbd34',
     'rsrc/js/phuix/PHUIXButtonView.js' => '8a91e1ac',
     'rsrc/js/phuix/PHUIXDropdownMenu.js' => '04b2ae03',
     'rsrc/js/phuix/PHUIXExample.js' => '68af71ca',
@@ -780,7 +780,7 @@ return array(
     'phabricator-object-selector-css' => '85ee8ce6',
     'phabricator-phtize' => 'd254d646',
     'phabricator-prefab' => '77b0ae28',
-    'phabricator-remarkup-css' => 'b375546d',
+    'phabricator-remarkup-css' => '1828e2ad',
     'phabricator-search-results-css' => '505dd8cf',
     'phabricator-shaped-request' => '7cbe244b',
     'phabricator-slowvote-css' => 'a94b7230',
@@ -865,7 +865,7 @@ return array(
     'phui-workpanel-view-css' => 'a3a63478',
     'phuix-action-list-view' => 'b5c256b8',
     'phuix-action-view' => 'ed18356a',
-    'phuix-autocomplete' => '7fa5c915',
+    'phuix-autocomplete' => 'df1bbd34',
     'phuix-button-view' => '8a91e1ac',
     'phuix-dropdown-menu' => '04b2ae03',
     'phuix-form-control-view' => '210a16c1',
@@ -1558,12 +1558,6 @@ return array(
     '7f243deb' => array(
       'javelin-install',
     ),
-    '7fa5c915' => array(
-      'javelin-install',
-      'javelin-dom',
-      'phuix-icon-view',
-      'phabricator-prefab',
-    ),
     '834a1173' => array(
       'javelin-behavior',
       'javelin-scrollbar',
@@ -2047,6 +2041,12 @@ return array(
       'javelin-typeahead-ondemand-source',
       'javelin-dom',
     ),
+    'df1bbd34' => array(
+      'javelin-install',
+      'javelin-dom',
+      'phuix-icon-view',
+      'phabricator-prefab',
+    ),
     'e1d25dfb' => array(
       'javelin-behavior',
       'javelin-stratcom',
diff --git a/webroot/rsrc/css/core/remarkup.css b/webroot/rsrc/css/core/remarkup.css
index 949deadbe4..990c6f0bab 100644
--- a/webroot/rsrc/css/core/remarkup.css
+++ b/webroot/rsrc/css/core/remarkup.css
@@ -724,6 +724,11 @@ var.remarkup-assist-textarea {
   color: {$darkgreytext};
 }
 
+.phuix-autocomplete-list a.jx-result .tokenizer-result-closed {
+  color: {$lightgreytext};
+  text-decoration: line-through;
+}
+
 .phuix-autocomplete-list a.jx-result .phui-icon-view {
   margin-right: 4px;
   color: {$lightbluetext};
diff --git a/webroot/rsrc/js/phuix/PHUIXAutocomplete.js b/webroot/rsrc/js/phuix/PHUIXAutocomplete.js
index 8f062d900e..f46e7666e2 100644
--- a/webroot/rsrc/js/phuix/PHUIXAutocomplete.js
+++ b/webroot/rsrc/js/phuix/PHUIXAutocomplete.js
@@ -185,7 +185,10 @@ JX.install('PHUIXAutocomplete', {
           .getNode();
       }
 
-      map.display = [icon, map.displayName];
+      var display = JX.$N('span', {}, [icon, map.displayName]);
+      JX.DOM.alterClass(display, 'tokenizer-result-closed', !!map.closed);
+
+      map.display = display;
 
       return map;
     },