diff --git a/assets/css/src/newsletter_editor/components/save.styl b/assets/css/src/newsletter_editor/components/save.styl index 145e262383..0bc555a3a5 100644 --- a/assets/css/src/newsletter_editor/components/save.styl +++ b/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' diff --git a/assets/js/src/newsletter_editor/components/save.js b/assets/js/src/newsletter_editor/components/save.js index 18542e829b..057a02b33e 100644 --- a/assets/js/src/newsletter_editor/components/save.js +++ b/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); }); diff --git a/views/newsletter/templates/components/save.hbs b/views/newsletter/templates/components/save.hbs index 32c8c83726..7d6940c0e9 100644 --- a/views/newsletter/templates/components/save.hbs +++ b/views/newsletter/templates/components/save.hbs @@ -1,4 +1,4 @@ -