Upstream/bitwarden-browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser.git synced 2024-11-10 09:59:48 +01:00
Code Issues Projects Releases Wiki Activity

[SM-303] feat: add fadeIn animation to bit-dialog (#4309)

Browse Source
This commit is contained in:
Will Martin 2023-01-11 10:47:43 -05:00 committed by GitHub
parent 4be2989fec
commit 794f1193db
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 19 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
libs/components/src/dialog/animations.ts Normal file
View File

@ -0,0 +1,11 @@
import { style, animate, trigger, transition, group } from "@angular/animations";
export const fadeIn = trigger("fadeIn", [
transition(":enter", [
style({ opacity: 0, transform: "translateY(-50px)" }),
group([
animate("0.15s linear", style({ opacity: 1 })),
animate("0.3s ease-out", style({ transform: "none" })),
]),
]),
]);

1
libs/components/src/dialog/dialog/dialog.component.html
View File

@ -1,6 +1,7 @@
<div <div
[ngClass]="width" [ngClass]="width"
class="tw-my-4 tw-flex tw-max-h-screen tw-flex-col tw-overflow-hidden tw-rounded tw-border tw-border-solid tw-border-secondary-300 tw-bg-text-contrast tw-text-main" class="tw-my-4 tw-flex tw-max-h-screen tw-flex-col tw-overflow-hidden tw-rounded tw-border tw-border-solid tw-border-secondary-300 tw-bg-text-contrast tw-text-main"
@fadeIn
> >
<div <div
class="tw-flex tw-items-center tw-gap-4 tw-border-0 tw-border-b tw-border-solid tw-border-secondary-300 tw-p-4" class="tw-flex tw-items-center tw-gap-4 tw-border-0 tw-border-b tw-border-solid tw-border-secondary-300 tw-p-4"

3
libs/components/src/dialog/dialog/dialog.component.ts
View File

@ -1,9 +1,12 @@
import { coerceBooleanProperty } from "@angular/cdk/coercion"; import { coerceBooleanProperty } from "@angular/cdk/coercion";
import { Component, Input } from "@angular/core"; import { Component, Input } from "@angular/core";
import { fadeIn } from "../animations";
@Component({ @Component({
selector: "bit-dialog", selector: "bit-dialog",
templateUrl: "./dialog.component.html", templateUrl: "./dialog.component.html",
animations: [fadeIn],
}) })
export class DialogComponent { export class DialogComponent {
@Input() dialogSize: "small" | "default" | "large" = "default"; @Input() dialogSize: "small" | "default" | "large" = "default";

1
libs/components/src/dialog/simple-dialog/simple-dialog.component.html
View File

@ -1,5 +1,6 @@
<div <div
class="tw-my-4 tw-flex tw-max-h-screen tw-w-96 tw-max-w-90vw tw-flex-col tw-overflow-hidden tw-rounded tw-border tw-border-solid tw-border-secondary-300 tw-bg-text-contrast tw-text-main" class="tw-my-4 tw-flex tw-max-h-screen tw-w-96 tw-max-w-90vw tw-flex-col tw-overflow-hidden tw-rounded tw-border tw-border-solid tw-border-secondary-300 tw-bg-text-contrast tw-text-main"
@fadeIn
> >
<div class="tw-flex tw-flex-col tw-items-center tw-gap-2 tw-px-4 tw-pt-4 tw-text-center"> <div class="tw-flex tw-flex-col tw-items-center tw-gap-2 tw-px-4 tw-pt-4 tw-text-center">
<ng-content *ngIf="hasIcon; else elseBlock" select="[bit-dialog-icon]"></ng-content> <ng-content *ngIf="hasIcon; else elseBlock" select="[bit-dialog-icon]"></ng-content>

3
libs/components/src/dialog/simple-dialog/simple-dialog.component.ts
View File

@ -1,11 +1,14 @@
import { Component, ContentChild, Directive } from "@angular/core"; import { Component, ContentChild, Directive } from "@angular/core";
import { fadeIn } from "../animations";
@Directive({ selector: "[bit-dialog-icon]" }) @Directive({ selector: "[bit-dialog-icon]" })
export class IconDirective {} export class IconDirective {}
@Component({ @Component({
selector: "bit-simple-dialog", selector: "bit-simple-dialog",
templateUrl: "./simple-dialog.component.html", templateUrl: "./simple-dialog.component.html",
animations: [fadeIn],
}) })
export class SimpleDialogComponent { export class SimpleDialogComponent {
@ContentChild(IconDirective) icon!: IconDirective; @ContentChild(IconDirective) icon!: IconDirective;