diff options
Diffstat (limited to 'src')
3 files changed, 119 insertions, 20 deletions
diff --git a/src/DevHive.Angular/src/app/components/feed/feed.component.css b/src/DevHive.Angular/src/app/components/feed/feed.component.css index 73e1f3e..c3fee62 100644 --- a/src/DevHive.Angular/src/app/components/feed/feed.component.css +++ b/src/DevHive.Angular/src/app/components/feed/feed.component.css @@ -75,13 +75,9 @@ /* Top bar */ -form { - width: 100%; - height: 100%; -} - #top-bar { display: flex; + flex-direction: column; width: 98%; margin: 0 auto; margin-bottom: .5em; @@ -99,6 +95,29 @@ form { width: inherit; } +#top-bar-open-chat { + /* Until implemented */ + display: none; +} + +#main-content { + display: flex; +} + +/* Create post */ + +#create-post-form { + width: 100%; + position: relative; + display: flex; + flex-direction: column; + box-sizing: border-box; +} + +#form-inputs { + display: flex; +} + #top-bar-create-post { flex: 1; font-size: inherit; @@ -110,9 +129,64 @@ form { border-radius: .6em; } -#top-bar-open-chat { - /* Until implemented */ - display: none; +#file-upload { + font-size: inherit; + color: transparent; + width: 1.5em; + height: 1.5em; +} + +#file-upload:hover { + cursor: pointer; +} + +#file-upload::-webkit-file-upload-button { + visibility: hidden; +} + +#attachment-img { + height: 1.5em; + width: 1.5em; + position: absolute; + right: .4em; + pointer-events: none; +} + +#attachments { + display: flex; + flex-wrap: wrap; + color: gray; + font-size: .75em; + margin: 0 .3em; +} + +.attachment { + border: 2px solid black; + border-radius: .6em; + margin-top: .2em; + margin-right: .2em; + padding: .2em; + display: flex; + align-items: center; +} + +.attachment:last-child { + margin-right: 0; +} + +.remove-attachment { + font-size: .9em; + color: var(--failure); + background-color: white; + border-radius: .2em; + margin: 0 .2em; + padding: .2em; +} + +.remove-attachment:hover { + color: white; + background-color: var(--failure); + cursor: pointer; } /* Posts */ diff --git a/src/DevHive.Angular/src/app/components/feed/feed.component.html b/src/DevHive.Angular/src/app/components/feed/feed.component.html index 1ec040b..055ca16 100644 --- a/src/DevHive.Angular/src/app/components/feed/feed.component.html +++ b/src/DevHive.Angular/src/app/components/feed/feed.component.html @@ -15,15 +15,29 @@ <button class="submit-btn" (click)="logout()">Logout</button> </nav> <div id="feed-content"> - <nav id="top-bar" class="rounded-border"> - <img id="top-bar-profile-pic" class="round-image" [src]="user.imageUrl" alt="" (click)="goToProfile()"> - <form [formGroup]="createPostFormGroup" (ngSubmit)="createPost()"> - <input id="top-bar-create-post" type="text" formControlName="newPostMessage" placeholder="What's on your mind?"/> - <input type="submit" style="display: none" /> <!-- You need this element, so when you press enter the request is sent --> - </form> - <a id="top-bar-open-chat" href=""> - <img src="assets/images/feed/chat-pic.png" alt=""/> - </a> + <nav id="top-bar"> + <div id="main-content"> + <img id="top-bar-profile-pic" class="round-image" [src]="user.imageUrl" alt="" (click)="goToProfile()"> + <form id="create-post-form" class="rounded-border" [formGroup]="createPostFormGroup" (ngSubmit)="createPost()"> + <div id="form-inputs"> + <input id="top-bar-create-post" type="text" formControlName="newPostMessage" placeholder="What's on your mind?"/> + <input type="submit" style="display: none" /> <!-- You need this element, so when you press enter the request is sent --> + <img id="attachment-img" src="assets/images/paper-clip.png"> + <input id="file-upload" type="file" formControlName="fileUpload" (change)="onFileUpload($event)"> + </div> + <div id="attachments"> + <div *ngFor="let file of files" class="attachment"> + {{ file.name }} + <div class="remove-attachment" (click)="removeAttachment(file.name)"> + ☒ + </div> + </div> + </div> + </form> + <a id="top-bar-open-chat" href=""> + <img src="assets/images/feed/chat-pic.png" alt=""/> + </a> + </div> </nav> <div id="posts" class="scroll-standalone"> <div id="no-posts-msg" *ngIf="posts.length === 0"> diff --git a/src/DevHive.Angular/src/app/components/feed/feed.component.ts b/src/DevHive.Angular/src/app/components/feed/feed.component.ts index 0684ddb..7ce1133 100644 --- a/src/DevHive.Angular/src/app/components/feed/feed.component.ts +++ b/src/DevHive.Angular/src/app/components/feed/feed.component.ts @@ -23,6 +23,7 @@ export class FeedComponent implements OnInit { public user: User; public posts: Post[]; public createPostFormGroup: FormGroup; + public files: File[]; constructor(private _titleService: Title, private _fb: FormBuilder, private _router: Router, private _userService: UserService, private _feedService: FeedService, private _postService: PostService, private _tokenService: TokenService) { this._titleService.setTitle(this._title); @@ -36,13 +37,15 @@ export class FeedComponent implements OnInit { this.posts = []; this.user = this._userService.getDefaultUser(); + this.files = []; const now = new Date(); now.setHours(now.getHours() + 2); // accounting for eastern european timezone this._timeLoaded = now.toISOString(); this.createPostFormGroup = this._fb.group({ - newPostMessage: new FormControl('') + newPostMessage: new FormControl(''), + fileUpload: new FormControl('') }); this._userService.getUserFromSessionStorageRequest().subscribe( @@ -62,8 +65,7 @@ export class FeedComponent implements OnInit { this.posts = Object.values(result)[0]; this.finishUserLoading(); }, - (err: HttpErrorResponse) => { - const test = err.status; + (err) => { this.finishUserLoading(); } ); @@ -86,6 +88,15 @@ export class FeedComponent implements OnInit { this._router.navigate(['/login']); } + onFileUpload(event: any): void { + this.files.push(event.target.files[0]); + this.createPostFormGroup.get('fileUpload')?.reset(); + } + + removeAttachment(fileName: string): void { + this.files = this.files.filter(x => x.name !== fileName); + } + createPost(): void { const postMessage = this.createPostFormGroup.get('newPostMessage')?.value; |