UX: tidy up the category settings tab

app/assets/javascripts/discourse/components/auto-close-form.js.es6

@@ -1,25 +1,29 @@
+import computed from "ember-addons/ember-computed-decorators";
+import { observes } from "ember-addons/ember-computed-decorators";
+
 export default Ember.Component.extend({
   autoCloseValid: false,
   limited: false,
 
-  autoCloseUnits: function() {
+  @computed("limited")
-    var key = this.get("limited") ? "composer.auto_close.limited.units"
+  autoCloseUnits(limited) {
-                                  : "composer.auto_close.all.units";
+    const key = limited ? "composer.auto_close.limited.units" : "composer.auto_close.all.units";
     return I18n.t(key);
-  }.property("limited"),
+  },
 
-  autoCloseExamples: function() {
+  @computed("limited")
-    var key = this.get("limited") ? "composer.auto_close.limited.examples"
+  autoCloseExamples(limited) {
-                                  : "composer.auto_close.all.examples";
+    const key = limited ? "composer.auto_close.limited.examples" : "composer.auto_close.all.examples";
     return I18n.t(key);
-  }.property("limited"),
+  },
 
-  _updateAutoCloseValid: function() {
+  @observes("autoCloseTime", "limited")
-    var isValid = this._isAutoCloseValid(this.get("autoCloseTime"), this.get("limited"));
+  _updateAutoCloseValid(autoCloseTime, limited) {
+    var isValid = this._isAutoCloseValid(autoCloseTime, limited);
     this.set("autoCloseValid", isValid);
-  }.observes("autoCloseTime", "limited"),
+  },
 
-  _isAutoCloseValid: function(autoCloseTime, limited) {
+  _isAutoCloseValid(autoCloseTime, limited) {
     var t = (autoCloseTime || "").toString().trim();
     if (t.length === 0) {
       // "empty" is always valid

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

@@ -1,54 +1,61 @@
 <section class='field'>
   {{auto-close-form autoCloseTime=category.auto_close_hours
                     autoCloseBasedOnLastPost=category.auto_close_based_on_last_post
+                    autoCloseExamples=""
                     limited="true" }}
 </section>
 
 <section class='field'>
-  <div class="allow-badges">
+  <label>
-    <div>
+    {{input type="checkbox" checked=category.allow_badges}}
-      {{input type="checkbox" checked=category.allow_badges}}
+    {{i18n 'category.allow_badges_label'}}
-      {{i18n 'category.allow_badges_label'}}
+  </label>
-    </div>
-  </div>
-</section>
-
-<section class='field'>
-  <div class="email-in-fields">
-    {{#if emailInEnabled}}
-      <div>
-        <i class="fa fa-envelope-o"></i>
-        {{i18n 'category.email_in'}}
-        {{text-field value=category.email_in}}
-      </div>
-      <div>
-        <label class="checkbox-label">
-          {{input type="checkbox" checked=category.email_in_allow_strangers}}
-          {{i18n 'category.email_in_allow_strangers'}}
-        </label>
-      </div>
-    {{else}}
-      {{i18n 'category.email_in_disabled'}}
-      <a href="/admin/site_settings/category/email">{{i18n 'category.email_in_disabled_click'}}</a>
-    {{/if}}
-  </div>
-</section>
-
-<section class='field'>
-  {{#if showPositionInput}}
-    <label>{{i18n 'category.position'}}</label>
-    {{text-field value=category.position class="position-input"}}
-  {{else}}
-    {{i18n 'category.position_disabled'}}
-    <a href="/admin/site_settings/category/basic">{{i18n 'category.position_disabled_click'}}</a>
-  {{/if}}
 </section>
 
 <section class="field">
-  <label class="checkbox-label">
+  <label>
     {{input type="checkbox" checked=category.suppress_from_homepage}}
     {{i18n "category.suppress_from_homepage"}}
   </label>
 </section>
 
+{{#if emailInEnabled}}
+  <section class='field'>
+    <label>
+      {{input type="checkbox" checked=category.email_in_allow_strangers}}
+      {{i18n 'category.email_in_allow_strangers'}}
+    </label>
+  </section>
+  <section class='field'>
+    <label>
+      {{fa-icon "envelope-o"}}
+      {{i18n 'category.email_in'}}
+      {{text-field value=category.email_in}}
+    </label>
+  </section>
+{{/if}}
+
+{{#if showPositionInput}}
+  <section class='field'>
+    <label>
+      {{i18n 'category.position'}}
+      {{text-field value=category.position class="position-input"}}
+    </label>
+  </section>
+{{/if}}
+
+{{#unless emailInEnabled}}
+  <section class='field'>
+    {{i18n 'category.email_in_disabled'}}
+    <a href="/admin/site_settings/category/email">{{i18n 'category.email_in_disabled_click'}}</a>
+  </section>
+{{/unless}}
+
+{{#unless showPositionInput}}
+  <section class='field'>
+    {{i18n 'category.position_disabled'}}
+    <a href="/admin/site_settings/category/basic">{{i18n 'category.position_disabled_click'}}</a>
+  </section>
+{{/unless}}
+
 {{plugin-outlet "category-custom-settings"}}

app/assets/stylesheets/common/base/compose.scss

@@ -130,6 +130,9 @@ div.ac-wrap {
     input[type=text] {
       width: 50px;
     }
+    label {
+      font-size: .929em;
+    }
   }
 }