Skip to content

Commit

Permalink
Update profile.component.html
Browse files Browse the repository at this point in the history
  • Loading branch information
@miladsoft
miladsoft committed Nov 5, 2024
1 parent e9356a8 commit 487b58d
Showing 1 changed file with 34 additions and 143 deletions.
177 changes: 34 additions & 143 deletions src/app/components/profile/profile.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -216,16 +216,12 @@
</div>
<div class="mt-8 flex flex-col items-start sm:flex-row">
<div class="mb-6 flex items-center sm:mb-0">
<img class="mr-4 h-12 w-12 min-w-12 rounded-full object-cover" [src]="
currentUser?.picture ||
'images/avatars/avatar-placeholder.png'
" onerror="this.onerror=null; this.src='/images/avatars/avatar-placeholder.png';" alt="{{
currentUser?.display_name ||
currentUser?.name ||
'Avatar'
}}" />
<img class="mr-4 h-12 w-12 min-w-12 rounded-full object-cover" [src]="getSafeUrl(profileUser?.picture)"
onerror="this.onerror=null; this.src='/images/avatars/avatar-placeholder.png';" alt="{{
profileUser?.display_name || profileUser?.name || ''
}}"/>
<div class="sm:hidden">
{{ currentUser?.name || 'Unknown User' }}
{{ profileUser?.display_name || profileUser?.name || '' }}
</div>
</div>
<mat-form-field class="w-full" [subscriptSizing]="'dynamic'">
Expand Down Expand Up @@ -307,66 +303,15 @@
<angor-card *ngIf="isPreview" class="mb-8 flex w-full flex-col bg-primary-50 dark:bg-primary-800"
#expandableComments="angorCard">
<div class="mx-6 mb-4 mt-6 flex items-center sm:mx-8">
<img class="mr-4 h-10 w-10 rounded-full" [src]="
currentUser?.picture ||
'images/avatars/avatar-placeholder.png'
" onerror="this.onerror=null; this.src='/images/avatars/avatar-placeholder.png';" alt="{{
currentUser?.display_name ||
currentUser?.name ||
'Avatar'
}}" />
<img class="mr-4 h-10 w-10 rounded-full" [src]="getSafeUrl(profileUser?.picture)"
onerror="this.onerror=null; this.src='/images/avatars/avatar-placeholder.png';" alt="{{
profileUser?.display_name || profileUser?.name || ''
}}" />
<div class="flex flex-col">
<span class="font-semibold leading-none">{{
currentUser?.display_name || currentUser?.name
}}</span>
<span class="font-semibold leading-none">{{profileUser?.display_name || profileUser?.name || ''}}</span>
<span class="text-secondary mt-1 text-sm leading-none">1 minutes ago</span>
</div>
<button class="-mr-4 ml-auto" mat-icon-button [matMenuTriggerFor]="postCardMenu02">
<mat-icon class="icon-size-5" [svgIcon]="'heroicons_solid:ellipsis-vertical'"></mat-icon>
</button>
<mat-menu #postCardMenu02="matMenu">
<button mat-menu-item>
<span class="flex items-center">
<mat-icon class="mr-3 icon-size-5"
[svgIcon]="'heroicons_solid:arrow-up-tray'"></mat-icon>
<span>Save post</span>
</span>
</button>
<button mat-menu-item>
<span class="flex items-center">
<mat-icon class="mr-3 icon-size-5" [svgIcon]="'heroicons_solid:eye-slash'"></mat-icon>
<span>Hide post</span>
</span>
</button>
<button mat-menu-item>
<span class="flex items-center">
<mat-icon class="mr-3 icon-size-5" [svgIcon]="'heroicons_solid:clock'"></mat-icon>
<span>Snooze for 30 days</span>
</span>
</button>
<button mat-menu-item>
<span class="flex items-center">
<mat-icon class="mr-3 icon-size-5"
[svgIcon]="'heroicons_solid:minus-circle'"></mat-icon>
<span>Hide all</span>
</span>
</button>
<mat-divider class="my-2"></mat-divider>
<button mat-menu-item>
<span class="flex items-center">
<mat-icon class="mr-3 icon-size-5" [svgIcon]="
'heroicons_solid:exclamation-triangle'
"></mat-icon>
<span>Report post</span>
</span>
</button>
<button mat-menu-item>
<span class="flex items-center">
<mat-icon class="mr-3 icon-size-5" [svgIcon]="'heroicons_solid:bell'"></mat-icon>
<span>Turn on notifications for this post</span>
</span>
</button>
</mat-menu>

</div>

<div *ngFor="
Expand Down Expand Up @@ -438,116 +383,62 @@


<div class="mx-3 flex items-center sm:mx-5">
<button class="mr-1 px-3" mat-button (click)="toggleLike()">
<mat-icon class="text-red-500 icon-size-5" [ngClass]="{ 'heart-beat': isLiked }" [svgIcon]="
isLiked
? 'heroicons_solid:heart'
: 'heroicons_outline:heart'
">
</mat-icon>
<span class="ml-2">{{
isLiked ? 'Unlike' : 'Like'
}}</span>
<button class="mr-1 px-3" mat-button>
<mat-icon class="text-red-500 icon-size-5" [svgIcon]="'heroicons_solid:heart'"></mat-icon>
<span class="ml-2">Unlike</span>
</button>
<button class="mr-1 px-3" mat-button (click)="
expandableComments.expanded =
!expandableComments.expanded
">
<mat-icon class="icon-size-5" [svgIcon]="
<button class="mr-1 px-3" mat-button>
<mat-icon class="text-blue-500 icon-size-5" [svgIcon]="
'heroicons_solid:chat-bubble-left-ellipsis'
"></mat-icon>
<span class="ml-2">Comment</span>
</button>
<button class="mr-1 px-3" mat-button>
<mat-icon class="icon-size-5" [svgIcon]="'heroicons_solid:share'"></mat-icon>
<mat-icon class="text-green-500 icon-size-5" [svgIcon]="'heroicons_solid:share'"></mat-icon>
<span class="ml-2">Share</span>
</button>
<button class="mr-1 px-3" mat-button>
<mat-icon class="text-orange-500 icon-size-5" [svgIcon]="'heroicons_solid:bolt'"></mat-icon>
<span class="ml-2">Zap</span>
</button>
</div>


<hr class="mx-6 mb-6 mt-4 border-b sm:mx-8" />
<div class="mx-6 mb-4 flex flex-col sm:mx-8 sm:mb-6 sm:flex-row sm:items-center">
<div class="flex items-center">
<img class="text-card m-0.5 h-6 w-6 rounded-full ring-2 ring-white"
src="images/avatars/avatar-placeholder.png" alt="Card cover image" />
<img class="text-card m-0.5 -ml-3 h-6 w-6 rounded-full ring-2 ring-white"
src="images/avatars/avatar-placeholder.png" alt="Card cover image" />
<img class="text-card m-0.5 -ml-3 h-6 w-6 rounded-full ring-2 ring-white"
src="images/avatars/avatar-placeholder.png" alt="Card cover image" />
<img class="text-card m-0.5 -ml-3 h-6 w-6 rounded-full ring-2 ring-white"
src="images/avatars/avatar-placeholder.png" alt="Card cover image" />
<div class="ml-3 text-md tracking-tight">
You and 4 more liked this
0 Zap
</div>
</div>
<div class="hidden flex-auto sm:flex"></div>
<div class="mt-4 flex items-center sm:mt-0">
<button class="-ml-2 mr-1 px-3 sm:ml-0" mat-button>
0 Like
</button>
<button class="-ml-2 mr-1 px-3 sm:ml-0" mat-button>
0 shares
</button>
<button class="px-3 sm:-mr-4" mat-button (click)="
expandableComments.expanded =
!expandableComments.expanded
">
<button class="px-3 sm:-mr-4" mat-button >
<span class="mr-1">0 Comments</span>
<mat-icon class="rotate-0 transition-transform duration-150 ease-in-out icon-size-5"
[ngClass]="{
'rotate-180': expandableComments.expanded,
}" [svgIcon]="'heroicons_mini:chevron-down'"></mat-icon>
</button>
</div>
</div>

<ng-container angorCardExpansion>
<hr class="m-0 border-b" />
<div class="mx-4 mb-3 mt-6 flex flex-col sm:mx-8">
<div class="flex items-start">
<img class="mr-5 h-12 w-12 rounded-full object-cover" [src]="
currentUser?.picture ||
'images/avatars/avatar-placeholder.png'
" onerror="this.onerror=null; this.src='/images/avatars/avatar-placeholder.png';" alt="{{
currentUser?.display_name ||
currentUser?.name ||
'Avatar'
}}" />

<mat-form-field class="w-full" [subscriptSizing]="'dynamic'">
<textarea matInput [placeholder]="'Write a comment...'" [rows]="3" #commentInput
cdkTextareaAutosize></textarea>
</mat-form-field>
</div>
<div class="mt-3 flex items-center justify-between">
<div class="flex items-center">
<button mat-icon-button (click)="toggleCommentEmojiPicker()">
<mat-icon class="icon-size-5" [svgIcon]="'heroicons_solid:face-smile'"></mat-icon>
</button>
<div *ngIf="showCommentEmojiPicker" class="emoji-picker-container-global">
<emoji-mart (emojiClick)="addEmojiTocomment($event)"
[darkMode]="darkMode"></emoji-mart>
</div>
<button mat-icon-button>
<mat-icon class="icon-size-5" [svgIcon]="'heroicons_solid:photo'"></mat-icon>
</button>
<button mat-icon-button>
<mat-icon class="icon-size-5" [svgIcon]="'heroicons_solid:sparkles'"></mat-icon>
</button>
</div>
<button class="mr-1 flex px-3" mat-button>
<mat-icon class="icon-size-5" [svgIcon]="'heroicons_solid:paper-airplane'"></mat-icon>
<span class="ml-2">Send</span>
</button>
</div>
</div>
</ng-container>

</angor-card>


@for (item of posts; track $index) {
<!-- Post -->
<angor-card class="mb-8 flex w-full flex-col" #expandableCard02="angorCard">
<div class="mx-6 mb-4 mt-6 flex items-center sm:mx-8">
<img class="mr-4 h-10 w-10 rounded-full" src="/images/avatars/avatar-placeholder.png"
alt="Card cover image" />
<img class="mr-4 h-10 w-10 rounded-full" [src]="getSafeUrl(profileUser?.picture)"
onerror="this.onerror=null; this.src='/images/avatars/avatar-placeholder.png';" alt="{{
profileUser?.display_name || profileUser?.name || ''
}}" />
<div class="flex flex-col">
<span class="font-semibold leading-none">Milad</span>
<span class="font-semibold leading-none">{{profileUser?.display_name || profileUser?.name || ''}}</span>
<span class="text-secondary mt-1 text-sm leading-none">{{item.created_at | ago}}</span>
</div>
<button class="-mr-4 ml-auto" mat-icon-button [matMenuTriggerFor]="postCardMenu02">
Expand Down

0 comments on commit 487b58d

Please sign in to comment.