From d4a75fd58381f2964607a2937946202e34cb6f30 Mon Sep 17 00:00:00 2001
From: Zarino Zappia <mail@zarino.co.uk>
Date: Thu, 21 Apr 2016 13:39:44 +0100
Subject: 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
---
 web/cobrands/sass/_base.scss | 12 ++++++++++++
 web/js/moderate.js           | 13 +++++++++++--
 2 files changed, 23 insertions(+), 2 deletions(-)

(limited to 'web')

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');
-- 
cgit v1.2.3