FIX: Add a custom mobile view for the assigned-topics-list (#33)

follow-up
#1

FIX: Add a custom mobile view for the assigned-topics-list (#33)

diff --git a/assets/javascripts/discourse/templates/mobile/components/assigned-topic-list-item.hbs b/assets/javascripts/discourse/templates/mobile/components/assigned-topic-list-item.hbs
new file mode 100644
index 0000000..ef3fa89
--- /dev/null
+++ b/assets/javascripts/discourse/templates/mobile/components/assigned-topic-list-item.hbs
@@ -0,0 +1,43 @@
+<td>
+  <div class='main-link'>
+    {{topic-status topic=topic}}
+    {{~#if isPrivateMessage}}
+      {{~d-icon "envelope" class="private-message-icon"}}
+    {{~/if}}
+    {{~topic-link topic}}
+    {{#if topic.unseen}}
+      <span class="badge-notification new-topic"></span>
+    {{/if}}
+    {{#if topic.hasExcerpt}}
+      <div class="topic-excerpt">
+        {{{topic.excerpt}}}
+        {{#if topic.excerptTruncated}}
+          {{#unless topic.canClearPin}}<a href="{{unbound topic.url}}">{{i18n 'read_more'}}</a>{{/unless}}
+        {{/if}}
+        {{#if topic.canClearPin}}
+          <a href {{action "clearPin" topic}} title="{{i18n 'topic.clear_pin.help'}}">{{i18n 'topic.clear_pin.title'}}</a>
+        {{/if}}
+      </div>
+    {{/if}}
+  </div>
+  <div class='pull-right'>
+    {{assign-actions-dropdown topic=topic
+                              user=username
+                              unassign=unassign
+                              reassign=reassign}}
+  </div>
+  <div class='clearfix'></div>
+  <div class="topic-item-stats clearfix">
+    {{discourse-tags topic mode="list" tagsForUser=tagsForUser}}
+    <div class="pull-right">
+      {{raw "list/activity-column" topic=topic tagName="div" class="num activity last"}}
+      <a href="{{topic.lastPostUrl}}" title='{{i18n 'last_post'}}: {{{raw-date topic.bumped_at}}}'>{{topic.last_poster_username}}</a>
+    </div>
+    {{#unless hideCategory}}
+      <div class='category'>
+        {{category-link topic.category}}
+      </div>
+    {{/unless}}
+    <div class="clearfix"></div>
+  </div>
+</td>
\ No newline at end of file
diff --git a/assets/javascripts/discourse/templates/mobile/components/basic-assigned-topic-list.hbs b/assets/javascripts/discourse/templates/mobile/components/basic-assigned-topic-list.hbs
new file mode 100644
index 0000000..fa66fe0
--- /dev/null
+++ b/assets/javascripts/discourse/templates/mobile/components/basic-assigned-topic-list.hbs
@@ -0,0 +1,30 @@
+{{#conditional-loading-spinner condition=loading}}
+  {{#if hasIncoming}}
+  <div class="show-mores">
+    <div class='alert alert-info clickable' {{action showInserted}}>
+      {{count-i18n key="topic_count_" suffix="latest" count=incomingCount}}
+    </div>
+  </div>
+  {{/if}}
+
+  {{#if topics}}
+    <table class="topic-list">
+      <tbody>
+      {{#each topics as |t|}}
+        {{assigned-topic-list-item topic=t
+                      expandGloballyPinned=expandGloballyPinned
+                      expandAllPinned=expandAllPinned
+                      lastVisitedTopic=lastVisitedTopic
+                      selected=selected
+                      tagsForUser=tagsForUser
+                      unassign=unassign
+                      reassign=reassign}}
+      {{/each}}
+      </tbody>
+    </table>
+  {{else}}
+    <div class='alert alert-info'>
+      {{i18n 'choose_topic.none_found'}}
+    </div>
+  {{/if}}
+{{/conditional-loading-spinner}}
diff --git a/assets/stylesheets/assigns.scss b/assets/stylesheets/assigns.scss
index 0744ec2..39f2be1 100644
--- a/assets/stylesheets/assigns.scss
+++ b/assets/stylesheets/assigns.scss
@@ -75,6 +75,8 @@
   }
 }
 
-.private-message-icon {
-  margin-right: 5px;
+.topic-list-item {
+  .private-message-icon {
+    margin-right: 5px;
+  }
 }

GitHub sha: 2f5af6e2

#2

Minor nitpick here but this indentation looks very odd to me. I think we usually indent with 2 spaces or align it with topic=t. Not a big issue here but for future reference.

3 Likes
Approved #3
#4

@romanrizzi By the way, do we need to add a custom template here? Can’t we wrap the assignment selector in a component? Wrapping Content in a Component - Components - Ember Guides

1 Like
Follow Up #5
#7

Fixed indentation here: Fix template indentation

You mean why we have to carry two assigned-topic-list-tem templates? they are pretty different and I don’t think we can reuse them and pass the component as a parameter :thinking:

2 Likes