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/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
-            endpoint="segments"
-            fields={ fields }
-            params={ this.props.params }
-            messages={ messages } />
+          <div>
+            <h2 className="title">
+              Segment <Link className="add-new-h2" to="/">Back to list</Link>
+            </h2>
+
+            <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
-            endpoint="segments"
-            onRenderItem={this.renderItem}
-            columns={columns}
-            bulk_actions={ bulk_actions } />
+          <div>
+            <h2 className="title">
+              Segments <Link className="add-new-h2" to="new">New</Link>
+            </h2>
+
+            <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>
-            <h1>
-              { MailPoetI18n.pageTitle }
-              &nbsp;
-              <Link className="add-new-h2" to="new">New</Link>
-            </h1>
-
-            <RouteHandler/>
-          </div>
+          <RouteHandler />
         );
       }
     });

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
-            endpoint="subscribers"
-            fields={ fields }
-            params={ this.props.params }
-            messages={ messages } />
+          <div>
+            <h2 className="title">
+              Subscriber <Link className="add-new-h2" to="/">Back to list</Link>
+            </h2>
+
+            <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
-            endpoint="subscribers"
-            onRenderItem={ this.renderItem }
-            columns={ columns }
-            bulk_actions={ bulk_actions } />
+          <div>
+            <h2 className="title">
+              Subscribers <Link className="add-new-h2" to="new">New</Link>
+            </h2>
+
+            <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>
-            <h1>
-              { MailPoetI18n.pageTitle }
-              &nbsp;
-              <Link className="add-new-h2" to="new">New</Link>
-            </h1>
-
-            <RouteHandler/>
-          </div>
+          <RouteHandler />
         );
       }
     });