Allow cobrands to define pin colour for new reports

Previously, a green marker would be used for reports as they were being
created. Now, cobrands can override `pin_new_report_colour` to show a
different pin image when users are creating a new report.

6 files changed, 20 insertions, 8 deletions

diff --git a/perllib/FixMyStreet/Cobrand/Default.pm b/perllib/FixMyStreet/Cobrand/Default.pm
index 195978845..4a886204c 100644
--- a/perllib/FixMyStreet/Cobrand/Default.pm
+++ b/perllib/FixMyStreet/Cobrand/Default.pm
@@ -945,6 +945,15 @@ sub pin_colour {
     return $p->is_fixed ? 'green' : 'red';
 }
 
+=head2 pin_new_report_colour
+
+Returns the colour of pin to be used for a new report.
+
+=cut
+sub pin_new_report_colour {
+    return 'green';
+}
+
 =head2 path_to_pin_icons
 
 Used to override the path for the pin icons if you want to add custom pin icons
diff --git a/templates/web/base/maps/openlayers.html b/templates/web/base/maps/openlayers.html
index 215b69d26..e8d6c2e06 100644
--- a/templates/web/base/maps/openlayers.html
+++ b/templates/web/base/maps/openlayers.html
@@ -17,6 +17,7 @@
     data-zoom=[% map.zoom %]
 [%- END %]
     data-pin_prefix='[% c.config.ADMIN_BASE_URL IF admin %][% c.cobrand.path_to_pin_icons %]',
+    data-pin_new_report_colour='[% c.cobrand.pin_new_report_colour %]',
     data-numZoomLevels=[% map.numZoomLevels %]
     data-zoomOffset=[% map.zoomOffset %]
     data-map_type="[% map.map_type %]"
diff --git a/web/cobrands/fixmystreet/fixmystreet.js b/web/cobrands/fixmystreet/fixmystreet.js
index 0bad32b4e..505421068 100644
--- a/web/cobrands/fixmystreet/fixmystreet.js
+++ b/web/cobrands/fixmystreet/fixmystreet.js
@@ -251,7 +251,7 @@ $.extend(fixmystreet.set_up, {
   basics: function() {
     // Preload the new report pin
     if ( typeof fixmystreet !== 'undefined' && typeof fixmystreet.pin_prefix !== 'undefined' ) {
-        document.createElement('img').src = fixmystreet.pin_prefix + 'pin-green.png';
+        document.createElement('img').src = fixmystreet.pin_prefix + 'pin-' + fixmystreet.pin_new_report_colour + '.png';
     } else {
         document.createElement('img').src = '/i/pin-green.png';
     }
diff --git a/web/cobrands/fixmystreet/map.js b/web/cobrands/fixmystreet/map.js
index ebeed06cf..f3bf1a19f 100644
--- a/web/cobrands/fixmystreet/map.js
+++ b/web/cobrands/fixmystreet/map.js
@@ -3,7 +3,7 @@ var fixmystreet = fixmystreet || {};
 (function(){
 
     var map_data = document.getElementById('js-map-data'),
-        map_keys = [ 'area', 'all_pins', 'latitude', 'longitude', 'zoomToBounds', 'zoom', 'pin_prefix', 'numZoomLevels', 'zoomOffset', 'map_type', 'key' ],
+        map_keys = [ 'area', 'all_pins', 'latitude', 'longitude', 'zoomToBounds', 'zoom', 'pin_prefix', 'pin_new_report_colour', 'numZoomLevels', 'zoomOffset', 'map_type', 'key' ],
         numeric = { zoom: 1, numZoomLevels: 1, zoomOffset: 1, id: 1 },
         pin_keys = [ 'lat', 'lon', 'colour', 'id', 'title', 'type' ];
 
diff --git a/web/cobrands/sass/_report_list_pins.scss b/web/cobrands/sass/_report_list_pins.scss
index 3dae2cf84..cd0b3d5d8 100644
--- a/web/cobrands/sass/_report_list_pins.scss
+++ b/web/cobrands/sass/_report_list_pins.scss
@@ -1,24 +1,26 @@
+$pin_prefix: '/i/' !default;
+
 // Like .item-list__item--indented except with a pin icon baked in!
 .item-list__item--with-pin {
   @extend .item-list__item--indented;
 
   a {
-    background-image: url(/i/pin-yellow-small.png);
+    background-image: url('#{$pin_prefix}pin-yellow-small.png');
     background-repeat: no-repeat;
     background-position: $left center;
   }
 
   &.yellow a {
-      background-image: url(/i/pin-yellow-small.png);
+      background-image: url('#{$pin_prefix}pin-yellow-small.png');
   }
   &.green a {
-      background-image: url(/i/pin-green-small.png);
+      background-image: url('#{$pin_prefix}pin-green-small.png');
   }
   &.red a {
-      background-image: url(/i/pin-red-small.png);
+      background-image: url('#{$pin_prefix}pin-red-small.png');
   }
   &.grey a {
-      background-image: url(/i/pin-grey-small.png);
+      background-image: url('#{$pin_prefix}pin-grey-small.png');
   }
 }
 .item-list--reports__item--selected {
diff --git a/web/js/map-OpenLayers.js b/web/js/map-OpenLayers.js
index 3e3c33bba..cacf88dd9 100644
--- a/web/js/map-OpenLayers.js
+++ b/web/js/map-OpenLayers.js
@@ -52,7 +52,7 @@ var fixmystreet = fixmystreet || {};
             /* Already have a pin */
             fixmystreet.markers.features[0].move(lonlat);
         } else {
-            var markers = fixmystreet.maps.markers_list( [ [ lonlat.lat, lonlat.lon, 'green' ] ], false );
+            var markers = fixmystreet.maps.markers_list( [ [ lonlat.lat, lonlat.lon, fixmystreet.pin_new_report_colour ] ], false );
             fixmystreet.bbox_strategy.deactivate();
             fixmystreet.markers.removeAllFeatures();
             fixmystreet.markers.addFeatures( markers );