purchasing/fuse-angular
3
0
Fork 0
mirror of https://github.com/richard-loafle/fuse-angular.git synced 2025-11-04 09:33:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

(apps/chat) Small adjustments and tweaks for Dark mode

Browse Source
This commit is contained in:
sercan 2021-04-30 19:39:02 +03:00
parent 0ac967a945
commit 5dd60c816c
3 changed files with 71 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/modules/admin/apps/chat/chats/chats.component.html
View File

@ -28,7 +28,7 @@
<!-- Chats list --> <!-- Chats list -->
<ng-container *ngIf="chats && chats.length > 0; else noChats"> <ng-container *ngIf="chats && chats.length > 0; else noChats">
<div class="relative flex flex-auto flex-col w-full min-w-0 lg:min-w-100 lg:max-w-100 border-r bg-card"> <div class="relative flex flex-auto flex-col w-full min-w-0 lg:min-w-100 lg:max-w-100 border-r bg-card dark:bg-transparent">
<!-- Header --> <!-- Header -->
<div class="flex flex-col flex-0 py-4 px-8 border-b bg-gray-50 dark:bg-transparent"> <div class="flex flex-col flex-0 py-4 px-8 border-b bg-gray-50 dark:bg-transparent">

137
src/app/modules/admin/apps/chat/contact-info/contact-info.component.html
View File

@ -1,4 +1,4 @@
<div class="flex flex-col flex-auto overflow-y-auto bg-card dark:bg-default"> <div class="flex flex-col flex-auto h-full bg-card dark:bg-default">
<!-- Header --> <!-- Header -->
<div class="flex flex-0 items-center h-18 px-4 border-b bg-gray-50 dark:bg-transparent"> <div class="flex flex-0 items-center h-18 px-4 border-b bg-gray-50 dark:bg-transparent">
@ -10,76 +10,77 @@
<div class="ml-2 text-lg font-medium">Contact info</div> <div class="ml-2 text-lg font-medium">Contact info</div>
</div> </div>
<!-- Contact avatar & info --> <div class="overflow-y-auto">
<div class="flex flex-col items-center mt-8"> <!-- Contact avatar & info -->
<div class="w-40 h-40 rounded-full"> <div class="flex flex-col items-center mt-8">
<ng-container *ngIf="chat.contact.avatar"> <div class="w-40 h-40 rounded-full">
<img <ng-container *ngIf="chat.contact.avatar">
class="w-full h-full rounded-full object-cover" <img
[src]="chat.contact.avatar" class="w-full h-full rounded-full object-cover"
[alt]="'Contact avatar'"> [src]="chat.contact.avatar"
</ng-container> [alt]="'Contact avatar'">
<ng-container *ngIf="!chat.contact.avatar"> </ng-container>
<div class="flex items-center justify-center w-full h-full rounded-full text-8xl font-semibold uppercase bg-gray-200 text-gray-600 dark:bg-gray-700 dark:text-gray-200"> <ng-container *ngIf="!chat.contact.avatar">
{{chat.contact.name.charAt(0)}} <div class="flex items-center justify-center w-full h-full rounded-full text-8xl font-semibold uppercase bg-gray-200 text-gray-600 dark:bg-gray-700 dark:text-gray-200">
</div> {{chat.contact.name.charAt(0)}}
</ng-container> </div>
</ng-container>
</div>
<div class="mt-4 text-lg font-medium">{{chat.contact.name}}</div>
<div class="mt-0.5 text-md text-secondary">{{chat.contact.about}}</div>
</div> </div>
<div class="mt-4 text-lg font-medium">{{chat.contact.name}}</div>
<div class="mt-0.5 text-md text-secondary">{{chat.contact.about}}</div>
</div>
<div class="py-10 px-7"> <div class="py-10 px-7">
<!-- Media --> <!-- Media -->
<div class="text-lg font-medium">Media</div> <div class="text-lg font-medium">Media</div>
<div class="grid grid-cols-4 gap-1 mt-4"> <div class="grid grid-cols-4 gap-1 mt-4">
<ng-container *ngFor="let media of chat.contact.attachments.media"> <ng-container *ngFor="let media of chat.contact.attachments.media">
<img <img
class="h-20 rounded object-cover" class="h-20 rounded object-cover"
[src]="media"/> [src]="media"/>
</ng-container> </ng-container>
</div> </div>
<!-- Details --> <!-- Details -->
<div class="mt-10 space-y-4"> <div class="mt-10 space-y-4">
<div class="text-lg font-medium mb-3">Details</div> <div class="text-lg font-medium mb-3">Details</div>
<ng-container *ngIf="chat.contact.details.emails.length"> <ng-container *ngIf="chat.contact.details.emails.length">
<div> <div>
<div class="font-medium">Email</div> <div class="font-medium text-secondary">Email</div>
<div class="">{{chat.contact.details.emails[0].email}}</div> <div class="">{{chat.contact.details.emails[0].email}}</div>
</div> </div>
</ng-container> </ng-container>
<ng-container *ngIf="chat.contact.details.phoneNumbers.length"> <ng-container *ngIf="chat.contact.details.phoneNumbers.length">
<div> <div>
<div class="font-medium">Phone number</div> <div class="font-medium text-secondary">Phone number</div>
<div class="">{{chat.contact.details.phoneNumbers[0].number}}</div> <div class="">{{chat.contact.details.phoneNumbers[0].number}}</div>
</div> </div>
</ng-container> </ng-container>
<ng-container *ngIf="chat.contact.details.title"> <ng-container *ngIf="chat.contact.details.title">
<div> <div>
<div class="font-medium">Title</div> <div class="font-medium text-secondary">Title</div>
<div class="">{{chat.contact.details.title}}</div> <div class="">{{chat.contact.details.title}}</div>
</div> </div>
</ng-container> </ng-container>
<ng-container *ngIf="chat.contact.details.company"> <ng-container *ngIf="chat.contact.details.company">
<div> <div>
<div class="font-medium">Company</div> <div class="font-medium text-secondary">Company</div>
<div class="">{{chat.contact.details.company}}</div> <div class="">{{chat.contact.details.company}}</div>
</div> </div>
</ng-container> </ng-container>
<ng-container *ngIf="chat.contact.details.birthday"> <ng-container *ngIf="chat.contact.details.birthday">
<div> <div>
<div class="font-medium">Birthday</div> <div class="font-medium text-secondary">Birthday</div>
<div class="">{{chat.contact.details.birthday}}</div> <div class="">{{chat.contact.details.birthday}}</div>
</div> </div>
</ng-container> </ng-container>
<ng-container *ngIf="chat.contact.details.address"> <ng-container *ngIf="chat.contact.details.address">
<div> <div>
<div class="font-medium">Address</div> <div class="font-medium text-secondary">Address</div>
<div class="">{{chat.contact.details.address}}</div> <div class="">{{chat.contact.details.address}}</div>
</div> </div>
</ng-container> </ng-container>
</div>
</div> </div>
</div> </div>
</div> </div>

2
src/app/modules/admin/apps/chat/conversation/conversation.component.html
View File

@ -156,7 +156,7 @@
</div> </div>
<!-- Message field --> <!-- Message field -->
<div class="flex items-end p-4 border-t bg-gray-50"> <div class="flex items-end p-4 border-t bg-gray-50 dark:bg-transparent">
<div class="flex items-center h-11 my-px"> <div class="flex items-center h-11 my-px">
<button mat-icon-button> <button mat-icon-button>
<mat-icon [svgIcon]="'heroicons_outline:emoji-happy'"></mat-icon> <mat-icon [svgIcon]="'heroicons_outline:emoji-happy'"></mat-icon>