Show shortlist icons in button on report page

9 files changed, 50 insertions, 8 deletions

diff --git a/templates/web/base/report/_main.html b/templates/web/base/report/_main.html
index e232a575c..9431ef2ce 100644
--- a/templates/web/base/report/_main.html
+++ b/templates/web/base/report/_main.html
@@ -19,12 +19,16 @@
         data-label-add="[% loc('Add to shortlist') %]"
         data-value-remove="[% loc('Shortlisted') %]"
         data-value-add="[% loc('Shortlist') %]"
+        data-class-remove="btn--shortlisted"
+        data-class-add="btn--shortlist"
     [%~ IF c.user.is_planned_report(problem) ~%]
         value="[% loc('Shortlisted') %]"
         aria-label="[% loc('Remove from shortlist') %]"
+        class="btn--shortlisted"
     [%~ ELSE ~%]
         value="[% loc('Shortlist') %]"
         aria-label="[% loc('Add to shortlist') %]"
+        class="btn--shortlist"
     [%~ END ~%]
     ></p>
 </form>
@@ -127,9 +131,9 @@
       [% END %]
       [% IF c.user.has_permission_to('planned_reports', problem.bodies_str_ids) %]
           [%~ IF c.user.is_planned_report(problem) ~%]
-            <label class="btn" for="shortlist-report" role="menuitem" aria-label="[% loc('Remove from shortlist') %]">[% loc('Shortlisted') %]</label>
+            <label class="btn btn--shortlisted" for="shortlist-report" role="menuitem" aria-label="[% loc('Remove from shortlist') %]">[% loc('Shortlisted') %]</label>
           [%~ ELSE ~%]
-            <label class="btn" for="shortlist-report" role="menuitem" aria-label="[% loc('Add to shortlist') %]">[% loc('Shortlist') %]</label>
+            <label class="btn btn--shortlist" for="shortlist-report" role="menuitem" aria-label="[% loc('Add to shortlist') %]">[% loc('Shortlist') %]</label>
           [%~ END ~%]
       [% END %]
     </div>
diff --git a/web/cobrands/fixmystreet/fixmystreet.js b/web/cobrands/fixmystreet/fixmystreet.js
index 1a69f895e..bec4bc295 100644
--- a/web/cobrands/fixmystreet/fixmystreet.js
+++ b/web/cobrands/fixmystreet/fixmystreet.js
@@ -328,13 +328,17 @@ $.extend(fixmystreet.set_up, {
             data = $form.serialize() + '&ajax=1',
             changeValue,
             buttonLabel,
-            buttonValue;
+            buttonValue,
+            classToAdd,
+            classToRemove;
 
         $.post(this.action, data, function(data) {
             if (data.outcome == 'add') {
                 $form.find("input[name='shortlist-add']" ).attr('name', 'shortlist-remove');
                 buttonLabel = $submit.data('label-remove');
                 buttonValue = $submit.data('value-remove');
+                classToAdd = $submit.data('class-remove');
+                classToRemove = $submit.data('class-add');
                 $('.shortlisted-status').remove();
                 $(document).trigger('shortlist-add', problemId);
             } else if (data.outcome == 'remove') {
@@ -342,9 +346,11 @@ $.extend(fixmystreet.set_up, {
                 buttonLabel = $submit.data('label-add');
                 buttonValue = $submit.data('value-add');
                 $(document).trigger('shortlist-remove', problemId);
+                classToAdd = $submit.data('class-add');
+                classToRemove = $submit.data('class-remove');
             }
-            $submit.val(buttonValue).attr('aria-label', buttonLabel);
-            $labels.text(buttonValue).attr('aria-label', buttonLabel);
+            $submit.val(buttonValue).attr('aria-label', buttonLabel).removeClass(classToRemove).addClass(classToAdd);
+            $labels.text(buttonValue).attr('aria-label', buttonLabel).removeClass(classToRemove).addClass(classToAdd);
         });
     });
   },
diff --git a/web/cobrands/fixmystreet/images/icon-shortlist-mini.png b/web/cobrands/fixmystreet/images/icon-shortlist-mini.png
new file mode 100644
index 000000000..730dd49df
--- /dev/null
+++ b/web/cobrands/fixmystreet/images/icon-shortlist-mini.png
diff --git a/web/cobrands/fixmystreet/images/icon-shortlist-mini.svg b/web/cobrands/fixmystreet/images/icon-shortlist-mini.svg
new file mode 100644
index 000000000..98b89ab2e
--- /dev/null
+++ b/web/cobrands/fixmystreet/images/icon-shortlist-mini.svg
@@ -0,0 +1 @@
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><title>icon-shortlist</title><defs><path d="M3.4 15.22L8 12.804l4.6 2.418c.19-.126.377-.262.557-.405l-.88-5.12L16 6.067c-.062-.222-.133-.44-.212-.654l-5.144-.747-2.3-4.66C8.232.003 8.117 0 8 0c-.116 0-.23.002-.345.007l-2.3 4.66-5.143.746c-.08.214-.15.432-.212.654l3.722 3.628-.88 5.12c.18.143.367.28.56.406z" id="a"/><mask id="b" x="0" y="0" width="16" height="15.221" fill="#fff"><use xlink:href="#a"/></mask></defs><use mask="url(#b)" xlink:href="#a" stroke-width="2" stroke="#000" fill="none" fill-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/web/cobrands/fixmystreet/images/icon-shortlist-mini@2x.png b/web/cobrands/fixmystreet/images/icon-shortlist-mini@2x.png
new file mode 100644
index 000000000..5a332f431
--- /dev/null
+++ b/web/cobrands/fixmystreet/images/icon-shortlist-mini@2x.png
diff --git a/web/cobrands/fixmystreet/images/icon-shortlisted-mini.png b/web/cobrands/fixmystreet/images/icon-shortlisted-mini.png
new file mode 100644
index 000000000..94cdd14fb
--- /dev/null
+++ b/web/cobrands/fixmystreet/images/icon-shortlisted-mini.png
diff --git a/web/cobrands/fixmystreet/images/icon-shortlisted-mini.svg b/web/cobrands/fixmystreet/images/icon-shortlisted-mini.svg
new file mode 100644
index 000000000..1df25d7e7
--- /dev/null
+++ b/web/cobrands/fixmystreet/images/icon-shortlisted-mini.svg
@@ -0,0 +1 @@
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><title>icon-shortlisted</title><path d="M3.4 15.22L8 12.804l4.6 2.418c.19-.126.377-.262.557-.405l-.88-5.12L16 6.067c-.062-.222-.133-.44-.212-.654l-5.144-.747-2.3-4.66C8.232.003 8.117 0 8 0c-.116 0-.23.002-.345.007l-2.3 4.66-5.143.746c-.08.214-.15.432-.212.654l3.722 3.628-.88 5.12c.18.143.367.28.56.406z" fill="#00BD08" fill-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/web/cobrands/fixmystreet/images/icon-shortlisted-mini@2x.png b/web/cobrands/fixmystreet/images/icon-shortlisted-mini@2x.png
new file mode 100644
index 000000000..8da64e9ec
--- /dev/null
+++ b/web/cobrands/fixmystreet/images/icon-shortlisted-mini@2x.png
diff --git a/web/cobrands/sass/_base.scss b/web/cobrands/sass/_base.scss
index 5d6176add..179168aae 100644
--- a/web/cobrands/sass/_base.scss
+++ b/web/cobrands/sass/_base.scss
@@ -767,7 +767,9 @@ input.final-submit {
 }
 
 .btn--navigate,
-.btn--geolocate {
+.btn--geolocate,
+.btn--shortlist,
+.btn--shortlisted {
     &:before {
         content: "";
         display: inline-block;
@@ -779,7 +781,7 @@ input.final-submit {
         vertical-align: -0.1em; // vertically centre icon in button
 
         @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
-            background-image: url(/cobrands/fixmystreet/images/navigate@2.png);
+            background-image: url(/cobrands/fixmystreet/images/navigate@2x.png);
         }
 
         @media all {
@@ -793,7 +795,7 @@ input.final-submit {
         background-image: url(/cobrands/fixmystreet/images/crosshairs.png);
 
         @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
-            background-image: url(/cobrands/fixmystreet/images/crosshairs@2.png);
+            background-image: url(/cobrands/fixmystreet/images/crosshairs@2x.png);
         }
 
         @media all {
@@ -802,6 +804,34 @@ input.final-submit {
     }
 }
 
+.btn--shortlist {
+    &:before {
+        background-image: url(/cobrands/fixmystreet/images/icon-shortlist-mini.png);
+
+        @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+            background-image: url(/cobrands/fixmystreet/images/icon-shortlist-mini@2x.png);
+        }
+
+        @media all {
+            background-image: url(/cobrands/fixmystreet/images/icon-shortlist-mini.svg), none;
+        }
+    }
+}
+
+.btn--shortlisted {
+    &:before {
+        background-image: url(/cobrands/fixmystreet/images/icon-shortlisted-mini.png);
+
+        @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+            background-image: url(/cobrands/fixmystreet/images/icon-shortlisted-mini@2x.png);
+        }
+
+        @media all {
+            background-image: url(/cobrands/fixmystreet/images/icon-shortlisted-mini.svg), none;
+        }
+    }
+}
+
 .btn--block {
     display: block;
     text-align: center;