From eb5a3da10d555a44c7c7c92972f78a83a22d5209 Mon Sep 17 00:00:00 2001 From: Robin Ward Date: Fri, 15 Aug 2014 11:49:30 -0400 Subject: [PATCH] UX: Include tooltip text when hovering over posts column --- .../components/posts-count-column.js.es6 | 41 +++++++++++++++++++ .../javascripts/discourse/models/topic.js | 12 ------ .../components/basic-topic-list.js.handlebars | 4 +- .../components/topic-map.js.handlebars | 2 +- .../list/topic_list_item.js.handlebars | 3 +- .../components/basic-topic-list.js.handlebars | 4 +- .../mobile/list/topic_list_item.js.handlebars | 3 +- config/locales/client.en.yml | 6 +++ 8 files changed, 52 insertions(+), 23 deletions(-) create mode 100644 app/assets/javascripts/discourse/components/posts-count-column.js.es6 diff --git a/app/assets/javascripts/discourse/components/posts-count-column.js.es6 b/app/assets/javascripts/discourse/components/posts-count-column.js.es6 new file mode 100644 index 00000000000..b4b71f2971e --- /dev/null +++ b/app/assets/javascripts/discourse/components/posts-count-column.js.es6 @@ -0,0 +1,41 @@ +export default Ember.Component.extend({ + tagName: 'td', + classNameBindings: [':posts', 'likesHeat'], + attributeBindings: ['title'], + + ratio: function() { + var likes = parseFloat(this.get('topic.like_count')), + posts = parseFloat(this.get('topic.posts_count')); + + if (posts < 10) { return 0; } + + return (likes || 0) / posts; + }.property('topic.like_count', 'topic.posts_count'), + + title: function() { + return I18n.messageFormat('posts_likes_MF', { + count: this.get('topic.posts_count'), + ratio: this.get('ratioText') + }).trim(); + }.property('topic.posts_count', 'likesHeat'), + + ratioText: function() { + var ratio = this.get('ratio'); + + if (ratio > 2.0) { return 'high'; } + if (ratio > 1.0) { return 'med'; } + if (ratio > 0.5) { return 'low'; } + return ''; + }.property('ratio'), + + likesHeat: Discourse.computed.fmt('ratioText', 'heatmap-%@'), + + render: function(buffer) { + var postsCount = this.get('topic.posts_count'), + url = this.get('topic.lastUnreadUrl'); + + buffer.push(""); + buffer.push(Discourse.Formatter.number(postsCount)); + buffer.push(""); + } +}); diff --git a/app/assets/javascripts/discourse/models/topic.js b/app/assets/javascripts/discourse/models/topic.js index 05663e913cc..a54f2d454f4 100644 --- a/app/assets/javascripts/discourse/models/topic.js +++ b/app/assets/javascripts/discourse/models/topic.js @@ -99,18 +99,6 @@ Discourse.Topic = Discourse.Model.extend({ return this.get('new_posts'); }.property('new_posts', 'id'), - likesHeat: function() { - var likes = parseFloat(this.get('like_count')), - posts = parseFloat(this.get('posts_count')); - - if (posts < 10) { return; } - var ratio = (likes || 0) / posts; - - if (ratio > 2.0) { return 'heatmap-high'; } - if (ratio > 1.0) { return 'heatmap-med'; } - if (ratio > 0.5) { return 'heatmap-low'; } - }.property('like_count'), - viewsHeat: function() { var v = this.get('views'); if( v >= Discourse.SiteSettings.topic_views_heat_high ) return 'heatmap-high'; diff --git a/app/assets/javascripts/discourse/templates/components/basic-topic-list.js.handlebars b/app/assets/javascripts/discourse/templates/components/basic-topic-list.js.handlebars index db42f78a7fd..b9e1b854033 100644 --- a/app/assets/javascripts/discourse/templates/components/basic-topic-list.js.handlebars +++ b/app/assets/javascripts/discourse/templates/components/basic-topic-list.js.handlebars @@ -39,9 +39,7 @@ {{/unless}} - - {{number topic.posts_count numberKey="posts_long"}} - + {{posts-count-column topic=topic class="num"}} {{#if controller.showParticipants}} diff --git a/app/assets/javascripts/discourse/templates/components/topic-map.js.handlebars b/app/assets/javascripts/discourse/templates/components/topic-map.js.handlebars index 7bfe36717b3..2d205ae16b8 100644 --- a/app/assets/javascripts/discourse/templates/components/topic-map.js.handlebars +++ b/app/assets/javascripts/discourse/templates/components/topic-map.js.handlebars @@ -21,7 +21,7 @@
  • - {{number topic.posts_count class=topic.likesHeat}} + {{posts-count-column topic=topic tagName="span"}}

    {{i18n posts_lowercase}}

  • diff --git a/app/assets/javascripts/discourse/templates/list/topic_list_item.js.handlebars b/app/assets/javascripts/discourse/templates/list/topic_list_item.js.handlebars index 4a5ac92d371..5123e5fe1f5 100644 --- a/app/assets/javascripts/discourse/templates/list/topic_list_item.js.handlebars +++ b/app/assets/javascripts/discourse/templates/list/topic_list_item.js.handlebars @@ -46,8 +46,7 @@ {{/each}} -{{number posts_count numberKey="posts_long"}} - +{{posts-count-column topic=model class="num"}} {{number views numberKey="views_long"}} {{activity-column topic=model class="num"}} diff --git a/app/assets/javascripts/discourse/templates/mobile/components/basic-topic-list.js.handlebars b/app/assets/javascripts/discourse/templates/mobile/components/basic-topic-list.js.handlebars index bd16137ba25..6f83f79a301 100644 --- a/app/assets/javascripts/discourse/templates/mobile/components/basic-topic-list.js.handlebars +++ b/app/assets/javascripts/discourse/templates/mobile/components/basic-topic-list.js.handlebars @@ -30,9 +30,7 @@
    -
    - {{number posts_count numberKey="posts_long"}} -
    + {{posts-count-column topic=topic tagName="div" class="num posts"}} {{activity-column topic=topic tagName="div" class="num activity last"}}
    {{#unless controller.hideCategory}} diff --git a/app/assets/javascripts/discourse/templates/mobile/list/topic_list_item.js.handlebars b/app/assets/javascripts/discourse/templates/mobile/list/topic_list_item.js.handlebars index 4b82b1fc3d1..7575f0a177f 100644 --- a/app/assets/javascripts/discourse/templates/mobile/list/topic_list_item.js.handlebars +++ b/app/assets/javascripts/discourse/templates/mobile/list/topic_list_item.js.handlebars @@ -33,8 +33,7 @@ {{/unless}}
    -
    {{number posts_count numberKey="posts_long"}}
    - + {{posts-count-column topic=this tagName="div" class="num posts"}}
    {{last_poster_username}} {{activity-column topic=this tagName="span" class="age"}} diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml index d25b0bbd441..2fe32b5d260 100644 --- a/config/locales/client.en.yml +++ b/config/locales/client.en.yml @@ -1320,6 +1320,12 @@ en: posts: "Posts" posts_lowercase: "posts" posts_long: "there are {{number}} posts in this topic" + posts_likes_MF: | + This topic has {count, plural, one {1 post} other {# posts}} {ratio, select, + low {with a high post to like ratio} + med {with a very high post to like ratio} + high {with an extremely high post to like ratio} + other {}} original_post: "Original Post" views: "Views" views_lowercase: "views"