Newsletter template thumbnail redesign

Redesigned the template selection screen to
look like the WordPress theme selector.

The main changes relate to:
* style changes, to achieve the new look
* jsx templates, to work with new css changes
* template, removed the description field

[MAILPOET-1306]

assets/css/src/box.styl

@@ -1,7 +1,8 @@
 $box-width = 425px
 $box-height = 150px
-$thumbnail-width = $box-height
-$thumbnail-height = $thumbnail-width
+$thumbnail-height = $box-height * 2
+$box-margin-big = 40px
+$box-margin-small = 20px
 $box-description-space-between-heading-and-paragraph = 5px
 $box-description-height = 110px
 $box-description-text-height = $box-description-height - $box-description-space-between-heading-and-paragraph
@@ -23,51 +24,127 @@ $box-description-font-size = $box-description-line-height
   border: 1px solid #dedede
   background-color: #fff
 
+.mailpoet_boxes .mailpoet_template_boxes
+  box-sizing: border-box
+  height: auto
+  margin: 0 0 $box-margin-big
+  padding: 0
+  width: 30.5%
+      
+  @media screen and (max-width 1178px)
+    width: 47%
+
+  @media screen and (max-width 520px)
+    width: 90%
+
+@media screen and (min-width 1179px)
+  .mailpoet_boxes .mailpoet_template_boxes:nth-child(3n-1)
+    margin: 0 $box-margin-big $box-margin-big $box-margin-big
+
+@media screen and (max-width 1178px)
+  .mailpoet_boxes .mailpoet_template_boxes:nth-child(2n-1)
+    margin: 0 $box-margin-big $box-margin-big 0
+
+@media screen and (max-width 782px)
+  .mailpoet_boxes .mailpoet_template_boxes:nth-child(2n-1)
+    margin: 0 $box-margin-small $box-margin-small 0
+
+@media screen and (max-width 520px)
+  .mailpoet_boxes .mailpoet_template_boxes:nth-child(1n)
+    margin: 0 0 $box-margin-small $box-margin-small
+
+.mailpoet_boxes .mailpoet_template_boxes .mailpoet_description
+  background: #fafafa
+  border-top: 1px solid #e1e1e1
+  padding: 12px 5%
+  width: 90%
+
+.mailpoet_boxes .mailpoet_template_boxes .mailpoet_description h3
+  font-size: 15px
+  font-weight: 600
+  line-height: 20px
+  margin: 0
+  white-space: nowrap
+  max-width: 100%
+
+.mailpoet_boxes .mailpoet_template_boxes .mailpoet_actions
+  background: #f5f5f5
+  border-top: 1px solid#d6d6d6
+  border-left: 1px solid #e8e8e8
+  padding: 8px 16px
+  bottom: 0px
+  right: 0px
+
+  @media screen and (max-width 782px)
+    padding: 6px 16px 2px
+
 .mailpoet_boxes .mailpoet_thumbnail
   background-color: #222
   background-size: 50% 50%
   background-repeat: no-repeat
   background-position: center
   color: #222
+  border: 0
+  width: 100%
+  height: $thumbnail-height
+  float: left
+  overflow: hidden
+  position: relative
+
+  img
+    min-width: $thumbnail-height
+    height: auto
+    width: 100%
+
+.mailpoet_boxes .mailpoet_newsletter_types .mailpoet_thumbnail
   border: 1px solid #ccc
-  width: $thumbnail-height
-  height: $thumbnail-width
+  width: $box-height
+  height: $box-height
   margin-right: 15px
   float: left
   overflow: hidden
   position: relative
 
   img
-    min-width: $thumbnail-width
-    height: auto
+    min-width: $box-height
     width: 110%
     position: relative
     top: 50%
     left: 50%
     transform: translate(-50%, -50%)
 
-  .mailpoet_overlay
-    position: absolute
-    top: 0
-    left: 0
-    right: 0
-    bottom: 0
-    background-color: rgba(255, 255, 255, 0.0)
-    opacity: 0
-    transition: all 250ms cubic-bezier(0.420, 0.000, 0.580, 1.000) /* ease-in-out */
+.mailpoet_overlay
+  position: absolute
+  top: 0
+  left: 0
+  right: 0
+  bottom: 0
+  background-color: rgba(255, 255, 255, 0.0)
+  opacity: 0
+  transition: all 250ms cubic-bezier(0.420, 0.000, 0.580, 1.000) /* ease-in-out */
 
-    &:hover
-      background-color: rgba(255, 255, 255, 0.7)
-      opacity: 1
+  &:hover
+    background-color: rgba(255, 255, 255, 0.7)
+    opacity: 1
 
-    &::after
-      content: " "
-      position: absolute
-      top: 0
-      left: 0
-      bottom: 0
-      right: 0
-      background: url(../img/preview_magnifying_glass.svg) no-repeat center center
+.mailpoet_overlay .mailpoet_more_details
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+  /* opacity: 0; */
+  position: absolute;
+  top: 35%;
+  right: 20%;
+  left: 20%;
+  background: #23282d;
+  background: rgba(0,0,0,.7);
+  color: #fff;
+  font-size: 15px;
+  text-shadow: 0 1px 0 rgba(0,0,0,.6);
+  -webkit-font-smoothing: antialiased;
+  font-weight: 600;
+  padding: 15px 12px;
+  text-align: center;
+  border-radius: 3px;
+  transition: opacity .1s ease-in-out;
 
 .mailpoet_boxes .mailpoet_description
   float:left
@@ -96,18 +173,14 @@ $box-description-font-size = $box-description-line-height
   right: 15px
 
 .mailpoet_boxes .mailpoet_delete
-  display: none
-  position: absolute
-  top: 15px
-  right: 15px
-
-.mailpoet_boxes li:hover .mailpoet_delete
-  display: block
+  margin-right: 6px
 
 .mailpoet_boxes .mailpoet_delete a
-  color:#a00
+  color:inherit
+  text-decoration: none
+
 .mailpoet_boxes .mailpoet_delete a:hover
-  color:red
+  color:inherit
 
 // newsletters: types
 [data-type="notification"] .mailpoet_thumbnail

assets/img/preview_magnifying_glass.svg

@@ -1,12 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 16.0.4, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 width="47.002px" height="38.003px" viewBox="0 0 47.002 38.003" enable-background="new 0 0 47.002 38.003" xml:space="preserve">
-<path fill-rule="evenodd" clip-rule="evenodd" fill="#565656" d="M46.328,36.365c-1.188,1.725-3.553,2.158-5.273,0.962L25.479,26.52
-	c-1.104-0.763-1.674-2.007-1.631-3.257c-2.006,2.157-4.642,3.606-7.594,4.145c-3.626,0.663-7.288-0.13-10.311-2.227
-	c-3.024-2.098-5.054-5.253-5.714-8.887c-0.661-3.636,0.127-7.31,2.221-10.344c4.325-6.264,12.927-7.834,19.177-3.5
-	c5.672,3.938,7.486,11.412,4.537,17.443c1.152-0.486,2.519-0.392,3.627,0.377l15.58,10.808C47.09,32.274,47.52,34.641,46.328,36.365
-	z M23.235,12.09c-0.459-2.534-1.874-4.734-3.982-6.196C14.897,2.87,8.896,3.963,5.878,8.331c-3.014,4.373-1.922,10.388,2.435,13.408
-	c4.356,3.025,10.356,1.932,13.374-2.438C23.146,17.187,23.696,14.625,23.235,12.09z"/>
-</svg>

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}

lib/Config/Migrator.php

@@ -247,7 +247,6 @@ class Migrator {
       'newsletter_id int NULL DEFAULT 0,',
       'name varchar(250) NOT NULL,',
       'categories varchar(250) NOT NULL DEFAULT "[]",',
-      'description varchar(250) NOT NULL,',
       'body LONGTEXT,',
       'thumbnail LONGTEXT,',
       'readonly TINYINT(1) DEFAULT 0,',

lib/Config/PopulatorData/Templates/AppWelcome.php

@@ -15,7 +15,6 @@ class AppWelcome {
   function get() {
     return array(
       'name' => __("App Welcome", 'mailpoet'),
-      'description' => __("A welcome email template for your app.", 'mailpoet'),
       'categories' => json_encode(array('welcome', 'sample')),
       'readonly' => 1,
       'thumbnail' => $this->getThumbnail(),

lib/Config/PopulatorData/Templates/BurgerJoint.php

@@ -15,7 +15,6 @@ class BurgerJoint {
   function get() {
     return array(
       'name' => __("Burger Joint", 'mailpoet'),
-      'description' => __("Add more or less ketchup or mayo to this restaurant template.", 'mailpoet'),
       'categories' => json_encode(array('standard', 'sample')),
       'readonly' => 1,
       'thumbnail' => $this->getThumbnail(),

lib/Config/PopulatorData/Templates/ChocolateStore.php

@@ -15,7 +15,6 @@ class ChocolateStore {
   function get() {
     return array(
       'name' => __("Chocolate Store", 'mailpoet'),
-      'description' => __("A classy black store template.", 'mailpoet'),
       'categories' => json_encode(array('standard', 'sample')),
       'readonly' => 1,
       'thumbnail' => $this->getThumbnail(),

lib/Config/PopulatorData/Templates/CoffeeShop.php

@@ -15,7 +15,6 @@ class CoffeeShop {
   function get() {
     return array(
       'name' => __("Coffee Shop", 'mailpoet'),
-      'description' => __("Coffee and sugar in your coffee?", 'mailpoet'),
       'categories' => json_encode(array('standard', 'sample')),
       'readonly' => 1,
       'thumbnail' => $this->getThumbnail(),

lib/Config/PopulatorData/Templates/Discount.php

@@ -15,7 +15,6 @@ class Discount {
   function get() {
     return array(
       'name' => __("Discount", 'mailpoet'),
-      'description' => __("A useful layout for a simple discount email.", 'mailpoet'),
       'categories' => json_encode(array('standard', 'sample')),
       'readonly' => 1,
       'thumbnail' => $this->getThumbnail(),

lib/Config/PopulatorData/Templates/Faith.php

@@ -15,7 +15,6 @@ class Faith {
   function get() {
     return array(
       'name' => __("Faith", 'mailpoet'),
-      'description' => __("A calm and muted faith template.", 'mailpoet'),
       'categories' => json_encode(array('standard', 'sample')),
       'readonly' => 1,
       'thumbnail' => $this->getThumbnail(),

lib/Config/PopulatorData/Templates/FestivalEvent.php

@@ -15,7 +15,6 @@ class FestivalEvent {
   function get() {
     return array(
       'name' => __("Festival Event", 'mailpoet'),
-      'description' => __("A colourful festival event template.", 'mailpoet'),
       'categories' => json_encode(array('standard', 'sample')),
       'readonly' => 1,
       'thumbnail' => $this->getThumbnail(),

lib/Config/PopulatorData/Templates/FoodBox.php

@@ -16,7 +16,6 @@ class FoodBox {
   function get() {
     return array(
       'name' => __("Welcome to FoodBox", 'mailpoet'),
-      'description' => __("A welcome email template for your takeaway.", 'mailpoet'),
       'categories' => json_encode(array('standard', 'sample')),
       'readonly' => 1,
       'thumbnail' => $this->getThumbnail(),

lib/Config/PopulatorData/Templates/KickOff.php

@@ -15,7 +15,6 @@ class KickOff {
   function get() {
     return array(
       'name' => __("Kick-Off", 'mailpoet'),
-      'description' => __("Sporty green template for your team or sport event.", 'mailpoet'),
       'categories' => json_encode(array('standard', 'sample')),
       'readonly' => 1,
       'thumbnail' => $this->getThumbnail(),

lib/Config/PopulatorData/Templates/NewsDay.php

@@ -15,7 +15,6 @@ class NewsDay {
   function get() {
     return array(
       'name' => __("News Day", 'mailpoet'),
-      'description' => __("Media ready template.", 'mailpoet'),
       'categories' => json_encode(array('standard', 'sample')),
       'readonly' => 1,
       'thumbnail' => $this->getThumbnail(),

lib/Config/PopulatorData/Templates/NewsletterBlank121Column.php

@@ -15,7 +15,6 @@ class NewsletterBlank121Column {
   function get() {
     return array(
       'name' => __("Newsletter: Blank 1:2:1 Column", 'mailpoet'),
-      'description' => __("A blank Newsletter template with a 1:2:1 column layout.", 'mailpoet'),
       'categories' => json_encode(array('standard', 'blank')),
       'readonly' => 1,
       'thumbnail' => $this->getThumbnail(),

lib/Config/PopulatorData/Templates/NewsletterBlank12Column.php

@@ -15,7 +15,6 @@ class NewsletterBlank12Column {
   function get() {
     return array(
       'name' => __("Newsletter: Blank 1:2 Column", 'mailpoet'),
-      'description' => __("A blank Newsletter template with a 1:2 column layout.", 'mailpoet'),
       'categories' => json_encode(array('standard', 'blank')),
       'readonly' => 1,
       'thumbnail' => $this->getThumbnail(),

lib/Config/PopulatorData/Templates/NewsletterBlank13Column.php

@@ -15,7 +15,6 @@ class NewsletterBlank13Column {
   function get() {
     return array(
       'name' => __("Newsletter: Blank 1:3 Column", 'mailpoet'),
-      'description' => __("A blank Newsletter template with a 1:3 column layout.", 'mailpoet'),
       'categories' => json_encode(array('standard', 'blank')),
       'readonly' => 1,
       'thumbnail' => $this->getThumbnail(),

lib/Config/PopulatorData/Templates/NewsletterBlank1Column.php

@@ -15,7 +15,6 @@ class NewsletterBlank1Column {
   function get() {
     return array(
       'name' => __("Newsletter: Blank 1 Column", 'mailpoet'),
-      'description' => __("A blank Newsletter template with a 1 column layout.", 'mailpoet'),
       'categories' => json_encode(array('standard', 'blank')),
       'readonly' => 1,
       'thumbnail' => $this->getThumbnail(),

lib/Config/PopulatorData/Templates/PieceOfCake.php

@@ -15,7 +15,6 @@ class PieceOfCake {
   function get() {
     return array(
       'name' => __("Piece of cake", 'mailpoet'),
-      'description' => __("Baked with plenty of images.", 'mailpoet'),
       'categories' => json_encode(array('standard', 'sample')),
       'readonly' => 1,
       'thumbnail' => $this->getThumbnail(),

lib/Config/PopulatorData/Templates/PostNotificationsBlank1Column.php

@@ -15,7 +15,6 @@ class PostNotificationsBlank1Column {
   function get() {
     return array(
       'name' => __("Post Notifications: Blank 1 Column", 'mailpoet'),
-      'description' => __("A blank Post Notifications template with a 1 column layout.", 'mailpoet'),
       'categories' => json_encode(array('notification', 'blank')),
       'readonly' => 1,
       'thumbnail' => $this->getThumbnail(),

lib/Config/PopulatorData/Templates/ScienceWeekly.php

@@ -15,7 +15,6 @@ class ScienceWeekly {
   function get() {
     return array(
       'name' => __("Science Weekly", 'mailpoet'),
-      'description' => __("The right chemistry to send your weekly posts.", 'mailpoet'),
       'categories' => json_encode(array('standard', 'sample')),
       'readonly' => 1,
       'thumbnail' => $this->getThumbnail(),

lib/Config/PopulatorData/Templates/Shoes.php

@@ -15,7 +15,6 @@ class Shoes {
   function get() {
     return array(
       'name' => __("Shoes", 'mailpoet'),
-      'description' => __("Nothing like a pair that fits perfectly.", 'mailpoet'),
       'categories' => json_encode(array('standard', 'sample')),
       'readonly' => 1,
       'thumbnail' => $this->getThumbnail(),

lib/Config/PopulatorData/Templates/SimpleText.php

@@ -15,7 +15,6 @@ class SimpleText {
   function get() {
     return array(
       'name' => __("Simple Text", 'mailpoet'),
-      'description' => __("A simple plain text template - just like a regular email.", 'mailpoet'),
       'categories' => json_encode(array('standard', 'sample')),
       'readonly' => 1,
       'thumbnail' => $this->getThumbnail(),

lib/Config/PopulatorData/Templates/TakeAHike.php

@@ -15,7 +15,6 @@ class TakeAHike {
   function get() {
     return array(
       'name' => __("Take a Hike", 'mailpoet'),
-      'description' => __("Can you climb to the top?", 'mailpoet'),
       'categories' => json_encode(array('standard', 'sample')),
       'readonly' => 1,
       'thumbnail' => $this->getThumbnail(),

lib/Config/PopulatorData/Templates/TravelNomads.php

@@ -15,7 +15,6 @@ class TravelNomads {
   function get() {
     return array(
       'name' => __("Travel Nomads", 'mailpoet'),
-      'description' => __("Ideal for sharing your travel adventures.", 'mailpoet'),
       'categories' => json_encode(array('standard', 'sample')),
       'readonly' => 1,
       'thumbnail' => $this->getThumbnail(),

lib/Config/PopulatorData/Templates/WelcomeBlank12Column.php

@@ -15,7 +15,6 @@ class WelcomeBlank12Column {
   function get() {
     return array(
       'name' => __("Welcome Email: Blank 1:2 Column", 'mailpoet'),
-      'description' => __("A blank Welcome Email template with a 1:2 column layout.", 'mailpoet'),
       'categories' => json_encode(array('welcome', 'blank')),
       'readonly' => 1,
       'thumbnail' => $this->getThumbnail(),

lib/Config/PopulatorData/Templates/WelcomeBlank1Column.php

@@ -15,7 +15,6 @@ class WelcomeBlank1Column {
   function get() {
     return array(
       'name' => __("Welcome Email: Blank 1 Column", 'mailpoet'),
-      'description' => __("A blank Welcome Email template with a 1 column layout.", 'mailpoet'),
       'categories' => json_encode(array('welcome', 'blank')),
       'readonly' => 1,
       'thumbnail' => $this->getThumbnail(),

lib/Config/PopulatorData/Templates/WorldCup.php

@@ -15,7 +15,6 @@ class WorldCup {
   function get() {
     return array(
       'name' => __("World Cup", 'mailpoet'),
-      'description' => __("Always a winner.", 'mailpoet'),
       'categories' => json_encode(array('standard', 'sample')),
       'readonly' => 1,
       'thumbnail' => $this->getThumbnail(),

lib/Config/PopulatorData/Templates/YogaStudio.php

@@ -15,7 +15,6 @@ class YogaStudio {
   function get() {
     return array(
       'name' => __("Yoga Studio", 'mailpoet'),
-      'description' => __("Salute the sun and your subscribers.", 'mailpoet'),
       'categories' => json_encode(array('standard', 'sample')),
       'readonly' => 1,
       'thumbnail' => $this->getThumbnail(),

tests/acceptance/ManageSubscriptionLinkCest.php

@@ -21,7 +21,7 @@ class ManageSubscriptionLinkCest {
     $I->click('[data-automation-id=\'create_standard\']');
 
     // step 2 - select template
-    $first_template_element = '[data-automation-id=\'select_template_1\']';
+    $first_template_element = '[data-automation-id=\'select_template_0\']';
     $I->waitForElement($first_template_element);
     $I->seeInCurrentUrl('#/template');
     $I->click($first_template_element);

tests/unit/API/JSON/v1/NewsletterTemplatesTest.php

@@ -9,14 +9,12 @@ class NewsletterTemplatesTest extends \MailPoetTest {
   function _before() {
     NewsletterTemplate::createOrUpdate(array(
       'name' => 'Template #1',
-      'description' => 'My First Template',
       'body' => '{"key1": "value1"}'
     ));
 
     NewsletterTemplate::createOrUpdate(array(
       'name' => 'Template #2',
       'newsletter_id' => 1,
-      'description' => 'My Second Template',
       'body' => '{"key2": "value2"}'
     ));
   }
@@ -57,7 +55,6 @@ class NewsletterTemplatesTest extends \MailPoetTest {
   function testItCanSaveANewTemplate() {
     $template_data = array(
       'name' => 'Template #3',
-      'description' => 'My Third Template',
       'body' => '{"key3": "value3"}'
     );
 
@@ -73,7 +70,6 @@ class NewsletterTemplatesTest extends \MailPoetTest {
     $template_data = array(
       'newsletter_id' => 2,
       'name' => 'Template #3',
-      'description' => 'My Third Template',
       'body' => '{"key3": "value3"}'
     );
 
@@ -89,7 +85,6 @@ class NewsletterTemplatesTest extends \MailPoetTest {
     $template_data = array(
       'newsletter_id' => '1',
       'name' => 'Template #2',
-      'description' => 'My Updated Second Template',
       'body' => '{"key3": "value3"}'
     );
 
@@ -104,7 +99,7 @@ class NewsletterTemplatesTest extends \MailPoetTest {
     $normalize = function($array) {
       $result = array();
       foreach($array as $key => $value) {
-        if(in_array($key, ['newsletter_id', 'name', 'description', 'body'])) {
+        if(in_array($key, ['newsletter_id', 'name', 'body'])) {
           $result[$key] = $value;
         }
       }

tests/unit/Models/NewsletterTemplateTest.php

@@ -7,7 +7,6 @@ class NewsletterTemplateTest extends \MailPoetTest {
   function _before() {
     $this->data = array(
       'name' => 'Some template',
-      'description' => 'My nice template',
       'body' => '{}',
     );
 
@@ -37,12 +36,6 @@ class NewsletterTemplateTest extends \MailPoetTest {
     expect($template->name)->equals($this->data['name']);
   }
 
-  function testItHasDescription() {
-    $template = NewsletterTemplate::where('description', $this->data['description'])
-      ->findOne();
-    expect($template->description)->equals($this->data['description']);
-  }
-
   function testItHasBody() {
     $template = NewsletterTemplate::where('body', $this->data['body'])
       ->findOne();
@@ -53,7 +46,6 @@ class NewsletterTemplateTest extends \MailPoetTest {
     $created_template = NewsletterTemplate::createOrUpdate(
       array(
         'name' => 'Another template',
-        'description' => 'Another template description',
         'body' => '{content: {}, globalStyles: {}}',
       ));
     expect($created_template->id() > 0)->true();
@@ -81,7 +73,6 @@ class NewsletterTemplateTest extends \MailPoetTest {
     for($i = 0; $i < $total; $i++) {
       NewsletterTemplate::createOrUpdate(array(
         'name' => 'Testing template ' . $i,
-        'description' => 'template description',
         'body' => '{content: {}, globalStyles: {}}',
         'categories' => NewsletterTemplate::RECENTLY_SENT_CATEGORIES
       ));

views/newsletter/editor.html

@@ -333,7 +333,6 @@
     'helpTooltipDesignerPreheader': __("This optional text will appear in your subscribers' inboxes, beside the subject line. Write something enticing!"),
     'helpTooltipDesignerFullWidth': __("This option eliminates padding around the image. It only works if the image is larger than the column size."),
     'helpTooltipDesignerIdealWidth': __("Use images with widths of at least 1,000 pixels to ensure sharp display on high density screens, like mobile devices."),
-    'templateDescriptionMissing': __('Please add a template description'),
     'templateSaved': __('Template has been saved.'),
     'templateSaveFailed': __('Template has not been saved, please try again'),
     'categoriesAndTags': __('Categories & tags'),

views/newsletter/templates/components/save.hbs

@@ -20,7 +20,6 @@
     <div class="mailpoet_export_template_container mailpoet_hidden">
         <p><b class="mailpoet_export_template_title"><%= __('Export template') %></b></p>
         <p><input type="text" name="export_template_name" value="" placeholder="<%= __('Template name') %>" class="mailpoet_input mailpoet_export_template_name" /></p>
-        <p><input type="text" name="export_template_description" value="" placeholder="<%= __('Template description') %>" class="mailpoet_input mailpoet_export_template_description" /></p>
         <p><input type="button" name="export_template" value="<%= __('Export template') %>" class="button button-primary mailpoet_button_full mailpoet_export_template" /></p>
     </div>
 </div>

views/newsletters.html

@@ -114,7 +114,6 @@
     'helpTooltipTemplateUpload': __('You can only upload .json templates that were originally created with MailPoet 3.'),
     'upload': __('Upload'),
     'mailpoetGuideTemplateTitle': __("MailPoet's Guide"),
-    'mailpoetGuideTemplateDescription': __("This is the standard template that comes with MailPoet."),
     'confirmTemplateDeletion': __('You are about to delete the template named "%$1s".'),
     'delete': __('Delete'),
     'select': _x('Select', 'Verb'),
@@ -273,6 +272,7 @@
     'recentlySent': __('Recently sent'),
     'savedTemplates': __('Your saved templates'),
     'templatePreview': __('Template preview'),
+    'zoom': __('Zoom'),
     'blank': _x('Blank', 'Blank newsletters templates category'),
     'sample': _x('Sample', 'Sample newsletters templates category'),
     'tabImportTitle': _x('Import', 'Importing template tab title'),