diff options
Diffstat (limited to 'src/app/components/post/post.component.html')
| -rw-r--r-- | src/app/components/post/post.component.html | 38 |
1 files changed, 33 insertions, 5 deletions
diff --git a/src/app/components/post/post.component.html b/src/app/components/post/post.component.html index 133b747..1831c5e 100644 --- a/src/app/components/post/post.component.html +++ b/src/app/components/post/post.component.html @@ -13,14 +13,36 @@ @{{ user.userName }} </span> </summary> - <article class="message margin-top-bot-small"> + <article class="message margin-top-bot-small" *ngIf="!editingPost"> {{ post.message }} </article> - <section class="flex-row flexible-children"> + <section class="flex-row flexible-children" *ngIf="!editingPost"> <figure *ngFor="let fileURL of post.fileURLs"> <app-post-attachment [paramURL]="fileURL"></app-post-attachment> </figure> </section> + <form [formGroup]="editPostFormGroup" *ngIf="editingPost"> + <textarea class="textarea-new-msg full-width faded-slim-border border-bottom-only padding-small" rows="1" formControlName="newPostMessage" placeholder="What's on your mind?"></textarea> + <section class="flex-row flex-justify-start flex-center-align-children top-bot-padding-bigger"> + <div class="file-button hover-half-opacity click-effect"> + <img src="/assets/icons/tabler-icon-paperclip.svg"> + <input type="file" formControlName="fileUpload" (change)="onFileUpload($event)" multiple> + </div> + </section> + </form> + <section class="flex-row bot-padding-bigger" *ngIf="editingPost"> + <div *ngFor="let file of files" class="form-attachment faded-slim-border flexible flex-row flex-no-wrap flex-center-align-items padding-small margin-top-bot-small"> + <div class="flexible"> + {{ file.name ? file.name : 'Attachment' }} + </div> + <div class="flex-col hover-half-opacity border-radius-small click-effect" (click)="removeAttachment(file.name)"> + <img src="/assets/icons/tabler-icon-x.svg"> + </div> + </div> + </section> + <button class="faded-slim-border full-width padding-small lighter-hover click-effect border-radius-smaller margin-bot-bigger" *ngIf="editingPost" (click)="editPost()"> + Update Post + </button> <section class="post-details flex-row flex-justify-end font-size-dot7 faded-slim-border border-bottom-only"> <time class="flex-row flex-center-align-items"> <img class="img-height-font-size" src="/assets/icons/tabler-icon-calendar-time.svg"> @@ -35,15 +57,21 @@ </span> </summary> </section> - <section class="flex-row flexible-children justify-children-center flex-center-align-children"> - <button class="padding-small lighter-hover click-effect border-radius-smaller" (click)="goToPostPage()"> + <section class="flex-row justify-children-center flex-center-align-children"> + <button class="padding-small lighter-hover click-effect border-radius-smaller" (click)="toggleEditing()"> + <img src="/assets/icons/tabler-icon-edit.svg"> + </button> + <button class="flexible padding-small lighter-hover click-effect border-radius-smaller" (click)="goToPostPage()"> <img src="/assets/icons/tabler-icon-message-2.svg"> Comment </button> - <button class="padding-small lighter-hover click-effect border-radius-smaller" (click)="goToPostPage()"> + <button class="flexible padding-small lighter-hover click-effect border-radius-smaller" (click)="goToPostPage()"> <img src="/assets/icons/tabler-icon-link.svg"> Share </button> + <button class="padding-small lighter-hover click-effect border-radius-smaller" (click)="deletePost()"> + <img src="/assets/icons/tabler-icon-trash.svg"> + </button> </section> </main> <aside class="rating flex-col flex-center-align-items"> |