Improve comments section

VernissageApp · Nov 15, 2023 · 8902424 · 8902424
1 parent 96427b8
commit 8902424
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 5 deletions.
diff --git a/src/app/components/widgets/comment-reply/comment-reply.component.html b/src/app/components/widgets/comment-reply/comment-reply.component.html
@@ -15,7 +15,8 @@
                     Comment required.
                 </mat-error>
             </mat-form-field>
-            <button type="submit" style="display: none;">Submit</button>
+            <a *ngIf="showCancel" href="javascript:void(0)" (click)="cancel()">Cancel</a>
         </div>
+        <button type="submit" mat-flat-button color="primary">Send</button>
     </div>
 </form>
diff --git a/src/app/components/widgets/comment-reply/comment-reply.component.scss b/src/app/components/widgets/comment-reply/comment-reply.component.scss
@@ -5,4 +5,13 @@
         height:42px;
         border-radius: 15%;
     }
+
+    button {
+        margin-top: 4px;
+    }
+
+    a {
+        position: relative;
+        top: -20px;
+    }
 }
diff --git a/src/app/components/widgets/comment-reply/comment-reply.component.ts b/src/app/components/widgets/comment-reply/comment-reply.component.ts
@@ -13,6 +13,7 @@ import { StatusesService } from 'src/app/services/http/statuses.service';
 export class CommentReplyComponent {
     @Input() signedInUser?: User;
     @Input() status?: Status;
+    @Input() showCancel = false;
     @Output() close = new EventEmitter();
 
     comment = '';
@@ -37,4 +38,8 @@ export class CommentReplyComponent {
             this.messageService.showServerError(error);
         }
     }
+
+    cancel(): void {
+        this.close.emit();
+    }
 }
diff --git a/src/app/pages/status/status.page.html b/src/app/pages/status/status.page.html
@@ -174,9 +174,8 @@
                                     </mat-menu>
                                 </div>
                             </div>
-                            <div *ngIf="replyStatus?.id === comment.status.id" class="text-right">
-                                <app-comment-reply [signedInUser]="signedInUser" [status]="comment.status" (close)="onReply(undefined)"></app-comment-reply>
-                                <button mat-button (click)="onReply(undefined)">Cancel</button>
+                            <div *ngIf="replyStatus?.id === comment.status.id" class="text-right padding-top-5">
+                                <app-comment-reply [signedInUser]="signedInUser" [status]="comment.status" [showCancel]="true" (close)="onReply(undefined)"></app-comment-reply>
                             </div>
                         </div>
                     </ng-container>

diff --git a/src/app/pages/status/status.page.ts b/src/app/pages/status/status.page.ts
@@ -216,13 +216,14 @@ export class StatusPage extends Responsive {
 
     private async loadPageData(statusId: string): Promise<void> {
         this.status = await this.statusesService.get(statusId)
-        this.comments = await this.getAllReplies(statusId);
 
         if (this.status.reblog) {
             this.mainStatus = this.status.reblog;
         } else {
             this.mainStatus = this.status;
         }
+
+        this.comments = await this.getAllReplies(this.mainStatus.id);
     }
 
     private async getAllReplies(statusId: string): Promise<StatusComment[]> {