FEATURE: education panel on pinning at bottom of topics

app/assets/javascripts/discourse/views/buttons/clear_pin_button.js

@@ -1,29 +0,0 @@
-/**
-  A button for clearing a pinned topic
-
-  @class ClearPinButton
-  @extends Discourse.ButtonView
-  @namespace Discourse
-  @module Discourse
-**/
-Discourse.ClearPinButton = Discourse.ButtonView.extend({
-  textKey: 'topic.clear_pin.title',
-  helpKey: 'topic.clear_pin.help',
-  classNameBindings: ['unpinned'],
-
-  // Hide the button if it becomes unpinned
-  unpinned: function() {
-    // When not logged in don't show the button
-    if (!Discourse.User.current()) return 'hidden';
-    return this.get('controller.pinned') ? null : 'hidden';
-  }.property('controller.pinned'),
-
-  click: function() {
-    this.get('controller').send('clearPin');
-  },
-
-  renderIcon: function(buffer) {
-    buffer.push("<i class='fa fa-thumb-tack'></i>");
-  }
-});
-

app/assets/javascripts/discourse/views/buttons/dropdown_button_view.js

@@ -29,6 +29,8 @@ Discourse.DropdownButtonView = Discourse.View.extend({
 
   render: function(buffer) {
     var self = this;
+    var descriptionKey = self.get('descriptionKey') || 'description';
+
     buffer.push("<h4 class='title'>" + self.get('title') + "</h4>");
     buffer.push("<button class='btn standard dropdown-toggle' data-toggle='dropdown'>");
     buffer.push(self.get('text'));
@@ -40,7 +42,7 @@ Discourse.DropdownButtonView = Discourse.View.extend({
           textKey = row[1],
           iconClass = row[2],
           title = I18n.t(textKey + ".title"),
-          description = I18n.t(textKey + ".description"),
+          description = I18n.t(textKey + "." + descriptionKey),
           className = (self.get('activeItem') === id? 'disabled': '');
 
       buffer.push("<li data-id=\"" + id + "\" class=\"" + className + "\"><a href='#'>");

app/assets/javascripts/discourse/views/buttons/pinned_button.js

@@ -0,0 +1,58 @@
+/**
+  A button to display pinned options.
+
+  @class PinnedButton
+  @extends Discourse.DropdownButtonView
+  @namespace Discourse
+  @module Discourse
+**/
+Discourse.PinnedButton = Discourse.DropdownButtonView.extend({
+  descriptionKey: 'help',
+  classNames: ['pinned-options'],
+  title: '',
+  longDescription: function(){
+    var topic = this.get('topic');
+    var globally = topic.get('pinned_globally') ? '_globally' : '';
+
+    var key = 'topic_statuses.' + (topic.get('pinned') ? 'pinned' + globally : 'unpinned') + '.help';
+    return I18n.t(key);
+  }.property('topic.pinned'),
+
+  topic: Em.computed.alias('controller.model'),
+
+  hidden: function(){
+    var topic = this.get('topic');
+    return topic.get('deleted') || (!topic.get('pinned') && !topic.get('unpinned'));
+  }.property('topic.pinned', 'topic.deleted', 'topic.unpinned'),
+
+  activeItem: function(){
+    return this.get('topic.pinned') ? 'pinned' : 'unpinned';
+  }.property('topic.pinned'),
+
+  dropDownContent: function() {
+    var globally = this.get('topic.pinned_globally') ? '_globally' : '';
+    return [
+      ['pinned', 'topic_statuses.pinned' + globally, 'fa fa-thumb-tack'],
+      ['unpinned', 'topic_statuses.unpinned', 'fa fa-thumb-tack unpinned']
+    ];
+  }.property(),
+
+  text: function() {
+    var globally = this.get('topic.pinned_globally') ? '_globally' : '';
+    var state = this.get('topic.pinned') ? 'pinned' + globally : 'unpinned';
+
+    return '<span class="fa fa-thumb-tack' + (state === 'unpinned' ? ' unpinned' : "") +  '"></span> ' +
+      I18n.t('topic_statuses.' + state + '.title') + "<span class='caret'></span>";
+  }.property('topic.pinned', 'topic.unpinned'),
+
+  clicked: function(id) {
+    var topic = this.get('topic');
+    if(id==='unpinned'){
+      topic.clearPin();
+    } else {
+      topic.rePin();
+    }
+  }
+
+});
+

app/assets/javascripts/discourse/views/topic_footer_buttons_view.js

@@ -26,7 +26,6 @@ Discourse.TopicFooterButtonsView = Discourse.ContainerView.extend({
         }
         this.attachViewClass(Discourse.StarButton);
         this.attachViewClass(Discourse.ShareButton);
-        this.attachViewClass(Discourse.ClearPinButton);
         if (this.get('topic.details.can_flag_topic')) {
           this.attachViewClass(Discourse.FlagTopicButton);
         }
@@ -34,6 +33,7 @@ Discourse.TopicFooterButtonsView = Discourse.ContainerView.extend({
       if (this.get('topic.details.can_create_post')) {
         this.attachViewClass(Discourse.ReplyButton);
       }
+      this.attachViewClass(Discourse.PinnedButton);
       this.attachViewClass(Discourse.NotificationsButton);
 
       this.trigger('additionalButtons', this);

app/serializers/topic_view_serializer.rb

@@ -32,6 +32,7 @@ class TopicViewSerializer < ApplicationSerializer
              :starred,
              :posted,
              :unpinned,
+             :pinned_globally,
              :pinned,    # Is topic pinned and viewer hasn't cleared the pin?
              :pinned_at, # Ignores clear pin
              :details,
@@ -145,6 +146,10 @@ class TopicViewSerializer < ApplicationSerializer
   end
   alias_method :include_posted?, :has_topic_user?
 
+  def pinned_globally
+    object.topic.pinned_globally
+  end
+
   def pinned
     PinnedCheck.pinned?(object.topic, object.topic_user)
   end

config/locales/client.en.yml

@@ -1144,15 +1144,20 @@ en:
 
     topic_statuses:
       locked:
-        help: "this topic is closed; it no longer accepts new replies"
+        help: "This topic is closed; it no longer accepts new replies"
       unpinned:
-        help: "this topic is unpinned; it will displayed in default ordering"
+        title: "Unpinned"
+        help: "This topic is unpinned; it will displayed in default ordering"
+      pinned_globally:
+        title: "Pinned Globally"
+        help: "This topic is pinned globally; it will display at the top of all lists"
       pinned:
-        help: "this topic is pinned; it will display at the top of its category"
+        title: "Pinned"
+        help: "This topic is pinned; it will display at the top of its category"
       archived:
-        help: "this topic is archived; it is frozen and cannot be changed"
+        help: "This topic is archived; it is frozen and cannot be changed"
       invisible:
-        help: "this topic is invisible; it will not be displayed in topic lists, and can only be accessed via a direct link"
+        help: "This topic is invisible; it will not be displayed in topic lists, and can only be accessed via a direct link"
 
     posts: "Posts"
     posts_long: "there are {{number}} posts in this topic"