src/app/components/post/post.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
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88

<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-color-faded">
				@{{ user.userName }}
			</span>
		</summary>
		<article class="message margin-top-bot-small" *ngIf="!editingPost">
			{{ post.message }}
		</article>
		<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">&nbsp;
				<span>
					{{ timeCreated }}
				</span>
			</time>
			<summary class="flex-row flex-center-align-items">
				<img class="img-height-font-size" src="/assets/icons/tabler-icon-message-2.svg">&nbsp;
				<span>
					{{ post.comments.length }}
				</span>
			</summary>
		</section>
		<section class="flex-row justify-children-center flex-center-align-children">
			<button class="padding-small lighter-hover click-effect border-radius-smaller" *ngIf="loggedInAuthor" (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">
				&nbsp;Comment
			</button>
			<button #share ngxClipboard [cbContent]="getPostLink()" class="flexible padding-small lighter-hover click-effect border-radius-smaller" (click)="showCopiedMessage()">
				<img src="/assets/icons/tabler-icon-link.svg">
				&nbsp;Share
			</button>
			<button class="padding-small lighter-hover click-effect border-radius-smaller" *ngIf="loggedInAuthor" (click)="deletePost()">
				<img src="/assets/icons/tabler-icon-trash.svg">
			</button>
		</section>
	</main>
	<aside class="rating flex-col flex-center-align-items">
		<button #upvote class="flex-col lighter-hover border-radius-small click-effect" (click)="votePost(true)">
			<img src="/assets/icons/tabler-icon-chevron-up.svg">
		</button>
		<summary class="top-bot-padding-small">
			{{ votesNumber }}
		</summary>
		<button #downvote class="flex-col lighter-hover border-radius-small click-effect" (click)="votePost(false)">
			<img src="/assets/icons/tabler-icon-chevron-down.svg">
		</button>
	</aside>
</section>