diff options
Diffstat (limited to 'ufund-ui/src/app/components/toast')
-rw-r--r-- | ufund-ui/src/app/components/toast/toast.component.css | 57 | ||||
-rw-r--r-- | ufund-ui/src/app/components/toast/toast.component.html | 7 | ||||
-rw-r--r-- | ufund-ui/src/app/components/toast/toast.component.ts | 37 |
3 files changed, 101 insertions, 0 deletions
diff --git a/ufund-ui/src/app/components/toast/toast.component.css b/ufund-ui/src/app/components/toast/toast.component.css new file mode 100644 index 0000000..4cd81fe --- /dev/null +++ b/ufund-ui/src/app/components/toast/toast.component.css @@ -0,0 +1,57 @@ +:host { + display: flex; + align-items: center; + justify-content: center; +} + +@keyframes slideDown { + from {transform: translateY(-90px);} + to {transform: translateY(0);} +} + +.toast { + /*transform: translateY(-90px);*/ + animation: slideDown .5s ease-in-out; + transition: transform .5s; + align-self: center; + z-index: 3; + position: absolute; + top: 15px; + display: flex; + flex-direction: row; + padding: 3px 15px; + background-color: #3a3a3a; + border-radius: 100000px; + gap: 10px; + align-items: center; + + button { + aspect-ratio: 1/1; + margin-right: -11px; + padding: 8px; + display: flex; + align-items: center; + background-color: transparent; + } + + button:hover { + background-color: rgba(255, 255, 255, 0.1); + } +} + +.toast.hide { + transform: translateY(-90px); +} + +.toast.warning { + background-color: #ffc500; + color: black; + + button { + color: black; + } +} + +.toast.error { + background-color: #d81a1a; +} diff --git a/ufund-ui/src/app/components/toast/toast.component.html b/ufund-ui/src/app/components/toast/toast.component.html new file mode 100644 index 0000000..dccf869 --- /dev/null +++ b/ufund-ui/src/app/components/toast/toast.component.html @@ -0,0 +1,7 @@ +<div class="toast" [ngClass]="ToastType[type].toLowerCase()" #toastDiv> + <span>{{this.message}}</span> + <a *ngIf="this.action" (click)="this.action.onAction()">{{this.action.label}}</a> + <button (click)="hide()"> + <span class="icon">close</span> + </button> +</div> diff --git a/ufund-ui/src/app/components/toast/toast.component.ts b/ufund-ui/src/app/components/toast/toast.component.ts new file mode 100644 index 0000000..47fd7ff --- /dev/null +++ b/ufund-ui/src/app/components/toast/toast.component.ts @@ -0,0 +1,37 @@ +import {Component, ElementRef, Input, OnInit, ViewChild} from '@angular/core'; +import {ToastType} from '../../services/toasts.service'; + +@Component({ + selector: 'app-toast', + standalone: false, + templateUrl: './toast.component.html', + styleUrl: './toast.component.css' +}) +export class ToastComponent implements OnInit{ + @Input() type!: ToastType + @Input() message!: string + @Input() action?: {label: string, onAction: () => void} + + @ViewChild("toastDiv") toastDiv!: ElementRef<HTMLDivElement> + + ngOnInit() { + setTimeout(() => { + this.hide(); + }, 3000) + } + + hide() { + console.log(this.toastDiv, typeof this.toastDiv) + this.toastDiv.nativeElement.classList.add('hide') + } + + getColor() { + switch (this.type) { + case ToastType.ERROR: return "red"; + case ToastType.INFO: return ""; + case ToastType.WARNING: return "yellow"; + } + } + + protected readonly ToastType = ToastType; +} |