Fix select all functionality

I don't know what was wrong. I found out that with class check-column React
handler wasn't called. Something somewhere stopped the event propagation.
I guess something in WordPress, but I am not sure. So I renamed the class
now it is working.

[MAILPOET-1681]

assets/css/src/listing.styl

@@ -12,9 +12,16 @@
   th span
     white-space: nowrap
 
-  thead .check-column
-  tfoot .check-column
+  thead .mailpoet-check-column
+  tfoot .mailpoet-check-column
     padding: 10px 0 0 3px
+    width: 2.2em;
+    vertical-align: top;
+
+  tbody .mailpoet-check-column
+    margin: 0 0 0 8px;
+    vertical-align: text-top;
+    padding: 11px 0 0 3px;
 
   thead th.column-primary
   tfoot th.column-primary
@@ -24,4 +31,4 @@
   @media screen and (max-width: 782px)
     thead th.column-primary
     tfoot th.column-primary
-      width: 100%
+      width: 100%

assets/js/src/listing/header.jsx

@@ -4,7 +4,14 @@ import PropTypes from 'prop-types';
 import ListingColumn from './listing_column.jsx';
 
 class ListingHeader extends React.Component {
-  handleSelectItems = evt => this.props.onSelectItems(evt.target.checked);
+  constructor(props) {
+    super(props);
+    this.handleSelectItems = this.handleSelectItems.bind(this);
+  }
+
+  handleSelectItems(evt) {
+    this.props.onSelectItems(evt.target.checked);
+  }
 
   render() {
     const columns = this.props.columns.map((column, index) => {
@@ -28,7 +35,7 @@ class ListingHeader extends React.Component {
     if (this.props.is_selectable === true) {
       checkbox = (
         <th
-          className="manage-column column-cb check-column"
+          className="manage-column column-cb mailpoet-check-column"
         >
           <label className="screen-reader-text" htmlFor="select_all">
             {MailPoet.I18n.t('selectAll')}

assets/js/src/listing/listing.jsx

@@ -470,7 +470,7 @@ const Listing = createReactClass({ // eslint-disable-line react/prefer-es6-class
       selectedIds = jQuery.merge(selectedIds, [id]);
       // check whether all items on the page are selected
       if (
-        jQuery('tbody .check-column :checkbox:not(:checked)').length === 0
+        jQuery('tbody .mailpoet-check-column :checkbox:not(:checked)').length === 0
       ) {
         selection = 'page';
       }

assets/js/src/listing/listing_item.jsx

@@ -39,7 +39,7 @@ class ListingItem extends React.Component {
 
     if (this.props.is_selectable === true) {
       checkbox = (
-        <th className="check-column" scope="row">
+        <th className="mailpoet-check-column" scope="row">
           <label className="screen-reader-text" htmlFor={`listing-row-checkbox-${this.props.item.id}`}>{
             `Select ${this.props.item[this.props.columns[0].name]}`
           }</label>