Settings tabs + lotta fixes

- tab menu handled by Backbone Router
- fixed minor styling issues
- fixed html structure of listings & forms titles so that notices are positioned correctly

assets/css/src/settings.styl

@@ -1,7 +1,10 @@
-.mailpoet_form .form-table th
+#mailpoet_role_permissions
+  margin-top: 20px;
+
+#mailpoet_settings .form-table th
   width:20em
 
 // responsive
 @media screen and (max-width: 782px)
-  .mailpoet_form .form-table th
+  #mailpoet_settings .form-table th
     width: auto

assets/js/src/newsletters/list.jsx

@@ -80,7 +80,10 @@ define(
       render: function() {
         return (
           <div>
-            <h1>Newsletters <Link className="add-new-h2" to="new">New</Link></h1>
+            <h2 className="title">
+              Newsletters <Link className="add-new-h2" to="new">New</Link>
+            </h2>
+
             <Listing
               endpoint="newsletters"
               onRenderItem={this.renderItem}

assets/js/src/newsletters/newsletters.jsx

@@ -24,7 +24,7 @@ define(
     var App = React.createClass({
       render: function() {
         return (
-          <RouteHandler/>
+          <RouteHandler />
         );
       }
     });

assets/js/src/segments/form.jsx

@@ -1,11 +1,13 @@
 define(
   [
     'react',
+    'react-router',
     'mailpoet',
     'form/form.jsx'
   ],
   function(
     React,
+    Router,
     MailPoet,
     Form
   ) {
@@ -27,15 +29,22 @@ define(
       }
     };
 
+    var Link = Router.Link;
+
     var SegmentForm = React.createClass({
       render: function() {
-
         return (
-          <Form
+          <div>
-            endpoint="segments"
+            <h2 className="title">
-            fields={ fields }
+              Segment <Link className="add-new-h2" to="/">Back to list</Link>
-            params={ this.props.params }
+            </h2>
-            messages={ messages } />
+
+            <Form
+              endpoint="segments"
+              fields={ fields }
+              params={ this.props.params }
+              messages={ messages } />
+          </div>
         );
       }
     });

assets/js/src/segments/list.jsx

@@ -1,11 +1,13 @@
 define(
   [
     'react',
+    'react-router',
     'listing/listing.jsx',
     'classnames'
   ],
   function(
     React,
+    Router,
     Listing,
     classNames
   ) {
@@ -34,6 +36,8 @@ define(
       }
     ];
 
+    var Link = Router.Link;
+
     var SegmentList = React.createClass({
       renderItem: function(segment, actions) {
         var rowClasses = classNames(
@@ -61,11 +65,17 @@ define(
       },
       render: function() {
         return (
-          <Listing
+          <div>
-            endpoint="segments"
+            <h2 className="title">
-            onRenderItem={this.renderItem}
+              Segments <Link className="add-new-h2" to="new">New</Link>
-            columns={columns}
+            </h2>
-            bulk_actions={ bulk_actions } />
+
+            <Listing
+              endpoint="segments"
+              onRenderItem={this.renderItem}
+              columns={columns}
+              bulk_actions={ bulk_actions } />
+          </div>
         );
       }
     });

assets/js/src/segments/segments.jsx

@@ -20,15 +20,7 @@ define(
     var App = React.createClass({
       render: function() {
         return (
-          <div>
+          <RouteHandler />
-            <h1>
-              { MailPoetI18n.pageTitle }
-              &nbsp;
-              <Link className="add-new-h2" to="new">New</Link>
-            </h1>
-
-            <RouteHandler/>
-          </div>
         );
       }
     });

assets/js/src/settings/tabs.js

@@ -0,0 +1,79 @@
+define(
+  [
+    'backbone',
+    'jquery',
+    'mailpoet'
+  ],
+  function(
+    Backbone,
+    jQuery,
+    MailPoet
+  ) {
+    if(jQuery('#mailpoet_settings').length === 0) {
+      return;
+    }
+
+    MailPoet.Router = new (Backbone.Router.extend({
+      routes: {
+        'mta(/:method)': 'sendingMethod',
+        '(:tab)': 'tabs',
+      },
+      sendingMethod: function(method) {
+        // display mta tab
+        this.tabs('mta');
+
+        // hide all sending methods' settings
+        jQuery(
+          '#mailpoet_sending_method_setup, .mailpoet_sending_method'
+        ).hide();
+
+        // hide "save settings" button
+        jQuery('.mailpoet_settings_submit').hide();
+
+        if(method === null) {
+          // show sending methods
+          jQuery('.mailpoet_sending_methods').fadeIn();
+        } else {
+          // hide DKIM option when using MailPoet's API
+          jQuery('#mailpoet_mta_dkim')[
+            (method === 'mailpoet')
+            ? 'hide'
+            : 'show'
+          ]();
+
+          // hide sending methods
+          jQuery('.mailpoet_sending_methods').hide();
+
+          // display selected sending method's settings
+          jQuery('.mailpoet_sending_method[data-method="'+ method +'"]').show();
+          jQuery('#mailpoet_sending_method_setup').fadeIn();
+        }
+      },
+      tabs: function(tab, section) {
+        // set default tab
+        tab = tab || 'basics';
+
+        // reset all active tabs
+        jQuery('.nav-tab-wrapper a').removeClass('nav-tab-active');
+
+        // hide panels & sections
+        jQuery('.mailpoet_panel, .mailpoet_section').hide();
+
+        // set active tab
+        jQuery('a.nav-tab[href="#'+tab+'"]').addClass('nav-tab-active').blur();
+
+        // show selected panel
+        if(jQuery('.mailpoet_panel[data-tab="'+ tab +'"]').length > 0) {
+          jQuery('.mailpoet_panel[data-tab="'+ tab +'"]').show();
+        }
+
+        // show "save settings" button
+        jQuery('.mailpoet_settings_submit').show();
+      }
+    }));
+
+    jQuery(document).ready(function() {
+      Backbone.history.start();
+    });
+  }
+);

assets/js/src/subscribers/form.jsx

@@ -1,11 +1,13 @@
 define(
   [
     'react',
+    'react-router',
     'mailpoet',
     'form/form.jsx'
   ],
   function(
     React,
+    Router,
     MailPoet,
     Form
   ) {
@@ -47,15 +49,22 @@ define(
       }
     };
 
+    var Link = Router.Link;
+
     var SubscriberForm = React.createClass({
       render: function() {
-
         return (
-          <Form
+          <div>
-            endpoint="subscribers"
+            <h2 className="title">
-            fields={ fields }
+              Subscriber <Link className="add-new-h2" to="/">Back to list</Link>
-            params={ this.props.params }
+            </h2>
-            messages={ messages } />
+
+            <Form
+              endpoint="subscribers"
+              fields={ fields }
+              params={ this.props.params }
+              messages={ messages } />
+          </div>
         );
       }
     });

assets/js/src/subscribers/list.jsx

@@ -177,11 +177,17 @@ define(
       },
       render: function() {
         return (
-          <Listing
+          <div>
-            endpoint="subscribers"
+            <h2 className="title">
-            onRenderItem={ this.renderItem }
+              Subscribers <Link className="add-new-h2" to="new">New</Link>
-            columns={ columns }
+            </h2>
-            bulk_actions={ bulk_actions } />
+
+            <Listing
+              endpoint="subscribers"
+              onRenderItem={ this.renderItem }
+              columns={ columns }
+              bulk_actions={ bulk_actions } />
+          </div>
         );
       }
     });

assets/js/src/subscribers/subscribers.jsx

@@ -20,15 +20,7 @@ define(
     var App = React.createClass({
       render: function() {
         return (
-          <div>
+          <RouteHandler />
-            <h1>
-              { MailPoetI18n.pageTitle }
-              &nbsp;
-              <Link className="add-new-h2" to="new">New</Link>
-            </h1>
-
-            <RouteHandler/>
-          </div>
         );
       }
     });

views/settings.html

@@ -3,7 +3,7 @@
 <% block content %>
   <div id="mailpoet_settings">
 
-    <h1 class="title"><%= __('Settings') %></h1>
+    <h2 class="title"><%= __('Settings') %></h2>
 
     <!-- settings form  -->
     <form
@@ -22,32 +22,31 @@
       </h2>
 
       <!-- basics -->
-
+      <div data-tab="basics" class="mailpoet_panel">
-      <div id="mailpoet_settings_basics" class="mailpoet_panel">
+        <% include 'settings/basics.html' %>
-         <% include 'settings/basics.html' %>
       </div>
 
       <!-- signup confirmation -->
-      <div id="mailpoet_settings_signup" class="mailpoet_panel">
+      <div data-tab="signup" class="mailpoet_panel">
         <% include 'settings/signup.html' %>
       </div>
-<#
+
       <!-- sending method -->
-      <div id="mailpoet_settings_mta" class="mailpoet_panel">
+      <div data-tab="mta" class="mailpoet_panel">
         <% include 'settings/mta.html' %>
       </div>
-#>
+
       <!-- advanced -->
-      <div id="mailpoet_settings_advanced" class="mailpoet_panel">
+      <div data-tab="advanced" class="mailpoet_panel">
         <% include 'settings/advanced.html' %>
       </div>
-<#
+
       <!-- bounce -->
-      <div id="mailpoet_settings_bounce" class="mailpoet_panel">
+      <div data-tab="bounce" class="mailpoet_panel">
         <% include 'settings/bounce.html' %>
       </div>
-#>
+
-      <p>
+      <p class="submit mailpoet_settings_submit">
         <input
           type="submit"
           class="button button-primary"
@@ -62,7 +61,6 @@
     jQuery(function($) {
       // on dom loaded
       $(function() {
-
         // setup toggle checkboxes
         function toggleContent() {
           $('#'+$(this).data('toggle'))[

views/settings/advanced.html

@@ -1,4 +1,4 @@
-<table class="widefat fixed">
+<table id="mailpoet_role_permissions" class="widefat fixed">
   <thead>
     <tr>
       <th class="manage-column">
@@ -85,7 +85,7 @@
               <% if(settings.analytics) %>
                 checked="checked"
               <% endif %>
-            /> <%= __('Yes') %>
+            /><%= __('Yes') %>
           </label>
           &nbsp;
           <label>
@@ -96,7 +96,7 @@
               <% if not(settings.analytics) %>
                 checked="checked"
               <% endif %>
-            /> <%= __('No') %>
+            /><%= __('No') %>
           </label>
         </p>
       </td>

views/settings/mta.html

@@ -1 +0,0 @@
-mta.html

views/settings/signup.html

@@ -113,7 +113,10 @@
           <% if(settings.signup_confirmation_email_subject) %>
             value="<%= settings.signup_confirmation_email_subject %>"
           <% else %>
-            value="<%= __('Confirm your subscription to %1$s') %>"
+            value="<%=
+              __('Confirm your subscription to %1$s')
+              | format(get_option('blogname'))
+            %>"
           <% endif %>
         />
       </td>

webpack.config.js

@@ -68,7 +68,8 @@ config.push(_.extend({}, baseConfig, {
     admin: [
       'subscribers/subscribers.jsx',
       'newsletters/newsletters.jsx',
-      'segments/segments.jsx'
+      'segments/segments.jsx',
+      'settings/tabs.js'
     ],
     newsletter_editor: [
       'underscore',