mirror of
https://github.com/richard-loafle/fuse-angular.git
synced 2025-04-15 21:05:13 +00:00
115 lines
4.6 KiB
HTML
115 lines
4.6 KiB
HTML
<div *ngIf="!todo" fxLayout="column" fxLayoutAlign="center center" fxFlex>
|
|
<md-icon class="s-120 mb-12 select-todo-icon" *fuseIfOnDom
|
|
[@animate]="{value:'*',params:{delay:'300ms',scale:'0.2'}}">check_box
|
|
</md-icon>
|
|
<span class="hint-text mat-h1 select-todo-text" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'400ms'}}">Select
|
|
a todo
|
|
</span>
|
|
</div>
|
|
|
|
<div *ngIf="todo">
|
|
|
|
<div class="todo-header" fxLayout="row" fxLayoutAlign="space-between center">
|
|
|
|
<button md-button class="toggle-complete-button p-0" (click)="toggleCompleted($event)"
|
|
aria-label="Toggle completed" fxFlex="0 1 auto">
|
|
<md-icon *ngIf="todo.completed">check_box</md-icon>
|
|
<md-icon *ngIf="!todo.completed">check_box_outline_blank</md-icon>
|
|
<span>Mark as Done</span>
|
|
</button>
|
|
|
|
<div class="actions" fxLayout="row" fxLayoutAlign="start center">
|
|
|
|
<button md-button class="mat-icon-button" (click)="toggleDeleted($event)" aria-label="Toggle delete">
|
|
<md-icon *ngIf="todo.deleted">delete_forever</md-icon>
|
|
<md-icon *ngIf="!todo.deleted">delete</md-icon>
|
|
</button>
|
|
|
|
<button md-button class="mat-icon-button" (click)="toggleImportant($event)" aria-label="Toggle important">
|
|
<md-icon *ngIf="todo.important">error</md-icon>
|
|
<md-icon *ngIf="!todo.important">error_outline</md-icon>
|
|
</button>
|
|
|
|
<button md-button class="mat-icon-button" (click)="toggleStar($event)" aria-label="Toggle star">
|
|
<md-icon *ngIf="todo.starred">star</md-icon>
|
|
<md-icon *ngIf="!todo.starred">star_outline</md-icon>
|
|
</button>
|
|
|
|
<button md-icon-button [mdMenuTriggerFor]="labelMenu" fxFlex="0 1 auto">
|
|
<md-icon>label</md-icon>
|
|
</button>
|
|
|
|
<md-menu #labelMenu="mdMenu">
|
|
<button md-menu-item *ngFor="let tag of tags"
|
|
(click)="toggleTagOnTodo(tag.id)">
|
|
{{tag.title}}
|
|
</button>
|
|
</md-menu>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="todo-content">
|
|
|
|
<form [formGroup]="todoForm" (submit)="addTodo()">
|
|
|
|
<md-input-container class="title mt-8" floatPlaceholder="never" fxFill>
|
|
<textarea mdInput
|
|
#titleInput
|
|
name="title"
|
|
formControlName="title"
|
|
placeholder="Title"
|
|
mdTextareaAutosize
|
|
mdAutosizeMinRows="1"
|
|
mdAutosizeMaxRows="2"
|
|
required>
|
|
</textarea>
|
|
</md-input-container>
|
|
|
|
<div class="tags mb-24" fxFlexFill fxLayout="row" fxLayoutWrap>
|
|
<div class="tag" fxLayout="row" fxLayoutAlign="start center" *ngFor="let tagId of todo.tags">
|
|
|
|
<div class="tag-color" [ngStyle]="{'background-color': tags | getById:tagId:'color'}"></div>
|
|
|
|
<div class="tag-label">{{tags | getById:tagId:'title'}}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="dates" fxFlexFill fxLayout="column" fxLayout.gt-xs="row">
|
|
|
|
<md-form-field class="mr-sm-24" fxFlex>
|
|
<input mdInput [mdDatepicker]="startDatePicker" placeholder="Start Date">
|
|
<md-datepicker-toggle mdSuffix [for]="startDatePicker"></md-datepicker-toggle>
|
|
<md-datepicker #startDatePicker></md-datepicker>
|
|
</md-form-field>
|
|
|
|
<md-form-field fxFlex>
|
|
<input mdInput [mdDatepicker]="dueDatePicker" placeholder="Due Date">
|
|
<md-datepicker-toggle mdSuffix [for]="dueDatePicker"></md-datepicker-toggle>
|
|
<md-datepicker #dueDatePicker></md-datepicker>
|
|
</md-form-field>
|
|
|
|
</div>
|
|
|
|
<md-input-container class="" fxFill>
|
|
<textarea mdInput #notes
|
|
name="notes"
|
|
formControlName="notes"
|
|
placeholder="Notes"
|
|
maxlength="500"
|
|
mdTextareaAutosize
|
|
mdAutosizeMinRows="1"
|
|
mdAutosizeMaxRows="6">
|
|
</textarea>
|
|
<md-hint align="end">{{notes.value.length}} / 500</md-hint>
|
|
</md-input-container>
|
|
|
|
<button *ngIf="formType === 'new'"
|
|
md-raised-button class="mat-accent"
|
|
[disabled]="todoForm.invalid">SAVE
|
|
</button>
|
|
</form>
|
|
|
|
</div>
|
|
</div>
|