Merge pull request #1360 from mailpoet/mp1306

Newsletter template thumbnail redesign [MAILPOET-1306]

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

@@ -163,7 +163,6 @@ define([
     },
     saveAsTemplate: function () {
       var templateName = this.$('.mailpoet_save_as_template_name').val();
-      var templateDescription = this.$('.mailpoet_save_as_template_description').val();
       var that = this;
 
       if (templateName === '') {
@@ -174,18 +173,9 @@ define([
             scroll: true
           }
         );
-      } else if (templateDescription === '') {
-        MailPoet.Notice.error(
-          MailPoet.I18n.t('templateDescriptionMissing'),
-          {
-            positionAfter: that.$el,
-            scroll: true
-          }
-        );
       } else {
         Module.saveTemplate({
-          name: templateName,
-          description: templateDescription
+          name: templateName
         }).then(function () {
           MailPoet.Notice.success(
             MailPoet.I18n.t('templateSaved'),
@@ -218,7 +208,6 @@ define([
     },
     exportTemplate: function () {
       var templateName = this.$('.mailpoet_export_template_name').val();
-      var templateDescription = this.$('.mailpoet_export_template_description').val();
       var that = this;
 
       if (templateName === '') {
@@ -229,18 +218,9 @@ define([
             scroll: true
           }
         );
-      } else if (templateDescription === '') {
-        MailPoet.Notice.error(
-          MailPoet.I18n.t('templateDescriptionMissing'),
-          {
-            positionAfter: that.$el,
-            scroll: true
-          }
-        );
       } else {
         Module.exportTemplate({
-          name: templateName,
-          description: templateDescription
+          name: templateName
         });
         this.hideExportTemplate();
       }

assets/js/src/newsletters/templates.jsx

@@ -70,8 +70,6 @@ class NewsletterTemplates extends React.Component {
           {
             name:
               MailPoet.I18n.t('mailpoetGuideTemplateTitle'),
-            description:
-              MailPoet.I18n.t('mailpoetGuideTemplateDescription'),
             categories: '["welcome", "notification", "standard"]',
             readonly: '1',
           },

assets/js/src/newsletters/templates/template_box.jsx

@@ -95,10 +95,10 @@ class TemplateBox extends React.Component {
   }
 
   render() {
-    const { index, name, thumbnail, description, readonly } = this.props;
+    const { index, name, thumbnail, readonly } = this.props;
 
     const deleteLink = (
-      <div className="mailpoet_delete">
+      <div className="mailpoet_delete button button-secondary">
         <a href="javascript:;" onClick={this.onDelete}>{MailPoet.I18n.t('delete')}</a>
       </div>
     );
@@ -108,30 +108,25 @@ class TemplateBox extends React.Component {
       preview = (
         <a href="javascript:;" onClick={this.onPreview}>
           <img src={thumbnail} alt={MailPoet.I18n.t('templatePreview')} />
-          <div className="mailpoet_overlay" />
+          <div className="mailpoet_overlay">
+            <p className="mailpoet_more_details">{MailPoet.I18n.t('zoom')}</p>
+          </div>
         </a>
       );
     }
 
     return (
-      <li>
+      <li className="mailpoet_template_boxes">
         <div className="mailpoet_thumbnail">
           { preview }
         </div>
 
         <div className="mailpoet_description">
           <h3>{ name }</h3>
-          <p>{ description }</p>
         </div>
 
         <div className="mailpoet_actions">
-          <a
-            className="button button-secondary"
-            onClick={this.onPreview}
-            role="button"
-            tabIndex={0}
-          >{MailPoet.I18n.t('preview')}</a>
-            &nbsp;
+          { readonly === '1' ? false : deleteLink }
           <a
             className="button button-primary"
             data-automation-id={`select_template_${index}`}
@@ -140,7 +135,6 @@ class TemplateBox extends React.Component {
             tabIndex={0}
           > {MailPoet.I18n.t('select')} </a>
         </div>
-        { readonly === '1' ? false : deleteLink }
       </li>
     );
   }
@@ -151,7 +145,6 @@ TemplateBox.propTypes = {
   id: PropTypes.string.isRequired,
   newsletterId: PropTypes.string.isRequired,
   name: PropTypes.string.isRequired,
-  description: PropTypes.string.isRequired,
   thumbnail: PropTypes.string.isRequired,
   readonly: PropTypes.string.isRequired,
   beforeDelete: PropTypes.func.isRequired,

assets/js/src/newsletters/types.jsx

@@ -130,7 +130,7 @@ const NewsletterTypes = React.createClass({
 
         <ul className="mailpoet_boxes clearfix">
           {types.map(type => (
-            <li key={type.slug} data-type={type.slug}>
+            <li key={type.slug} data-type={type.slug} className="mailpoet_newsletter_types">
               <div>
                 <div className="mailpoet_thumbnail">
                   {type.thumbnailImage ? <img src={type.thumbnailImage} alt="" /> : null}