Translate color picker actions in newsletter editor

assets/js/src/newsletter_editor/behaviors/ColorPickerBehavior.js

@@ -6,8 +6,9 @@
 define([
     'backbone.marionette',
     'newsletter_editor/behaviors/BehaviorsLookup',
+    'mailpoet',
     'spectrum'
-  ], function(Marionette, BehaviorsLookup, Spectrum) {
+  ], function(Marionette, BehaviorsLookup, MailPoet, Spectrum) {
 
   BehaviorsLookup.ColorPickerBehavior = Marionette.Behavior.extend({
     onRender: function() {
@@ -17,6 +18,8 @@ define([
         showInitial: true,
         preferredFormat: "hex6",
         allowEmpty: true,
+        chooseText: MailPoet.I18n.t('selectColor'),
+        cancelText: MailPoet.I18n.t('cancelColorSelection')
       });
     },
   });

assets/js/src/newsletter_editor/components/sidebar.js

@@ -158,6 +158,9 @@ define([
    */
   Module.SidebarStylesView = Marionette.LayoutView.extend({
     getTemplate: function() { return templates.sidebarStyles; },
+    behaviors: {
+      ColorPickerBehavior: {},
+    },
     events: function() {
       return {
         "change #mailpoet_text_font_color": _.partial(this.changeColorField, 'text.fontColor'),
@@ -205,15 +208,6 @@ define([
     initialize: function(options) {
       this.availableStyles = options.availableStyles;
     },
-    onRender: function() {
-      this.$('.mailpoet_color').spectrum({
-        clickoutFiresChange: true,
-        showInput: true,
-        showInitial: true,
-        preferredFormat: "hex6",
-        allowEmpty: true,
-      });
-    },
     changeField: function(field, event) {
       this.model.set(field, jQuery(event.target).val());
     },

views/newsletter/editor.html

@@ -336,6 +336,8 @@
     'newsletterBodyIsCorrupted': __('Contents of this newsletter are corrupted and may be lost, you may need to add new content to this newsletter, or create a new one. If possible, please contact us and report this issue.'),
     'saving': __('Saving...'),
     'unsavedChangesWillBeLost': __('There are unsaved changes which will be lost if you leave this page.'),
+    'selectColor': _x('Select', 'select color'),
+    'cancelColorSelection': _x('Cancel', 'cancel color selection'),
   }) %>
 <% endblock %>