Merge pull request #24 from michaelmarziani/master

kalwalkden · web-flow · commit 3c267e7e9ed5 · 2018-08-21T08:47:06.000-05:00
Add support for Icons
diff --git a/README.md b/README.md
@@ -37,6 +37,7 @@ In your base.html:
 <head>
 
 {% block css %}
+  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.1/css/materialize.min.css" integrity="sha256-qj3p6P1fJIV+Ndv7RW1ovZI2UhOuboj9GcODzcNFIN8=" crossorigin="anonymous" />
 {% endblock css %}
 
@@ -95,6 +96,12 @@ Use it like this, simple.
 {{ form|materializecss:'m6' }}
 
 
+### Icons support
+This is most useful for adding a descriptive icon when you are creating a custom layout by building the form one field at a time. Substitue FIELD_NAME below with one of the field names from your form.
+```html
+{{ form.FIELD_NAME|materializecss:'s12 m6, icon=person' }}
+{{ form.FIELD_NAME|materializecss:'custom_size=s12 m6, icon=person' }}
+```
 
 ## Demo
 
diff --git a/materializecssform/templates/materializecssform/field.html b/materializecssform/templates/materializecssform/field.html
@@ -4,6 +4,9 @@
     {% if field|is_checkbox %}
     <div class="col {{ classes.label }} {{ classes.value }} {{ classes.single_value }}">
         <div class="{% if field.field.required and form.required_css_class %}{{ form.required_css_class }}{% endif %}">
+            {% if classes.icon %}
+                <i class="material-icons prefix">{{ classes.icon }}</i>
+            {% endif %}
             <label>
 
                     {{ field }}
@@ -25,6 +28,9 @@
     {% elif field|is_radio %}
     <div class="col {{ classes.label }} {{ classes.value }} {{ classes.single_value }}">
         <div class="{% if field.field.required and form.required_css_class %}{{ form.required_css_class }}{% endif %}">
+            {% if classes.icon %}
+                <i class="material-icons prefix">{{ classes.icon }}</i>
+            {% endif %}
             <label>
                     {{ field }}
                     {% if field.auto_id %}
@@ -43,6 +49,9 @@
     </div>
     {% elif field|is_date_input or field|is_datetime_input %}
     <div class="input-field col {{ classes.label }} {{ classes.value }} {{ classes.single_value }}">
+        {% if classes.icon %}
+            <i class="material-icons prefix">{{ classes.icon }}</i>
+        {% endif %}
 
         <input type="date" id="{{ field.auto_id }}" name="{{ field.html_name }}" class="datepicker" value="{% if field.value %}{{ field.value }}{% endif %}" {% include 'materializecssform/attrs.html' %} >
         <label for="{{ field.id_for_label }}">{{ field.label }}</label>
@@ -61,6 +70,9 @@
     {% elif field|is_select %}
     <div class="input-field col {{ classes.label }} {{ classes.value }} {{ classes.single_value }}">
             {% if field|is_select_multiple %}
+                {% if classes.icon %}
+                    <i class="material-icons prefix">{{ classes.icon }}</i>
+                {% endif %}
                 <select multiple name="{{ field.name }}">
                     {% for choice in field %}
                           {{ choice.tag }}
@@ -81,6 +93,9 @@
                 {% endif %}
 
             {% else %}
+                {% if classes.icon %}
+                    <i class="material-icons prefix">{{ classes.icon }}</i>
+                {% endif %}
                 <select name="{{ field.name }}">
                     {% for choice in field %}
                           {{ choice.tag }}
@@ -139,6 +154,9 @@
 
     {% elif field|is_textarea %}
         <div class="input-field col {{ classes.label }} {{ classes.value }} {{ classes.single_value }">
+            {% if classes.icon %}
+                <i class="material-icons prefix">{{ classes.icon }}</i>
+            {% endif %}
             <textarea id="{{ field.auto_id }}" class="materialize-textarea" name="{{field.html_name}}" {% include 'materializecssform/attrs.html' %} >{% if field.value %}{{ field.value }}{% endif %}</textarea>
             {% if field.auto_id %}
                 <label class="{% if field.field.required %}{{ form.required_css_class }}{% endif %}" for="{{ field.auto_id }}">{{ field.label }}</label>
@@ -165,6 +183,9 @@
             <div class="file-field input-field">
                 <div class="btn">
                     <span>{{ field.label }}</span>
+                    {% if classes.icon %}
+                        <i class="material-icons prefix">{{ classes.icon }}</i>
+                    {% endif %}
                     {{ field }}
                 </div>
                 <div class="file-path-wrapper">
@@ -176,6 +197,9 @@
     {% else %}
 
         <div class="input-field col {{ classes.label }} {{ classes.value }} {{ classes.single_value }}">
+            {% if classes.icon %}
+                <i class="material-icons prefix">{{ classes.icon }}</i>
+            {% endif %}
             {{ field }}
             {% if field.auto_id %}
                 <label class="{% if field.field.required %}{{ form.required_css_class }}{% endif %}" for="{{ field.auto_id }}">{{ field.label }}</label>
diff --git a/materializecssform/templatetags/materializecss.py b/materializecssform/templatetags/materializecss.py
@@ -2,17 +2,38 @@
 from django.template.loader import get_template
 from django import template
 from django.forms.fields import DateTimeField, DateField
+from django.http import QueryDict
 
 from materializecssform import config
 
 register = template.Library()
 
 @register.filter
-def materializecss(element, label_cols={}):
-    if not label_cols:
+def materializecss(element, options={}):
+    if not options:
         label_cols = 's12'
-
-    markup_classes = {'label': label_cols, 'value': '', 'single_value': ''}
+        icon = ''
+    else:
+        # Split options string into a list of arguments
+        arguments = [arg.strip() for arg in options.split(',')]
+
+        # Check the first argument to see if it's of form argument=value
+        if '=' not in arguments[0]:
+            # If not, it's a custom size, so use that
+            label_cols = arguments[0]
+            # Remove this from the arguments list
+            arguments.pop(0)
+
+        # Join the remaining arguments into a querystring for easy parsing
+        options = '&'.join(arguments)
+        qs = QueryDict(options)
+        # Check to see if a custom size was passed in this fashion and if so prefer it
+        if qs.get('custom_size'):
+            label_cols = qs.get('custom_size')
+        # Get icon if it's been set
+        icon = qs.get('icon', default='')
+
+    markup_classes = {'label': label_cols, 'value': '', 'single_value': '', 'icon': icon}
     return render(element, markup_classes)
 
 
