From fdd16b3ee33a84fcf88439dee9729f0dad25ffae Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jan=20Jakes=CC=8C?= Date: Wed, 16 Jan 2019 14:40:20 +0100 Subject: [PATCH 01/16] Make modal white, add border radius & shadow [MAILPOET-1510] --- assets/css/src/modal.styl | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/assets/css/src/modal.styl b/assets/css/src/modal.styl index c794b9537e..b5f4cbe84a 100644 --- a/assets/css/src/modal.styl +++ b/assets/css/src/modal.styl @@ -1,8 +1,7 @@ modal_title_color = #cfcfcf -modal_title_background_color = #222 modal_highlight_background_color = #f1f1f1 -modal_content_background_color = #f0f0f0 -overlay_background_color = alpha(#000, 60%) +modal_background_color = #fff +overlay_background_color = rgba(0, 0, 0, 0.6) // hide scrollbars on background when a modal window opened body.mailpoet_modal_opened @@ -48,12 +47,14 @@ body.mailpoet_modal_opened margin: auto .mailpoet_popup_wrapper - background-color: modal_content_background_color + background-color: modal_background_color overflow: hidden position: relative width: 100% z-index: 0 height: 96% + border-radius: 4px + box-shadow: 1px 2px 4px #343434 .mailpoet_overlay_hidden .mailpoet_popup_wrapper border: 1px solid #333 @@ -115,7 +116,6 @@ body.mailpoet_modal_opened .mailpoet_panel_title h2 color: modal_title_color - background-color: modal_title_background_color border-left: 1px solid #444 border-right: 1px solid #444 font-size: 1em From 390a376829d642b680835cc156e64a87d53de85e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jan=20Jakes=CC=8C?= Date: Wed, 16 Jan 2019 14:47:26 +0100 Subject: [PATCH 02/16] Use larger spacing in modal popup [MAILPOET-1510] --- assets/css/src/modal.styl | 19 ++++++++++++++++++- assets/js/src/modal.js | 23 +++++++++++++++-------- 2 files changed, 33 insertions(+), 9 deletions(-) diff --git a/assets/css/src/modal.styl b/assets/css/src/modal.styl index b5f4cbe84a..1c6426f42a 100644 --- a/assets/css/src/modal.styl +++ b/assets/css/src/modal.styl @@ -1,6 +1,10 @@ modal_title_color = #cfcfcf modal_highlight_background_color = #f1f1f1 modal_background_color = #fff +modal_popup_margin = 30px +modal_popup_margin_mobile = 10px +modal_popup_padding = 30px +modal_popup_padding_mobile = 12px overlay_background_color = rgba(0, 0, 0, 0.6) // hide scrollbars on background when a modal window opened @@ -21,6 +25,8 @@ body.mailpoet_modal_opened display: flex align-items: center justify-content: center + padding: modal_popup_margin + box-sizing: border-box .mailpoet_modal_highlight pointer-events: none @@ -44,6 +50,7 @@ body.mailpoet_modal_opened // modal popup .mailpoet_popup z-index: 25 + max-width: 100% margin: auto .mailpoet_popup_wrapper @@ -55,6 +62,8 @@ body.mailpoet_modal_opened height: 96% border-radius: 4px box-shadow: 1px 2px 4px #343434 + box-sizing: border-box + padding: modal_popup_padding .mailpoet_overlay_hidden .mailpoet_popup_wrapper border: 1px solid #333 @@ -75,7 +84,6 @@ body.mailpoet_modal_opened font-family: "Lucida Grande", Verdana, Arial, sans-serif .mailpoet_popup_body - padding: 10px 10px 10px 10px height: 92% .button + .button @@ -166,6 +174,15 @@ body.mailpoet_modal_opened text-align: right @media screen and (max-width: 782px) + .mailpoet_modal_overlay + padding: modal_popup_margin_mobile + + .mailpoet_popup + width: 100% + + .mailpoet_popup_wrapper + padding: modal_popup_padding_mobile + .mailpoet_modal_overlay.mailpoet_panel_overlay top: 46px diff --git a/assets/js/src/modal.js b/assets/js/src/modal.js index ec810499e3..18dbc415ec 100644 --- a/assets/js/src/modal.js +++ b/assets/js/src/modal.js @@ -312,14 +312,21 @@ define('modal', ['mailpoet', 'jquery'], switch (this.options.type) { case 'popup': // set popup dimensions - jQuery('#mailpoet_popup').css({ - width: this.options.width, - height: this.options.height - }); - // set popup wrapper height - jQuery('#mailpoet_popup_wrapper').css({ - height: this.options.height - }); + if (this.options.width && this.options.width !== 'auto') { + jQuery('#mailpoet_popup').css({ + width: this.options.width + }); + } + + if (this.options.height && this.options.height !== 'auto') { + jQuery('#mailpoet_popup_wrapper').css({ + height: this.options.height + }); + jQuery('#mailpoet_popup').css({ + height: this.options.height + }); + } + if (this.options.minWidth) { jQuery('#mailpoet_popup').css({ minWidth: this.options.minWidth }); } From 081dd0d37f6da7cd59bce35478883c72ad0e1448 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jan=20Jakes=CC=8C?= Date: Wed, 16 Jan 2019 14:59:43 +0100 Subject: [PATCH 03/16] Make modal popup title a simple heading [MAILPOET-1510] --- assets/css/src/modal.styl | 16 +++------------- 1 file changed, 3 insertions(+), 13 deletions(-) diff --git a/assets/css/src/modal.styl b/assets/css/src/modal.styl index 1c6426f42a..5a07dea89c 100644 --- a/assets/css/src/modal.styl +++ b/assets/css/src/modal.styl @@ -68,20 +68,10 @@ body.mailpoet_modal_opened .mailpoet_overlay_hidden .mailpoet_popup_wrapper border: 1px solid #333 -.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 - color: modal_title_color - font-size: 12px - font-weight: normal - margin: 6px 0 0 10px - padding: 0 - font-family: "Lucida Grande", Verdana, Arial, sans-serif + font-size: 23px; + font-weight: 600; + line-height: 29px; .mailpoet_popup_body height: 92% From dd2b496718948d954a0d919e00db2a7a9df89a00 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jan=20Jakes=CC=8C?= Date: Wed, 16 Jan 2019 15:01:10 +0100 Subject: [PATCH 04/16] Add new modal close icon [MAILPOET-1510] --- assets/css/src/modal.styl | 36 +++++++++++++----- .../newsletter_editor/libraryOverrides.styl | 3 ++ assets/img/modal_close_button.png | Bin 506 -> 0 bytes assets/js/src/modal.js | 9 ++++- 4 files changed, 37 insertions(+), 11 deletions(-) delete mode 100644 assets/img/modal_close_button.png diff --git a/assets/css/src/modal.styl b/assets/css/src/modal.styl index 5a07dea89c..9723b8d1cb 100644 --- a/assets/css/src/modal.styl +++ b/assets/css/src/modal.styl @@ -5,6 +5,7 @@ modal_popup_margin = 30px modal_popup_margin_mobile = 10px modal_popup_padding = 30px modal_popup_padding_mobile = 12px +modal_close_button_size = 23px overlay_background_color = rgba(0, 0, 0, 0.6) // hide scrollbars on background when a modal window opened @@ -72,6 +73,7 @@ body.mailpoet_modal_opened font-size: 23px; font-weight: 600; line-height: 29px; + margin: 0 (modal_close_button_size + 20) 0 0 .mailpoet_popup_body height: 92% @@ -128,24 +130,33 @@ body.mailpoet_modal_opened // modal button .mailpoet_modal_close - background: url(../img/modal_close_button.png) 7px 7px no-repeat - border: 0 cursor: pointer - height: 30px + position: absolute overflow: hidden padding: 0 - position: absolute - width: 30px z-index: 2 outline: 0 none + svg + opacity: .5 + stroke: #979797 + + &:hover + stroke: #636363 + .mailpoet_popup .mailpoet_modal_close - right: 0 - top: 0 + right: modal_popup_padding + top: modal_popup_padding + width: modal_close_button_size + height: modal_close_button_size + padding: 3px 0 .mailpoet_panel .mailpoet_modal_close - right: 10px - top: 7px + width: 16px + height: 16px + right: 20px + top: 20px + padding: 2px 0 .mailpoet_modal_close:focus outline: 0 none @@ -173,6 +184,13 @@ body.mailpoet_modal_opened .mailpoet_popup_wrapper padding: modal_popup_padding_mobile + .mailpoet_popup_title h2 + margin-right: modal_close_button_size + 10 + + .mailpoet_popup .mailpoet_modal_close + top: modal_popup_padding_mobile + right: modal_popup_padding_mobile + .mailpoet_modal_overlay.mailpoet_panel_overlay top: 46px diff --git a/assets/css/src/newsletter_editor/libraryOverrides.styl b/assets/css/src/newsletter_editor/libraryOverrides.styl index 922981af99..4f7780c8ba 100644 --- a/assets/css/src/newsletter_editor/libraryOverrides.styl +++ b/assets/css/src/newsletter_editor/libraryOverrides.styl @@ -122,6 +122,9 @@ body margin: 19px padding: 0 + .mailpoet_editor_settings h3 + margin-top: 0 + .mailpoet_panel_wrapper background-color: $primary-background-color border: 1px solid $content-border-color diff --git a/assets/img/modal_close_button.png b/assets/img/modal_close_button.png deleted file mode 100644 index 6a48f46908e4e9250c52bcbfbf75ee7ec91bfbb1..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 506 zcmVp00009a7bBm000XU z000XU0RWnu7ytkPtVu*cR49>kQcG?kQ4F;G{JIrp#SF`=0s+o|_~oM{$C`=eQdzVR z5@+ZI3?R4wD2RdS_GcE&l9X!aa+PHpTdkI=5)oX3y90nZs%ngpi=s%=^#1<-s+!PC zF=k#Y7JpCws8*{rn@#)zW>&jNr6@a{PK=Sy=YojcuUZ2DoKB}CjUo~Vs)4QI`}@zw z$FaMb2{R3c{a^3DDMWK*W)TVXdcDzT5Rr&5^I$NDF>W@SUa$B1`Z}FXSF4q(0>Ey! z<0?)>VvKp7o7uy|gPDy+qb$qvJP#p+5X!Q2_luf{%H0ce`Cxs%~=eHZw$gdU_g<$61!m=W|3H z4u^<1nM?pcRaN!k&CIIW@AoH@$zrkC@ArA0&t|i#!OYS$RaLyZyX$tl?p`IDnY)J& z+}+)Ys4UAEV^I{_?Up$pf*}HcyBPu?f|~#U0+h~1(SeY-EX#0H`}X;H`2M2-fLG`q wLr~S_pSinZv(*-nuYM3*nc2*WqDYeDKaySe$u~rbLI3~&07*qoM6N<$f|#}Ix&QzG diff --git a/assets/js/src/modal.js b/assets/js/src/modal.js index 18dbc415ec..1d15e42e2d 100644 --- a/assets/js/src/modal.js +++ b/assets/js/src/modal.js @@ -4,6 +4,11 @@ define('modal', ['mailpoet', 'jquery'], 'use strict'; var MailPoet = mp; + var closeModalImage = + '' + + '' + + ''; + /** ************************************************************************* MailPoet Modal: @@ -82,7 +87,7 @@ define('modal', ['mailpoet', 'jquery'], overlay: '', popup: '
' + '
' + - '' + + '' + closeModalImage + '' + '

' + '
' + '
' + @@ -93,7 +98,7 @@ define('modal', ['mailpoet', 'jquery'], '
' + '
', panel: '
' + - '' + + '' + closeModalImage + '' + '
' + '
' + '
' + From 8fb96ee2bd0e84db9c4d279fb4c511745d0a3d7f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jan=20Jakes=CC=8C?= Date: Wed, 16 Jan 2019 15:03:03 +0100 Subject: [PATCH 05/16] Add spacing between modal title and body [MAILPOET-1510] --- assets/css/src/modal.styl | 4 ++++ assets/js/src/modal.js | 2 ++ 2 files changed, 6 insertions(+) diff --git a/assets/css/src/modal.styl b/assets/css/src/modal.styl index 9723b8d1cb..cd5de112d5 100644 --- a/assets/css/src/modal.styl +++ b/assets/css/src/modal.styl @@ -77,10 +77,14 @@ body.mailpoet_modal_opened .mailpoet_popup_body height: 92% + margin-top: 20px .button + .button margin-left: 10px +.mailpoet_popup_has_title .mailpoet_popup_body + margin-top: 30px + // modal panel .mailpoet_modal_overlay.mailpoet_panel_overlay top: 32px diff --git a/assets/js/src/modal.js b/assets/js/src/modal.js index 1d15e42e2d..3a41bb9f52 100644 --- a/assets/js/src/modal.js +++ b/assets/js/src/modal.js @@ -147,6 +147,8 @@ define('modal', ['mailpoet', 'jquery'], jQuery('#mailpoet_modal_overlay') .append(modal(this.options)); // set title + jQuery('#mailpoet_popup') + .toggleClass('mailpoet_popup_has_title', Boolean(this.options.title)); jQuery('#mailpoet_popup_title h2') .html(this.options.title); } else if (this.options.type === 'panel') { From 2fd6c0abf17f5b6dd14d834c3f1427103ef7b25b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jan=20Jakes=CC=8C?= Date: Wed, 16 Jan 2019 15:03:54 +0100 Subject: [PATCH 06/16] Fade modal popup in on load [MAILPOET-1510] --- assets/css/src/modal.styl | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/assets/css/src/modal.styl b/assets/css/src/modal.styl index cd5de112d5..cd621ddfe1 100644 --- a/assets/css/src/modal.styl +++ b/assets/css/src/modal.styl @@ -53,6 +53,13 @@ body.mailpoet_modal_opened z-index: 25 max-width: 100% margin: auto + animation: mailpoet_popup_fadein .5s + +@keyframes mailpoet_popup_fadein + from + opacity: 0 + to + opacity: 1 .mailpoet_popup_wrapper background-color: modal_background_color From bf62034b4a61a86e0a94b6ca4fa6322bd8a8d131 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jan=20Jakes=CC=8C?= Date: Wed, 16 Jan 2019 16:04:45 +0100 Subject: [PATCH 07/16] Fix wrong modal scroll when previous modal scrolled down [MAILPOET-1510] --- assets/js/src/modal.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/assets/js/src/modal.js b/assets/js/src/modal.js index 3a41bb9f52..918862afc1 100644 --- a/assets/js/src/modal.js +++ b/assets/js/src/modal.js @@ -412,6 +412,9 @@ define('modal', ['mailpoet', 'jquery'], this.focus(); } + // reset any possible scroll from previous modal + jQuery('#mailpoet_modal_overlay').scrollTop(0); + // set popup as opened this.opened = true; From affab195ca2e35540b49a8187d39d0bd6411301e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jan=20Jakes=CC=8C?= Date: Wed, 16 Jan 2019 16:35:13 +0100 Subject: [PATCH 08/16] Fix body scrolling when modal is displayed [MAILPOET-1510] --- assets/css/src/modal.styl | 3 --- assets/js/src/modal.js | 2 ++ 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/assets/css/src/modal.styl b/assets/css/src/modal.styl index cd621ddfe1..40b287deaa 100644 --- a/assets/css/src/modal.styl +++ b/assets/css/src/modal.styl @@ -45,9 +45,6 @@ body.mailpoet_modal_opened background-color: overlay_background_color !important display: flex !important -.mailpoet_modal_opened .mailpoet_modal_overlay - display: block - // modal popup .mailpoet_popup z-index: 25 diff --git a/assets/js/src/modal.js b/assets/js/src/modal.js index 918862afc1..54fbd3e146 100644 --- a/assets/js/src/modal.js +++ b/assets/js/src/modal.js @@ -458,10 +458,12 @@ define('modal', ['mailpoet', 'jquery'], }, showOverlay: function () { jQuery('#mailpoet_modal_overlay').show(); + jQuery('body').addClass('mailpoet_modal_opened'); return this; }, hideOverlay: function () { jQuery('#mailpoet_modal_overlay').hide(); + jQuery('body').removeClass('mailpoet_modal_opened'); return this; }, popup: function (opts) { From 62f69b2cdbeefe1d15e71a3b28ccdf7c4fb3d1e2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jan=20Jakes=CC=8C?= Date: Thu, 17 Jan 2019 10:57:22 +0100 Subject: [PATCH 09/16] Do not respect modal min-width on mobile [MAILPOET-1510] --- assets/css/src/modal.styl | 1 + 1 file changed, 1 insertion(+) diff --git a/assets/css/src/modal.styl b/assets/css/src/modal.styl index 40b287deaa..fbb8403371 100644 --- a/assets/css/src/modal.styl +++ b/assets/css/src/modal.styl @@ -188,6 +188,7 @@ body.mailpoet_modal_opened .mailpoet_popup width: 100% + min-width: auto !important .mailpoet_popup_wrapper padding: modal_popup_padding_mobile From 78f052e2633162d3a59beb9965e16f8bb1e8a5d3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jan=20Jakes=CC=8C?= Date: Thu, 17 Jan 2019 10:59:42 +0100 Subject: [PATCH 10/16] Use flex instead of "random" percentual heights in modal popup [MAILPOET-1510] --- assets/css/src/modal.styl | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/assets/css/src/modal.styl b/assets/css/src/modal.styl index fbb8403371..9751588920 100644 --- a/assets/css/src/modal.styl +++ b/assets/css/src/modal.styl @@ -59,12 +59,14 @@ body.mailpoet_modal_opened opacity: 1 .mailpoet_popup_wrapper + display: flex + flex-flow: column background-color: modal_background_color overflow: hidden position: relative width: 100% + height: 100% z-index: 0 - height: 96% border-radius: 4px box-shadow: 1px 2px 4px #343434 box-sizing: border-box @@ -80,7 +82,7 @@ body.mailpoet_modal_opened margin: 0 (modal_close_button_size + 20) 0 0 .mailpoet_popup_body - height: 92% + flex-grow: 1 margin-top: 20px .button + .button From 4da9a2b6fa85e579f01c70a112a78c26cfdac951 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jan=20Jakes=CC=8C?= Date: Thu, 17 Jan 2019 11:00:44 +0100 Subject: [PATCH 11/16] Adjust email previews for new modal style, use flex [MAILPOET-1510] --- assets/css/src/box.styl | 1 - assets/css/src/modal.styl | 1 + .../newsletter_editor/components/sidebar.styl | 18 ++++++++++++------ .../newsletter_editor/components/sidebar.js | 2 +- 4 files changed, 14 insertions(+), 8 deletions(-) diff --git a/assets/css/src/box.styl b/assets/css/src/box.styl index 0932c6e852..e357f2976c 100644 --- a/assets/css/src/box.styl +++ b/assets/css/src/box.styl @@ -199,7 +199,6 @@ $box-description-font-size = $box-description-line-height background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjUwMCIgaGVpZ2h0PSIxNDk0IiB2aWV3Qm94PSIwIDAgMjU2IDE1MyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCI+PHBhdGggZD0iTTIzLjc1OSAwaDIwOC4zNzhDMjQ1LjMyNSAwIDI1NiAxMC42NzUgMjU2IDIzLjg2M3Y3OS41NDFjMCAxMy4xODgtMTAuNjc1IDIzLjg2My0yMy44NjMgMjMuODYzSDE1Ny40MWwxMC4yNTcgMjUuMTE4LTQ1LjEwOS0yNS4xMThIMjMuODYzYy0xMy4xODcgMC0yMy44NjItMTAuNjc1LTIzLjg2Mi0yMy44NjNWMjMuODYzQy0uMTA0IDEwLjc4IDEwLjU3IDAgMjMuNzU5IDB6IiBmaWxsPSIjOUI1QzhGIi8+PHBhdGggZD0iTTE0LjU3OCAyMS43NWMxLjQ1Ny0xLjk3OCAzLjY0Mi0zLjAxOCA2LjU1Ni0zLjIyNiA1LjMwOC0uNDE3IDguMzI2IDIuMDggOS4wNTQgNy40OTIgMy4yMjYgMjEuNzUgNi43NjQgNDAuMTcgMTAuNTEgNTUuMjU5bDIyLjc5LTQzLjM5NWMyLjA4Mi0zLjk1NSA0LjY4NC02LjAzNiA3LjgwNi02LjI0NCA0LjU3OS0uMzEyIDcuMzg4IDIuNjAxIDguNTMzIDguNzQxIDIuNjAyIDEzLjg0IDUuOTMyIDI1LjYgOS44ODYgMzUuNTkgMi43MDYtMjYuNDMyIDcuMjg1LTQ1LjQ3NiAxMy43MzctNTcuMjM1IDEuNTYtMi45MTQgMy44NS00LjM3MSA2Ljg2OC00LjU4IDIuMzk0LS4yMDcgNC41NzkuNTIxIDYuNTU2IDIuMDgyIDEuOTc3IDEuNTYxIDMuMDE4IDMuNTM4IDMuMjI2IDUuOTMyLjEwNCAxLjg3My0uMjA4IDMuNDM0LTEuMDQgNC45OTUtNC4wNTkgNy40OTMtNy4zOSAyMC4wODUtMTAuMDk1IDM3LjU2Ny0yLjYwMSAxNi45NjMtMy41MzggMzAuMTgtMi45MTQgMzkuNjUuMjA5IDIuNi0uMjA4IDQuODktMS4yNDggNi44NjgtMS4yNSAyLjI4OS0zLjEyMiAzLjUzOC01LjUxNiAzLjc0Ni0yLjcwNi4yMDgtNS41MTUtMS4wNC04LjIyMS0zLjg1LTkuNjc4LTkuODg3LTE3LjM3OS0yNC42NjQtMjIuOTk4LTQ0LjMzMi02Ljc2NSAxMy4zMi0xMS43NiAyMy4zMS0xNC45ODYgMjkuOTctNi4xNCAxMS43Ni0xMS4zNDMgMTcuNzk2LTE1LjcxNCAxOC4xMDgtMi44MS4yMDgtNS4yMDMtMi4xODYtNy4yODQtNy4xOC01LjMwNy0xMy42MzMtMTEuMDMxLTM5Ljk2Mi0xNy4xNy03OC45ODYtLjQxNy0yLjcwNi4yMDctNS4xIDEuNjY0LTYuOTcyem0yMjMuNjM2IDE2LjMzOGMtMy43NDYtNi41NTYtOS4yNjItMTAuNTEtMTYuNjUtMTIuMDcyLTEuOTc4LS40MTYtMy44NS0uNjI0LTUuNjItLjYyNC05Ljk5IDAtMTguMTA3IDUuMjAzLTI0LjQ1NSAxNS42MS01LjQxMiA4Ljg0NS04LjExNyAxOC42MjctOC4xMTcgMjkuMzQ2IDAgOC4wMTMgMS42NjUgMTQuODgxIDQuOTk1IDIwLjYwNSAzLjc0NiA2LjU1NiA5LjI2MiAxMC41MSAxNi42NSAxMi4wNzEgMS45NzcuNDE3IDMuODUuNjI1IDUuNjIuNjI1IDEwLjA5NCAwIDE4LjIxMS01LjIwMyAyNC40NTUtMTUuNjEgNS40MTEtOC45NSA4LjExNy0xOC43MzIgOC4xMTctMjkuNDUuMTA0LTguMTE3LTEuNjY1LTE0Ljg4Mi00Ljk5NS0yMC41MDF6bS0xMy4xMTIgMjguODI2Yy0xLjQ1NyA2Ljg2OC00LjA1OSAxMS45NjctNy45MSAxNS40MDEtMy4wMTcgMi43MDYtNS44MjcgMy44NS04LjQyOCAzLjMzLTIuNDk4LS41Mi00LjU4LTIuNzA1LTYuMTQtNi43NjQtMS4yNS0zLjIyNi0xLjg3My02LjQ1Mi0xLjg3My05LjQ3IDAtMi42MDEuMjA4LTUuMjAzLjcyOC03LjU5Ni45MzctNC4yNjcgMi43MDYtOC40MyA1LjUxNS0xMi4zODQgMy40MzUtNS4xIDcuMDc3LTcuMTggMTAuODIzLTYuNDUyIDIuNDk4LjUyIDQuNTggMi43MDYgNi4xNCA2Ljc2NCAxLjI0OSAzLjIyNiAxLjg3MyA2LjQ1MiAxLjg3MyA5LjQ3IDAgMi43MDYtLjIwOCA1LjMwNy0uNzI4IDcuN3ptLTUyLjAzMy0yOC44MjZjLTMuNzQ2LTYuNTU2LTkuMzY2LTEwLjUxLTE2LjY1LTEyLjA3Mi0xLjk3Ny0uNDE2LTMuODUtLjYyNC01LjYyLS42MjQtOS45OSAwLTE4LjEwNyA1LjIwMy0yNC40NTUgMTUuNjEtNS40MTEgOC44NDUtOC4xMTcgMTguNjI3LTguMTE3IDI5LjM0NiAwIDguMDEzIDEuNjY1IDE0Ljg4MSA0Ljk5NSAyMC42MDUgMy43NDYgNi41NTYgOS4yNjIgMTAuNTEgMTYuNjUgMTIuMDcxIDEuOTc4LjQxNyAzLjg1LjYyNSA1LjYyLjYyNSAxMC4wOTQgMCAxOC4yMTEtNS4yMDMgMjQuNDU1LTE1LjYxIDUuNDEyLTguOTUgOC4xMTctMTguNzMyIDguMTE3LTI5LjQ1IDAtOC4xMTctMS42NjUtMTQuODgyLTQuOTk1LTIwLjUwMXptLTEzLjIxNiAyOC44MjZjLTEuNDU3IDYuODY4LTQuMDU5IDExLjk2Ny03LjkwOSAxNS40MDEtMy4wMTggMi43MDYtNS44MjggMy44NS04LjQzIDMuMzMtMi40OTctLjUyLTQuNTc4LTIuNzA1LTYuMTQtNi43NjQtMS4yNDgtMy4yMjYtMS44NzItNi40NTItMS44NzItOS40NyAwLTIuNjAxLjIwOC01LjIwMy43MjgtNy41OTYuOTM3LTQuMjY3IDIuNzA2LTguNDMgNS41MTYtMTIuMzg0IDMuNDM0LTUuMSA3LjA3Ni03LjE4IDEwLjgyMi02LjQ1MiAyLjQ5OC41MiA0LjU4IDIuNzA2IDYuMTQgNi43NjQgMS4yNSAzLjIyNiAxLjg3MyA2LjQ1MiAxLjg3MyA5LjQ3LjEwNSAyLjcwNi0uMjA4IDUuMzA3LS43MjggNy43eiIgZmlsbD0iI0ZGRiIvPjwvc3ZnPg==') .mailpoet_boxes_preview - margin: -10px padding: 10px 20px .mailpoet_boxes diff --git a/assets/css/src/modal.styl b/assets/css/src/modal.styl index 9751588920..acb6250f97 100644 --- a/assets/css/src/modal.styl +++ b/assets/css/src/modal.styl @@ -83,6 +83,7 @@ body.mailpoet_modal_opened .mailpoet_popup_body flex-grow: 1 + position: relative margin-top: 20px .button + .button diff --git a/assets/css/src/newsletter_editor/components/sidebar.styl b/assets/css/src/newsletter_editor/components/sidebar.styl index cc28a88398..b596c48a91 100644 --- a/assets/css/src/newsletter_editor/components/sidebar.styl +++ b/assets/css/src/newsletter_editor/components/sidebar.styl @@ -128,7 +128,15 @@ $widget-icon-width = 30px display: none /* Browser preview modal */ +.mailpoet_browser_preview_wrapper + position: absolute + width: 100% + height: 100% + display: flex + flex-direction: column + .mailpoet_browser_preview_toggle + flex: 0 1 auto height: 30px padding: 10px 0 text-align: center @@ -138,14 +146,11 @@ $widget-icon-width = 30px margin: 0 5px .mailpoet_browser_preview_container - margin: auto - height: calc(100% - 60px) + flex: 1 1 auto + position: relative + margin: 15px auto auto auto transition: width 0.5s - border: 20px solid white - border-radius: 20px box-sizing: border-box - background: white - padding: 15px 0 .mailpoet_browser_preview_container_desktop width: 100% @@ -154,4 +159,5 @@ $widget-icon-width = 30px width: 350px .mailpoet_browser_preview_iframe + box-sizing: border-box border: 1px solid #c3c3c3 diff --git a/assets/js/src/newsletter_editor/components/sidebar.js b/assets/js/src/newsletter_editor/components/sidebar.js index eea0319406..6bd059bc9e 100644 --- a/assets/js/src/newsletter_editor/components/sidebar.js +++ b/assets/js/src/newsletter_editor/components/sidebar.js @@ -270,7 +270,6 @@ define([ }); this.previewView.render(); - this.previewView.$el.css('height', '100%'); MailPoet.Modal.popup({ template: '', @@ -351,6 +350,7 @@ define([ }); Module.NewsletterPreviewView = Marionette.View.extend({ + className: 'mailpoet_browser_preview_wrapper', getTemplate: function () { return window.templates.newsletterPreview; }, events: function () { return { From 7e187f69bf751cd5352809eb2c2d3deceed84f33 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jan=20Jakes=CC=8C?= Date: Thu, 17 Jan 2019 11:01:11 +0100 Subject: [PATCH 12/16] Adjust drag & drop tutorial for new modal design [MAILPOET-1510] --- assets/css/src/in_app_announcements.styl | 4 ---- assets/js/src/newsletter_editor/tutorial.jsx | 3 ++- 2 files changed, 2 insertions(+), 5 deletions(-) diff --git a/assets/css/src/in_app_announcements.styl b/assets/css/src/in_app_announcements.styl index e3620fbd36..fa1179a66c 100644 --- a/assets/css/src/in_app_announcements.styl +++ b/assets/css/src/in_app_announcements.styl @@ -26,10 +26,6 @@ .mailpoet_drag_and_drop_tutorial text-align: center - h2 - font-size: 28px - video - margin-top: 20px .new_subscriber_notification_announcement h2 diff --git a/assets/js/src/newsletter_editor/tutorial.jsx b/assets/js/src/newsletter_editor/tutorial.jsx index 9968ac4a69..23af757d42 100644 --- a/assets/js/src/newsletter_editor/tutorial.jsx +++ b/assets/js/src/newsletter_editor/tutorial.jsx @@ -10,7 +10,8 @@ const displayTutorial = () => { return; } MailPoet.Modal.popup({ - template: `

${MailPoet.I18n.t('tutorialVideoTitle')}

`, + title: MailPoet.I18n.t('tutorialVideoTitle'), + template: `
`, onCancel: () => { MailPoet.Ajax.post({ api_version: window.mailpoet_api_version, From e6ba34faf87cd02b7c1eb2c743f39611c0d434b3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jan=20Jakes=CC=8C?= Date: Thu, 17 Jan 2019 11:14:26 +0100 Subject: [PATCH 13/16] Remove template preview padding since we can't display background at the moment [MAILPOET-1510] --- assets/css/src/box.styl | 3 --- 1 file changed, 3 deletions(-) diff --git a/assets/css/src/box.styl b/assets/css/src/box.styl index e357f2976c..77f82475b9 100644 --- a/assets/css/src/box.styl +++ b/assets/css/src/box.styl @@ -198,9 +198,6 @@ $box-description-font-size = $box-description-line-height [data-type*="woocommerce"] .mailpoet_thumbnail background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjUwMCIgaGVpZ2h0PSIxNDk0IiB2aWV3Qm94PSIwIDAgMjU2IDE1MyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCI+PHBhdGggZD0iTTIzLjc1OSAwaDIwOC4zNzhDMjQ1LjMyNSAwIDI1NiAxMC42NzUgMjU2IDIzLjg2M3Y3OS41NDFjMCAxMy4xODgtMTAuNjc1IDIzLjg2My0yMy44NjMgMjMuODYzSDE1Ny40MWwxMC4yNTcgMjUuMTE4LTQ1LjEwOS0yNS4xMThIMjMuODYzYy0xMy4xODcgMC0yMy44NjItMTAuNjc1LTIzLjg2Mi0yMy44NjNWMjMuODYzQy0uMTA0IDEwLjc4IDEwLjU3IDAgMjMuNzU5IDB6IiBmaWxsPSIjOUI1QzhGIi8+PHBhdGggZD0iTTE0LjU3OCAyMS43NWMxLjQ1Ny0xLjk3OCAzLjY0Mi0zLjAxOCA2LjU1Ni0zLjIyNiA1LjMwOC0uNDE3IDguMzI2IDIuMDggOS4wNTQgNy40OTIgMy4yMjYgMjEuNzUgNi43NjQgNDAuMTcgMTAuNTEgNTUuMjU5bDIyLjc5LTQzLjM5NWMyLjA4Mi0zLjk1NSA0LjY4NC02LjAzNiA3LjgwNi02LjI0NCA0LjU3OS0uMzEyIDcuMzg4IDIuNjAxIDguNTMzIDguNzQxIDIuNjAyIDEzLjg0IDUuOTMyIDI1LjYgOS44ODYgMzUuNTkgMi43MDYtMjYuNDMyIDcuMjg1LTQ1LjQ3NiAxMy43MzctNTcuMjM1IDEuNTYtMi45MTQgMy44NS00LjM3MSA2Ljg2OC00LjU4IDIuMzk0LS4yMDcgNC41NzkuNTIxIDYuNTU2IDIuMDgyIDEuOTc3IDEuNTYxIDMuMDE4IDMuNTM4IDMuMjI2IDUuOTMyLjEwNCAxLjg3My0uMjA4IDMuNDM0LTEuMDQgNC45OTUtNC4wNTkgNy40OTMtNy4zOSAyMC4wODUtMTAuMDk1IDM3LjU2Ny0yLjYwMSAxNi45NjMtMy41MzggMzAuMTgtMi45MTQgMzkuNjUuMjA5IDIuNi0uMjA4IDQuODktMS4yNDggNi44NjgtMS4yNSAyLjI4OS0zLjEyMiAzLjUzOC01LjUxNiAzLjc0Ni0yLjcwNi4yMDgtNS41MTUtMS4wNC04LjIyMS0zLjg1LTkuNjc4LTkuODg3LTE3LjM3OS0yNC42NjQtMjIuOTk4LTQ0LjMzMi02Ljc2NSAxMy4zMi0xMS43NiAyMy4zMS0xNC45ODYgMjkuOTctNi4xNCAxMS43Ni0xMS4zNDMgMTcuNzk2LTE1LjcxNCAxOC4xMDgtMi44MS4yMDgtNS4yMDMtMi4xODYtNy4yODQtNy4xOC01LjMwNy0xMy42MzMtMTEuMDMxLTM5Ljk2Mi0xNy4xNy03OC45ODYtLjQxNy0yLjcwNi4yMDctNS4xIDEuNjY0LTYuOTcyem0yMjMuNjM2IDE2LjMzOGMtMy43NDYtNi41NTYtOS4yNjItMTAuNTEtMTYuNjUtMTIuMDcyLTEuOTc4LS40MTYtMy44NS0uNjI0LTUuNjItLjYyNC05Ljk5IDAtMTguMTA3IDUuMjAzLTI0LjQ1NSAxNS42MS01LjQxMiA4Ljg0NS04LjExNyAxOC42MjctOC4xMTcgMjkuMzQ2IDAgOC4wMTMgMS42NjUgMTQuODgxIDQuOTk1IDIwLjYwNSAzLjc0NiA2LjU1NiA5LjI2MiAxMC41MSAxNi42NSAxMi4wNzEgMS45NzcuNDE3IDMuODUuNjI1IDUuNjIuNjI1IDEwLjA5NCAwIDE4LjIxMS01LjIwMyAyNC40NTUtMTUuNjEgNS40MTEtOC45NSA4LjExNy0xOC43MzIgOC4xMTctMjkuNDUuMTA0LTguMTE3LTEuNjY1LTE0Ljg4Mi00Ljk5NS0yMC41MDF6bS0xMy4xMTIgMjguODI2Yy0xLjQ1NyA2Ljg2OC00LjA1OSAxMS45NjctNy45MSAxNS40MDEtMy4wMTcgMi43MDYtNS44MjcgMy44NS04LjQyOCAzLjMzLTIuNDk4LS41Mi00LjU4LTIuNzA1LTYuMTQtNi43NjQtMS4yNS0zLjIyNi0xLjg3My02LjQ1Mi0xLjg3My05LjQ3IDAtMi42MDEuMjA4LTUuMjAzLjcyOC03LjU5Ni45MzctNC4yNjcgMi43MDYtOC40MyA1LjUxNS0xMi4zODQgMy40MzUtNS4xIDcuMDc3LTcuMTggMTAuODIzLTYuNDUyIDIuNDk4LjUyIDQuNTggMi43MDYgNi4xNCA2Ljc2NCAxLjI0OSAzLjIyNiAxLjg3MyA2LjQ1MiAxLjg3MyA5LjQ3IDAgMi43MDYtLjIwOCA1LjMwNy0uNzI4IDcuN3ptLTUyLjAzMy0yOC44MjZjLTMuNzQ2LTYuNTU2LTkuMzY2LTEwLjUxLTE2LjY1LTEyLjA3Mi0xLjk3Ny0uNDE2LTMuODUtLjYyNC01LjYyLS42MjQtOS45OSAwLTE4LjEwNyA1LjIwMy0yNC40NTUgMTUuNjEtNS40MTEgOC44NDUtOC4xMTcgMTguNjI3LTguMTE3IDI5LjM0NiAwIDguMDEzIDEuNjY1IDE0Ljg4MSA0Ljk5NSAyMC42MDUgMy43NDYgNi41NTYgOS4yNjIgMTAuNTEgMTYuNjUgMTIuMDcxIDEuOTc4LjQxNyAzLjg1LjYyNSA1LjYyLjYyNSAxMC4wOTQgMCAxOC4yMTEtNS4yMDMgMjQuNDU1LTE1LjYxIDUuNDEyLTguOTUgOC4xMTctMTguNzMyIDguMTE3LTI5LjQ1IDAtOC4xMTctMS42NjUtMTQuODgyLTQuOTk1LTIwLjUwMXptLTEzLjIxNiAyOC44MjZjLTEuNDU3IDYuODY4LTQuMDU5IDExLjk2Ny03LjkwOSAxNS40MDEtMy4wMTggMi43MDYtNS44MjggMy44NS04LjQzIDMuMzMtMi40OTctLjUyLTQuNTc4LTIuNzA1LTYuMTQtNi43NjQtMS4yNDgtMy4yMjYtMS44NzItNi40NTItMS44NzItOS40NyAwLTIuNjAxLjIwOC01LjIwMy43MjgtNy41OTYuOTM3LTQuMjY3IDIuNzA2LTguNDMgNS41MTYtMTIuMzg0IDMuNDM0LTUuMSA3LjA3Ni03LjE4IDEwLjgyMi02LjQ1MiAyLjQ5OC41MiA0LjU4IDIuNzA2IDYuMTQgNi43NjQgMS4yNSAzLjIyNiAxLjg3MyA2LjQ1MiAxLjg3MyA5LjQ3LjEwNSAyLjcwNi0uMjA4IDUuMzA3LS43MjggNy43eiIgZmlsbD0iI0ZGRiIvPjwvc3ZnPg==') -.mailpoet_boxes_preview - padding: 10px 20px - .mailpoet_boxes .title_and_badge display: flex From 03c2eb5730579c7efc1443a4da4345beed38cf47 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jan=20Jakes=CC=8C?= Date: Tue, 22 Jan 2019 09:33:26 +0100 Subject: [PATCH 14/16] Reduce spacing in newsletter preview modal to make it larger [MAILPOET-1510] --- assets/css/src/newsletter_editor/components/sidebar.styl | 3 +++ assets/js/src/newsletter_editor/components/sidebar.js | 4 ++-- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/assets/css/src/newsletter_editor/components/sidebar.styl b/assets/css/src/newsletter_editor/components/sidebar.styl index b596c48a91..57fdd45542 100644 --- a/assets/css/src/newsletter_editor/components/sidebar.styl +++ b/assets/css/src/newsletter_editor/components/sidebar.styl @@ -140,6 +140,9 @@ $widget-icon-width = 30px height: 30px padding: 10px 0 text-align: center + position: absolute + top: -30px + width: 100% .mailpoet_browser_preview_toggle > label display: inline-block diff --git a/assets/js/src/newsletter_editor/components/sidebar.js b/assets/js/src/newsletter_editor/components/sidebar.js index 6bd059bc9e..8fe70b9ebd 100644 --- a/assets/js/src/newsletter_editor/components/sidebar.js +++ b/assets/js/src/newsletter_editor/components/sidebar.js @@ -274,8 +274,8 @@ define([ MailPoet.Modal.popup({ template: '', element: this.previewView.$el, - width: '95%', - height: '94%', + minWidth: '95%', + height: '100%', title: MailPoet.I18n.t('newsletterPreview'), onCancel: function () { this.previewView.destroy(); From f47f7e38ae5af8f63497db2ae4e06bee91d8c5fe Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jan=20Jakes=CC=8C?= Date: Tue, 22 Jan 2019 09:33:44 +0100 Subject: [PATCH 15/16] Add device border to newsletter preview modal [MAILPOET-1510] --- .../css/src/newsletter_editor/components/sidebar.styl | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/assets/css/src/newsletter_editor/components/sidebar.styl b/assets/css/src/newsletter_editor/components/sidebar.styl index 57fdd45542..3aa02f1fee 100644 --- a/assets/css/src/newsletter_editor/components/sidebar.styl +++ b/assets/css/src/newsletter_editor/components/sidebar.styl @@ -150,10 +150,15 @@ $widget-icon-width = 30px .mailpoet_browser_preview_container flex: 1 1 auto - position: relative - margin: 15px auto auto auto + margin: 15px auto 0 auto transition: width 0.5s box-sizing: border-box + height: 100% + padding: 20px + border: 1px solid #979797 + border-radius: 20px + display: flex + flex-direction: column .mailpoet_browser_preview_container_desktop width: 100% @@ -164,3 +169,4 @@ $widget-icon-width = 30px .mailpoet_browser_preview_iframe box-sizing: border-box border: 1px solid #c3c3c3 + flex: 1 1 auto From 7ee2a7cd88945f947443025b410db67102ad2da6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jan=20Jakes=CC=8C?= Date: Tue, 22 Jan 2019 10:53:40 +0100 Subject: [PATCH 16/16] Fix iframe content sometimes rendered over border [MAILPOET-1510] --- .../src/newsletter_editor/components/sidebar.styl | 12 ++++++++++-- .../templates/components/newsletterPreview.hbs | 6 ++++-- 2 files changed, 14 insertions(+), 4 deletions(-) diff --git a/assets/css/src/newsletter_editor/components/sidebar.styl b/assets/css/src/newsletter_editor/components/sidebar.styl index 3aa02f1fee..c6697aaf19 100644 --- a/assets/css/src/newsletter_editor/components/sidebar.styl +++ b/assets/css/src/newsletter_editor/components/sidebar.styl @@ -166,7 +166,15 @@ $widget-icon-width = 30px .mailpoet_browser_preview_container_mobile width: 350px -.mailpoet_browser_preview_iframe +// fix for https://bugs.chromium.org/p/chromium/issues/detail?id=765138 +// causing border on iframe to sometimes disappear when resizing +.mailpoet_browser_preview_border + width: 100% + height: 100% box-sizing: border-box border: 1px solid #c3c3c3 - flex: 1 1 auto + +.mailpoet_browser_preview_iframe + width: calc(100% - 1px) + margin: auto + display: block diff --git a/views/newsletter/templates/components/newsletterPreview.hbs b/views/newsletter/templates/components/newsletterPreview.hbs index cfe0214f71..183087ebee 100644 --- a/views/newsletter/templates/components/newsletterPreview.hbs +++ b/views/newsletter/templates/components/newsletterPreview.hbs @@ -7,5 +7,7 @@
- -
\ No newline at end of file +
+ +
+