diff options
9 files changed, 154 insertions, 4 deletions
diff --git a/src/DevHive.Angular/src/app/app.module.ts b/src/DevHive.Angular/src/app/app.module.ts index 723ea24..9a2fafd 100644 --- a/src/DevHive.Angular/src/app/app.module.ts +++ b/src/DevHive.Angular/src/app/app.module.ts @@ -23,6 +23,7 @@ import { PostPageComponent } from './components/post-page/post-page.component'; import { AdminPanelPageComponent } from './components/admin-panel-page/admin-panel-page.component'; 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'; @NgModule({ declarations: [ @@ -40,7 +41,8 @@ import { CommentPageComponent } from './components/comment-page/comment-page.com PostPageComponent, AdminPanelPageComponent, CommentComponent, - CommentPageComponent + CommentPageComponent, + PostAttachmentComponent ], imports: [ BrowserModule, diff --git a/src/DevHive.Angular/src/app/components/post-attachment/post-attachment.component.css b/src/DevHive.Angular/src/app/components/post-attachment/post-attachment.component.css new file mode 100644 index 0000000..572cc99 --- /dev/null +++ b/src/DevHive.Angular/src/app/components/post-attachment/post-attachment.component.css @@ -0,0 +1,75 @@ +/* Attachment */ + +.attachment { + border: 2px solid black; + border-top: 0; + border-radius: 0 0 .6em .6em; + padding: .4em; + padding-top: 1em; + margin-top: calc(-0.8em - 2px); +} + +.clickable { + width: 100%; + height: 100%; + display: flex; +} + +.clickable:hover { + cursor: pointer; +} + +.attachment-name { + flex: 1; +} + +.attachment-type { + margin-left: .2em; +} + +/* Full attachment */ + +.show-full-attachment { + position: fixed; + top: 0; + left: 0; + width: 100vw; + height: 100vh; + background-color: #000000AF; + display: flex; + justify-content: center; + align-items: center; + z-index: 2; +} + +.show-full-attachment > * { + max-height: 100vh; + max-width: 100vw; +} + +.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; +} diff --git a/src/DevHive.Angular/src/app/components/post-attachment/post-attachment.component.html b/src/DevHive.Angular/src/app/components/post-attachment/post-attachment.component.html new file mode 100644 index 0000000..e7889f0 --- /dev/null +++ b/src/DevHive.Angular/src/app/components/post-attachment/post-attachment.component.html @@ -0,0 +1,18 @@ +<div class="attachment"> + <div class="clickable" (click)="toggleShowFull()"> + <div class="attachment-name"> + Attachment + </div> + <div class="attachment-type"> + {{ fileType }} + </div> + </div> +</div> + +<div class="show-full-attachment" *ngIf="showFull" (click)="toggleShowFull()"> + <img class="attachment-img" *ngIf="paramURL.includes('image')" src="{{paramURL}}"> + <a class="attachment-download submit-btn" *ngIf="!paramURL.includes('image')" href="{{paramURL}}">Download attachment</a> + <div class="close"> + ☒ + </div> +</div> diff --git a/src/DevHive.Angular/src/app/components/post-attachment/post-attachment.component.ts b/src/DevHive.Angular/src/app/components/post-attachment/post-attachment.component.ts new file mode 100644 index 0000000..d2aa636 --- /dev/null +++ b/src/DevHive.Angular/src/app/components/post-attachment/post-attachment.component.ts @@ -0,0 +1,23 @@ +import { Component, Input, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-post-attachment', + templateUrl: './post-attachment.component.html', + styleUrls: ['./post-attachment.component.css'] +}) +export class PostAttachmentComponent implements OnInit { + @Input() paramURL: string; + public showFull = false; + public fileType: string; + + constructor() + { } + + ngOnInit(): void { + this.fileType = this.paramURL.includes('image') ? 'img' : 'raw'; + } + + toggleShowFull(): void { + this.showFull = !this.showFull; + } +} diff --git a/src/DevHive.Angular/src/app/components/post/post.component.css b/src/DevHive.Angular/src/app/components/post/post.component.css index 73030b2..07d931f 100644 --- a/src/DevHive.Angular/src/app/components/post/post.component.css +++ b/src/DevHive.Angular/src/app/components/post/post.component.css @@ -6,6 +6,7 @@ box-sizing: border-box; padding: .5em; background-color: var(--card-bg); + position: relative; } .post:first-child { @@ -109,3 +110,20 @@ hr { color: var(--focus-color); cursor: pointer; } + +/* Attachments */ + +.attachments { + display: flex; + width: 98%; + margin: -.3em auto .5em auto; + flex-wrap: wrap; +} + +.attachments:empty { + display: none; +} + +.attachments > * { + flex: 1; +} diff --git a/src/DevHive.Angular/src/app/components/post/post.component.html b/src/DevHive.Angular/src/app/components/post/post.component.html index c559c25..7347056 100644 --- a/src/DevHive.Angular/src/app/components/post/post.component.html +++ b/src/DevHive.Angular/src/app/components/post/post.component.html @@ -42,3 +42,8 @@ </button> </div> </div> +<div class="attachments"> + <div *ngFor="let fileURL of post.fileURLs"> + <app-post-attachment class="no-events" [paramURL]="fileURL"></app-post-attachment> + </div> +</div> diff --git a/src/DevHive.Angular/src/app/components/post/post.component.ts b/src/DevHive.Angular/src/app/components/post/post.component.ts index 0842e3c..387f56f 100644 --- a/src/DevHive.Angular/src/app/components/post/post.component.ts +++ b/src/DevHive.Angular/src/app/components/post/post.component.ts @@ -29,6 +29,7 @@ export class PostComponent implements OnInit { this._postService.getPostRequest(Guid.parse(this.paramId)).subscribe( (result: object) => { Object.assign(this.post, result); + this.post.fileURLs = Object.values(result)[7]; this.votesNumber = 23; this.timeCreated = new Date(this.post.timeCreated).toLocaleString('en-GB'); diff --git a/src/DevHive.Angular/src/app/services/post.service.ts b/src/DevHive.Angular/src/app/services/post.service.ts index 0f3a4e2..466c0bb 100644 --- a/src/DevHive.Angular/src/app/services/post.service.ts +++ b/src/DevHive.Angular/src/app/services/post.service.ts @@ -15,7 +15,7 @@ export class PostService { { } getDefaultPost(): Post { - return new Post(Guid.createEmpty(), 'Gosho', 'Trapov', 'gosho_trapov', 'Your opinion on my idea?', new Date(), []); + return new Post(Guid.createEmpty(), 'Gosho', 'Trapov', 'gosho_trapov', 'Your opinion on my idea?', new Date(), [], []); } /* Requests from session storage */ diff --git a/src/DevHive.Angular/src/models/post.ts b/src/DevHive.Angular/src/models/post.ts index 1c6e26c..8e58bea 100644 --- a/src/DevHive.Angular/src/models/post.ts +++ b/src/DevHive.Angular/src/models/post.ts @@ -10,9 +10,9 @@ export class Post { private _message: string; private _timeCreated: Date; private _comments: PostComment[]; - // _files + private _fileURLs: string[]; - constructor(postId: Guid, creatorFirstName: string, creatorLastName: string, creatorUsername: string, message: string, timeCreated: Date, comments: PostComment[]) { + constructor(postId: Guid, creatorFirstName: string, creatorLastName: string, creatorUsername: string, message: string, timeCreated: Date, comments: PostComment[], fileURLs: string[]) { this.postId = postId; this.creatorFirstName = creatorFirstName; this.creatorLastName = creatorLastName; @@ -20,6 +20,7 @@ export class Post { this.message = message; this.timeCreated = timeCreated; this.comments = comments; + this.fileURLs = fileURLs; } public get postId(): Guid { @@ -70,4 +71,11 @@ export class Post { public set comments(v: PostComment[]) { this._comments = v; } + + public get fileURLs(): string[] { + return this._fileURLs; + } + public set fileURLs(v: string[]) { + this._fileURLs = v; + } } |