- Add highlighting of blocks that are being edited;

- Refactor block settings views; - Change Posts widget to display 8 posts in settings; - Move ALC/Posts category selector label to Select2 placeholder.
2016-06-06 18:53:13 +03:00
parent 33bdde1156
commit 3edfd32879
19 changed files with 68 additions and 66 deletions
--- a/assets/css/src/newsletter_editor/contentBlocks/base.styl
+++ b/assets/css/src/newsletter_editor/contentBlocks/base.styl
@@ -23,6 +23,7 @@ $block-text-line-height = $text-line-height
    border: 1px solid $transparent-color

  &:hover > .mailpoet_block_highlight
+  &.mailpoet_highlight > .mailpoet_block_highlight
    border: 1px dashed $block-hover-highlight-color


--- a/assets/css/src/newsletter_editor/contentBlocks/container.styl
+++ b/assets/css/src/newsletter_editor/contentBlocks/container.styl
@@ -17,7 +17,7 @@ $three-column-width = ($newsletter-width / 3) - (2 * $column-margin)
  padding-left: 0
  padding-right: 0

-  &:hover
+  &:hover > .mailpoet_block_highlight
    border: 0

 .mailpoet_container_vertical > *
--- a/assets/js/src/newsletter_editor/behaviors/HighlightEditingBehavior.js
+++ b/assets/js/src/newsletter_editor/behaviors/HighlightEditingBehavior.js
@@ -0,0 +1,23 @@
+/**
+ * Highlight Editing Behavior
+ *
+ * Highlights a block that is being edited
+ */
+define([
+    'backbone.marionette',
+    'newsletter_editor/behaviors/BehaviorsLookup',
+  ], function(Marionette, BehaviorsLookup) {
+
+  BehaviorsLookup.HighlightEditingBehavior = Marionette.Behavior.extend({
+    modelEvents: {
+      'startEditing': 'enableHighlight',
+      'stopEditing': 'disableHighlight',
+    },
+    enableHighlight: function() {
+      this.$el.addClass('mailpoet_highlight');
+    },
+    disableHighlight: function() {
+      this.$el.removeClass('mailpoet_highlight');
+    },
+  });
+});
--- a/assets/js/src/newsletter_editor/blocks/automatedLatestContent.js
+++ b/assets/js/src/newsletter_editor/blocks/automatedLatestContent.js
@@ -194,9 +194,6 @@ define([
        "click .mailpoet_done_editing": "close",
      };
    },
-    behaviors: {
-      ColorPickerBehavior: {},
-    },
    templateHelpers: function() {
      return {
        model: this.model.toJSON(),
@@ -211,6 +208,7 @@ define([
      this.$('.mailpoet_automated_latest_content_categories_and_tags').select2({
        multiple: true,
        allowClear: true,
+        placeholder: MailPoet.I18n.t('categoriesAndTags'),
        ajax: {
          data: function (params) {
            return {
--- a/assets/js/src/newsletter_editor/blocks/base.js
+++ b/assets/js/src/newsletter_editor/blocks/base.js
@@ -80,6 +80,7 @@ define([
          }
        },
      },
+      HighlightEditingBehavior: {},
    },
    templateHelpers: function() {
      return {
@@ -218,8 +219,12 @@ define([

  Module.BlockSettingsView = Marionette.LayoutView.extend({
    className: 'mailpoet_editor_settings',
-    initialize: function() {
-      MailPoet.Modal.panel({
+    behaviors: {
+      ColorPickerBehavior: {},
+    },
+    initialize: function(params) {
+      this.model.trigger('startEditing');
+      var panelParams = {
        element: this.$el,
        template: '',
        position: 'right',
@@ -227,7 +232,13 @@ define([
        onCancel: function() {
          this.destroy();
        }.bind(this),
-      });
+      };
+      this.renderOptions = params.renderOptions || {};
+      if (this.renderOptions.displayFormat === 'subpanel') {
+        MailPoet.Modal.subpanel(panelParams);
+      } else {
+        MailPoet.Modal.panel(panelParams);
+      }
    },
    close: function(event) {
      this.destroy();
@@ -256,6 +267,7 @@ define([
    },
    onBeforeDestroy: function() {
      MailPoet.Modal.close();
+      this.model.trigger('stopEditing');
    },
  });

--- a/assets/js/src/newsletter_editor/blocks/button.js
+++ b/assets/js/src/newsletter_editor/blocks/button.js
@@ -99,23 +99,6 @@ define([
        "click .mailpoet_done_editing": "close",
      };
    },
-    behaviors: {
-      ColorPickerBehavior: {},
-    },
-    initialize: function(params) {
-      var panelParams = {
-        element: this.$el,
-        template: '',
-        position: 'right',
-        width: App.getConfig().get('sidepanelWidth'),
-      };
-      this.renderOptions = params.renderOptions || {};
-      if (this.renderOptions.displayFormat === 'subpanel') {
-        MailPoet.Modal.subpanel(panelParams);
-      } else {
-        MailPoet.Modal.panel(panelParams);
-      }
-    },
    templateHelpers: function() {
      return {
        model: this.model.toJSON(),
--- a/assets/js/src/newsletter_editor/blocks/container.js
+++ b/assets/js/src/newsletter_editor/blocks/container.js
@@ -125,6 +125,7 @@ define([
          return view.renderOptions.depth === 1;
        },
      },
+      HighlightEditingBehavior: {}
    },
    onDragSubstituteBy: function() {
      // For two and three column layouts display their respective widgets,
@@ -309,9 +310,6 @@ define([
        "click .mailpoet_done_editing": "close",
      };
    },
-    behaviors: {
-      ColorPickerBehavior: {},
-    },
    regions: {
      columnsSettingsRegion: '.mailpoet_container_columns_settings',
    },
--- a/assets/js/src/newsletter_editor/blocks/divider.js
+++ b/assets/js/src/newsletter_editor/blocks/divider.js
@@ -102,23 +102,6 @@ define([
        'change:styles.block.borderColor': 'repaintDividerStyleOptions',
      };
    },
-    behaviors: {
-      ColorPickerBehavior: {},
-    },
-    initialize: function(params) {
-      var panelParams = {
-        element: this.$el,
-        template: '',
-        position: 'right',
-        width: App.getConfig().get('sidepanelWidth'),
-      };
-      this.renderOptions = params.renderOptions || {};
-      if (this.renderOptions.displayFormat === 'subpanel') {
-        MailPoet.Modal.subpanel(panelParams);
-      } else {
-        MailPoet.Modal.panel(panelParams);
-      }
-    },
    templateHelpers: function() {
      return {
        model: this.model.toJSON(),
--- a/assets/js/src/newsletter_editor/blocks/footer.js
+++ b/assets/js/src/newsletter_editor/blocks/footer.js
@@ -106,9 +106,6 @@ define([
        "click .mailpoet_done_editing": "close",
      };
    },
-    behaviors: {
-      ColorPickerBehavior: {},
-    },
    templateHelpers: function() {
      return {
        model: this.model.toJSON(),
--- a/assets/js/src/newsletter_editor/blocks/header.js
+++ b/assets/js/src/newsletter_editor/blocks/header.js
@@ -106,9 +106,6 @@ define([
        "click .mailpoet_done_editing": "close",
      };
    },
-    behaviors: {
-      ColorPickerBehavior: {},
-    },
    templateHelpers: function() {
      return {
        model: this.model.toJSON(),
--- a/assets/js/src/newsletter_editor/blocks/posts.js
+++ b/assets/js/src/newsletter_editor/blocks/posts.js
@@ -23,7 +23,19 @@ define([
    'newsletter_editor/blocks/button',
    'newsletter_editor/blocks/divider',
    'select2'
-  ], function(Backbone, Marionette, Radio, _, jQuery, MailPoet, App, CommunicationComponent, BaseBlock, ButtonBlock, DividerBlock) {
+  ], function(
+    Backbone,
+    Marionette,
+    Radio,
+    _,
+    jQuery,
+    MailPoet,
+    App,
+    CommunicationComponent,
+    BaseBlock,
+    ButtonBlock,
+    DividerBlock
+  ) {

  "use strict";

@@ -195,6 +207,7 @@ define([
      };
    },
    initialize: function() {
+      this.model.trigger('startEditing');
      this.selectionView = new PostSelectionSettingsView({ model: this.model });
      this.displayOptionsView = new PostsDisplayOptionsSettingsView({ model: this.model });
    },
@@ -209,8 +222,6 @@ define([
        element: this.$el,
        template: '',
        position: 'right',
-        overlay: true,
-        highlight: blockView.$el,
        width: App.getConfig().get('sidepanelWidth'),
        onCancel: function() {
          // Self destroy the block if the user closes settings modal
@@ -274,6 +285,7 @@ define([
      this.$('.mailpoet_posts_categories_and_tags').select2({
        multiple: true,
        allowClear: true,
+        placeholder: MailPoet.I18n.t('categoriesAndTags'),
        ajax: {
          data: function (params) {
            return {
@@ -405,9 +417,6 @@ define([
        "change .mailpoet_posts_sort_by": _.partial(this.changeField, "sortBy"),
      };
    },
-    behaviors: {
-      ColorPickerBehavior: {},
-    },
    templateHelpers: function() {
      return {
        model: this.model.toJSON(),
--- a/assets/js/src/newsletter_editor/blocks/social.js
+++ b/assets/js/src/newsletter_editor/blocks/social.js
@@ -139,6 +139,7 @@ define([
          }
        },
      },
+      HighlightEditingBehavior: {},
    },
    onDragSubstituteBy: function() { return Module.SocialWidgetView; },
    constructor: function() {
--- a/assets/js/src/newsletter_editor/blocks/spacer.js
+++ b/assets/js/src/newsletter_editor/blocks/spacer.js
@@ -70,9 +70,6 @@ define([
        "click .mailpoet_done_editing": "close",
      };
    },
-    behaviors: {
-      ColorPickerBehavior: {},
-    },
  });

  Module.SpacerWidgetView = base.WidgetView.extend({
--- a/package.json
+++ b/package.json
@@ -9,7 +9,7 @@
  },
  "dependencies": {
    "backbone": "1.3.3",
-    "backbone.marionette": "2.4.6",
+    "backbone.marionette": "2.4.7",
    "backbone.radio": "1.0.5",
    "backbone.supermodel": "1.2.0",
    "c3": "~0.4.10",
--- a/views/newsletter/editor.html
+++ b/views/newsletter/editor.html
@@ -327,6 +327,7 @@
    'templateDescriptionMissing': __('Please add a template description'),
    'templateSaved': __('Template has been saved.'),
    'templateSaveFailed': __('Template has not been saved, please try again.'),
+    'categoriesAndTags': __('Categories & tags'),
  }) %>
 <% endblock %>

@@ -1058,7 +1059,7 @@
          },
        },
        posts: {
-          amount: '10',
+          amount: '8',
          contentType: 'post', // 'post'|'page'|'mailpoet_page'
          postStatus: 'publish', // 'draft'|'pending'|'private'|'publish'|'future'
          inclusionType: 'include', // 'include'|'exclude'
--- a/views/newsletter/templates/blocks/automatedLatestContent/settings.hbs
+++ b/views/newsletter/templates/blocks/automatedLatestContent/settings.hbs
@@ -13,7 +13,6 @@
 </div>

 <div class="mailpoet_form_field">
-    <div class="mailpoet_form_field_title"><%= __('Categories & tags:') %></div>
    <div class="mailpoet_form_field_select_option">
        <select class="mailpoet_select mailpoet_automated_latest_content_categories_and_tags" multiple="multiple">
          {{#each terms}}
--- a/views/newsletter/templates/blocks/container/block.hbs
+++ b/views/newsletter/templates/blocks/container/block.hbs
@@ -5,4 +5,4 @@
 </style>
 {{/ifCond}}
 <div class="mailpoet_container {{#ifCond model.orientation '===' 'horizontal'}}mailpoet_container_horizontal{{/ifCond}}{{#ifCond model.orientation '===' 'vertical'}}mailpoet_container_vertical{{/ifCond}}"></div>
-<div class="mailpoet_tools"></div>
+<div class="mailpoet_tools"></div><div class="mailpoet_block_highlight">
--- a/views/newsletter/templates/blocks/posts/settingsSelection.hbs
+++ b/views/newsletter/templates/blocks/posts/settingsSelection.hbs
@@ -13,9 +13,6 @@
            <option value="pending"><%= __('Pending Review') %></option>
            <option value="private"><%= __('Private') %></option>
        </select></div>
-    <div class="mailpoet_post_selection_filter_row">
-      <div class="mailpoet_form_field_title"><%= __('Categories & tags:') %></div>
-    </div>
    <div class="mailpoet_post_selection_filter_row">
        <select class="mailpoet_select mailpoet_posts_categories_and_tags" multiple="multiple">
          {{#each terms}}
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -147,6 +147,7 @@ config.push(_.extend({}, baseConfig, {
      'newsletter_editor/behaviors/ColorPickerBehavior.js',
      'newsletter_editor/behaviors/ContainerDropZoneBehavior.js',
      'newsletter_editor/behaviors/DraggableBehavior.js',
+      'newsletter_editor/behaviors/HighlightEditingBehavior.js',
      'newsletter_editor/behaviors/ResizableBehavior.js',
      'newsletter_editor/behaviors/SortableBehavior.js',
      'newsletter_editor/blocks/base.js',
@@ -205,6 +206,10 @@ config.push(_.extend({}, baseConfig, {
      'filesaver',
      'velocity-animate',

+      'mailpoet',
+      'notice',
+      'i18n',
+
      'newsletter_editor/communicationsFix.js',
      'newsletter_editor/App',
      'newsletter_editor/components/config.js',
@@ -218,6 +223,7 @@ config.push(_.extend({}, baseConfig, {
      'newsletter_editor/behaviors/ColorPickerBehavior.js',
      'newsletter_editor/behaviors/ContainerDropZoneBehavior.js',
      'newsletter_editor/behaviors/DraggableBehavior.js',
+      'newsletter_editor/behaviors/HighlightEditingBehavior.js',
      'newsletter_editor/behaviors/ResizableBehavior.js',
      'newsletter_editor/behaviors/SortableBehavior.js',
      'newsletter_editor/blocks/base.js',