codeninjasllc/discourse
1
0
Fork 0
mirror of https://github.com/codeninjasllc/discourse.git synced 2024-11-23 23:58:31 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

UX: Squash activity columns together. Show a cold map on the difference

Browse source 
between the last post and original post dates. Fix some missing classes
in the mobile templates and topic map.
This commit is contained in:
Robin Ward 2014-08-14 16:05:39 -04:00
parent 658cdd2c9e
commit 6f3db0e386
11 changed files with 83 additions and 87 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

45
app/assets/javascripts/discourse/components/activity-column.js.es6 Normal file
View file

@ -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('<a href="' + this.get('topic.lastPostUrl') + '">');
buffer.push(Discourse.Formatter.autoUpdatingRelativeAge(this.get('bumpedAt')));
buffer.push("</a>");
}
});

28
app/assets/javascripts/discourse/helpers/application_helpers.js
View file

@ -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

25
app/assets/javascripts/discourse/helpers/cold-age-class.js.es6 Normal file
View file

@ -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;

8
app/assets/javascripts/discourse/models/topic.js
View file

@ -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() {

16
app/assets/javascripts/discourse/templates/components/basic-topic-list.js.handlebars
View file

@ -12,7 +12,7 @@
<th class="posters">{{i18n users}}</th>
{{/if}}
<th class="num views">{{i18n views}}</th>
<th class="num activity" colspan="2">{{i18n activity}}</th>
<th class="num activity">{{i18n activity}}</th>
</tr>
</thead>
@ -55,19 +55,7 @@
{{number topic.views numberKey="views_long"}}
</td>
{{#if topic.bumped}}
<td class='num activity'>
<a href="{{unbound topic.url}}" class='{{cold-age-class created_at}}' title='{{i18n first_post}}: {{{raw-date topic.created_at}}}' >{{age topic.created_at}}</a>
</td>
<td class='num activity last'>
<a href="{{unbound topic.lastPostUrl}}" class='{{cold-age-class bumped_at}}' title='{{i18n last_post}}: {{{raw-date topic.bumped_at}}}'>{{age topic.bumped_at}}</a>
</td>
{{else}}
<td class='num activity'>
<a href="{{unbound topic.url}}" class='age' title='{{i18n first_post}}: {{{raw-date topic.created_at}}}'>{{age topic.created_at}}</a>
</td>
<td class="activity"></td>
{{/if}}
{{activity-column topic=topic class="num"}}
</tr>
{{/grouped-each}}
</tbody>

2
app/assets/javascripts/discourse/templates/components/topic-map.js.handlebars
View file

@ -21,7 +21,7 @@
</a>
</li>
<li>
{{number topic.posts_count}}
{{number topic.posts_count class=topic.likesHeat}}
<h4>{{i18n posts_lowercase}}</h4>
</li>
<li class='secondary'>

2
app/assets/javascripts/discourse/templates/discovery/topics.js.handlebars
View file

@ -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}}
</tr>

14
app/assets/javascripts/discourse/templates/list/topic_list_item.js.handlebars
View file

@ -50,16 +50,4 @@
<td {{bind-attr class=":num :views viewsHeat"}}>{{number views numberKey="views_long"}}</td>
{{#if bumped}}
<td class='num activity'>
<a href="{{url}}" class="{{cold-age-class created_at}}" title='{{i18n first_post}}: {{{raw-date created_at}}}' >{{age created_at}}</a>
</td>
<td class='num activity last'>
<a href="{{lastPostUrl}}" class="{{cold-age-class bumped_at}}" title='{{i18n last_post}}: {{{raw-date bumped_at}}}'>{{age bumped_at}}</a>
</td>
{{else}}
<td class='num activity'>
<a href="{{url}}" class="{{cold-age-class created_at}}" title='{{i18n first_post}}: {{{raw-date created_at}}}'>{{age created_at}}</a>
</td>
<td class='activity'></td>
{{/if}}
{{activity-column topic=model class="num"}}

12
app/assets/javascripts/discourse/templates/mobile/components/basic-topic-list.js.handlebars
View file

@ -31,17 +31,9 @@
<div class="topic-item-stats clearfix">
<div class="pull-right">
<div class='num posts'>
<a href="{{lastUnreadUrl}}">{{number posts_count numberKey="posts_long"}}</a>
<a href="{{lastUnreadUrl}}" {{bind-attr class="likesHeat"}}>{{number posts_count numberKey="posts_long"}}</a>
</div>
{{#if bumped}}
<div class='num activity last'>
<a href="{{lastPostUrl}}" class='age' title='{{i18n last_post}}: {{{raw-date bumped_at}}}'>{{age bumped_at}}</a>
</div>
{{else}}
<div class='num activity last'>
<a href="{{url}}" class='age' title='{{i18n first_post}}: {{{raw-date created_at}}}'>{{age created_at}}</a>
</div>
{{/if}}
{{activity-column topic=topic tagName="div" class="num activity last"}}
</div>
{{#unless controller.hideCategory}}
<div class='category'>

17
app/assets/javascripts/discourse/templates/mobile/list/topic_list_item.js.handlebars
View file

@ -33,19 +33,12 @@
{{/unless}}
<div class="pull-right">
<div class='num posts'><a href="{{lastUnreadUrl}}">{{number posts_count numberKey="posts_long"}}</a></div>
<div class='num posts'><a href="{{lastUnreadUrl}}" {{bind-attr class="likesHeat"}}>{{number posts_count numberKey="posts_long"}}</a></div>
{{#if bumped}}
<div class='num activity last'>
<a href="{{lastPostUrl}}" title='{{i18n last_post}}: {{{raw-date bumped_at}}}'>{{last_poster_username}}</a>
<a href="{{lastPostUrl}}" class='age' title='{{i18n last_post}}: {{{raw-date bumped_at}}}'>{{age bumped_at}}</a>
</div>
{{else}}
<div class='num activity last'>
<a href="{{url}}" title='{{i18n last_post}}: {{{raw-date bumped_at}}}'>{{last_poster_username}}</a>
<a href="{{url}}" class='age' title='{{i18n first_post}}: {{{raw-date created_at}}}'>{{age created_at}}</a>
</div>
{{/if}}
<div class='num activity last'>
<a href="{{lastPostUrl}}" title='{{i18n last_post}}: {{{raw-date bumped_at}}}'>{{last_poster_username}}</a>
{{activity-column topic=this tagName="span" class="age"}}
</div>
</div>
<div class="clearfix"></div>
</div>

1
app/assets/javascripts/main_include.js
View file

@ -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