Skip to content

Commit

Permalink
Merge pull request #28 from Vince-F/feature/2-improve-design
Browse files Browse the repository at this point in the history 
Feature: #2 improve design
  • Loading branch information
@Vince-F
Vince-F authored Jun 23, 2019
2 parents 4b8ee0c + 65dbf09 commit 9d2e519
Show file tree
Hide file tree
Showing 10 changed files with 137 additions and 99 deletions.
2 changes: 1 addition & 1 deletion timelog-ui/integrationTests/scenario2.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -136,7 +136,7 @@ test('Clicking on detail button should go to detail view', async t => {

let taskTitle = Selector(".task-details h1");
await t.expect(taskTitle.exists).ok;
await t.expect(taskTitle.innerText).eql("test");
await t.expect(taskTitle.innerText).eql("Task test");

let taskStatus = Selector(".task-details [data-section='status']");
await t.expect(taskStatus.exists).ok;
Expand Down
2 changes: 1 addition & 1 deletion timelog-ui/src/app/app.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<app-toolbar></app-toolbar>

<mat-sidenav-container >
<mat-sidenav #sidenav mode="side" [opened]="opened">
<mat-sidenav #sidenav mode="side" [opened]="opened" class="mat-elevation-z3">
<app-navigation-menu ></app-navigation-menu>
</mat-sidenav>

Expand Down
3 changes: 0 additions & 3 deletions timelog-ui/src/app/components/settings/settings-view/settings-view.component.css
View file
Original file line number Diff line number Diff line change
@@ -1,3 +0,0 @@
.settings-view {
padding: 24px;
}
28 changes: 17 additions & 11 deletions timelog-ui/src/app/components/settings/settings-view/settings-view.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,16 +2,22 @@
Loading...
</div>
<div class="settings-view" *ngIf="loading === false">
<h1>Settings</h1>
<form class="">
<div class="input-full-width">
<mat-checkbox name="isDoneRequiringTimelog" [(ngModel)]="settings.doneRequiresTimelog">Prevent task with no time log to be put to "Done"</mat-checkbox>
</div>
<div class="input-full-width">
<mat-checkbox name="allowUndone" [(ngModel)]="settings.allowUndone">Allow task to be undone</mat-checkbox>
</div>
</form>
<div>
<button mat-raised-button (click)="saveSettings()" color="primary">Save</button>
<div class="content-view-title mat-elevation-z2">
<h1>Settings</h1>
<div class="actions">
<button mat-button (click)="saveSettings()">
<mat-icon>save</mat-icon>
</button>
</div>
</div>
<div class="content-view-body">
<form class="">
<div class="input-full-width">
<mat-checkbox color="primary" name="isDoneRequiringTimelog" [(ngModel)]="settings.doneRequiresTimelog">Prevent task with no time log to be put to "Done"</mat-checkbox>
</div>
<div class="input-full-width">
<mat-checkbox color="primary" name="allowUndone" [(ngModel)]="settings.allowUndone">Allow task to be undone</mat-checkbox>
</div>
</form>
</div>
</div>
16 changes: 0 additions & 16 deletions timelog-ui/src/app/components/tasks/task-detail/task-detail.component.css
View file
Original file line number Diff line number Diff line change
@@ -1,19 +1,3 @@
.task-details {
padding: 24px;
}

.detail-view-header {
display: flex;
}

.detail-view-header div {
flex: 1;
}

.detail-view-header .actions {
text-align: right;
}

.timelog-entry .timelog-content {
flex: 1;
}
Expand Down
66 changes: 36 additions & 30 deletions timelog-ui/src/app/components/tasks/task-detail/task-detail.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,46 +21,52 @@
</mat-card-actions>
</mat-card>
</div>
<div class="task-details" *ngIf="loading === false && errors.length === 0">
<div class="detail-view-header">
<div>
<div class="task-details content-view" *ngIf="loading === false && errors.length === 0">
<div class="detail-view-header content-view-title mat-elevation-z2">
<div class="actions-left">
<button mat-button (click)="goToTaskList()">
<mat-icon>arrow_back</mat-icon>
</button>
</div>
<div class="title-area">

<h1>Task {{task.name}}</h1>
</div>
<div class="actions">
<!-- <button mat-button (click)="deleteTask()">
<mat-icon>delete</mat-icon>
</button> -->
</div>
</div>
<h1>
{{task.name}}
</h1>
<p data-section="status">
Status: {{done?'Done':'Pending'}}
</p>
<p data-section="totalTime">
Total time spent: {{totalSpentTime}}
</p>
<div class="content-view-body">
<h2>
{{task.name}}
</h2>
<p data-section="status">
Status: {{done?'Done':'Pending'}}
</p>
<p data-section="totalTime">
Total time spent: {{totalSpentTime}}
</p>

<div class="">
<h3>Activity</h3>
<mat-list class="timelog-entry">
<ng-container *ngFor="let timelog of timeLogs">
<mat-list-item class="timelog-entry">
<span mat-line class="timelog-content">
<strong>{{getTimelogFormattedDuration(timelog)}}</strong> <small> on {{getTimelogFormattedDate(timelog)}}
</small>
</span>
<p class="timelog-actions">
<button mat-icon-button (click)="deleteTimeLog(timelog)">
<mat-icon aria-label="Delete time log">delete</mat-icon>
</button>
</p>
</mat-list-item>
<mat-divider></mat-divider>
</ng-container>
</mat-list>
<div class="">
<h3>Activity</h3>
<mat-list class="timelog-entry">
<ng-container *ngFor="let timelog of timeLogs">
<mat-list-item class="timelog-entry">
<span mat-line class="timelog-content">
<strong>{{getTimelogFormattedDuration(timelog)}}</strong> <small> on {{getTimelogFormattedDate(timelog)}}
</small>
</span>
<p class="timelog-actions">
<button mat-icon-button (click)="deleteTimeLog(timelog)">
<mat-icon aria-label="Delete time log">delete</mat-icon>
</button>
</p>
</mat-list-item>
<mat-divider></mat-divider>
</ng-container>
</mat-list>
</div>
</div>
</div>
1 change: 0 additions & 1 deletion timelog-ui/src/app/components/tasks/task-list/task-list.component.css
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
.task-list {
display: flex;
padding: 24px;
height: 100%;
box-sizing: border-box;
flex-direction: column;
Expand Down
76 changes: 40 additions & 36 deletions timelog-ui/src/app/components/tasks/task-list/task-list.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,42 +6,46 @@
<div *ngIf="isLoading === true">
Loading...
</div>
<div class="task-list" *ngIf="isLoading === false && errors.length === 0">
<div class="list-header">
<h1>My tasks</h1>
<mat-chip-list (mousedown)="preventChipFocus($event)">
<mat-chip data-section="pending-chip" (click)="setListSelection('Pending')" class="chip-with-badge" [selected]="listSelection === 'Pending'" color="primary" matBadge="{{filteredLists.get('Pending').length}}">Pending</mat-chip>
<mat-chip data-section="done-chip" (click)="setListSelection('Done')" class="chip-with-badge" [selected]="listSelection === 'Done'" color="primary" matBadge="{{filteredLists.get('Done').length}}">Done</mat-chip>
<mat-chip data-section="all-chip" (click)="setListSelection('All')" class="chip-with-badge" [selected]="listSelection === 'All'" color="primary" matBadge="{{filteredLists.get('All').length}}">All</mat-chip>
</mat-chip-list>
<div class="content-view" *ngIf="isLoading === false && errors.length === 0">
<div class="content-view-title mat-elevation-z2">
<h1>My tasks</h1>
</div>
<div class="list-container">
<mat-list>
<ng-container *ngFor="let task of filteredLists.get(listSelection)">
<mat-list-item class="task-entry">
<h4 mat-line>{{task.name}}</h4>
<p class="task-actions">
<button data-section="add-timelog-button" mat-icon-button (click)="addTimeLog(task)">
<mat-icon aria-label="Log time to task">add_alarm</mat-icon>
</button>
<button data-section="detail-button" mat-icon-button (click)="displayTaskDetails(task)">
<mat-icon aria-label="View task detail">info</mat-icon>
</button>
<button data-section="done-button" *ngIf="!task.done" mat-icon-button (click)="markTaskDone(task)">
<mat-icon aria-label="Mark task done">check_circle</mat-icon>
</button>
<button *ngIf="task.done && taskCanBeUndone|async" mat-icon-button (click)="markTaskUndone(task)">
<mat-icon aria-label="Mark task undone">highlight_off</mat-icon>
</button>
</p>
</mat-list-item>
<mat-divider></mat-divider>
</ng-container>
</mat-list>
</div>
<div class="bottom-actions">
<button mat-mini-fab color="primary" (click)="addTask()">
<mat-icon aria-label="Add a task action button">add</mat-icon>
</button>
<div class="task-list content-view-body" >
<div class="list-header">
<mat-chip-list>
<mat-chip data-section="pending-chip" (click)="setListSelection('Pending')" class="chip-with-badge" [selected]="listSelection === 'Pending'" color="primary" matBadge="{{filteredLists.get('Pending').length}}">Pending</mat-chip>
<mat-chip data-section="done-chip" (click)="setListSelection('Done')" class="chip-with-badge" [selected]="listSelection === 'Done'" color="primary" matBadge="{{filteredLists.get('Done').length}}">Done</mat-chip>
<mat-chip data-section="all-chip" (click)="setListSelection('All')" class="chip-with-badge" [selected]="listSelection === 'All'" color="primary" matBadge="{{filteredLists.get('All').length}}">All</mat-chip>
</mat-chip-list>
</div>
<div class="list-container">
<mat-list>
<ng-container *ngFor="let task of filteredLists.get(listSelection)">
<mat-list-item class="task-entry">
<h4 mat-line>{{task.name}}</h4>
<p class="task-actions">
<button data-section="add-timelog-button" mat-icon-button (click)="addTimeLog(task)">
<mat-icon aria-label="Log time to task">add_alarm</mat-icon>
</button>
<button data-section="detail-button" mat-icon-button (click)="displayTaskDetails(task)">
<mat-icon aria-label="View task detail">info</mat-icon>
</button>
<button data-section="done-button" *ngIf="!task.done" mat-icon-button (click)="markTaskDone(task)">
<mat-icon aria-label="Mark task done">check_circle</mat-icon>
</button>
<button *ngIf="task.done && taskCanBeUndone|async" mat-icon-button (click)="markTaskUndone(task)">
<mat-icon aria-label="Mark task undone">highlight_off</mat-icon>
</button>
</p>
</mat-list-item>
<mat-divider></mat-divider>
</ng-container>
</mat-list>
</div>
<div class="bottom-actions">
<button mat-mini-fab color="primary" (click)="addTask()">
<mat-icon aria-label="Add a task action button">add</mat-icon>
</button>
</div>
</div>
</div>
39 changes: 39 additions & 0 deletions timelog-ui/src/content.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
.content-view {
display: flex;
flex-direction: column;
height: 100%;
}

.content-view-title {
flex: 0;
display: flex;
padding: 16px;
background: rgba(255, 255, 255, 0.78);
}

.content-view-title h1,
.content-view-title .title-area {
flex: 1;
}

.content-view-title h1 {
margin: 0;
font-size: 24px;
margin-top: 4px;
display: inline-block;
}

.content-view-title .actions-left {
flex: 0;
text-align: left;
}

.content-view-title .actions {
flex: 0;
text-align: right;
}

.content-view-body {
padding: 24px;
flex: 1;
}
3 changes: 3 additions & 0 deletions timelog-ui/src/styles.css
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,15 @@
/* You can add global styles to this file, and also import other style files */
@import "~@angular/material/prebuilt-themes/indigo-pink.css";
@import "https://fonts.googleapis.com/icon?family=Material+Icons";
@import url('https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,700,700i');
@import "./form.css";
@import "./content.css";

html, body{
margin: 0;
height: 100%;
width: 100%;
font-family: 'Roboto', sans-serif;
}

app-root{
Expand Down

0 comments on commit 9d2e519

Please sign in to comment.