From f22618050fcea1308b50a0e910116a0cd0577881 Mon Sep 17 00:00:00 2001
From: Robin Ward <robin.ward@gmail.com>
Date: Mon, 27 Jul 2015 14:22:12 -0400
Subject: [PATCH] FIX: Reformat user fields admin to have a longer form

---
 .../admin/components/admin-form-row.js.es6    |  3 +
 .../components/admin-user-field-item.js.es6   | 12 ++--
 .../controllers/admin-user-fields.js.es6      | 18 ++----
 .../templates/components/admin-form-row.hbs   | 14 +++++
 .../components/admin-user-field-item.hbs      | 60 +++++++++----------
 .../admin/templates/user-fields.hbs           | 10 ++--
 .../stylesheets/common/admin/admin_base.scss  | 10 +++-
 7 files changed, 73 insertions(+), 54 deletions(-)
 create mode 100644 app/assets/javascripts/admin/components/admin-form-row.js.es6
 create mode 100644 app/assets/javascripts/admin/templates/components/admin-form-row.hbs

diff --git a/app/assets/javascripts/admin/components/admin-form-row.js.es6 b/app/assets/javascripts/admin/components/admin-form-row.js.es6
new file mode 100644
index 000000000..e7cef2edb
--- /dev/null
+++ b/app/assets/javascripts/admin/components/admin-form-row.js.es6
@@ -0,0 +1,3 @@
+export default Ember.Component.extend({
+  classNames: ['row']
+});
diff --git a/app/assets/javascripts/admin/components/admin-user-field-item.js.es6 b/app/assets/javascripts/admin/components/admin-user-field-item.js.es6
index bc96a0fc7..f4d93d9c7 100644
--- a/app/assets/javascripts/admin/components/admin-user-field-item.js.es6
+++ b/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'));
diff --git a/app/assets/javascripts/admin/controllers/admin-user-fields.js.es6 b/app/assets/javascripts/admin/controllers/admin-user-fields.js.es6
index 0eb041c55..2990dc180 100644
--- a/app/assets/javascripts/admin/controllers/admin-user-fields.js.es6
+++ b/app/assets/javascripts/admin/controllers/admin-user-fields.js.es6
@@ -4,28 +4,20 @@ export default Ember.ArrayController.extend({
   fieldTypes: null,
   createDisabled: Em.computed.gte('model.length', 20),
 
-  userFieldsDescription: function() {
-    return I18n.t('admin.user_fields.description');
-  }.property(),
-
-  userFieldsName: function() {
-    return I18n.t('admin.user_fields.name');
-  }.property(),
-
-  _performDestroy: function(f, model) {
+  _performDestroy(f, model) {
     return f.destroy().then(function() {
       model.removeObject(f);
     });
   },
 
   actions: {
-    createField: function() {
+    createField() {
       this.pushObject(UserField.create({ field_type: 'text' }));
     },
 
-    destroy: function(f) {
-      var model = this.get('model'),
-          self = this;
+    destroy(f) {
+      const model = this.get('model'),
+            self = this;
 
       // Only confirm if we already been saved
       if (f.get('id')) {
diff --git a/app/assets/javascripts/admin/templates/components/admin-form-row.hbs b/app/assets/javascripts/admin/templates/components/admin-form-row.hbs
new file mode 100644
index 000000000..d9ea5d585
--- /dev/null
+++ b/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>
diff --git a/app/assets/javascripts/admin/templates/components/admin-user-field-item.hbs b/app/assets/javascripts/admin/templates/components/admin-user-field-item.hbs
index 8e1bd8c17..a5754befa 100644
--- a/app/assets/javascripts/admin/templates/components/admin-user-field-item.hbs
+++ b/app/assets/javascripts/admin/templates/components/admin-user-field-item.hbs
@@ -1,36 +1,32 @@
 {{#if editing}}
-  <div class='row'>
-    <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>
-    <div class='form-element controls'>
-      {{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>
-  </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>
+  {{#admin-form-row label="admin.user_fields.type"}}
+    {{combo-box content=fieldTypes valueAttribute="id" value=buffered.field_type}}
+  {{/admin-form-row}}
+
+  {{#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"}}
+  {{/admin-form-row}}
 {{else}}
   <div class="row">
     <div class='form-display'><strong>{{userField.name}}</strong></div>
diff --git a/app/assets/javascripts/admin/templates/user-fields.hbs b/app/assets/javascripts/admin/templates/user-fields.hbs
index 7f6bab02f..20ce1beb3 100644
--- a/app/assets/javascripts/admin/templates/user-fields.hbs
+++ b/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"}}>
-    {{fa-icon "plus"}}
-    {{i18n 'admin.user_fields.create'}}
-  </button>
+  {{d-button disabled=createDisabled
+             class="btn-primary"
+             action="createField"
+             label="admin.user_fields.create"
+             icon="plus"}}
+
 </div>
diff --git a/app/assets/stylesheets/common/admin/admin_base.scss b/app/assets/stylesheets/common/admin/admin_base.scss
index cfa12003c..bcd9a529e 100644
--- a/app/assets/stylesheets/common/admin/admin_base.scss
+++ b/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 {