Refactor map pin file locations.

This puts them all under web/i/pins, one directory per 'colour',
path_to_pin_icons is only used for sourcing shadow/spot files.

docs/directory_structure.md

@@ -297,7 +297,7 @@ you're doing is [customising your installation](/customising).
         <p><em>images</em></p>
         <p>
           Images, including navigation icons and sprites, used by the default site (and hence
-          available to other cobrands too) &mdash; for example <code>pin-green.png</code>
+          available to other cobrands too) &mdash; for example <code>pins/green/pin.png</code>
           is the green pin used on most cobrand's maps.
         </p>
       </dd>

perllib/FixMyStreet/Cobrand/Borsetshire.pm

@@ -16,15 +16,13 @@ sub enter_postcode_text {
 
 sub pin_colour {
     my ( $self, $p, $context ) = @_;
-    return 'grey' if $p->is_closed;
-    return 'green' if $p->is_fixed;
-    return 'yellow' if $p->state eq 'confirmed';
-    return 'orange'; # all the other `open_states` like "in progress"
+    return 'grey-cross' if $p->is_closed;
+    return 'green-tick' if $p->is_fixed;
+    return 'yellow-cone' if $p->state eq 'confirmed';
+    return 'orange-work'; # all the other `open_states` like "in progress"
 }
 
-sub path_to_pin_icons {
-    return '/cobrands/oxfordshire/images/';
-}
+sub path_to_pin_icons { '/i/pins/whole-shadow-cone-spot/' }
 
 sub send_questionnaires { 0 }
 

perllib/FixMyStreet/Cobrand/Brent.pm

@@ -78,9 +78,7 @@ my $BRENT_CONTAINERS = {
 
 =cut
 
-sub path_to_pin_icons {
-    return '/cobrands/oxfordshire/images/';
-}
+sub path_to_pin_icons { '/i/pins/whole-shadow-cone-spot/' }
 
 =item * Users with a brent.gov.uk email can always be found in the admin.
 
@@ -320,10 +318,10 @@ sub munge_cobrand_asset_categories {
 
 sub pin_colour {
     my ( $self, $p, $context ) = @_;
-    return 'grey' if $p->is_closed;
-    return 'green' if $p->is_fixed;
-    return 'yellow' if $p->state eq 'confirmed';
-    return 'orange'; # all the other `open_states` like "in progress"
+    return 'grey-cross' if $p->is_closed;
+    return 'green-tick' if $p->is_fixed;
+    return 'yellow-cone' if $p->state eq 'confirmed';
+    return 'orange-work'; # all the other `open_states` like "in progress"
 }
 
 =head2 categories_restriction

perllib/FixMyStreet/Cobrand/Buckinghamshire.pm

@@ -87,15 +87,13 @@ sub around_nearby_filter {
 
 sub pin_colour {
     my ( $self, $p, $context ) = @_;
-    return 'grey' if $p->is_closed || ($context ne 'reports' && !$self->owns_problem($p));
-    return 'green' if $p->is_fixed;
-    return 'yellow' if $p->state eq 'confirmed';
-    return 'orange'; # all the other `open_states` like "in progress"
+    return 'grey-cross' if $p->is_closed || ($context ne 'reports' && !$self->owns_problem($p));
+    return 'green-tick' if $p->is_fixed;
+    return 'yellow-cone' if $p->state eq 'confirmed';
+    return 'orange-work'; # all the other `open_states` like "in progress"
 }
 
-sub path_to_pin_icons {
-    return '/cobrands/oxfordshire/images/';
-}
+sub path_to_pin_icons { '/i/pins/whole-shadow-cone-spot/' }
 
 sub admin_user_domain { ( 'buckscc.gov.uk', 'buckinghamshire.gov.uk' ) }
 

perllib/FixMyStreet/Cobrand/Default.pm

@@ -1090,10 +1090,7 @@ for your cobrand.
 
 =cut
 
-sub path_to_pin_icons {
-    return '/i/';
-}
-
+sub path_to_pin_icons { '/i/pins/' }
 
 =item tweak_all_reports_map
 

perllib/FixMyStreet/Cobrand/Gloucestershire.pm

@@ -257,14 +257,12 @@ apart from defects which are blue.
 sub pin_colour {
     my ( $self, $p ) = @_;
 
-    return 'defects' if $self->is_defect($p);
-    return 'green' if $p->is_fixed || $p->is_closed;
-    return 'yellow';
+    return 'blue-work' if $self->is_defect($p);
+    return 'green-tick' if $p->is_fixed || $p->is_closed;
+    return 'yellow-cone';
 }
 
-sub path_to_pin_icons {
-    return '/cobrands/oxfordshire/images/';
-}
+sub path_to_pin_icons { '/i/pins/whole-shadow-cone-spot/' }
 
 =head2 open311_config
 

perllib/FixMyStreet/Cobrand/Northumberland.pm

@@ -74,10 +74,6 @@ sub pin_colour {
     return 'orange'; # all the other `open_states` like "in progress"
 }
 
-sub path_to_pin_icons {
-    return '/cobrands/northumberland/images/';
-}
-
 =item * Hovering over a pin includes the state as well as the title
 
 =cut

perllib/FixMyStreet/Cobrand/Oxfordshire.pm

@@ -85,20 +85,18 @@ sub reports_ordering {
 
 sub pin_colour {
     my ( $self, $p, $context ) = @_;
-    return 'grey' if ($context||'') ne 'reports' && !$self->owns_problem($p);
-    return 'grey' if $p->is_closed;
-    return 'green' if $p->is_fixed;
-    return 'yellow' if $p->state eq 'confirmed';
-    return 'orange'; # all the other `open_states` like "in progress"
+    return 'grey-cross' if ($context||'') ne 'reports' && !$self->owns_problem($p);
+    return 'grey-cross' if $p->is_closed;
+    return 'green-tick' if $p->is_fixed;
+    return 'yellow-cone' if $p->state eq 'confirmed';
+    return 'orange-work'; # all the other `open_states` like "in progress"
 }
 
 sub pin_new_report_colour {
-    return 'yellow';
+    return 'yellow-cone';
 }
 
-sub path_to_pin_icons {
-    return '/cobrands/oxfordshire/images/';
-}
+sub path_to_pin_icons { '/i/pins/whole-shadow-cone-spot/' }
 
 sub pin_hover_title {
     my ($self, $problem, $title) = @_;
@@ -494,7 +492,7 @@ sub pins_from_wfs {
             id => $fake_id--,
             latitude => @$coords[1],
             longitude => @$coords[0],
-            colour => 'defects',
+            colour => 'blue-work',
             title => $title,
         };
     } @{ $wfs->{features} };

perllib/FixMyStreet/DB/Result/Problem.pm

@@ -1336,7 +1336,7 @@ sub static_map {
     my $pin = $map_data->{pins}->[0];
     if ($pin) {
         my $im = Image::Magick->new;
-        $im->read(FixMyStreet->path_to('web', 'i', 'pin-yellow.png'));
+        $im->read(FixMyStreet->path_to('web', 'i', 'pins/yellow/pin.png'));
         $im->Scale( geometry => '48x64' );
         $image->Composite(image => $im, gravity => 'NorthWest',
             x => $pin->{px} - 24, y => $pin->{py} - 64);

t/app/controller/admin/report_edit.t

@@ -394,7 +394,7 @@ foreach my $test (
         }
 
         if ($report->state eq 'fixed') {
-            $mech->content_contains('pin-green');
+            $mech->content_contains('pins/green');
         }
 
         $test->{changes}->{flagged} = 1 if $test->{changes}->{flagged};

t/app/controller/around.t

@@ -570,7 +570,7 @@ subtest 'check nearby lookup, cobrand custom distances' => sub {
                     . '&filter_category=Pothole'
                     . ( $test->{mode} ? '&mode=' . $test->{mode} : '' )
             );
-            $mech->contains_or_lacks($test->{contains}, '[51.754926,-1.256179,"yellow",' . $p->id . ',"Open: Around page Test 1 for ' . $body->id . '","small",false]');
+            $mech->contains_or_lacks($test->{contains}, '[51.754926,-1.256179,"yellow-cone",' . $p->id . ',"Open: Around page Test 1 for ' . $body->id . '","small",false]');
         }
     };
 };
@@ -639,7 +639,7 @@ subtest 'check nearby lookup, cobrand custom distances per category' => sub {
                 note '    Check for problem ' . $test_p->{id};
                 $mech->contains_or_lacks(
                     $test->{contains} && $test_p->{captured_by_category_filters},
-                    '[51.754926,-1.256179,"yellow",'
+                    '[51.754926,-1.256179,"yellow-cone",'
                         . $test_p->{id}
                         . ',"Open: Around page Test 1 for '
                         . $body->id
@@ -670,7 +670,7 @@ subtest 'check nearby lookup, cobrand custom distances per category' => sub {
                 note '    Check for problem ' . $test_p->{id};
                 $mech->contains_or_lacks(
                     $test->{contains} && $test_p->{captured_by_category_filters},
-                    '[51.754926,-1.256179,"yellow",'
+                    '[51.754926,-1.256179,"yellow-cone",'
                         . $test_p->{id}
                         . ',"Open: Around page Test 1 for '
                         . $body->id
@@ -701,7 +701,7 @@ subtest 'check nearby lookup, cobrand custom distances per category' => sub {
                 note 'Check for problem ' . $test_p->{id};
                 $mech->contains_or_lacks(
                     $test->{contains} && $test_p->{captured_by_category_filters},
-                    '[51.754926,-1.256179,"yellow",'
+                    '[51.754926,-1.256179,"yellow-cone",'
                         . $test_p->{id}
                         . ',"Open: Around page Test 1 for '
                         . $body->id

t/cobrand/brent.t

@@ -500,16 +500,16 @@ FixMyStreet::override_config {
         });
 
         $problem->state('confirmed');
-        is $cobrand->pin_colour($problem, 'around'), 'yellow', 'confirmed problem has correct pin colour';
+        is $cobrand->pin_colour($problem, 'around'), 'yellow-cone', 'confirmed problem has correct pin colour';
 
         $problem->state('closed');
-        is $cobrand->pin_colour($problem, 'around'), 'grey', 'closed problem has correct pin colour';
+        is $cobrand->pin_colour($problem, 'around'), 'grey-cross', 'closed problem has correct pin colour';
 
         $problem->state('fixed');
-        is $cobrand->pin_colour($problem, 'around'), 'green', 'fixed problem has correct pin colour';
+        is $cobrand->pin_colour($problem, 'around'), 'green-tick', 'fixed problem has correct pin colour';
 
         $problem->state('in_progress');
-        is $cobrand->pin_colour($problem, 'around'), 'orange', 'in_progress problem has correct pin colour';
+        is $cobrand->pin_colour($problem, 'around'), 'orange-work', 'in_progress problem has correct pin colour';
     };
 };
 

templates/web/base/maps/pin.html

@@ -2,7 +2,7 @@
 [% IF pin.id AND pin.problem %]
 <a title="[% pin.title | html %]" href="[% c.cobrand.relative_url_for_report( pin.problem ) %][% pin.problem.url %]">
 [%- END -%]
-<img border="0" src="[% start %][% c.cobrand.path_to_pin_icons _ 'pin-' _ pin.colour _ '.png' %]"
+<img border="0" src="[% start %]/i/pins/[% pin.colour %]/pin.png"
 [% IF js -%]
     class="pin js-pin" data-lat="[% pin.latitude %]" data-lon="[% pin.longitude %]"
     data-colour="[% pin.colour %]" data-id="[% pin.id %]"

templates/web/base/report/banner.html

@@ -3,7 +3,7 @@
 [% BLOCK banner %]
     <div class="banner banner--[% id %]">
         <p>
-            <img src="[% c.cobrand.path_to_pin_icons _ 'pin-' _ c.cobrand.pin_colour(problem, 'report') _ '.png' %]" alt="" class="pin">
+            <img src="/i/pins/[% c.cobrand.pin_colour(problem, 'report') %]/pin.png" alt="" class="pin">
             [% text %]
         </p>
     </div>

templates/web/bromley/report/banner.html

@@ -3,7 +3,7 @@
 [% BLOCK banner %]
     <div class="banner banner--[% id %]">
         <p>
-            <img src="[% c.cobrand.path_to_pin_icons _ 'pin-' _ c.cobrand.pin_colour(problem, 'report') _ '.png' %]" alt="" class="pin">
+            <img src="/i/pins/[% c.cobrand.pin_colour(problem, 'report') %]/pin.png" alt="" class="pin">
             [% text %]
         </p>
     </div>

templates/web/fixmystreet-uk-councils/report/banner.html

@@ -3,7 +3,7 @@
 [% BLOCK banner %]
     <div class="banner banner--[% id %]">
         <p>
-            <img src="[% c.cobrand.path_to_pin_icons _ 'pin-' _ c.cobrand.pin_colour(problem, 'report') _ '.png' %]" alt="" class="pin">
+            <img src="/i/pins/[% c.cobrand.pin_colour(problem, 'report') %]/pin.png" alt="" class="pin">
             [% text %]
         </p>
     </div>

templates/web/fixmystreet.com/report/banner.html

@@ -3,7 +3,7 @@
 [% BLOCK banner %]
     <div class="banner banner--[% id %]">
         <p>
-            <img src="[% c.cobrand.path_to_pin_icons _ 'pin-' _ c.cobrand.pin_colour(problem, 'report') _ '.png' %]" alt="" class="pin">
+            <img src="/i/pins/[% c.cobrand.pin_colour(problem, 'report') %]/pin.png" alt="" class="pin">
             [% text %]
         </p>
     </div>

web/cobrands/brent/_variables.scss

@@ -70,8 +70,6 @@ $nav_hover_background_colour: $primary;
 
 $header-top-border: false;
 
-$pin_prefix: '/cobrands/brent/images/';
-
 $col_click_map: $gray-1;
 $col_click_map_dark: darken($gray-1, 10%);
 

web/cobrands/fixmystreet/assets.js

@@ -881,7 +881,7 @@ function construct_hover_feature_control(asset_layers, options) {
 // fixmystreet.pin_prefix isn't always available here, due
 // to file loading order, so get it from the DOM directly.
 var map_data = document.getElementById('js-map-data');
-var pin_prefix = fixmystreet.pin_prefix || (map_data ? map_data.getAttribute('data-pin_prefix') : '/i/');
+var pin_prefix = fixmystreet.pin_prefix || (map_data ? map_data.getAttribute('data-pin_prefix') : '/i/pins/');
 
 fixmystreet.assets = {
     layers: [],
@@ -914,13 +914,13 @@ fixmystreet.assets = {
     }),
 
     style_default_select: new OpenLayers.Style({
-        externalGraphic: pin_prefix + "pin-spot.png",
+        externalGraphic: pin_prefix + "spot.png",
         fillColor: "#55BB00",
         graphicWidth: 48,
         graphicHeight: 64,
         graphicXOffset: -24,
         graphicYOffset: -56,
-        backgroundGraphic: pin_prefix + "pin-shadow.png",
+        backgroundGraphic: pin_prefix + "shadow/pin.png",
         backgroundWidth: 60,
         backgroundHeight: 30,
         backgroundXOffset: -7,

web/cobrands/fixmystreet/fixmystreet.js

@@ -382,11 +382,7 @@ fixmystreet.set_up = fixmystreet.set_up || {};
 $.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-' + fixmystreet.pin_new_report_colour + '.png';
-    } else {
-        document.createElement('img').src = '/i/pin-green.png';
-    }
+    document.createElement('img').src = '/i/pins/' + (fixmystreet.pin_new_report_colour || 'green') + '/pin.png';
 
     $('a[href*="around"]').each(function() {
         this.href = this.href + (this.href.indexOf('?') > -1 ? '&js=1' : '?js=1');

web/cobrands/oxfordshire/_colours.scss

@@ -42,8 +42,6 @@ $header-top-border: false;
 
 $form-control-border-color: #525252;
 
-$pin_prefix: '/cobrands/oxfordshire/images/';
-
 $search-help-alignment: left;
 $search-help-background: #fff3f3;
 $search-help-margin-desktop: -2em 0 0 0;

web/cobrands/oxfordshire/assets.js

@@ -57,7 +57,7 @@ function setup_defect_popup() {
             hover: true,
             clickFeature: function (feature) {
                 close_defect_popup();
-                if (feature.attributes.colour !== 'defects') {
+                if (feature.attributes.colour !== 'blue-work') {
                     // We're only interested in defects
                     return;
                 }

web/cobrands/oxfordshire/base.scss

@@ -387,5 +387,24 @@ textarea {
     }
 }
 
+// Like .item-list__item--indented except with a pin icon baked in!
+.item-list__item--with-pin {
+  a {
+    background-image: url('/i/pins/yellow-cone/small.png');
+  }
+  &.yellow-cone a {
+      background-image: url('/i/pins/yellow-cone/small.png');
+  }
+  &.green-tick a {
+      background-image: url('/i/pins/green-tick/small.png');
+  }
+  &.grey-cross a {
+      background-image: url('/i/pins/grey-cross/small.png');
+  }
+  &.orange-work a {
+      background-image: url('/i/pins/orange-work/small.png');
+  }
+}
+
 @import "oxfordshire-footer";
 @import "oxfordshire-cookiepopup";

web/cobrands/sass/_layout.scss

@@ -1055,7 +1055,7 @@ textarea.form-error {
 
 .keyboard-pin {
   display: none;
-  background-image: url('/i/pin-green-big.png');
+  background-image: url('/i/pins/green/big.png');
   background-size: contain;
   background-repeat: no-repeat;
   background-position: center;
@@ -1070,7 +1070,7 @@ textarea.form-error {
 
   &::after {
     content: "";
-    background-image: url('/i/pin-shadow-big.png');
+    background-image: url('/i/pins/shadow/big.png');
     background-size: contain;
     background-repeat: no-repeat;
     width: 88px;