UX: Hide category badge colors if the style is none

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

@@ -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'),
+      name,
-      color: category.get('color'),
+      color,
-      text_color: category.get('text_color'),
+      text_color: textColor,
-      parent_category_id: parseInt(category.get('parent_category_id'),10),
+      parent_category_id: parseInt(parentCategoryId),
       read_restricted: category.get('read_restricted')
     });
-    return categoryBadgeHTML(c, {link: false});
+    return categoryBadgeHTML(c, { link: false });
-  }.property('category.parent_category_id', 'category.categoryName', 'category.color', 'category.text_color'),
+  },
-
 
   // We can change the parent if there are no children
-  subCategories: function() {
+  @computed('category.id')
-    if (Ember.isEmpty(this.get('category.id'))) { return null; }
+  subCategories(categoryId) {
-    return Category.list().filterBy('parent_category_id', this.get('category.id'));
+    if (Ember.isEmpty(categoryId)) { return null; }
-  }.property('category.id'),
+    return Category.list().filterBy('parent_category_id', categoryId);
+  },
 
-  showDescription: function() {
+  @computed('category.isUncategorizedCategory', 'category.id')
-    return !this.get('category.isUncategorizedCategory') && this.get('category.id');
+  showDescription(isUncategorizedCategory, categoryId) {
-  }.property('category.isUncategorizedCategory', 'category.id'),
+    return !isUncategorizedCategory && categoryId;
+  },
 
   actions: {
     showCategoryTopic() {

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

@@ -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'>
+  {{#unless noCategoryStyle}}
-    <label>{{i18n 'category.badge_colors'}}</label>
+    <section class='field'>
-    <div class="category-color-editor">
+      <label>{{i18n 'category.badge_colors'}}</label>
-      {{{categoryBadgePreview}}}
+      <div class="category-color-editor">
+        {{{categoryBadgePreview}}}
 
-      <div class='input-prepend input-append' style="margin-top: 10px;">
+        <div class='input-prepend input-append' style="margin-top: 10px;">
-        <span class='color-title'>{{i18n 'category.background_color'}}:</span>
+          <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"}}
+          <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}}
+          {{color-picker colors=backgroundColors usedColors=usedBackgroundColors value=category.color}}
-      </div>
+        </div>
 
-      <div class='input-prepend input-append'>
+        <div class='input-prepend input-append'>
-        <span class='color-title'>{{i18n 'category.foreground_color'}}:</span>
+          <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"}}
+          <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'}}
+          {{color-picker colors=foregroundColors value=category.text_color id='edit-text-color'}}
+        </div>
       </div>
-    </div>
+    </section>
-  </section>
+  {{/unless}}
 </form>