vaultwarden
/
bitwarden-estensione-browser
mirror of https://github.com/bitwarden/browser
1
0
Fork 0
Code Issues 1 Releases Wiki Activity

sweetalert: ported to sweetalert2 and simplified code. (#465) 

No styling changes besides making the "primary" button-text bold (aligned with desktop app)
This commit is contained in:
MartB 2020-03-02 19:52:09 +01:00 committed by GitHub
parent c3407ac35a
commit 0b5a74aa9f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 64 additions and 113 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
gulpfile.js
View File

@ -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;

38
package-lock.json generated
View File

@ -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",

4
package.json
View File

@ -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",

7
src/app/app.component.ts
View File

@ -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);
}
}
});

51
src/scss/plugins.scss
View File

@ -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;
}

62
src/services/webPlatformUtils.service.ts
View File

@ -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 ? `<i class="swal-custom-icon fa ${iconClasses}"></i>` : 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) {

2
tsconfig.json
View File

@ -13,7 +13,7 @@
],
"allowJs": true,
"sourceMap": true,
"types": [],
"types": ["sweetalert2"],
"baseUrl": ".",
"paths": {
"tldjs": [