Improve in-place moderation UI

This rearranges the moderation UI into logical chunks,
and improves the 'revert to original' checkboxes by:
 - hiding them unless there's some original text to revert
   to
 - displaying the text that will be reverted to in the
   appropriate input fields when checked.

Part of mysociety/FixMyStreet-Commercial#731

2 files changed, 23 insertions, 2 deletions

diff --git a/web/cobrands/sass/_base.scss b/web/cobrands/sass/_base.scss
index 6af6d88ff..a8f6e7a96 100644
--- a/web/cobrands/sass/_base.scss
+++ b/web/cobrands/sass/_base.scss
@@ -1048,6 +1048,18 @@ input.final-submit {
   }
 }
 
+.moderate-edit {
+  display: none; // gets shown by javascript
+
+  :disabled {
+    background: #ddd;
+  }
+
+  h1 input {
+    border-width: (0.125em/2); // compensate for 2em font-size on h1s
+  }
+}
+
 // map stuff
 #map_box{
   @extend .full-width;
diff --git a/web/js/moderate.js b/web/js/moderate.js
index 0be3cca8d..53277d9d9 100644
--- a/web/js/moderate.js
+++ b/web/js/moderate.js
@@ -1,3 +1,11 @@
+function toggle_original ($input, revert) {
+    $input.prop('disabled', revert);
+    if (revert) {
+        $input.data('currentValue', $input.val());
+    }
+    $input.val($input.data(revert ? 'originalValue' : 'currentValue'));
+}
+
 function setup_moderation (elem, word) {
 
     elem.each( function () {
@@ -8,10 +16,11 @@ function setup_moderation (elem, word) {
         });
 
         $elem.find('.revert-title').change( function () {
-            $elem.find('input[name=problem_title]').prop('disabled', $(this).prop('checked'));
+            toggle_original($elem.find('input[name=problem_title]'), $(this).prop('checked'));
         });
+
         $elem.find('.revert-textarea').change( function () {
-            $elem.find('textarea').prop('disabled', $(this).prop('checked'));
+            toggle_original($elem.find('textarea'), $(this).prop('checked'));
         });
 
         var hide_document = $elem.find('.hide-document');