mirror of
https://github.com/richard-loafle/fuse-angular.git
synced 2025-01-08 03:25:08 +00:00
(apps/tasks) Visual improvements
(apps/contacts) Tweaked the hover color on contacts list for better consistency
This commit is contained in:
sercan
parent
4ccce1b423
commit
7e430a269c
|
|
@ -79,8 +79,9 @@
|
|||
</ng-container>
|
||||
<!-- Contact -->
|
||||
<div
|
||||
class="z-20 flex items-center px-6 py-4 md:px-8 cursor-pointer hover:bg-hover border-b"
|
||||
[ngClass]="{'bg-primary-50 dark:bg-hover': selectedContact && selectedContact.id === contact.id}"
|
||||
class="z-20 flex items-center px-6 py-4 md:px-8 cursor-pointer border-b"
|
||||
[ngClass]="{'hover:bg-gray-100 dark:hover:bg-hover': !selectedContact || selectedContact.id !== contact.id,
|
||||
'bg-primary-50 dark:bg-hover': selectedContact && selectedContact.id === contact.id}"
|
||||
(click)="goToContact(contact.id)">
|
||||
<div class="flex flex-0 items-center justify-center w-10 h-10 rounded-full overflow-hidden">
|
||||
<ng-container *ngIf="contact.avatar">
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@
|
|||
<div class="flex flex-col flex-auto">
|
||||
|
||||
<!-- Header -->
|
||||
<div class="flex flex-col sm:flex-row items-start sm:items-center sm:justify-between py-8 px-6 md:px-8 border-b">
|
||||
<div class="flex flex-col sm:flex-row items-start sm:items-center sm:justify-between py-8 px-6 md:px-8">
|
||||
<!-- Title -->
|
||||
<div>
|
||||
<div class="text-4xl font-extrabold tracking-tight leading-none">Tasks</div>
|
||||
|
|
@ -63,101 +63,97 @@
|
|||
(cdkDropListDropped)="dropped($event)">
|
||||
|
||||
<!-- Task -->
|
||||
<div
|
||||
[id]="'task-' + task.id"
|
||||
class="group w-full h-16 select-none hover:bg-gray-50 dark:hover:bg-hover"
|
||||
*ngFor="let task of tasks; trackBy: trackByFn"
|
||||
[ngClass]="{'text-lg font-semibold bg-gray-100 dark:bg-card': task.type === 'section',
|
||||
'text-hint': task.completed}"
|
||||
cdkDrag
|
||||
[cdkDragLockAxis]="'y'">
|
||||
|
||||
<!-- Drag preview -->
|
||||
<ng-container *ngFor="let task of tasks; let first = first; trackBy: trackByFn">
|
||||
<div
|
||||
class="flex flex-0 w-0 h-0"
|
||||
*cdkDragPreview></div>
|
||||
[id]="'task-' + task.id"
|
||||
class="group w-full select-none hover:bg-gray-100 dark:hover:bg-hover"
|
||||
[ngClass]="{'h-12 text-lg font-semibold bg-gray-50 dark:bg-transparent': task.type === 'section',
|
||||
'h-16': task.type === 'task',
|
||||
'text-hint': task.completed}"
|
||||
[class.border-t]="first"
|
||||
cdkDrag
|
||||
[cdkDragLockAxis]="'y'">
|
||||
|
||||
<!-- Task content -->
|
||||
<div class="relative flex items-center h-full pl-10">
|
||||
|
||||
<!-- Selected indicator -->
|
||||
<ng-container *ngIf="selectedTask && selectedTask.id === task.id">
|
||||
<div class="z-10 absolute right-0 flex flex-0 w-1 h-full bg-primary"></div>
|
||||
</ng-container>
|
||||
|
||||
<!-- Drag handle -->
|
||||
<!-- Drag preview -->
|
||||
<div
|
||||
class="md:hidden absolute flex items-center justify-center inset-y-0 left-0 w-8 cursor-move md:group-hover:flex"
|
||||
cdkDragHandle>
|
||||
<mat-icon
|
||||
class="icon-size-5 text-hint"
|
||||
[svgIcon]="'heroicons_solid:menu'"></mat-icon>
|
||||
</div>
|
||||
class="flex flex-0 w-0 h-0"
|
||||
*cdkDragPreview></div>
|
||||
|
||||
<!-- Complete task button -->
|
||||
<button
|
||||
class="mr-2 -ml-2.5 leading-none"
|
||||
*ngIf="task.type === 'task'"
|
||||
(click)="toggleCompleted(task)"
|
||||
mat-icon-button>
|
||||
<ng-container *ngIf="task.completed">
|
||||
<mat-icon
|
||||
class="text-primary"
|
||||
[svgIcon]="'heroicons_outline:check-circle'"></mat-icon>
|
||||
</ng-container>
|
||||
<ng-container *ngIf="!task.completed">
|
||||
<mat-icon
|
||||
class="text-hint"
|
||||
[svgIcon]="'heroicons_outline:check-circle'"></mat-icon>
|
||||
</ng-container>
|
||||
</button>
|
||||
<!-- Task content -->
|
||||
<div class="relative flex items-center h-full pl-10">
|
||||
|
||||
<!-- Task link -->
|
||||
<a
|
||||
class="flex flex-auto items-center min-w-0 h-full pr-7"
|
||||
[routerLink]="[task.id]">
|
||||
|
||||
<!-- Title & Placeholder -->
|
||||
<div class="flex-auto mr-2 truncate">
|
||||
<ng-container *ngIf="task.title">
|
||||
<span>{{task.title}}</span>
|
||||
</ng-container>
|
||||
<ng-container *ngIf="!task.title">
|
||||
<span class="select-none text-hint">{{task.type | titlecase}} title</span>
|
||||
</ng-container>
|
||||
</div>
|
||||
|
||||
<!-- Priority -->
|
||||
<ng-container *ngIf="task.type === 'task'">
|
||||
<div class="w-4 h-4 mr-3">
|
||||
<!-- Low -->
|
||||
<mat-icon
|
||||
class="icon-size-4 text-green-600 dark:text-green-400"
|
||||
*ngIf="task.priority === 0"
|
||||
[svgIcon]="'heroicons_solid:arrow-narrow-down'"
|
||||
[title]="'Low'"></mat-icon>
|
||||
|
||||
<!-- High -->
|
||||
<mat-icon
|
||||
class="icon-size-4 text-red-600 dark:text-red-400"
|
||||
*ngIf="task.priority === 2"
|
||||
[svgIcon]="'heroicons_solid:arrow-narrow-up'"
|
||||
[title]="'High'"></mat-icon>
|
||||
</div>
|
||||
<!-- Selected indicator -->
|
||||
<ng-container *ngIf="selectedTask && selectedTask.id === task.id">
|
||||
<div class="z-10 absolute -top-px right-0 -bottom-px flex flex-0 w-1 bg-primary"></div>
|
||||
</ng-container>
|
||||
|
||||
<!-- Drag handle -->
|
||||
<div
|
||||
class="text-sm whitespace-nowrap text-secondary"
|
||||
*ngIf="task.type === 'task'">
|
||||
{{task.dueDate | date:'LLL dd'}}
|
||||
class="md:hidden absolute flex items-center justify-center inset-y-0 left-0 w-8 cursor-move md:group-hover:flex"
|
||||
cdkDragHandle>
|
||||
<mat-icon
|
||||
class="icon-size-5 text-hint"
|
||||
[svgIcon]="'heroicons_solid:menu'"></mat-icon>
|
||||
</div>
|
||||
|
||||
</a>
|
||||
<!-- Complete task button -->
|
||||
<button
|
||||
class="mr-2 -ml-2.5 leading-none"
|
||||
*ngIf="task.type === 'task'"
|
||||
(click)="toggleCompleted(task)"
|
||||
mat-icon-button>
|
||||
<ng-container *ngIf="task.completed">
|
||||
<mat-icon
|
||||
class="text-primary"
|
||||
[svgIcon]="'heroicons_outline:check-circle'"></mat-icon>
|
||||
</ng-container>
|
||||
<ng-container *ngIf="!task.completed">
|
||||
<mat-icon
|
||||
class="text-hint"
|
||||
[svgIcon]="'heroicons_outline:check-circle'"></mat-icon>
|
||||
</ng-container>
|
||||
</button>
|
||||
|
||||
<!-- Task link -->
|
||||
<a
|
||||
class="flex flex-auto items-center min-w-0 h-full pr-7"
|
||||
[routerLink]="[task.id]">
|
||||
<!-- Title & Placeholder -->
|
||||
<div class="flex-auto mr-2 truncate">
|
||||
<ng-container *ngIf="task.title">
|
||||
<span>{{task.title}}</span>
|
||||
</ng-container>
|
||||
<ng-container *ngIf="!task.title">
|
||||
<span class="select-none text-hint">{{task.type | titlecase}} title</span>
|
||||
</ng-container>
|
||||
</div>
|
||||
<!-- Priority -->
|
||||
<ng-container *ngIf="task.type === 'task'">
|
||||
<div class="w-4 h-4 mr-3">
|
||||
<!-- Low -->
|
||||
<mat-icon
|
||||
class="icon-size-4 text-green-600 dark:text-green-400"
|
||||
*ngIf="task.priority === 0"
|
||||
[svgIcon]="'heroicons_solid:arrow-narrow-down'"
|
||||
[title]="'Low'"></mat-icon>
|
||||
<!-- High -->
|
||||
<mat-icon
|
||||
class="icon-size-4 text-red-600 dark:text-red-400"
|
||||
*ngIf="task.priority === 2"
|
||||
[svgIcon]="'heroicons_solid:arrow-narrow-up'"
|
||||
[title]="'High'"></mat-icon>
|
||||
</div>
|
||||
</ng-container>
|
||||
<!-- Due date -->
|
||||
<div
|
||||
class="text-sm whitespace-nowrap text-secondary"
|
||||
*ngIf="task.type === 'task'">
|
||||
{{task.dueDate | date:'LLL dd'}}
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</ng-container>
|
||||
</div>
|
||||
|
||||
</ng-container>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user