diff --git a/angular.json b/angular.json index 5bf4787..7df165f 100644 --- a/angular.json +++ b/angular.json @@ -29,7 +29,8 @@ ], "styles": [ "src/styles/greenvironment-material-theme.scss", - "src/styles.sass" + "src/styles.sass", + "./node_modules/ngx-lightbox/lightbox.css" ], "scripts": [] }, diff --git a/package-lock.json b/package-lock.json index e0e0d51..8bc3752 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3136,9 +3136,9 @@ } }, "abbrev": { - "version": "1.0.9", - "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.0.9.tgz", - "integrity": "sha1-kbR5JYinc4wl813W9jdSovh3YTU=" + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz", + "integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==" }, "accepts": { "version": "1.3.5", @@ -6931,9 +6931,9 @@ } }, "globule": { - "version": "1.2.1", - "resolved": "https://registry.npmjs.org/globule/-/globule-1.2.1.tgz", - "integrity": "sha512-g7QtgWF4uYSL5/dn71WxubOrS7JVGCnFPEnoeChJmBnyR9Mw8nGoEwOgJL/RC2Te0WhbsEUCejfH8SZNJ+adYQ==", + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/globule/-/globule-1.3.0.tgz", + "integrity": "sha512-YlD4kdMqRCQHrhVdonet4TdRtv1/sZKepvoxNT4Nrhrp5HI8XFfc8kFlGlBn2myBo80aGp8Eft259mbcUJhgSg==", "requires": { "glob": "~7.1.1", "lodash": "~4.17.10", @@ -9104,6 +9104,11 @@ "opencollective-postinstall": "^2.0.2" } }, + "ngx-lightbox": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/ngx-lightbox/-/ngx-lightbox-2.1.1.tgz", + "integrity": "sha512-mI1hUo/DrhcTeWi/7AVusKfzLr5ySz+EFrOksNlCEiaQKVMqCZdUgj+7ruKDROF7dZcNkJL9Wf99yyiG2nhezQ==" + }, "ngx-socket-io": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/ngx-socket-io/-/ngx-socket-io-2.1.1.tgz", @@ -9223,9 +9228,9 @@ } }, "node-sass": { - "version": "4.13.0", - "resolved": "https://registry.npmjs.org/node-sass/-/node-sass-4.13.0.tgz", - "integrity": "sha512-W1XBrvoJ1dy7VsvTAS5q1V45lREbTlZQqFbiHb3R3OTTCma0XBtuG6xZ6Z4506nR4lmHPTqVRwxT6KgtWC97CA==", + "version": "4.13.1", + "resolved": "https://registry.npmjs.org/node-sass/-/node-sass-4.13.1.tgz", + "integrity": "sha512-TTWFx+ZhyDx1Biiez2nB0L3YrCZ/8oHagaDalbuBSlqXgUPsdkUSzJsVxeDO9LtPB49+Fh3WQl3slABo6AotNw==", "requires": { "async-foreach": "^0.1.3", "chalk": "^1.1.1", diff --git a/package.json b/package.json index a12f028..680dc52 100644 --- a/package.json +++ b/package.json @@ -35,8 +35,9 @@ "hammerjs": "^2.0.8", "js-sha512": "^0.8.0", "ngx-infinite-scroll": "^8.0.1", + "ngx-lightbox": "^2.1.1", "ngx-socket-io": "^2.1.1", - "node-sass": "^4.13.0", + "node-sass": "^4.13.1", "rxjs": "~6.3.3", "ts-md5": "^1.2.7", "zone.js": "^0.8.29" diff --git a/src/app/app.component.sass b/src/app/app.component.sass index 663787d..e977ea0 100644 --- a/src/app/app.component.sass +++ b/src/app/app.component.sass @@ -11,10 +11,10 @@ $scrollbar-color-dark: transparent $scrollbar-thumb-color-dark: #aaa ::ng-deep body - scrollbar-color: $scrollbar-color $scrollbar-thumb-color + scrollbar-color: $scrollbar-thumb-color $scrollbar-color scrollbar-width: thin .dark-theme - scrollbar-color: $scrollbar-color-dark $scrollbar-thumb-color-dark + scrollbar-color: $scrollbar-thumb-color-dark $scrollbar-color-dark ::ng-deep ::-webkit-scrollbar width: 4px diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 9877d08..68b4402 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -63,6 +63,7 @@ import {MatNativeDateModule, MatProgressBarModule} from '@angular/material/'; import {MatSnackBarModule} from '@angular/material/snack-bar'; import { ServiceWorkerModule } from '@angular/service-worker'; import { environment } from '../environments/environment'; +import {LightboxModule} from 'ngx-lightbox'; const config: SocketIoConfig = {url: 'http://localhost:4444', options: {}}; @@ -147,6 +148,7 @@ const appRoutes: Routes = [ MatDatepickerModule, MatSnackBarModule, MatProgressBarModule, + LightboxModule, ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production }), ], entryComponents: [ diff --git a/src/app/components/profile/profile.component.html b/src/app/components/profile/profile.component.html index 7d3b3d0..1860066 100644 --- a/src/app/components/profile/profile.component.html +++ b/src/app/components/profile/profile.component.html @@ -44,12 +44,12 @@ -
+ -
- + {{userProfile.username}} @{{userProfile.handle}} diff --git a/src/app/components/profile/profile.component.sass b/src/app/components/profile/profile.component.sass index 81986bd..f782b67 100644 --- a/src/app/components/profile/profile.component.sass +++ b/src/app/components/profile/profile.component.sass @@ -54,8 +54,11 @@ color: white $mat-card-header-size: 100px !default -.hover-box + +.user-profile-picture cursor: pointer + z-index: 11 +.hover-box text-align: center display: flex justify-content: center diff --git a/src/app/components/profile/profile.component.ts b/src/app/components/profile/profile.component.ts index 9f92026..815ba80 100644 --- a/src/app/components/profile/profile.component.ts +++ b/src/app/components/profile/profile.component.ts @@ -9,6 +9,7 @@ import {HttpClient} from '@angular/common/http'; import {SelfService} from '../../services/selfservice/self.service'; import {MatDialog} from '@angular/material'; import {DialogFileUploadComponent} from './fileUpload/fileUpload.component'; +import {Lightbox} from 'ngx-lightbox'; @Component({ selector: 'app-profile', @@ -32,7 +33,7 @@ export class ProfileComponent implements OnInit { private requestService: RequestService, private data: DatasharingService, private profileService: ProfileService, - private selfService: SelfService, + private lightbox: Lightbox, public dialog: MatDialog) { router.events.forEach((event) => { // check if the user is on the profile page (of userY) and routes to the page of userY (e.g. his own page) @@ -85,4 +86,15 @@ export class ProfileComponent implements OnInit { } }); } + + /** + * Opens a lightbox with the users profile picture + */ + openPfpLightbox() { + this.lightbox.open([{ + src: this.userProfile.profilePicture, + caption: `${this.userProfile.username}'s profile picture`, + thumb: this.userProfile.profilePicture, + }], 0, {disableScrolling: true}); + } }