diff --git a/src/app/components/add-task/add-task.component.scss b/src/app/components/add-task/add-task.component.scss index b69dbcd..22660bd 100644 --- a/src/app/components/add-task/add-task.component.scss +++ b/src/app/components/add-task/add-task.component.scss @@ -252,7 +252,7 @@ p { background-color: var(--white); font-size: 20px; font-weight: 400; - width: 125px; + width: 100%; border-radius: 10px; border: 1px solid var(--light-gray); padding: 10px 16px; diff --git a/src/app/components/board/details/details.component.html b/src/app/components/board/details/details.component.html deleted file mode 100644 index 29525a6..0000000 --- a/src/app/components/board/details/details.component.html +++ /dev/null @@ -1 +0,0 @@ -

details works!

diff --git a/src/app/components/board/details/details.component.scss b/src/app/components/board/details/details.component.scss deleted file mode 100644 index e69de29..0000000 diff --git a/src/app/components/board/details/details.component.ts b/src/app/components/board/details/details.component.ts deleted file mode 100644 index 61957e3..0000000 --- a/src/app/components/board/details/details.component.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { Component } from '@angular/core'; - -@Component({ - selector: 'app-details', - standalone: true, - imports: [], - templateUrl: './details.component.html', - styleUrl: './details.component.scss' -}) -export class DetailsComponent { - -} diff --git a/src/app/components/board/task/task-menu/task-menu.component.html b/src/app/components/board/task/task-menu/task-menu.component.html new file mode 100644 index 0000000..2ca2aa1 --- /dev/null +++ b/src/app/components/board/task/task-menu/task-menu.component.html @@ -0,0 +1,12 @@ +
+

Move to:

+ @if (boardTaskStatus !== 'todo') { +

To do

+ } @if (boardTaskStatus !== 'inprogress') { +

In progress

+ } @if (boardTaskStatus !== 'awaitfeedback') { +

Await feedback

+ } @if (boardTaskStatus !== 'done') { +

Done

+ } +
diff --git a/src/app/components/board/task/task-menu/task-menu.component.scss b/src/app/components/board/task/task-menu/task-menu.component.scss new file mode 100644 index 0000000..e7f2a83 --- /dev/null +++ b/src/app/components/board/task/task-menu/task-menu.component.scss @@ -0,0 +1,32 @@ +section { + position: absolute; + top: 30px; + left: 40px; + text-align: center; + width: fit-content; + height: fit-content; + background-color: var(--white); + border-radius: 20px 0 20px 20px; + border: 1px solid rgba($color: #000000, $alpha: 0.2); + padding: 12px; + p { + font-size: 18px; + font-weight: 400; + padding-bottom: 3px; + color: var(--light-blue); + cursor: pointer; + &:first-child { + font-size: 18px; + font-weight: 600; + padding-bottom: 6px; + cursor: auto; + color: var(--black); + } + &:hover { + text-decoration: underline; + &:first-child { + text-decoration: none; + } + } + } +} diff --git a/src/app/components/board/details/details.component.spec.ts b/src/app/components/board/task/task-menu/task-menu.component.spec.ts similarity index 54% rename from src/app/components/board/details/details.component.spec.ts rename to src/app/components/board/task/task-menu/task-menu.component.spec.ts index 3a6f2a6..6b4af6a 100644 --- a/src/app/components/board/details/details.component.spec.ts +++ b/src/app/components/board/task/task-menu/task-menu.component.spec.ts @@ -1,18 +1,18 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'; -import { DetailsComponent } from './details.component'; +import { TaskMenuComponent } from './task-menu.component'; -describe('DetailsComponent', () => { - let component: DetailsComponent; - let fixture: ComponentFixture; +describe('TaskMenuComponent', () => { + let component: TaskMenuComponent; + let fixture: ComponentFixture; beforeEach(async () => { await TestBed.configureTestingModule({ - imports: [DetailsComponent] + imports: [TaskMenuComponent] }) .compileComponents(); - fixture = TestBed.createComponent(DetailsComponent); + fixture = TestBed.createComponent(TaskMenuComponent); component = fixture.componentInstance; fixture.detectChanges(); }); diff --git a/src/app/components/board/task/task-menu/task-menu.component.ts b/src/app/components/board/task/task-menu/task-menu.component.ts new file mode 100644 index 0000000..e0e2cd2 --- /dev/null +++ b/src/app/components/board/task/task-menu/task-menu.component.ts @@ -0,0 +1,16 @@ +import { Component, Input } from '@angular/core'; + +@Component({ + selector: 'app-task-menu', + standalone: true, + imports: [], + templateUrl: './task-menu.component.html', + styleUrl: './task-menu.component.scss', +}) +export class TaskMenuComponent { + @Input() boardTaskStatus: string = ''; + + moveTask(moveTo: string) { + console.log(moveTo); + } +} diff --git a/src/app/components/board/task/task.component.html b/src/app/components/board/task/task.component.html index 14d67ab..9e79d58 100644 --- a/src/app/components/board/task/task.component.html +++ b/src/app/components/board/task/task.component.html @@ -1,14 +1,26 @@ -
+
-
- {{ task.category }} +
+
+ {{ task.category }} +
+
+ menu +
{{ task.title }}
@@ -40,4 +52,7 @@
+ @if (isMenuOpen){ + + }
diff --git a/src/app/components/board/task/task.component.scss b/src/app/components/board/task/task.component.scss index 3b567ea..340b1cb 100644 --- a/src/app/components/board/task/task.component.scss +++ b/src/app/components/board/task/task.component.scss @@ -1,6 +1,7 @@ section { width: 246px; margin: 15.5px 0; + position: relative; } .content { @@ -20,22 +21,41 @@ section { } } -.category { - position: absolute; - font-size: 16px; - top: 16px; - left: 16px; - padding: 4px 16px; - border-radius: 8px; - color: var(--white); - text-shadow: 1px 1px 2px var(--black); +.header { + display: flex; + align-items: center; + justify-content: space-between; + .category { + width: fit-content; + font-size: 16px; + padding: 4px 16px; + border-radius: 8px; + color: var(--white); + text-shadow: 1px 1px 2px var(--black); + } + .menu-btn { + display: flex; + align-items: center; + justify-content: center; + padding: 6px 12px; + img { + height: 16px; + width: auto; + } + &:hover { + img { + filter: brightness(0) saturate(100%) invert(56%) sepia(64%) + saturate(570%) hue-rotate(154deg) brightness(92%) contrast(92%); + } + } + } } .headline { color: var(--dark-blue); font-size: 16px; font-weight: 700; - margin-top: 40px; + margin-top: 12px; } .description { diff --git a/src/app/components/board/task/task.component.ts b/src/app/components/board/task/task.component.ts index 279eb53..6004a2a 100644 --- a/src/app/components/board/task/task.component.ts +++ b/src/app/components/board/task/task.component.ts @@ -1,20 +1,25 @@ import { CommonModule } from '@angular/common'; -import { Component, Input } from '@angular/core'; +import { Component, Input, OnDestroy, OnInit } from '@angular/core'; import { DragDropService } from '../../../services/drag-drop.service'; import { Task } from '../../../interfaces/task.interface'; import { FirebaseService } from '../../../services/firebase.service'; import { OverlayService } from '../../../services/overlay.service'; import { Router } from '@angular/router'; +import { TaskMenuComponent } from './task-menu/task-menu.component'; @Component({ selector: 'app-task', standalone: true, - imports: [CommonModule], + imports: [CommonModule, TaskMenuComponent], templateUrl: './task.component.html', styleUrl: './task.component.scss', }) -export class TaskComponent { - @Input() task!: Task; +export class TaskComponent implements OnInit, OnDestroy { + @Input() task: Task = {} as Task; + private resizeListener!: () => void; + + isPageViewMedia: boolean = window.innerWidth <= 650; + isMenuOpen: boolean = false; categoryColors = new Map([ ['User Story', '#0038ff'], @@ -28,12 +33,36 @@ export class TaskComponent { private router: Router ) {} + ngOnInit() { + this.resizeListener = this.onResize.bind(this); + window.addEventListener('resize', this.resizeListener); + } + + ngOnDestroy() { + window.removeEventListener('resize', this.resizeListener); + } + + onResize() { + this.isPageViewMedia = window.innerWidth <= 650; + } + + handleMenuButtonClick(event: MouseEvent, taskIdOrStatus: string | undefined) { + event.stopPropagation(); + const targetElement = event.target as HTMLElement; + targetElement.classList.contains('menu-btn') || + targetElement.classList.contains('menu-img') + ? this.openTaskMenu(taskIdOrStatus) + : this.openTaskDetailsOverlay(taskIdOrStatus); + } + + openTaskMenu(taskStatus: string | undefined) { + this.isMenuOpen = !this.isMenuOpen; + } + openTaskDetailsOverlay(taskId: string | undefined) { - if (window.innerWidth >= 650) { - this.overlayService.setOverlayData('taskOverlay', taskId); - } else { - this.router.navigate(['/task', taskId]); - } + this.isPageViewMedia + ? this.router.navigate(['/task', taskId]) + : this.overlayService.setOverlayData('taskOverlay', taskId); } // Subtasks diff --git a/src/assets/img/board/menu.svg b/src/assets/img/board/menu.svg new file mode 100644 index 0000000..17e9933 --- /dev/null +++ b/src/assets/img/board/menu.svg @@ -0,0 +1,3 @@ + + +