diff --git a/README.md b/README.md
index 7cb48f5..d807f6e 100644
--- a/README.md
+++ b/README.md
@@ -44,4 +44,8 @@ Recently chrome disallowed to install packed `crx` extension that are not listed
- Open manifest.json
- Add your domain to `permissions` and `content_scripts -> matches`
-- Open the browser and install or update the extension
+- Open the browser and install or update the extension
+
+## Credits
+
+This project bundles some of the icon coming from [font-awesome](https://fontawesome.com/) icons as SVG
diff --git a/src/inject/inject.css b/src/inject/inject.css
index 966d9ea..a31b5ea 100644
--- a/src/inject/inject.css
+++ b/src/inject/inject.css
@@ -37,10 +37,15 @@
outline: 0;
}
+#conventionalCommentButtonContainer button svg {
+ height: 13px;
+ width: 13px;
+}
+
#conventionalCommentButtonContainer button:focus {
outline: 0;
}
-#conventionalCommentButtonContainer button i.blocking {
+#conventionalCommentButtonContainer button.blocking {
color: red;
}
diff --git a/src/inject/inject.js b/src/inject/inject.js
index e9be4e3..785726e 100644
--- a/src/inject/inject.js
+++ b/src/inject/inject.js
@@ -1,37 +1,45 @@
+const trophyIcon = ``;
+const searchIcon = ``;
+const exclamationIcon = ``;
+const bugIcon = ``;
+const questionIcon = ``;
+const commentIcon = ``;
+const homeIcon = ``;
+
const semanticLabels = {
praise: {
text: "praise",
- icon: "fa-trophy",
+ icon: trophyIcon,
blocking: false,
},
nitpick: {
text: "nitpick",
- icon: "fa-search",
+ icon: searchIcon,
blocking: true,
},
suggestion: {
text: "suggestion",
- icon: "fa-exclamation",
+ icon: exclamationIcon,
blocking: true,
},
issue: {
text: "issue",
- icon: "fa-bug",
+ icon: bugIcon,
blocking: true,
},
question: {
text: "question",
- icon: "fa-question",
+ icon: questionIcon,
blocking: true,
},
thought: {
text: "thought",
- icon: "fa-comment",
+ icon: commentIcon,
blocking: false,
},
chore: {
text: "chore",
- icon: "fa-home",
+ icon: homeIcon,
blocking: true,
},
};
@@ -42,7 +50,7 @@ const fillTextAreaValue = (textarea, value, emptySubject = true) => {
textarea.value = value;
textarea.focus();
- const length = textarea.value.length
+ const length = textarea.value.length;
if (emptySubject) {
textarea.setSelectionRange(length - 9, length);
@@ -55,10 +63,17 @@ const semanticButtonClickHandler = (e, { textarea, label, blocking }) => {
const semanticComment = semanticCommentStructure
.replace("%text", semanticLabels[label].text)
.replace("%decoration", decoration);
- const cleanedValue = textarea.value.replace(/\*\*\w+(\s\(non-blocking\))?:\*\*\s?/, '');
+ const cleanedValue = textarea.value.replace(
+ /\*\*\w+(\s\(non-blocking\))?:\*\*\s?/,
+ ""
+ );
if (cleanedValue && cleanedValue !== "") {
- fillTextAreaValue(textarea, semanticComment.replace(":** ", `:** ${cleanedValue}`), false)
+ fillTextAreaValue(
+ textarea,
+ semanticComment.replace(":** ", `:** ${cleanedValue}`),
+ false
+ );
} else {
fillTextAreaValue(textarea, semanticComment);
}
@@ -66,13 +81,10 @@ const semanticButtonClickHandler = (e, { textarea, label, blocking }) => {
const buttonGenerator = (textarea, parent, label, blocking) => {
const button = document.createElement("button");
- const i = document.createElement("i");
- i.classList.add("fa");
- i.classList.add(semanticLabels[label].icon);
+ button.innerHTML = semanticLabels[label].icon;
if (blocking) {
- i.classList.add("blocking");
+ button.classList.add("blocking");
}
- button.appendChild(i);
button.addEventListener("click", (e) =>
semanticButtonClickHandler(e, { textarea, label, blocking })
);
@@ -102,8 +114,8 @@ const addSemanticButton = (element) => {
document.addEventListener("click", (e) => {
if (
- (e.target.id === "note_note" || e.target.id === "note-body") &&
- !e.target.dataset.semanticButtonInitialized
+ (e.target.id === "note_note" || e.target.id === "note-body") &&
+ !e.target.dataset.semanticButtonInitialized
) {
e.target.dataset.semanticButtonInitialized = true;
addSemanticButton(e.target);