Feature/fa icons for rules (#123)

Integrate font-awesome for the rule icons

frontend/scss/dashboard.scss

@@ -88,6 +88,11 @@
     list-style: none;
 }
 
+    .block_container .block span.icon::before {
+        margin-right: 0.3em;
+        vertical-align: bottom;
+    }
+
     .block_container .block .inspect_container .inspect li {
         display: inline-block;
         margin-bottom: 5px;
@@ -101,42 +106,6 @@
         overflow-wrap: break-word;
     }
 
-        .block_container .block .inspect_container .inspect li span::before {
-            display: inline-block;
-            content: "";
-            width: 16px;
-            height: 16px;
-            margin-right: 5px;
-            background-size: contain;
-            background-image: url("../img/ruler_icon.png");
-        }
-
-            .block_container .block .inspect_container .segment_stats .visit_stat span::before {
-                background-image: url("../img/rocket_icon.png");
-            }
-            .block_container .block .inspect_container .segment_stats .days_stat span::before {
-                background-image: url("../img/calendar_icon.png");
-            }
-
-            .block_container .block .inspect_container .segment_rules .persistent_state span::before {
-                background-image: url("../img/persistent_icon.png");
-            }
-            .block_container .block .inspect_container .segment_rules .persistent_state.fleeting span::before {
-                transform: rotate(45deg) translateY(-2px);
-            }
-            .block_container .block .inspect_container .segment_rules .time-rule span::before {
-                background-image: url("../img/time_icon.png");
-            }
-            .block_container .block .inspect_container .segment_rules .visit-count-rule span::before {
-                background-image: url("../img/visit_count_icon.png");
-            }
-            .block_container .block .inspect_container .segment_rules .logged-in-rule span::before {
-                background-image: url("../img/key_icon.png");
-            }
-            .block_container .block .inspect_container .segment_rules .day-rule span::before {
-                background-image: url("../img/calendar_icon.png");
-            }
-
     .block_container .block .inspect_container .inspect li pre {
         position: relative;
         box-sizing: border-box;
@@ -150,26 +119,6 @@
         border-radius: 3px;
     }
 
-        .block_container .block .inspect_container .inspect li pre::before {
-            display: inline-block;
-            position: absolute;
-            content: "";
-            left: -21px;
-            top: 6px;
-            width: 16px;
-            height: 16px;
-            margin-right: 5px;
-            background-size: contain;
-            background-image: url("../img/ruler_icon.png");
-        }
-
-            .block_container .block .inspect_container .segment_rules .referral-rule pre::before {
-                background-image: url("../img/referral_icon.png");
-            }
-            .block_container .block .inspect_container .segment_rules .query-rule pre::before {
-                background-image: url("../img/referral_icon.png");
-            }
-
 .block_container .block.suggestion .suggestive_text {
     display: block;
     position: absolute;

src/wagtail_personalisation/rules.py

@@ -17,6 +17,8 @@
 @python_2_unicode_compatible
 class AbstractBaseRule(models.Model):
     """Base for creating rules to segment users with."""
+    icon = 'fa-circle-o'
+
     segment = ParentalKey(
         'wagtail_personalisation.Segment',
         related_name="%(app_label)s_%(class)s_related",
@@ -66,6 +68,8 @@ class TimeRule(AbstractBaseRule):
     set start time and end time.
 
     """
+    icon = 'fa-clock-o'
+
     start_time = models.TimeField(_("Starting time"))
     end_time = models.TimeField(_("Ending time"))
 
@@ -99,6 +103,8 @@ class DayRule(AbstractBaseRule):
     set in the rule.
 
     """
+    icon = 'fa-calendar-check-o'
+
     mon = models.BooleanField(_("Monday"), default=False)
     tue = models.BooleanField(_("Tuesday"), default=False)
     wed = models.BooleanField(_("Wednesday"), default=False)
@@ -146,6 +152,8 @@ class ReferralRule(AbstractBaseRule):
     the set regex test.
 
     """
+    icon = 'fa-globe'
+
     regex_string = models.TextField(
         _("Regular expression to match the referrer"))
 
@@ -181,6 +189,8 @@ class VisitCountRule(AbstractBaseRule):
     when visiting the set page.
 
     """
+    icon = 'fa-calculator'
+
     OPERATOR_CHOICES = (
         ('more_than', _("More than")),
         ('less_than', _("Less than")),
@@ -248,6 +258,8 @@ class QueryRule(AbstractBaseRule):
     present in the request query.
 
     """
+    icon = 'fa-link-o'
+
     parameter = models.SlugField(_("The query parameter to search for"),
                                  max_length=20)
     value = models.SlugField(_("The value of the parameter to match"),
@@ -282,6 +294,8 @@ class DeviceRule(AbstractBaseRule):
     in the request user agent headers.
 
     """
+    icon = 'fa-tablet'
+
     mobile = models.BooleanField(_("Mobile phone"), default=False)
     tablet = models.BooleanField(_("Tablet"), default=False)
     desktop = models.BooleanField(_("Desktop"), default=False)
@@ -315,6 +329,8 @@ class UserIsLoggedInRule(AbstractBaseRule):
     Matches when the user is authenticated.
 
     """
+    icon = 'fa-user'
+
     is_logged_in = models.BooleanField(default=False)
 
     panels = [