fixing comment form add button

4 files changed, 45 insertions, 15 deletions

diff --git a/public/assets/css/hootstream.css b/public/assets/css/hootstream.css
index 7533b2c..08b5cf2 100644
--- a/public/assets/css/hootstream.css
+++ b/public/assets/css/hootstream.css
@@ -62,7 +62,6 @@
   transition: opacity 0.1s;
   display: flex;
   flex-direction: row;
-  flex-wrap: ;
   align-items: flex-start;
   justify-content: center;
 }
diff --git a/public/assets/js/lib/views/details/commentform.js b/public/assets/js/lib/views/details/commentform.js
index abda1e4..dc2ac75 100644
--- a/public/assets/js/lib/views/details/commentform.js
+++ b/public/assets/js/lib/views/details/commentform.js
@@ -13,7 +13,6 @@ var CommentForm = FormView.extend({
     this.__super__.initialize.call(this, opt);
     this.template = this.$(".template").html();
     this.$comment = this.$("[name=comment]");
-    console.log("initialize");
   },
 
   show: function () {
diff --git a/public/assets/js/lib/views/stream/hootstream.js b/public/assets/js/lib/views/stream/hootstream.js
index 311d84e..143dc92 100644
--- a/public/assets/js/lib/views/stream/hootstream.js
+++ b/public/assets/js/lib/views/stream/hootstream.js
@@ -71,7 +71,7 @@ var HootStream = View.extend({
     const thread = $(event.currentTarget)
       .closest(".threadTitle")
       .data("thread");
-    console.log(action, thread);
+    // console.log(action, thread);
     switch (action) {
       case "play":
         this.onPlay(event, thread);
@@ -126,16 +126,24 @@ var HootStream = View.extend({
   },
 
   onShowCommentForm: function (event, thread) {
-    if (this.forms[thread]) {
-      this.forms[thread].destroy();
-      this.forms[thread] = null;
+    const isOpen = !!this.forms[thread];
+    // console.log("comment", thread, !!isOpen);
+    if (isOpen) {
+      this.onHideCommentForm(event, thread);
       return;
     }
-    const $threadTitle = $(event.target).closest(".threadTitle");
+    $(event.target)
+      .closest(".actions")
+      .find(".addIcon")
+      .replaceWith($(ICONS.remove));
+    const $threadTitle = $(event.currentTarget)
+      .closest(".thread")
+      .find(".threadTitle");
     const $form = $(this.commentFormTemplate);
     $form.data("thread", thread);
     $form.insertAfter($threadTitle);
     $form.find("textarea").focus();
+    console.log($threadTitle);
     const commentForm = new CommentForm({ parent: this });
     commentForm.action = `/api/thread/${thread}/comment`;
     commentForm.setElement($form);
@@ -147,8 +155,22 @@ var HootStream = View.extend({
     this.forms[thread] = commentForm;
   },
 
+  onHideCommentForm: function (event, thread) {
+    this.forms[thread].destroy();
+    this.forms[thread] = null;
+    $(event.target)
+      .closest(".actions")
+      .find(".removeIcon")
+      .replaceWith($(ICONS.add));
+  },
+
   onSubmitComment: function (data, form) {
     const { thread } = form.opt;
+    form.$el
+      .closest(".thread")
+      .find(".actions")
+      .find(".removeIcon")
+      .replaceWith($(ICONS.add));
     form.destroy();
     this.forms[thread] = null;
     const current = this.state.threadLookup[thread];
@@ -435,19 +457,27 @@ var HootStream = View.extend({
     const sortedFiles = this.sortFiles(files, thread.settings?.sort);
 
     const actions = [
-      hasAudio && { action: "play", label: "play music", icon: "play" },
-      { action: "post", label: "post", icon: "add" },
+      hasAudio && {
+        action: "play",
+        label: "play music",
+        icon: ICONS.play,
+      },
+      {
+        action: "post",
+        label: "post",
+        icon: ICONS.add,
+      },
       !isViewingThread &&
         !isCompleteThread && {
           action: "expand",
           label: "expand",
-          icon: "expand",
+          icon: ICONS.expand,
         },
     ]
       .filter((action) => !!action)
       .map(
         ({ action, icon, label }) =>
-          `<div class="action" data-action="${action}" title="${label}">${ICONS[icon]}</div>`
+          `<div class="action" data-action="${action}" title="${label}">${icon}</div>`
       )
       .join("");
 
diff --git a/public/assets/js/util/icons.js b/public/assets/js/util/icons.js
index f145515..5ff1ea6 100644
--- a/public/assets/js/util/icons.js
+++ b/public/assets/js/util/icons.js
@@ -1,7 +1,9 @@
 const ICONS = {
-  edit: '<svg class="icon" focusable="false" aria-hidden="true" viewBox="0 0 24 24"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"></path></svg>',
-  play: '<svg class="icon" focusable="false" aria-hidden="true" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"></path></svg>',
+  edit: '<svg class="icon editIcon" focusable="false" aria-hidden="true" viewBox="0 0 24 24"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"></path></svg>',
+  play: '<svg class="icon playIcon" focusable="false" aria-hidden="true" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"></path></svg>',
   expand:
-    '<svg class="icon" focusable="false" aria-hidden="true" viewBox="0 0 24 24"><path d="M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6z"></path></svg>',
-  add: '<svg class="icon" focusable="false" aria-hidden="true" viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"></path></svg>',
+    '<svg class="icon expandIcon" focusable="false" aria-hidden="true" viewBox="0 0 24 24"><path d="M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6z"></path></svg>',
+  add: '<svg class="icon addIcon" focusable="false" aria-hidden="true" viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"></path></svg>',
+  remove:
+    '<svg class="icon removeIcon" focusable="false" aria-hidden="true" viewBox="0 0 24 24"><path d="M19 13H5v-2h14v2z"></path></svg>',
 };