Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

UX: Hide category badge colors if the style is none

This commit is contained in:
Robin Ward 2017-11-02 12:49:52 -04:00
parent d85ac97dc6
commit 5a55ce65f3
2 changed files with 56 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
app/assets/javascripts/discourse/components/edit-category-general.js.es6
View File

@ -2,54 +2,69 @@ import DiscourseURL from 'discourse/lib/url';
import { buildCategoryPanel } from 'discourse/components/edit-category-panel';
import { categoryBadgeHTML } from 'discourse/helpers/category-link';
import Category from 'discourse/models/category';
import computed from 'ember-addons/ember-computed-decorators';
export default buildCategoryPanel('general', {
foregroundColors: ['FFFFFF', '000000'],
canSelectParentCategory: Em.computed.not('category.isUncategorizedCategory'),
// background colors are available as a pipe-separated string
backgroundColors: function() {
@computed
backgroundColors() {
const categories = this.site.get('categoriesList');
return this.siteSettings.category_colors.split("|").map(function(i) { return i.toUpperCase(); }).concat(
categories.map(function(c) { return c.color.toUpperCase(); }) ).uniq();
}.property(),
},
usedBackgroundColors: function() {
@computed
noCategoryStyle() {
return this.siteSettings.category_style === 'none';
},
@computed('category.id', 'category.color')
usedBackgroundColors(categoryId, categoryColor) {
const categories = this.site.get('categoriesList');
const category = this.get('category');
// If editing a category, don't include its color:
return categories.map(function(c) {
return (category.get('id') && category.get('color').toUpperCase() === c.color.toUpperCase()) ? null : c.color.toUpperCase();
return (categoryId && categoryColor.toUpperCase() === c.color.toUpperCase()) ? null : c.color.toUpperCase();
}, this).compact();
}.property('category.id', 'category.color'),
},
parentCategories: function() {
@computed
parentCategories() {
return this.site.get('categoriesList').filter(c => !c.get('parentCategory'));
}.property(),
},
categoryBadgePreview: function() {
@computed(
'category.parent_category_id',
'category.categoryName',
'category.color',
'category.text_color'
)
categoryBadgePreview(parentCategoryId, name, color, textColor) {
const category = this.get('category');
const c = Category.create({
name: category.get('categoryName'),
color: category.get('color'),
text_color: category.get('text_color'),
parent_category_id: parseInt(category.get('parent_category_id'),10),
name,
color,
text_color: textColor,
parent_category_id: parseInt(parentCategoryId),
read_restricted: category.get('read_restricted')
});
return categoryBadgeHTML(c, {link: false});
}.property('category.parent_category_id', 'category.categoryName', 'category.color', 'category.text_color'),
return categoryBadgeHTML(c, { link: false });
},
// We can change the parent if there are no children
subCategories: function() {
if (Ember.isEmpty(this.get('category.id'))) { return null; }
return Category.list().filterBy('parent_category_id', this.get('category.id'));
}.property('category.id'),
@computed('category.id')
subCategories(categoryId) {
if (Ember.isEmpty(categoryId)) { return null; }
return Category.list().filterBy('parent_category_id', categoryId);
},
showDescription: function() {
return !this.get('category.isUncategorizedCategory') && this.get('category.id');
}.property('category.isUncategorizedCategory', 'category.id'),
@computed('category.isUncategorizedCategory', 'category.id')
showDescription(isUncategorizedCategory, categoryId) {
return !isUncategorizedCategory && categoryId;
},
actions: {
showCategoryTopic() {

34
app/assets/javascripts/discourse/templates/components/edit-category-general.hbs
View File

@ -37,28 +37,30 @@
{{i18n 'category.no_description'}}
{{/if}}
{{#if category.topic_url}}
<br/>
<br>
{{d-button class="btn-small" action="showCategoryTopic" icon="pencil" label="category.change_in_category_topic"}}
{{/if}}
</section>
{{/if}}
<section class='field'>
<label>{{i18n 'category.badge_colors'}}</label>
<div class="category-color-editor">
{{{categoryBadgePreview}}}
{{#unless noCategoryStyle}}
<section class='field'>
<label>{{i18n 'category.badge_colors'}}</label>
<div class="category-color-editor">
{{{categoryBadgePreview}}}
<div class='input-prepend input-append' style="margin-top: 10px;">
<span class='color-title'>{{i18n 'category.background_color'}}:</span>
<span class='add-on'>#</span>{{text-field value=category.color placeholderKey="category.color_placeholder" maxlength="6"}}
{{color-picker colors=backgroundColors usedColors=usedBackgroundColors value=category.color}}
</div>
<div class='input-prepend input-append' style="margin-top: 10px;">
<span class='color-title'>{{i18n 'category.background_color'}}:</span>
<span class='add-on'>#</span>{{text-field value=category.color placeholderKey="category.color_placeholder" maxlength="6"}}
{{color-picker colors=backgroundColors usedColors=usedBackgroundColors value=category.color}}
</div>
<div class='input-prepend input-append'>
<span class='color-title'>{{i18n 'category.foreground_color'}}:</span>
<span class='add-on'>#</span>{{text-field value=category.text_color placeholderKey="category.color_placeholder" maxlength="6"}}
{{color-picker colors=foregroundColors value=category.text_color id='edit-text-color'}}
<div class='input-prepend input-append'>
<span class='color-title'>{{i18n 'category.foreground_color'}}:</span>
<span class='add-on'>#</span>{{text-field value=category.text_color placeholderKey="category.color_placeholder" maxlength="6"}}
{{color-picker colors=foregroundColors value=category.text_color id='edit-text-color'}}
</div>
</div>
</div>
</section>
</section>
{{/unless}}
</form>