Merge pull request #1640 from mailpoet/react-modal

Change React Confirm Alert style [MAILPOET-1625]

assets/css/src/admin.styl

@@ -29,7 +29,6 @@
 
 @require 'mp2migrator'
 
-@require '../../../node_modules/react-confirm-alert/src/react-confirm-alert.css'
 @require '../../../node_modules/intro.js/introjs.css'
 
 @require 'newsletter_templates'

assets/css/src/modal.styl

@@ -9,7 +9,7 @@ body.mailpoet_modal_opened
   overflow: hidden
 
 // overlay
-#mailpoet_modal_overlay
+.mailpoet_modal_overlay
   height: 100%
   left: 0
   overflow-y: auto
@@ -19,6 +19,9 @@ body.mailpoet_modal_opened
   width: 100%
   z-index: 100000
   background-color: overlay_background_color
+  display: flex
+  align-items: center
+  justify-content: center
 
 .mailpoet_modal_highlight
   pointer-events: none
@@ -28,24 +31,21 @@ body.mailpoet_modal_opened
   box-shadow(0px 0px 20px 2px alpha(#fff, 75%))
 
 // overlay: state
-#mailpoet_modal_overlay.mailpoet_overlay_hidden
+.mailpoet_modal_overlay.mailpoet_overlay_hidden
   background-color: transparent
 
 // overlay: state
-#mailpoet_modal_overlay.mailpoet_overlay_loading
+.mailpoet_modal_overlay.mailpoet_overlay_loading
   background-color: overlay_background_color !important
-  display: block !important
+  display: flex !important
 
-.mailpoet_modal_opened #mailpoet_modal_overlay
+.mailpoet_modal_opened .mailpoet_modal_overlay
   display: block
 
 // modal popup
-#mailpoet_popup
-  display: none
-  position: absolute
+.mailpoet_popup
   z-index: 25
-  top: 48px
-  margin: 0
+  margin: auto
 
 .mailpoet_popup_wrapper
   background-color: modal_content_background_color
@@ -58,14 +58,14 @@ body.mailpoet_modal_opened
 .mailpoet_overlay_hidden .mailpoet_popup_wrapper
   border: 1px solid #333
 
-#mailpoet_popup_title
+.mailpoet_popup_title
   background-color: modal_title_background_color
   border: 1px solid #333
   height: 27px
   margin: 0
   padding: 0 30px 0 0
 
-#mailpoet_popup_title h2
+.mailpoet_popup_title h2
   color: modal_title_color
   font-size: 12px
   font-weight: normal
@@ -77,12 +77,15 @@ body.mailpoet_modal_opened
   padding: 10px 10px 10px 10px
   height: 92%
 
+  .button + .button
+    margin-left: 10px
+
 // modal panel
-#mailpoet_modal_overlay.mailpoet_panel_overlay
+.mailpoet_modal_overlay.mailpoet_panel_overlay
   top: 32px
   overflow: hidden
 
-#mailpoet_panel
+.mailpoet_panel
   display: none
   position: fixed
   z-index: 100002
@@ -104,13 +107,13 @@ body.mailpoet_modal_opened
   top: 0
   z-index: 0
 
-#mailpoet_panel_title
+.mailpoet_panel_title
   margin: 0
   padding: 0
   position: relative
   height: 0
 
-#mailpoet_panel_title h2
+.mailpoet_panel_title h2
   color: modal_title_color
   background-color: modal_title_background_color
   border-left: 1px solid #444
@@ -126,8 +129,10 @@ body.mailpoet_modal_opened
   padding: 10px 10px 36px 10px
 
 // modal button
-#mailpoet_modal_close
+.mailpoet_modal_close
   background: url(../img/modal_close_button.png) 7px 7px no-repeat
+  border: 0
+  cursor: pointer
   height: 30px
   overflow: hidden
   padding: 0
@@ -136,15 +141,15 @@ body.mailpoet_modal_opened
   z-index: 2
   outline: 0 none
 
-#mailpoet_popup #mailpoet_modal_close
+.mailpoet_popup .mailpoet_modal_close
   right: 0
   top: 0
 
-#mailpoet_panel #mailpoet_modal_close
+.mailpoet_panel .mailpoet_modal_close
   right: 10px
   top: 7px
 
-#mailpoet_modal_close:focus
+.mailpoet_modal_close:focus
   outline: 0 none
 
 // buttons
@@ -161,19 +166,12 @@ body.mailpoet_modal_opened
   text-align: right
 
 @media screen and (max-width: 782px)
-  #mailpoet_modal_overlay.mailpoet_panel_overlay
+  .mailpoet_modal_overlay.mailpoet_panel_overlay
     top: 46px
 
   .mailpoet_panel_body
     padding-bottom: 52px
 
-#mailpoet_loading
-  position: relative
-  left: 50%
-  top: 50%
-  margin-left: -75px
-  margin-top: -16px
-
 .mailpoet_loading
   height: 32px
   width: 150px
@@ -191,13 +189,13 @@ body.mailpoet_modal_opened
   margin-left: 17px
   width: 32px
 
-#mailpoet_modal_loading_1, .mailpoet_modal_loading_1
+.mailpoet_modal_loading_1, .mailpoet_modal_loading_1
   animation-delay(0.39s)
 
-#mailpoet_modal_loading_2, .mailpoet_modal_loading_2
+.mailpoet_modal_loading_2, .mailpoet_modal_loading_2
   animation-delay(0.9099999999999999s)
 
-#mailpoet_modal_loading_3, .mailpoet_modal_loading_3
+.mailpoet_modal_loading_3, .mailpoet_modal_loading_3
   animation-delay(1.1700000000000002s)
 
 @keyframes bounce_mailpoet_modal_loading

assets/css/src/settings.styl

@@ -1,6 +1,6 @@
 #mailpoet_settings
   // common
-  .mailpoet_panel
+  .mailpoet_tab_panel
     display none
 
   .form-table th

assets/js/src/common/confirm_alert.jsx

@@ -0,0 +1,72 @@
+import MailPoet from 'mailpoet';
+import PropTypes from 'prop-types';
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+class ConfirmAlert extends React.Component {
+  static propTypes = {
+    title: PropTypes.string,
+    message: PropTypes.string.isRequired,
+    cancelLabel: PropTypes.string,
+    confirmLabel: PropTypes.string,
+    onConfirm: PropTypes.func.isRequired,
+  }
+
+  static defaultProps = {
+    title: MailPoet.I18n.t('confirmTitle'),
+    cancelLabel: MailPoet.I18n.t('cancelLabel'),
+    confirmLabel: MailPoet.I18n.t('confirmLabel'),
+  }
+
+  constructor(props) {
+    super(props);
+    this.state = { show: true };
+  }
+
+  componentWillUpdate = () => {
+    if (!this.state.show) {
+      this.setState({ show: true });
+    }
+  }
+
+  onClose = () => {
+    this.setState({ show: false });
+  }
+
+  onConfirm = () => {
+    this.onClose();
+    this.props.onConfirm();
+  }
+
+  render() {
+    const { title, message, confirmLabel, cancelLabel } = this.props;
+
+    return (this.state.show &&
+      <div className="mailpoet_modal_overlay">
+        <div className="mailpoet_popup" tabIndex="-1">
+          <div className="mailpoet_popup_wrapper">
+            <button className="mailpoet_modal_close" onClick={this.onClose} />
+            {title &&
+              <div className="mailpoet_popup_title">
+                <h2>{title}</h2>
+              </div>
+            }
+            <div className="mailpoet_popup_body clearfix">
+              <p className="mailpoet_hp_email_label">{message}</p>
+              <button className="button button-secondary" onClick={this.onClose}>
+                {cancelLabel}
+              </button>
+              <button className="button button-primary" onClick={this.onConfirm}>
+                {confirmLabel}
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default function confirmAlert(props) {
+  ReactDOM.render(<ConfirmAlert {...props} />, document.getElementById('mailpoet_confirm_alert_holder'));
+}

assets/js/src/modal.js

@@ -79,21 +79,21 @@ define('modal', ['mailpoet', 'jquery'],
       renderer: 'html',
       options: {},
       templates: {
-        overlay: '<div id="mailpoet_modal_overlay" style="display:none;"></div>',
-        popup: '<div id="mailpoet_popup" tabindex="-1">' +
+        overlay: '<div id="mailpoet_modal_overlay" class="mailpoet_modal_overlay" style="display:none;"></div>',
+        popup: '<div id="mailpoet_popup" class="mailpoet_popup" tabindex="-1">' +
         '<div class="mailpoet_popup_wrapper">' +
-        '<a href="javascript:;" id="mailpoet_modal_close"></a>' +
-        '<div id="mailpoet_popup_title"><h2></h2></div>' +
+        '<a href="javascript:;" id="mailpoet_modal_close" class="mailpoet_modal_close"></a>' +
+        '<div id="mailpoet_popup_title" class="mailpoet_popup_title"><h2></h2></div>' +
         '<div class="mailpoet_popup_body clearfix"></div>' +
         '</div>' +
         '</div>',
         loading: '<div id="mailpoet_loading" class="mailpoet_loading" style="display:none;">' +
-        '<div id="mailpoet_modal_loading_1" class="mailpoet_modal_loading"></div>' +
-        '<div id="mailpoet_modal_loading_2" class="mailpoet_modal_loading"></div>' +
-        '<div id="mailpoet_modal_loading_3" class="mailpoet_modal_loading"></div>' +
+        '<div id="mailpoet_modal_loading_1" class="mailpoet_modal_loading mailpoet_modal_loading_1"></div>' +
+        '<div id="mailpoet_modal_loading_2" class="mailpoet_modal_loading mailpoet_modal_loading_2"></div>' +
+        '<div id="mailpoet_modal_loading_3" class="mailpoet_modal_loading mailpoet_modal_loading_3"></div>' +
         '</div>',
-        panel: '<div id="mailpoet_panel">' +
-        '<a href="javascript:;" id="mailpoet_modal_close"></a>' +
+        panel: '<div id="mailpoet_panel" class="mailpoet_panel">' +
+        '<a href="javascript:;" id="mailpoet_modal_close" class="mailpoet_modal_close"></a>' +
         '<div class="mailpoet_panel_wrapper" tabindex="-1">' +
         '<div class="mailpoet_panel_body clearfix"></div>' +
         '</div>' +
@@ -349,22 +349,8 @@ define('modal', ['mailpoet', 'jquery'],
         return this;
       },
       setPosition: function () {
-        var screenWidth;
-        var screenHeight;
-        var modalWidth;
-        var modalHeight;
         switch (this.options.type) {
           case 'popup':
-            screenWidth = jQuery(window).width();
-            screenHeight = jQuery(window).height();
-            modalWidth = jQuery('.mailpoet_' + this.options.type + '_wrapper').width();
-            modalHeight = jQuery('.mailpoet_' + this.options.type + '_wrapper').height();
-
-            // set position of popup depending on screen dimensions.
-            jQuery('#mailpoet_popup').css({
-              top: Math.max(48, parseInt((screenHeight / 2) - (modalHeight / 2), 10)),
-              left: Math.max(0, parseInt((screenWidth / 2) - (modalWidth / 2), 10))
-            });
             break;
           case 'panel':
             setTimeout(function () {

assets/js/src/newsletters/listings/standard.jsx

@@ -1,11 +1,11 @@
 import React from 'react';
 import createReactClass from 'create-react-class';
-import { confirmAlert } from 'react-confirm-alert';
 import classNames from 'classnames';
 import MailPoet from 'mailpoet';
 import Hooks from 'wp-js-hooks';
 import PropTypes from 'prop-types';
 
+import confirmAlert from 'common/confirm_alert.jsx';
 import Listing from 'listing/listing.jsx';
 import ListingTabs from 'newsletters/listings/tabs.jsx';
 import ListingHeading from 'newsletters/listings/heading.jsx';
@@ -113,10 +113,7 @@ const confirmEdit = (newsletter) => {
     redirectToEditing();
   } else {
     confirmAlert({
-      title: MailPoet.I18n.t('confirmTitle'),
       message: MailPoet.I18n.t('confirmEdit'),
-      confirmLabel: MailPoet.I18n.t('confirmLabel'),
-      cancelLabel: MailPoet.I18n.t('cancelLabel'),
       onConfirm: redirectToEditing,
     });
   }

assets/js/src/newsletters/templates/template_box.jsx

@@ -1,8 +1,9 @@
 import React from 'react';
 import MailPoet from 'mailpoet';
-import { confirmAlert } from 'react-confirm-alert';
 import PropTypes from 'prop-types';
 
+import confirmAlert from 'common/confirm_alert.jsx';
+
 /**
  * props = {
  *   index, id, newsletterId, name, description, thumbnail, readonly,
@@ -40,12 +41,8 @@ class TemplateBox extends React.Component {
       });
     };
     confirmAlert({
-      title: MailPoet.I18n.t('confirmTitle'),
       message: MailPoet.I18n.t('confirmTemplateDeletion').replace('%$1s', name),
-      confirmLabel: MailPoet.I18n.t('confirmLabel'),
-      cancelLabel: MailPoet.I18n.t('cancelLabel'),
       onConfirm,
-      onCancel: () => {},
     });
   }
 

assets/js/src/settings/tabs.js

@@ -60,14 +60,14 @@ define(
         jQuery('.nav-tab-wrapper a').removeClass('nav-tab-active');
 
         // hide panels & sections
-        jQuery('.mailpoet_panel, .mailpoet_section').hide();
+        jQuery('.mailpoet_tab_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();
+        if (jQuery('.mailpoet_tab_panel[data-tab="' + tab + '"]').length > 0) {
+          jQuery('.mailpoet_tab_panel[data-tab="' + tab + '"]').show();
         }
 
         // show "save settings" button

package.json

@@ -27,7 +27,6 @@
     "parsleyjs": "^2.8.1",
     "prop-types": "^15.6.2",
     "react": "^16.6.3",
-    "react-confirm-alert": "^2.0.6",
     "react-dom": "^16.6.3",
     "react-html-parser": "^2.0.2",
     "react-router-dom": "~4.3.1",

views/layout.html

@@ -11,6 +11,7 @@ jQuery('.toplevel_page_mailpoet-newsletters.menu-top-last')
 
 <!-- system notices -->
 <div id="mailpoet_notice_system" class="mailpoet_notice" style="display:none;"></div>
+<div id="mailpoet_confirm_alert_holder"></div>
 
 <!-- handlebars templates -->
 <% block templates %><% endblock %>

views/settings.html

@@ -23,27 +23,27 @@
       </h2>
 
       <!-- sending method -->
-      <div data-tab="mta" class="mailpoet_panel">
+      <div data-tab="mta" class="mailpoet_tab_panel">
         <% include 'settings/mta.html' %>
       </div>
 
        <!-- basics -->
-      <div data-tab="basics" class="mailpoet_panel">
+      <div data-tab="basics" class="mailpoet_tab_panel">
         <% include 'settings/basics.html' %>
       </div>
 
       <!-- sign-up confirmation -->
-      <div data-tab="signup" class="mailpoet_panel">
+      <div data-tab="signup" class="mailpoet_tab_panel">
         <% include 'settings/signup.html' %>
       </div>
 
      <!-- advanced -->
-      <div data-tab="advanced" class="mailpoet_panel">
+      <div data-tab="advanced" class="mailpoet_tab_panel">
         <% include 'settings/advanced.html' %>
       </div>
 
       <!-- premium -->
-      <div data-tab="premium" class="mailpoet_panel">
+      <div data-tab="premium" class="mailpoet_tab_panel">
         <% include 'settings/premium.html' %>
       </div>