Use icon font for channel icons.

hc/api/models.py

@@ -254,9 +254,6 @@ class Channel(models.Model):
 
         return self.get_kind_display()
 
-    def icon_url(self):
-        return settings.STATIC_URL + "img/integrations/%s.png" % self.kind
-
     def assign_all_checks(self):
         checks = Check.objects.filter(user=self.user)
         self.checks.add(*checks)

static/css/icomoon.css

@@ -1,10 +1,10 @@
 @font-face {
   font-family: 'icomoon';
-  src:  url('../fonts/icomoon.eot?rq3u8q');
+  src:  url('../fonts/icomoon.eot?123');
-  src:  url('../fonts/icomoon.eot?rq3u8q#iefix') format('embedded-opentype'),
+  src:  url('../fonts/icomoon.eot?123#iefix') format('embedded-opentype'),
-    url('../fonts/icomoon.ttf?rq3u8q') format('truetype'),
+    url('../fonts/icomoon.ttf?123') format('truetype'),
-    url('../fonts/icomoon.woff?rq3u8q') format('woff'),
+    url('../fonts/icomoon.woff?123') format('woff'),
-    url('../fonts/icomoon.svg?rq3u8q#icomoon') format('svg');
+    url('../fonts/icomoon.svg?123#icomoon') format('svg');
   font-weight: normal;
   font-style: normal;
 }
@@ -24,9 +24,70 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-pagertree:before {
+  content: "\e90d";
+  color: #33ade2;
+}
+.icon-po:before {
+  content: "\e90e";
+  color: #249df1;
+}
+.icon-victorops:before {
+  content: "\e90f";
+  color: #f9af4a;
+}
+.icon-opsgenie:before {
+  content: "\e910";
+  color: #fc8e2e;
+}
+.icon-pd:before {
+  content: "\e90b";
+  color: #24c050;
+}
+.icon-email:before {
+  content: "\e90a";
+  color: #4f5d73;
+}
+.icon-webhook:before {
+  content: "\e908";
+  color: #c73a63;
+}
+.icon-sms:before {
+  content: "\e904";
+  color: #95c144;
+}
+.icon-pushbullet:before {
+  content: "\e909";
+  color: #67bf79;
+}
+.icon-discord:before {
+  content: "\e90c";
+  color: #7289da;
+}
+.icon-hipchat:before {
+  content: "\e901";
+  color: #0052cc;
+}
+.icon-slack:before {
+  content: "\e905";
+  color: #56b68b;
+}
+.icon-telegram:before {
+  content: "\e906";
+  color: #2ca5e0;
+}
+.icon-zendesk:before {
+  content: "\e907";
+}
+.icon-clippy:before {
+  content: "\e903";
+}
 .icon-cancel:before {
   content: "\e5c9";
 }
+.icon-up:before, .icon-ok:before, .icon-new:before {
+  content: "\e86c";
+}
 .icon-close:before {
   content: "\e5cd";
 }
@@ -36,11 +97,11 @@
 .icon-missing:before {
   content: "\e001";
 }
-.icon-asc:before {
-  content: "\e5ce";
-}
 .icon-desc:before {
-  content: "\e5cf";
+  content: "\e313";
+}
+.icon-asc:before {
+  content: "\e316";
 }
 .icon-dots:before {
   content: "\e5d3";
@@ -52,17 +113,8 @@
   content: "\e7f6";
 }
 .icon-settings:before {
-  content: "\e8b8";
-}
-.icon-mail:before {
-  content: "\e900";
-}
-.icon-delete:before {
-  content: "\e901";
-}
-.icon-new:before, .icon-up:before, .icon-ok:before {
   content: "\e902";
 }
-.icon-clippy:before {
+.icon-delete:before {
-  content: "\e903";
+  content: "\e900";
 }

static/css/my_checks_desktop.css

@@ -55,11 +55,17 @@
     padding-left: 15px;
 }
 
-#checks-table .integrations img {
+#checks-table .integrations span {
     padding: 10px 2px;
+    display: inline-block;
+    font-size: 20px;
     width: 24px;
 }
 
+#checks-table .integrations span.off:before {
+    color: #DDD;
+}
+
 .timeout-grace .cron-expression {
     display: inline-block;
     text-overflow: ellipsis;
@@ -133,8 +139,3 @@ tr:hover .copy-link {
     line-height: 36px;
     color: #333;
 }
-
-.integrations-cell .off {
-    filter: grayscale(100%);
-    opacity: 0.3;
-}

static/js/checks.js

@@ -177,14 +177,14 @@ $(function () {
 
     $(".integrations").tooltip({
         container: "body",
-        selector: "img",
+        selector: "span",
         title: function() {
             var idx = $(this).index();
             return $("#ch-" + idx).data("title");
         }
     });
 
-    $(".integrations").on("click", "img", function() {
+    $(".integrations").on("click", "span", function() {
         var isOff = $(this).toggleClass("off").hasClass("off");
         var token = $('input[name=csrfmiddlewaretoken]').val();
 

templates/front/my_checks_desktop.html

@@ -80,8 +80,7 @@
                 <div class="integrations">
                 {% spaceless %}
                 {% for channel in channels %}
-                    <img src="{{ channel.icon_url }}"
+                    <span class="icon-{{ channel.kind }}{% if channel in check.channel_set.all %}{% else %} off{% endif %}"></span>
-                         {% if channel in check.channel_set.all %}{% else %}class="off"{% endif %} />
                 {% endfor %}
                 {% endspaceless %}
                 </div>