From 3545c0e7184ddca805bd69a98e5f40592f89b8d9 Mon Sep 17 00:00:00 2001 From: Chneemann Date: Wed, 14 Aug 2024 09:28:09 +0200 Subject: [PATCH] added & design small btn component --- .../src/app/components/auth/auth.component.ts | 2 +- .../forgot-password.component.ts | 2 +- .../components/auth/login/login.component.ts | 2 +- .../auth/register/register.component.ts | 2 +- .../home/browse/browse.component.html | 3 ++ .../home/browse/browse.component.scss | 6 ++++ .../home/browse/browse.component.ts | 5 +++ .../hero-banner/hero-banner.component.ts | 2 +- .../btn-large/btn-large.component.html | 0 .../btn-large/btn-large.component.scss | 2 +- .../btn-large/btn-large.component.spec.ts | 0 .../btn-large/btn-large.component.ts | 0 .../btn-small/btn-small.component.html | 7 ++++ .../btn-small/btn-small.component.scss | 34 +++++++++++++++++++ .../btn-small/btn-small.component.spec.ts | 23 +++++++++++++ .../buttons/btn-small/btn-small.component.ts | 13 +++++++ .../components/header/header.component.ts | 2 +- frontend/src/assets/img/add.svg | 1 + 18 files changed, 99 insertions(+), 7 deletions(-) rename frontend/src/app/shared/components/{ => buttons}/btn-large/btn-large.component.html (100%) rename frontend/src/app/shared/components/{ => buttons}/btn-large/btn-large.component.scss (95%) rename frontend/src/app/shared/components/{ => buttons}/btn-large/btn-large.component.spec.ts (100%) rename frontend/src/app/shared/components/{ => buttons}/btn-large/btn-large.component.ts (100%) create mode 100644 frontend/src/app/shared/components/buttons/btn-small/btn-small.component.html create mode 100644 frontend/src/app/shared/components/buttons/btn-small/btn-small.component.scss create mode 100644 frontend/src/app/shared/components/buttons/btn-small/btn-small.component.spec.ts create mode 100644 frontend/src/app/shared/components/buttons/btn-small/btn-small.component.ts create mode 100644 frontend/src/assets/img/add.svg diff --git a/frontend/src/app/components/auth/auth.component.ts b/frontend/src/app/components/auth/auth.component.ts index d4e88ca..33d71fd 100644 --- a/frontend/src/app/components/auth/auth.component.ts +++ b/frontend/src/app/components/auth/auth.component.ts @@ -1,6 +1,6 @@ import { Component } from '@angular/core'; import { FormsModule, NgForm } from '@angular/forms'; -import { BtnLargeComponent } from '../../shared/components/btn-large/btn-large.component'; +import { BtnLargeComponent } from '../../shared/components/buttons/btn-large/btn-large.component'; import { Router } from '@angular/router'; import { CommonModule } from '@angular/common'; import { ErrorService } from '../../services/error.service'; diff --git a/frontend/src/app/components/auth/forgot-password/forgot-password.component.ts b/frontend/src/app/components/auth/forgot-password/forgot-password.component.ts index 1ebe656..0276603 100644 --- a/frontend/src/app/components/auth/forgot-password/forgot-password.component.ts +++ b/frontend/src/app/components/auth/forgot-password/forgot-password.component.ts @@ -1,6 +1,6 @@ import { CommonModule } from '@angular/common'; import { Component } from '@angular/core'; -import { BtnLargeComponent } from '../../../shared/components/btn-large/btn-large.component'; +import { BtnLargeComponent } from '../../../shared/components/buttons/btn-large/btn-large.component'; import { FormsModule, NgForm } from '@angular/forms'; import { ActivatedRoute, RouterLink } from '@angular/router'; import { AuthService } from '../../../services/auth.service'; diff --git a/frontend/src/app/components/auth/login/login.component.ts b/frontend/src/app/components/auth/login/login.component.ts index 7e37acf..65df1f6 100644 --- a/frontend/src/app/components/auth/login/login.component.ts +++ b/frontend/src/app/components/auth/login/login.component.ts @@ -1,5 +1,5 @@ import { Component, ViewChild } from '@angular/core'; -import { BtnLargeComponent } from '../../../shared/components/btn-large/btn-large.component'; +import { BtnLargeComponent } from '../../../shared/components/buttons/btn-large/btn-large.component'; import { FormsModule, NgForm } from '@angular/forms'; import { Router, RouterLink } from '@angular/router'; import { AuthService } from '../../../services/auth.service'; diff --git a/frontend/src/app/components/auth/register/register.component.ts b/frontend/src/app/components/auth/register/register.component.ts index 0f79d13..c2b40ce 100644 --- a/frontend/src/app/components/auth/register/register.component.ts +++ b/frontend/src/app/components/auth/register/register.component.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { BtnLargeComponent } from '../../../shared/components/btn-large/btn-large.component'; +import { BtnLargeComponent } from '../../../shared/components/buttons/btn-large/btn-large.component'; import { FormsModule, NgForm } from '@angular/forms'; import { ActivatedRoute, Router, RouterLink } from '@angular/router'; import { CommonModule } from '@angular/common'; diff --git a/frontend/src/app/components/home/browse/browse.component.html b/frontend/src/app/components/home/browse/browse.component.html index 73d6eab..532305a 100644 --- a/frontend/src/app/components/home/browse/browse.component.html +++ b/frontend/src/app/components/home/browse/browse.component.html @@ -31,4 +31,7 @@

Unfortunately there are no films available in the database.

} +
+ +
diff --git a/frontend/src/app/components/home/browse/browse.component.scss b/frontend/src/app/components/home/browse/browse.component.scss index 79d9443..baec3eb 100644 --- a/frontend/src/app/components/home/browse/browse.component.scss +++ b/frontend/src/app/components/home/browse/browse.component.scss @@ -45,6 +45,12 @@ section { transition: opacity 300ms ease-in-out; } +.add-button { + position: absolute; + bottom: 24px; + right: 24px; +} + .back-button { cursor: pointer; background: none; diff --git a/frontend/src/app/components/home/browse/browse.component.ts b/frontend/src/app/components/home/browse/browse.component.ts index b1a1c23..3a62b46 100644 --- a/frontend/src/app/components/home/browse/browse.component.ts +++ b/frontend/src/app/components/home/browse/browse.component.ts @@ -7,6 +7,8 @@ import { MovieService } from '../../../services/movie.service'; import { Observable, Subscription } from 'rxjs'; import { CommonModule } from '@angular/common'; import { VideoPlayerComponent } from './vjs-player/vjs-player.component'; +import { BtnLargeComponent } from '../../../shared/components/buttons/btn-large/btn-large.component'; +import { BtnSmallComponent } from '../../../shared/components/buttons/btn-small/btn-small.component'; @Component({ selector: 'app-browse', @@ -17,6 +19,7 @@ import { VideoPlayerComponent } from './vjs-player/vjs-player.component'; HeroBannerComponent, CategoriesComponent, VideoPlayerComponent, + BtnSmallComponent, ], templateUrl: './browse.component.html', styleUrl: './browse.component.scss', @@ -61,4 +64,6 @@ export class BrowseComponent implements OnInit { this.currentMovie.push(this.movies[index]); } } + + addNewMovie() {} } diff --git a/frontend/src/app/components/home/browse/hero-banner/hero-banner.component.ts b/frontend/src/app/components/home/browse/hero-banner/hero-banner.component.ts index ac3543e..55b67bf 100644 --- a/frontend/src/app/components/home/browse/hero-banner/hero-banner.component.ts +++ b/frontend/src/app/components/home/browse/hero-banner/hero-banner.component.ts @@ -6,7 +6,7 @@ import { Input, Output, } from '@angular/core'; -import { BtnLargeComponent } from '../../../../shared/components/btn-large/btn-large.component'; +import { BtnLargeComponent } from '../../../../shared/components/buttons/btn-large/btn-large.component'; import { MovieService } from '../../../../services/movie.service'; import { environment } from '../../../../environments/environment'; diff --git a/frontend/src/app/shared/components/btn-large/btn-large.component.html b/frontend/src/app/shared/components/buttons/btn-large/btn-large.component.html similarity index 100% rename from frontend/src/app/shared/components/btn-large/btn-large.component.html rename to frontend/src/app/shared/components/buttons/btn-large/btn-large.component.html diff --git a/frontend/src/app/shared/components/btn-large/btn-large.component.scss b/frontend/src/app/shared/components/buttons/btn-large/btn-large.component.scss similarity index 95% rename from frontend/src/app/shared/components/btn-large/btn-large.component.scss rename to frontend/src/app/shared/components/buttons/btn-large/btn-large.component.scss index 6ed0d86..5ff3403 100644 --- a/frontend/src/app/shared/components/btn-large/btn-large.component.scss +++ b/frontend/src/app/shared/components/buttons/btn-large/btn-large.component.scss @@ -1,4 +1,4 @@ -@import "./../../../../assets/style/colors.scss"; +@import "./../../../../../assets/style/colors.scss"; .btn { display: flex; diff --git a/frontend/src/app/shared/components/btn-large/btn-large.component.spec.ts b/frontend/src/app/shared/components/buttons/btn-large/btn-large.component.spec.ts similarity index 100% rename from frontend/src/app/shared/components/btn-large/btn-large.component.spec.ts rename to frontend/src/app/shared/components/buttons/btn-large/btn-large.component.spec.ts diff --git a/frontend/src/app/shared/components/btn-large/btn-large.component.ts b/frontend/src/app/shared/components/buttons/btn-large/btn-large.component.ts similarity index 100% rename from frontend/src/app/shared/components/btn-large/btn-large.component.ts rename to frontend/src/app/shared/components/buttons/btn-large/btn-large.component.ts diff --git a/frontend/src/app/shared/components/buttons/btn-small/btn-small.component.html b/frontend/src/app/shared/components/buttons/btn-small/btn-small.component.html new file mode 100644 index 0000000..28aee56 --- /dev/null +++ b/frontend/src/app/shared/components/buttons/btn-small/btn-small.component.html @@ -0,0 +1,7 @@ + diff --git a/frontend/src/app/shared/components/buttons/btn-small/btn-small.component.scss b/frontend/src/app/shared/components/buttons/btn-small/btn-small.component.scss new file mode 100644 index 0000000..32a0c97 --- /dev/null +++ b/frontend/src/app/shared/components/buttons/btn-small/btn-small.component.scss @@ -0,0 +1,34 @@ +@import "./../../../../../assets/style/colors.scss"; + +.btn { + display: flex; + align-items: center; + justify-content: center; + width: 48px; + height: 48px; + box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); + border-radius: 50%; + background-color: blue; + border: 1px solid blue; + transition: 300ms ease-in-out; + cursor: pointer; + &:not(:disabled):hover { + background-color: white; + border: 1px solid blue; + .icon { + transition: 300ms ease-in-out; + filter: brightness(0) saturate(100%) invert(26%) sepia(77%) + saturate(2342%) hue-rotate(228deg) brightness(83%) contrast(115%); + } + } + &:disabled { + background-color: lightblue; + color: darken(white, 10%); + border: 1px solid lightblue; + cursor: default; + } + .icon { + height: 32px; + width: auto; + } +} diff --git a/frontend/src/app/shared/components/buttons/btn-small/btn-small.component.spec.ts b/frontend/src/app/shared/components/buttons/btn-small/btn-small.component.spec.ts new file mode 100644 index 0000000..6bb9cba --- /dev/null +++ b/frontend/src/app/shared/components/buttons/btn-small/btn-small.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { BtnSmallComponent } from './btn-small.component'; + +describe('BtnSmallComponent', () => { + let component: BtnSmallComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [BtnSmallComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(BtnSmallComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/frontend/src/app/shared/components/buttons/btn-small/btn-small.component.ts b/frontend/src/app/shared/components/buttons/btn-small/btn-small.component.ts new file mode 100644 index 0000000..c26b08f --- /dev/null +++ b/frontend/src/app/shared/components/buttons/btn-small/btn-small.component.ts @@ -0,0 +1,13 @@ +import { Component, Input } from '@angular/core'; + +@Component({ + selector: 'app-btn-small', + standalone: true, + imports: [], + templateUrl: './btn-small.component.html', + styleUrl: './btn-small.component.scss', +}) +export class BtnSmallComponent { + @Input() imgPath: string = ''; + @Input() disabled: boolean = false; +} diff --git a/frontend/src/app/shared/components/header/header.component.ts b/frontend/src/app/shared/components/header/header.component.ts index fa1f50e..60eb8c0 100644 --- a/frontend/src/app/shared/components/header/header.component.ts +++ b/frontend/src/app/shared/components/header/header.component.ts @@ -1,5 +1,5 @@ import { Component, Input, input } from '@angular/core'; -import { BtnLargeComponent } from '../btn-large/btn-large.component'; +import { BtnLargeComponent } from '../buttons/btn-large/btn-large.component'; import { Router, RouterLink } from '@angular/router'; @Component({ diff --git a/frontend/src/assets/img/add.svg b/frontend/src/assets/img/add.svg new file mode 100644 index 0000000..6a0e78b --- /dev/null +++ b/frontend/src/assets/img/add.svg @@ -0,0 +1 @@ + \ No newline at end of file