Merge branch 'julius-dev' of Software_Engineering_I/greenvironment-frontend into master

5 years ago · 911c5a1ab6
parent 1c60943074 2c7e6b495e
commit 911c5a1ab6
9 changed files with 49 additions and 24 deletions
--- 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": []
          },
--- a/ngsw-config.json
+++ b/ngsw-config.json
@ -21,6 +21,7 @@
      "resources": {
        "files": [
          "/assets/**",
+          "/data/**",
          "/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"
        ]
      }
--- 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",
@ -10944,9 +10949,9 @@
      }
    },
    "rxjs": {
-      "version": "6.3.3",
-      "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.3.3.tgz",
-      "integrity": "sha512-JTWmoY9tWCs7zvIk/CvRjhjGaOd+OVBM987mxFo+OW66cGpdKjZcpmc74ES1sB//7Kl/PAe8+wEakuhG4pcgOw==",
+      "version": "6.5.4",
+      "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.5.4.tgz",
+      "integrity": "sha512-naMQXcgEo3csAEGvw/NydRA0fuS2nDZJiw1YUWFKU7aPPAPGZEsD4Iimit96qwCieH6y614MCLYwdkrWx7z/7Q==",
      "requires": {
        "tslib": "^1.9.0"
      }
--- a/package.json
+++ b/package.json
@ -35,9 +35,10 @@
    "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",
-    "rxjs": "~6.3.3",
+    "node-sass": "^4.13.1",
+    "rxjs": "~6.5.4",
    "ts-md5": "^1.2.7",
    "zone.js": "^0.8.29"
  },
--- 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
--- 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: [
--- a/src/app/components/profile/profile.component.html
+++ b/src/app/components/profile/profile.component.html
@ -3,11 +3,11 @@
    <!--on small screen-->
    <mat-toolbar id="toolbar" fxShow="true" fxHide.gt-sm="true">
      <mat-toolbar-row>
-        <div class="hover-box" matTooltip="upload new picture" *ngIf="ownProfile" (click)="openFileUploadDialog()">
+        <div class="hover-box profile-picture-container" matTooltip="upload new picture" *ngIf="ownProfile" (click)="openFileUploadDialog()">
          <img class="profile-picture" [src]="userProfile.profilePicture"/>
          <mat-icon id="icon">camera_alt</mat-icon>
        </div>
-        <div *ngIf="!ownProfile">
+        <div class="profile-picture-container" *ngIf="!ownProfile" (click)="openPfpLightbox()">
          <img class="profile-picture" [src]="userProfile.profilePicture"/>
        </div>

@ -44,12 +44,12 @@
    <!--on big screen-->
    <mat-toolbar id="toolbar" fxShow="true" fxHide.lt-md="true">
      <mat-toolbar-row>
-        <div class="hover-box" matTooltip="upload new picture" *ngIf="ownProfile" (click)="openFileUploadDialog()">
+        <div class="hover-box profile-picture-container" matTooltip="upload new picture" *ngIf="ownProfile" (click)="openFileUploadDialog()">
          <img class="profile-picture" [src]="userProfile.profilePicture"/>
          <mat-icon id="icon">camera_alt</mat-icon>
        </div>
-        <div *ngIf="!ownProfile">
-          <img class="profile-picture" [src]="userProfile.profilePicture"/>
+        <div class="profile-picture-container" *ngIf="!ownProfile" (click)="openPfpLightbox()">
+          <img class="profile-picture" [src]="userProfile.profilePicture" />
        </div>
        <span id="username">{{userProfile.username}}</span>
        <span id="handle">@{{userProfile.handle}}</span>
--- 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
+
+.profile-picture-container
  cursor: pointer
+  z-index: 11
+.hover-box
  text-align: center
  display: flex
  justify-content: center
--- 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});
+  }
 }