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 497ac1c378..d57711f773 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 aecf965883..a747bacac5 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 8e5c73093b..6cc3bb80ea 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 2d0eb8b2f1..69e13cc873 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 6d45de9840..13e013c2ca 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 251408992a..a2223f47c5 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -8,7 +8,7 @@ "target": "ES2016", "allowJs": true, "sourceMap": true, - "types": [], + "types": ["sweetalert2"], "baseUrl": ".", "paths": { "tldjs": [