From 232ed6486572ba37efd0107016604f4a3b9ad293 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=A9gis=20Hanol?= <regis@hanol.fr>
Date: Wed, 23 May 2018 23:05:34 +0200
Subject: [PATCH] UX: Add category & tags in mobile topic timeline

---
 .../discourse/widgets/topic-timeline.js.es6   | 31 +++++++++++++++++++
 app/assets/stylesheets/mobile/topic.scss      |  3 ++
 2 files changed, 34 insertions(+)

diff --git a/app/assets/javascripts/discourse/widgets/topic-timeline.js.es6 b/app/assets/javascripts/discourse/widgets/topic-timeline.js.es6
index a82525157f6..7cff52d3f80 100644
--- a/app/assets/javascripts/discourse/widgets/topic-timeline.js.es6
+++ b/app/assets/javascripts/discourse/widgets/topic-timeline.js.es6
@@ -4,6 +4,8 @@ import { h } from 'virtual-dom';
 import { relativeAge } from 'discourse/lib/formatter';
 import { iconNode } from 'discourse-common/lib/icon-library';
 import RawHtml from 'discourse/widgets/raw-html';
+import renderTags from 'discourse/lib/render-tags';
+import renderTopicFeaturedLink from 'discourse/lib/render-topic-featured-link';
 
 const SCROLLER_HEIGHT = 50;
 const LAST_READ_HEIGHT = 20;
@@ -382,6 +384,7 @@ export default createWidget('topic-timeline', {
     const createdAt = new Date(topic.created_at);
     const stream = attrs.topic.get('postStream.stream');
     const { currentUser } = this;
+    const { tagging_enabled, topic_featured_link_enabled } = this.siteSettings;
 
     attrs["currentUser"] = currentUser;
 
@@ -399,6 +402,34 @@ export default createWidget('topic-timeline', {
         action: 'jumpTop'
       }))];
 
+      // duplicate of the {{topic-category}} component
+      let category = [];
+
+      if (!topic.get("isPrivateMessage")) {
+        if (topic.category.parentCategory) {
+          category.push(this.attach("category-link", { category: topic.category.parentCategory }));
+        }
+        category.push(this.attach("category-link", { category: topic.category }));
+      }
+
+      const showTags = tagging_enabled && topic.tags && topic.tags.length > 0;
+
+      if (showTags || topic_featured_link_enabled) {
+        let extras = [];
+        if (showTags) {
+          const tagsHtml = new RawHtml({ html: renderTags(topic, { mode: "list" }) });
+          extras.push(h("div.list-tags", tagsHtml));
+        }
+        if (topic_featured_link_enabled) {
+          extras.push(new RawHtml({ html: renderTopicFeaturedLink(topic) }));
+        }
+        category.push(h("div.topic-header-extra", extras));
+      }
+
+      if (category.length > 0) {
+        elems.push(h("div.topic-category", category));
+      }
+
       if (this.state.excerpt) {
         elems.push(new RawHtml({
           html: `<div class='post-excerpt'>${this.state.excerpt}</div>`
diff --git a/app/assets/stylesheets/mobile/topic.scss b/app/assets/stylesheets/mobile/topic.scss
index df79b7f6f33..4281d322b8e 100644
--- a/app/assets/stylesheets/mobile/topic.scss
+++ b/app/assets/stylesheets/mobile/topic.scss
@@ -196,6 +196,9 @@ sup sup, sub sup, sup sub, sub sub { top: 0; }
     font-size: $font-up-1;
     padding: 5px;
   }
+  .topic-category {
+    margin-bottom: .5rem;
+  }
 }
 
 .edit-topic-timer-modal {