Upstream/bitwarden-browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser.git synced 2024-06-27 10:46:02 +02:00
Code Issues Projects Releases Wiki Activity

[PS-2841] remove SweetAlert2 dependency (#6191)

Browse Source 
* remove swal from app.component

* remove dep

* remove unused swal css
This commit is contained in:
Will Martin 2023-09-11 17:15:27 -04:00 committed by GitHub
parent f999e2cea9
commit 373569833f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 4 additions and 353 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
apps/browser/src/popup/scss/misc.scss
View File

@ -422,8 +422,7 @@ img,
.callout,
.row-label,
.modal-title,
.overlay-container,
.swal2-container {
.overlay-container {
user-select: none;
}

114
apps/browser/src/popup/scss/plugins.scss
View File

@ -1,5 +1,4 @@
@import "~ngx-toastr/toastr";
@import "~#sweetalert2";
@import "variables.scss";
@import "buttons.scss";
@ -98,119 +97,6 @@
}
}
// SweetAlert
.swal2-popup {
padding: 15px;
border-radius: $border-radius;
width: 34em;
@include themify($themes) {
background-color: themed("backgroundColorAlt");
color: themed("textColor");
}
.swal2-icon {
margin: 0 auto;
width: auto;
height: auto;
border: none;
}
.swal2-content {
margin: 0;
font-size: $font-size-base;
@include themify($themes) {
color: themed("textColor");
}
label.checkbox {
margin-top: 10px;
display: flex;
text-align: left;
align-items: top;
input {
margin: 3px 5px 0 1px;
}
}
.swal2-input,
.swal2-textarea {
border: 1px solid #000000;
border-radius: $border-radius;
margin-bottom: 0;
box-shadow: none;
// 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");
}
}
}
}
i.swal-custom-icon {
display: block;
margin: 0 auto;
font-size: 35px;
}
.swal2-title {
padding: 10px 0 15px;
margin: 0;
font-size: $font-size-large;
@include themify($themes) {
color: themed("textColor");
}
}
.swal2-text {
text-align: left; // sweetalert1 behaviour
font-size: $font-size-base;
@include themify($themes) {
color: themed("textColor");
}
}
> .swal2-text:first-child {
margin-top: 20px;
}
.swal2-actions {
margin: 20px auto 0;
justify-content: flex-start;
flex-direction: row-reverse;
button {
margin-left: 10px;
@extend .btn;
&.swal2-confirm {
@extend .btn, .primary;
font-weight: bold;
}
}
}
.swal2-validation-message {
margin-top: 20px;
}
}
date-input-polyfill {
&[data-open="true"] {
z-index: 10000 !important;

4
apps/browser/webpack.config.js
View File

@ -213,10 +213,6 @@ const mainConfig = {
extensions: [".ts", ".js"],
symlinks: false,
modules: [path.resolve("../../node_modules")],
alias: {
sweetalert2: require.resolve("sweetalert2/dist/sweetalert2.js"),
"#sweetalert2": require.resolve("sweetalert2/src/sweetalert2.scss"),
},
fallback: {
assert: false,
buffer: require.resolve("buffer/"),

114
apps/desktop/src/scss/plugins.scss
View File

@ -1,5 +1,4 @@
@import "~ngx-toastr/toastr";
@import "~sweetalert2/src/sweetalert2.scss";
@import "variables.scss";
@ -94,116 +93,3 @@
}
}
}
// SweetAlert2
.swal2-popup {
padding: 15px;
border-radius: $border-radius;
width: 34em;
@include themify($themes) {
background-color: themed("backgroundColorAlt");
color: themed("textColor");
}
.swal2-icon {
margin: 0 auto;
width: auto;
height: auto;
border: none;
}
.swal2-content {
margin: 0;
font-size: $font-size-base;
@include themify($themes) {
color: themed("textColor");
}
label.checkbox {
margin-top: 10px;
display: flex;
text-align: left;
align-items: top;
input {
margin: 3px 5px 0 1px;
}
}
.swal2-input,
.swal2-textarea {
border: 1px solid #000000;
border-radius: $border-radius;
margin-bottom: 0;
box-shadow: none;
// 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");
}
}
}
}
i.swal-custom-icon {
display: block;
margin: 0 auto;
font-size: 35px;
}
.swal2-title {
padding: 10px 0 15px;
margin: 0;
font-size: $font-size-large;
@include themify($themes) {
color: themed("textColor");
}
}
.swal2-text {
text-align: left; // sweetalert1 behaviour
font-size: $font-size-base;
@include themify($themes) {
color: themed("textColor");
}
}
> .swal2-text:first-child {
margin-top: 20px;
}
.swal2-actions {
margin: 20px auto 0;
justify-content: flex-start;
flex-direction: row-reverse;
button {
margin-left: 10px;
@extend .btn;
&.swal2-confirm {
@extend .btn, .primary;
font-weight: bold;
}
}
}
.swal2-validation-message {
margin-top: 20px;
}
}

6
apps/web/src/app/app.component.ts
View File

@ -5,7 +5,6 @@ import { NavigationEnd, Router } from "@angular/router";
import * as jq from "jquery";
import { IndividualConfig, ToastrService } from "ngx-toastr";
import { Subject, takeUntil } from "rxjs";
import Swal from "sweetalert2";
import { EventUploadService } from "@bitwarden/common/abstractions/event/event-upload.service";
import { NotificationsService } from "@bitwarden/common/abstractions/notifications.service";
@ -204,10 +203,6 @@ export class AppComponent implements OnDestroy, OnInit {
for (const modal of modals) {
(jq(modal) as any).modal("hide");
}
if (document.querySelector(".swal-modal") != null) {
Swal.close(undefined);
}
}
});
@ -258,7 +253,6 @@ export class AppComponent implements OnDestroy, OnInit {
}
await this.stateService.clean({ userId: userId });
Swal.close();
if (redirect) {
this.router.navigate(["/"]);
}

2
apps/web/src/scss/base.scss
View File

@ -173,9 +173,7 @@ code {
}
.btn:focus,
.swal2-popup .swal2-actions button:focus,
.btn.focus,
.swal2-popup .swal2-actions button.focus,
.form-control:focus {
@include themify($themes) {
box-shadow: 0 0 0 0.2rem themed("focus");

9
apps/web/src/scss/buttons.scss
View File

@ -1,5 +1,4 @@
.btn-primary,
.swal2-confirm {
.btn-primary {
@include themify($themes) {
background-color: themed("btnPrimary");
border-color: themed("btnPrimary");
@ -37,8 +36,7 @@
}
}
.btn-secondary,
.swal2-cancel {
.btn-secondary {
@include themify($themes) {
background-color: themed("btnSecondary");
border-color: themed("btnSecondaryBorder");
@ -103,8 +101,7 @@
}
}
.btn-danger,
.swal2-deny {
.btn-danger {
@include themify($themes) {
background-color: themed("btnDanger");
border-color: themed("btnDanger");

90
apps/web/src/scss/plugins.scss
View File

@ -130,96 +130,6 @@
}
}
// SweetAlert2
[class*="swal2-"] {
&:not(.swal2-container, .swal2-confirm, .swal2-cancel, .swal2-deny) {
@include themify($themes) {
background-color: themed("backgroundColor");
color: themed("textColor");
}
}
}
.swal2-container {
background-color: rgba(0, 0, 0, 0.3);
}
.swal2-popup {
@include themify($themes) {
background-color: themed("backgroundColor");
color: themed("textColor");
}
border: $modal-content-border-width solid #9a9a9a;
@include border-radius($modal-content-border-radius);
padding: 15px 0 0;
width: 34em; // slightly bigger than the hardcoded 478px in v1.
.swal2-header {
padding: 0 15px;
}
.swal2-icon {
border: none;
height: auto;
margin: 0 auto;
width: auto;
}
.swal2-content {
font-size: $font-size-base;
padding-bottom: 15px;
@include themify($themes) {
border-bottom: $modal-footer-border-width solid themed("separator");
}
}
i.swal-custom-icon {
display: block;
font-size: 35px;
margin: 0 auto;
}
.swal2-title {
font-size: $font-size-lg;
margin: 0;
padding: 10px 0 15px;
@include themify($themes) {
color: themed("textHeadingColor");
}
}
.swal2-content {
font-size: $font-size-base;
padding: 0 15px 15px;
@include themify($themes) {
color: themed("textColor");
}
}
.swal2-actions {
@include border-radius($modal-content-border-radius);
display: flex;
flex-direction: row;
font-size: $font-size-base;
justify-content: flex-start;
margin: 0;
padding: 15px;
@include themify($themes) {
background-color: themed("backgroundColor");
}
button {
margin-right: 10px;
@extend .btn;
}
}
.swal2-validation-message {
margin: 0 -15px;
}
}
date-input-polyfill {
&[data-open="true"] {
z-index: 10000 !important;

1
apps/web/src/scss/styles.scss
View File

@ -44,7 +44,6 @@
@import "~bootstrap/scss/_print";
@import "~ngx-toastr/toastr";
@import "~#sweetalert2";
@import "./base";
@import "./buttons";

4
apps/web/webpack.config.js
View File

@ -349,10 +349,6 @@ const webpackConfig = {
extensions: [".ts", ".js"],
symlinks: false,
modules: [path.resolve("../../node_modules")],
alias: {
sweetalert2: require.resolve("sweetalert2/dist/sweetalert2.js"),
"#sweetalert2": require.resolve("sweetalert2/src/sweetalert2.scss"),
},
fallback: {
buffer: false,
util: require.resolve("util/"),

9
package-lock.json generated
View File

@ -64,7 +64,6 @@
"proper-lockfile": "4.1.2",
"qrious": "4.0.2",
"rxjs": "7.8.1",
"sweetalert2": "10.16.11",
"tldts": "6.0.14",
"utf-8-validate": "5.0.10",
"zone.js": "0.12.0",
@ -37301,14 +37300,6 @@
"webpack": ">=2"
}
},
"node_modules/sweetalert2": {
"version": "10.16.11",
"resolved": "https://registry.npmjs.org/sweetalert2/-/sweetalert2-10.16.11.tgz",
"integrity": "sha512-Rdfabv2G89Tr8vmUTb1auWCYYesKBEWnkYPSi7XaiCIW0ZXXGK8Nw1wYKPEMLU6O8gMSMJe5m6MRKqMQsAQy9A==",
"funding": {
"url": "https://sweetalert2.github.io/#donations"
}
},
"node_modules/symbol-observable": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-4.0.0.tgz",

1
package.json
View File

@ -197,7 +197,6 @@
"proper-lockfile": "4.1.2",
"qrious": "4.0.2",
"rxjs": "7.8.1",
"sweetalert2": "10.16.11",
"tldts": "6.0.14",
"utf-8-validate": "5.0.10",
"zone.js": "0.12.0",