diff options
10 files changed, 106 insertions, 35 deletions
diff --git a/Timeline/ClientApp/.prettierrc.json b/Timeline/ClientApp/.prettierrc.json new file mode 100644 index 00000000..30371183 --- /dev/null +++ b/Timeline/ClientApp/.prettierrc.json @@ -0,0 +1,3 @@ +{ + "printWidth": 140 +} diff --git a/Timeline/ClientApp/src/app/app.module.ts b/Timeline/ClientApp/src/app/app.module.ts index 3247cf92..86511be8 100644 --- a/Timeline/ClientApp/src/app/app.module.ts +++ b/Timeline/ClientApp/src/app/app.module.ts @@ -12,12 +12,14 @@ import { import { AppComponent } from './app.component'; import { HomeComponent } from './home/home.component'; import { TodoListPageComponent } from './todo-list-page/todo-list-page.component'; +import { TodoItemComponent } from './todo-item/todo-item.component'; @NgModule({ declarations: [ AppComponent, HomeComponent, - TodoListPageComponent + TodoListPageComponent, + TodoItemComponent ], imports: [ BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }), diff --git a/Timeline/ClientApp/src/app/todo-item/todo-item.component.css b/Timeline/ClientApp/src/app/todo-item/todo-item.component.css new file mode 100644 index 00000000..ef952a04 --- /dev/null +++ b/Timeline/ClientApp/src/app/todo-item/todo-item.component.css @@ -0,0 +1,27 @@ +.item-card { + padding: 0; + display: flex; + overflow: hidden; +} + +.item-color-block { + width: 15px; + align-self: stretch; + flex: 0 0 auto; +} + +.item-icon { + width: 1.2em; + height: 1.2em; + vertical-align: -0.25em; +} + +.item-title { + vertical-align: middle; +} + +.item-detail-button { + width: unset; + height: unset; + line-height: unset; +} diff --git a/Timeline/ClientApp/src/app/todo-item/todo-item.component.html b/Timeline/ClientApp/src/app/todo-item/todo-item.component.html new file mode 100644 index 00000000..624586cb --- /dev/null +++ b/Timeline/ClientApp/src/app/todo-item/todo-item.component.html @@ -0,0 +1,11 @@ +<mat-card class="mat-elevation-z2 item-card"> + <span class="item-color-block" [class.color-block-closed]="item.closed" [class.color-block-open]="!item.closed"></span> + <!-- Do not move the margin style to class because there is some preset classes on mat-card children making it invalid. --> + <div class="mat-h3 item-body-box" style="margin: 5px;"> + <img class="item-icon" [src]="item.iconUrl" /> + <span class="item-title">{{ item.id }}. {{ item.title }}</span> + <a mat-icon-button class="item-detail-button" [href]="item.detailUrl"> + <mat-icon>arrow_forward</mat-icon> + </a> + </div> +</mat-card> diff --git a/Timeline/ClientApp/src/app/todo-item/todo-item.component.spec.ts b/Timeline/ClientApp/src/app/todo-item/todo-item.component.spec.ts new file mode 100644 index 00000000..7ec7d768 --- /dev/null +++ b/Timeline/ClientApp/src/app/todo-item/todo-item.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { TodoItemComponent } from './todo-item.component'; + +describe('TodoItemComponent', () => { + let component: TodoItemComponent; + let fixture: ComponentFixture<TodoItemComponent>; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ TodoItemComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(TodoItemComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/Timeline/ClientApp/src/app/todo-item/todo-item.component.ts b/Timeline/ClientApp/src/app/todo-item/todo-item.component.ts new file mode 100644 index 00000000..27d57e28 --- /dev/null +++ b/Timeline/ClientApp/src/app/todo-item/todo-item.component.ts @@ -0,0 +1,14 @@ +import { Component, OnInit, Input } from '@angular/core'; +import { WorkItem } from '../todo-list-page/todo-list.service'; + +@Component({ + selector: 'app-todo-item', + templateUrl: './todo-item.component.html', + styleUrls: ['./todo-item.component.css', '../todo-list-page/todo-list-color-block.css'] +}) +export class TodoItemComponent { + + @Input() item: WorkItem; + + +} diff --git a/Timeline/ClientApp/src/app/todo-list-page/todo-list-color-block.css b/Timeline/ClientApp/src/app/todo-list-page/todo-list-color-block.css new file mode 100644 index 00000000..5e0d4ba9 --- /dev/null +++ b/Timeline/ClientApp/src/app/todo-list-page/todo-list-color-block.css @@ -0,0 +1,7 @@ +.color-block-open { + background: red; +} + +.color-block-closed { + background: green; +} diff --git a/Timeline/ClientApp/src/app/todo-list-page/todo-list-page.component.css b/Timeline/ClientApp/src/app/todo-list-page/todo-list-page.component.css index ed260d5c..754b786e 100644 --- a/Timeline/ClientApp/src/app/todo-list-page/todo-list-page.component.css +++ b/Timeline/ClientApp/src/app/todo-list-page/todo-list-page.component.css @@ -5,29 +5,20 @@ .item-box { display: flex; width: 100%; - padding: 5px; box-sizing: border-box; } .first-item-box { justify-content: space-between; + padding: 0 0 5px 5px; } -.item-card { - display: flex; - align-items: center; -} - -.item-img { - padding: 1px; - background: white; - border-radius: 3px; +.non-first-item-box { + padding: 5px; } -.item-title { - padding-left: 5px; - color: black; - text-decoration: none; +.space { + flex: 1 4 20px; } .sample-box { @@ -35,7 +26,7 @@ align-self: flex-start; } -.sample-container { +.sample-item { display: flex; align-items: center; } @@ -46,11 +37,3 @@ height: 1em; margin-right: 2px; } - -.sample-color-block-open { - background: tomato; -} - -.sample-color-block-closed { - background: mediumspringgreen; -} diff --git a/Timeline/ClientApp/src/app/todo-list-page/todo-list-page.component.html b/Timeline/ClientApp/src/app/todo-list-page/todo-list-page.component.html index 0dcc8a94..3b4809ae 100644 --- a/Timeline/ClientApp/src/app/todo-list-page/todo-list-page.component.html +++ b/Timeline/ClientApp/src/app/todo-list-page/todo-list-page.component.html @@ -2,18 +2,17 @@ <mat-list> <mat-list-item *ngFor="let item of items; let i = index" style="height:unset;"> - <div class="item-box" [class.first-item-box]="i === 0"> - <mat-card class="mat-elevation-z2 item-card" [style.background]="item.closed ? 'mediumspringgreen' : 'tomato'" - [class.align-self-bottom]="i === 0"> - <img class="item-img" width="18" height="18" [src]="item.iconUrl"> - <a class="mat-h3 item-title" [href]="item.detailUrl">{{item.id}} {{item.title}}</a> - </mat-card> + <div class="item-box" [class.first-item-box]="i === 0" [class.non-first-item-box]="i !== 0"> + <app-todo-item [class.align-self-bottom]="i === 0" [item]="item"></app-todo-item> + <div class="space"></div> <div class="sample-box" *ngIf="i === 0"> - <div class="mat-caption sample-container"> - <span class="sample-color-block sample-color-block-open"></span> means working now. + <div class="mat-caption sample-item"> + <span class="sample-color-block color-block-open"></span> + <span> means working now.</span> </div> - <div class="mat-caption sample-container"> - <span class="sample-color-block sample-color-block-closed"></span> means completed. + <div class="mat-caption sample-item"> + <span class="sample-color-block color-block-closed"></span> + <span> means completed.</span> </div> <div class="mat-caption">click on item to see details.</div> </div> diff --git a/Timeline/ClientApp/src/app/todo-list-page/todo-list-page.component.ts b/Timeline/ClientApp/src/app/todo-list-page/todo-list-page.component.ts index 06f49923..e58cca7d 100644 --- a/Timeline/ClientApp/src/app/todo-list-page/todo-list-page.component.ts +++ b/Timeline/ClientApp/src/app/todo-list-page/todo-list-page.component.ts @@ -4,7 +4,7 @@ import { TodoListService, WorkItem } from './todo-list.service'; @Component({ selector: 'app-todo-list-page', templateUrl: './todo-list-page.component.html', - styleUrls: ['./todo-list-page.component.css'] + styleUrls: ['./todo-list-page.component.css', './todo-list-color-block.css'] }) export class TodoListPageComponent implements OnInit { |