From dcbd9635f49d4e8825fd566dae134cd3a9fc3f39 Mon Sep 17 00:00:00 2001
From: Arpit Jalan <arpit@techapj.com>
Date: Tue, 20 Mar 2018 22:44:05 +0530
Subject: [PATCH] UX: indicate active tag sorting method

---
 .../discourse/controllers/tags-index.js.es6        | 14 ++++++++++++--
 .../controllers/user-private-messages-tags.js.es6  | 14 ++++++++++++--
 .../javascripts/discourse/templates/tags/index.hbs |  4 ++--
 .../templates/user-private-messages-tags.hbs       |  4 ++--
 app/assets/stylesheets/common/base/tagging.scss    |  3 +++
 5 files changed, 31 insertions(+), 8 deletions(-)

diff --git a/app/assets/javascripts/discourse/controllers/tags-index.js.es6 b/app/assets/javascripts/discourse/controllers/tags-index.js.es6
index 545bf7b21ec..cce4fa05b10 100644
--- a/app/assets/javascripts/discourse/controllers/tags-index.js.es6
+++ b/app/assets/javascripts/discourse/controllers/tags-index.js.es6
@@ -2,6 +2,8 @@ import computed from 'ember-addons/ember-computed-decorators';
 
 export default Ember.Controller.extend({
   sortProperties: ['count:desc', 'id'],
+  sortedByCount: true,
+  sortedByName: false,
 
   canAdminTags: Ember.computed.alias("currentUser.staff"),
   groupedByCategory: Ember.computed.notEmpty('model.extras.categories'),
@@ -18,11 +20,19 @@ export default Ember.Controller.extend({
 
   actions: {
     sortByCount() {
-      this.set('sortProperties', ['count:desc', 'id']);
+      this.setProperties({
+        sortProperties: ['count:desc', 'id'],
+        sortedByCount: true,
+        sortedByName: false
+      });
     },
 
     sortById() {
-      this.set('sortProperties', ['id']);
+      this.setProperties({
+        sortProperties: ['id'],
+        sortedByCount: false,
+        sortedByName: true
+      });
     }
   }
 });
diff --git a/app/assets/javascripts/discourse/controllers/user-private-messages-tags.js.es6 b/app/assets/javascripts/discourse/controllers/user-private-messages-tags.js.es6
index 6fc3485357c..9d2cd890ed4 100644
--- a/app/assets/javascripts/discourse/controllers/user-private-messages-tags.js.es6
+++ b/app/assets/javascripts/discourse/controllers/user-private-messages-tags.js.es6
@@ -1,14 +1,24 @@
 export default Ember.Controller.extend({
   sortProperties: ['count:desc', 'id'],
   tagsForUser: null,
+  sortedByCount: true,
+  sortedByName: false,
 
   actions: {
     sortByCount() {
-      this.set('sortProperties', ['count:desc', 'id']);
+      this.setProperties({
+        sortProperties: ['count:desc', 'id'],
+        sortedByCount: true,
+        sortedByName: false
+      });
     },
 
     sortById() {
-      this.set('sortProperties', ['id']);
+      this.setProperties({
+        sortProperties: ['id'],
+        sortedByCount: false,
+        sortedByName: true
+      });
     }
   }
 });
diff --git a/app/assets/javascripts/discourse/templates/tags/index.hbs b/app/assets/javascripts/discourse/templates/tags/index.hbs
index 1cbccceaaba..4f40428f9fb 100644
--- a/app/assets/javascripts/discourse/templates/tags/index.hbs
+++ b/app/assets/javascripts/discourse/templates/tags/index.hbs
@@ -13,8 +13,8 @@
 
 <div class='tag-sort-options'>
   {{i18n "tagging.sort_by"}}
-  <a {{action "sortByCount"}}>{{i18n "tagging.sort_by_count"}}</a>
-  <a {{action "sortById"}}>{{i18n "tagging.sort_by_name"}}</a>
+  <span class="tag-sort-count {{if sortedByCount 'active'}}"><a {{action "sortByCount"}}>{{i18n "tagging.sort_by_count"}}</a></span>
+  <span class="tag-sort-name {{if sortedByName 'active'}}"><a {{action "sortById"}}>{{i18n "tagging.sort_by_name"}}</a></span>
 </div>
 
 <hr/>
diff --git a/app/assets/javascripts/discourse/templates/user-private-messages-tags.hbs b/app/assets/javascripts/discourse/templates/user-private-messages-tags.hbs
index 2310f0be8df..89a47eb4dde 100644
--- a/app/assets/javascripts/discourse/templates/user-private-messages-tags.hbs
+++ b/app/assets/javascripts/discourse/templates/user-private-messages-tags.hbs
@@ -6,8 +6,8 @@
 
 <div class='tag-sort-options'>
   {{i18n "tagging.sort_by"}}
-  <a {{action "sortByCount"}}>{{i18n "tagging.sort_by_count"}}</a>
-  <a {{action "sortById"}}>{{i18n "tagging.sort_by_name"}}</a>
+  <span class="tag-sort-count {{if sortedByCount 'active'}}"><a {{action "sortByCount"}}>{{i18n "tagging.sort_by_count"}}</a></span>
+  <span class="tag-sort-name {{if sortedByName 'active'}}"><a {{action "sortById"}}>{{i18n "tagging.sort_by_name"}}</a></span>
 </div>
 
 <hr/>
diff --git a/app/assets/stylesheets/common/base/tagging.scss b/app/assets/stylesheets/common/base/tagging.scss
index eb93138ccf7..86a9354f652 100644
--- a/app/assets/stylesheets/common/base/tagging.scss
+++ b/app/assets/stylesheets/common/base/tagging.scss
@@ -206,6 +206,9 @@ header .discourse-tag {color: $tag-color }
   a {
     text-decoration: underline;
   }
+  span.active a {
+    font-weight: bold;
+  }
 }
 
 .autocomplete {