src/app/components/comment/comment.component.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

<app-loading *ngIf="!loaded"></app-loading>

<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 }}
		</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">&nbsp;
				<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">
				&nbsp;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>