UX: add more tag classes to topic view (#7228)

adds tag classes where there is already category-* class
This commit is contained in:
Maja Komel 2019-03-21 17:49:50 +01:00 committed by Régis Hanol
parent 252e17ea1b
commit 1f1d3909e5
5 changed files with 18 additions and 8 deletions

View File

@ -13,20 +13,24 @@ export default Ember.Component.extend({
return;
}
const slug = this.get("category.fullSlug");
const tags = this.get("tags");
this._removeClass();
if (slug) {
$("body").addClass(`category-${slug}`);
}
let classes = [];
if (slug) classes.push(`category-${slug}`);
if (tags) tags.forEach(t => classes.push(`tag-${t}`));
if (classes.length > 0) $("body").addClass(classes.join(" "));
},
@observes("category.fullSlug")
@observes("category.fullSlug", "tags")
refreshClass() {
Ember.run.scheduleOnce("afterRender", this, this._updateClass);
},
_removeClass() {
$("body").removeClass((_, css) =>
(css.match(/\bcategory-\S+/g) || []).join(" ")
(css.match(/\b(?:category|tag)-\S+/g) || []).join(" ")
);
},

View File

@ -24,7 +24,8 @@ export default Ember.Component.extend(AddArchetypeClass, Scrolling, {
"topic.is_warning",
"topic.category.read_restricted:read_restricted",
"topic.deleted:deleted-topic",
"topic.categoryClass"
"topic.categoryClass",
"topic.tagClasses"
],
menuVisible: true,
SHORT_POST: 1200,

View File

@ -225,6 +225,11 @@ const Topic = RestModel.extend({
categoryClass: fmt("category.fullSlug", "category-%@"),
@computed("tags")
tagClasses(tags) {
return tags.map(t => `tag-${t}`).join(" ");
},
@computed("url")
shareUrl(url) {
const user = Discourse.User.current();

View File

@ -1,5 +1,5 @@
{{#d-section class="navigation-container"}}
{{add-category-class category=category}}
{{add-category-tag-classes category=category}}
<section class='category-heading'>
{{#if category.uploaded_logo.url}}

View File

@ -1,6 +1,6 @@
{{#discourse-topic multiSelect=multiSelect enteredAt=enteredAt topic=model hasScrolled=hasScrolled}}
{{#if model}}
{{add-category-class category=model.category}}
{{add-category-tag-classes category=model.category tags=model.tags}}
<div class="container">
{{discourse-banner user=currentUser banner=site.banner overlay=hasScrolled hide=model.errorLoading}}
</div>