UX: refactor & update small post styles (#19274)

2022-12-05 09:54:29 -05:00 · 2022-12-05 09:54:29 -05:00 · 6d1de26279
parent 1245743595
commit 6d1de26279
7 changed files with 109 additions and 150 deletions
--- a/app/assets/javascripts/discourse/app/widgets/post-small-action.js
+++ b/app/assets/javascripts/discourse/app/widgets/post-small-action.js
@ -97,39 +97,8 @@ export default createWidget("post-small-action", {

  html(attrs) {
    const contents = [];
-
-    if (attrs.canRecover) {
-      contents.push(
-        this.attach("button", {
-          className: "small-action-recover",
-          icon: "undo",
-          action: "recoverPost",
-          title: "post.controls.undelete",
-        })
-      );
-    }
-
-    if (attrs.canDelete) {
-      contents.push(
-        this.attach("button", {
-          className: "small-action-delete",
-          icon: "trash-alt",
-          action: "deletePost",
-          title: "post.controls.delete",
-        })
-      );
-    }
-
-    if (attrs.canEdit && !attrs.canRecover) {
-      contents.push(
-        this.attach("button", {
-          className: "small-action-edit",
-          icon: "pencil-alt",
-          action: "editPost",
-          title: "post.controls.edit",
-        })
-      );
-    }
+    const buttons = [];
+    const customMessage = [];

    contents.push(
      avatarFor.call(this, "small", {
@ -149,19 +118,56 @@ export default createWidget("post-small-action", {
        attrs.actionCodePath
      );
      contents.push(new RawHtml({ html: `<p>${description}</p>` }));
+    }

-      if (attrs.cooked) {
-        contents.push(
-          new RawHtml({
-            html: `<div class='custom-message'>${attrs.cooked}</div>`,
-          })
-        );
-      }
+    if (attrs.canRecover) {
+      buttons.push(
+        this.attach("button", {
+          className: "btn-flat small-action-recover",
+          icon: "undo",
+          action: "recoverPost",
+          title: "post.controls.undelete",
+        })
+      );
+    }
+
+    if (attrs.canEdit && !attrs.canRecover) {
+      buttons.push(
+        this.attach("button", {
+          className: "btn-flat small-action-edit",
+          icon: "pencil-alt",
+          action: "editPost",
+          title: "post.controls.edit",
+        })
+      );
+    }
+
+    if (attrs.canDelete) {
+      buttons.push(
+        this.attach("button", {
+          className: "btn-flat btn-danger small-action-delete",
+          icon: "trash-alt",
+          action: "deletePost",
+          title: "post.controls.delete",
+        })
+      );
+    }
+
+    if (!attrs.actionDescriptionWidget && attrs.cooked) {
+      customMessage.push(
+        new RawHtml({
+          html: `<div class='small-action-custom-message'>${attrs.cooked}</div>`,
+        })
+      );
    }

    return [
      h("div.topic-avatar", iconNode(icons[attrs.actionCode] || "exclamation")),
-      h("div.small-action-desc", contents),
+      h("div.small-action-desc", [
+        h("div.small-action-contents", contents),
+        h("div.small-action-buttons", buttons),
+        customMessage,
+      ]),
    ];
  },
 });
--- a/app/assets/javascripts/discourse/tests/integration/components/widgets/post-small-action-test.js
+++ b/app/assets/javascripts/discourse/tests/integration/components/widgets/post-small-action-test.js
@ -16,9 +16,9 @@ module(
        hbs`<MountWidget @widget="post-small-action" @args={{this.args}} />`
      );

-      assert.ok(!exists(".small-action-desc > .small-action-delete"));
-      assert.ok(!exists(".small-action-desc > .small-action-recover"));
-      assert.ok(!exists(".small-action-desc > .small-action-edit"));
+      assert.ok(!exists(".small-action-desc .small-action-delete"));
+      assert.ok(!exists(".small-action-desc .small-action-recover"));
+      assert.ok(!exists(".small-action-desc .small-action-edit"));
    });

    test("shows edit button if canEdit", async function (assert) {
@ -29,7 +29,7 @@ module(
      );

      assert.ok(
-        exists(".small-action-desc > .small-action-edit"),
+        exists(".small-action-desc .small-action-edit"),
        "it adds the edit small action button"
      );
    });
@ -55,11 +55,11 @@ module(
      );

      assert.ok(
-        !exists(".small-action-desc > .small-action-edit"),
+        !exists(".small-action-desc .small-action-edit"),
        "it does not add the edit small action button"
      );
      assert.ok(
-        exists(".small-action-desc > .small-action-recover"),
+        exists(".small-action-desc .small-action-recover"),
        "it adds the recover small action button"
      );
    });
@ -72,7 +72,7 @@ module(
      );

      assert.ok(
-        exists(".small-action-desc > .small-action-delete"),
+        exists(".small-action-desc .small-action-delete"),
        "it adds the delete small action button"
      );
    });
@ -85,7 +85,7 @@ module(
      );

      assert.ok(
-        exists(".small-action-desc > .small-action-recover"),
+        exists(".small-action-desc .small-action-recover"),
        "it adds the recover small action button"
      );
    });
--- a/app/assets/stylesheets/common/base/topic-post.scss
+++ b/app/assets/stylesheets/common/base/topic-post.scss
@ -1123,121 +1123,107 @@ blockquote > *:last-child {
  display: flex;
  align-items: center;

+  &.deleted {
+    background-color: var(--danger-low-mid);
+  }
+
  .topic-avatar,
  .small-action-desc {
    border-top: 1px solid var(--primary-low);
  }

  .topic-avatar {
-    align-self: flex-start;
-    padding: 0.7em 0;
+    display: flex;
+    align-self: stretch;
    flex: 0 0 auto;
+    margin: 0;
+    padding-top: 1em;
    width: var(--topic-avatar-width);
+    justify-content: center;
    .d-icon {
-      font-size: 2em;
+      font-size: var(--font-up-3);
      width: var(--topic-avatar-width);
-      text-align: center;
      color: var(--primary-low-mid);
    }
  }

-  &.deleted {
-    background-color: var(--danger-low-mid);
-  }
-
-  .small-action-desc.timegap {
-    color: var(--primary-medium);
-  }
-
  .small-action-desc {
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
-    align-items: center;
+    color: var(--primary-700);
    padding: 1em 0 1em var(--topic-body-width-padding);
-    text-transform: uppercase;
-    font-weight: bold;
-    font-size: var(--font-down-1);
-    color: var(--primary-medium);
    width: calc(
      var(--topic-body-width) + (var(--topic-body-width-padding) * 2)
    );
    min-width: 0; // Allows flex container to shrink

-    button {
-      align-self: flex-start;
-      font-size: var(--font-up-1);
-      .d-icon {
-        font-size: var(--font-down-1);
-      }
-    }
-
-    .custom-message {
-      flex: 1 1 100%;
-      text-transform: none;
-      font-weight: normal;
-      font-size: var(--font-up-1);
-      order: 12;
-      word-break: break-word;
-      min-width: 0; // Allows content like oneboxes to shrink
-      p {
-        margin-bottom: 0;
-      }
-    }
-    a.trigger-user-card {
-      align-self: stretch;
-    }
    .avatar {
-      margin-right: 0.8em;
+      margin-right: 0.5em;
      float: left;
    }

-    > p {
+    p {
      margin: 0;
      padding-right: 0.5em;
-      line-height: var(--line-height-medium);
-      flex: 1 1;
-      .mention {
-        // needs some special sizing and positioning due to surrounding all-caps text
-        position: relative;
-        top: -1px;
-        font-size: var(--font-0);
-        text-transform: initial;
-      }
+    }
+  }
+
+  .small-action-contents {
+    flex: 1 1 auto;
+  }
+
+  .small-action-buttons {
+    margin-left: auto;
+  }
+
+  .small-action-custom-message {
+    flex: 1 1 100%;
+    font-weight: normal;
+    margin-top: 0.5em;
+    word-break: break-word;
+    min-width: 0; // Allows content like oneboxes to shrink
+    color: var(--primary);
+    p {
+      margin-bottom: 0;
    }
  }

  button {
    background: transparent;
-    border: 0;
-    order: 9;
-    &:last-of-type {
-      margin-left: auto;
-      order: 8;
+    font-size: var(--font-down-1);
+    .d-icon {
+      color: var(--primary-500);
+    }
+
+    .discourse-no-touch & {
+      &:hover,
+      &:focus {
+        background: var(--primary-200);
+        .d-icon {
+          color: var(--primary);
+        }
+      }
    }
  }

  &.topic-post-visited {
-    border-top: none;
-
-    + .small-action {
-      border-top: none;
-    }
-
    .topic-post-visited-line {
      text-align: center;
      border-bottom: 1px solid var(--danger-medium);
-      line-height: 0.1em;
-      margin: 1rem 0px;
+      z-index: z("base") + 2; // ensures last visit border is on top of post borders
+      line-height: 0;
+      margin: 0;
+      margin-bottom: -1px;
+      color: var(--danger-medium);
+      font-size: var(--font-down-1);
      width: calc(
        var(--topic-body-width) + var(--topic-avatar-width) +
          (var(--topic-body-width-padding) * 2)
      );
      .topic-post-visited-message {
        background-color: var(--secondary);
-        color: var(--danger-medium);
-        font-size: var(--font-down-1);
-        padding: 0 8px;
+        padding: 0 0.5em;
      }
    }
  }
--- a/app/assets/stylesheets/common/foundation/color_transformations.scss
+++ b/app/assets/stylesheets/common/foundation/color_transformations.scss
@ -18,7 +18,7 @@ $primary-300: dark-light-diff($primary, $secondary, 80%, -60%) !default;
 $primary-400: dark-light-diff($primary, $secondary, 70%, -45%) !default;
 $primary-500: dark-light-diff($primary, $secondary, 60%, -40%) !default;
 $primary-600: dark-light-diff($primary, $secondary, 50%, -35%) !default;
-$primary-700: dark-light-diff($primary, $secondary, 30%, -30%) !default;
+$primary-700: dark-light-diff($primary, $secondary, 38%, -30%) !default;
 $primary-800: dark-light-diff($primary, $secondary, 30%, -25%) !default;
 $primary-900: dark-light-diff($primary, $secondary, 15%, -10%) !default;

--- a/app/assets/stylesheets/mobile/personal-message.scss
+++ b/app/assets/stylesheets/mobile/personal-message.scss
@ -35,19 +35,6 @@
    width: 100%;
  }

-  .small-action {
-    margin-left: 0;
-  }
-
-  .small-action-desc.timegap {
-    margin-left: 0;
-    padding: 1em 1em 1em 0;
-  }
-
-  .small-action:not(.time-gap) {
-    padding: 1em;
-  }
-
  .topic-meta-data .names .first.staff {
    flex-basis: 100%;
    & + .second,
--- a/app/assets/stylesheets/mobile/topic-post.scss
+++ b/app/assets/stylesheets/mobile/topic-post.scss
@ -342,18 +342,6 @@ span.highlighted {
  /* must render on top of topic-body + topic-meta-data, otherwise not tappable */
 }

-.small-action .topic-avatar {
-  display: flex;
-  align-self: stretch;
-  align-items: flex-start;
-  margin-right: 0;
-  float: unset;
-  height: auto;
-  .d-icon {
-    font-size: 1.8em;
-  }
-}
-
 .topic-meta-data {
  margin-left: 50px;
  font-size: var(--font-down-1);
--- a/plugins/chat/assets/stylesheets/common/common.scss
+++ b/plugins/chat/assets/stylesheets/common/common.scss
@ -605,14 +605,6 @@ body.has-full-page-chat {
  }
 }

-.small-action {
-  .open-chat {
-    text-transform: uppercase;
-    font-weight: 700;
-    font-size-adjust: var(--font-down-0);
-  }
-}
-
 .chat-message-collapser,
 .chat-message-text {
  > p {