Search suggestion can be opened in a new tab + displays contact's hovercard

closes #7134

5 files changed, 32 insertions, 9 deletions

diff --git a/app/assets/javascripts/app/views/publisher/mention_view.js b/app/assets/javascripts/app/views/publisher/mention_view.js
index b8f6143f5..75c0015ea 100644
--- a/app/assets/javascripts/app/views/publisher/mention_view.js
+++ b/app/assets/javascripts/app/views/publisher/mention_view.js
@@ -14,7 +14,7 @@ app.views.PublisherMention = app.views.SearchBase.extend({
     "keydown #status_message_fake_text": "onInputBoxKeyDown",
     "input #status_message_fake_text": "onInputBoxInput",
     "click #status_message_fake_text": "onInputBoxClick",
-    "blur #status_message_fake_text": "onInputBoxBlur",
+    "blur #status_message_fake_text": "onInputBoxBlur"
   },
 
   initialize: function() {
diff --git a/app/assets/javascripts/app/views/search_base_view.js b/app/assets/javascripts/app/views/search_base_view.js
index 5769c7fb8..44277b851 100644
--- a/app/assets/javascripts/app/views/search_base_view.js
+++ b/app/assets/javascripts/app/views/search_base_view.js
@@ -2,6 +2,7 @@ app.views.SearchBase = app.views.Base.extend({
   initialize: function(options) {
     this.ignoreDiasporaIds = [];
     this.typeaheadInput = options.typeaheadInput;
+    this.suggestionLink = options.suggestionLink || false;
     this.setupBloodhound(options);
     if(options.customSearch) { this.setupCustomSearch(); }
     this.setupTypeahead();
@@ -31,7 +32,7 @@ app.views.SearchBase = app.views.Base.extend({
       bloodhoundOptions.remote = {
         url: options.remoteRoute + ".json?q=%QUERY",
         wildcard: "%QUERY",
-        transform: this.transformBloodhoundResponse
+        transform: this.transformBloodhoundResponse.bind(this)
       };
     }
 
@@ -75,6 +76,7 @@ app.views.SearchBase = app.views.Base.extend({
       // person
       if(data.handle) {
         data.person = true;
+        data.link = this.suggestionLink;
         return data;
       }
 
@@ -84,7 +86,7 @@ app.views.SearchBase = app.views.Base.extend({
         name: data.name,
         url: Routes.tag(data.name.substring(1))
       };
-    });
+    }.bind(this));
   },
 
   _deselectAllSuggestions: function() {
@@ -106,5 +108,5 @@ app.views.SearchBase = app.views.Base.extend({
 
   ignorePersonForSuggestions: function(person) {
     if(person.handle) { this.ignoreDiasporaIds.push(person.handle); }
-  },
+  }
 });
diff --git a/app/assets/javascripts/app/views/search_view.js b/app/assets/javascripts/app/views/search_view.js
index 254bcb071..b2486659b 100644
--- a/app/assets/javascripts/app/views/search_view.js
+++ b/app/assets/javascripts/app/views/search_view.js
@@ -10,7 +10,8 @@ app.views.Search = app.views.SearchBase.extend({
     this.searchInput = this.$("#q");
     app.views.SearchBase.prototype.initialize.call(this, {
       typeaheadInput: this.searchInput,
-      remoteRoute: this.$el.attr("action")
+      remoteRoute: this.$el.attr("action"),
+      suggestionLink: true
     });
     this.searchInput.on("typeahead:select", this.suggestionSelected);
   },
diff --git a/app/assets/stylesheets/typeahead.scss b/app/assets/stylesheets/typeahead.scss
index 7f427c097..af635352b 100644
--- a/app/assets/stylesheets/typeahead.scss
+++ b/app/assets/stylesheets/typeahead.scss
@@ -31,4 +31,15 @@
     padding: 8px 20px;
     .name { line-height: 25px; }
   }
+
+  &.search-suggestion-person,
+  &.search-suggestion-hashtag {
+    display: block;
+
+    &:hover,
+    *:hover {
+      color: $white;
+      text-decoration: none;
+    }
+  }
 }
diff --git a/app/assets/templates/search_suggestion_tpl.jst.hbs b/app/assets/templates/search_suggestion_tpl.jst.hbs
index a2c734cab..1eaedc9d7 100644
--- a/app/assets/templates/search_suggestion_tpl.jst.hbs
+++ b/app/assets/templates/search_suggestion_tpl.jst.hbs
@@ -1,13 +1,22 @@
 {{#if person}}
-  <div class="search-suggestion-person">
+  {{#if link}}
+    <a class="search-suggestion-person" href="{{ url }}">
+  {{else}}
+    <div class="search-suggestion-person">
+  {{/if}}
     {{#if avatar}}
       <img src="{{ avatar }}" class="avatar pull-left">
     {{/if}}
     <div class="name">{{ name }}</div>
     <div class="diaspora-id">{{ handle }}</div>
-  </div>
+  {{#if link}}
+    </a>
+  {{else}}
+    </div>
+  {{/if}}
+
 {{else}}{{#if hashtag}}
-  <div class="search-suggestion-hashtag">
+  <a class="search-suggestion-hashtag" href="{{ url }}">
     <div class="name">{{ name }}</div>
-  </div>
+  </a>
 {{/if}}{{/if}}