REFACTOR: Remove animation from ellpisis post menu, change ordering of

buttons.

app/assets/javascripts/discourse/templates/post.js.handlebars

@@ -74,7 +74,7 @@
             <button {{action expandFirstPost this}} class='btn expand-post'>{{i18n post.show_full}}</button>
           {{/if}}
         {{/if}}
-        {{view Discourse.PostMenuView postBinding="this" postViewBinding="view"}}
+        {{view 'post-menu' post=this postView=view}}
       </div>
       {{view Discourse.RepliesView content=replies postView=view}}
       {{discourse-action-history post=this}}

app/assets/javascripts/discourse/views/post-menu.js.es6

@@ -6,7 +6,35 @@
   @namespace Discourse
   @module Discourse
 **/
-Discourse.PostMenuView = Discourse.View.extend({
+
+/* Create and memoize our list of buttons, both open and collapsed */
+var _allButtons, _collapsedButtons;
+function postButtons(collapsed) {
+  if (!_allButtons) {
+    _allButtons = [];
+    _collapsedButtons = [];
+
+    var hidden = [];
+    if (!Em.isEmpty(Discourse.SiteSettings.post_menu_hidden_items)) {
+      hidden = Discourse.SiteSettings.post_menu_hidden_items.split('|');
+    }
+    Discourse.SiteSettings.post_menu.split("|").forEach(function(i) {
+      var buttonName = i.replace(/\+/, '').capitalize();
+      _allButtons.push(buttonName);
+      if (hidden.indexOf(i) === -1) {
+        _collapsedButtons.push(buttonName);
+      }
+    });
+
+    // Add ellipsis to collapsed
+    if (_allButtons.length !== _collapsedButtons.length) {
+      _collapsedButtons.splice(_collapsedButtons.length - 1, 0, 'ShowMoreActions');
+    }
+  }
+  return collapsed ? _collapsedButtons : _allButtons;
+}
+
+export default Discourse.View.extend({
   tagName: 'section',
   classNames: ['post-menu-area', 'clearfix'],
 
@@ -20,25 +48,28 @@ Discourse.PostMenuView = Discourse.View.extend({
     'post.shareUrl',
     'post.topic.deleted_at',
     'post.replies.length',
-    'post.wiki'),
+    'post.wiki',
+    'collapsed'),
+
+  _collapsedByDefault: function() {
+    this.set('collapsed', true);
+  }.on('init'),
 
   render: function(buffer) {
     var post = this.get('post');
 
     buffer.push("<nav class='post-controls'>");
-
     this.renderReplies(post, buffer);
     this.renderButtons(post, buffer);
-
     buffer.push("</nav>");
   },
 
   // Delegate click actions
   click: function(e) {
-    var $target = $(e.target);
-    var action = $target.data('action') || $target.parent().data('action');
-    if (!action) return;
+    var $target = $(e.target),
+        action = $target.data('action') || $target.parent().data('action');
 
+    if (!action) return;
     var handler = this["click" + action.capitalize()];
     if (!handler) return;
 
@@ -59,60 +90,15 @@ Discourse.PostMenuView = Discourse.View.extend({
   },
 
   renderButtons: function(post, buffer) {
-    var self = this,
-        buttons_buffer = [];
+    var self = this;
     buffer.push('<div class="actions">');
-    Discourse.get('postButtons').toArray().forEach(function(button) {
+    postButtons(this.get('collapsed')).forEach(function(button) {
       var renderer = "render" + button;
-      if(self[renderer]) self[renderer](post, buttons_buffer);
+      if(self[renderer]) self[renderer](post, buffer);
     });
-    if (Discourse.SiteSettings.post_menu_max_items) {
-      self.renderEllipsis(post, buttons_buffer);
-    }
-    buttons_buffer.forEach(function(item) { buffer.push(item); });
     buffer.push("</div>");
   },
 
-  renderEllipsis: function(post, buffer){
-    var replyButtonIndex = -1,
-        replyButton,
-        max = Discourse.SiteSettings.post_menu_max_items;
-
-    buffer.find(function(item, index){
-      if (item.indexOf('data-action=\"reply\"') !== -1){
-        replyButtonIndex = index;
-        max += 1;
-        return true;
-      }
-    });
-    if (buffer.length > max) {
-      if (replyButtonIndex >= (max -2)){
-        // we would hide the reply button
-        // instead pop it and move it to the end after
-        replyButton = buffer.splice(replyButtonIndex, 1)[0];
-      }
-
-      buffer.splice(max - 2, 0, '<button data-action="showMoreActions" class="ellipsis"><i class="fa fa-ellipsis-h"></i></button><div class="more-actions">');
-      buffer.push("</div>");
-
-      if (replyButton) buffer.push(replyButton);
-    }
-  },
-
-  clickShowMoreActions: function() {
-    var moreActions = this.$(".more-actions");
-
-    // show it real quick to learn about its actual dimensions before
-    // sliding it in from the right
-    moreActions.css("display", "inline-block");
-    var width = moreActions.width(),
-        height = moreActions.height();
-
-    moreActions.width(0).height(height);
-    moreActions.animate({"width": width + 3}, 1000);
-    this.$(".ellipsis").hide();
-  },
-
   clickReplies: function() {
     if (this.get('post.replies.length') > 0) {
       this.set('post.replies', []);
@@ -125,9 +111,7 @@ Discourse.PostMenuView = Discourse.View.extend({
   renderDelete: function(post, buffer) {
     var label, action, icon;
 
-
     if (post.get('post_number') === 1) {
-
       // If it's the first post, the delete/undo actions are related to the topic
       var topic = post.get('topic');
       if (topic.get('deleted_at')) {
@@ -143,7 +127,6 @@ Discourse.PostMenuView = Discourse.View.extend({
       }
 
     } else {
-
       // The delete actions target the post iteself
       if (post.get('deleted_at') || post.get('user_deleted')) {
         if (!post.get('can_recover')) { return; }
@@ -287,6 +270,16 @@ Discourse.PostMenuView = Discourse.View.extend({
 
   clickToggleWiki: function() {
     this.get('controller').send('toggleWiki', this.get('post'));
+  },
+
+  renderShowMoreActions: function(post, buffer) {
+    buffer.push("<button title=\"" +
+                I18n.t("show_more") +
+                "\" data-action=\"showMoreActions\"><i class=\"fa fa-ellipsis-h\"></i></button>");
+  },
+
+  clickShowMoreActions: function() {
+    this.set('collapsed', false);
   }
 
 });

config/locales/server.en.yml

@@ -681,8 +681,8 @@ en:
     allow_moderators_to_create_categories: "Allow moderators to create new categories"
     top_menu: "Determine which items appear in the homepage navigation, and in what order. Example latest|new|unread|starred|categories|top|read|posted"
     post_menu: "Determine which items appear on the post menu, and in what order. Example like|edit|flag|delete|share|bookmark|reply"
-    post_menu_max_items: "How many items should be shown in the post menu before wrapping the other ones behind the ellipsis. Put to 0 to disable the feature."
-    share_links: "Determine which items appear on the share dialog, and in what order. Example twitter|facebook|google+|email"
+    post_menu_hidden_items: "The menu items to hide by default in the post menu unless an ellipsis is clicked on."
+    share_links: "Determine which items appear on the share dialog, and in what order."
     track_external_right_clicks: "Track external links that are right clicked (eg: open in new tab) disabled by default because it rewrites URLs"
     topics_per_page: "How many topics loaded by default on the topics list page, and when loading more topics"
     posts_per_page: "How many posts loaded by default on a topic page, and when loading more posts"

config/site_settings.yml

@@ -74,7 +74,7 @@ basic:
   post_menu:
     client: true
     list: true
-    default: 'like|edit|flag|delete|share|bookmark|admin|reply'
+    default: 'like|share|flag|edit|bookmark|delete|admin|reply'
     choices:
      - like
      - edit
@@ -84,9 +84,19 @@ basic:
      - bookmark
      - admin
      - reply
-  post_menu_max_items:
+  post_menu_hidden_items:
     client: true
-    default: 4
+    list: true
+    default: 'edit|bookmark|delete|admin'
+    choices:
+     - like
+     - edit
+     - flag
+     - delete
+     - share
+     - bookmark
+     - admin
+     - reply
   share_links:
     client: true
     list: true