mysociety · MorayMySoc · Dec 12, 2024 · Nov 25, 2024
diff --git a/docs/directory_structure.md b/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>

diff --git a/perllib/FixMyStreet/Cobrand/Bexley.pm b/perllib/FixMyStreet/Cobrand/Bexley.pm
@@ -99,6 +99,26 @@ ID.
 
 =cut
 
+=item * Customised pin colours
+
+Bexley has supplied their own colours for pins #4521
+
+=cut
+
+sub path_to_pin_icons { '/i/pins/bexley/' }
+
+sub pin_new_report_colour { 'yellow' }
+
+sub pin_colour {
+    my ( $self, $p ) = @_;
+    return 'bexley/aqua' if $p->state eq 'investigating';
+    return 'bexley/orange' if $p->state eq 'action scheduled';
+    return 'bexley/grape' if $p->state eq 'not responsible';
+    return 'green-tick' if $p->is_fixed;
+    return 'bexley/spring' if $p->is_closed;
+    return 'yellow';
+}
+
 sub disable_resend_button { 1 }
 
 sub category_change_force_resend {

diff --git a/perllib/FixMyStreet/Cobrand/Borsetshire.pm b/perllib/FixMyStreet/Cobrand/Borsetshire.pm
@@ -16,15 +16,13 @@
 
 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 }
 

diff --git a/perllib/FixMyStreet/Cobrand/Brent.pm b/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

diff --git a/perllib/FixMyStreet/Cobrand/Buckinghamshire.pm b/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' ) }
 

diff --git a/perllib/FixMyStreet/Cobrand/Default.pm b/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
 

diff --git a/perllib/FixMyStreet/Cobrand/Gloucestershire.pm b/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
 

diff --git a/perllib/FixMyStreet/Cobrand/Northumberland.pm b/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

diff --git a/perllib/FixMyStreet/Cobrand/Oxfordshire.pm b/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} };

diff --git a/perllib/FixMyStreet/DB/Result/Problem.pm b/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);

diff --git a/t/app/controller/admin/report_edit.t b/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};

diff --git a/t/app/controller/around.t b/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

diff --git a/t/cobrand/brent.t b/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';
     };
 };
 

diff --git a/templates/web/base/maps/pin.html b/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 %]"

diff --git a/templates/web/base/report/banner.html b/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>

diff --git a/templates/web/bromley/report/banner.html b/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>

diff --git a/templates/web/fixmystreet-uk-councils/report/banner.html b/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>

diff --git a/templates/web/fixmystreet.com/report/banner.html b/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>

diff --git a/web/cobrands/brent/_variables.scss b/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%);
 

diff --git a/web/cobrands/fixmystreet/assets.js b/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,

diff --git a/web/cobrands/fixmystreet/fixmystreet.js b/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');

diff --git a/web/cobrands/oxfordshire/_colours.scss b/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;

diff --git a/web/cobrands/oxfordshire/assets.js b/web/cobrands/oxfordshire/assets.js
@@ -57,7 +57,7 @@
             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;
                 }

diff --git a/web/cobrands/oxfordshire/base.scss b/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";
diff --git a/web/cobrands/oxfordshire/images/pin-grey-big.png b/web/cobrands/oxfordshire/images/pin-grey-big.png
diff --git a/web/cobrands/oxfordshire/images/pin-grey-mini.png b/web/cobrands/oxfordshire/images/pin-grey-mini.png
diff --git a/web/cobrands/oxfordshire/images/pin-grey-small.png b/web/cobrands/oxfordshire/images/pin-grey-small.png
diff --git a/web/cobrands/oxfordshire/images/pin-grey.png b/web/cobrands/oxfordshire/images/pin-grey.png