Show all Hot rankings at once with a toggle button

app/assets/javascripts/discourse/controllers/list_topics_controller.js

@@ -9,6 +9,8 @@
 Discourse.ListTopicsController = Discourse.ObjectController.extend({
   needs: ['list', 'composer', 'modal'],
 
+  rankDetailsVisible: false,
+
   // If we're changing our channel
   previousChannel: null,
 
@@ -51,6 +53,10 @@ Discourse.ListTopicsController = Discourse.ObjectController.extend({
     topic.toggleStar();
   },
 
+  toggleRankDetails: function() {
+    this.toggleProperty('rankDetailsVisible');
+  },
+
   // Show rank details
   showRankDetails: function(topic) {
     var modalController = this.get('controllers.modal');

app/assets/javascripts/discourse/models/topic_list.js

@@ -46,11 +46,13 @@ Discourse.TopicList = Discourse.Model.extend({
 
   insert: function(json) {
     var newTopic  = Discourse.TopicList.decodeTopic(json);
-    // new Topics are always unseen
-    newTopic.set('unseen', true);
-    // and highlighted on the topics list view
-    newTopic.set('highlight', true);
-    return this.get('inserted').unshiftObject(newTopic);
+    newTopic.setProperties({
+      unseen: true,
+      highlight: true
+    });
+    console.log(newTopic);
+
+    this.get('inserted').unshiftObject(newTopic);
   }
 
 });
@@ -86,16 +88,20 @@ Discourse.TopicList.reopenClass({
   },
 
   list: function(menuItem) {
-    var filter, list, promise, topic_list, url;
-    filter = menuItem.name;
-    topic_list = Discourse.TopicList.create();
-    topic_list.set('inserted', Em.A());
-    topic_list.set('filter', filter);
-    url = Discourse.getURL("/") + filter + ".json";
+    var filter = menuItem.name;
+
+    var topicList = Discourse.TopicList.create({
+      inserted: Em.A(),
+      filter: filter
+    });
+
+    var url = Discourse.getURL("/") + filter + ".json";
     if (menuItem.filters && menuItem.filters.length > 0) {
       url += "?exclude_category=" + menuItem.filters[0].substring(1);
     }
-    if (list = Discourse.get('transient.topicsList')) {
+
+    var list = Discourse.get('transient.topicsList');
+    if (list) {
       if ((list.get('filter') === filter) && window.location.pathname.indexOf('more') > 0) {
         list.set('loaded', true);
         return Ember.Deferred.promise(function(promise) {
@@ -106,21 +112,23 @@ Discourse.TopicList.reopenClass({
     Discourse.set('transient.topicsList', null);
     Discourse.set('transient.topicListScrollPos', null);
 
-    return PreloadStore.getAndRemove("topic_list", function() {
-      return Discourse.ajax(url);
-    }).then(function(result) {
-      topic_list.set('topics', Discourse.TopicList.topicsFrom(result));
-      topic_list.set('can_create_topic', result.topic_list.can_create_topic);
-      topic_list.set('more_topics_url', result.topic_list.more_topics_url);
-      topic_list.set('filter_summary', result.topic_list.filter_summary);
-      topic_list.set('draft_key', result.topic_list.draft_key);
-      topic_list.set('draft_sequence', result.topic_list.draft_sequence);
-      topic_list.set('draft', result.topic_list.draft);
+    return PreloadStore.getAndRemove("topic_list", function() { return Discourse.ajax(url) }).then(function(result) {
+      topicList.setProperties({
+        topics: Discourse.TopicList.topicsFrom(result),
+        can_create_topic: result.topic_list.can_create_topic,
+        more_topics_url: result.topic_list.more_topics_url,
+        filter_summary: result.topic_list.filter_summary,
+        draft_key: result.topic_list.draft_key,
+        draft_sequence: result.topic_list.draft_sequence,
+        draft: result.topic_list.draft,
+        canViewRankDetails: result.topic_list.can_view_rank_details,
+        loaded: true
+      });
+
       if (result.topic_list.filtered_category) {
-        topic_list.set('category', Discourse.Category.create(result.topic_list.filtered_category));
+        topicList.set('category', Discourse.Category.create(result.topic_list.filtered_category));
       }
-      topic_list.set('loaded', true);
-      return topic_list;
+      return topicList;
     });
   }
 });

app/assets/javascripts/discourse/templates/list/topic_list_item.js.handlebars

@@ -6,21 +6,28 @@
   {{/if}}
 
   <td class='main-link clearfix'>
-      {{view Discourse.TopicStatusView topicBinding="this"}}
-      {{{topicLink this showTagIfPresent="controller.category"}}}
-      {{#if unread}}
-        <a href="{{lastReadUrl}}" class='badge unread badge-notification' title='{{i18n topic.unread_posts unread="unread"}}'>{{unread}}</a>
-      {{/if}}
-      {{#if displayNewPosts}}
-        <a href="{{lastReadUrl}}" class='badge new-posts badge-notification' title='{{i18n topic.new_posts new_posts="displayNewPosts"}}'>{{displayNewPosts}}</a>
-      {{/if}}
-      {{#if unseen}}
-        <a href="{{lastReadUrl}}" class='badge new-posts badge-notification' title='{{i18n topic.new}}'><i class='icon icon-asterisk'></i></a>
-      {{/if}}
 
-      {{#if rank_details}}
-        <i class='icon icon-beaker score' {{action showRankDetails this}} title='{{i18n rank_details.show}}'></i>
-      {{/if}}
+    {{#if controller.rankDetailsVisible}}
+      <div class='rank-details'>
+        <p>{{rank_details.hot_topic_type}}</p>
+        <p>
+          ({{float rank_details.random_bias}} * {{float rank_details.random_multiplier}}) + ({{float rank_details.days_ago_bias}} * {{float rank_details.days_ago_multiplier}}) = <b>{{float rank_details.ranking_score}}</b>
+          <i class='icon icon-beaker score' {{action showRankDetails this}} title='{{i18n rank_details.show}}'></i>
+        </p>
+      </div>
+    {{/if}}
+
+    {{view Discourse.TopicStatusView topicBinding="this"}}
+    {{{topicLink this showTagIfPresent="controller.category"}}}
+    {{#if unread}}
+      <a href="{{lastReadUrl}}" class='badge unread badge-notification' title='{{i18n topic.unread_posts unread="unread"}}'>{{unread}}</a>
+    {{/if}}
+    {{#if displayNewPosts}}
+      <a href="{{lastReadUrl}}" class='badge new-posts badge-notification' title='{{i18n topic.new_posts new_posts="displayNewPosts"}}'>{{displayNewPosts}}</a>
+    {{/if}}
+    {{#if unseen}}
+      <a href="{{lastReadUrl}}" class='badge new-posts badge-notification' title='{{i18n topic.new}}'><i class='icon icon-asterisk'></i></a>
+    {{/if}}
   </td>
 
   <td class='category'>

app/assets/javascripts/discourse/templates/list/topics.js.handlebars

@@ -1,7 +1,15 @@
 {{#unless controller.loading}}
-  {{#if content.loaded}}
+  {{#if loaded}}
     <div class='contents'>
-      {{#if content.topics.length}}
+      {{#if topics.length}}
+
+      {{#if canViewRankDetails}}
+        <button class='btn' {{action toggleRankDetails}} style='margin-bottom: 10px'>
+          <i class='icon icon-beaker'></i>
+          {{i18n rank_details.toggle}}
+        </button>
+      {{/if}}
+
       <table id='topic-list' {{bindAttr class="controller.category:filter-category"}}>
         <thead>
         <tr>
@@ -33,12 +41,12 @@
           </tbody>
         {{else}}
           {{#group}}
-            {{collection contentBinding="content.inserted" tagName="tbody" itemViewClass="Discourse.TopicListItemView"}}
+            {{collection contentBinding="inserted" tagName="tbody" itemViewClass="Discourse.TopicListItemView"}}
           {{/group}}
         {{/if}}
 
         {{#group}}
-          {{collection contentBinding="content.topics" tagName="tbody" itemViewClass="Discourse.TopicListItemView"}}
+          {{collection contentBinding="topics" tagName="tbody" itemViewClass="Discourse.TopicListItemView"}}
         {{/group}}
 
       </table>

app/assets/stylesheets/application/topic-list.css.scss

@@ -98,18 +98,23 @@
     width: 515px;
     font-size: 16px;
 
-    &:hover i.score {
-      display: inline-block;
-    }
-
     i.score {
       color: green;
       cursor: pointer;
-      display: none;
     }
   }
 
+  .rank-details {
+    background-color: #eee;
+    padding: 6px;
+    margin-bottom: 5px;
 
+    p {
+      font-size: 12px;
+      margin: 0;
+      line-height: 14px;
+    }
+  }
 
   @include medium-width {
     .main-link {

app/models/topic_list.rb

@@ -49,6 +49,15 @@ class TopicList
     {'more_topics_url' => page}
   end
 
+  def has_rank_details?
+
+    # Only admins can see rank details
+    return false unless @current_user.try(:admin?)
+
+    # Only show them on 'Hot'
+    return @filter == :hot
+  end
+
   protected
 
   def get_summary

app/serializers/topic_list_item_serializer.rb

@@ -43,11 +43,7 @@ class TopicListItemSerializer < ListableTopicSerializer
   end
 
   def include_rank_details?
-    return false unless object.topic_list.present?
-    return false unless scope.user.present?
-    return false unless scope.user.admin?
-
-    object.topic_list.filter == :hot
+    object.topic_list.try(:has_rank_details?)
   end
 
   def posters

app/serializers/topic_list_serializer.rb

@@ -5,10 +5,19 @@ class TopicListSerializer < ApplicationSerializer
              :filter_summary,
              :draft,
              :draft_key,
-             :draft_sequence
+             :draft_sequence,
+             :can_view_rank_details
 
   has_many :topics, serializer: TopicListItemSerializer, embed: :objects
 
+  def can_view_rank_details
+    true
+  end
+
+  def include_can_view_rank_details?
+    object.has_rank_details?
+  end
+
   def can_create_topic
     scope.can_create?(Topic)
   end

config/locales/client.en.yml

@@ -387,6 +387,7 @@ en:
         category: "There are no more {{category}} topics."
 
     rank_details:
+      toggle: toggle topic rank details
       show: show topic rank details
       title: Topic Rank Details