mirror of
https://github.com/bitwarden/browser.git
synced 2024-11-23 11:56:00 +01:00
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.
This commit is contained in:
MartB
GitHub
parent
b2c67f789e
commit
84af4ee48f
11
gulpfile.js
11
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);
|
||||
22
package-lock.json
generated
22
package-lock.json
generated
@ -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",
|
||||
|
||||
@ -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"
|
||||
}
|
||||
|
||||
@ -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 = '<input type="checkbox" id="master-pass-restart" checked>';
|
||||
label.appendChild(checkboxText);
|
||||
div.innerHTML = '<input type="text" class="swal-content__input" id="pin-val" autocomplete="off" ' +
|
||||
|
||||
div.innerHTML =
|
||||
`<div class="swal2-text">${this.i18nService.t('setYourPinCode')}</div>` +
|
||||
'<input type="text" class="swal2-input" id="pin-val" autocomplete="off" ' +
|
||||
'autocapitalize="none" autocorrect="none" spellcheck="false" inputmode="verbatim">';
|
||||
|
||||
(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;
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
"target": "ES2016",
|
||||
"allowJs": true,
|
||||
"sourceMap": true,
|
||||
"types": [],
|
||||
"types": ["sweetalert2"],
|
||||
"baseUrl": ".",
|
||||
"paths": {
|
||||
"tldjs": [
|
||||
|
||||
Loading…
Reference in New Issue
Block a user