Add lightbox to profiles and fix firefox scrolbar

- Add a lightbox that opens when one clicks on a users profile picture on the users profile page
master
trivernis 5 years ago
parent 8c77e743f1
commit dced1772ad

@ -29,7 +29,8 @@
],
"styles": [
"src/styles/greenvironment-material-theme.scss",
"src/styles.sass"
"src/styles.sass",
"./node_modules/ngx-lightbox/lightbox.css"
],
"scripts": []
},

23
package-lock.json generated

@ -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",

@ -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"

@ -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

@ -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: [

@ -44,11 +44,11 @@
<!--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 user-profile-picture" 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="user-profile-picture" *ngIf="!ownProfile" (click)="openPfpLightbox()">
<img class="profile-picture" [src]="userProfile.profilePicture" />
</div>
<span id="username">{{userProfile.username}}</span>

@ -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

@ -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});
}
}

Loading…
Cancel
Save