From a5eea4f37568a85795c5ab88dda5159eacbcf444 Mon Sep 17 00:00:00 2001 From: Gururajj77 Date: Thu, 11 Jan 2024 23:45:01 +0530 Subject: [PATCH] added dialog box on feed --- src/app/feed/feed.component.html | 4 +- src/app/feed/feed.component.ts | 7 +- .../post-dialog/post-dialog.component.html | 13 +++ .../post-dialog/post-dialog.component.scss | 91 +++++++++++++++++++ .../post-dialog/post-dialog.component.spec.ts | 23 +++++ .../feed/post-dialog/post-dialog.component.ts | 27 ++++++ .../components/header/header.component.scss | 4 + 7 files changed, 166 insertions(+), 3 deletions(-) create mode 100644 src/app/feed/post-dialog/post-dialog.component.html create mode 100644 src/app/feed/post-dialog/post-dialog.component.scss create mode 100644 src/app/feed/post-dialog/post-dialog.component.spec.ts create mode 100644 src/app/feed/post-dialog/post-dialog.component.ts diff --git a/src/app/feed/feed.component.html b/src/app/feed/feed.component.html index 54c17fe..34feb6b 100644 --- a/src/app/feed/feed.component.html +++ b/src/app/feed/feed.component.html @@ -1,8 +1,8 @@
- + +

News Feed

-
diff --git a/src/app/feed/feed.component.ts b/src/app/feed/feed.component.ts index 9162e0f..920ac2e 100644 --- a/src/app/feed/feed.component.ts +++ b/src/app/feed/feed.component.ts @@ -2,17 +2,22 @@ import { Component, inject } from '@angular/core'; import { Auth } from '@angular/fire/auth'; import { CustomButtonComponent } from '../shared/components/custom-button/custom-button.component'; import { SnackbarService } from '../shared/components/snackbar/snackbar.service'; +import { PostDialogComponent } from './post-dialog/post-dialog.component'; @Component({ selector: 'app-feed', standalone: true, - imports: [CustomButtonComponent], + imports: [CustomButtonComponent, PostDialogComponent], templateUrl: './feed.component.html', styleUrl: './feed.component.scss' }) export class FeedComponent { private readonly auth: Auth = inject(Auth); + openDialogBox: boolean = false + openWrite() { + this.openDialogBox = !this.openDialogBox; + } diff --git a/src/app/feed/post-dialog/post-dialog.component.html b/src/app/feed/post-dialog/post-dialog.component.html new file mode 100644 index 0000000..8d4759b --- /dev/null +++ b/src/app/feed/post-dialog/post-dialog.component.html @@ -0,0 +1,13 @@ +
+
+ +
+ + +
+
+
diff --git a/src/app/feed/post-dialog/post-dialog.component.scss b/src/app/feed/post-dialog/post-dialog.component.scss new file mode 100644 index 0000000..752ccf1 --- /dev/null +++ b/src/app/feed/post-dialog/post-dialog.component.scss @@ -0,0 +1,91 @@ +@import "../.../../../../partials/variables"; + +.post-dialog-overlay { + display: none; + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.5); + z-index: 1000; + justify-content: center; + align-items: center; + + &.show { + display: flex; + } +} + +.post-dialog { + background: #fff; + padding: 2rem; + border-radius: 0; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); + width: 90%; + max-width: 500px; +} + +.post-text { + width: calc(100% - 2rem); + border: 1px solid #ccc; + border-radius: 0; + padding: 1rem; + margin-bottom: 1rem; + resize: vertical; + + &:focus { + border-color: $inactive-color; + outline: none; + } +} + +.dialog-actions { + text-align: right; +} + +.btn-save, +.btn-cancel { + padding: 0.5rem 1rem; + border: none; + border-radius: 0; + margin-left: 0.5rem; + cursor: pointer; + font-weight: bold; + transition: background-color 0.3s; +} + +.btn-save { + background-color: $accent-color; + color: #fff; + + &:hover { + background-color: darken($accent-color, 10%); + } +} + +.btn-cancel { + background-color: #fff; + color: $accent-color; + border: 1px solid $accent-color; + + &:hover { + background-color: lighten($accent-color, 40%); + } +} + +/* Responsive styling */ +@media (max-width: 768px) { + .post-dialog { + padding: 1rem; + width: 95%; + } + .post-text { + padding: 0.5rem; + width: calc(100% - 1rem); + } + .btn-save, + .btn-cancel { + padding: 0.5rem; + } +} diff --git a/src/app/feed/post-dialog/post-dialog.component.spec.ts b/src/app/feed/post-dialog/post-dialog.component.spec.ts new file mode 100644 index 0000000..32eec0a --- /dev/null +++ b/src/app/feed/post-dialog/post-dialog.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { PostDialogComponent } from './post-dialog.component'; + +describe('PostDialogComponent', () => { + let component: PostDialogComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [PostDialogComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(PostDialogComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/feed/post-dialog/post-dialog.component.ts b/src/app/feed/post-dialog/post-dialog.component.ts new file mode 100644 index 0000000..1027069 --- /dev/null +++ b/src/app/feed/post-dialog/post-dialog.component.ts @@ -0,0 +1,27 @@ +import { Component, EventEmitter, Input, Output } from '@angular/core'; + +@Component({ + selector: 'post-dialog', + standalone: true, + imports: [], + templateUrl: './post-dialog.component.html', + styleUrl: './post-dialog.component.scss' +}) +export class PostDialogComponent { + + @Input() isDialogOpen: boolean = false; + @Output() closeWrite = new EventEmitter(); + openDialog(): void { + this.isDialogOpen = true; + } + + closeDialog(): void { + this.isDialogOpen = false; + this.closeWrite.emit(true); + } + + savePost(): void { + this.closeDialog(); + } + +} diff --git a/src/app/shared/components/header/header.component.scss b/src/app/shared/components/header/header.component.scss index d946021..54db5f6 100644 --- a/src/app/shared/components/header/header.component.scss +++ b/src/app/shared/components/header/header.component.scss @@ -7,6 +7,9 @@ align-items: center; background-color: #fff; padding: 0 2rem; + height: 70px; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), + 0 2px 4px -1px rgba(0, 0, 0, 0.06); } .header-nav { display: flex; @@ -51,6 +54,7 @@ .header { justify-content: space-between; padding: 1rem; + height: 50px; } .header-nav { display: flex;