Merge pull request #1443 from mailpoet/duplicate-editor-save-button

Duplicate editor save button [MAILPOET-1448]

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

@@ -12,9 +12,11 @@
   font-size: 23px
 
 .mailpoet_breadcrumbs
-  float: right
-  clear: both
+  float: left
   margin-bottom: 13px
-  margin-right: 17px
+  margin-left: 17px
   font-size: 0.9em
   text-transform: uppercase
+
+  p
+    margin: 0

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

@@ -1,15 +1,23 @@
 #mailpoet_editor_bottom
-  margin-top: 39px
-  margin-left: 29px
+  margin: 10px 0 70px
+
+.mailpoet_save_wrapper
+  float: right
+  position: relative
+  margin-right: 20px
+  margin-bottom: 10px
 
 .mailpoet_save_options
   border-radius(3px)
 
-  float: left
+  position: absolute
+  right: 0
+  z-index: 1000
   overflow: hidden
-  margin: 5px 0 0 0
+  margin: 5px 0
   clear: both
   vertical-align: top
+  white-space: nowrap
 
   background: $white-color
   border: 1px solid $content-border-color
@@ -33,23 +41,19 @@
 .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)
   display: inline-block
+  position: absolute
+  right: 0
+  z-index: 1000
   clear: both
 
-  margin-top: 5px
+  margin: 5px 0
   padding: 0 10px
   background-color: $white-color
   border: 1px solid $structure-border-color
@@ -61,7 +65,41 @@
 .mailpoet_editor_last_saved
   color: $primary-inactive-color
   font-size: 0.9em
-  display: inline
+  position: absolute
+  right: 0
+  margin-top: 10px
 
 .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/css/src/newsletter_editor/layout.styl

@@ -8,6 +8,8 @@ $content-border-color = $structure-border-color
 #mailpoet_editor_heading
   padding-left: 15px
   margin-left: 2px
+  margin-bottom: 13px
+  clear: both
 
 #mailpoet_editor_main_wrapper
   border: 1px solid $content-border-color

assets/css/src/newsletter_editor/libraryOverrides.styl

@@ -131,6 +131,7 @@ body
 .notice
 .update-nag
   margin-left: 2px + 15px !important
+  margin-right: 20px !important
 
 /* Make a button group */
 .mailpoet_button_group

assets/css/src/notice.styl

@@ -1,9 +1,3 @@
 .mailpoet_notice
   position: relative
-
-.mailpoet_notice_close
-  position: absolute
-  right: 0.5em
-  top: 0.5em
-  color: #999
-  text-decoration: none !important
+  clear: both

assets/js/src/newsletter_editor/App.js

@@ -12,7 +12,8 @@ define([
       contentRegion: '#mailpoet_editor_content',
       sidebarRegion: '#mailpoet_editor_sidebar',
       bottomRegion: '#mailpoet_editor_bottom',
-      headingRegion: '#mailpoet_editor_heading'
+      headingRegion: '#mailpoet_editor_heading',
+      topRegion: '#mailpoet_editor_top'
     }
   });
 

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

@@ -34,6 +34,7 @@ define([
   // Save editor contents to server
   Module.save = function () {
     var json = App.toJSON();
+    var editorTop = $('#mailpoet_editor_top');
 
     // Stringify to enable transmission of primitive non-string value types
     if (!_.isUndefined(json.body)) {
@@ -52,12 +53,19 @@ define([
           MailPoet.Notice.error(
             MailPoet.I18n.t('templateSaveFailed'),
             {
+              positionAfter: editorTop,
               scroll: true
             }
           );
         } else {
           $(response.error).each(function (i, error) {
-            MailPoet.Notice.error(error, { scroll: true });
+            MailPoet.Notice.error(
+              error,
+              {
+                positionAfter: editorTop,
+                scroll: true
+              }
+            );
           });
         }
       }
@@ -114,26 +122,39 @@ 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',
       'click .mailpoet_save_next': 'next',
       /* Save as template */
-      'click .mailpoet_save_template': 'toggleSaveAsTemplate',
+      'click .mailpoet_save_template': 'showSaveAsTemplate',
       'click .mailpoet_save_as_template': 'saveAsTemplate',
       /* Export template */
-      'click .mailpoet_save_export': 'toggleExportTemplate',
+      'click .mailpoet_save_export': 'showExportTemplate',
       '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());
     },
     save: function () {
-      this.hideOptionContents();
+      this.hideSaveOptions();
       App.getChannel().request('save');
     },
     beforeSave: function () {
@@ -146,30 +167,40 @@ define([
       this.$('.mailpoet_editor_last_saved').removeClass('mailpoet_hidden');
       this.$('.mailpoet_autosaved_at').text('');
     },
-    toggleSaveOptions: function () {
-      this.$('.mailpoet_save_options').toggleClass('mailpoet_hidden');
-      this.$('.mailpoet_save_show_options').toggleClass('mailpoet_save_show_options_active');
+    showSaveOptions: function () {
+      this.$('.mailpoet_save_show_options').addClass('mailpoet_save_show_options_active');
+      this.$('.mailpoet_save_options').removeClass('mailpoet_hidden');
+      this.hideSaveAsTemplate();
+      this.hideExportTemplate();
     },
-    toggleSaveAsTemplate: function () {
-      this.$('.mailpoet_save_as_template_container').toggleClass('mailpoet_hidden');
-      this.toggleSaveOptions();
+    hideSaveOptions: function () {
+      this.$('.mailpoet_save_show_options').removeClass('mailpoet_save_show_options_active');
+      this.$('.mailpoet_save_options').addClass('mailpoet_hidden');
+      this.hideSaveAsTemplate();
+      this.hideExportTemplate();
+    },
+    toggleSaveOptions: function () {
+      if (this.$('.mailpoet_save_show_options').hasClass('mailpoet_save_show_options_active')) {
+        this.hideSaveOptions();
+      } else {
+        this.showSaveOptions();
+      }
     },
     showSaveAsTemplate: function () {
       this.$('.mailpoet_save_as_template_container').removeClass('mailpoet_hidden');
-      this.toggleSaveOptions();
     },
     hideSaveAsTemplate: function () {
       this.$('.mailpoet_save_as_template_container').addClass('mailpoet_hidden');
     },
     saveAsTemplate: function () {
       var templateName = this.$('.mailpoet_save_as_template_name').val();
-      var that = this;
+      var editorTop = $('#mailpoet_editor_top');
 
       if (templateName === '') {
         MailPoet.Notice.error(
           MailPoet.I18n.t('templateNameMissing'),
           {
-            positionAfter: that.$el,
+            positionAfter: editorTop,
             scroll: true
           }
         );
@@ -180,7 +211,7 @@ define([
           MailPoet.Notice.success(
             MailPoet.I18n.t('templateSaved'),
             {
-              positionAfter: that.$el,
+              positionAfter: editorTop,
               scroll: true
             }
           );
@@ -191,30 +222,29 @@ define([
           MailPoet.Notice.error(
             MailPoet.I18n.t('templateSaveFailed'),
             {
-              positionAfter: that.$el,
+              positionAfter: editorTop,
               scroll: true
             }
           );
         });
-        this.hideOptionContents();
+        this.hideSaveOptions();
       }
     },
-    toggleExportTemplate: function () {
-      this.$('.mailpoet_export_template_container').toggleClass('mailpoet_hidden');
-      this.toggleSaveOptions();
+    showExportTemplate: function () {
+      this.$('.mailpoet_export_template_container').removeClass('mailpoet_hidden');
     },
     hideExportTemplate: function () {
       this.$('.mailpoet_export_template_container').addClass('mailpoet_hidden');
     },
     exportTemplate: function () {
       var templateName = this.$('.mailpoet_export_template_name').val();
-      var that = this;
+      var editorTop = $('#mailpoet_editor_top');
 
       if (templateName === '') {
         MailPoet.Notice.error(
           MailPoet.I18n.t('templateNameMissing'),
           {
-            positionAfter: that.$el,
+            positionAfter: editorTop,
             scroll: true
           }
         );
@@ -225,13 +255,8 @@ define([
         this.hideExportTemplate();
       }
     },
-    hideOptionContents: function () {
-      this.hideSaveAsTemplate();
-      this.hideExportTemplate();
-      this.$('.mailpoet_save_options').addClass('mailpoet_hidden');
-    },
     next: function () {
-      this.hideOptionContents();
+      this.hideSaveOptions();
       if (!this.$('.mailpoet_save_next').hasClass('button-disabled')) {
         Module._cancelAutosave();
         Module.save().done(function () {
@@ -324,8 +349,12 @@ define([
   });
 
   App.on('start', function (BeforeStartApp) {
-    var saveView = new Module.SaveView();
-    BeforeStartApp._appView.showChildView('bottomRegion', saveView);
+    var topSaveView = new Module.SaveView();
+    var bottomSaveView = new Module.SaveView();
+    bottomSaveView.setDropdownDirectionUp();
+
+    BeforeStartApp._appView.showChildView('topRegion', topSaveView);
+    BeforeStartApp._appView.showChildView('bottomRegion', bottomSaveView);
   });
 
   return Module;

assets/js/src/notice.js

@@ -166,10 +166,14 @@ define('notice', ['mailpoet', 'jquery'], function (mp, jQuery) { // eslint-disab
 
       // if the notice is not static, it has to disappear after a timeout
       if (this.options.static === false) {
-        this.element.delay(this.options.timeout).trigger('close');
-      } else if (this.options.hideClose === false) {
-        this.element.append('<a href="javascript:;" class="mailpoet_notice_close"><span class="dashicons dashicons-dismiss"></span></a>');
-        this.element.find('.mailpoet_notice_close').on('click', function () { // eslint-disable-line func-names
+        setTimeout(function (target) { // eslint-disable-line func-names
+          target.trigger('close');
+        }, this.options.timeout, this.element);
+      }
+
+      if (this.options.hideClose === false) {
+        this.element.append('<button type="button" class="notice-dismiss"><span class="screen-reader-text">Dismiss this notice.</span></button>');
+        this.element.find('.notice-dismiss').on('click', function () { // eslint-disable-line func-names
           jQuery(this).trigger('close');
         });
       }

views/newsletter/editor.html

@@ -239,8 +239,9 @@
 <!-- Hidden heading for notices to appear under -->
 <h1 style="display:none"><%= __('Newsletter Editor') %></h1>
 <div id="mailpoet_editor">
-  <div id="mailpoet_editor_heading"></div>
   <div id="mailpoet_editor_breadcrumb" class="mailpoet_breadcrumbs"></div>
+  <div id="mailpoet_editor_top"></div>
+  <div id="mailpoet_editor_heading"></div>
   <div class="clearfix"></div>
   <div id="mailpoet_editor_main_wrapper">
     <div id="mailpoet_editor_styles"></div>

views/newsletter/templates/components/save.hbs

@@ -1,11 +1,10 @@
-<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>
     <input type="button" name="next" value="<%= __('Next') %>" class="button button-primary mailpoet_save_next" />
     <span class="mailpoet_save_error"></span>
     <div class="mailpoet_editor_last_saved mailpoet_hidden"><%= __('Autosaved') %> <span class="mailpoet_autosaved_at"></span></div>
-    <br />
     <ul class="mailpoet_save_options mailpoet_hidden">
         <li class="mailpoet_save_option"><a href="javascript:;" class="mailpoet_save_template" data-automation-id="newsletter_save_as_template_option"><%= __('Save as template') %></a></li>
         <li class="mailpoet_save_option"><a href="javascript:;" class="mailpoet_save_export"><%= __('Export as template') %></a></li>