Merge branch 'move-to-toolbar' into 'master'

Move the icons to the comment toolbar of the textarea

See merge request conventionalcomments/conventional-comments-button!12

src/inject/inject.css

@@ -1,37 +1,42 @@
+.has-conventional-comments-buttons.comment-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.has-conventional-comments-buttons.comment-toolbar .toolbar-text {
+  margin: 0;
+}
+
+.has-conventional-comments-buttons.comment-toolbar .uploading-container {
+  float: none;
+  margin-right: 0;
+}
+
 #conventionalCommentButtonContainer {
   display: flex;
   align-items: flex-end;
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  opacity: 0;
-  width: 25px;
-  height: 60px;
-  transition: all 0.3s;
-  overflow: hidden;
-}
-
-#conventionalCommentButtonContainer:hover {
-  width: 300px;
-  opacity: 1;
+  margin-left:0;
 }
 
 #conventionalCommentButtonContainer .buttonContainer {
   display: flex;
-  flex-direction: column-reverse;
+  flex-direction: row;
   height: 25px;
   width: 25px;
   overflow: hidden;
   transition: all 0.3s;
 }
 
-#conventionalCommentButtonContainer .buttonContainer:hover {
-  height: 60px;
+#conventionalCommentButtonContainer .buttonContainer.hasBlockingButton:hover {
+  width: 50px;
 }
 
 #conventionalCommentButtonContainer button {
   margin-right: 0.5rem;
+  background: transparent;
   border: none;
+  color: #666;
   height: 25px;
   width: 25px;
   outline: 0;
@@ -42,10 +47,26 @@
   width: 13px;
 }
 
+#conventionalCommentButtonContainer button:hover {
+  color: #1068bf;
+}
+
 #conventionalCommentButtonContainer button:focus {
   outline: 0;
 }
 
+.gl-dark #conventionalCommentButtonContainer button {
+  color: #999;
+}
+
+.gl-dark #conventionalCommentButtonContainer button:hover {
+  color: #63a6e9;
+}
+
 #conventionalCommentButtonContainer button.blocking {
   color: red;
 }
+
+#conventionalCommentButtonContainer button.blocking:hover {
+  color: #f57f6c;
+}

src/inject/inject.js

@@ -81,10 +81,15 @@ const semanticButtonClickHandler = (e, { textarea, label, blocking }) => {
 
 const buttonGenerator = (textarea, parent, label, blocking) => {
   const button = document.createElement("button");
+  button.classList.add("has-tooltip")
+  button.setAttribute("data-title", semanticLabels[label].text);
   button.innerHTML = semanticLabels[label].icon;
+
   if (blocking) {
     button.classList.add("blocking");
+    button.setAttribute("data-title", `${semanticLabels[label].text} (blocking)`);
   }
+
   button.addEventListener("click", (e) =>
     semanticButtonClickHandler(e, { textarea, label, blocking })
   );
@@ -96,28 +101,28 @@ const buttonPairGenerator = (textarea, parent, label) => {
   buttonContainer.classList.add("buttonContainer");
   buttonGenerator(textarea, buttonContainer, label, false);
   if (semanticLabels[label].blocking) {
+    buttonContainer.classList.add("hasBlockingButton");
     buttonGenerator(textarea, buttonContainer, label, true);
   }
   parent.appendChild(buttonContainer);
 };
 
 const addSemanticButton = (element) => {
-  const parent = element.closest("div");
+  const parent = element.closest(".div-dropzone-wrapper").querySelector(".comment-toolbar");
   const container = document.createElement("div");
   container.id = "conventionalCommentButtonContainer";
 
   Object.keys(semanticLabels).forEach((label) => {
     buttonPairGenerator(element, container, label);
   });
-  parent.appendChild(container);
+  parent.classList.remove("clearfix");
+  parent.classList.add('has-conventional-comments-buttons');
+  parent.prepend(container);
 };
 
-document.addEventListener("click", (e) => {
-  if (
-    (e.target.id === "note_note" || e.target.id === "note-body") &&
-    !e.target.dataset.semanticButtonInitialized
-  ) {
-    e.target.dataset.semanticButtonInitialized = true;
-    addSemanticButton(e.target);
-  }
-});
+setInterval(function () {
+  document.querySelectorAll("#note_note:not([data-semantic-button-initialized]), #note-body:not([data-semantic-button-initialized])").forEach(function(note) {
+    note.dataset.semanticButtonInitialized = "true";
+    addSemanticButton(note);
+  });
+}, 1000);