IntenseWebs/discourse
3
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-02-25 18:55:32 -06:00
Code Issues Packages Projects Releases Wiki Activity

New sub-category badges in category chooser. Normalize category badge rendering code.

Browse Source
This commit is contained in:
Neil Lalonde 2014-03-25 17:29:59 -04:00
parent ac32b1c5a5
commit 86244e3a4b
6 changed files with 34 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/assets/javascripts/discourse/components/category_group_component.js
View File

@ -23,7 +23,7 @@ Discourse.CategoryGroupComponent = Ember.Component.extend({
}, },
template: Discourse.CategoryGroupComponent.templateFunction(), template: Discourse.CategoryGroupComponent.templateFunction(),
transformComplete: function(category) { transformComplete: function(category) {
return Discourse.HTML.categoryLink(category, {allowUncategorized: true}); return Discourse.HTML.categoryBadge(category, {allowUncategorized: true});
} }
}); });
} }

4
app/assets/javascripts/discourse/controllers/history_controller.js
View File

@ -46,8 +46,8 @@ Discourse.HistoryController = Discourse.ObjectController.extend(Discourse.ModalF
var raw = ""; var raw = "";
var opts = { allowUncategorized: true }; var opts = { allowUncategorized: true };
prevCategory = Discourse.HTML.categoryLink(prevCategory, opts); prevCategory = Discourse.HTML.categoryBadge(prevCategory, opts);
curCategory = Discourse.HTML.categoryLink(curCategory, opts); curCategory = Discourse.HTML.categoryBadge(curCategory, opts);
if(viewMode === "side_by_side_markdown" || viewMode === "side_by_side") { if(viewMode === "side_by_side_markdown" || viewMode === "side_by_side") {
raw = "<div class='span8'>" + prevCategory + "</div> <div class='span8 offset1'>" + curCategory + "</div>"; raw = "<div class='span8'>" + prevCategory + "</div> <div class='span8 offset1'>" + curCategory + "</div>";

17
app/assets/javascripts/discourse/helpers/application_helpers.js
View File

@ -76,17 +76,14 @@ Handlebars.registerHelper('topicLink', function(property, options) {
function categoryLinkHTML(category, options) { function categoryLinkHTML(category, options) {
var categoryOptions = {}; var categoryOptions = {};
if (options.hash) { if (options.hash) {
if (options.hash.allowUncategorized) { if (options.hash.allowUncategorized) { categoryOptions.allowUncategorized = true; }
categoryOptions.allowUncategorized = true; if (options.hash.showParent) { categoryOptions.showParent = true; }
} if (options.hash.link !== undefined) { categoryOptions.link = options.hash.link; }
if (options.hash.showParent) {
categoryOptions.showParent = true;
}
if (options.hash.categories) { if (options.hash.categories) {
categoryOptions.categories = Em.Handlebars.get(this, options.hash.categories, options); categoryOptions.categories = Em.Handlebars.get(this, options.hash.categories, options);
} }
} }
return new Handlebars.SafeString(Discourse.HTML.categoryLink(category, categoryOptions)); return new Handlebars.SafeString(Discourse.HTML.categoryBadge(category, categoryOptions));
} }
/** /**
@ -104,11 +101,11 @@ Handlebars.registerHelper('categoryLinkRaw', function(property, options) {
}); });
Handlebars.registerHelper('categoryBadge', function(property, options) { Handlebars.registerHelper('categoryBadge', function(property, options) {
var category = Em.Handlebars.get(this, property, options), options.hash.link = false;
style = Discourse.HTML.categoryStyle(category); return categoryLinkHTML(Ember.Handlebars.get(this, property, options), options);
return new Handlebars.SafeString("<span class='badge-category' style='" + style + "'>" + category.get('name') + "</span>");
}); });
/** /**
Produces a bound link to a category Produces a bound link to a category

22
app/assets/javascripts/discourse/lib/html.js
View File

@ -62,16 +62,17 @@ Discourse.HTML = {
}, },
/** /**
Create a badge-like category link Create a category badge
@method categoryLink @method categoryBadge
@param {Discourse.Category} category the category whose link we want @param {Discourse.Category} category the category whose link we want
@param {Object} opts The options for the category link @param {Object} opts The options for the category link
@param {Boolean} opts.allowUncategorized Whether we allow rendering of the uncategorized category @param {Boolean} opts.allowUncategorized Whether we allow rendering of the uncategorized category (default false)
@param {Boolean} opts.showParent Whether to visually show whether category is a sub-category @param {Boolean} opts.showParent Whether to visually show whether category is a sub-category (default false)
@param {Boolean} opts.link Whether this category badge should link to the category (default true)
@returns {String} the html category badge @returns {String} the html category badge
**/ **/
categoryLink: function(category, opts) { categoryBadge: function(category, opts) {
opts = opts || {}; opts = opts || {};
if ((!category) || if ((!category) ||
@ -85,7 +86,8 @@ Discourse.HTML = {
description = Em.get(category, 'description'), description = Em.get(category, 'description'),
restricted = Em.get(category, 'read_restricted'), restricted = Em.get(category, 'read_restricted'),
url = Discourse.getURL("/category/") + Discourse.Category.slugFor(category), url = Discourse.getURL("/category/") + Discourse.Category.slugFor(category),
html = "<a href=\"" + url + "\" "; elem = (opts.link === false ? 'span' : 'a'),
html = "<" + elem + " href=\"" + (opts.link === false ? '' : url) + "\" ";
html += "data-drop-close=\"true\" class=\"badge-category" + (restricted ? ' restricted' : '' ) + "\" "; html += "data-drop-close=\"true\" class=\"badge-category" + (restricted ? ' restricted' : '' ) + "\" ";
@ -100,15 +102,15 @@ Discourse.HTML = {
if (restricted) { if (restricted) {
html += "><div><i class='fa fa-group'></i> " + name + "</div></a>"; html += "><div><i class='fa fa-group'></i> " + name + "</div></a>";
} else { } else {
html += ">" + name + "</a>"; html += ">" + name + "</" + elem + ">";
} }
if (opts.showParent && category.get('parent_category_id')) { if (opts.showParent && category.get('parent_category_id')) {
var parent = Discourse.Category.findById(category.get('parent_category_id')); var parent = Discourse.Category.findById(category.get('parent_category_id'));
html = "<span class='badge-wrapper'><a class='badge-category-parent' style=\"" + (Discourse.HTML.categoryStyle(parent)||'') + html = "<span class='badge-wrapper'><" + elem + " class='badge-category-parent' style=\"" + (Discourse.HTML.categoryStyle(parent)||'') +
"\" href=\"" + url + "\"><span class='category-name'>" + "\" href=\"" + (opts.link === false ? '' : url) + "\"><span class='category-name'>" +
(Em.get(parent, 'read_restricted') ? "<i class='fa fa-group'></i> " : "") + (Em.get(parent, 'read_restricted') ? "<i class='fa fa-group'></i> " : "") +
Em.get(parent, 'name') + "</span></a>" + Em.get(parent, 'name') + "</span></" + elem + ">" +
html + "</span>"; html + "</span>";
} }

10
app/assets/javascripts/discourse/views/category_chooser_view.js
View File

@ -9,7 +9,7 @@
Discourse.CategoryChooserView = Discourse.ComboboxView.extend({ Discourse.CategoryChooserView = Discourse.ComboboxView.extend({
classNames: ['combobox category-combobox'], classNames: ['combobox category-combobox'],
overrideWidths: true, overrideWidths: true,
dataAttributes: ['name', 'color', 'text_color', 'description_text', 'topic_count', 'read_restricted'], dataAttributes: ['id', 'description_text'],
valueBinding: Ember.Binding.oneWay('source'), valueBinding: Ember.Binding.oneWay('source'),
content: Em.computed.filter('categories', function(c) { content: Em.computed.filter('categories', function(c) {
@ -37,12 +37,12 @@ Discourse.CategoryChooserView = Discourse.ComboboxView.extend({
}.property(), }.property(),
template: function(text, templateData) { template: function(text, templateData) {
if (!templateData.color) return text; var category = Discourse.Category.findById(parseInt(templateData.id,10));
if (!category) return text;
var result = "<div class='badge-category' style='background-color: #" + templateData.color + '; color: #' + var result = Discourse.HTML.categoryBadge(category, {showParent: true, link: false});
templateData.text_color + ";'>" + (templateData.read_restricted === 'true' ? "<i class='fa fa-group'></i> " : "") + templateData.name + "</div>";
result += " <div class='topic-count'>&times; " + templateData.topic_count + "</div>"; result += " <div class='topic-count'>&times; " + category.get('topic_count') + "</div>";
var description = templateData.description_text; var description = templateData.description_text;
// TODO wtf how can this be null? // TODO wtf how can this be null?

14
test/javascripts/lib/html_test.js
View File

@ -2,11 +2,11 @@ module("Discourse.HTML");
var html = Discourse.HTML; var html = Discourse.HTML;
test("categoryLink without a category", function() { test("categoryBadge without a category", function() {
blank(html.categoryLink(), "it returns no HTML"); blank(html.categoryBadge(), "it returns no HTML");
}); });
test("Regular categoryLink", function() { test("Regular categoryBadge", function() {
var category = Discourse.Category.create({ var category = Discourse.Category.create({
name: 'hello', name: 'hello',
id: 123, id: 123,
@ -14,7 +14,7 @@ test("Regular categoryLink", function() {
color: 'ff0', color: 'ff0',
text_color: 'f00' text_color: 'f00'
}), }),
tag = parseHTML(html.categoryLink(category))[0]; tag = parseHTML(html.categoryBadge(category))[0];
equal(tag.name, 'a', 'it creates an `a` tag'); equal(tag.name, 'a', 'it creates an `a` tag');
equal(tag.attributes['class'], 'badge-category', 'it has the correct class'); equal(tag.attributes['class'], 'badge-category', 'it has the correct class');
@ -28,7 +28,7 @@ test("Regular categoryLink", function() {
test("undefined color", function() { test("undefined color", function() {
var noColor = Discourse.Category.create({ name: 'hello', id: 123 }), var noColor = Discourse.Category.create({ name: 'hello', id: 123 }),
tag = parseHTML(html.categoryLink(noColor))[0]; tag = parseHTML(html.categoryBadge(noColor))[0];
blank(tag.attributes.style, "it has no color style because there are no colors"); blank(tag.attributes.style, "it has no color style because there are no colors");
}); });
@ -37,8 +37,8 @@ test("allowUncategorized", function() {
var uncategorized = Discourse.Category.create({name: 'uncategorized', id: 345}); var uncategorized = Discourse.Category.create({name: 'uncategorized', id: 345});
this.stub(Discourse.Site, 'currentProp').withArgs('uncategorized_category_id').returns(345); this.stub(Discourse.Site, 'currentProp').withArgs('uncategorized_category_id').returns(345);
blank(html.categoryLink(uncategorized), "it doesn't return HTML for uncategorized by default"); blank(html.categoryBadge(uncategorized), "it doesn't return HTML for uncategorized by default");
present(html.categoryLink(uncategorized, {allowUncategorized: true}), "it returns HTML"); present(html.categoryBadge(uncategorized, {allowUncategorized: true}), "it returns HTML");
}); });