Merge pull request #2403 from ligthyear/ellipsis-actions

Wrap extended post actions in ellipsis.

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;
+    var self = this,
-    Discourse.get('postButtons').toArray().reverse().forEach(function(button) {
+        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