From 5880656282edfb7dc1bb7073c20ccf74aad6a093 Mon Sep 17 00:00:00 2001 From: Syndamia Date: Thu, 18 Mar 2021 19:50:02 +0200 Subject: Major redesign of post component styling. Added foundatinal global stylings as well as icons. --- src/assets/icons/tabler-icon-calendar-time.svg | 87 ++++++++++++++++++++++++++ src/assets/icons/tabler-icon-chevron-down.svg | 65 +++++++++++++++++++ src/assets/icons/tabler-icon-chevron-up.svg | 65 +++++++++++++++++++ src/assets/icons/tabler-icon-link.svg | 69 ++++++++++++++++++++ src/assets/icons/tabler-icon-message-2.svg | 79 +++++++++++++++++++++++ 5 files changed, 365 insertions(+) create mode 100644 src/assets/icons/tabler-icon-calendar-time.svg create mode 100644 src/assets/icons/tabler-icon-chevron-down.svg create mode 100644 src/assets/icons/tabler-icon-chevron-up.svg create mode 100644 src/assets/icons/tabler-icon-link.svg create mode 100644 src/assets/icons/tabler-icon-message-2.svg (limited to 'src/assets') diff --git a/src/assets/icons/tabler-icon-calendar-time.svg b/src/assets/icons/tabler-icon-calendar-time.svg new file mode 100644 index 0000000..3bb3a3e --- /dev/null +++ b/src/assets/icons/tabler-icon-calendar-time.svg @@ -0,0 +1,87 @@ + + + + + + image/svg+xml + + + + + + + + + + + + + + diff --git a/src/assets/icons/tabler-icon-chevron-down.svg b/src/assets/icons/tabler-icon-chevron-down.svg new file mode 100644 index 0000000..0971874 --- /dev/null +++ b/src/assets/icons/tabler-icon-chevron-down.svg @@ -0,0 +1,65 @@ + + + + + + image/svg+xml + + + + + + + + + diff --git a/src/assets/icons/tabler-icon-chevron-up.svg b/src/assets/icons/tabler-icon-chevron-up.svg new file mode 100644 index 0000000..20d694a --- /dev/null +++ b/src/assets/icons/tabler-icon-chevron-up.svg @@ -0,0 +1,65 @@ + + + + + + image/svg+xml + + + + + + + + + diff --git a/src/assets/icons/tabler-icon-link.svg b/src/assets/icons/tabler-icon-link.svg new file mode 100644 index 0000000..a9f9110 --- /dev/null +++ b/src/assets/icons/tabler-icon-link.svg @@ -0,0 +1,69 @@ + + + + + + image/svg+xml + + + + + + + + + + diff --git a/src/assets/icons/tabler-icon-message-2.svg b/src/assets/icons/tabler-icon-message-2.svg new file mode 100644 index 0000000..6a9d20c --- /dev/null +++ b/src/assets/icons/tabler-icon-message-2.svg @@ -0,0 +1,79 @@ + + + + + + image/svg+xml + + + + + + + + + + + -- cgit v1.2.3 From a9358fb8a27cd3d48547f5427797702ee2780de8 Mon Sep 17 00:00:00 2001 From: Syndamia Date: Fri, 19 Mar 2021 16:02:43 +0200 Subject: Implemented navbar component; added some global stylings and changed the name of others; added icons --- src/app/app.module.ts | 4 +- src/app/components/navbar/navbar.component.css | 43 +++++++++++++ src/app/components/navbar/navbar.component.html | 36 +++++++++++ src/app/components/navbar/navbar.component.ts | 49 ++++++++++++++ src/app/components/post/post.component.html | 4 +- src/assets/icons/tabler-icon-home.svg | 73 +++++++++++++++++++++ src/assets/icons/tabler-icon-logout.svg | 69 ++++++++++++++++++++ src/assets/icons/tabler-icon-message-circle.svg | 86 +++++++++++++++++++++++++ src/assets/icons/tabler-icon-search.svg | 74 +++++++++++++++++++++ src/assets/icons/tabler-icon-settings.svg | 71 ++++++++++++++++++++ src/assets/icons/tabler-icon-trending-up.svg | 69 ++++++++++++++++++++ src/styles.css | 28 ++++++-- 12 files changed, 598 insertions(+), 8 deletions(-) create mode 100644 src/app/components/navbar/navbar.component.css create mode 100644 src/app/components/navbar/navbar.component.html create mode 100644 src/app/components/navbar/navbar.component.ts create mode 100644 src/assets/icons/tabler-icon-home.svg create mode 100644 src/assets/icons/tabler-icon-logout.svg create mode 100644 src/assets/icons/tabler-icon-message-circle.svg create mode 100644 src/assets/icons/tabler-icon-search.svg create mode 100644 src/assets/icons/tabler-icon-settings.svg create mode 100644 src/assets/icons/tabler-icon-trending-up.svg (limited to 'src/assets') diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 1bf44ad..f582bbc 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -25,6 +25,7 @@ import { CommentComponent } from './components/comment/comment.component'; import { CommentPageComponent } from './components/comment-page/comment-page.component'; import { PostAttachmentComponent } from './components/post-attachment/post-attachment.component'; import { RouterModule } from '@angular/router'; +import { NavbarComponent } from './components/navbar/navbar.component'; @NgModule({ declarations: [ @@ -43,7 +44,8 @@ import { RouterModule } from '@angular/router'; AdminPanelPageComponent, CommentComponent, CommentPageComponent, - PostAttachmentComponent + PostAttachmentComponent, + NavbarComponent, ], imports: [ BrowserModule.withServerTransition({ appId: 'serverApp' }), diff --git a/src/app/components/navbar/navbar.component.css b/src/app/components/navbar/navbar.component.css new file mode 100644 index 0000000..58ec821 --- /dev/null +++ b/src/app/components/navbar/navbar.component.css @@ -0,0 +1,43 @@ +#navbar { + width: 100%; + background-color: var(--card-bg); +} + +#nav-contents { + max-width: var(--max-width); + margin: 0 auto; + box-sizing: border-box; +} + +#nav-contents img { + height: 1.9em; + width: 1.9em; +} + +@media screen and (max-width: 30rem) { + #nav-username { + display: none; + } + + #navbar { + font-size: 0.8em; + } +} + +#nav-profile-picture { + padding: 0.1em; +} + +#nav-profile-picture img { + height: 1.8em; + width: 1.8em; +} + +.nav-item { + margin-left: 0.2em; + padding: 0 0.1em; +} + +.nav-item:first-child { + margin-left: 0; +} diff --git a/src/app/components/navbar/navbar.component.html b/src/app/components/navbar/navbar.component.html new file mode 100644 index 0000000..2d386aa --- /dev/null +++ b/src/app/components/navbar/navbar.component.html @@ -0,0 +1,36 @@ + diff --git a/src/app/components/navbar/navbar.component.ts b/src/app/components/navbar/navbar.component.ts new file mode 100644 index 0000000..4af7a8a --- /dev/null +++ b/src/app/components/navbar/navbar.component.ts @@ -0,0 +1,49 @@ +import { Component, OnInit } from '@angular/core'; +import { Router } from '@angular/router'; +import { TokenService } from 'src/app/services/token.service'; +import { UserService } from 'src/app/services/user.service'; +import { User } from 'src/models/identity/user.model'; + +@Component({ + selector: 'app-navbar', + templateUrl: './navbar.component.html', + styleUrls: ['./navbar.component.css'] +}) +export class NavbarComponent implements OnInit { + public user: User; + + constructor(private _router: Router, private _userService: UserService, private _tokenService: TokenService) + { } + + ngOnInit(): void { + if (!this._tokenService.getTokenFromSessionStorage()) { + this._router.navigate(['/login']); + return; + } + + this.user = this._userService.getDefaultUser(); + + this._userService.getUserFromSessionStorageRequest().subscribe({ + next: (res: object) => { + Object.assign(this.user, res); + }, + }); + } + + goToProfile(): void { + this._router.navigate(['/profile/' + this.user.userName]); + } + + goToFeed(): void { + this._router.navigate(['/']); + } + + goToSettings(): void { + this._router.navigate(['/profile/' + this.user.userName + '/settings']); + } + + logout(): void { + this._tokenService.logoutUserFromSessionStorage(); + this._router.navigate(['/login']); + } +} diff --git a/src/app/components/post/post.component.html b/src/app/components/post/post.component.html index a4acfe6..4d9fc64 100644 --- a/src/app/components/post/post.component.html +++ b/src/app/components/post/post.component.html @@ -36,11 +36,11 @@
- - diff --git a/src/assets/icons/tabler-icon-home.svg b/src/assets/icons/tabler-icon-home.svg new file mode 100644 index 0000000..3578ddb --- /dev/null +++ b/src/assets/icons/tabler-icon-home.svg @@ -0,0 +1,73 @@ + + + + + + image/svg+xml + + + + + + + + + + + diff --git a/src/assets/icons/tabler-icon-logout.svg b/src/assets/icons/tabler-icon-logout.svg new file mode 100644 index 0000000..c311628 --- /dev/null +++ b/src/assets/icons/tabler-icon-logout.svg @@ -0,0 +1,69 @@ + + + + + + image/svg+xml + + + + + + + + + + diff --git a/src/assets/icons/tabler-icon-message-circle.svg b/src/assets/icons/tabler-icon-message-circle.svg new file mode 100644 index 0000000..fc999bd --- /dev/null +++ b/src/assets/icons/tabler-icon-message-circle.svg @@ -0,0 +1,86 @@ + + + + + + image/svg+xml + + + + + + + + + + + + diff --git a/src/assets/icons/tabler-icon-search.svg b/src/assets/icons/tabler-icon-search.svg new file mode 100644 index 0000000..abbd480 --- /dev/null +++ b/src/assets/icons/tabler-icon-search.svg @@ -0,0 +1,74 @@ + + + + + + image/svg+xml + + + + + + + + + + diff --git a/src/assets/icons/tabler-icon-settings.svg b/src/assets/icons/tabler-icon-settings.svg new file mode 100644 index 0000000..c133334 --- /dev/null +++ b/src/assets/icons/tabler-icon-settings.svg @@ -0,0 +1,71 @@ + + + + + + image/svg+xml + + + + + + + + + + diff --git a/src/assets/icons/tabler-icon-trending-up.svg b/src/assets/icons/tabler-icon-trending-up.svg new file mode 100644 index 0000000..c40ee92 --- /dev/null +++ b/src/assets/icons/tabler-icon-trending-up.svg @@ -0,0 +1,69 @@ + + + + + + image/svg+xml + + + + + + + + + + diff --git a/src/styles.css b/src/styles.css index b187391..75fe905 100644 --- a/src/styles.css +++ b/src/styles.css @@ -201,10 +201,22 @@ input[type=file]::file-selector-button { /* General padding */ -.small-padding { +.padding-normal { + padding: 0.4em; +} + +.padding-smaller { + padding: 0.3em; +} + +.padding-small { padding: 0.2em; } +.padding-tiny { + padding: 0.1em; +} + /* Cards */ .card { @@ -218,18 +230,24 @@ input[type=file]::file-selector-button { /* Effects */ -.lighter-hover:hover { +.lighter-hover:hover, .light-hover:hover, .hover-half-opacity:hover { cursor: pointer; +} + +.lighter-hover:hover { background: #424242; } -.click-effect:active { - transform: scale(0.9); +.light-hover:hover { + background: #696969; } .hover-half-opacity:hover { opacity: 0.5; - cursor: pointer; +} + +.click-effect:active { + transform: scale(0.9); } /* Inputs, the type found in login and register */ -- cgit v1.2.3 From 90003ad1e0342fc6e87b844fbbb05870ac128308 Mon Sep 17 00:00:00 2001 From: Syndamia Date: Fri, 19 Mar 2021 16:15:53 +0200 Subject: Fixed navbar component not handling logged out user properly --- src/app/components/navbar/navbar.component.html | 17 ++++-- src/app/components/navbar/navbar.component.ts | 17 ++++-- src/assets/icons/tabler-icon-login.svg | 69 +++++++++++++++++++++++++ 3 files changed, 94 insertions(+), 9 deletions(-) create mode 100644 src/assets/icons/tabler-icon-login.svg (limited to 'src/assets') diff --git a/src/app/components/navbar/navbar.component.html b/src/app/components/navbar/navbar.component.html index 2d386aa..6bd3e66 100644 --- a/src/app/components/navbar/navbar.component.html +++ b/src/app/components/navbar/navbar.component.html @@ -1,9 +1,12 @@ diff --git a/src/app/components/navbar/navbar.component.ts b/src/app/components/navbar/navbar.component.ts index 4af7a8a..d10a49d 100644 --- a/src/app/components/navbar/navbar.component.ts +++ b/src/app/components/navbar/navbar.component.ts @@ -11,15 +11,13 @@ import { User } from 'src/models/identity/user.model'; }) export class NavbarComponent implements OnInit { public user: User; + public loggedIn: Boolean; constructor(private _router: Router, private _userService: UserService, private _tokenService: TokenService) { } ngOnInit(): void { - if (!this._tokenService.getTokenFromSessionStorage()) { - this._router.navigate(['/login']); - return; - } + this.loggedIn = this._tokenService.getTokenFromSessionStorage() !== ''; this.user = this._userService.getDefaultUser(); @@ -35,7 +33,12 @@ export class NavbarComponent implements OnInit { } goToFeed(): void { - this._router.navigate(['/']); + if (this.loggedIn) { + this._router.navigate(['/']); + } + else { + this.goToLogin(); + } } goToSettings(): void { @@ -44,6 +47,10 @@ export class NavbarComponent implements OnInit { logout(): void { this._tokenService.logoutUserFromSessionStorage(); + this.goToLogin(); + } + + goToLogin(): void { this._router.navigate(['/login']); } } diff --git a/src/assets/icons/tabler-icon-login.svg b/src/assets/icons/tabler-icon-login.svg new file mode 100644 index 0000000..4f62892 --- /dev/null +++ b/src/assets/icons/tabler-icon-login.svg @@ -0,0 +1,69 @@ + + -- cgit v1.2.3 From 533bf3779ac4e4736320fdb5f23746cb5e765105 Mon Sep 17 00:00:00 2001 From: Syndamia Date: Fri, 19 Mar 2021 16:31:26 +0200 Subject: Removed old image assets and added new default user icon asset --- src/app/app-constants.module.ts | 2 +- src/assets/icons/tabler-icon-user.svg | 71 +++++++++++++++++++++++++++++++++ src/assets/images/comment.png | Bin 31366 -> 0 bytes src/assets/images/feed/chat-pic.png | Bin 7634 -> 0 bytes src/assets/images/feed/profile-pic.png | Bin 7870 -> 0 bytes src/assets/images/paper-clip.png | Bin 2923 -> 0 bytes 6 files changed, 72 insertions(+), 1 deletion(-) create mode 100644 src/assets/icons/tabler-icon-user.svg delete mode 100644 src/assets/images/comment.png delete mode 100644 src/assets/images/feed/chat-pic.png delete mode 100644 src/assets/images/feed/profile-pic.png delete mode 100644 src/assets/images/paper-clip.png (limited to 'src/assets') diff --git a/src/app/app-constants.module.ts b/src/app/app-constants.module.ts index f8722f7..39538e0 100644 --- a/src/app/app-constants.module.ts +++ b/src/app/app-constants.module.ts @@ -14,7 +14,7 @@ export class AppConstants { public static API_COMMENT_URL = AppConstants.BASE_API_URL + '/Comment'; public static PAGE_SIZE = 10; - public static FALLBACK_PROFILE_ICON = 'assets/images/feed/profile-pic.png'; + public static FALLBACK_PROFILE_ICON = 'assets/icons/tabler-icon-user.svg'; public static SESSION_TOKEN_KEY = 'UserCred'; public static ADMIN_ROLE_NAME = 'Admin'; diff --git a/src/assets/icons/tabler-icon-user.svg b/src/assets/icons/tabler-icon-user.svg new file mode 100644 index 0000000..37969ec --- /dev/null +++ b/src/assets/icons/tabler-icon-user.svg @@ -0,0 +1,71 @@ + + + + + + image/svg+xml + + + + + + + + + + diff --git a/src/assets/images/comment.png b/src/assets/images/comment.png deleted file mode 100644 index 5f8e8d9..0000000 Binary files a/src/assets/images/comment.png and /dev/null differ diff --git a/src/assets/images/feed/chat-pic.png b/src/assets/images/feed/chat-pic.png deleted file mode 100644 index 60241fa..0000000 Binary files a/src/assets/images/feed/chat-pic.png and /dev/null differ diff --git a/src/assets/images/feed/profile-pic.png b/src/assets/images/feed/profile-pic.png deleted file mode 100644 index 87f67f5..0000000 Binary files a/src/assets/images/feed/profile-pic.png and /dev/null differ diff --git a/src/assets/images/paper-clip.png b/src/assets/images/paper-clip.png deleted file mode 100644 index 46ce0a7..0000000 Binary files a/src/assets/images/paper-clip.png and /dev/null differ -- cgit v1.2.3 From 4ff1d8194a2f2ae2a837e1d15167cd3b6b74d32f Mon Sep 17 00:00:00 2001 From: Syndamia Date: Fri, 19 Mar 2021 18:19:53 +0200 Subject: Major redesign of feed component styling --- src/app/components/feed/feed.component.css | 171 +++------------------------- src/app/components/feed/feed.component.html | 67 +++++------ src/assets/icons/tabler-icon-paperclip.svg | 65 +++++++++++ src/styles.css | 6 +- 4 files changed, 113 insertions(+), 196 deletions(-) create mode 100644 src/assets/icons/tabler-icon-paperclip.svg (limited to 'src/assets') diff --git a/src/app/components/feed/feed.component.css b/src/app/components/feed/feed.component.css index 3d22349..baa96d5 100644 --- a/src/app/components/feed/feed.component.css +++ b/src/app/components/feed/feed.component.css @@ -1,171 +1,36 @@ -#feed-page { - height: 100%; - max-width: 40em; - box-sizing: border-box; - border: .5em solid var(--bg-color); - - margin: 0 auto; - - display: flex; -} - -@media screen and (max-width: 750px) { - #profile-bar { - display: none !important; - } - #top-bar-profile-pic { - display: initial; - } -} -@media screen and (min-width: 750px) { - #profile-bar { - display: initial; - } - #top-bar-profile-pic { - display: none !important; - } -} - -/* Content */ - -#feed-content { - flex: 1; - display: flex; - flex-direction: column; -} - -/* Profile bar */ - -#profile-bar { - width: 20%; - height: fit-content; - display: flex; - flex-direction: column; - align-items: center; - - box-sizing: border-box; - background-color: var(--bg-color); - - margin-right: .5em; - padding-bottom: 1em; - padding: .5em; - border-radius: .6em; -} - -#profile-bar-profile-pic { - width: 7em; - height: 7em; - box-sizing: border-box; - padding: .5em; -} - -#profile-bar-name { - text-align: center; -} - -#profile-bar-username { - margin: .5em 0; -} - -#profile-bar > #profile-info { - display: flex; - flex-direction: column; - align-items: center; +#create-post { + width: 100%; + margin: 1em 0; } -/* Top bar */ - -#top-bar { - display: flex; - flex-direction: row; - width: 98%; - margin: 0 auto; - margin-bottom: .5em; - box-sizing: border-box; +#new-post-message { + min-height: 1.5em; + resize: vertical; } -#top-bar-profile-pic { - height: 2.5em; - width: 2.5em; - margin-right: .5em; +#attachments-btns { + padding: 0.5em 0; } -#top-bar-profile-pic > img { - height: inherit; - width: inherit; +#attachments-btns img, .file-button > input { + height: 1.4em; + width: 1.4em; } -#top-bar-open-chat { - /* Until implemented */ - display: none; +#new-post-attachments { + margin-bottom: 0.5em; } -/* Create post */ - -#create-post-form { - width: 100%; +.file-button { position: relative; - display: flex; - flex-direction: column; - box-sizing: border-box; -} - -#form-inputs { - display: flex; -} - -#top-bar-create-post { - flex: 1; - font-size: inherit; - width: 100%; - height: 100%; - margin: 0 auto; - box-sizing: border-box; - border: 2px solid var(--bg-color); - border-radius: .6em; -} - -#file-upload { - font-size: inherit; - color: transparent; - width: 1.5em; - height: 1.5em; } -#file-upload:hover { - cursor: pointer; -} - -#attachment-img { - height: 1.5em; - width: 1.5em; +.file-button > img { position: absolute; - right: .4em; pointer-events: none; } -/* Posts */ - -#no-posts-msg { - width: 100%; - margin-top: 1em; - color: gray; - text-align: center; -} - -/* Elements, that act as buttons */ - -#profile-bar > #profile-info:hover, -#top-bar-profile-pic:hover { - cursor: pointer; -} - -/* Can't copy text from */ - -#profile-bar, -.vote { - -webkit-user-select: none; /* Safari */ - -moz-user-select: none; /* Firefox */ - -ms-user-select: none; /* IE10+/Edge */ - user-select: none; /* Standard */ +.file-button > input { + font-size: inherit; + color: transparent; } diff --git a/src/app/components/feed/feed.component.html b/src/app/components/feed/feed.component.html index 5694b09..c5c4401 100644 --- a/src/app/components/feed/feed.component.html +++ b/src/app/components/feed/feed.component.html @@ -2,49 +2,34 @@ -
- -
- -
-
- None of your friends have posted anything yet!
- Try refreshing your page! -
-
- +
+
+
+ {{ file.name ? file.name : 'Attachment' }} +
+ ☒ +
+ + +
+
+ None of your friends have posted anything yet!
+ Try refreshing your page! +
+
+ +
diff --git a/src/assets/icons/tabler-icon-paperclip.svg b/src/assets/icons/tabler-icon-paperclip.svg new file mode 100644 index 0000000..955e6fb --- /dev/null +++ b/src/assets/icons/tabler-icon-paperclip.svg @@ -0,0 +1,65 @@ + + + + + + image/svg+xml + + + + + + + + + diff --git a/src/styles.css b/src/styles.css index af9bbeb..b4f7539 100644 --- a/src/styles.css +++ b/src/styles.css @@ -24,16 +24,18 @@ body { background-color: var(--bg-color); } -button { +button, textarea, input { color: inherit; background: inherit; + background-color: inherit; font: inherit; padding: 0; border: none; } input:focus, -button:focus { +button:focus, +textarea:focus { outline: 0; } -- cgit v1.2.3 From 9794489573eaa3cd8bdc853c9d67db5145e22fe4 Mon Sep 17 00:00:00 2001 From: Syndamia Date: Sat, 20 Mar 2021 11:10:58 +0200 Subject: Major rework of post attachment styling --- .../post-attachment/post-attachment.component.css | 50 +------------ .../post-attachment/post-attachment.component.html | 20 +++--- src/app/components/post/post.component.css | 1 - src/app/components/post/post.component.html | 2 +- src/assets/icons/tabler-icon-file.svg | 69 ++++++++++++++++++ src/assets/icons/tabler-icon-photo.svg | 84 ++++++++++++++++++++++ src/styles.css | 15 ++++ 7 files changed, 181 insertions(+), 60 deletions(-) create mode 100644 src/assets/icons/tabler-icon-file.svg create mode 100644 src/assets/icons/tabler-icon-photo.svg (limited to 'src/assets') diff --git a/src/app/components/post-attachment/post-attachment.component.css b/src/app/components/post-attachment/post-attachment.component.css index 58e8a82..dd41340 100644 --- a/src/app/components/post-attachment/post-attachment.component.css +++ b/src/app/components/post-attachment/post-attachment.component.css @@ -1,27 +1,5 @@ -/* Attachment */ - .attachment { - width: 100%; - height: 100%; - display: flex; - border: 2px solid black; - border-top: 0; - border-radius: 0 0 .6em .6em; - padding: .4em; - padding-top: 1em; - margin-top: calc(-0.8em - 2px); -} - -.attachment:hover { - cursor: pointer; -} - -.attachment-name { - flex: 1; -} - -.attachment-type { - margin-left: .2em; + background-color: #424242; } /* Full attachment */ @@ -33,9 +11,6 @@ width: 100vw; height: 100vh; background-color: #000000AF; - display: flex; - justify-content: center; - align-items: center; z-index: 2; } @@ -46,27 +21,6 @@ .attachment-download { max-width: 420px !important; - margin: 0 .4em; text-decoration: none; - color: white; - border-color: white; - background-color: black; -} - -.attachment-download:hover { - background-color: white; - color: var(--focus-color); -} - -.close { - position: fixed; - top: .2em; - right: .2em; - font-size: 2em; - color: whitesmoke; -} - -.close:hover { - color: var(--failure); - cursor: pointer; + color: inherit; } diff --git a/src/app/components/post-attachment/post-attachment.component.html b/src/app/components/post-attachment/post-attachment.component.html index 401068c..8605ca0 100644 --- a/src/app/components/post-attachment/post-attachment.component.html +++ b/src/app/components/post-attachment/post-attachment.component.html @@ -1,16 +1,16 @@ -
- +
+
+ + +
+ {{ fileName }} - - {{ fileType }} -
-
+
- Download attachment -
- ☒ -
+ + Download attachment +
diff --git a/src/app/components/post/post.component.css b/src/app/components/post/post.component.css index f263386..c5919fd 100644 --- a/src/app/components/post/post.component.css +++ b/src/app/components/post/post.component.css @@ -16,7 +16,6 @@ } .message { - margin: 0.2em 0; word-break: break-word; } diff --git a/src/app/components/post/post.component.html b/src/app/components/post/post.component.html index a966d00..133b747 100644 --- a/src/app/components/post/post.component.html +++ b/src/app/components/post/post.component.html @@ -13,7 +13,7 @@ @{{ user.userName }}
-
+
{{ post.message }}
diff --git a/src/assets/icons/tabler-icon-file.svg b/src/assets/icons/tabler-icon-file.svg new file mode 100644 index 0000000..312c9f4 --- /dev/null +++ b/src/assets/icons/tabler-icon-file.svg @@ -0,0 +1,69 @@ + + + + + + image/svg+xml + + + + + + + + + + diff --git a/src/assets/icons/tabler-icon-photo.svg b/src/assets/icons/tabler-icon-photo.svg new file mode 100644 index 0000000..eddf3cc --- /dev/null +++ b/src/assets/icons/tabler-icon-photo.svg @@ -0,0 +1,84 @@ + + + + + + image/svg+xml + + + + + + + + + + + + diff --git a/src/styles.css b/src/styles.css index 0a435a7..c06a9bd 100644 --- a/src/styles.css +++ b/src/styles.css @@ -122,6 +122,10 @@ input[type=file]::file-selector-button { flex-wrap: wrap; } +.flex-no-wrap { + flex-wrap: nowrap; +} + .flex-row { flex-direction: row; } @@ -246,6 +250,17 @@ input[type=file]::file-selector-button { padding-bottom: 0.2em; } +/* Margin */ + +.margin-top-bot-small { + margin-top: 0.2em; + margin-bottom: 0.2em; +} + +.margin-right-small { + margin-right: 0.2em; +} + /* Cards */ .card { -- cgit v1.2.3 From 88b8336f0fa51a6f1ac1334e1237d1053d52d8a7 Mon Sep 17 00:00:00 2001 From: Syndamia Date: Sun, 21 Mar 2021 15:14:54 +0200 Subject: Major redesign of form attachments (the ones you find on post creation and edit) --- src/app/components/feed/feed.component.css | 12 ++-- src/app/components/feed/feed.component.html | 14 ++-- .../post-attachment/post-attachment.component.css | 4 -- .../post-attachment/post-attachment.component.html | 2 +- src/assets/icons/tabler-icon-x.svg | 75 ++++++++++++++++++++++ src/styles.css | 27 ++++---- 6 files changed, 101 insertions(+), 33 deletions(-) create mode 100644 src/assets/icons/tabler-icon-x.svg (limited to 'src/assets') diff --git a/src/app/components/feed/feed.component.css b/src/app/components/feed/feed.component.css index 372792c..a0b6d2e 100644 --- a/src/app/components/feed/feed.component.css +++ b/src/app/components/feed/feed.component.css @@ -1,3 +1,7 @@ +section:empty { + display: none; +} + #create-post { width: 100%; margin-top: 1em; @@ -8,19 +12,11 @@ resize: vertical; } -#attachments-btns { - padding: 0.5em 0; -} - #attachments-btns img, .file-button > input { height: 1.4em; width: 1.4em; } -#new-post-attachments { - margin-bottom: 0.5em; -} - .file-button { position: relative; } diff --git a/src/app/components/feed/feed.component.html b/src/app/components/feed/feed.component.html index fb969da..3fd778a 100644 --- a/src/app/components/feed/feed.component.html +++ b/src/app/components/feed/feed.component.html @@ -5,17 +5,19 @@
-
+
-
-
- {{ file.name ? file.name : 'Attachment' }} -
- ☒ +
+
+
+ {{ file.name ? file.name : 'Attachment' }} +
+
+
diff --git a/src/app/components/post-attachment/post-attachment.component.css b/src/app/components/post-attachment/post-attachment.component.css index 3c25563..6cdab0b 100644 --- a/src/app/components/post-attachment/post-attachment.component.css +++ b/src/app/components/post-attachment/post-attachment.component.css @@ -1,7 +1,3 @@ -.attachment { - background-color: #424242; -} - /* Full attachment */ .show-full-attachment { diff --git a/src/app/components/post-attachment/post-attachment.component.html b/src/app/components/post-attachment/post-attachment.component.html index 12004dc..04ba633 100644 --- a/src/app/components/post-attachment/post-attachment.component.html +++ b/src/app/components/post-attachment/post-attachment.component.html @@ -1,4 +1,4 @@ -
+
diff --git a/src/assets/icons/tabler-icon-x.svg b/src/assets/icons/tabler-icon-x.svg new file mode 100644 index 0000000..28725c8 --- /dev/null +++ b/src/assets/icons/tabler-icon-x.svg @@ -0,0 +1,75 @@ + + + + + + image/svg+xml + + + + + + + + + + diff --git a/src/styles.css b/src/styles.css index 93ed57b..b166d70 100644 --- a/src/styles.css +++ b/src/styles.css @@ -277,6 +277,15 @@ input[type=file]::file-selector-button { padding-left: 0.3em; } +.bot-padding-bigger { + padding-bottom: 0.5em; +} + +.top-bot-padding-bigger { + padding-top: 0.5em; + padding-bottom: 0.5em; +} + .top-bot-padding-small { padding-top: 0.2em; padding-bottom: 0.2em; @@ -446,6 +455,10 @@ input[type=file]::file-selector-button { /* Form attachments (the ones that are shown while creating and editing a post) */ +.form-attachment { + background-color: #424242; +} + .form-attachments { display: flex; flex-wrap: wrap; @@ -454,20 +467,6 @@ input[type=file]::file-selector-button { margin: 0 0.3em; } -.form-attachment { - border: 2px solid black; - border-radius: 0.6em; - margin-top: 0.2em; - margin-right: 0.2em; - padding: 0.2em; - display: flex; - align-items: center; -} - -.form-attachment:last-child { - margin-right: 0; -} - .remove-form-attachment { font-size: 0.9em; color: var(--failure); -- cgit v1.2.3 From 0a16705c40735e81afa1f3d58c7cba224f46dbcd Mon Sep 17 00:00:00 2001 From: Syndamia Date: Sun, 21 Mar 2021 16:32:44 +0200 Subject: Implemented (moved from post page) functionality for editing and deleting your posts into post component --- .vim/coc-settings.json | 3 + .../components/post-page/post-page.component.ts | 46 +---------- src/app/components/post/post.component.css | 21 +++++ src/app/components/post/post.component.html | 38 +++++++-- src/app/components/post/post.component.ts | 82 +++++++++++++++++++- src/assets/icons/tabler-icon-edit.svg | 76 ++++++++++++++++++ src/assets/icons/tabler-icon-trash.svg | 90 ++++++++++++++++++++++ 7 files changed, 307 insertions(+), 49 deletions(-) create mode 100644 .vim/coc-settings.json create mode 100644 src/assets/icons/tabler-icon-edit.svg create mode 100644 src/assets/icons/tabler-icon-trash.svg (limited to 'src/assets') diff --git a/.vim/coc-settings.json b/.vim/coc-settings.json new file mode 100644 index 0000000..d69e97e --- /dev/null +++ b/.vim/coc-settings.json @@ -0,0 +1,3 @@ +{ + "angular.enable-experimental-ivy-prompt": false +} \ No newline at end of file diff --git a/src/app/components/post-page/post-page.component.ts b/src/app/components/post-page/post-page.component.ts index e159c69..0babfdf 100644 --- a/src/app/components/post-page/post-page.component.ts +++ b/src/app/components/post-page/post-page.component.ts @@ -7,7 +7,6 @@ import { CommentService } from 'src/app/services/comment.service'; import { PostService } from 'src/app/services/post.service'; import { TokenService } from 'src/app/services/token.service'; import { Post } from 'src/models/post.model'; -import { CloudinaryService } from 'src/app/services/cloudinary.service'; @Component({ selector: 'app-post-page', @@ -18,22 +17,17 @@ export class PostPageComponent implements OnInit { private _title = 'Post'; public dataArrived = false; public loggedIn = false; - public editable = false; - public editingPost = false; public postId: Guid; public post: Post; - public files: File[]; - public editPostFormGroup: FormGroup; public addCommentFormGroup: FormGroup; - constructor(private _titleService: Title, private _router: Router, private _fb: FormBuilder, private _tokenService: TokenService, private _postService: PostService, private _commentService: CommentService, private _cloudinaryService: CloudinaryService){ + constructor(private _titleService: Title, private _router: Router, private _fb: FormBuilder, private _tokenService: TokenService, private _postService: PostService, private _commentService: CommentService) { this._titleService.setTitle(this._title); } ngOnInit(): void { this.loggedIn = this._tokenService.getTokenFromSessionStorage() !== ''; this.postId = Guid.parse(this._router.url.substring(6)); - this.files = []; // Gets the post and the logged in user and compares them, // to determine if the current post is made by the user @@ -41,52 +35,19 @@ export class PostPageComponent implements OnInit { next: (result: object) => { this.post = result as Post; this.post.fileURLs = Object.values(result)[7]; - if (this.loggedIn) { - this.editable = this.post.creatorUsername === this._tokenService.getUsernameFromSessionStorageToken(); - this.editPostFormGroup.get('newPostMessage')?.setValue(this.post.message); - } - if (this.post.fileURLs.length > 0) { - this.loadFiles(); - } - else { - this.dataArrived = true; - } + + this.dataArrived = true; }, error: () => { this._router.navigate(['/not-found']); } }); - this.editPostFormGroup = this._fb.group({ - newPostMessage: new FormControl(''), - fileUpload: new FormControl('') - }); - this.addCommentFormGroup = this._fb.group({ newComment: new FormControl('') }); } - private loadFiles(): void { - for (const fileURL of this.post.fileURLs) { - this._cloudinaryService.getFileRequest(fileURL).subscribe({ - next: (result: object) => { - const file = result as File; - const tmp = { - name: fileURL.match('(?<=\/)(?:.(?!\/))+$')?.pop() ?? 'Attachment' - }; - - Object.assign(file, tmp); - this.files.push(file); - - if (this.files.length === this.post.fileURLs.length) { - this.dataArrived = true; - } - } - }); - } - } - addComment(): void { if (!this.loggedIn) { this._router.navigate(['/login']); @@ -97,7 +58,6 @@ export class PostPageComponent implements OnInit { if (newComment !== '' && newComment !== null) { this._commentService.createCommentWithSessionStorageRequest(this.postId, newComment).subscribe({ next: () => { - this.editPostFormGroup.reset(); this.reloadPage(); } }); diff --git a/src/app/components/post/post.component.css b/src/app/components/post/post.component.css index c5919fd..1015564 100644 --- a/src/app/components/post/post.component.css +++ b/src/app/components/post/post.component.css @@ -32,3 +32,24 @@ height: 1.2em; width: 1.2em; } + +/* Edit */ + +#attachments-btns img, .file-button > input { + height: 1.4em; + width: 1.4em; +} + +.file-button { + position: relative; +} + +.file-button > img { + position: absolute; + pointer-events: none; +} + +.file-button > input { + font-size: inherit; + color: transparent; +} 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 }} -
+
{{ post.message }}
-
+
+ + +
+
+ + +
+
+ +
+
+
+ {{ file.name ? file.name : 'Attachment' }} +
+
+ +
+
+
+
-
- + - +
- + +
diff --git a/src/app/components/login/login.component.ts b/src/app/components/login/login.component.ts index edbc461..a0ce730 100644 --- a/src/app/components/login/login.component.ts +++ b/src/app/components/login/login.component.ts @@ -16,6 +16,7 @@ export class LoginComponent implements OnInit { @ViewChild(ErrorBarComponent) private _errorBar: ErrorBarComponent; private _title = 'Login'; public loginUserFormGroup: FormGroup; + public showingPassword = false; constructor(private _titleService: Title, private _fb: FormBuilder, private _router: Router, private _userService: UserService, private _tokenService: TokenService) { this._titleService.setTitle(this._title); @@ -32,6 +33,10 @@ export class LoginComponent implements OnInit { }); } + toggleShowPassword(): void { + this.showingPassword = !this.showingPassword; + } + onSubmit(): void { this._errorBar.hideError(); this._userService.loginUserRequest(this.loginUserFormGroup).subscribe({ diff --git a/src/app/components/register/register.component.html b/src/app/components/register/register.component.html index 1f547c4..1cd6cdb 100644 --- a/src/app/components/register/register.component.html +++ b/src/app/components/register/register.component.html @@ -1,4 +1,4 @@ -
+
Register @@ -37,8 +37,11 @@
- + +
@@ -46,7 +49,6 @@
-