From 6f3db0e386fc32a00914c301c9f3a8e341d312d6 Mon Sep 17 00:00:00 2001 From: Robin Ward Date: Thu, 14 Aug 2014 16:05:39 -0400 Subject: [PATCH] UX: Squash activity columns together. Show a cold map on the difference between the last post and original post dates. Fix some missing classes in the mobile templates and topic map. --- .../components/activity-column.js.es6 | 45 +++++++++++++++++++ .../discourse/helpers/application_helpers.js | 28 ------------ .../discourse/helpers/cold-age-class.js.es6 | 25 +++++++++++ .../javascripts/discourse/models/topic.js | 8 ---- .../components/basic-topic-list.js.handlebars | 16 +------ .../components/topic-map.js.handlebars | 2 +- .../templates/discovery/topics.js.handlebars | 2 +- .../list/topic_list_item.js.handlebars | 14 +----- .../components/basic-topic-list.js.handlebars | 12 +---- .../mobile/list/topic_list_item.js.handlebars | 17 +++---- app/assets/javascripts/main_include.js | 1 + 11 files changed, 83 insertions(+), 87 deletions(-) create mode 100644 app/assets/javascripts/discourse/components/activity-column.js.es6 create mode 100644 app/assets/javascripts/discourse/helpers/cold-age-class.js.es6 diff --git a/app/assets/javascripts/discourse/components/activity-column.js.es6 b/app/assets/javascripts/discourse/components/activity-column.js.es6 new file mode 100644 index 000000000..5a7589021 --- /dev/null +++ b/app/assets/javascripts/discourse/components/activity-column.js.es6 @@ -0,0 +1,45 @@ +import { daysSinceEpoch } from "discourse/helpers/cold-age-class"; + +export default Ember.Component.extend({ + tagName: 'td', + classNameBindings: [':activity', 'coldness'], + attributeBindings: ['title'], + + // returns createdAt if there's no bumped date + bumpedAt: function() { + var bumpedAt = this.get('topic.bumped_at'); + if (bumpedAt) { + return new Date(bumpedAt); + } else { + return this.get('createdAt'); + } + }.property('topic.bumped_at', 'createdAt'), + + createdAt: function() { + return new Date(this.get('topic.created_at')); + }.property('topic.created_at'), + + coldness: function() { + var bumpedAt = this.get('bumpedAt'), + createdAt = this.get('createdAt'); + + if (!bumpedAt) { return; } + var delta = daysSinceEpoch(bumpedAt) - daysSinceEpoch(createdAt); + + if (delta > 120) { return 'coldmap-high'; } + if (delta > 60) { return 'coldmap-med'; } + if (delta > 14) { return 'coldmap-low'; } + }.property('bumpedAt', 'createdAt'), + + title: function() { + // return {{i18n last_post}}: {{{raw-date topic.bumped_at}}} + return I18n.t('first_post') + ": " + Discourse.Formatter.longDate(this.get('createdAt')) + "\n" + + I18n.t('last_post') + ": " + Discourse.Formatter.longDate(this.get('bumpedAt')); + }.property('bumpedAt', 'createdAt'), + + render: function(buffer) { + buffer.push(''); + buffer.push(Discourse.Formatter.autoUpdatingRelativeAge(this.get('bumpedAt'))); + buffer.push(""); + } +}); diff --git a/app/assets/javascripts/discourse/helpers/application_helpers.js b/app/assets/javascripts/discourse/helpers/application_helpers.js index 2023c817d..b10286832 100644 --- a/app/assets/javascripts/discourse/helpers/application_helpers.js +++ b/app/assets/javascripts/discourse/helpers/application_helpers.js @@ -1,33 +1,5 @@ -// helper function for dates -function daysSinceEpoch(dt) { - // 1000 * 60 * 60 * 24 = days since epoch - return dt.getTime() / 86400000; -} - var safe = Handlebars.SafeString; -/** - Converts a date to a coldmap class - - @method cold-age-class - @for Handlebars -**/ -Handlebars.registerHelper('cold-age-class', function(property, options) { - var dt = Em.Handlebars.get(this, property, options); - - if (!dt) { return 'age'; } - - // Show heat on age - var nowDays = daysSinceEpoch(new Date()), - epochDays = daysSinceEpoch(new Date(dt)); - if (nowDays - epochDays > 60) return 'age coldmap-high'; - if (nowDays - epochDays > 30) return 'age coldmap-med'; - if (nowDays - epochDays > 14) return 'age coldmap-low'; - - return 'age'; -}); - - /** Truncates long strings diff --git a/app/assets/javascripts/discourse/helpers/cold-age-class.js.es6 b/app/assets/javascripts/discourse/helpers/cold-age-class.js.es6 new file mode 100644 index 000000000..a3bfaf6ea --- /dev/null +++ b/app/assets/javascripts/discourse/helpers/cold-age-class.js.es6 @@ -0,0 +1,25 @@ +export function daysSinceEpoch(dt) { + // 1000 * 60 * 60 * 24 = days since epoch + return dt.getTime() / 86400000; +} + +/** + Converts a date to a coldmap class +**/ +function coldAgeClass(property, options) { + var dt = Em.Handlebars.get(this, property, options); + + if (!dt) { return 'age'; } + + // Show heat on age + var nowDays = daysSinceEpoch(new Date()), + epochDays = daysSinceEpoch(new Date(dt)); + if (nowDays - epochDays > 60) return 'age coldmap-high'; + if (nowDays - epochDays > 30) return 'age coldmap-med'; + if (nowDays - epochDays > 14) return 'age coldmap-low'; + + return 'age'; +} + +Handlebars.registerHelper('cold-age-class', coldAgeClass); +export default coldAgeClass; diff --git a/app/assets/javascripts/discourse/models/topic.js b/app/assets/javascripts/discourse/models/topic.js index 318c8cb3a..05663e913 100644 --- a/app/assets/javascripts/discourse/models/topic.js +++ b/app/assets/javascripts/discourse/models/topic.js @@ -1,11 +1,3 @@ -/** - A data model representing a Topic - - @class Topic - @extends Discourse.Model - @namespace Discourse - @module Discourse -**/ Discourse.Topic = Discourse.Model.extend({ postStream: function() { 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 1ac50166b..db42f78a7 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 @@ -12,7 +12,7 @@ {{i18n users}} {{/if}} {{i18n views}} - {{i18n activity}} + {{i18n activity}} @@ -55,19 +55,7 @@ {{number topic.views numberKey="views_long"}} - {{#if topic.bumped}} - - {{age topic.created_at}} - - - {{age topic.bumped_at}} - - {{else}} - - {{age topic.created_at}} - - - {{/if}} + {{activity-column topic=topic class="num"}} {{/grouped-each}} 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 7adabfb41..7bfe36717 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}} + {{number topic.posts_count class=topic.likesHeat}}

    {{i18n posts_lowercase}}

  • diff --git a/app/assets/javascripts/discourse/templates/discovery/topics.js.handlebars b/app/assets/javascripts/discourse/templates/discovery/topics.js.handlebars index c932a1b4a..91d870432 100644 --- a/app/assets/javascripts/discourse/templates/discovery/topics.js.handlebars +++ b/app/assets/javascripts/discourse/templates/discovery/topics.js.handlebars @@ -54,7 +54,7 @@ {{#sortable-heading sortBy="views" number=true action="changeSort" order=order ascending=ascending}} {{i18n views}} {{/sortable-heading}} - {{#sortable-heading sortBy="activity" number=true colspan="2" action="changeSort" order=order ascending=ascending}} + {{#sortable-heading sortBy="activity" number=true action="changeSort" order=order ascending=ascending}} {{i18n activity}} {{/sortable-heading}} 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 3560c5ffe..4a5ac92d3 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 @@ -50,16 +50,4 @@ {{number views numberKey="views_long"}} -{{#if bumped}} - - {{age created_at}} - - - {{age bumped_at}} - -{{else}} - - {{age created_at}} - - -{{/if}} +{{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 865b4f8ff..bd16137ba 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 @@ -31,17 +31,9 @@
    - {{number posts_count numberKey="posts_long"}} + {{number posts_count numberKey="posts_long"}}
    - {{#if bumped}} -
    - {{age bumped_at}} -
    - {{else}} -
    - {{age created_at}} -
    - {{/if}} + {{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 7b43e73ce..4b82b1fc3 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,19 +33,12 @@ {{/unless}}
    -
    {{number posts_count numberKey="posts_long"}}
    +
    {{number posts_count numberKey="posts_long"}}
    - {{#if bumped}} -
    - {{last_poster_username}} - {{age bumped_at}} -
    - {{else}} -
    - {{last_poster_username}} - {{age created_at}} -
    - {{/if}} +
    + {{last_poster_username}} + {{activity-column topic=this tagName="span" class="age"}} +
    diff --git a/app/assets/javascripts/main_include.js b/app/assets/javascripts/main_include.js index f2d404990..5a8072731 100644 --- a/app/assets/javascripts/main_include.js +++ b/app/assets/javascripts/main_include.js @@ -35,6 +35,7 @@ //= require ./discourse/routes/build-topic-route //= require ./discourse/routes/discourse_restricted_user_route //= require ./discourse/components/text-field +//= require ./discourse/helpers/cold-age-class //= require ./discourse/dialects/dialect //= require_tree ./discourse/dialects