New sub-category badges in category chooser. Normalize category badge rendering code.
This commit is contained in:
parent
ac32b1c5a5
commit
86244e3a4b
|
@ -23,7 +23,7 @@ Discourse.CategoryGroupComponent = Ember.Component.extend({
|
|||
},
|
||||
template: Discourse.CategoryGroupComponent.templateFunction(),
|
||||
transformComplete: function(category) {
|
||||
return Discourse.HTML.categoryLink(category, {allowUncategorized: true});
|
||||
return Discourse.HTML.categoryBadge(category, {allowUncategorized: true});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
|
|
@ -46,8 +46,8 @@ Discourse.HistoryController = Discourse.ObjectController.extend(Discourse.ModalF
|
|||
|
||||
var raw = "";
|
||||
var opts = { allowUncategorized: true };
|
||||
prevCategory = Discourse.HTML.categoryLink(prevCategory, opts);
|
||||
curCategory = Discourse.HTML.categoryLink(curCategory, opts);
|
||||
prevCategory = Discourse.HTML.categoryBadge(prevCategory, opts);
|
||||
curCategory = Discourse.HTML.categoryBadge(curCategory, opts);
|
||||
|
||||
if(viewMode === "side_by_side_markdown" || viewMode === "side_by_side") {
|
||||
raw = "<div class='span8'>" + prevCategory + "</div> <div class='span8 offset1'>" + curCategory + "</div>";
|
||||
|
|
|
@ -76,17 +76,14 @@ Handlebars.registerHelper('topicLink', function(property, options) {
|
|||
function categoryLinkHTML(category, options) {
|
||||
var categoryOptions = {};
|
||||
if (options.hash) {
|
||||
if (options.hash.allowUncategorized) {
|
||||
categoryOptions.allowUncategorized = true;
|
||||
}
|
||||
if (options.hash.showParent) {
|
||||
categoryOptions.showParent = true;
|
||||
}
|
||||
if (options.hash.allowUncategorized) { categoryOptions.allowUncategorized = true; }
|
||||
if (options.hash.showParent) { categoryOptions.showParent = true; }
|
||||
if (options.hash.link !== undefined) { categoryOptions.link = options.hash.link; }
|
||||
if (options.hash.categories) {
|
||||
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) {
|
||||
var category = Em.Handlebars.get(this, property, options),
|
||||
style = Discourse.HTML.categoryStyle(category);
|
||||
return new Handlebars.SafeString("<span class='badge-category' style='" + style + "'>" + category.get('name') + "</span>");
|
||||
options.hash.link = false;
|
||||
return categoryLinkHTML(Ember.Handlebars.get(this, property, options), options);
|
||||
});
|
||||
|
||||
|
||||
/**
|
||||
Produces a bound link to a category
|
||||
|
||||
|
|
|
@ -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 {Object} opts The options for the category link
|
||||
@param {Boolean} opts.allowUncategorized Whether we allow rendering of the uncategorized category
|
||||
@param {Boolean} opts.showParent Whether to visually show whether category is a sub-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 (default false)
|
||||
@param {Boolean} opts.link Whether this category badge should link to the category (default true)
|
||||
@returns {String} the html category badge
|
||||
**/
|
||||
categoryLink: function(category, opts) {
|
||||
categoryBadge: function(category, opts) {
|
||||
opts = opts || {};
|
||||
|
||||
if ((!category) ||
|
||||
|
@ -85,7 +86,8 @@ Discourse.HTML = {
|
|||
description = Em.get(category, 'description'),
|
||||
restricted = Em.get(category, 'read_restricted'),
|
||||
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' : '' ) + "\" ";
|
||||
|
||||
|
@ -100,15 +102,15 @@ Discourse.HTML = {
|
|||
if (restricted) {
|
||||
html += "><div><i class='fa fa-group'></i> " + name + "</div></a>";
|
||||
} else {
|
||||
html += ">" + name + "</a>";
|
||||
html += ">" + name + "</" + elem + ">";
|
||||
}
|
||||
|
||||
if (opts.showParent && 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)||'') +
|
||||
"\" href=\"" + url + "\"><span class='category-name'>" +
|
||||
html = "<span class='badge-wrapper'><" + elem + " class='badge-category-parent' style=\"" + (Discourse.HTML.categoryStyle(parent)||'') +
|
||||
"\" href=\"" + (opts.link === false ? '' : url) + "\"><span class='category-name'>" +
|
||||
(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>";
|
||||
}
|
||||
|
||||
|
|
|
@ -9,7 +9,7 @@
|
|||
Discourse.CategoryChooserView = Discourse.ComboboxView.extend({
|
||||
classNames: ['combobox category-combobox'],
|
||||
overrideWidths: true,
|
||||
dataAttributes: ['name', 'color', 'text_color', 'description_text', 'topic_count', 'read_restricted'],
|
||||
dataAttributes: ['id', 'description_text'],
|
||||
valueBinding: Ember.Binding.oneWay('source'),
|
||||
|
||||
content: Em.computed.filter('categories', function(c) {
|
||||
|
@ -37,12 +37,12 @@ Discourse.CategoryChooserView = Discourse.ComboboxView.extend({
|
|||
}.property(),
|
||||
|
||||
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: #' +
|
||||
templateData.text_color + ";'>" + (templateData.read_restricted === 'true' ? "<i class='fa fa-group'></i> " : "") + templateData.name + "</div>";
|
||||
var result = Discourse.HTML.categoryBadge(category, {showParent: true, link: false});
|
||||
|
||||
result += " <div class='topic-count'>× " + templateData.topic_count + "</div>";
|
||||
result += " <div class='topic-count'>× " + category.get('topic_count') + "</div>";
|
||||
|
||||
var description = templateData.description_text;
|
||||
// TODO wtf how can this be null?
|
||||
|
|
|
@ -2,11 +2,11 @@ module("Discourse.HTML");
|
|||
|
||||
var html = Discourse.HTML;
|
||||
|
||||
test("categoryLink without a category", function() {
|
||||
blank(html.categoryLink(), "it returns no HTML");
|
||||
test("categoryBadge without a category", function() {
|
||||
blank(html.categoryBadge(), "it returns no HTML");
|
||||
});
|
||||
|
||||
test("Regular categoryLink", function() {
|
||||
test("Regular categoryBadge", function() {
|
||||
var category = Discourse.Category.create({
|
||||
name: 'hello',
|
||||
id: 123,
|
||||
|
@ -14,7 +14,7 @@ test("Regular categoryLink", function() {
|
|||
color: 'ff0',
|
||||
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.attributes['class'], 'badge-category', 'it has the correct class');
|
||||
|
@ -28,7 +28,7 @@ test("Regular categoryLink", function() {
|
|||
|
||||
test("undefined color", function() {
|
||||
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");
|
||||
});
|
||||
|
@ -37,8 +37,8 @@ test("allowUncategorized", function() {
|
|||
var uncategorized = Discourse.Category.create({name: 'uncategorized', id: 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");
|
||||
present(html.categoryLink(uncategorized, {allowUncategorized: true}), "it returns HTML");
|
||||
blank(html.categoryBadge(uncategorized), "it doesn't return HTML for uncategorized by default");
|
||||
present(html.categoryBadge(uncategorized, {allowUncategorized: true}), "it returns HTML");
|
||||
});
|
||||
|
||||
|
||||
|
|
Loading…
Reference in New Issue