Make save dropdown menu opening up in the bottom

This introduces setDropdownDirectionDown() and setDropdownDirectionUp() methods
on the save component to switch between dropdown/dropup functionality. Default
is dropdown, in the bottom of the page dropup is used.

[MAILPOET-1448]

assets/css/src/newsletter_editor/components/save.styl

@@ -13,7 +13,7 @@
   right: 0
   z-index: 1000
   overflow: hidden
-  margin: 5px 0 0 0
+  margin: 5px 0
   clear: both
   vertical-align: top
   white-space: nowrap
@@ -40,16 +40,9 @@
 .mailpoet_save_show_options
   padding: 6px 3px 4px
 
-  &.mailpoet_save_show_options_active
-    .mailpoet_save_show_options_icon::before
-      content: '\f142'
-
 .mailpoet_save_show_options_icon
   vertical-align: middle
 
-  &::before
-    content: '\f140'
-
 .mailpoet_save_as_template_container,
 .mailpoet_export_template_container
   border-radius(3px)
@@ -59,7 +52,7 @@
   z-index: 1000
   clear: both
 
-  margin-top: 5px
+  margin: 5px 0
   padding: 0 10px
   background-color: $white-color
   border: 1px solid $structure-border-color
@@ -77,3 +70,35 @@
 
 .mailpoet_save_error
   color: $error-text-color
+
+.mailpoet_save_dropdown_down
+  .mailpoet_save_options,
+  .mailpoet_save_as_template_container,
+  .mailpoet_export_template_container
+    top: 100%
+    bottom: auto
+
+  .mailpoet_save_show_options
+    &.mailpoet_save_show_options_active
+      .mailpoet_save_show_options_icon::before
+        content: '\f142'
+
+  .mailpoet_save_show_options_icon
+    &::before
+      content: '\f140'
+
+.mailpoet_save_dropdown_up
+  .mailpoet_save_options,
+  .mailpoet_save_as_template_container,
+  .mailpoet_export_template_container
+    top: auto
+    bottom: 100%
+
+  .mailpoet_save_show_options
+    &.mailpoet_save_show_options_active
+      .mailpoet_save_show_options_icon::before
+        content: '\f140'
+
+  .mailpoet_save_show_options_icon
+    &::before
+      content: '\f142'

assets/js/src/newsletter_editor/components/save.js

@@ -114,6 +114,11 @@ define([
 
   Module.SaveView = Marionette.View.extend({
     getTemplate: function () { return window.templates.save; },
+    templateContext: function () {
+      return {
+        wrapperClass: this.wrapperClass
+      };
+    },
     events: {
       'click .mailpoet_save_button': 'save',
       'click .mailpoet_save_show_options': 'toggleSaveOptions',
@@ -125,10 +130,18 @@ define([
       'click .mailpoet_save_export': 'toggleExportTemplate',
       'click .mailpoet_export_template': 'exportTemplate'
     },
+
     initialize: function () {
+      this.setDropdownDirectionDown();
       App.getChannel().on('beforeEditorSave', this.beforeSave, this);
       App.getChannel().on('afterEditorSave', this.afterSave, this);
     },
+    setDropdownDirectionDown: function () {
+      this.wrapperClass = 'mailpoet_save_dropdown_down';
+    },
+    setDropdownDirectionUp: function () {
+      this.wrapperClass = 'mailpoet_save_dropdown_up';
+    },
     onRender: function () {
       this.validateNewsletter(App.toJSON());
     },
@@ -325,9 +338,10 @@ define([
 
   App.on('start', function (BeforeStartApp) {
     var topSaveView = new Module.SaveView();
-    BeforeStartApp._appView.showChildView('topRegion', topSaveView);
-
     var bottomSaveView = new Module.SaveView();
+    bottomSaveView.setDropdownDirectionUp();
+
+    BeforeStartApp._appView.showChildView('topRegion', topSaveView);
     BeforeStartApp._appView.showChildView('bottomRegion', bottomSaveView);
   });
 

views/newsletter/templates/components/save.hbs

@@ -1,4 +1,4 @@
-<div class="mailpoet_save_wrapper">
+<div class="mailpoet_save_wrapper {{ wrapperClass }}">
     <div class="mailpoet_button_group">
         <input type="button" name="save" value="<%= __('Save') %>" class="button button-primary mailpoet_save_button" /><button class="button button-primary mailpoet_save_show_options" data-automation-id="newsletter_save_options_toggle" ><span class="dashicons mailpoet_save_show_options_icon"></span></button>
     </div>