[#94,trasnform][s]: show before / after side by side rather than above and below.

css/transform.css

@@ -29,3 +29,11 @@
   color: red;
 }
 
+.recline-transform .before-after .after {
+  font-style: italic;
+}
+
+.recline-transform .before-after .after.different {
+  font-weight: bold;
+}
+

src/view.transform.js

@@ -66,32 +66,28 @@ my.Transform = Backbone.View.extend({
   },
 
   editPreviewTemplate: ' \
-      <table class="table table-condensed table-bordered"> \
+      <table class="table table-condensed table-bordered before-after"> \
       <thead> \
       <tr> \
-        <th></th> \
+        <th>Field</th> \
-        {{#fields}} \
+        <th>Before</th> \
-          <th>{{id}}</th> \
+        <th>After</th> \
-        {{/fields}} \
       </tr> \
       </thead> \
       <tbody> \
+      {{#row}} \
       <tr> \
-        <th>Before</th> \
+        <td> \
-        {{#row.before}} \
+          {{field}} \
-        <td class="expression-preview-value"> \
-            {{.}} \
         </td> \
-        {{/row.before}} \
+        <td class="before {{#different}}different{{/different}}"> \
-      </tr> \
+          {{before}} \
-      <tr> \
+        </td> \
-        <th>After</th> \
+        <td class="after {{#different}}different{{/different}}"> \
-        {{#row.after}} \
+          {{after}} \
-        <td class="expression-preview-value"> \
-            {{.}} \
         </td> \
-        {{/row.after}} \
       </tr> \
+      {{/row}} \
       </tbody> \
       </table> \
   ',
@@ -111,19 +107,18 @@ my.Transform = Backbone.View.extend({
         var $el = self.el.find('.expression-preview-container');
         var fields = self.model.fields.toJSON();
         var rows = _.map(previewData.slice(0,4), function(row) {
+          return _.map(fields, function(field) {
             return {
-            before: _.map(fields, function(field) {
+              field: field.id,
-              return row.before[field.id];
+              before: row.before[field.id],
-            }),
+              after: row.after[field.id],
-            after: _.map(fields, function(field) {
+              different: !_.isEqual(row.before[field.id], row.after[field.id])
-              return row.after[field.id];
+            }
-            })
+          });
-          };
         });
         $el.html('');
         _.each(rows, function(row) {
           var templated = Mustache.render(self.editPreviewTemplate, {
-            fields: fields,
             row: row
           });
           $el.append(templated);