diff options
| author | Kamen Mladenov <kamen.d.mladenov@protonmail.com> | 2021-04-09 19:55:59 +0300 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2021-04-09 19:55:59 +0300 |
| commit | f849e37ccdd6fd48f83119a3b3b65cdd8b765dc3 (patch) | |
| tree | 83b88a773bb7dc053bb3aced35bce302264ec925 /src/app/components/comment/comment.component.html | |
| parent | bcd88af53b1a920d728ec98b45daa9ac2e2c0917 (diff) | |
| parent | c13889759d70687de6833c505221c203f65fedb8 (diff) | |
| download | DevHive-Angular-0.2.tar DevHive-Angular-0.2.tar.gz DevHive-Angular-0.2.zip | |
Second Stage: Complete
Diffstat (limited to 'src/app/components/comment/comment.component.html')
| -rw-r--r-- | src/app/components/comment/comment.component.html | 63 |
1 files changed, 43 insertions, 20 deletions
diff --git a/src/app/components/comment/comment.component.html b/src/app/components/comment/comment.component.html index 718e25c..9403ea2 100644 --- a/src/app/components/comment/comment.component.html +++ b/src/app/components/comment/comment.component.html @@ -1,23 +1,46 @@ <app-loading *ngIf="!loaded"></app-loading> -<div class="comment rounded-border" *ngIf="loaded"> - <div class="content"> - <div class="author" (click)="goToAuthorProfile()"> - <img class="round-image" [src]="user.profilePictureURL"> - <div class="author-info"> - <div class="name"> - {{ user.firstName }} {{ user.lastName }} - </div> - <div class="handle"> - @{{ user.userName }} - </div> - </div> - </div> - <div class="message" (click)="goToCommentPage()"> +<section class="card flex-row" [hidden]="loaded" (mouseleave)="resetShareBtn()"> + <aside class="left-pane"> + <img class="author-picture round-image hover-half-opacity" [src]="user.profilePictureURL" (click)="goToAuthorProfile()"> + </aside> + <main class="content flexible"> + <summary class="font-size-dot8 text-vertical-middle hover-half-opacity" (click)="goToAuthorProfile()"> + <span> + {{ user.firstName }} {{ user.lastName }} + </span> + <span class="fg-faded"> + @{{ user.userName }} + </span> + </summary> + <form [formGroup]="editCommentFormGroup" *ngIf="editingComment" (ngSubmit)="editComment()"> + <textarea class="textarea-new-msg width-full border-faded-slim border-bottom-only padding-dot2 margin-bot-dot5" rows="1" formControlName="newCommentMessage" placeholder="What's on your mind?"></textarea> + <button type="submit" class="border-faded-slim width-full padding-dot2 lighter-hover click-effect border-radius-dot3 margin-bot-dot5"> + Update Comment + </button> + </form> + <article class="message margin-top-bot-dot2" *ngIf="!editingComment"> {{ comment.message }} - </div> - <div class="timestamp" (click)="goToCommentPage()"> - {{ timeCreated }} - </div> - </div> -</div> + </article> + <section class="comment-details flex-row flex-justify-end font-size-dot7 border-faded-slim border-bottom-only"> + <time class="flex-row flex-center-align-items"> + <img class="height-font" src="/assets/icons/tabler-icon-calendar-time.svg"> + <span> + {{ timeCreated }} + </span> + </time> + </section> + <section class="flex-row justify-children-center align-children-center"> + <button class="padding-dot2 lighter-hover click-effect border-radius-dot3" *ngIf="loggedInAuthor" (click)="toggleEditing()"> + <img src="/assets/icons/tabler-icon-edit.svg"> + </button> + <button #share ngxClipboard [cbContent]="getPostLink()" class="flexible padding-dot2 lighter-hover click-effect border-radius-dot3" (click)="showCopiedMessage()"> + <img src="/assets/icons/tabler-icon-link.svg"> + Share + </button> + <button class="padding-dot2 lighter-hover click-effect border-radius-dot3" *ngIf="loggedInAuthor" (click)="deleteComment()"> + <img src="/assets/icons/tabler-icon-trash.svg"> + </button> + </section> + </main> +</section> |