Fixed the configs to be double click to edit.

Fixed the templates to not use IDs as selectors (BAD)

Fixed the underscore values for inputs to be HTML-escaped

Centered the table rows

4 files changed, 35 insertions, 29 deletions

diff --git a/src/fauxton/app/addons/config/assets/less/config.less b/src/fauxton/app/addons/config/assets/less/config.less
index 88bbc6641..651cbe321 100644
--- a/src/fauxton/app/addons/config/assets/less/config.less
+++ b/src/fauxton/app/addons/config/assets/less/config.less
@@ -11,19 +11,17 @@
  *  the License.
  */
 .config-item {
-  height: 41px;
+  height: 65px;
 
-  td:hover .edit-button {
-    display: block;
+  .js-value-input {
+    width: 80%;
+    margin: 0;
   }
-
-  .value-input {
-    width: 98%;
-  }
-
-  #delete-value {
+  .js-show-value,
+  .js-delete-value {
     cursor: pointer;
   }
+  button {width: 7%;}
 }
 
 #add-section-modal {
@@ -33,3 +31,11 @@
 #config-trash {
   width: 5%;
 }
+
+table.config {
+  tr {
+    th, td {
+      vertical-align: middle;
+    }
+  }
+}
diff --git a/src/fauxton/app/addons/config/resources.js b/src/fauxton/app/addons/config/resources.js
index 227e80dbe..b5c0b6c66 100644
--- a/src/fauxton/app/addons/config/resources.js
+++ b/src/fauxton/app/addons/config/resources.js
@@ -81,10 +81,10 @@ function (app, FauxtonAPI) {
     template: "addons/config/templates/item",
 
     events: {
-      "click .edit-button": "editValue",
-      "click #delete-value": "deleteValue",
-      "click #cancel-value": "cancelEdit",
-      "click #save-value": "saveValue"
+      "dblclick .js-edit-value": "editValue",
+      "click .js-delete-value": "deleteValue",
+      "click .js-cancel-value": "cancelEdit",
+      "click .js-save-value": "saveValue"
     },
 
     deleteValue: function (event) {
@@ -97,18 +97,18 @@ function (app, FauxtonAPI) {
     },
 
     editValue: function (event) {
-      this.$("#show-value").hide();
-      this.$("#edit-value-form").show();
+      this.$(".js-show-value").hide();
+      this.$(".js-edit-value-form").show();
     },
 
     saveValue: function (event) {
-      this.model.save({value: this.$(".value-input").val()});
+      this.model.save({value: this.$(".js-value-input").val()});
       this.render();
     },
 
     cancelEdit: function (event) {
-      this.$("#edit-value-form").hide();
-      this.$("#show-value").show();
+      this.$(".js-edit-value-form").hide();
+      this.$(".js-show-value").show();
     },
 
     serialize: function () {
diff --git a/src/fauxton/app/addons/config/templates/dashboard.html b/src/fauxton/app/addons/config/templates/dashboard.html
index b7dbc55f4..c14402c19 100644
--- a/src/fauxton/app/addons/config/templates/dashboard.html
+++ b/src/fauxton/app/addons/config/templates/dashboard.html
@@ -20,8 +20,8 @@ the License.
 </div>
 <table class="config table table-striped table-bordered">
   <thead>
-    <th id="config-section"> Section </th>
-    <th id="config-option"> Option </th>
+    <th id="config-section" width="20%"> Section </th>
+    <th id="config-option" width="20%"> Option </th>
     <th id="config-value"> Value </th>
     <th id="config-trash"></th>
   </thead>
diff --git a/src/fauxton/app/addons/config/templates/item.html b/src/fauxton/app/addons/config/templates/item.html
index 502c9b35a..a628fe69c 100644
--- a/src/fauxton/app/addons/config/templates/item.html
+++ b/src/fauxton/app/addons/config/templates/item.html
@@ -17,15 +17,15 @@ the License.
 <% } else { %>
 <td></td>
 <% } %>
-<td> <%= option.name %> </td>
-<td>
-  <div id="show-value">
-    <%= option.value %> <button class="btn btn-mini pull-right hide edit-button"> Edit </button>
+<td > <%= option.name %> </td>
+<td class="js-edit-value">
+  <div class="js-show-value">
+    <%= option.value %> 
   </div>
-  <div id="edit-value-form" style="display:none">
-    <input class="value-input" type="text" value="<%= option.value %>" />
-    <button id="save-value" class="btn btn-success btn-small"> Save </button>
-    <button id="cancel-value" class="btn btn-small"> Cancel </button>
+  <div class="js-edit-value-form" style="display:none">
+    <input class="js-value-input" type="text" value="<%- option.value %>" />
+    <button class="js-save-value btn btn-success fonticon-circle-check btn-small"> </button>
+    <button class="js-cancel-value btn btn-small fonticon-circle-x"> </button>
   </div>
 </td>
-<td id="delete-value" class="text-center"> <i class="icon-trash"> </i> </td>
+<td class="js-delete-value" class="text-center"> <i class="icon-trash"> </i> </td>