From 9a5b8b3d2d036dc9883ce434cb66d7453afa01ab Mon Sep 17 00:00:00 2001 From: Syndamia Date: Sun, 21 Mar 2021 18:12:45 +0200 Subject: Major redesign of comment component styling --- src/app/components/comment/comment.component.html | 45 +++++++++++++++-------- 1 file changed, 29 insertions(+), 16 deletions(-) (limited to 'src/app/components/comment/comment.component.html') diff --git a/src/app/components/comment/comment.component.html b/src/app/components/comment/comment.component.html index e46bdb7..03ba649 100644 --- a/src/app/components/comment/comment.component.html +++ b/src/app/components/comment/comment.component.html @@ -1,21 +1,34 @@ -
- - -
-
+
+ +
+ + {{ user.firstName }} {{ user.lastName }} -
-
+ + @{{ user.userName }} -
-
- -
- {{ comment.message }} -
- + + +
+ {{ comment.message }} +
+
+ +
+
+ +
+
-- cgit v1.2.3 From 276b47c8823fd9332948435566a8a5349c898f8e Mon Sep 17 00:00:00 2001 From: Syndamia Date: Sun, 21 Mar 2021 18:27:14 +0200 Subject: Implemented (moved from comment page) functionality for editing and deleting comments --- src/app/components/comment/comment.component.html | 16 ++++++- src/app/components/comment/comment.component.ts | 55 +++++++++++++++++++++- .../components/post-page/post-page.component.html | 2 +- 3 files changed, 69 insertions(+), 4 deletions(-) (limited to 'src/app/components/comment/comment.component.html') diff --git a/src/app/components/comment/comment.component.html b/src/app/components/comment/comment.component.html index 03ba649..65ebf56 100644 --- a/src/app/components/comment/comment.component.html +++ b/src/app/components/comment/comment.component.html @@ -13,7 +13,13 @@ @{{ user.userName }} -
+
+ + +
+
{{ comment.message }}
@@ -25,10 +31,16 @@
- + +
diff --git a/src/app/components/comment/comment.component.ts b/src/app/components/comment/comment.component.ts index 693fd43..0096c18 100644 --- a/src/app/components/comment/comment.component.ts +++ b/src/app/components/comment/comment.component.ts @@ -1,7 +1,9 @@ import { Component, Input, OnInit } from '@angular/core'; +import {FormBuilder, FormControl, FormGroup} from '@angular/forms'; import { Router } from '@angular/router'; import { Guid } from 'guid-typescript'; import { CommentService } from 'src/app/services/comment.service'; +import { TokenService } from 'src/app/services/token.service'; import { UserService } from 'src/app/services/user.service'; import { Comment } from 'src/models/comment.model'; import { User } from 'src/models/identity/user.model'; @@ -13,12 +15,15 @@ import { User } from 'src/models/identity/user.model'; }) export class CommentComponent implements OnInit { public loaded = false; + public loggedInAuthor = false; + public editingComment = false; public user: User; public comment: Comment; public timeCreated: string; @Input() paramId: string; + public editCommentFormGroup: FormGroup; - constructor(private _router: Router, private _commentService: CommentService, private _userService: UserService) + constructor(private _router: Router, private _commentService: CommentService, private _userService: UserService, private _tokenService: TokenService, private _fb: FormBuilder) { } ngOnInit(): void { @@ -33,12 +38,22 @@ export class CommentComponent implements OnInit { this.loadUser(); } }); + + this.editCommentFormGroup = this._fb.group({ + newCommentMessage: new FormControl('') + }); } private loadUser(): void { this._userService.getUserByUsernameRequest(this.comment.issuerUsername).subscribe({ next: (result: object) => { Object.assign(this.user, result); + + if (this._tokenService.getTokenFromSessionStorage() !== '') { + this.loggedInAuthor = this._tokenService.getUsernameFromSessionStorageToken() === this.comment.issuerUsername; + this.editCommentFormGroup.get('newCommentMessage')?.setValue(this.comment.message); + } + this.loaded = true; } }); @@ -47,4 +62,42 @@ export class CommentComponent implements OnInit { goToAuthorProfile(): void { this._router.navigate(['/profile/' + this.comment.issuerUsername]); } + + toggleEditing(): void { + this.editingComment = !this.editingComment; + } + + editComment(): void { + if (this._tokenService.getTokenFromSessionStorage() === '') { + this._router.navigate(['/login']); + return; + } + + if (this.editingComment) { + const newMessage = this.editCommentFormGroup.get('newCommentMessage')?.value; + + if (newMessage !== '' && newMessage !== this.comment.message) { + this._commentService.putCommentWithSessionStorageRequest(Guid.parse(this.paramId), this.comment.postId, newMessage).subscribe({ + next: () => { + this.reloadPage(); + } + }); + } + } + this.editingComment = !this.editingComment; + } + + deleteComment(): void { + this._commentService.deleteCommentWithSessionStorage(Guid.parse(this.paramId)).subscribe({ + next: () => { + this.reloadPage(); + } + }); + } + + private reloadPage(): void { + this._router.routeReuseStrategy.shouldReuseRoute = () => false; + this._router.onSameUrlNavigation = 'reload'; + this._router.navigate([this._router.url]); + } } diff --git a/src/app/components/post-page/post-page.component.html b/src/app/components/post-page/post-page.component.html index 529d971..9858c76 100644 --- a/src/app/components/post-page/post-page.component.html +++ b/src/app/components/post-page/post-page.component.html @@ -11,7 +11,7 @@
-
+
-- cgit v1.2.3 From c08d710428ca14b0ebe3d13c16df0aa9b8ba9a93 Mon Sep 17 00:00:00 2001 From: Syndamia Date: Mon, 22 Mar 2021 09:09:01 +0200 Subject: Minor update/fix to styling of textarea component on editing comment --- src/app/components/comment/comment.component.html | 2 +- src/styles.css | 3 ++- 2 files changed, 3 insertions(+), 2 deletions(-) (limited to 'src/app/components/comment/comment.component.html') diff --git a/src/app/components/comment/comment.component.html b/src/app/components/comment/comment.component.html index 65ebf56..a22907a 100644 --- a/src/app/components/comment/comment.component.html +++ b/src/app/components/comment/comment.component.html @@ -14,7 +14,7 @@
- + diff --git a/src/styles.css b/src/styles.css index d57416e..06ddae6 100644 --- a/src/styles.css +++ b/src/styles.css @@ -372,8 +372,9 @@ input[type=file]::file-selector-button { /* Inputs, the type found in login and register */ .textarea-new-msg { - min-height: 1.5em; + min-height: 2em; resize: vertical; + box-sizing: border-box; } .fancy-input { -- cgit v1.2.3 From 75594e7eac044e9398fd1b74246f22cabe6ddeba Mon Sep 17 00:00:00 2001 From: Syndamia Date: Mon, 22 Mar 2021 19:48:49 +0200 Subject: Implemented comment share functionality --- src/app/components/comment/comment.component.html | 4 +-- src/app/components/comment/comment.component.ts | 31 ++++++++++++++++++++--- 2 files changed, 29 insertions(+), 6 deletions(-) (limited to 'src/app/components/comment/comment.component.html') diff --git a/src/app/components/comment/comment.component.html b/src/app/components/comment/comment.component.html index a22907a..27a11e6 100644 --- a/src/app/components/comment/comment.component.html +++ b/src/app/components/comment/comment.component.html @@ -1,6 +1,6 @@ -
+
@@ -34,7 +34,7 @@ - diff --git a/src/app/components/comment/comment.component.ts b/src/app/components/comment/comment.component.ts index 0096c18..2a54f92 100644 --- a/src/app/components/comment/comment.component.ts +++ b/src/app/components/comment/comment.component.ts @@ -1,5 +1,5 @@ -import { Component, Input, OnInit } from '@angular/core'; -import {FormBuilder, FormControl, FormGroup} from '@angular/forms'; +import { AfterViewInit, Component, ElementRef, Input, OnInit, Renderer2, ViewChild } from '@angular/core'; +import { FormBuilder, FormControl, FormGroup } from '@angular/forms'; import { Router } from '@angular/router'; import { Guid } from 'guid-typescript'; import { CommentService } from 'src/app/services/comment.service'; @@ -13,7 +13,7 @@ import { User } from 'src/models/identity/user.model'; templateUrl: './comment.component.html', styleUrls: ['./comment.component.css'] }) -export class CommentComponent implements OnInit { +export class CommentComponent implements OnInit, AfterViewInit { public loaded = false; public loggedInAuthor = false; public editingComment = false; @@ -22,8 +22,11 @@ export class CommentComponent implements OnInit { public timeCreated: string; @Input() paramId: string; public editCommentFormGroup: FormGroup; + @ViewChild('share') shareBtn: ElementRef; + private _defaultShareBtnInnerHTML: string; + private _linkShared = false; - constructor(private _router: Router, private _commentService: CommentService, private _userService: UserService, private _tokenService: TokenService, private _fb: FormBuilder) + constructor(private _router: Router, private _commentService: CommentService, private _userService: UserService, private _tokenService: TokenService, private _fb: FormBuilder, private _elem: ElementRef, private _renderer: Renderer2) { } ngOnInit(): void { @@ -59,6 +62,10 @@ export class CommentComponent implements OnInit { }); } + ngAfterViewInit(): void { + this._defaultShareBtnInnerHTML = this.shareBtn.nativeElement.innerHTML; + } + goToAuthorProfile(): void { this._router.navigate(['/profile/' + this.comment.issuerUsername]); } @@ -100,4 +107,20 @@ export class CommentComponent implements OnInit { this._router.onSameUrlNavigation = 'reload'; this._router.navigate([this._router.url]); } + + resetShareBtn(): void { + if (this._linkShared) { + this._renderer.setProperty(this.shareBtn.nativeElement, 'innerHTML', this._defaultShareBtnInnerHTML); + this._linkShared = false; + } + } + + showCopiedMessage(): void { + this._renderer.setProperty(this.shareBtn.nativeElement, 'innerHTML', 'Link copied to clipboard!'); + this._linkShared = true; + } + + getPostLink(): string { + return location.origin + '/comment/' + this.paramId; + } } -- cgit v1.2.3 From 9906b285148f54b4060c71012854a814409cc9d7 Mon Sep 17 00:00:00 2001 From: Syndamia Date: Mon, 22 Mar 2021 20:23:30 +0200 Subject: Improved readability and consistency of font-size, text, border, colors and padding CSS class names --- .../admin-panel-page.component.html | 62 +++++++++++----------- src/app/components/comment/comment.component.html | 18 +++---- src/app/components/feed/feed.component.html | 12 ++--- src/app/components/login/login.component.html | 22 ++++---- src/app/components/navbar/navbar.component.html | 20 +++---- .../components/not-found/not-found.component.html | 10 ++-- .../post-attachment/post-attachment.component.html | 4 +- .../components/post-page/post-page.component.html | 6 +-- src/app/components/post/post.component.html | 36 ++++++------- .../profile-settings.component.html | 54 +++++++++---------- src/app/components/profile/profile.component.html | 22 ++++---- .../components/register/register.component.html | 34 ++++++------ src/styles.css | 54 ++++++++++--------- 13 files changed, 178 insertions(+), 176 deletions(-) (limited to 'src/app/components/comment/comment.component.html') diff --git a/src/app/components/admin-panel-page/admin-panel-page.component.html b/src/app/components/admin-panel-page/admin-panel-page.component.html index 65f9691..80d6795 100644 --- a/src/app/components/admin-panel-page/admin-panel-page.component.html +++ b/src/app/components/admin-panel-page/admin-panel-page.component.html @@ -6,34 +6,34 @@ -
+
- -
-
+
{{ lang.name }}
@@ -49,32 +49,32 @@
-
-