diff --git a/angular.json b/angular.json index f4d40fe..5a80885 100644 --- a/angular.json +++ b/angular.json @@ -31,6 +31,7 @@ "src/assets" ], "styles": [ + "./node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css", "src/styles.scss" ], "scripts": [] @@ -99,6 +100,7 @@ "src/assets" ], "styles": [ + "./node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css", "src/styles.scss" ], "scripts": [] diff --git a/package-lock.json b/package-lock.json index 54058b9..ab7bb5b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,10 +9,12 @@ "version": "0.0.0", "dependencies": { "@angular/animations": "~12.2.0", + "@angular/cdk": "^12.2.10", "@angular/common": "~12.2.0", "@angular/compiler": "~12.2.0", "@angular/core": "~12.2.0", "@angular/forms": "~12.2.0", + "@angular/material": "^12.2.10", "@angular/platform-browser": "~12.2.0", "@angular/platform-browser-dynamic": "~12.2.0", "@angular/router": "~12.2.0", @@ -290,6 +292,28 @@ "@angular/core": "12.2.10" } }, + "node_modules/@angular/cdk": { + "version": "12.2.10", + "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-12.2.10.tgz", + "integrity": "sha512-jF/tyZXcAS0i11aH8061lMf/ofKs8U52smm/q7k5llTj/NvMZl4s6o3SmdYYE/ByljvCzObz+2j3TzJS/ioDFg==", + "dependencies": { + "tslib": "^2.2.0" + }, + "optionalDependencies": { + "parse5": "^5.0.0" + }, + "peerDependencies": { + "@angular/common": "^12.0.0 || ^13.0.0-0", + "@angular/core": "^12.0.0 || ^13.0.0-0", + "rxjs": "^6.5.3 || ^7.0.0" + } + }, + "node_modules/@angular/cdk/node_modules/parse5": { + "version": "5.1.1", + "resolved": "https://registry.npmjs.org/parse5/-/parse5-5.1.1.tgz", + "integrity": "sha512-ugq4DFI0Ptb+WWjAdOK16+u/nHfiIrcE+sh8kZMaM0WllQKLI9rOUq6c2b7cwPkXdzfQESqvoqK6ug7U/Yyzug==", + "optional": true + }, "node_modules/@angular/cli": { "version": "12.2.10", "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-12.2.10.tgz", @@ -428,6 +452,22 @@ "rxjs": "^6.5.3 || ^7.0.0" } }, + "node_modules/@angular/material": { + "version": "12.2.10", + "resolved": "https://registry.npmjs.org/@angular/material/-/material-12.2.10.tgz", + "integrity": "sha512-iC0EA8ogpn/KJ+kr3TEfQJLYPAtrguMr21KAGwtKOOLng1HiEhH6qEqlc0PPYUUQ06i+8nJr/WWfL0ORKXh3fg==", + "dependencies": { + "tslib": "^2.2.0" + }, + "peerDependencies": { + "@angular/animations": "^12.0.0 || ^13.0.0-0", + "@angular/cdk": "12.2.10", + "@angular/common": "^12.0.0 || ^13.0.0-0", + "@angular/core": "^12.0.0 || ^13.0.0-0", + "@angular/forms": "^12.0.0 || ^13.0.0-0", + "rxjs": "^6.5.3 || ^7.0.0" + } + }, "node_modules/@angular/platform-browser": { "version": "12.2.10", "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-12.2.10.tgz", @@ -16235,6 +16275,23 @@ "tslib": "^2.2.0" } }, + "@angular/cdk": { + "version": "12.2.10", + "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-12.2.10.tgz", + "integrity": "sha512-jF/tyZXcAS0i11aH8061lMf/ofKs8U52smm/q7k5llTj/NvMZl4s6o3SmdYYE/ByljvCzObz+2j3TzJS/ioDFg==", + "requires": { + "parse5": "^5.0.0", + "tslib": "^2.2.0" + }, + "dependencies": { + "parse5": { + "version": "5.1.1", + "resolved": "https://registry.npmjs.org/parse5/-/parse5-5.1.1.tgz", + "integrity": "sha512-ugq4DFI0Ptb+WWjAdOK16+u/nHfiIrcE+sh8kZMaM0WllQKLI9rOUq6c2b7cwPkXdzfQESqvoqK6ug7U/Yyzug==", + "optional": true + } + } + }, "@angular/cli": { "version": "12.2.10", "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-12.2.10.tgz", @@ -16324,6 +16381,14 @@ "tslib": "^2.2.0" } }, + "@angular/material": { + "version": "12.2.10", + "resolved": "https://registry.npmjs.org/@angular/material/-/material-12.2.10.tgz", + "integrity": "sha512-iC0EA8ogpn/KJ+kr3TEfQJLYPAtrguMr21KAGwtKOOLng1HiEhH6qEqlc0PPYUUQ06i+8nJr/WWfL0ORKXh3fg==", + "requires": { + "tslib": "^2.2.0" + } + }, "@angular/platform-browser": { "version": "12.2.10", "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-12.2.10.tgz", diff --git a/package.json b/package.json index 3a2410b..566b065 100644 --- a/package.json +++ b/package.json @@ -11,10 +11,12 @@ "private": true, "dependencies": { "@angular/animations": "~12.2.0", + "@angular/cdk": "^12.2.10", "@angular/common": "~12.2.0", "@angular/compiler": "~12.2.0", "@angular/core": "~12.2.0", "@angular/forms": "~12.2.0", + "@angular/material": "^12.2.10", "@angular/platform-browser": "~12.2.0", "@angular/platform-browser-dynamic": "~12.2.0", "@angular/router": "~12.2.0", @@ -37,4 +39,4 @@ "karma-jasmine-html-reporter": "~1.7.0", "typescript": "~4.3.5" } -} +} \ No newline at end of file diff --git a/src/app/add-task/add-task.component.html b/src/app/add-task/add-task.component.html index 1179209..7cdaad3 100644 --- a/src/app/add-task/add-task.component.html +++ b/src/app/add-task/add-task.component.html @@ -1 +1,3 @@ -

add-task works!

+
+ add +
\ No newline at end of file diff --git a/src/app/app.module.ts b/src/app/app.module.ts index b8db914..93d6c0b 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -6,6 +6,8 @@ import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; import { MainPageComponent } from './main-page/main-page.component'; import { AddTaskComponent } from './add-task/add-task.component'; +import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; +import {MatIconModule} from '@angular/material/icon'; @NgModule({ declarations: [ @@ -15,11 +17,12 @@ import { AddTaskComponent } from './add-task/add-task.component'; ], imports: [ BrowserModule, - AppRoutingModule + AppRoutingModule, + BrowserAnimationsModule, + MatIconModule ], providers: [ CookieService, - ], bootstrap: [AppComponent] }) diff --git a/src/app/main-page/main-page.component.html b/src/app/main-page/main-page.component.html index f7336d5..d7ce6fa 100644 --- a/src/app/main-page/main-page.component.html +++ b/src/app/main-page/main-page.component.html @@ -1,7 +1,12 @@ -
+

Todo List

{{ task.title }}

{{ task.description }}

+
+ add + Ajouter une nouvelle tâche... +
+
\ No newline at end of file diff --git a/src/app/main-page/main-page.component.scss b/src/app/main-page/main-page.component.scss index e69de29..0c1a790 100644 --- a/src/app/main-page/main-page.component.scss +++ b/src/app/main-page/main-page.component.scss @@ -0,0 +1,21 @@ +.component { + #add-task-btn { + border-radius: 3px; + border-width: 1px; + border-color: #AAAAAA; + border-style: solid; + background-color: #FFFFFF; + display: flex; + align-items: center; + padding: 10px 20px; + cursor: pointer; + + mat-icon { + margin: 0 10px; + } + + span { + color: #AAAAAA; + } + } +} \ No newline at end of file diff --git a/src/app/main-page/main-page.component.ts b/src/app/main-page/main-page.component.ts index c6f259d..d99bb79 100644 --- a/src/app/main-page/main-page.component.ts +++ b/src/app/main-page/main-page.component.ts @@ -9,6 +9,7 @@ import { TaskService } from '../core/service/task.service'; }) export class MainPageComponent implements OnInit { tasks: Task[] = []; + isAddingATask = false; constructor( private _taskService: TaskService @@ -18,4 +19,7 @@ export class MainPageComponent implements OnInit { this._taskService.tasks.subscribe(tasks => this.tasks = tasks); } + startTaskAddition(): void { + this.isAddingATask = true; + } } diff --git a/src/index.html b/src/index.html index 5c7fc3a..41e8a3d 100644 --- a/src/index.html +++ b/src/index.html @@ -6,8 +6,11 @@ + + + - + diff --git a/src/styles.scss b/src/styles.scss index 90d4ee0..7e7239a 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -1 +1,4 @@ /* You can add global styles to this file, and also import other style files */ + +html, body { height: 100%; } +body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }