From 6d09fbde44905812f18df39c98c0083837c34924 Mon Sep 17 00:00:00 2001
From: Arpit Jalan <arpit@techapj.com>
Date: Fri, 21 Jul 2017 23:21:56 +0530
Subject: [PATCH] UX: use down chevron icon to expand "show more links.."

---
 .../javascripts/discourse/widgets/topic-map.js.es6    | 11 ++++++++---
 app/assets/stylesheets/desktop/topic-post.scss        | 10 ++++++++++
 app/assets/stylesheets/mobile/topic-post.scss         |  6 ++++++
 test/javascripts/widgets/post-test.js.es6             |  2 +-
 4 files changed, 25 insertions(+), 4 deletions(-)

diff --git a/app/assets/javascripts/discourse/widgets/topic-map.js.es6 b/app/assets/javascripts/discourse/widgets/topic-map.js.es6
index aca0c8aae2a..9e8f706d182 100644
--- a/app/assets/javascripts/discourse/widgets/topic-map.js.es6
+++ b/app/assets/javascripts/discourse/widgets/topic-map.js.es6
@@ -18,10 +18,15 @@ function renderParticipants(userFilters, participants) {
 createWidget('topic-map-show-links', {
   tagName: 'div.link-summary',
   html(attrs) {
-    return h('a', I18n.t('topic_map.links_shown', { totalLinks: attrs.totalLinks }));
+    return h('span', this.attach('button', {
+      title: 'topic_map.links_shown',
+      icon: 'chevron-down',
+      action: 'showLinks',
+      className: 'btn'
+    }));
   },
 
-  click() {
+  showLinks() {
     this.sendWidgetAction('showAllLinks');
   }
 });
@@ -179,7 +184,7 @@ createWidget('topic-map-expanded', {
       ];
 
       if (!state.allLinksShown && links.length < attrs.topicLinks.length) {
-        showAllLinksContent.push(this.attach('topic-map-show-links', { totalLinks: attrs.topicLinks.length }));
+        showAllLinksContent.push(this.attach('topic-map-show-links'));
       }
 
       const section = h('section.links', showAllLinksContent);
diff --git a/app/assets/stylesheets/desktop/topic-post.scss b/app/assets/stylesheets/desktop/topic-post.scss
index 33a9bf1c5d7..f8852cf18f0 100644
--- a/app/assets/stylesheets/desktop/topic-post.scss
+++ b/app/assets/stylesheets/desktop/topic-post.scss
@@ -419,6 +419,16 @@ a.star {
       }
     }
   }
+
+  .link-summary .btn {
+    color: dark-light-choose(scale-color($primary, $lightness: 60%), scale-color($secondary, $lightness: 40%));
+    background: blend-primary-secondary(5%);
+    width: 100%;
+    &:hover {
+      color: $primary;
+      background: dark-light-diff($primary, $secondary, 90%, -80%);
+    }
+  }
 }
 
 #topic-footer-buttons {
diff --git a/app/assets/stylesheets/mobile/topic-post.scss b/app/assets/stylesheets/mobile/topic-post.scss
index 453f863efd8..86be38f2fd6 100644
--- a/app/assets/stylesheets/mobile/topic-post.scss
+++ b/app/assets/stylesheets/mobile/topic-post.scss
@@ -309,6 +309,12 @@ a.star {
       }
     }
   }
+
+  .link-summary .btn {
+    color: dark-light-choose(scale-color($primary, $lightness: 60%), scale-color($secondary, $lightness: 40%));
+    background: blend-primary-secondary(5%);
+    width: 100%;
+  }
 }
 
 #topic-footer-buttons {
diff --git a/test/javascripts/widgets/post-test.js.es6 b/test/javascripts/widgets/post-test.js.es6
index 243290deece..c7702f68c9d 100644
--- a/test/javascripts/widgets/post-test.js.es6
+++ b/test/javascripts/widgets/post-test.js.es6
@@ -765,7 +765,7 @@ widgetTest("topic map - links", {
       assert.equal(this.$('.topic-map-expanded .topic-link').length, 5, 'it limits the links displayed');
     });
 
-    click('.link-summary a');
+    click('.link-summary button');
     andThen(() => {
       assert.equal(this.$('.topic-map-expanded .topic-link').length, 6, 'all links now shown');
     });