bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2025-12-14 15:23:33 +00:00
Code Issues Releases Wiki Activity

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

Browse Source 
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
7 changed files with 64 additions and 113 deletions
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(); 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.clean = clean;
exports.webfonts = gulp.series(clean, webfonts); exports.webfonts = gulp.series(clean, webfonts);
exports.prebuild = gulp.series(clean, webfonts); exports.prebuild = gulp.series(clean, webfonts);
exports.version = version; exports.version = version;
exports.postdist = 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-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": { "es6-symbol": {
"version": "3.1.1", "version": "3.1.1",
"resolved": "https://registry.npmjs.org/es6-symbol/-/es6-symbol-3.1.1.tgz", "resolved": "https://registry.npmjs.org/es6-symbol/-/es6-symbol-3.1.1.tgz",
@@ -4030,6 +4025,12 @@
"integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==", "integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==",
"dev": true "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": { "json5": {
"version": "1.0.1", "version": "1.0.1",
"resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz", "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz",
@@ -4040,13 +4041,13 @@
} }
}, },
"loader-utils": { "loader-utils": {
"version": "1.2.3", "version": "1.4.0",
"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.2.3.tgz", "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.0.tgz",
"integrity": "sha512-fkpz8ejdnEMG3s37wGL07iSBDg99O9D5yflE9RGNH3hRdx9SOwYfnGYdZOUIZitN8E+E2vkq3MUMYMvPYl5ZZA==", "integrity": "sha512-qH0WSMBtn/oHuwjy/NucEgbx5dbxxnxup9s4PVXJUDHZBQY+s0NWA9rJf53RBnQZxfch7euUui7hpoAPvALZdA==",
"dev": true, "dev": true,
"requires": { "requires": {
"big.js": "^5.2.2", "big.js": "^5.2.2",
"emojis-list": "^2.0.0", "emojis-list": "^3.0.0",
"json5": "^1.0.1" "json5": "^1.0.1"
} }
} }
@@ -11264,21 +11265,10 @@
"es6-symbol": "^3.1.1" "es6-symbol": "^3.1.1"
} }
}, },
"sweetalert": { "sweetalert2": {
"version": "2.1.2", "version": "9.8.1",
"resolved": "https://registry.npmjs.org/sweetalert/-/sweetalert-2.1.2.tgz", "resolved": "https://registry.npmjs.org/sweetalert2/-/sweetalert2-9.8.1.tgz",
"integrity": "sha512-iWx7X4anRBNDa/a+AdTmvAzQtkN1+s4j/JJRWlHpYE8Qimkohs8/XnFcWeYHH2lMA8LRCa5tj2d244If3S/hzA==", "integrity": "sha512-w+8vLSzKCZka6YMRVsPhD31teBan4v2FchX2qAQc4IYn5R6bt/EYC7yKeC2G0rCR/EksdqprnjJDxOZuMEMthA=="
"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="
}
}
}, },
"tapable": { "tapable": {
"version": "1.0.0", "version": "1.0.0",

4
package.json
View File

@@ -5,7 +5,7 @@
"sub:init": "git submodule update --init --recursive", "sub:init": "git submodule update --init --recursive",
"sub:update": "git submodule update --remote", "sub:update": "git submodule update --remote",
"sub:pull": "git submodule foreach git pull origin master", "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:win": "rm -rf ./jslib && cmd /c mklink /J .\\jslib ..\\jslib",
"symlink:mac": "npm run symlink:lin", "symlink:mac": "npm run symlink:lin",
"symlink:lin": "rm -rf ./jslib && ln -s ../jslib ./jslib", "symlink:lin": "rm -rf ./jslib && ln -s ../jslib ./jslib",
@@ -89,7 +89,7 @@
"popper.js": "1.14.4", "popper.js": "1.14.4",
"qrious": "4.0.2", "qrious": "4.0.2",
"rxjs": "6.3.3", "rxjs": "6.3.3",
"sweetalert": "2.1.2", "sweetalert2": "^9.8.1",
"web-animations-js": "2.3.1", "web-animations-js": "2.3.1",
"webcrypto-shim": "0.1.4", "webcrypto-shim": "0.1.4",
"whatwg-fetch": "3.0.0", "whatwg-fetch": "3.0.0",

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

@@ -1,6 +1,5 @@
import * as jq from 'jquery'; import * as jq from 'jquery';
import * as _swal from 'sweetalert'; import Swal from 'sweetalert2/src/sweetalert2.js';
import { SweetAlert } from 'sweetalert/typings/core';
import { import {
BodyOutputType, BodyOutputType,
@@ -53,8 +52,6 @@ import { ConstantsService } from 'jslib/services/constants.service';
import { RouterService } from './services/router.service'; import { RouterService } from './services/router.service';
const BroadcasterSubscriptionId = 'AppComponent'; const BroadcasterSubscriptionId = 'AppComponent';
// Hack due to Angular 5.2 bug
const swal: SweetAlert = _swal as any;
const IdleTimeout = 60000 * 10; // 10 minutes const IdleTimeout = 60000 * 10; // 10 minutes
@Component({ @Component({
@@ -165,7 +162,7 @@ export class AppComponent implements OnDestroy, OnInit {
} }
if (document.querySelector('.swal-modal') != null) { 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"; $fa-font-path: "~font-awesome/fonts";
@import "~font-awesome/scss/font-awesome.scss"; @import "~font-awesome/scss/font-awesome.scss";
@import "~angular2-toaster/toaster"; @import "~angular2-toaster/toaster";
@import "~sweetalert2/src/sweetalert2.scss";
#toast-container { #toast-container {
&.toast-top-right { &.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); background-color: rgba(0,0,0,.3);
} }
.swal-modal { .swal2-popup {
padding: 0;
background-color: $modal-content-bg; background-color: $modal-content-bg;
color: $body-color; color: $body-color;
border: $modal-content-border-width solid #9a9a9a; border: $modal-content-border-width solid #9a9a9a;
@include border-radius($modal-content-border-radius); @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; margin: 15px auto 0 auto;
width: auto;
height: auto;
border: none;
} }
.swal-content { .swal2-content {
margin: 0; padding-bottom: 15px;
padding: 15px 0;
font-size: $font-size-base; font-size: $font-size-base;
border-bottom: $modal-footer-border-width solid $modal-footer-border-color; 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 { i.swal-custom-icon {
@@ -129,36 +120,38 @@ $fa-font-path: "~font-awesome/fonts";
font-size: 35px; font-size: 35px;
} }
.swal-title { .swal2-title {
padding: 10px 10px 15px 10px; padding: 10px 10px 15px 10px;
margin: 0; margin: 0;
font-size: $font-size-lg; font-size: $font-size-lg;
color: $body-color; color: $body-color;
} }
.swal-text { .swal2-content {
font-size: $font-size-base; font-size: $font-size-base;
color: $body-color; color: $body-color;
} }
.swal-footer { .swal2-actions {
padding: 15px 10px 10px 10px; padding: 15px 10px 10px 10px;
margin: 0; margin: 0;
background-color: $input-bg; background-color: $input-bg;
@include border-radius($modal-content-border-radius); @include border-radius($modal-content-border-radius);
display: flex; display: flex;
flex-direction: row-reverse; flex-direction: row;
justify-content: flex-end; justify-content: flex-start;
font-size: $font-size-base; font-size: $font-size-base;
button.swal-button { button {
margin-left: 10px;
@extend .btn; @extend .btn;
&.swal-button--confirm { &.swal2-confirm {
@extend .btn-primary; @extend .btn-primary;
font-weight: bold;
} }
&.swal-button--cancel { &.swal2-cancel {
@extend .btn-outline-secondary; @extend .btn-outline-secondary;
background-color: #ffffff; background-color: #ffffff;
} }

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

@@ -1,5 +1,4 @@
import * as _swal from 'sweetalert'; import Swal, { SweetAlertIcon } from 'sweetalert2/src/sweetalert2.js';
import { SweetAlert } from 'sweetalert/typings/core';
import { DeviceType } from 'jslib/enums/deviceType'; import { DeviceType } from 'jslib/enums/deviceType';
@@ -9,9 +8,6 @@ import { PlatformUtilsService } from 'jslib/abstractions/platformUtils.service';
import { Utils } from 'jslib/misc/utils'; import { Utils } from 'jslib/misc/utils';
// Hack due to Angular 5.2 bug
const swal: SweetAlert = _swal as any;
export class WebPlatformUtilsService implements PlatformUtilsService { export class WebPlatformUtilsService implements PlatformUtilsService {
identityClientId: string = 'web'; identityClientId: string = 'web';
@@ -182,58 +178,42 @@ export class WebPlatformUtilsService implements PlatformUtilsService {
} }
async showDialog(text: string, title?: string, confirmText?: string, cancelText?: string, type?: string) { async showDialog(text: string, title?: string, confirmText?: string, cancelText?: string, type?: string) {
const buttons = [confirmText == null ? this.i18nService.t('ok') : confirmText]; let iconClasses = null;
if (cancelText != null) {
buttons.unshift(cancelText);
}
const contentDiv = document.createElement('div');
if (type != null) { if (type != null) {
const icon = document.createElement('i'); // If you add custom types to this part, the type to SweetAlertIcon cast below needs to be changed.
icon.classList.add('swal-custom-icon');
switch (type) { switch (type) {
case 'success': case 'success':
icon.classList.add('fa', 'fa-check', 'text-success'); iconClasses = 'fa-check text-success';
break; break;
case 'warning': case 'warning':
icon.classList.add('fa', 'fa-warning', 'text-warning'); iconClasses = 'fa-warning text-warning';
break; break;
case 'error': case 'error':
icon.classList.add('fa', 'fa-bolt', 'text-danger'); iconClasses = 'fa-bolt text-danger';
break; break;
case 'info': case 'info':
icon.classList.add('fa', 'fa-info-circle', 'text-info'); iconClasses = 'fa-info-circle text-info';
break; break;
default: default:
break; break;
} }
if (icon.classList.contains('fa')) {
contentDiv.appendChild(icon);
}
} }
if (title != null) { const iconHtmlStr = iconClasses != null ? `<i class="swal-custom-icon fa ${iconClasses}"></i>` : undefined;
const titleDiv = document.createElement('div'); const confirmed = await Swal.fire({
titleDiv.classList.add('swal-title'); heightAuto: false,
titleDiv.appendChild(document.createTextNode(title)); buttonsStyling: false,
contentDiv.appendChild(titleDiv); icon: type as SweetAlertIcon, // required to be any of the SweetAlertIcons to output the iconHtml.
} iconHtml: iconHtmlStr,
text: text,
if (text != null) { title: title,
const textDiv = document.createElement('div'); showCancelButton: (cancelText != null),
textDiv.classList.add('swal-text'); cancelButtonText: cancelText,
textDiv.appendChild(document.createTextNode(text)); showConfirmButton: true,
contentDiv.appendChild(textDiv); confirmButtonText: confirmText == null ? this.i18nService.t('ok') : confirmText,
}
const confirmed = buttons.length > 1 ? await swal({
content: { element: contentDiv },
buttons: buttons,
}) : await (swal as any)({
content: { element: contentDiv },
button: buttons[0],
}); });
return confirmed;
return confirmed.value;
} }
eventTrack(action: string, label?: string, options?: any) { eventTrack(action: string, label?: string, options?: any) {

2
tsconfig.json
View File

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