From 84af4ee48f2e22770376aecf27613dc65ab1d137 Mon Sep 17 00:00:00 2001 From: MartB Date: Mon, 24 Feb 2020 15:45:02 +0100 Subject: [PATCH] sweetalert: move to sweetalert2. (#388) The styling got adjusted to stay as close as possible to the original sweetalert1 styles. The only visible change is the button order, it is the same as in the web-vault now (OK - CANCEL instead of CANCEL - OK) - Removed old postinstall gulp hack - Added tsconfig type definition for sweetalert2 module typing. --- gulpfile.js | 11 +--- package-lock.json | 22 ++------ package.json | 4 +- src/app/accounts/settings.component.ts | 21 +++++--- src/scss/plugins.scss | 69 +++++++++++++++++--------- tsconfig.json | 2 +- 6 files changed, 68 insertions(+), 61 deletions(-) diff --git a/gulpfile.js b/gulpfile.js index 497ac1c3..d57711f7 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -29,16 +29,7 @@ function cleanupAotIssue() { return del(['./node_modules/@types/uglify-js/node_modules/source-map/source-map.d.ts']); } -// 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.cleanupAotIssue = cleanupAotIssue; exports.webfonts = gulp.series(clean, webfonts); -exports['prebuild:renderer'] = gulp.parallel(webfonts, cleanupAotIssue); -exports.fixSweetAlert = fixSweetAlert; -exports.postinstall = fixSweetAlert; +exports['prebuild:renderer'] = gulp.parallel(webfonts, cleanupAotIssue); \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index aecf9658..a747baca 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5235,11 +5235,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", @@ -11363,11 +11358,6 @@ "integrity": "sha1-mEcocL8igTL8vdhoEputEsPAKeM=", "dev": true }, - "promise-polyfill": { - "version": "6.1.0", - "resolved": "https://registry.npmjs.org/promise-polyfill/-/promise-polyfill-6.1.0.tgz", - "integrity": "sha1-36lpQ+qcEh/KTem1hoyznTRy4Fc=" - }, "prr": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/prr/-/prr-1.0.1.tgz", @@ -12799,14 +12789,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" - } + "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.1.0", diff --git a/package.json b/package.json index 8e5c7309..6cc3bb80 100644 --- a/package.json +++ b/package.json @@ -22,7 +22,7 @@ "sub:update": "git submodule update --remote", "sub:pull": "git submodule foreach git pull origin master", "sub:commit": "npm run sub:pull && git commit -am \"update submodule\"", - "postinstall": "./node_modules/.bin/electron-rebuild && npm run sub:init && gulp postinstall", + "postinstall": "./node_modules/.bin/electron-rebuild && 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", @@ -285,7 +285,7 @@ "nord": "0.2.1", "papaparse": "4.6.0", "rxjs": "6.3.3", - "sweetalert": "2.1.2", + "sweetalert2": "^9.8.1", "zone.js": "0.8.28", "zxcvbn": "4.4.2" } diff --git a/src/app/accounts/settings.component.ts b/src/app/accounts/settings.component.ts index 2d0eb8b2..69e13cc8 100644 --- a/src/app/accounts/settings.component.ts +++ b/src/app/accounts/settings.component.ts @@ -5,7 +5,7 @@ import { import { ToasterService } from 'angular2-toaster'; import { Angulartics2 } from 'angulartics2'; -import swal from 'sweetalert'; +import Swal from 'sweetalert2/src/sweetalert2.js'; import { DeviceType } from 'jslib/enums/deviceType'; @@ -136,19 +136,28 @@ export class SettingsComponent implements OnInit { checkboxText.appendChild(restartText); label.innerHTML = ''; label.appendChild(checkboxText); - div.innerHTML = '${this.i18nService.t('setYourPinCode')}` + + ''; + (div.querySelector('#pin-val') as HTMLInputElement).placeholder = this.i18nService.t('pin'); div.appendChild(label); - const submitted = await swal({ + const submitted = await Swal.fire({ text: this.i18nService.t('setYourPinCode'), - content: { element: div }, - buttons: [this.i18nService.t('cancel'), this.i18nService.t('submit')], + html: div, + + showCancelButton: true, + cancelButtonText: this.i18nService.t('cancel'), + showConfirmButton: true, + confirmButtonText: this.i18nService.t('submit'), }); + let pin: string = null; let masterPassOnRestart: boolean = null; - if (submitted) { + if (submitted.value) { pin = (document.getElementById('pin-val') as HTMLInputElement).value; masterPassOnRestart = (document.getElementById('master-pass-restart') as HTMLInputElement).checked; } diff --git a/src/scss/plugins.scss b/src/scss/plugins.scss index 6d45de98..13e013c2 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"; @import "variables.scss"; @@ -96,18 +97,22 @@ $fa-font-path: "~font-awesome/fonts"; } } -// SweetAlert +// SweetAlert2 -.swal-modal { +.swal2-popup { border-radius: $border-radius; + padding: 0; + width: 34em; @include themify($themes) { background-color: themed('backgroundColorAlt'); color: themed('textColor'); } - .swal-content { + .swal2-content { + padding: 20px 20px 15px; font-size: $font-size-base; + color: inherit; label.checkbox { margin-top: 10px; @@ -119,9 +124,34 @@ $fa-font-path: "~font-awesome/fonts"; margin: 3px 5px 0 1px; } } + + .swal2-input, .swal2-textarea { + border: 1px solid #000000; + border-radius: $border-radius; + margin-bottom: 0; + + // Inherit theme font-size + font-size: inherit; + + // Sweetalert 1 did not have box-shadow + &:focus { + box-shadow: none; + } + @include themify($themes) { + border-color: themed('inputBorderColor'); + color: themed('textColor'); + background-color: themed('inputBackgroundColor'); + } + &::-webkit-input-placeholder { + @include themify($themes) { + color: themed('inputPlaceholderColor'); + } + } + } } - .swal-text { + .swal2-text { + text-align: left; // sweetalert1 behaviour font-size: $font-size-base; @include themify($themes) { @@ -129,30 +159,16 @@ $fa-font-path: "~font-awesome/fonts"; } } - > .swal-text:first-child { + > .swal2-text:first-child { margin-top: 20px; } - .swal-content__input, .swal-content__textarea { - border: 1px solid #000000; - border-radius: $border-radius; - @include themify($themes) { - border-color: themed('inputBorderColor'); - color: themed('textColor'); - background-color: themed('inputBackgroundColor'); - } - &::-webkit-input-placeholder { - @include themify($themes) { - color: themed('inputPlaceholderColor'); - } - } - } - - .swal-footer { - padding: 15px 10px 10px 10px; + .swal2-actions { + padding: 0 10px 10px 10px; // 0 due to padding to content being 15px margin: 0; + justify-content: flex-end; - .swal-button { + .swal2-styled { @extend .btn; &:focus { @@ -160,7 +176,12 @@ $fa-font-path: "~font-awesome/fonts"; } } - .swal-button--confirm { + .swal2-confirm { + // Overwrite border-left and border-right-color + @include themify($themes) { + border-color: themed('buttonBorderColor') !important; + } + @extend .btn.primary; } } diff --git a/tsconfig.json b/tsconfig.json index 25140899..a2223f47 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -8,7 +8,7 @@ "target": "ES2016", "allowJs": true, "sourceMap": true, - "types": [], + "types": ["sweetalert2"], "baseUrl": ".", "paths": { "tldjs": [