-
Notifications
You must be signed in to change notification settings - Fork 1.3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
PM-18276-Connect confirmation UI (#13498)
* PM-18276-wip * update typing * dynamically retrieve messages, resolve theme in function * five second timeout after save or update * adjust timeout to five seconds * negligible performance gain-revert * sacrifice contorl for to remove event listeners-revert
- Loading branch information
1 parent
d999d91
commit 9aee5f1
Showing
3 changed files
with
206 additions
and
72 deletions.
There are no files selected for viewing
98 changes: 98 additions & 0 deletions
98
apps/browser/src/autofill/content/components/notification/confirmation-container.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,98 @@ | ||
| import { css } from "@emotion/css"; | ||
| import { html } from "lit"; | ||
|
|
||
| import { Theme, ThemeTypes } from "@bitwarden/common/platform/enums"; | ||
|
|
||
| import { | ||
| NotificationBarIframeInitData, | ||
| NotificationTypes, | ||
| NotificationType, | ||
| } from "../../../notification/abstractions/notification-bar"; | ||
| import { themes, spacing } from "../constants/styles"; | ||
|
|
||
| import { NotificationConfirmationBody } from "./confirmation"; | ||
| import { | ||
| NotificationHeader, | ||
| componentClassPrefix as notificationHeaderClassPrefix, | ||
| } from "./header"; | ||
|
|
||
| export function NotificationConfirmationContainer({ | ||
| error, | ||
| handleCloseNotification, | ||
| i18n, | ||
| theme = ThemeTypes.Light, | ||
| type, | ||
| }: NotificationBarIframeInitData & { | ||
| handleCloseNotification: (e: Event) => void; | ||
| } & { | ||
| error: string; | ||
| i18n: { [key: string]: string }; | ||
| type: NotificationType; | ||
| }) { | ||
| const headerMessage = getHeaderMessage(i18n, type, error); | ||
| const confirmationMessage = getConfirmationMessage(i18n, type, error); | ||
| const buttonText = error ? i18n.newItem : i18n.view; | ||
|
|
||
| return html` | ||
| <div class=${notificationContainerStyles(theme)}> | ||
| ${NotificationHeader({ | ||
| handleCloseNotification, | ||
| message: headerMessage, | ||
| theme, | ||
| })} | ||
| ${NotificationConfirmationBody({ | ||
| error: error, | ||
| buttonText, | ||
| confirmationMessage, | ||
| theme, | ||
| })} | ||
| </div> | ||
| `; | ||
| } | ||
|
|
||
| const notificationContainerStyles = (theme: Theme) => css` | ||
| position: absolute; | ||
| right: 20px; | ||
| border: 1px solid ${themes[theme].secondary["300"]}; | ||
| border-radius: ${spacing["4"]}; | ||
| box-shadow: -2px 4px 6px 0px #0000001a; | ||
| background-color: ${themes[theme].background.alt}; | ||
| width: 400px; | ||
| overflow: hidden; | ||
| [class*="${notificationHeaderClassPrefix}-"] { | ||
| border-radius: ${spacing["4"]} ${spacing["4"]} 0 0; | ||
| border-bottom: 0.5px solid ${themes[theme].secondary["300"]}; | ||
| } | ||
| `; | ||
|
|
||
| function getConfirmationMessage( | ||
| i18n: { [key: string]: string }, | ||
| type?: NotificationType, | ||
| error?: string, | ||
| ) { | ||
| if (error) { | ||
| return i18n.saveFailureDetails; | ||
| } | ||
| return type === "add" ? i18n.loginSaveSuccessDetails : i18n.loginUpdateSuccessDetails; | ||
| } | ||
| function getHeaderMessage( | ||
| i18n: { [key: string]: string }, | ||
| type?: NotificationType, | ||
| error?: string, | ||
| ) { | ||
| if (error) { | ||
| return i18n.saveFailure; | ||
| } | ||
|
|
||
| switch (type) { | ||
| case NotificationTypes.Add: | ||
| return i18n.loginSaveSuccess; | ||
| case NotificationTypes.Change: | ||
| return i18n.loginUpdateSuccess; | ||
| case NotificationTypes.Unlock: | ||
| return ""; | ||
| default: | ||
| return undefined; | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters