UX: Change display of comment take 2.

This reverts commit e0b123a.
paviliondev · Feb 8, 2022 · c8133a1 · c8133a1
1 parent df74e3d
commit c8133a1
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 61 deletions.
diff --git a/assets/javascripts/discourse/widgets/qa-comment.js b/assets/javascripts/discourse/widgets/qa-comment.js
@@ -1,8 +1,8 @@
 import { createWidget } from "discourse/widgets/widget";
 import { h } from "virtual-dom";
-import PostCooked from "discourse/widgets/post-cooked";
-import DecoratorHelper from "discourse/widgets/decorator-helper";
+import RawHtml from "discourse/widgets/raw-html";
 import { dateNode } from "discourse/helpers/node";
+import { formatUsername } from "discourse/lib/utilities";
 
 export default createWidget("qa-comment", {
   tagName: "div.qa-comment",
@@ -16,29 +16,33 @@ export default createWidget("qa-comment", {
     if (state.isEditing) {
       return [this.attach("qa-comment-editor", attrs)];
     } else {
-      const commentInfo = [
-        h("span.qa-comment-info-username", this.attach("poster-name", attrs)),
+      const result = [
+        h(
+          "span.qa-comment-cooked",
+          new RawHtml({
+            html: attrs.cooked,
+          })
+        ),
+        h("span.qa-comment-info-separator", "–"),
+        h(
+          "a.qa-comment-info-username",
+          {
+            attributes: {
+              "data-user-card": attrs.username,
+            },
+          },
+          formatUsername(attrs.username)
+        ),
+        h("span.qa-comment-info-created", dateNode(new Date(attrs.created_at))),
       ];
 
       if (
         this.currentUser &&
         (attrs.user_id === this.currentUser.id || this.currentUser.admin)
       ) {
-        commentInfo.push(this.attach("qa-comment-actions", attrs));
+        result.push(this.attach("qa-comment-actions", attrs));
       }
 
-      commentInfo.push(
-        h("span.qa-comment-info-created", dateNode(new Date(attrs.created_at)))
-      );
-
-      const result = [
-        h("div.qa-comment-info", commentInfo),
-        h(
-          "span.qa-comment-cooked",
-          new PostCooked(attrs, new DecoratorHelper(this), this.currentUser)
-        ),
-      ];
-
       return [h("div.qa-comment-post", result)];
     }
   },

diff --git a/assets/stylesheets/common/question-answer.scss b/assets/stylesheets/common/question-answer.scss
@@ -12,49 +12,39 @@
     padding: 0.7em 0;
 
     .qa-comment-cooked {
-      .cooked {
-        padding: 0;
-
-        p {
-          margin: 0;
-        }
+      p {
+        display: inline;
       }
     }
 
-    .qa-comment-info {
-      display: flex;
-      flex-direction: row;
-      margin-bottom: 0.25em;
+    .qa-comment-info-separator {
+      margin: 0 0.3em;
+    }
 
-      .qa-comment-info-username {
-        .username {
-          font-weight: 100;
-          margin-right: 0.2em;
-        }
-      }
+    .qa-comment-info-username {
+      display: inline;
+      margin-right: 0.3em;
+    }
 
-      .qa-comment-info-created {
-        margin-left: auto;
-        color: var(--primary-med-or-secondary-med);
-      }
+    .qa-comment-info-created {
+      color: var(--primary-med-or-secondary-med);
+    }
 
-      .qa-comment-actions {
-        display: none;
-        margin-left: auto;
-        margin-right: 0.5em;
+    .qa-comment-actions {
+      display: none;
+      margin-left: 0.3em;
 
-        .qa-comment-actions-edit-link {
-          color: var(--primary-med-or-secondary-med);
-          margin-right: 0.25em;
-        }
+      .qa-comment-actions-edit-link {
+        color: var(--primary-med-or-secondary-med);
+        margin-right: 0.25em;
+      }
 
-        .qa-comment-actions-delete-link {
-          color: var(--primary-med-or-secondary-med);
-        }
+      .qa-comment-actions-delete-link {
+        color: var(--primary-med-or-secondary-med);
+      }
 
-        .qa-comment-actions-delete-link:hover {
-          color: var(--danger);
-        }
+      .qa-comment-actions-delete-link:hover {
+        color: var(--danger);
       }
     }
   }
@@ -74,16 +64,8 @@
 }
 
 .qa-comment:hover {
-  .qa-comment-post {
-    .qa-comment-info {
-      .qa-comment-info-created {
-        margin-left: 0;
-      }
-
-      .qa-comment-actions {
-        display: inline-block;
-      }
-    }
+  .qa-comment-actions {
+    display: inline-block;
   }
 }