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
---
 perllib/FixMyStreet/App/Controller/Report.pm |  11 +++
 templates/web/base/report/_main.html         | 115 +++++++++++++------------
 templates/web/oxfordshire/report/_main.html  | 123 ++++++++++++++-------------
 web/cobrands/sass/_base.scss                 |  12 +++
 web/js/moderate.js                           |  13 ++-
 5 files changed, 156 insertions(+), 118 deletions(-)

diff --git a/perllib/FixMyStreet/App/Controller/Report.pm b/perllib/FixMyStreet/App/Controller/Report.pm
index 475a29fb5..b3e546c2c 100644
--- a/perllib/FixMyStreet/App/Controller/Report.pm
+++ b/perllib/FixMyStreet/App/Controller/Report.pm
@@ -130,6 +130,17 @@ sub load_problem_or_display_error : Private {
     }
 
     $c->stash->{problem} = $problem;
+    if ( $c->user_exists && $c->user->has_permission_to(moderate => $problem->bodies_str) ) {
+        $c->stash->{problem_original} = $problem->find_or_new_related(
+            moderation_original_data => {
+                title => $problem->title,
+                detail => $problem->detail,
+                photo => $problem->photo,
+                anonymous => $problem->anonymous,
+            }
+        );
+    }
+
     return 1;
 }
 
diff --git a/templates/web/base/report/_main.html b/templates/web/base/report/_main.html
index 7260e619a..efff314f8 100644
--- a/templates/web/base/report/_main.html
+++ b/templates/web/base/report/_main.html
@@ -1,61 +1,40 @@
 [% moderating = c.user && c.user.has_permission_to('moderate', problem.bodies_str) %]
 
-[% IF moderating %]
-[%# TODO: extract stylesheet! %]
-<style>
-    .moderate-edit label {
-        display: inline-block;
-        height: 1em;
-        margin-top: 0;
-    }
-
-    .moderate-edit input {
-        display: inline-block;
-    }
-
-    .moderate-edit { display: none }
-    .moderate-edit :disabled {
-        background: #ddd;
-    }
-    br {
-        line-height: 0.5em;
-    }
-</style>
-[% END %]
-
 <div class="problem-header cf" problem-id="[% problem.id %]">
+
   [% IF moderating %]
-    [% original = problem.moderation_original_data %]
+    [% original = problem_original %]
     <form method="post" action="/moderate/report/[% problem.id %]">
-        <input type="button" class="btn moderate moderate-display" value="moderate">
-        <div class="moderate-edit">
-            <input type="checkbox" class="hide-document" name="problem_hide">
-            <label for="problem_hide">Hide report completely?</label>
-            <br />
-            <input type="checkbox" name="problem_show_name" [% problem.anonymous ? '' : 'checked' %]>
-            <label for="problem_show_name">Show name publicly?</label>
-            [% IF problem.photo or original.photo %]
-                <br />
-                <input type="checkbox" name="problem_show_photo" [% problem.photo ? 'checked' : '' %]>
-                <label for="problem_show_photo">Show Photo?</label>
-            [% END %]
-        </div>
+        <p class="moderate-display">
+            <input type="button" class="btn moderate" value="moderate">
+        </p>
   [% END %]
+
     <h1 class="moderate-display">[% problem.title | html %]</h1>
-    [% IF moderating %]
+
+  [% IF moderating %]
     <div class="moderate-edit">
-        [% IF problem.title != original.title %]
-        <input type="checkbox" name="problem_revert_title" class="revert-title">
-        <label for="problem_revert_title">Revert to original title</label>
-        [% END %]
-    <h1><input type="text" name="problem_title" value="[% problem.title | html %]"></h1>
+      [% IF problem.title != original.title %]
+        <label>
+            <input type="checkbox" name="problem_revert_title" class="revert-title">
+            Revert to original title
+        </label>
+      [% END %]
+        <h1><input type="text" name="problem_title" value="[% problem.title | html %]" data-original-value="[% original.title | html %]"></h1>
     </div>
-    [% END %]
+  [% END %]
 
+    <div class="moderate-edit">
+        <label>
+            <input type="checkbox" name="problem_show_name" [% problem.anonymous ? 'checked' : '' %]>
+            Hide reporter&rsquo;s name
+        </label>
+    </div>
     <p class="report_meta_info">
         [% problem.meta_line(c) | html %]
         [%- IF !problem.used_map %]; <strong>([% loc('there is no pin shown as the user did not use the map') %])</strong>[% END %]
     </p>
+
     [% IF problem.bodies_str %]
         [% INCLUDE 'report/_council_sent_info.html' %]
     [% ELSE %]
@@ -67,26 +46,50 @@
 
     [% INCLUDE 'report/_support.html' %]
 
+  [% IF moderating %]
+    [% IF problem.photo or original.photo %]
+        <p class="moderate-edit">
+            <label>
+                <input type="checkbox" name="problem_show_photo" [% problem.photo ? 'checked' : '' %]>
+                Show photo
+            </label>
+        </p>
+    [% END %]
+  [% END %]
+
     [% INCLUDE 'report/photo.html' object=problem %]
     <div class="moderate-display">
         [% add_links( problem.detail ) | html_para %]
     </div>
 
-    [% IF moderating %]
-        <div class="moderate-edit">
-        [% IF problem.detail != original.detail %]
-        <input type="checkbox" name="problem_revert_detail" class="revert-textarea">
-        <label for="problem_revert_detail">Revert to original text</label>
-        [% END %]
-        <textarea name="problem_detail">[% add_links( problem.detail ) %]</textarea>
-        </div>
+  [% IF moderating %]
+    <p class="moderate-edit">
+      [% IF problem.detail != original.detail %]
+        <label>
+            <input type="checkbox" name="problem_revert_detail" class="revert-textarea">
+            Revert to original text
+        </label>
+      [% END %]
+        <textarea name="problem_detail" data-original-value="[% original.detail | html %]">[% problem.detail | html %]</textarea>
+    </p>
 
-        <div class="moderate-edit">
+    <div class="moderate-edit">
+        <p>
+            <label>
+                <input type="checkbox" class="hide-document" name="problem_hide" [% problem.hidden ? 'checked' : '' %]>
+                Hide entire report
+            </label>
+        </p>
+        <p>
             <label for="moderation_reason">Moderation reason:</label>
             <input type="text" name="moderation_reason" placeholder="Describe why you are moderating this">
-            <input type="submit" class="red-btn" value="Moderate it">
-            <input type="button" class="btn cancel" value="cancel">
-        </div>
+        </p>
+        <p>
+            <input type="submit" class="green-btn" value="Save changes">
+            <input type="button" class="btn cancel" value="Discard changes">
+        </p>
+    </div>
+
     </form>
   [% END %]
 </div>
diff --git a/templates/web/oxfordshire/report/_main.html b/templates/web/oxfordshire/report/_main.html
index a4cb3e20b..2ff193075 100644
--- a/templates/web/oxfordshire/report/_main.html
+++ b/templates/web/oxfordshire/report/_main.html
@@ -1,61 +1,40 @@
 [% moderating = c.user && c.user.has_permission_to('moderate', problem.bodies_str) %]
 
-[% IF moderating %]
-[%# TODO: extract stylesheet! %]
-<style>
-    .moderate-edit label {
-        display: inline-block;
-        height: 1em;
-        margin-top: 0;
-    }
-
-    .moderate-edit input {
-        display: inline-block;
-    }
-
-    .moderate-edit { display: none }
-    .moderate-edit :disabled {
-        background: #ddd;
-    }
-    br {
-        line-height: 0.5em;
-    }
-</style>
-[% END %]
-
 <div class="problem-header cf" problem-id="[% problem.id %]">
+
   [% IF moderating %]
-    [% original = problem.moderation_original_data %]
+    [% original = problem_original %]
     <form method="post" action="/moderate/report/[% problem.id %]">
-        <input type="button" class="btn moderate moderate-display" value="moderate">
-        <div class="moderate-edit">
-            <input type="checkbox" class="hide-document" name="problem_hide">
-            <label for="problem_hide">Hide report completely?</label>
-            <br />
-            <input type="checkbox" name="problem_show_name" [% problem.anonymous ? '' : 'checked' %]>
-            <label for="problem_show_name">Show name publicly?</label>
-            [% IF problem.photo or original.photo %]
-                <br />
-                <input type="checkbox" name="problem_show_photo" [% problem.photo ? 'checked' : '' %]>
-                <label for="problem_show_photo">Show Photo?</label>
-            [% END %]
-        </div>
+        <p class="moderate-display">
+            <input type="button" class="btn moderate" value="moderate">
+        </p>
   [% END %]
+
     <h1 class="moderate-display">[% problem.title | html %]</h1>
-    [% IF moderating %]
+
+  [% IF moderating %]
     <div class="moderate-edit">
-        [% IF problem.title != original.title %]
-        <input type="checkbox" name="problem_revert_title" class="revert-title">
-        <label for="problem_revert_title">Revert to original title</label>
-        [% END %]
-    <h1><input type="text" name="problem_title" value="[% problem.title | html %]"></h1>
+      [% IF problem.title != original.title %]
+        <label>
+            <input type="checkbox" name="problem_revert_title" class="revert-title">
+            Revert to original title
+        </label>
+      [% END %]
+        <h1><input type="text" name="problem_title" value="[% problem.title | html %]" data-original-value="[% original.title | html %]"></h1>
     </div>
-    [% END %]
+  [% END %]
 
+    <div class="moderate-edit">
+        <label>
+            <input type="checkbox" name="problem_show_name" [% problem.anonymous ? 'checked' : '' %]>
+            Hide reporter&rsquo;s name
+        </label>
+    </div>
     <p class="report_meta_info">
         [% problem.meta_line(c) | html %]
         [%- IF !problem.used_map %]; <strong>([% loc('there is no pin shown as the user did not use the map') %])</strong>[% END %]
     </p>
+
     [% IF problem.whensent %]
         <p class="council_sent_info">[% problem.duration_string(c) %]</p>
     [% END %]
@@ -65,34 +44,58 @@
 
     [% INCLUDE 'report/_support.html' %]
 
+  [% IF moderating %]
+    [% IF problem.photo or original.photo %]
+        <p class="moderate-edit">
+            <label>
+                <input type="checkbox" name="problem_show_photo" [% problem.photo ? 'checked' : '' %]>
+                Show photo
+            </label>
+        </p>
+    [% END %]
+  [% END %]
+
     [% INCLUDE 'report/photo.html' object=problem %]
     <div class="moderate-display">
         [% add_links( problem.detail ) | html_para %]
     </div>
 
-    [% IF moderating %]
-        <div class="moderate-edit">
-        [% IF problem.detail != original.detail %]
-        <input type="checkbox" name="problem_revert_detail" class="revert-textarea">
-        <label for="problem_revert_detail">Revert to original text</label>
-        [% END %]
-        <textarea name="problem_detail">[% add_links( problem.detail ) %]</textarea>
-        </div>
+  [% IF moderating %]
+    <p class="moderate-edit">
+      [% IF problem.detail != original.detail %]
+        <label>
+            <input type="checkbox" name="problem_revert_detail" class="revert-textarea">
+            Revert to original text
+        </label>
+      [% END %]
+        <textarea name="problem_detail" data-original-value="[% original.detail | html %]">[% problem.detail | html %]</textarea>
+    </p>
 
-        <div class="moderate-edit">
+    <div class="moderate-edit">
+        <p>
+            <label>
+                <input type="checkbox" class="hide-document" name="problem_hide" [% problem.hidden ? 'checked' : '' %]>
+                Hide entire report
+            </label>
+        </p>
+        <p>
             <label for="moderation_reason">Moderation reason:</label>
             <input type="text" name="moderation_reason" placeholder="Describe why you are moderating this">
-            <input type="submit" class="red-btn" value="Moderate it">
-            <input type="button" class="btn cancel" value="cancel">
-        </div>
+        </p>
+        <p>
+            <input type="submit" class="green-btn" value="Save changes">
+            <input type="button" class="btn cancel" value="Discard changes">
+        </p>
+    </div>
+
     </form>
   [% END %]
 
   [% IF problem.bodies_str %]
-      [% INCLUDE 'report/_council_sent_info.html' %]
+    [% INCLUDE 'report/_council_sent_info.html' %]
   [% ELSE %]
-      <div class="council_info_box">
-          <p>[% loc('Not reported to council') %]</p>
-      </div>
+    <div class="council_info_box">
+        <p>[% loc('Not reported to council') %]</p>
+    </div>
   [% END %]
 </div>
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