From efa34e30beb679f07dcefd4478d828dc1f5b48c4 Mon Sep 17 00:00:00 2001 From: Florian THIERRY Date: Fri, 4 Mar 2022 23:47:52 +0100 Subject: [PATCH] Lot of visual improvements --- .../active-list-tasks.component.scss | 31 ++++----- .../task-display/task-display.component.html | 20 +++++- .../task-display/task-display.component.scss | 65 ++++++++++++------ .../task-display/task-display.component.ts | 18 ++++- src/app/app.module.ts | 4 +- .../components/header/header.component.html | 11 +-- .../components/header/header.component.scss | 2 + src/assets/images/to-do.png | Bin 0 -> 1381 bytes src/favicon.ico | Bin 948 -> 1058 bytes src/styles.scss | 28 ++++++++ 10 files changed, 133 insertions(+), 46 deletions(-) create mode 100644 src/assets/images/to-do.png diff --git a/src/app/active-list-tasks/active-list-tasks.component.scss b/src/app/active-list-tasks/active-list-tasks.component.scss index 2246f4f..ce91fda 100644 --- a/src/app/active-list-tasks/active-list-tasks.component.scss +++ b/src/app/active-list-tasks/active-list-tasks.component.scss @@ -2,31 +2,30 @@ max-width: 50rem; width: 90%; margin: 0 auto; + padding: 2rem; .task { - position: relative; - width: 100%; - height: 2.5rem; - display: flex; - align-items: center; - margin: .5rem 0; - - input { - width: 100%; - height: 100%; - padding: 0 3rem; - border-radius: .1rem; - border-style: none; - background-color: #444; - } - &.new { + position: relative; + width: 100%; + display: flex; + align-items: center; margin-top: 1rem; + height: 2.5rem; mat-icon { position: absolute; left: 1rem; } + + input { + width: 100%; + height: 100%; + padding: 0 3rem; + border-radius: .1rem; + border-style: none; + background-color: #444; + } } } } \ No newline at end of file diff --git a/src/app/active-list-tasks/task-display/task-display.component.html b/src/app/active-list-tasks/task-display/task-display.component.html index 4a36f1b..826406b 100644 --- a/src/app/active-list-tasks/task-display/task-display.component.html +++ b/src/app/active-list-tasks/task-display/task-display.component.html @@ -5,8 +5,26 @@
- +
+
+
+ + +
+
+ + +
+
+
\ No newline at end of file diff --git a/src/app/active-list-tasks/task-display/task-display.component.scss b/src/app/active-list-tasks/task-display/task-display.component.scss index 93b4045..43e618f 100644 --- a/src/app/active-list-tasks/task-display/task-display.component.scss +++ b/src/app/active-list-tasks/task-display/task-display.component.scss @@ -1,15 +1,15 @@ .task { position: relative; width: 100%; - height: 2.5rem; display: flex; align-items: center; - margin: .5rem 0; + margin-bottom: .5rem; + flex-direction: column; + background-color: #444; .header { border-radius: .1rem; height: 2.5rem; - background-color: #444; width: 100%; display: flex; align-items: center; @@ -52,29 +52,52 @@ } .expand { - display: flex; - justify-content: end; - display: flex; - justify-content: center; - align-items: center; - padding: 0; margin-right: .5rem; + } + } - border-style: solid; - border-width: .1rem; - border-color: rgba(0,0,0, 0); + .body { + height: 0; + visibility: hidden; + transition: height .1s ease-in-out; + display: flex; - width: 2rem; - height: 2rem; - min-width: 2rem; - min-height: 2rem; + &.expanded { + height: 20rem; + visibility: visible; + width: 100%; + } - transition: background-color .2s ease-out, - border-color .2s ease-out; + .container { + flex-grow: 1; + padding: 1rem; + display: flex; + flex-direction: row; - &:hover { - background-color: #666; - border-color: rgb(53, 53, 53); + .description-container { + width: 80%; + height: 100%; + display: flex; + flex-direction: column; + + textarea { + flex-grow: 1; + border: 1px solid #444; + background-color: #4a4a4a; + resize: none; + } + } + + .actions { + display: flex; + flex-grow: 1; + background-color: gray; + height: 100%; + flex-wrap: wrap; + max-width: 20%; + justify-content: space-around; + align-items: flex-start; + padding: 1rem; } } } diff --git a/src/app/active-list-tasks/task-display/task-display.component.ts b/src/app/active-list-tasks/task-display/task-display.component.ts index 1b7748a..4f67e20 100644 --- a/src/app/active-list-tasks/task-display/task-display.component.ts +++ b/src/app/active-list-tasks/task-display/task-display.component.ts @@ -1,8 +1,9 @@ -import { AfterViewInit, Component, Input, OnInit } from '@angular/core'; +import { AfterViewInit, Component, EventEmitter, Input, OnInit, Output } from '@angular/core'; import { FormControl } from '@angular/forms'; import { Task } from 'src/app/core/entity/task'; import { TaskListService } from 'src/app/core/service/task-list.service'; + @Component({ selector: 'app-task-display', templateUrl: './task-display.component.html', @@ -11,13 +12,26 @@ import { TaskListService } from 'src/app/core/service/task-list.service'; export class TaskDisplayComponent implements AfterViewInit { @Input() task?: Task; titleControl = new FormControl(this.task?.title); + isExpanded = false; constructor( private _taskListService: TaskListService ) {} - ngAfterViewInit(): void { this.titleControl.setValue(this?.task?.title); } + + expand(): void { + this.isExpanded = !this.isExpanded; + } + + getExpendedClass(): string { + let result = 'body'; + + if (this.isExpanded) { + result += ' expanded'; + } + return result; + } } diff --git a/src/app/app.module.ts b/src/app/app.module.ts index c1e41c8..49c5092 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -22,6 +22,7 @@ import { TaskDisplayComponent } from './active-list-tasks/task-display/task-disp import {MatCheckboxModule} from '@angular/material/checkbox'; import { TaskListService } from './core/service/task-list.service'; import { StorePersistenceService } from './core/service/store-persistence.service'; +import {MatTooltipModule} from '@angular/material/tooltip'; @NgModule({ declarations: [ @@ -45,7 +46,8 @@ import { StorePersistenceService } from './core/service/store-persistence.servic MatButtonModule, ReactiveFormsModule, MatSnackBarModule, - MatCheckboxModule + MatCheckboxModule, + MatTooltipModule ], providers: [ CookieService, diff --git a/src/app/core/components/header/header.component.html b/src/app/core/components/header/header.component.html index b841047..2fffdb5 100644 --- a/src/app/core/components/header/header.component.html +++ b/src/app/core/components/header/header.component.html @@ -1,15 +1,16 @@