Commit ad2261e2 authored by Mark Harding's avatar Mark Harding
Browse files

(fix): comments overflowing when fixed height

parent 3e7a1f9b

src/app/modules/comments/entity-outlet/entity-outlet.component.ts

+19 −2
Original line number Original line Diff line number Diff line
@@ -47,7 +47,8 @@ export class CommentsEntityOutletComponent implements OnInit, OnDestroy { 
  @Input() limit: number = 12;

  @Input() limit: number = 12;

  @Input() canEdit: boolean = false;

  @Input() canEdit: boolean = false;

  @Input() canDelete: boolean = false;

  @Input() canDelete: boolean = false;

  showOnlyPoster: boolean = true;

  @Input() fixedHeight = false;

  @Input() showOnlyPoster = true;

  optimisticList: Array<any> = [];

  optimisticList: Array<any> = [];





  // private shouldReuseRouteFn;

  // private shouldReuseRouteFn;
@@ -57,7 +58,7 @@ export class CommentsEntityOutletComponent implements OnInit, OnDestroy { 
    public client: Client,

    public client: Client,

    public attachment: AttachmentService,

    public attachment: AttachmentService,

    public sockets: SocketsService,

    public sockets: SocketsService,

    private renderer: Renderer,

    private router: Router,

    private cd: ChangeDetectorRef,

    private cd: ChangeDetectorRef,

    public legacyActivityService: ActivityServiceCommentsLegacySupport

    public legacyActivityService: ActivityServiceCommentsLegacySupport

  ) {}

  ) {}
@@ -90,19 +91,35 @@ export class CommentsEntityOutletComponent implements OnInit, OnDestroy { 
  }

  }





  onPosted({ comment, index }): void {

  onPosted({ comment, index }): void {

    if (this.fixedHeight) {

      this.redirectToSinglePage();

    }

    this.optimisticList[index] = comment;

    this.optimisticList[index] = comment;

    this.detectChanges();

    this.detectChanges();

  }

  }





  onOptimisticPost(comment): void {

  onOptimisticPost(comment): void {

    if (this.fixedHeight) return;

    this.optimisticList.push(comment);

    this.optimisticList.push(comment);

  }

  }





  openFullComments(): void {

  openFullComments(): void {

    if (this.fixedHeight) {

      // redirect to full view newsfeed post

      this.redirectToSinglePage();

    }

    this.showOnlyPoster = false;

    this.showOnlyPoster = false;

    this.detectChanges();

    this.detectChanges();

  }

  }





  redirectToSinglePage(): void {

    this.router.navigate([`/newsfeed/${this.entity.guid}`], {

      queryParams: {

        fixedHeight: 0,

      },

    });

  }



  detectChanges(): void {

  detectChanges(): void {

    this.cd.markForCheck();

    this.cd.markForCheck();

    this.cd.detectChanges();

    this.cd.detectChanges();

src/app/modules/newsfeed/activity/activity.component.html

+2 −0
Original line number Original line Diff line number Diff line
@@ -20,6 +20,8 @@ 
  <m-comments__entityOutlet

  <m-comments__entityOutlet

    [entity]="service.entity$ | async"

    [entity]="service.entity$ | async"

    [canDelete]="service.canDelete$ | async"

    [canDelete]="service.canDelete$ | async"

    [showOnlyPoster]="service.displayOptions.showOnlyCommentsInput"

    [fixedHeight]="service.displayOptions.fixedHeight"

  >

  >

  </m-comments__entityOutlet>

  </m-comments__entityOutlet>

</ng-container>
 
</ng-container>

src/app/modules/newsfeed/activity/content/content.component.ts

+9 −1
Original line number Original line Diff line number Diff line
@@ -111,7 +111,15 @@ export class ActivityContentComponent { 
    const messageHeight = this.messageEl

    const messageHeight = this.messageEl

      ? this.messageEl.nativeElement.clientHeight

      ? this.messageEl.nativeElement.clientHeight

      : 0;

      : 0;

    this.remindHeight = this.maxFixedHeightContent - messageHeight;



    let maxFixedHeightContent = this.maxFixedHeightContent;



    // Need to allow extra space for comments entry

    if (this.entity['comments:count'] > 0) {

      maxFixedHeightContent = maxFixedHeightContent - 42;

    }



    this.remindHeight = maxFixedHeightContent - messageHeight;

    this.remindWidth = this.remindHeight * this.fixedHeightRatio;

    this.remindWidth = this.remindHeight * this.fixedHeightRatio;

  }

  }

src/app/modules/newsfeed/single/single.component.html

+4 −1
Original line number Original line Diff line number Diff line
@@ -48,7 +48,10 @@ 
    <div class="minds-list" *ngIf="activity && !showLegacyActivity">

    <div class="minds-list" *ngIf="activity && !showLegacyActivity">

      <m-activity

      <m-activity

        [entity]="activity"

        [entity]="activity"

        [displayOptions]="{ fixedHeight: fixedHeight }"

        [displayOptions]="{

          fixedHeight: fixedHeight,

          showOnlyCommentsInput: fixedHeight

        }"

      ></m-activity>

      ></m-activity>

    </div>

    </div>

  </div>

  </div>

src/app/modules/newsfeed/single/single.component.ts

+1 −1
Original line number Original line Diff line number Diff line
@@ -73,7 +73,7 @@ export class NewsfeedSingleComponent { 
          this.editing = !!params.get('editing');

          this.editing = !!params.get('editing');

        }

        }

        if (params.has('fixedHeight')) {

        if (params.has('fixedHeight')) {

          this.fixedHeight = !!params.get('fixedHeight');

          this.fixedHeight = params.get('fixedHeight') === '1';

        }

        }

      }

      }

    );

    );