diff --git a/src/app/app.component.sass b/src/app/app.component.sass index 2fea290..eb5a516 100644 --- a/src/app/app.component.sass +++ b/src/app/app.component.sass @@ -29,6 +29,8 @@ $scrollbar-thumb-color-dark: #aaa .dark-theme background: $scrollbar-thumb-color-dark + + ::ng-deep .lb-dataContainer display: none @@ -39,7 +41,7 @@ $scrollbar-thumb-color-dark: #aaa background-color: transparent ::ng-deep .lb-outerContainer - height: 100vh !important + // height: 100vh !important display: flex justify-content: center align-items: center diff --git a/src/app/components/feed/feed.component.html b/src/app/components/feed/feed.component.html index 3f7bb97..47b1ed2 100644 --- a/src/app/components/feed/feed.component.html +++ b/src/app/components/feed/feed.component.html @@ -6,12 +6,23 @@
+
+

Preview:

+ + +
- +

I protected the environment. diff --git a/src/app/components/feed/feed.component.sass b/src/app/components/feed/feed.component.sass index 96d02f4..5f16e08 100644 --- a/src/app/components/feed/feed.component.sass +++ b/src/app/components/feed/feed.component.sass @@ -16,6 +16,7 @@ width: 100% padding: 0.5em + ::ng-deep .mat-option touch-action: auto !important @@ -30,6 +31,26 @@ width: 100% padding-left: 0.5em padding-right: 0.5em + .mat-icon + transform: scale(1.5) +#inputPreview + max-width: 75% + max-height: 100% + width: auto + border-radius: 4px + mask-mode: luminance + outline: none + user-select: none +::ng-deep video + width: 100% + max-height: 40vh + outline: none + user-select: none +#inputPreviewWrapper + margin: auto + text-align: center + max-height: 512px + margin-bottom: 1em #action-chooser width: 100% diff --git a/src/app/components/feed/feed.component.ts b/src/app/components/feed/feed.component.ts index d7d85b8..a103d97 100644 --- a/src/app/components/feed/feed.component.ts +++ b/src/app/components/feed/feed.component.ts @@ -6,6 +6,7 @@ import {DatasharingService} from '../../services/datasharing.service'; import {ActivityService} from 'src/app/services/activity/activity.service'; import {User} from 'src/app/models/user'; import {IErrorResponse} from '../../models/interfaces/IErrorResponse'; +import { BehaviorSubject } from 'rxjs/internal/BehaviorSubject'; @Component({ selector: 'home-feed', @@ -15,6 +16,12 @@ import {IErrorResponse} from '../../models/interfaces/IErrorResponse'; export class FeedComponent implements OnInit { loadingNew = true; loadingMostLiked = true; + // file upload variables + public uploading = false; + public profilePictureUrl: BehaviorSubject; + private file; + private fileType; + public localFileUrl; checked = false; // if the "I protected the environment."-box is checked view = 'new'; @@ -27,7 +34,7 @@ export class FeedComponent implements OnInit { loggedIn = false; user: User; - errorOccurred: boolean; + errorOccurred = false; private errorMessage: string; @@ -89,6 +96,22 @@ export class FeedComponent implements OnInit { } } + onFileInputChange(event) { + this.errorOccurred = false; + this.errorMessage = ''; + this.file = event.target.files[0]; + if (this.file.type.includes('video')) { + this.fileType = 'video'; + } else if (this.file.type.includes('image')) { + this.fileType = 'image'; + } + const reader = new FileReader(); + reader.onload = (e: any) => { + this.localFileUrl = e.target.result; + }; + reader.readAsDataURL(this.file); + } + /** * Fetches the next posts when scrolled */ diff --git a/src/app/components/group/group.component.html b/src/app/components/group/group.component.html index d081455..652f47b 100644 --- a/src/app/components/group/group.component.html +++ b/src/app/components/group/group.component.html @@ -7,7 +7,7 @@ camera_alt

-
+
@@ -63,7 +63,7 @@ camera_alt
-
+
{{groupProfile.name}} @@ -108,7 +108,7 @@
- + @@ -139,7 +139,7 @@
- + Members diff --git a/src/app/components/group/group.component.sass b/src/app/components/group/group.component.sass index 65d8b8e..6312e7b 100644 --- a/src/app/components/group/group.component.sass +++ b/src/app/components/group/group.component.sass @@ -35,7 +35,8 @@ $mat-card-header-size: 100px !default .mat-toolbar-row max-height: 40px - + .ng-star-inserted + z-index: 99 .info-box font-size: 14px margin-left: calc(100px + 0.5em) @@ -73,13 +74,14 @@ $mat-card-header-size: 100px !default // in IE, but we're using it as a progressive enhancement. .profile-picture + cursor: pointer height: $mat-card-header-size width: $mat-card-header-size border-radius: 50% flex-shrink: 0 background-size: cover transition-duration: 0.5s - z-index: 10 + z-index: 99 object-fit: cover .card diff --git a/src/app/components/group/group.component.ts b/src/app/components/group/group.component.ts index 3a739e4..014483b 100644 --- a/src/app/components/group/group.component.ts +++ b/src/app/components/group/group.component.ts @@ -9,6 +9,7 @@ import {Group} from 'src/app/models/group'; import {Event} from 'src/app/models/event'; import {MatDialog, MatDialogRef} from '@angular/material/dialog'; import {DialogGroupFileUploadComponent} from './fileUpload/fileUpload.component'; +import {Lightbox} from 'ngx-lightbox'; // DIALOG COMPONENT to create events @Component({ @@ -85,6 +86,7 @@ export class GroupComponent implements OnInit { private requestService: RequestService, private data: DatasharingService, private groupService: GroupService, + private lightbox: Lightbox, private datasharingService: DatasharingService) { router.events.forEach((event) => { // check if url changes @@ -196,4 +198,11 @@ export class GroupComponent implements OnInit { }); } + openPfpLightbox() { + this.lightbox.open([{ + src: this.groupProfile.picture, + thumb: this.groupProfile.picture, + }], 0, {disableScrolling: true}); + } + }