From 4019e177f69c1bd1bb98c8767a75d41f78bc8c3e Mon Sep 17 00:00:00 2001 From: Scott Cooper Date: Wed, 13 Mar 2019 23:13:13 -0700 Subject: [PATCH] feat: rename default toastClass from .toast to .ngx-toastr (#632) * feat: rename default toastClass from .toast to .ngx-toastr BREAKING CHANGE: any styles for .toast will need to be renamed or pass `toastClass: 'toast'` to `ToastrModule.forRoot()` * docs: update readme to match new default ngx-toastr --- README.md | 2 +- e2e/src/app.po.ts | 6 +++--- src/lib/toastr-bs4-alert.scss | 8 ++++---- src/lib/toastr-old.css | 28 ++++++++++++++-------------- src/lib/toastr.css | 18 +++++++++--------- src/lib/toastr/toastr-config.ts | 2 +- 6 files changed, 32 insertions(+), 32 deletions(-) diff --git a/README.md b/README.md index 9b973313..99e8bb31 100644 --- a/README.md +++ b/README.md @@ -141,7 +141,7 @@ Passed to `ToastrService.success/error/warning/info/show()` | enableHtml | boolean | false | Allow html in message | | progressBar | boolean | false | Show progress bar | | progressAnimation | `'decreasing' \| 'increasing'` | 'decreasing' | Changes the animation of the progress bar. | -| toastClass | string | 'toast' | Class on toast | +| toastClass | string | 'ngx-toastr' | Class on toast | | positionClass | string | 'toast-top-right' | Class on toast container | | titleClass | string | 'toast-title' | Class inside toast on title | | messageClass | string | 'toast-message' | Class inside toast on message | diff --git a/e2e/src/app.po.ts b/e2e/src/app.po.ts index c044d998..ba92da67 100644 --- a/e2e/src/app.po.ts +++ b/e2e/src/app.po.ts @@ -21,13 +21,13 @@ export class ToastrPage { } waitForToast() { return browser - .wait(until.elementLocated(by.className('toast')), 500, 'not found') + .wait(until.elementLocated(by.className('ngx-toastr')), 500, 'not found') .then((el) => { return browser.wait(until.elementIsVisible(el), 5000, 'not found'); }); } waitForToastDisappear(timeout) { - const toast = by.className('toast'); + const toast = by.className('ngx-toastr'); return browser .wait(until.elementLocated(toast), 500, 'not found') .then((el) => { @@ -35,7 +35,7 @@ export class ToastrPage { }); } getToast() { - return browser.findElement(by.className('toast')); + return browser.findElement(by.className('ngx-toastr')); } clickShowToast() { return element.all(by.css('button')).get(0).click(); diff --git a/src/lib/toastr-bs4-alert.scss b/src/lib/toastr-bs4-alert.scss index e771458b..05a27302 100644 --- a/src/lib/toastr-bs4-alert.scss +++ b/src/lib/toastr-bs4-alert.scss @@ -59,7 +59,7 @@ position: fixed; z-index: 999999; - .toast { + .ngx-toastr { @include border-radius($alert-border-radius); position: relative; overflow: hidden; @@ -208,7 +208,7 @@ // Responsive Design @media all and (max-width: 240px) { - .toast-container .toast.div { + .toast-container .ngx-toastr.div { padding: 8px 8px 8px 50px; width: 11em; } @@ -218,7 +218,7 @@ } } @media all and (min-width: 241px) and (max-width: 480px) { - .toast-container .toast.div { + .toast-container .ngx-toastr.div { padding: 8px 8px 8px 50px; width: 18em; } @@ -228,7 +228,7 @@ } } @media all and (min-width: 481px) and (max-width: 768px) { - .toast-container .toast.div { + .toast-container .ngx-toastr.div { padding: 15px 15px 15px 50px; width: 25em; } diff --git a/src/lib/toastr-old.css b/src/lib/toastr-old.css index c5e3e4bb..44c1e2cd 100644 --- a/src/lib/toastr-old.css +++ b/src/lib/toastr-old.css @@ -90,7 +90,7 @@ button.toast-close-button { #toast-container * { box-sizing: border-box; } -#toast-container .toast { +#toast-container .ngx-toastr { position: relative; overflow: hidden; margin: 0 0 6px; @@ -102,36 +102,36 @@ button.toast-close-button { box-shadow: 0 0 12px #999999; color: #FFFFFF; } -#toast-container .toast:hover { +#toast-container .ngx-toastr:hover { box-shadow: 0 0 12px #000000; opacity: 1; cursor: pointer; } -#toast-container .toast.toast-info { +#toast-container .ngx-toastr.toast-info { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGwSURBVEhLtZa9SgNBEMc9sUxxRcoUKSzSWIhXpFMhhYWFhaBg4yPYiWCXZxBLERsLRS3EQkEfwCKdjWJAwSKCgoKCcudv4O5YLrt7EzgXhiU3/4+b2ckmwVjJSpKkQ6wAi4gwhT+z3wRBcEz0yjSseUTrcRyfsHsXmD0AmbHOC9Ii8VImnuXBPglHpQ5wwSVM7sNnTG7Za4JwDdCjxyAiH3nyA2mtaTJufiDZ5dCaqlItILh1NHatfN5skvjx9Z38m69CgzuXmZgVrPIGE763Jx9qKsRozWYw6xOHdER+nn2KkO+Bb+UV5CBN6WC6QtBgbRVozrahAbmm6HtUsgtPC19tFdxXZYBOfkbmFJ1VaHA1VAHjd0pp70oTZzvR+EVrx2Ygfdsq6eu55BHYR8hlcki+n+kERUFG8BrA0BwjeAv2M8WLQBtcy+SD6fNsmnB3AlBLrgTtVW1c2QN4bVWLATaIS60J2Du5y1TiJgjSBvFVZgTmwCU+dAZFoPxGEEs8nyHC9Bwe2GvEJv2WXZb0vjdyFT4Cxk3e/kIqlOGoVLwwPevpYHT+00T+hWwXDf4AJAOUqWcDhbwAAAAASUVORK5CYII=") !important; } -#toast-container .toast.toast-error { +#toast-container .ngx-toastr.toast-error { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAHOSURBVEhLrZa/SgNBEMZzh0WKCClSCKaIYOED+AAKeQQLG8HWztLCImBrYadgIdY+gIKNYkBFSwu7CAoqCgkkoGBI/E28PdbLZmeDLgzZzcx83/zZ2SSXC1j9fr+I1Hq93g2yxH4iwM1vkoBWAdxCmpzTxfkN2RcyZNaHFIkSo10+8kgxkXIURV5HGxTmFuc75B2RfQkpxHG8aAgaAFa0tAHqYFfQ7Iwe2yhODk8+J4C7yAoRTWI3w/4klGRgR4lO7Rpn9+gvMyWp+uxFh8+H+ARlgN1nJuJuQAYvNkEnwGFck18Er4q3egEc/oO+mhLdKgRyhdNFiacC0rlOCbhNVz4H9FnAYgDBvU3QIioZlJFLJtsoHYRDfiZoUyIxqCtRpVlANq0EU4dApjrtgezPFad5S19Wgjkc0hNVnuF4HjVA6C7QrSIbylB+oZe3aHgBsqlNqKYH48jXyJKMuAbiyVJ8KzaB3eRc0pg9VwQ4niFryI68qiOi3AbjwdsfnAtk0bCjTLJKr6mrD9g8iq/S/B81hguOMlQTnVyG40wAcjnmgsCNESDrjme7wfftP4P7SP4N3CJZdvzoNyGq2c/HWOXJGsvVg+RA/k2MC/wN6I2YA2Pt8GkAAAAASUVORK5CYII=") !important; } -#toast-container .toast.toast-success { +#toast-container .ngx-toastr.toast-success { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADsSURBVEhLY2AYBfQMgf///3P8+/evAIgvA/FsIF+BavYDDWMBGroaSMMBiE8VC7AZDrIFaMFnii3AZTjUgsUUWUDA8OdAH6iQbQEhw4HyGsPEcKBXBIC4ARhex4G4BsjmweU1soIFaGg/WtoFZRIZdEvIMhxkCCjXIVsATV6gFGACs4Rsw0EGgIIH3QJYJgHSARQZDrWAB+jawzgs+Q2UO49D7jnRSRGoEFRILcdmEMWGI0cm0JJ2QpYA1RDvcmzJEWhABhD/pqrL0S0CWuABKgnRki9lLseS7g2AlqwHWQSKH4oKLrILpRGhEQCw2LiRUIa4lwAAAABJRU5ErkJggg==") !important; } -#toast-container .toast.toast-warning { +#toast-container .ngx-toastr.toast-warning { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGYSURBVEhL5ZSvTsNQFMbXZGICMYGYmJhAQIJAICYQPAACiSDB8AiICQQJT4CqQEwgJvYASAQCiZiYmJhAIBATCARJy+9rTsldd8sKu1M0+dLb057v6/lbq/2rK0mS/TRNj9cWNAKPYIJII7gIxCcQ51cvqID+GIEX8ASG4B1bK5gIZFeQfoJdEXOfgX4QAQg7kH2A65yQ87lyxb27sggkAzAuFhbbg1K2kgCkB1bVwyIR9m2L7PRPIhDUIXgGtyKw575yz3lTNs6X4JXnjV+LKM/m3MydnTbtOKIjtz6VhCBq4vSm3ncdrD2lk0VgUXSVKjVDJXJzijW1RQdsU7F77He8u68koNZTz8Oz5yGa6J3H3lZ0xYgXBK2QymlWWA+RWnYhskLBv2vmE+hBMCtbA7KX5drWyRT/2JsqZ2IvfB9Y4bWDNMFbJRFmC9E74SoS0CqulwjkC0+5bpcV1CZ8NMej4pjy0U+doDQsGyo1hzVJttIjhQ7GnBtRFN1UarUlH8F3xict+HY07rEzoUGPlWcjRFRr4/gChZgc3ZL2d8oAAAAASUVORK5CYII=") !important; } -#toast-container.toast-top-center .toast, -#toast-container.toast-bottom-center .toast { +#toast-container.toast-top-center .ngx-toastr, +#toast-container.toast-bottom-center .ngx-toastr { width: 300px; margin-left: auto; margin-right: auto; } -#toast-container.toast-top-full-width .toast, -#toast-container.toast-bottom-full-width .toast { +#toast-container.toast-top-full-width .ngx-toastr, +#toast-container.toast-bottom-full-width .ngx-toastr { width: 96%; margin-left: auto; margin-right: auto; } -.toast { +.ngx-toastr { background-color: #030303; pointer-events: auto; } @@ -157,7 +157,7 @@ button.toast-close-button { } /*Responsive Design*/ @media all and (max-width: 240px) { - #toast-container .toast.div { + #toast-container .ngx-toastr.div { padding: 8px 8px 8px 50px; width: 11em; } @@ -167,7 +167,7 @@ button.toast-close-button { } } @media all and (min-width: 241px) and (max-width: 480px) { - #toast-container .toast.div { + #toast-container .ngx-toastr.div { padding: 8px 8px 8px 50px; width: 18em; } @@ -177,7 +177,7 @@ button.toast-close-button { } } @media all and (min-width: 481px) and (max-width: 768px) { - #toast-container .toast.div { + #toast-container .ngx-toastr.div { padding: 15px 15px 15px 50px; width: 25em; } diff --git a/src/lib/toastr.css b/src/lib/toastr.css index f7d295e4..822638ca 100644 --- a/src/lib/toastr.css +++ b/src/lib/toastr.css @@ -93,7 +93,7 @@ button.toast-close-button { .toast-container * { box-sizing: border-box; } -.toast-container .toast { +.toast-container .ngx-toastr { position: relative; overflow: hidden; margin: 0 0 6px; @@ -106,7 +106,7 @@ button.toast-close-button { box-shadow: 0 0 12px #999999; color: #FFFFFF; } -.toast-container .toast:hover { +.toast-container .ngx-toastr:hover { box-shadow: 0 0 12px #000000; opacity: 1; cursor: pointer; @@ -127,14 +127,14 @@ button.toast-close-button { .toast-warning { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512' width='576' height='512'%3E%3Cpath fill='rgb(255,255,255)' d='M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937 0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154 0l239.94 416.028zM288 354c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z'/%3E%3C/svg%3E"); } -.toast-container.toast-top-center .toast, -.toast-container.toast-bottom-center .toast { +.toast-container.toast-top-center .ngx-toastr, +.toast-container.toast-bottom-center .ngx-toastr { width: 300px; margin-left: auto; margin-right: auto; } -.toast-container.toast-top-full-width .toast, -.toast-container.toast-bottom-full-width .toast { +.toast-container.toast-top-full-width .ngx-toastr, +.toast-container.toast-bottom-full-width .ngx-toastr { width: 96%; margin-left: auto; margin-right: auto; @@ -165,7 +165,7 @@ button.toast-close-button { } /* Responsive Design */ @media all and (max-width: 240px) { - .toast-container .toast.div { + .toast-container .ngx-toastr.div { padding: 8px 8px 8px 50px; width: 11em; } @@ -175,7 +175,7 @@ button.toast-close-button { } } @media all and (min-width: 241px) and (max-width: 480px) { - .toast-container .toast.div { + .toast-container .ngx-toastr.div { padding: 8px 8px 8px 50px; width: 18em; } @@ -185,7 +185,7 @@ button.toast-close-button { } } @media all and (min-width: 481px) and (max-width: 768px) { - .toast-container .toast.div { + .toast-container .ngx-toastr.div { padding: 15px 15px 15px 50px; width: 25em; } diff --git a/src/lib/toastr/toastr-config.ts b/src/lib/toastr/toastr-config.ts index 9ea6a7c8..6cdbdd02 100644 --- a/src/lib/toastr/toastr-config.ts +++ b/src/lib/toastr/toastr-config.ts @@ -214,7 +214,7 @@ export const DefaultNoComponentGlobalConfig: GlobalConfig = { extendedTimeOut: 1000, enableHtml: false, progressBar: false, - toastClass: 'toast', + toastClass: 'ngx-toastr', positionClass: 'toast-top-right', titleClass: 'toast-title', messageClass: 'toast-message',