Allow to expand/collapse text on member cards if they exceed 3 rows

soonaverse · Sep 5, 2023 · 6eff4e3 · 6eff4e3
1 parent 4ef7955
commit 6eff4e3
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 5 deletions.
diff --git a/src/app/components/member/components/member-card/member-card.component.html b/src/app/components/member/components/member-card/member-card.component.html
@@ -52,9 +52,15 @@
           {{ (createdOn || member.createdOn)?.toDate() | date : 'short' }}
         </span>
       </div>
-      <p
-        class="mt-2 mb-3 leading-5 whitespace-pre-line text-accent-secondary dark:text-accent-secondary-dark truncate-line-3 text-foregrounds-primary dark:text-foregrounds-primary-dark"
-        [ngClass]="fullWidth ? 'text-base' : 'text-xs'"
+      <p #aboutMember 
+        class="mt-2 mb-3 leading-5 whitespace-pre-line text-accent-secondary dark:text-accent-secondary-dark text-foregrounds-primary dark:text-foregrounds-primary-dark"
+        (click)="isAboutExpanded = !isAboutExpanded"
+        [ngClass]="{ 
+          'text-base': fullWidth,
+          'text-xs': !fullWidth,
+          'truncate-line-3': !isAboutExpanded,
+          'cursor-pointer': aboutShowPointer
+        }"
       >
         {{ about !== undefined ? about : member.about }}
       </p>

diff --git a/src/app/components/member/components/member-card/member-card.component.ts b/src/app/components/member/components/member-card/member-card.component.ts
@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/adjacent-overload-signatures */
-import { ChangeDetectionStrategy, Component, Input, OnDestroy } from '@angular/core';
+import { AfterViewInit, ChangeDetectionStrategy, Component, ElementRef, Input, OnDestroy, ViewChild } from '@angular/core';
 import { MemberApi } from '@api/member.api';
 import { DeviceService } from '@core/services/device';
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
@@ -14,7 +14,7 @@ import { ROUTER_UTILS } from './../../../../@core/utils/router.utils';
   styleUrls: ['./member-card.component.less'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class MemberCardComponent implements OnDestroy {
+export class MemberCardComponent implements AfterViewInit, OnDestroy {
   @Input() member?: Member;
   @Input() fullWidth?: boolean;
   @Input() allowMobileContent?: boolean;
@@ -28,6 +28,9 @@ export class MemberCardComponent implements OnDestroy {
   public totalVisibleBadges = 6;
   public path = ROUTER_UTILS.config.member.root;
   public isReputationVisible = false;
+  public isAboutExpanded = false;
+  public aboutShowPointer = false;
+  @ViewChild('aboutMember') aboutMemberEleRef?: ElementRef<HTMLElement>;
 
   constructor(private memberApi: MemberApi, public deviceService: DeviceService) {
     // none.
@@ -58,7 +61,18 @@ export class MemberCardComponent implements OnDestroy {
     return FILE_SIZES;
   }
 
+  public ngAfterViewInit(): void {
+    this.aboutPointer();
+  }
+
   public ngOnDestroy(): void {
     this.badges$.next(undefined);
   }
+
+  private aboutPointer(): void {
+    const offset = (this.aboutMemberEleRef?.nativeElement.clientHeight || 0) / 3; // matching css value -webkit-line-clamp
+    this.aboutShowPointer = 
+      (this.aboutMemberEleRef?.nativeElement.scrollHeight || 0) - offset > 
+      (this.aboutMemberEleRef?.nativeElement.clientHeight || 0);
+  }
 }