Restyle atwho dropdown

app/assets/javascripts/sitewide/atwho_users.js.erb

@@ -10,26 +10,9 @@
         .atwho({
           at: '@',
           callbacks: {
-            matcher: function(flag, subtext, should_startWithSpace, acceptSpaceBar) {
-              var _a, _y, match, regexp, space;
-              flag = flag.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&");
-              if (should_startWithSpace) {
-                flag = '(?:^|\\s)' + flag;
-              }
-              _a = decodeURI("%C3%80");
-              _y = decodeURI("%C3%BF");
-              space = ' \xa0'; // Use space...
-              regexp = new RegExp(flag + "([A-Za-z" + _a + "-" + _y + "0-9_" + space + "\'\.\+\-]*)$|" + flag + "([^\\x00-\\xff]*)$", 'gi');
-              match = regexp.exec(subtext);
-              if (match) {
-                return match[2] || match[1]
-              } else {
-                return null;
-              }
-            },
             remoteFilter: function(query, callback) {
               $.getJSON(
-                '/organizations/1/atwho_users.json',
+                '/organizations/1/atwho_users.json', // TODO
                 {query: query},
                 function(data) {
                   callback(data.users);
@@ -97,8 +80,27 @@
               return res;
             }
           },
-          limit: 5,
+          headerTpl:
-          startsWithSpace: true
+            '<div class="atwho-header-user">' +
+            '<div class="title"><%= I18n.t("atwho.users.title") %></div>' +
+            '<div class="help">' +
+            '<div>' +
+            '<strong><%= I18n.t("atwho.users.navigate_1") %></strong> ' +
+            '<%= I18n.t("atwho.users.navigate_2") %>' +
+            '</div>' +
+            '<div>' +
+            '<strong><%= I18n.t("atwho.users.confirm_1") %></strong> ' +
+            '<%= I18n.t("atwho.users.confirm_2") %>' +
+            '</div>' +
+            '<div>' +
+            '<strong><%= I18n.t("atwho.users.dismiss_1") %></strong> ' +
+            '<%= I18n.t("atwho.users.dismiss_2") %>' +
+            '</div>' +
+            '</div>' +
+            '</div>',
+          limit: <%= Constants::ATWHO_SEARCH_LIMIT %>,
+          startsWithSpace: true,
+          acceptSpaceBar: true
         });
       }
     });

app/assets/stylesheets/constants.scss

@@ -25,6 +25,7 @@ $color-emperor: #555;
 $color-mine-shaft: #333;
 $color-nero: #262626;
 $color-black: #000;
+$color-cloud: rgba(0, 0, 0, .1);
 
 // Miscelaneous colors
 $color-mystic: #eaeff2;

app/assets/stylesheets/themes/scinote.scss

@@ -1716,10 +1716,10 @@ th.custom-field .modal-tooltiptext {
   margin-top: 18px;
   background: $color-white;
   color: $color-black;
-  border: 1px solid #DDD;
+  border: 1px solid $color-emperor;
   border-radius: 3px;
-  box-shadow: 0 0 5px rgba(0,0,0,0.1);
+  box-shadow: 0 0 5px $color-cloud;
-  min-width: 120px;
+  min-width: 520px;
   max-height: 200px;
   overflow: auto;
   z-index: 11110 !important;
@@ -1756,13 +1756,45 @@ th.custom-field .modal-tooltiptext {
     li {
       display: block;
       padding: 5px 10px;
-      border-bottom: 1px solid #DDD;
+      border-bottom: 1px solid $color-emperor;
       cursor: pointer;
     }
   }
 }
 // <End of overrides>
 
+.atwho-header-user {
+  padding-top: 7px;
+  padding-bottom: 7px;
+  height: 34px;
+  background-color: $color-gallery;
+  border-bottom: 1px solid $color-emperor;
+  clear: both;
+
+  > div {
+    display: inline;
+  }
+
+  .title {
+    float: left;
+    margin-left: 15px;
+  }
+
+  .help {
+    float: right;
+
+    div {
+      display: inline;
+      margin-right: 15px;
+      font-size: smaller;
+
+      strong {
+        color: $color-black;
+      }
+    }
+  }
+}
+
 .atwho-li-user {
 
   .avatar {

config/locales/en.yml

@@ -1451,6 +1451,16 @@ en:
     assign_user_to_organization: "<i>%{assigned_user}</i> was added as %{role} to team <strong>%{organization}</strong> by <i>%{assigned_by_user}</i>."
     unassign_user_from_organization: "<i>%{unassigned_user}</i> was removed from team <strong>%{organization}</strong> by <i>%{unassigned_by_user}</i>."
 
+  atwho:
+    users:
+      title: "People"
+      navigate_1: "up/down"
+      navigate_2: "to navigate"
+      confirm_1: "enter/tab"
+      confirm_2: "to confirm"
+      dismiss_1: "esc"
+      dismiss_2: "to dismiss"
+
   # This section contains general words that can be used in any parts of
   # application.