UX: replaces footer by a dropdown

UX: replaces footer by a dropdown

diff --git a/assets/javascripts/discourse/widgets/add-to-calendar-button.js.es6 b/assets/javascripts/discourse/widgets/add-to-calendar-button.js.es6
deleted file mode 100644
index 3d11872..0000000
--- a/assets/javascripts/discourse/widgets/add-to-calendar-button.js.es6
+++ /dev/null
@@ -1,18 +0,0 @@
-import hbs from "discourse/widgets/hbs-compiler";
-import { createWidget } from "discourse/widgets/widget";
-
-export default createWidget("add-to-calendar-button", {
-  tagName: "button.add-to-calendar-button.btn.btn-default.btn-small",
-
-  click(event) {
-    event.preventDefault();
-    this.sendWidgetAction("addToCalendar");
-  },
-
-  template: hbs`
-    <span class="label">
-      {{i18n "discourse_post_event.event_ui.add_to_calendar"}}
-    </span>
-    {{d-icon "external-link-alt"}}
-  `
-});
diff --git a/assets/javascripts/discourse/widgets/contact-creator-button.js.es6 b/assets/javascripts/discourse/widgets/contact-creator-button.js.es6
deleted file mode 100644
index 21eb4fb..0000000
--- a/assets/javascripts/discourse/widgets/contact-creator-button.js.es6
+++ /dev/null
@@ -1,18 +0,0 @@
-import hbs from "discourse/widgets/hbs-compiler";
-import { createWidget } from "discourse/widgets/widget";
-
-export default createWidget("contact-creator-button", {
-  tagName: "button.contact-creator-button.btn.btn-default.btn-small",
-
-  click(event) {
-    event.preventDefault();
-    this.sendWidgetAction("sendPMToCreator");
-  },
-
-  template: hbs`
-    {{d-icon "envelope"}}
-    <span class="label">
-      {{i18n "discourse_post_event.event_ui.send_pm_to_creator" username=this.attrs.username}}
-    </span>
-  `
-});
diff --git a/assets/javascripts/discourse/widgets/discourse-post-event.js.es6 b/assets/javascripts/discourse/widgets/discourse-post-event.js.es6
index a16df08..56fe402 100644
--- a/assets/javascripts/discourse/widgets/discourse-post-event.js.es6
+++ b/assets/javascripts/discourse/widgets/discourse-post-event.js.es6
@@ -147,19 +147,16 @@ export default createWidget("discourse-post-event", {
           </div>
         </div>
 
-        {{#if state.eventModel.can_act_on_discourse_post_event}}
-          <div class="actions">
-            {{attach
-              widget="button"
-              attrs=(hash
-                className="btn-small edit-post-event"
-                icon="pencil-alt"
-                action="editPostEvent"
-                actionParam=state.eventModel.id
-              )
-            }}
-          </div>
-        {{/if}}
+        {{attach
+          widget="more-dropdown"
+          attrs=(hash
+            canActOnEvent=state.eventModel.can_act_on_discourse_post_event
+            postEventId=state.eventModel.id
+            isExpired=state.eventModel.is_expired
+            creatorUsername=state.eventModel.creator.username
+            isPublicEvent=this.transformed.isPublicEvent
+          )
+        }}
       </header>
 
       {{#if state.eventModel.can_update_attendance}}
@@ -189,34 +186,6 @@ export default createWidget("discourse-post-event", {
           attrs=(hash eventModel=state.eventModel)
         }}
       {{/if}}
-
-      <footer class="event-footer">
-        {{#unless state.eventModel.is_expired}}
-          {{attach widget="add-to-calendar-button"}}
-        {{/unless}}
-
-        {{attach
-          widget="contact-creator-button"
-          attrs=(hash username=state.eventModel.creator.username)
-        }}
-
-        {{#unless state.eventModel.is_expired}}
-        {{#if state.eventModel.can_act_on_discourse_post_event}}
-        {{#if transformed.isPublicEvent}}
-          {{attach
-            widget="button"
-            attrs=(hash
-              className="btn-small"
-              icon="user-plus"
-              label="discourse_post_event.event_ui.invite"
-              action="inviteUserOrGroup"
-              actionParam=state.eventModel.id
-            )
-          }}
-        {{/if}}
-        {{/if}}
-        {{/unless}}
-      </footer>
     {{/if}}
   `,
 
diff --git a/assets/javascripts/discourse/widgets/more-dropdown.js.es6 b/assets/javascripts/discourse/widgets/more-dropdown.js.es6
new file mode 100644
index 0000000..07f51cc
--- /dev/null
+++ b/assets/javascripts/discourse/widgets/more-dropdown.js.es6
@@ -0,0 +1,72 @@
+import { createWidget } from "discourse/widgets/widget";
+import hbs from "discourse/widgets/hbs-compiler";
+
+export default createWidget("more-dropdown", {
+  tagName: "div.more-dropdown",
+
+  buildKey: () => "more-dropdown",
+
+  transform(attrs) {
+    return {
+      content: this._buildContent(attrs),
+      onChange: item => this.sendWidgetAction(item.id, item.param),
+      options: {}
+    };
+  },
+
+  template: hbs`
+    {{attach
+      widget="widget-dropdown"
+      attrs=(hash
+        id="more-dropdown"
+        translatedLabel="More"
+        icon="ellipsis-h"
+        content=this.transformed.content
+        onChange=this.transformed.onChange
+        options=this.transformed.options
+      )
+    }}
+  `,
+
+  _buildContent(attrs) {
+    const content = [];
+
+    if (!attrs.isExpired) {
+      content.push({
+        id: "addToCalendar",
+        icon: "file",
+        label: "discourse_post_event.event_ui.add_to_calendar"
+      });
+    }
+
+    content.push({
+      id: "sendPMToCreator",
+      icon: "envelope",
+      translatedLabel: I18n.t(
+        "discourse_post_event.event_ui.send_pm_to_creator",
+        { username: attrs.creatorUsername }
+      )
+    });
+
+    if (!attrs.isExpired && attrs.canActOnEvent && attrs.isPublicEvent) {
+      content.push({
+        id: "inviteUserOrGroup",
+        icon: "user-plus",
+        label: "discourse_post_event.event_ui.invite",
+        param: attrs.postEventId
+      });
+    }
+
+    if (attrs.canActOnEvent) {
+      content.push("separator");
+
+      content.push({
+        icon: "pencil-alt",
+        id: "editPostEvent",
+        label: "discourse_post_event.event_ui.edit_event",
+        param: attrs.postEventId
+      });
+    }
+    return content;
+  }
+});
diff --git a/assets/javascripts/initializers/discourse-post-event-decorator.js.es6 b/assets/javascripts/initializers/discourse-post-event-decorator.js.es6
index befc59b..87c4461 100644
--- a/assets/javascripts/initializers/discourse-post-event-decorator.js.es6
+++ b/assets/javascripts/initializers/discourse-post-event-decorator.js.es6
@@ -71,10 +71,16 @@ function _attachWidget(api, cooked, eventModel) {
   if (eventModel && eventContainer) {
     eventContainer.innerHTML = "";
 
-    let widgetHeight = 173;
+    const datesHeight = 50;
+    const headerHeight = 75;
+    const bordersHeight = 10;
+    const separatorsHeight = 4;
+    const margins = 10;
+    let widgetHeight =
+      datesHeight + headerHeight + bordersHeight + separatorsHeight + margins;
 
     if (eventModel.should_display_invitees) {
-      widgetHeight += 120;
+      widgetHeight += 110;
     }
 
     if (eventModel.can_update_attendance) {
diff --git a/assets/stylesheets/common/discourse-post-event.scss b/assets/stylesheets/common/discourse-post-event.scss
index 021d312..575a7da 100644
--- a/assets/stylesheets/common/discourse-post-event.scss
+++ b/assets/stylesheets/common/discourse-post-event.scss
@@ -5,9 +5,19 @@
     border: 5px solid $primary-low;
     display: flex;
     background: $secondary;
-    margin: 0.5em 0;
+    margin: 5px 0;
     flex-direction: column;
     flex: 1 0 auto;
+
+    .widget-dropdown {
+      margin: 0;
+
+      .widget-dropdown-item {
+        .d-icon + span {
+          margin-left: 0.5em;
+        }
+      }
+    }
   }
 
   &.is-loading {
@@ -20,29 +30,30 @@
     flex-direction: column;
   }
 
-  .event-footer {
-    padding: 0.5em;
-    background: $primary-very-low;
+  .event-header {
+    display: flex;
     align-items: center;
-    display: inline-flex;
+    padding: 0 1em;
+    height: 75px;
 
-    .btn {
-      display: flex;
-      align-items: center;
-      margin-right: 0.5em;
-    }
-  }
+    .more-dropdown {

[... diff too long, it was truncated ...]

GitHub sha: 8f7188ed