FIX: Reformat user fields admin to have a longer form

app/assets/javascripts/admin/components/admin-form-row.js.es6

@@ -0,0 +1,3 @@
+export default Ember.Component.extend({
+  classNames: ['row']
+});

app/assets/javascripts/admin/components/admin-user-field-item.js.es6

@@ -6,6 +6,10 @@ export default Ember.Component.extend(bufferedProperty('userField'), {
   editing: Ember.computed.empty('userField.id'),
   classNameBindings: [':user-field'],
 
+  userFieldsDescription: function() {
+    return I18n.t('admin.user_fields.description');
+  }.property(),
+
   _focusOnEdit: function() {
     if (this.get('editing')) {
       Ember.run.scheduleOnce('afterRender', this, '_focusName');
@@ -36,7 +40,7 @@ export default Ember.Component.extend(bufferedProperty('userField'), {
   }.property('userField.editable', 'userField.required', 'userField.show_on_profile'),
 
   actions: {
-    save: function() {
+    save() {
       const self = this;
       const attrs = this.get('buffered').getProperties('name', 'description', 'field_type', 'editable', 'required', 'show_on_profile');
 
@@ -47,15 +51,15 @@ export default Ember.Component.extend(bufferedProperty('userField'), {
       }).catch(popupAjaxError);
     },
 
-    edit: function() {
+    edit() {
       this.set('editing', true);
     },
 
-    destroy: function() {
+    destroy() {
       this.sendAction('destroyAction', this.get('userField'));
     },
 
-    cancel: function() {
+    cancel() {
       const id = this.get('userField.id');
       if (Ember.isEmpty(id)) {
         this.sendAction('destroyAction', this.get('userField'));

app/assets/javascripts/admin/controllers/admin-user-fields.js.es6

@@ -4,27 +4,19 @@ export default Ember.ArrayController.extend({
   fieldTypes: null,
   createDisabled: Em.computed.gte('model.length', 20),
 
-  userFieldsDescription: function() {
+  _performDestroy(f, model) {
-    return I18n.t('admin.user_fields.description');
-  }.property(),
-
-  userFieldsName: function() {
-    return I18n.t('admin.user_fields.name');
-  }.property(),
-
-  _performDestroy: function(f, model) {
     return f.destroy().then(function() {
       model.removeObject(f);
     });
   },
 
   actions: {
-    createField: function() {
+    createField() {
       this.pushObject(UserField.create({ field_type: 'text' }));
     },
 
-    destroy: function(f) {
+    destroy(f) {
-      var model = this.get('model'),
+      const model = this.get('model'),
             self = this;
 
       // Only confirm if we already been saved

app/assets/javascripts/admin/templates/components/admin-form-row.hbs

@@ -0,0 +1,14 @@
+<div class='form-element-desc'>
+  {{#if label}}
+    <label>{{i18n label}}</label>
+  {{else}}
+    &nbsp;
+  {{/if}}
+</div>
+<div class='form-element'>
+  {{#if wrapLabel}}
+    <label>{{yield}}</label>
+  {{else}}
+    {{yield}}
+  {{/if}}
+</div>

app/assets/javascripts/admin/templates/components/admin-user-field-item.hbs

@@ -1,36 +1,32 @@
 {{#if editing}}
-  <div class='row'>
+  {{#admin-form-row label="admin.user_fields.type"}}
-    <div class='form-element'>
-      {{input value=buffered.name class="user-field-name" placeholder=userFieldsName}}
-    </div>
-    <div class='form-element'>
-      {{input value=buffered.description class="user-field-desc" placeholder=userFieldsDescription}}
-    </div>
-    <div class='form-element'>
     {{combo-box content=fieldTypes valueAttribute="id" value=buffered.field_type}}
-    </div>
+  {{/admin-form-row}}
-    <div class='form-element controls'>
+
+  {{#admin-form-row label="admin.user_fields.name"}}
+    {{input value=buffered.name class="user-field-name"}}
+  {{/admin-form-row}}
+
+  {{#admin-form-row label="admin.user_fields.description"}}
+    {{input value=buffered.description class="user-field-desc"}}
+  {{/admin-form-row}}
+
+  {{#admin-form-row wrapLabel="true"}}
+    {{input type="checkbox" checked=buffered.editable}} {{i18n 'admin.user_fields.editable.title'}}
+  {{/admin-form-row}}
+
+  {{#admin-form-row wrapLabel="true"}}
+    {{input type="checkbox" checked=buffered.required}} {{i18n 'admin.user_fields.required.title'}}
+  {{/admin-form-row}}
+
+  {{#admin-form-row wrapLabel="true"}}
+    {{input type="checkbox" checked=buffered.show_on_profile}} {{i18n 'admin.user_fields.show_on_profile.title'}}
+  {{/admin-form-row}}
+
+  {{#admin-form-row}}
     {{d-button action="save" class="btn-primary" icon="check" label="admin.user_fields.save"}}
     {{d-button action="cancel" class="btn-danger" icon="times" label="admin.user_fields.cancel"}}
-    </div>
+  {{/admin-form-row}}
-  </div>
-  <div class="row">
-    <div class='form-element'>
-      <label>
-        {{input type="checkbox" checked=buffered.editable}} {{i18n 'admin.user_fields.editable.title'}}
-      </label>
-    </div>
-    <div class='form-element'>
-      <label>
-        {{input type="checkbox" checked=buffered.required}} {{i18n 'admin.user_fields.required.title'}}
-      </label>
-    </div>
-    <div class='form-element'>
-      <label>
-        {{input type="checkbox" checked=buffered.show_on_profile}} {{i18n 'admin.user_fields.show_on_profile.title'}}
-      </label>
-    </div>
-  </div>
 {{else}}
   <div class="row">
     <div class='form-display'><strong>{{userField.name}}</strong></div>

app/assets/javascripts/admin/templates/user-fields.hbs

@@ -9,8 +9,10 @@
     {{/each}}
   {{/if}}
 
-  <button {{bind-attr disabled="createDisabled"}} class='btn btn-primary' {{action "createField"}}>
+  {{d-button disabled=createDisabled
-    {{fa-icon "plus"}}
+             class="btn-primary"
-    {{i18n 'admin.user_fields.create'}}
+             action="createField"
-  </button>
+             label="admin.user_fields.create"
+             icon="plus"}}
+
 </div>

app/assets/stylesheets/common/admin/admin_base.scss

@@ -1435,9 +1435,17 @@ tr.not-activated {
       float: left;
     }
 
-    .form-element {
+    .form-element, .form-element-desc {
       float: left;
       width: 25%;
+      height: 30px;
+      padding: 0.25em 0;
+    }
+
+    .form-element-desc label {
+      margin: 0.5em 1em 0 0;
+      text-align: right;
+      font-weight: bold;
     }
 
     .controls {