Cavemanon/piratepoet
8
Fork 0
Code Pull Requests Actions Releases 16 Activity

Settings tabs + lotta fixes

Browse Source 
- tab menu handled by Backbone Router
- fixed minor styling issues
- fixed html structure of listings & forms titles so that notices are positioned correctly
This commit is contained in:
Jonathan Labreuille
2015-10-13 11:53:20 +02:00
parent 9fd13767f0
commit 39354d131d
15 changed files with 168 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
assets/css/src/settings.styl
View File

@@ -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

5
assets/js/src/newsletters/list.jsx
View File

@@ -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}

2
assets/js/src/newsletters/newsletters.jsx
View File

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

11
assets/js/src/segments/form.jsx
View File

@@ -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 (
<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>
);
}
});

10
assets/js/src/segments/list.jsx
View File

@@ -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 (
<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>
);
}
});

10
assets/js/src/segments/segments.jsx
View File

@@ -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 />
);
}
});

79
assets/js/src/settings/tabs.js Normal file
View File

@@ -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();
});
}
);

11
assets/js/src/subscribers/form.jsx
View File

@@ -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 (
<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>
);
}
});

6
assets/js/src/subscribers/list.jsx
View File

@@ -177,11 +177,17 @@ define(
},
render: function() {
return (
<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>
);
}
});

10
assets/js/src/subscribers/subscribers.jsx
View File

@@ -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 />
);
}
});

24
views/settings.html
View File

@@ -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 id="mailpoet_settings_basics" class="mailpoet_panel">
<div data-tab="basics" class="mailpoet_panel">
<% 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'))[

6
views/settings/advanced.html
View File

@@ -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>

1
views/settings/mta.html
View File

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

5
views/settings/signup.html
View File

@@ -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>

3
webpack.config.js
View File

@@ -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',