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 8227006a6fc..0390ce21ba7 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 8f2d0c5704c..822afd664c1 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 e205dc056e1..20d996d31e1 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 3ecd08e3a5c..98ee5392f32 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