diff --git a/gulpfile.js b/gulpfile.js index 247a8dc6f7..0f1082f3a5 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -30,17 +30,8 @@ function version(cb) { cb(); } -// ref: https://github.com/t4t5/sweetalert/issues/890 -function fixSweetAlert(cb) { - fs.writeFileSync(paths.node_modules + 'sweetalert/typings/sweetalert.d.ts', - 'import swal, { SweetAlert } from "./core";export default swal;export as namespace swal;'); - cb(); -} - exports.clean = clean; exports.webfonts = gulp.series(clean, webfonts); exports.prebuild = gulp.series(clean, webfonts); exports.version = version; -exports.postdist = version; -exports.fixSweetAlert = fixSweetAlert; -exports.postinstall = fixSweetAlert; +exports.postdist = version; \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index d087039b31..4a763255ff 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3666,11 +3666,6 @@ "es6-symbol": "^3.1.1" } }, - "es6-object-assign": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/es6-object-assign/-/es6-object-assign-1.1.0.tgz", - "integrity": "sha1-wsNYJlYkfDnqEHyx5mUrb58kUjw=" - }, "es6-symbol": { "version": "3.1.1", "resolved": "https://registry.npmjs.org/es6-symbol/-/es6-symbol-3.1.1.tgz", @@ -4030,6 +4025,12 @@ "integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==", "dev": true }, + "emojis-list": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-3.0.0.tgz", + "integrity": "sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==", + "dev": true + }, "json5": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz", @@ -4040,13 +4041,13 @@ } }, "loader-utils": { - "version": "1.2.3", - "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.2.3.tgz", - "integrity": "sha512-fkpz8ejdnEMG3s37wGL07iSBDg99O9D5yflE9RGNH3hRdx9SOwYfnGYdZOUIZitN8E+E2vkq3MUMYMvPYl5ZZA==", + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.0.tgz", + "integrity": "sha512-qH0WSMBtn/oHuwjy/NucEgbx5dbxxnxup9s4PVXJUDHZBQY+s0NWA9rJf53RBnQZxfch7euUui7hpoAPvALZdA==", "dev": true, "requires": { "big.js": "^5.2.2", - "emojis-list": "^2.0.0", + "emojis-list": "^3.0.0", "json5": "^1.0.1" } } @@ -11264,21 +11265,10 @@ "es6-symbol": "^3.1.1" } }, - "sweetalert": { - "version": "2.1.2", - "resolved": "https://registry.npmjs.org/sweetalert/-/sweetalert-2.1.2.tgz", - "integrity": "sha512-iWx7X4anRBNDa/a+AdTmvAzQtkN1+s4j/JJRWlHpYE8Qimkohs8/XnFcWeYHH2lMA8LRCa5tj2d244If3S/hzA==", - "requires": { - "es6-object-assign": "^1.1.0", - "promise-polyfill": "^6.0.2" - }, - "dependencies": { - "promise-polyfill": { - "version": "6.1.0", - "resolved": "https://registry.npmjs.org/promise-polyfill/-/promise-polyfill-6.1.0.tgz", - "integrity": "sha1-36lpQ+qcEh/KTem1hoyznTRy4Fc=" - } - } + "sweetalert2": { + "version": "9.8.1", + "resolved": "https://registry.npmjs.org/sweetalert2/-/sweetalert2-9.8.1.tgz", + "integrity": "sha512-w+8vLSzKCZka6YMRVsPhD31teBan4v2FchX2qAQc4IYn5R6bt/EYC7yKeC2G0rCR/EksdqprnjJDxOZuMEMthA==" }, "tapable": { "version": "1.0.0", diff --git a/package.json b/package.json index ab50a1c00a..8d2de785e7 100644 --- a/package.json +++ b/package.json @@ -5,7 +5,7 @@ "sub:init": "git submodule update --init --recursive", "sub:update": "git submodule update --remote", "sub:pull": "git submodule foreach git pull origin master", - "postinstall": "npm run sub:init && gulp postinstall", + "postinstall": "npm run sub:init", "symlink:win": "rm -rf ./jslib && cmd /c mklink /J .\\jslib ..\\jslib", "symlink:mac": "npm run symlink:lin", "symlink:lin": "rm -rf ./jslib && ln -s ../jslib ./jslib", @@ -89,7 +89,7 @@ "popper.js": "1.14.4", "qrious": "4.0.2", "rxjs": "6.3.3", - "sweetalert": "2.1.2", + "sweetalert2": "^9.8.1", "web-animations-js": "2.3.1", "webcrypto-shim": "0.1.4", "whatwg-fetch": "3.0.0", diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 106c897d6e..7f19f4535e 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,6 +1,5 @@ import * as jq from 'jquery'; -import * as _swal from 'sweetalert'; -import { SweetAlert } from 'sweetalert/typings/core'; +import Swal from 'sweetalert2/src/sweetalert2.js'; import { BodyOutputType, @@ -53,8 +52,6 @@ import { ConstantsService } from 'jslib/services/constants.service'; import { RouterService } from './services/router.service'; const BroadcasterSubscriptionId = 'AppComponent'; -// Hack due to Angular 5.2 bug -const swal: SweetAlert = _swal as any; const IdleTimeout = 60000 * 10; // 10 minutes @Component({ @@ -165,7 +162,7 @@ export class AppComponent implements OnDestroy, OnInit { } if (document.querySelector('.swal-modal') != null) { - swal.close(undefined); + Swal.close(undefined); } } }); diff --git a/src/scss/plugins.scss b/src/scss/plugins.scss index 65fa73bc6e..ab9046a89c 100644 --- a/src/scss/plugins.scss +++ b/src/scss/plugins.scss @@ -1,6 +1,7 @@ $fa-font-path: "~font-awesome/fonts"; @import "~font-awesome/scss/font-awesome.scss"; @import "~angular2-toaster/toaster"; +@import "~sweetalert2/src/sweetalert2.scss"; #toast-container { &.toast-top-right { @@ -86,41 +87,31 @@ $fa-font-path: "~font-awesome/fonts"; } } -// SweetAlert +// SweetAlert2 -.swal-overlay { +.swal2-container { background-color: rgba(0,0,0,.3); } -.swal-modal { +.swal2-popup { + padding: 0; background-color: $modal-content-bg; color: $body-color; border: $modal-content-border-width solid #9a9a9a; @include border-radius($modal-content-border-radius); + width: 34em; // slightly bigger than the hardcoded 478px in v1. - .swal-icon { + .swal2-icon { margin: 15px auto 0 auto; + width: auto; + height: auto; + border: none; } - .swal-content { - margin: 0; - padding: 15px 0; + .swal2-content { + padding-bottom: 15px; font-size: $font-size-base; border-bottom: $modal-footer-border-width solid $modal-footer-border-color; - - .swal-text { - &:last-child { - margin-bottom: 0; - } - &:first-child { - margin-top: 0; - } - } - - .swal-title, .swal-text { - padding-left: 0; - padding-right: 0; - } } i.swal-custom-icon { @@ -129,36 +120,38 @@ $fa-font-path: "~font-awesome/fonts"; font-size: 35px; } - .swal-title { + .swal2-title { padding: 10px 10px 15px 10px; margin: 0; font-size: $font-size-lg; color: $body-color; } - .swal-text { + .swal2-content { font-size: $font-size-base; color: $body-color; } - .swal-footer { + .swal2-actions { padding: 15px 10px 10px 10px; margin: 0; background-color: $input-bg; @include border-radius($modal-content-border-radius); display: flex; - flex-direction: row-reverse; - justify-content: flex-end; + flex-direction: row; + justify-content: flex-start; font-size: $font-size-base; - button.swal-button { + button { + margin-left: 10px; @extend .btn; - &.swal-button--confirm { + &.swal2-confirm { @extend .btn-primary; + font-weight: bold; } - - &.swal-button--cancel { + + &.swal2-cancel { @extend .btn-outline-secondary; background-color: #ffffff; } diff --git a/src/services/webPlatformUtils.service.ts b/src/services/webPlatformUtils.service.ts index 225eaf5fdb..a2fec184fb 100644 --- a/src/services/webPlatformUtils.service.ts +++ b/src/services/webPlatformUtils.service.ts @@ -1,5 +1,4 @@ -import * as _swal from 'sweetalert'; -import { SweetAlert } from 'sweetalert/typings/core'; +import Swal, { SweetAlertIcon } from 'sweetalert2/src/sweetalert2.js'; import { DeviceType } from 'jslib/enums/deviceType'; @@ -9,9 +8,6 @@ import { PlatformUtilsService } from 'jslib/abstractions/platformUtils.service'; import { Utils } from 'jslib/misc/utils'; -// Hack due to Angular 5.2 bug -const swal: SweetAlert = _swal as any; - export class WebPlatformUtilsService implements PlatformUtilsService { identityClientId: string = 'web'; @@ -182,58 +178,42 @@ export class WebPlatformUtilsService implements PlatformUtilsService { } async showDialog(text: string, title?: string, confirmText?: string, cancelText?: string, type?: string) { - const buttons = [confirmText == null ? this.i18nService.t('ok') : confirmText]; - if (cancelText != null) { - buttons.unshift(cancelText); - } - - const contentDiv = document.createElement('div'); + let iconClasses = null; if (type != null) { - const icon = document.createElement('i'); - icon.classList.add('swal-custom-icon'); + // If you add custom types to this part, the type to SweetAlertIcon cast below needs to be changed. switch (type) { case 'success': - icon.classList.add('fa', 'fa-check', 'text-success'); + iconClasses = 'fa-check text-success'; break; case 'warning': - icon.classList.add('fa', 'fa-warning', 'text-warning'); + iconClasses = 'fa-warning text-warning'; break; case 'error': - icon.classList.add('fa', 'fa-bolt', 'text-danger'); + iconClasses = 'fa-bolt text-danger'; break; case 'info': - icon.classList.add('fa', 'fa-info-circle', 'text-info'); + iconClasses = 'fa-info-circle text-info'; break; default: break; } - if (icon.classList.contains('fa')) { - contentDiv.appendChild(icon); - } } - if (title != null) { - const titleDiv = document.createElement('div'); - titleDiv.classList.add('swal-title'); - titleDiv.appendChild(document.createTextNode(title)); - contentDiv.appendChild(titleDiv); - } - - if (text != null) { - const textDiv = document.createElement('div'); - textDiv.classList.add('swal-text'); - textDiv.appendChild(document.createTextNode(text)); - contentDiv.appendChild(textDiv); - } - - const confirmed = buttons.length > 1 ? await swal({ - content: { element: contentDiv }, - buttons: buttons, - }) : await (swal as any)({ - content: { element: contentDiv }, - button: buttons[0], + const iconHtmlStr = iconClasses != null ? `` : undefined; + const confirmed = await Swal.fire({ + heightAuto: false, + buttonsStyling: false, + icon: type as SweetAlertIcon, // required to be any of the SweetAlertIcons to output the iconHtml. + iconHtml: iconHtmlStr, + text: text, + title: title, + showCancelButton: (cancelText != null), + cancelButtonText: cancelText, + showConfirmButton: true, + confirmButtonText: confirmText == null ? this.i18nService.t('ok') : confirmText, }); - return confirmed; + + return confirmed.value; } eventTrack(action: string, label?: string, options?: any) { diff --git a/tsconfig.json b/tsconfig.json index 5a2c41001a..94f269ec34 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -13,7 +13,7 @@ ], "allowJs": true, "sourceMap": true, - "types": [], + "types": ["sweetalert2"], "baseUrl": ".", "paths": { "tldjs": [