Wrap extended post actions in ellipsis.

Add a new SiteSetting to specify a maximum of items to be shown in post action menus per default. If more buttons are rendered and those after mentioned maximum will be hidden behind a collapsible ellipsis-button. Once clicked it slides in the missing buttons and hides itself.

If the setting is set to 0, the ellipsis will not be applied. It default is set to 4 though.

All buttons are created equal - but the Reply-Button is more equal than others: If it is rendered, the reply button will never be hidden behind the ellipsis. The max count is exclusiding the reply button and its position would make the reply button hide, it is removed there and pushed to the end of the list.

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

@@ -59,11 +59,58 @@ Discourse.PostMenuView = Discourse.View.extend({
   },
 
   renderButtons: function(post, buffer) {
-    var self = this;
-    Discourse.get('postButtons').toArray().reverse().forEach(function(button) {
+    var self = this,
+        buttons_buffer = [];
+    buffer.push('<div class="actions">');
+    Discourse.get('postButtons').toArray().forEach(function(button) {
       var renderer = "render" + button;
-      if(self[renderer]) self[renderer](post, buffer);
+      if(self[renderer]) self[renderer](post, buttons_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() {

app/assets/stylesheets/desktop/topic-post.scss

@@ -114,6 +114,16 @@ nav.post-controls {
     transition: all linear 0.15s;
   }
 
+  .actions {
+    text-align: right;
+    float: right;
+    display: inline-block;
+    .more-actions {
+      display: none;
+      overflow: hidden;
+    }
+  }
+
   .show-replies {
     background: scale-color-diff();
     padding: 8px 15px;
@@ -175,9 +185,6 @@ nav.post-controls {
         &.admin {
           position: relative;
         }
-        &.like, &.edit, &.flag, &.delete, &.share, &.bookmark, &.create, &.admin {
-          float: right;
-        }
 
         &.delete:hover {
           background: $danger;

config/locales/server.en.yml

@@ -678,6 +678,7 @@ 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"
     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"

config/site_settings.yml

@@ -84,6 +84,9 @@ basic:
      - bookmark
      - admin
      - reply
+  post_menu_max_items:
+    client: true
+    default: 4
   share_links:
     client: true
     list: true