UX: New topic card layout (#79)

javascripts/discourse/components/card/topic-activity-column.gjs

@@ -0,0 +1,52 @@
+import Component from "@glimmer/component";
+import avatar from "discourse/helpers/avatar";
+import formatDate from "discourse/helpers/format-date";
+import { i18n } from "discourse-i18n";
+import gt from "truth-helpers/helpers/gt";
+
+export default class TopicActivityColumn extends Component {
+  get displayUnreadPosts() {
+    return this.args.topic.unread_posts || this.args.topic.new_posts;
+  }
+
+  get activityText() {
+    if (this.args.topic.posts_count > 1) {
+      return "user_replied";
+    } else if (this.args.topic.posts_count === 1) {
+      return "user_posted";
+    }
+  }
+
+  <template>
+    <span class="topic-activity">
+      <div class="topic-activity__user">
+        {{#if (gt @topic.replyCount 1)}}
+          {{avatar @topic.lastPosterUser imageSize="small"}}
+          <span
+            class="topic-activity__username"
+          >@{{@topic.last_poster_username}}</span>
+        {{else}}
+          {{avatar @topic.creator imageSize="small"}}
+          <span
+            class="topic-activity__username"
+          >@{{@topic.creator.username}}</span>
+        {{/if}}
+      </div>
+      <div class="topic-activity__reason">
+        {{i18n (themePrefix this.activityText)}}
+      </div>
+      <div class="topic-activity__time">
+        {{formatDate @topic.bumpedAt}}
+      </div>
+      {{#if this.displayUnreadPosts}}
+        <span class="topic-post-badges">
+          <a
+            href={{@topic.url}}
+            title={{i18n "topic.unread_posts" count=this.displayUnreadPosts}}
+            class="badge badge-notification unread-posts"
+          >{{this.displayUnreadPosts}}</a>
+        </span>
+      {{/if}}
+    </span>
+  </template>
+}

javascripts/discourse/initializers/topic-list-columns.gjs

@@ -1,30 +1,28 @@
 import { withPluginApi } from "discourse/lib/plugin-api";
-import TopicAuthorAvatarColumn from "../components/card/topic-author-avatar-column";
+import TopicActivityColumn from "../components/card/topic-activity-column";
-import TopicAuthorColumn from "../components/card/topic-author-column";
 import TopicCategoryColumn from "../components/card/topic-category-column";
 import TopicLikesColumn from "../components/card/topic-likes-column";
 import TopicRepliesColumn from "../components/card/topic-replies-column";
 import TopicStatusColumn from "../components/card/topic-status-column";
 
-const TopicAuthor = <template>
+const TopicActivity = <template>
-  <td class="topic-author-data">
+  <td class="topic-activity-data">
-    <TopicAuthorColumn @topic={{@topic}} />
+    <TopicActivityColumn @topic={{@topic}} />
   </td>
 </template>;
 
-const TopicAuthorAvatar = <template>
+const TopicStatus = <template>
-  <td class="topic-author-avatar-data">
+  <td class="topic-status-data">
-    <TopicAuthorAvatarColumn @topic={{@topic}} />
-  </td>
-</template>;
-
-const TopicCategoryStatus = <template>
-  <td class="topic-category-status-data">
-    <TopicCategoryColumn @topic={{@topic}} />
     <TopicStatusColumn @topic={{@topic}} />
   </td>
 </template>;
 
+const TopicCategory = <template>
+  <td class="topic-category-data">
+    <TopicCategoryColumn @topic={{@topic}} />
+  </td>
+</template>;
+
 const TopicLikesReplies = <template>
   <td class="topic-likes-replies-data">
     <TopicLikesColumn @topic={{@topic}} />
@@ -40,17 +38,17 @@ export default {
       api.registerValueTransformer(
         "topic-list-columns",
         ({ value: columns }) => {
-          columns.add("topic-author", {
+          columns.add("topic-activity", {
-            item: TopicAuthor,
+            item: TopicActivity,
-            after: "activity",
+            after: "title",
           });
-          columns.add("topic-category-status", {
+          columns.add("topic-status", {
-            item: TopicCategoryStatus,
+            item: TopicStatus,
             after: "topic-author",
           });
-          columns.add("topic-author-avatar", {
+          columns.add("topic-category", {
-            item: TopicAuthorAvatar,
+            item: TopicCategory,
-            after: "topic-category-status",
+            after: "topic-status",
           });
           columns.add("topic-likes-replies", {
             item: TopicLikesReplies,
@@ -59,6 +57,7 @@ export default {
           columns.delete("posters");
           columns.delete("views");
           columns.delete("replies");
+          columns.delete("activity");
           return columns;
         }
       );

locales/en.yml

@@ -1,12 +1,8 @@
 en:
   theme_metadata:
     description: "A simple, beautiful theme that improves the out of the box experience for Discourse sites."
-  topic_bookmarked: "Bookmarked"
-  topic_closed_archived: "Closed and archived"
-  topic_closed: "Closed"
-  topic_archived: "Archived"
-  topic_warning: "Warning"
-  topic_personal_message: "Personal message"
   topic_pinned: "Pinned"
-  topic_unpinned: "Unpinned"
   topic_hot: "Hot"
+  user_replied: "replied"
+  user_posted: "posted"
+

scss/mobile-stuff.scss

@@ -85,19 +85,6 @@
         padding-top: 0;
       }
     }
-
-    .topic-list-item {
-      @include breakpoint(mobile-extra-large) {
-        box-shadow: none;
-        border-radius: 0;
-        //to be moved to topic card segment for general use
-        // .navigation-category & {
-        //   .badge-category__wrapper {
-        //     display: none;
-        //   }
-        // }
-      }
-    }
   }
 
   #topic-title {

scss/topic-cards.scss

@@ -24,132 +24,67 @@
   }
 }
 
-.bulk-select-enabled .topic-list-item {
+.topic-list-body .topic-list-item {
-  grid-template-areas:
-    "avatar author status status . activity"
-    ". topic-title topic-title topic-title likes-replies likes-replies category";
-  .bulk-select {
-    grid-area: bulk-select;
-    padding: 0;
-    margin: 0;
-    align-self: center;
-    justify-self: center;
-    label {
-      margin: 0;
-    }
-  }
-  @include breakpoint(large) {
-    grid-template-columns: 44px min-content min-content auto min-content min-content min-content;
-    grid-template-rows: 22px minmax(22px, auto);
-    grid-template-areas:
-      "avatar author status status  . activity"
-      ". topic-title topic-title topic-title . . likes-replies"
-      ". topic-title topic-title topic-title . . category";
-  }
-  @include breakpoint(mobile-extra-large) {
-    grid-template-columns: 25px auto repeat(6, 1fr);
-    grid-template-rows: auto auto auto;
-    grid-template-areas:
-      "avatar category-status category-status . . . . activity"
-      "topic-title topic-title topic-title topic-title topic-title topic-title topic-title topic-title"
-      "avatar author . . . . . likes-replies";
-  }
-}
-
-body.user-messages-page .topic-list-item {
-  .topic-category-status-data {
-    display: none;
-  }
-  grid-template-areas:
-    "avatar author status status . . activity"
-    ". topic-title topic-title topic-title likes-replies likes-replies likes-replies";
-  &.excerpt-expanded {
-    grid-template-columns: 44px repeat(6, 1fr) auto;
-    grid-template-rows: 22px auto auto 30px;
-    grid-template-areas:
-      "avatar author status status . . . activity"
-      "avatar topic-title topic-title topic-title topic-title . . ."
-      ". excerpt excerpt excerpt excerpt excerpt . ."
-      ". excerpt excerpt excerpt excerpt excerpt likes-replies likes-replies";
-    @include breakpoint(extra-large) {
-      grid-template-areas:
-        "avatar author status status . . . activity"
-        "avatar topic-title topic-title topic-title topic-title . . ."
-        ". excerpt excerpt excerpt excerpt excerpt . likes-replies"
-        ". excerpt excerpt excerpt excerpt excerpt . likes-replies";
-    }
-  }
-  @include breakpoint(mobile-extra-large) {
-    grid-template-columns: 25px auto repeat(6, 1fr);
-    grid-template-rows: auto auto;
-    grid-template-areas:
-      "topic-title topic-title topic-title topic-title topic-title topic-title topic-title activity"
-      "avatar author . . . . . likes-replies";
-    .topic-excerpt {
-      display: none;
-    }
-  }
-}
-
-.topic-list-item {
   text-overflow: ellipsis;
   padding: 0.75em 1rem;
   border: 1px solid var(--primary-300);
   display: grid;
-  grid-template-columns: 44px min-content min-content auto min-content min-content min-content;
+  grid-template-columns: 22px min-content min-content auto min-content min-content min-content;
   grid-template-rows: 22px minmax(22px, auto);
   grid-template-areas:
-    "avatar author status status . . activity"
+    "activity activity activity activity . . status"
-    ". topic-title topic-title topic-title likes-replies likes-replies category";
+    "topic-title topic-title topic-title topic-title likes-replies likes-replies category";
   grid-column-gap: 12px;
   grid-row-gap: 8px;
   border-radius: var(--d-border-radius);
   &.excerpt-expanded {
-    grid-template-columns: 44px auto repeat(5, 1fr) auto;
+    grid-template-columns: 22px auto repeat(5, 1fr) auto;
     grid-template-rows: 22px auto auto 30px;
     grid-template-areas:
-      "avatar author status status . . . activity"
+      "activity activity activity activity . . . status"
-      "avatar topic-title topic-title topic-title topic-title . . ."
+      "topic-title topic-title topic-title topic-title topic-title topic-title . ."
-      ". excerpt excerpt excerpt excerpt excerpt . ."
+      "excerpt excerpt excerpt excerpt excerpt excerpt . ."
-      ". excerpt excerpt excerpt excerpt excerpt likes-replies category";
+      "excerpt excerpt excerpt excerpt excerpt excerpt likes-replies category";
     @include breakpoint(extra-large) {
       grid-template-areas:
-        "avatar author status status . . . activity"
+        "activity activity activity activity . . . status"
-        "avatar topic-title topic-title topic-title topic-title . . ."
+        "topic-title topic-title topic-title topic-title topic-title topic-title . ."
-        ". excerpt excerpt excerpt excerpt excerpt . likes-replies"
+        "excerpt excerpt excerpt excerpt excerpt excerpt excerpt likes-replies"
-        ". excerpt excerpt excerpt excerpt excerpt . category";
+        "excerpt excerpt excerpt excerpt excerpt excerpt excerpt category";
     }
     @include breakpoint(mobile-extra-large) {
       grid-template-columns: 25px auto repeat(6, 1fr);
       grid-template-rows: auto auto auto;
       grid-template-areas:
-        "category-status category-status category-status . . . . activity"
+        "activity activity activity activity activity activity activity status"
         "topic-title topic-title topic-title topic-title topic-title topic-title topic-title topic-title"
-        "avatar author . . . . . likes-replies";
+        "category . . . . . . likes-replies";
       .topic-excerpt {
         display: none;
       }
     }
   }
   @include breakpoint(large) {
-    grid-template-columns: 44px min-content min-content auto min-content min-content min-content;
+    grid-template-columns: 22px repeat(6, 1fr);
     grid-template-rows: 22px minmax(22px, auto);
     grid-template-areas:
-      "avatar author status status . . activity"
+      "activity activity activity activity activity activity status"
-      ". topic-title topic-title topic-title . . likes-replies"
+      "topic-title topic-title topic-title topic-title topic-title topic-title topic-title"
-      ". topic-title topic-title topic-title . . category";
+      "category . . . . . likes-replies";
   }
   @include breakpoint(mobile-extra-large) {
-    grid-template-columns: 25px auto repeat(6, 1fr);
+    grid-template-columns: 25px repeat(7, 1fr);
     grid-template-rows: auto auto auto;
     grid-template-areas:
-      "category-status category-status category-status . . . . activity"
+      "activity activity activity activity activity activity activity status"
       "topic-title topic-title topic-title topic-title topic-title topic-title topic-title topic-title"
-      "avatar author . . . . . likes-replies";
+      "category . . . . . . likes-replies";
   }
   @include breakpoint(mobile-extra-large) {
     border: none;
     border-bottom: 1px solid var(--primary-200);
+    box-shadow: none;
+    border-radius: 0;
   }
 
   // display contents
@@ -165,34 +100,42 @@ body.user-messages-page .topic-list-item {
     padding: 0;
   }
 
-  // avatar & author
+  // topic activity, avatar, text
-  .topic-author-avatar-data,
+  .topic-activity-data {
-  .author-avatar {
+    grid-area: activity;
-    grid-area: avatar;
-    margin: 0;
   }
-  .topic-author-avatar img.avatar,
+  .topic-activity {
-  .author-avatar img.avatar {
-    width: 44px;
-    height: 44px;
-    border-radius: var(--d-border-radius);
-    @include breakpoint(mobile-extra-large) {
-      width: 25px;
-      height: 25px;
-    }
-  }
-  td.topic-author-data {
-    grid-area: author;
     display: flex;
-    gap: 0.5em;
+    gap: 0.25em;
-    align-items: center;
   }
-  .topic-author-data .topic-author {
+
-    color: var(--primary-500);
+  .topic-activity__user {
+    display: flex;
+    gap: 0.25em;
+  }
+
+  .topic-activity__user .avatar {
+    width: 22px;
+    height: 22px;
+    border-radius: 4px;
   }
 
   // status
+  .topic-status-data {
+    grid-area: status;
+    position: relative;
+  }
   .topic-status-card {
+    @include breakpoint("large", min-width) {
+      position: absolute;
+      right: 0px;
+      top: -22px;
+      background-color: var(--d-content-background);
+      height: 85%;
+      font-size: var(--font-down-3);
+    }
+    height: 100%;
+    margin-left: auto;
     display: flex;
     flex-direction: row;
     gap: 4px;
@@ -203,7 +146,6 @@ body.user-messages-page .topic-list-item {
     border-radius: var(--d-border-radius);
     border: 1px solid var(--status-color);
     color: var(--status-color);
-    grid-area: status;
     width: min-content;
     @include breakpoint(mobile-extra-large) {
       height: calc(100% - 2px);
@@ -216,8 +158,6 @@ body.user-messages-page .topic-list-item {
 
   .topic-status-card.--pinned {
     --status-color: var(--primary-500);
-    background-color: transparent;
-    line-height: unset;
   }
   .topic-status-card.--hot {
     --status-color: #e45735;
@@ -225,7 +165,7 @@ body.user-messages-page .topic-list-item {
 
   // title
   td.main-link .link-top-line {
-    font-size: var(--font-0);
+    font-size: var(--font-up-1);
     grid-area: topic-title;
     font-weight: 500;
   }
@@ -245,7 +185,9 @@ body.user-messages-page .topic-list-item {
   td.main-link .link-top-line a.raw-topic-link {
     padding: 0;
   }
-
+  .link-top-line .topic-post-badges .badge-notification.unread-posts {
+    display: none;
+  }
   .topic-post-badges .badge-notification.unread-posts {
     background-color: var(--tertiary);
     color: var(--tertiary);
@@ -281,17 +223,13 @@ body.user-messages-page .topic-list-item {
 
   td.topic-category-status-data {
     display: contents;
-    @include breakpoint(mobile-extra-large) {
-      grid-area: category-status;
-      display: flex;
-      gap: 0.5em;
-      align-items: center;
-    }
   }
-  td.topic-category-status-data .badge-category__wrapper,
+  td.topic-category-data {
-  td.main-link .link-bottom-line .badge-category__wrapper {
     grid-area: category;
-    overflow: unset;
+    align-self: flex-end;
+  }
+  td.topic-category-data .badge-category__wrapper,
+  td.main-link .link-bottom-line .badge-category__wrapper {
     border-radius: var(--d-border-radius);
     padding: 6px;
     align-self: flex-end;
@@ -300,7 +238,7 @@ body.user-messages-page .topic-list-item {
       oklch(from var(--category-badge-color) 45% calc(c * 0.5) h)
     );
 
-    @include breakpoint(mobile-extra-large) {
+    @include breakpoint(tablet) {
       padding: 2px 6px;
     }
 
@@ -360,45 +298,47 @@ body.user-messages-page .topic-list-item {
   }
 }
 
+// Bookmarks
+
 .topic-list-item.bookmark-list-item {
-  @include breakpoint(mobile-extra-large) {
+  grid-template-columns: 22px min-content min-content auto min-content min-content 36px;
-    grid-template-columns: 25px auto repeat(5, 1fr) min-content;
-  }
   grid-template-areas:
-    "avatar . . . . update dropdown"
+    "avatar update metadata metadata metadata metadata dropdown"
-    ". topic-title topic-title topic-title topic-title category dropdown";
+    "topic-title topic-title topic-title topic-title topic-title category dropdown";
   @include breakpoint(mobile-extra-large) {
+    grid-template-columns: 22px min-content min-content auto min-content min-content min-content 36px;
     grid-template-areas:
-      "avatar . . . . . update dropdown"
+      "avatar update metadata metadata metadata metadata metadata dropdown"
-      ". topic-title topic-title topic-title topic-title . category dropdown";
+      "topic-title topic-title topic-title topic-title topic-title likes-replies category dropdown";
   }
   &.has-metadata {
     grid-template-areas:
-      "avatar metadata metadata metadata metadata update dropdown"
+      "avatar update metadata metadata metadata metadata dropdown"
-      ". topic-title topic-title topic-title likes-replies category dropdown";
+      "topic-title topic-title topic-title topic-title likes-replies category dropdown";
     @include breakpoint(mobile-extra-large) {
       grid-template-areas:
-        "avatar metadata metadata metadata metadata . update dropdown"
+        "avatar update metadata metadata metadata metadata metadata dropdown"
-        ". topic-title topic-title topic-title likes-replies . category dropdown";
+        "topic-title topic-title topic-title topic-title likes-replies . category dropdown";
     }
   }
   &.excerpt-expanded {
     grid-template-areas:
-      "avatar topic-title topic-title topic-title topic-title topic-title update dropdown"
+      "avatar update metadata metadata metadata metadata metadata dropdown"
-      "avatar excerpt excerpt excerpt excerpt excerpt . dropdown"
+      "topic-title topic-title topic-title topic-title topic-title topic-title . dropdown"
-      ". excerpt excerpt excerpt excerpt excerpt . dropdown"
+      "excerpt excerpt excerpt excerpt excerpt excerpt . dropdown"
-      ". excerpt excerpt excerpt excerpt excerpt category dropdown";
+      "excerpt excerpt excerpt excerpt excerpt excerpt category dropdown";
     @include breakpoint(mobile-extra-large) {
+      grid-template-columns: 22px min-content min-content auto min-content min-content min-content 36px;
       .post-excerpt {
         display: none;
       }
     }
     &.has-metadata {
       grid-template-areas:
-        "avatar metadata metadata metadata metadata metadata update dropdown"
+        "avatar update metadata metadata metadata metadata metadata dropdown"
-        "avatar topic-title topic-title topic-title topic-title topic-title topic-title dropdown"
+        "topic-title topic-title topic-title topic-title topic-title topic-title topic-title dropdown"
-        ". excerpt excerpt excerpt excerpt excerpt . dropdown"
+        "excerpt excerpt excerpt excerpt excerpt excerpt . dropdown"
-        ". excerpt excerpt excerpt excerpt excerpt category dropdown";
+        "excerpt excerpt excerpt excerpt excerpt excerpt category dropdown";
     }
   }
   td.main-link .link-bottom-line {
@@ -418,6 +358,7 @@ body.user-messages-page .topic-list-item {
   }
   .post-excerpt {
     grid-area: excerpt;
+    margin: 0;
   }
   .topic-list-data:last-of-type {
     display: contents;
@@ -435,15 +376,24 @@ body.user-messages-page .topic-list-item {
   }
 }
 
+// Assigned List
+
 .topic-list-item.assigned-list-item {
+  grid-template-columns: 22px min-content min-content auto min-content min-content 36px;
   grid-template-areas:
-    "avatar author status status . activity dropdown"
+    "activity activity activity activity activity status dropdown"
-    ". topic-title topic-title topic-title likes-replies category dropdown";
+    "topic-title topic-title topic-title topic-title likes-replies category dropdown";
+  @include breakpoint(large) {
+    grid-template-areas:
+      "activity activity activity activity activity status dropdown"
+      "topic-title topic-title topic-title topic-title topic-title topic-title dropdown"
+      "category . . . . likes-replies dropdown";
+  }
   @include breakpoint(mobile-extra-large) {
     grid-template-areas:
-      "avatar author status status . . . activity dropdown"
+      "activity activity activity activity activity activity status dropdown"
-      ". topic-title topic-title topic-title . . . . dropdown"
+      "topic-title topic-title topic-title topic-title topic-title topic-title . dropdown"
-      ". topic-title topic-title topic-title likes-replies likes-replies likes-replies category dropdown";
+      "category . . . . . likes-replies dropdown";
   }
   .assign-topic-buttons {
     display: contents;
@@ -456,3 +406,74 @@ body.user-messages-page .topic-list-item {
     display: contents;
   }
 }
+
+// User Messages
+
+body.user-messages-page .topic-list-item {
+  td.topic-category-data,
+  td.topic-likes-replies-data,
+  td.topic-status-data {
+    display: none;
+  }
+  grid-template-areas:
+    "activity activity activity activity activity activity activity"
+    "topic-title topic-title topic-title topic-title likes-replies likes-replies likes-replies";
+  &.excerpt-expanded {
+    grid-template-columns: 22px repeat(6, 1fr) auto;
+    grid-template-rows: 22px auto auto 30px;
+    grid-template-areas:
+      "activity activity activity activity activity activity activity activity"
+      "topic-title topic-title topic-title topic-title topic-title topic-title topic-title topic-title"
+      "excerpt excerpt excerpt excerpt excerpt excerpt . ."
+      "excerpt excerpt excerpt excerpt excerpt excerpt likes-replies likes-replies";
+    @include breakpoint(extra-large) {
+      grid-template-areas:
+        "avatar author status status . . . activity"
+        "avatar topic-title topic-title topic-title topic-title . . ."
+        ". excerpt excerpt excerpt excerpt excerpt . likes-replies"
+        ". excerpt excerpt excerpt excerpt excerpt . likes-replies";
+    }
+  }
+  @include breakpoint(mobile-extra-large) {
+    grid-template-columns: 25px auto repeat(6, 1fr);
+    grid-template-rows: auto auto;
+    grid-template-areas:
+      "activity activity activity activity activity activity activity activity"
+      "topic-title topic-title topic-title topic-title topic-title topic-title topic-title topic-title";
+    .topic-excerpt {
+      display: none;
+    }
+  }
+}
+
+.bulk-select-enabled .topic-list-item {
+  grid-template-areas:
+    "avatar author status status . activity"
+    ". topic-title topic-title topic-title likes-replies likes-replies category";
+  .bulk-select {
+    grid-area: bulk-select;
+    padding: 0;
+    margin: 0;
+    align-self: center;
+    justify-self: center;
+    label {
+      margin: 0;
+    }
+  }
+  @include breakpoint(large) {
+    grid-template-columns: 22px min-content min-content auto min-content min-content min-content;
+    grid-template-rows: 22px minmax(22px, auto);
+    grid-template-areas:
+      "avatar author status status  . activity"
+      ". topic-title topic-title topic-title . . likes-replies"
+      ". topic-title topic-title topic-title . . category";
+  }
+  @include breakpoint(mobile-extra-large) {
+    grid-template-columns: 25px auto repeat(6, 1fr);
+    grid-template-rows: auto auto auto;
+    grid-template-areas:
+      "avatar category-status category-status . . . . activity"
+      "topic-title topic-title topic-title topic-title topic-title topic-title topic-title topic-title"
+      "avatar author . . . . . likes-replies";
+  }
+}

spec/system/horizon_high_level_spec.rb

@@ -26,10 +26,9 @@ describe "Horizon theme | High level", type: :system do
     expect(topic_item.all("td").map { |el| el["class"] }).to eq(
       [
         "main-link clearfix topic-list-data",
-        "activity num topic-list-data age",
+        "topic-activity-data",
-        "topic-author-data",
+        "topic-status-data",
-        "topic-category-status-data",
+        "topic-category-data",
-        "topic-author-avatar-data",
         "topic-likes-replies-data",
       ],
     )