Alternate Login

FIX: adds support for font awesome 5 and svg icons (#14)

FIX: adds support for font awesome 5 and svg icons (#14)
From 2724d5ba40b4389af0605b2b65ab0a680c8d294a Mon Sep 17 00:00:00 2001
From: Joffrey JAFFEUX <j.jaffeux@gmail.com>
Date: Fri, 9 Nov 2018 22:40:19 +0100
Subject: [PATCH] FIX: adds support for font awesome 5 and svg icons (#14)


diff --git a/assets/javascripts/discourse/initializers/checklist.js.es6 b/assets/javascripts/discourse/initializers/checklist.js.es6
index e981d85..10a5a90 100644
--- a/assets/javascripts/discourse/initializers/checklist.js.es6
+++ b/assets/javascripts/discourse/initializers/checklist.js.es6
@@ -1,6 +1,7 @@
 import { withPluginApi } from "discourse/lib/plugin-api";
 import AjaxLib from "discourse/lib/ajax";
 import TextLib from "discourse/lib/text";
+import { iconHTML } from "discourse-common/lib/icon-library";
 
 function initializePlugin(api) {
   const siteSettings = api.container.lookup("site-settings:main");
@@ -27,7 +28,7 @@ export function checklistSyntax($elem, post) {
       var elem = $(ev.currentTarget),
         new_value = elem.hasClass("checked") ? "[ ]" : "[\\*]";
 
-      elem.after('<i class="fa fa-spinner fa-spin fa-fw"></i>');
+      elem.after(iconHTML("spinner", { class: "fa-spin" }))
       elem.hide();
 
       var postId = viewPost.id;
diff --git a/assets/stylesheets/checklist.scss b/assets/stylesheets/checklist.scss
index ad37555..dd526be 100644
--- a/assets/stylesheets/checklist.scss
+++ b/assets/stylesheets/checklist.scss
@@ -1,3 +1,64 @@
 span.chcklst-stroked {
   text-decoration: line-through;
 }
+
+@mixin checklist-svg-icon($svg) {
+  &:before {
+    content: svg-uri(
+      '<svg aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg" width="14px" height="16px" viewBox="0 0 448 512"><path fill="#{primary}" d="#{$svg}"></path></svg>'
+    );
+  }
+}
+
+span.chcklst-box {
+  &:before {
+    display: inline-block;
+    vertical-align: middle;
+  }
+
+  &:not(.checked) {
+    &.fa-square-o {
+      @include checklist-svg-icon(
+        "M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zm-6 400H54c-3.3 0-6-2.7-6-6V86c0-3.3 2.7-6 6-6h340c3.3 0 6 2.7 6 6v340c0 3.3-2.7 6-6 6z"
+      );
+    }
+    &.fa-square {
+      @include checklist-svg-icon(
+        "M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48z"
+      );
+    }
+    &.fa-minus-square-o {
+      @include checklist-svg-icon(
+        "M108 284c-6.6 0-12-5.4-12-12v-32c0-6.6 5.4-12 12-12h232c6.6 0 12 5.4 12 12v32c0 6.6-5.4 12-12 12H108zM448 80v352c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V80c0-26.5 21.5-48 48-48h352c26.5 0 48 21.5 48 48zm-48 346V86c0-3.3-2.7-6-6-6H54c-3.3 0-6 2.7-6 6v340c0 3.3 2.7 6 6 6h340c3.3 0 6-2.7 6-6z"
+      );
+    }
+  }
+
+  &.checked {
+    @include checklist-svg-icon(
+      "M400 480H48c-26.51 0-48-21.49-48-48V80c0-26.51 21.49-48 48-48h352c26.51 0 48 21.49 48 48v352c0 26.51-21.49 48-48 48zm-204.686-98.059l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.248-16.379-6.249-22.628 0L184 302.745l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.25 16.379 6.25 22.628.001z"
+    );
+
+    &.fa-check-square-o {
+      @include checklist-svg-icon(
+        "M400 32H48C21.49 32 0 53.49 0 80v352c0 26.51 21.49 48 48 48h352c26.51 0 48-21.49 48-48V80c0-26.51-21.49-48-48-48zm0 400H48V80h352v352zm-35.864-241.724L191.547 361.48c-4.705 4.667-12.303 4.637-16.97-.068l-90.781-91.516c-4.667-4.705-4.637-12.303.069-16.971l22.719-22.536c4.705-4.667 12.303-4.637 16.97.069l59.792 60.277 141.352-140.216c4.705-4.667 12.303-4.637 16.97.068l22.536 22.718c4.667 4.706 4.637 12.304-.068 16.971z"
+      );
+    }
+  }
+}
+
+.fa-spin {
+  display: inline-block;
+  vertical-align: middle;
+  margin-bottom: 0.5em;
+  animation: fa-spin 2s infinite linear;
+}
+
+@keyframes fa-spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(1turn);
+  }
+}
diff --git a/plugin.rb b/plugin.rb
index 9a46d8b..1dd03c4 100644
--- a/plugin.rb
+++ b/plugin.rb
@@ -7,3 +7,5 @@
 enabled_site_setting :checklist_enabled
 
 register_asset 'stylesheets/checklist.scss'
+
+register_svg_icon 'spinner' if respond_to?(:register_svg_icon)

GitHub