maps: display marker icons in layer edit page (#21566)

combo/apps/maps/forms.py

@@ -14,26 +14,49 @@
 # You should have received a copy of the GNU Affero General Public License
 # along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
+import django
 from django import forms
 from django.utils.encoding import force_text
 
 from .models import MapLayer
 
 
+if django.VERSION < (1, 11, 0):
+    class RadioChoiceInput(forms.widgets.RadioChoiceInput):
+        def render(self, name=None, value=None, *args, **kwargs):
+            value = super(RadioChoiceInput, self).render(name=name, value=value, *args, **kwargs)
+            return u'<span class="icon-%s">%s</span>' % (self.choice_value, value)
+
+
+    class RadioFieldRenderer(forms.widgets.RadioFieldRenderer):
+        choice_input_class = RadioChoiceInput
+
+
+    class IconRadioSelect(forms.RadioSelect):
+        renderer = RadioFieldRenderer
+
+else:
+
+    class IconRadioSelect(forms.RadioSelect):
+        option_template_name = 'maps/icon_radio_option.html'
+
+
 class MapNewLayerForm(forms.ModelForm):
     class Meta:
         model = MapLayer
         exclude = ('slug', 'cache_duration', 'include_user_identifier')
         widgets = {'marker_colour': forms.TextInput(attrs={'type': 'color'}),
-                   'icon_colour': forms.TextInput(attrs={'type': 'color'})
+                   'icon_colour': forms.TextInput(attrs={'type': 'color'}),
                    }
 
+
 class MapLayerForm(forms.ModelForm):
     class Meta:
         model = MapLayer
         fields = '__all__'
         widgets = {'marker_colour': forms.TextInput(attrs={'type': 'color'}),
-                   'icon_colour': forms.TextInput(attrs={'type': 'color'})
+                   'icon_colour': forms.TextInput(attrs={'type': 'color'}),
+                   'icon': IconRadioSelect(),
                    }
 
     def __init__(self, *args, **kwargs):

combo/apps/maps/static/css/combo.map.scss

@@ -91,6 +91,7 @@ div.leaflet-div-icon span i:before {
 
 .layers a::before,
 select#id_icon option::before,
+ul#id_icon span label::before,
 i.leaflet-marker-icon {
     font: normal normal normal 1em/1 FontAwesome;
 }
@@ -104,9 +105,33 @@ select#id_icon option::before {
 }
 
 @each $marker_icon_name, $marker_icon_symbol in $marker_icons {
+	ul#id_icon li span.icon-#{$marker_icon_name} label::before,
 	a.layer-icon-#{$marker_icon_name}::before,
 	select#id_icon option[value=#{$marker_icon_name}]::before,
 	i.leaflet-marker-icon.#{$marker_icon_name}::before {
 		content: $marker_icon_symbol;
 	}
 }
+
+ul#id_icon {
+	list-style: none;
+	padding: 0;
+	margin: 0;
+	column-width: 30ex;
+	li {
+		margin-right: 1em;
+		margin-top: -1px;
+		span label {
+			display: block;
+			border: 1px solid #bcbcbc;
+			width: 100%;
+			padding: 0.5ex;
+		}
+		span label::before {
+			content: "";
+			display: inline-block;
+			width: 2.5em;
+			text-align: center;
+		}
+	}
+}

combo/apps/maps/templates/maps/icon_radio_option.html

@@ -0,0 +1 @@
+<span class="icon-{{ widget.value|stringformat:'s' }}">{% include "django/forms/widgets/radio_option.html" %}</span>

tests/test_maps_manager.py

@@ -55,6 +55,7 @@ def test_edit_layer(app, admin_user):
     app = login(app)
     resp = app.get('/manage/maps/', status=200)
     resp = resp.click('Test')
+    assert '<li><span class="icon-ambulance"><label' in resp.body
     resp.forms[0]['geojson_url'] = 'http://example.net/new_geojson'
     resp = resp.forms[0].submit()
     assert resp.location.endswith('/manage/maps/')