From 8167207e3858811323b3b3b16f0521cd1f8d59b3 Mon Sep 17 00:00:00 2001
From: Benjamin Kampmann <ben.kampmann@gmail.com>
Date: Sat, 31 May 2014 17:18:53 +0200
Subject: [PATCH] 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.
---
 .../discourse/views/post_menu_view.js         | 53 +++++++++++++++++--
 .../stylesheets/desktop/topic-post.scss       | 13 +++--
 config/locales/server.en.yml                  |  1 +
 config/site_settings.yml                      |  3 ++
 4 files changed, 64 insertions(+), 6 deletions(-)

diff --git a/app/assets/javascripts/discourse/views/post_menu_view.js b/app/assets/javascripts/discourse/views/post_menu_view.js
index 8227006a6..0390ce21b 100644
--- a/app/assets/javascripts/discourse/views/post_menu_view.js
+++ b/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() {
diff --git a/app/assets/stylesheets/desktop/topic-post.scss b/app/assets/stylesheets/desktop/topic-post.scss
index 8f2d0c570..822afd664 100644
--- a/app/assets/stylesheets/desktop/topic-post.scss
+++ b/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;
diff --git a/config/locales/server.en.yml b/config/locales/server.en.yml
index e205dc056..20d996d31 100644
--- a/config/locales/server.en.yml
+++ b/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"
diff --git a/config/site_settings.yml b/config/site_settings.yml
index 3ecd08e3a..98ee5392f 100644
--- a/config/site_settings.yml
+++ b/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