Team-Greenvironment
/
greenvironment-frontend
mirror of https://github.com/Team-Greenvironment/greenvironment-frontend.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'max_dev' of Software_Engineering_I/greenvironment-frontend into master

Browse Source
master
Trivernis 5 years ago committed by Gitea
parent 9d685b203f 562664ec5f
commit 5f75b3cb19
14 changed files with 223 additions and 92 deletions
Show Stats Download Patch File Download Diff File

3
src/app/app.module.ts
Unescape Escape View File

@ -70,6 +70,7 @@ import {MatSnackBarModule} from '@angular/material/snack-bar';
// import logo from 'src/assets/gv-new-logo.svg'; // import logo from 'src/assets/gv-new-logo.svg';
import logo from '!!raw-loader!./gv-new-logo-white.svg'; import logo from '!!raw-loader!./gv-new-logo-white.svg';
import logo_green from '!!raw-loader!./gv-new-logo.svg';
const config: SocketIoConfig = { url: 'http://localhost:4444', options: {} }; const config: SocketIoConfig = { url: 'http://localhost:4444', options: {} };
@ -163,5 +164,7 @@ export class AppModule {
constructor(iconRegistry: MatIconRegistry, sanitizer: DomSanitizer) { constructor(iconRegistry: MatIconRegistry, sanitizer: DomSanitizer) {
iconRegistry.addSvgIconLiteral( iconRegistry.addSvgIconLiteral(
'logo', sanitizer.bypassSecurityTrustHtml(logo)); 'logo', sanitizer.bypassSecurityTrustHtml(logo));
iconRegistry.addSvgIconLiteral(
'logo_green', sanitizer.bypassSecurityTrustHtml(logo_green));
} }
} }

6
src/app/components/about/about.component.html
Unescape Escape View File

@ -5,7 +5,7 @@
<br> <br> <br> <br> <br> <br> <br> <br> <br> <br>
<h1 class="mat-display-3">Keep it clean and green!</h1> <h1 class="mat-display-3">Keep it clean and green!</h1>
<button mat-icon-button> <button mat-icon-button>
<mat-icon class="big-icon">keyboard_arrow_down</mat-icon> <mat-icon class="big-icon" color="primary">keyboard_arrow_down</mat-icon>
</button> </button>
</div> </div>
<div id="text1" style="text-align: center;"> <div id="text1" style="text-align: center;">
@ -65,8 +65,8 @@
<div id="text2" style="text-align: center;"> <div id="text2" style="text-align: center;">
<p class="mat-display-1">We believe, that together we can do amazing things to protect our environment and keep it clean and green.</p> <p class="mat-display-1">We believe, that together we can do amazing things to protect our environment and keep it clean and green.</p>
<p class="mat-display-1">You aren't part of greenvironment yet? - join us now!</p> <p class="mat-display-1">You aren't part of greenvironment yet? - join us now!</p>
<a mat-raised-button class="link-button" routerLink="/register" >Register</a> <a mat-stroked-button color="primary" class="link-button" routerLink="/register" >Register</a>
<br> <br>
<a mat-raised-button class="link-button" routerLink="/login">Login</a> <a mat-stroked-button color="primary" class="link-button" routerLink="/login">Login</a>
</div> </div>
</div> </div>

1
src/app/components/about/about.component.sass
Unescape Escape View File

@ -11,7 +11,6 @@
padding: 2em padding: 2em
max-width: 100% max-width: 100%
min-height: 50% min-height: 50%
background-color: mat-color($primary)
#text1 #text1
padding: 2em padding: 2em

17
src/app/components/feed/postlist/postlist.component.sass
Unescape Escape View File

@ -1,6 +1,7 @@
@import '../../../../styles/mixins.sass' @import '../../../../styles/mixins.sass'
@import '../../../../styles/vars.sass' @import '../../../../styles/vars.sass'
$mat-card-header-size: 40px !default
.post .post
box-sizing: border-box box-sizing: border-box
width: 100% width: 100%
@ -11,6 +12,8 @@
margin-top: 10px margin-top: 10px
.mat-card-subtitle .mat-card-subtitle
display: contents display: contents
.mat-card-content
overflow: auto
a:hover a:hover
cursor: pointer cursor: pointer
#button-box #button-box
@ -25,19 +28,13 @@
padding: 0 padding: 0
margin: 0 margin: 0
margin-left: 8px margin-left: 8px
.profile-picture
border-radius: 50%
width: $mat-card-header-size
height: $mat-card-header-size
.activity-info .activity-info
display: contents display: contents
.span .span
margin-left: 32px margin-left: 32px
$mat-card-header-size: 100px !default
.profile-picture
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
object-fit: cover

4
src/app/components/group/group.component.html
Unescape Escape View File

@ -1,7 +1,7 @@
<div id="profile-page"> <div id="profile-page">
<div id="profilecontainer" *ngIf="!groupNotFound && !loading"> <div id="profilecontainer" *ngIf="!groupNotFound && !loading">
<!--on small screen--> <!--on small screen-->
<mat-toolbar color="primary" id="toolbar" fxShow="true" fxHide.gt-sm="true"> <mat-toolbar id="toolbar" fxShow="true" fxHide.gt-sm="true">
<mat-toolbar-row> <mat-toolbar-row>
<div class="profile-picture"></div> <div class="profile-picture"></div>
<span id="username">{{groupProfile.name}}</span> <span id="username">{{groupProfile.name}}</span>
@ -34,7 +34,7 @@
</mat-toolbar-row> </mat-toolbar-row>
</mat-toolbar> </mat-toolbar>
<!--on big screen--> <!--on big screen-->
<mat-toolbar color="primary" id="toolbar" fxShow="true" fxHide.lt-md="true"> <mat-toolbar id="toolbar" fxShow="true" fxHide.lt-md="true">
<mat-toolbar-row> <mat-toolbar-row>
<div class="profile-picture"></div> <div class="profile-picture"></div>
<span id="username">{{groupProfile.name}}</span> <span id="username">{{groupProfile.name}}</span>

2
src/app/components/imprint/imprint.component.html
Unescape Escape View File

@ -1,4 +1,4 @@
<mat-toolbar color="primary">Imprint</mat-toolbar> <mat-toolbar>Imprint</mat-toolbar>
<div id="imprint"> <div id="imprint">
<p>The greenvironment network is being developed by the greenvironment team</p> <p>The greenvironment network is being developed by the greenvironment team</p>
<h2>Contact</h2> <h2>Contact</h2>

18
src/app/components/main-navigation/main-navigation.component.html
Unescape Escape View File

@ -7,9 +7,14 @@
fxShow="true" fxHide.gt-sm="true" fxShow="true" fxHide.gt-sm="true"
fixedInViewport="false" fixedInViewport="false"
autoFocus="false"> autoFocus="false">
<mat-toolbar *ngIf="!loggedIn">Menu</mat-toolbar> <mat-toolbar class="menu-bar" *ngIf="!loggedIn">Menu</mat-toolbar>
<mat-toolbar *ngIf="loggedIn"> <mat-toolbar *ngIf="loggedIn" class="menu-bar">
<span>Hello, {{user.username}}</span> <div mat-card-avatar>
<img class="profile-picture" [src]="user.profilePicture"/>
</div>
<div class="hello-text-box">
<span class="hello-text">Hello, {{user.username}}</span>
</div>
</mat-toolbar> </mat-toolbar>
<mat-nav-list> <mat-nav-list>
<a mat-list-item routerLink="" (click)="drawer.close()">Home</a> <a mat-list-item routerLink="" (click)="drawer.close()">Home</a>
@ -27,7 +32,7 @@
<!-- TOOLBAR --> <!-- TOOLBAR -->
<mat-sidenav-content> <mat-sidenav-content>
<mat-toolbar color="primary" class="mat-elevation-z4"> <mat-toolbar color="accent" class="mat-elevation-z4">
<!--content on SMALL SCREEN--> <!--content on SMALL SCREEN-->
<button <button
@ -38,9 +43,10 @@
fxShow="true" fxHide.gt-sm="true"> fxShow="true" fxHide.gt-sm="true">
<mat-icon aria-label="Side nav toggle icon">menu</mat-icon> <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
</button> </button>
<mat-icon svgIcon="logo" style="min-width: 35px;" routerLink="" class="link"></mat-icon> <mat-icon *ngIf="lighttheme" svgIcon="logo" style="min-width: 35px;" routerLink="" class="link"></mat-icon>
<mat-icon *ngIf="!lighttheme" svgIcon="logo_green" style="min-width: 35px;" routerLink="" class="link"></mat-icon>
<span routerLink="" class="link">Greenvironment</span> <span routerLink="" class="link">Greenvironment</span>
<nav mat-tab-nav-bar backgroundColor="primary" fxShow="true" fxHide.lt-md="true" routerLinkActive #rla=""> <nav mat-tab-nav-bar backgroundColor="accent" color="accent" fxShow="true" fxHide.lt-md="true" routerLinkActive #rla="">
<div *ngIf="loggedIn"> <div *ngIf="loggedIn">
<a mat-tab-link class="link" <a mat-tab-link class="link"
*ngFor="let link of navLinksLoggedIn" *ngFor="let link of navLinksLoggedIn"

18
src/app/components/main-navigation/main-navigation.component.sass
Unescape Escape View File

@ -4,6 +4,21 @@
.sidenav .sidenav
width: 200px width: 200px
.menu-bar
position: inherit !important
.mat-card-avatar
display: contents
.profile-picture
width: 52px
height: 52px
border-radius: 50%
flex-shrink: 0
.hello-text-box
margin-left: 8px
.hello-text
white-space: normal
font-size: initial
.link .link
user-select: none user-select: none
cursor: pointer cursor: pointer
@ -13,7 +28,7 @@
.sidenav .mat-toolbar .sidenav .mat-toolbar
//background: inherit //background: inherit
.mat-toolbar.mat-primary .mat-toolbar
height: 56px height: 56px
position: fixed position: fixed
//position: sticky //position: sticky
@ -26,6 +41,7 @@
.mat-tab-link .mat-tab-link
height: 56px height: 56px
.mat-sidenav-content .mat-sidenav-content
padding-top: 56px padding-top: 56px

4
src/app/components/profile/profile.component.html
Unescape Escape View File

@ -1,7 +1,7 @@
<div id="profile-page"> <div id="profile-page">
<div id="profilecontainer" *ngIf="!profileNotFound && !loading"> <div id="profilecontainer" *ngIf="!profileNotFound && !loading">
<!--on small screen--> <!--on small screen-->
<mat-toolbar color="primary" id="toolbar" fxShow="true" fxHide.gt-sm="true"> <mat-toolbar id="toolbar" fxShow="true" fxHide.gt-sm="true">
<mat-toolbar-row> <mat-toolbar-row>
<div class="hover-box" matTooltip="upload new picture" *ngIf="ownProfile" (click)="fileInput.click()"> <div class="hover-box" matTooltip="upload new picture" *ngIf="ownProfile" (click)="fileInput.click()">
<img class="profile-picture" [src]="userProfile.profilePicture"/> <img class="profile-picture" [src]="userProfile.profilePicture"/>
@ -43,7 +43,7 @@
</mat-toolbar-row> </mat-toolbar-row>
</mat-toolbar> </mat-toolbar>
<!--on big screen--> <!--on big screen-->
<mat-toolbar color="primary" id="toolbar" fxShow="true" fxHide.lt-md="true"> <mat-toolbar id="toolbar" fxShow="true" fxHide.lt-md="true">
<mat-toolbar-row> <mat-toolbar-row>
<div class="hover-box" matTooltip="upload new picture" *ngIf="ownProfile" (click)="fileInput.click()"> <div class="hover-box" matTooltip="upload new picture" *ngIf="ownProfile" (click)="fileInput.click()">
<img class="profile-picture" [src]="userProfile.profilePicture"/> <img class="profile-picture" [src]="userProfile.profilePicture"/>

3
src/app/components/userlist/userlist.component.sass
Unescape Escape View File

@ -9,8 +9,7 @@
user-select: none user-select: none
::ng-deep .mat-card-header-text ::ng-deep .mat-card-header-text
width: 1000% width: 1000%
margin: 0 margin: auto 0 auto 24px
margin-left: 24px
.mat-card-subtitle .mat-card-subtitle
margin: 0 margin: 0
word-break: break-all word-break: break-all

141
src/app/gv-new-logo.svg
Unescape Escape View File

@ -0,0 +1,141 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="64px"
height="64px"
viewBox="0 0 64 64"
version="1.1"
id="SVGRoot"
inkscape:version="0.92.4 5da689c313, 2019-01-14"
sodipodi:docname="gv-new-logo.svg">
<defs
id="defs3412">
<linearGradient
id="linearGradient4054"
inkscape:collect="always">
<stop
id="stop4050"
offset="0"
style="stop-color:#00c088;stop-opacity:1" />
<stop
id="stop4052"
offset="1"
style="stop-color:#08ff21;stop-opacity:0.97468352" />
</linearGradient>
<linearGradient
id="linearGradient4048"
inkscape:collect="always">
<stop
id="stop4044"
offset="0"
style="stop-color:#00c088;stop-opacity:1" />
<stop
id="stop4046"
offset="1"
style="stop-color:#08ff21;stop-opacity:0.97468352" />
</linearGradient>
<linearGradient
inkscape:collect="always"
id="linearGradient4005">
<stop
style="stop-color:#00c088;stop-opacity:1"
offset="0"
id="stop4001" />
<stop
style="stop-color:#08ff21;stop-opacity:0.95358652"
offset="1"
id="stop4003" />
</linearGradient>
<linearGradient
inkscape:collect="always"
xlink:href="#linearGradient4054"
id="linearGradient4007"
x1="13.48775"
y1="12.73616"
x2="52.052452"
y2="47.384392"
gradientUnits="userSpaceOnUse" />
<linearGradient
inkscape:collect="always"
xlink:href="#linearGradient4048"
id="linearGradient4017"
x1="14.551315"
y1="10.077048"
x2="51.051678"
y2="51.531181"
gradientUnits="userSpaceOnUse" />
<linearGradient
inkscape:collect="always"
xlink:href="#linearGradient4005"
id="linearGradient4025"
x1="13.637479"
y1="15.156103"
x2="52.776852"
y2="46.975906"
gradientUnits="userSpaceOnUse" />
</defs>
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="8"
inkscape:cx="-4.045925"
inkscape:cy="41.653992"
inkscape:document-units="px"
inkscape:current-layer="layer2"
showgrid="false"
inkscape:window-width="1920"
inkscape:window-height="1003"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="1"
inkscape:grid-bbox="true" />
<metadata
id="metadata3415">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title />
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:groupmode="layer"
id="layer2"
inkscape:label="Layer 2"
style="display:inline">
<path
style="fill:none;stroke:url(#linearGradient4007);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m 59.638425,10.982918 c -2.598034,1.65974 -5.164767,1.536797 -6.79245,1.598268 -1.627684,0.06147 -7.89147,-0.248912 -10.548644,-0.307359 -2.031158,-0.04467 -10.408921,-0.634292 -18.029729,3.227272 -6.189793,3.136452 -10.030686,7.78418 -11.299883,11.09567 -1.095556,2.858442 -1.721588,5.317315 -1.095556,9.896969 0.334798,2.449172 0.916715,4.631314 0.829032,5.615672 -0.07744,0.869314 0.04741,1.638006 -2.331509,4.035408 -2.3789231,2.397403 -7.5630585,6.702992 -7.5630585,6.702992"
id="path3986"
inkscape:connector-curvature="0"
sodipodi:nodetypes="csssssssc" />
<path
style="fill:none;stroke:url(#linearGradient4017);stroke-width:2.81999993;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m 17.040936,45.75125 c 0,0 5.71124,1.10058 9.863991,0.923511 4.152753,-0.177069 10.503177,-1.963537 14.640251,-4.074381 2.654809,-1.354554 8.010685,-4.452479 10.623857,-9.671077 1.545586,-3.086589 2.392221,-6.933871 2.615983,-8.836099 0.374688,-3.185266 0.215574,-5.492636 0.858958,-6.968217"
id="path3988"
inkscape:connector-curvature="0"
sodipodi:nodetypes="cssssc" />
<path
style="fill:none;stroke:url(#linearGradient4025);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m 16.515165,41.68934 c 0,0 3.942744,-4.483925 8.75,-9 3.732038,-3.505984 5.757466,-5.519577 10.967068,-8.580806 3.85598,-2.265823 12.426015,-6.277728 15.87316,-7.736136"
id="path3990"
inkscape:connector-curvature="0"
sodipodi:nodetypes="cssc" />
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 5.2 KiB

1
src/app/services/login/login.service.ts
Unescape Escape View File

@ -22,6 +22,7 @@ const graphqlQuery = `mutation($email: String!, $pwHash: String!) {
handle, handle,
points, points,
level, level,
profilePicture,
receivedRequests{id, sender{name, handle, id}}, receivedRequests{id, sender{name, handle, id}},
sentRequests{receiver{id}}, sentRequests{receiver{id}},
friends { friends {

39
src/app/services/selfservice/self.service.ts
Unescape Escape View File

@ -37,43 +37,11 @@ export class SelfService {
} }
public updateUserInfo(response: any) { public updateUserInfo(response: any) {
const user: User = new User(); const user = new User();
let friendRequest: FriendRequest = new FriendRequest(); user.assignFromResponse(response.data.getSelf);
user.loggedIn = true;
user.userID = response.data.getSelf.id;
user.username = response.data.getSelf.name;
user.handle = response.data.getSelf.handle;
user.email = response.data.getSelf.email;
user.points = response.data.getSelf.points;
user.level = response.data.getSelf.level;
for (const friend of response.data.getSelf.friends) {
user.friends.push(new FriendInfo(
friend.id,
friend.name,
friend.level,
user.buildProfilePictureUrl(friend.profilePicture)
));
}
for (const group of response.data.getSelf.groups) {
user.groups.push(new GroupInfo(group.id, group.name));
}
user.chatIDs = response.data.getSelf.chats;
for (const request of response.data.getSelf.sentRequests) {
user.sentRequestUserIDs.push(request.receiver.id);
}
for (const request of response.data.getSelf.receivedRequests) {
friendRequest = new FriendRequest();
friendRequest.id = request.id;
friendRequest.senderUserID = request.sender.id;
friendRequest.senderUsername = request.sender.name;
friendRequest.senderHandle = request.sender.handle;
user.receivedRequests.push(friendRequest);
}
if (JSON.parse(response.data.getSelf.settings).darkmode === 'true') {
user.darkmode = true;
}
this.data.changeUserInfo(user); this.data.changeUserInfo(user);
} }
public fakeLogin() { public fakeLogin() {
const user: User = new User(); const user: User = new User();
let friendRequest: FriendRequest = new FriendRequest(); let friendRequest: FriendRequest = new FriendRequest();
@ -105,6 +73,7 @@ export class SelfService {
handle, handle,
points, points,
level, level,
profilePicture,
receivedRequests{id, sender{name, handle, id}}, receivedRequests{id, sender{name, handle, id}},
sentRequests{receiver{id}}, sentRequests{receiver{id}},
friends { friends {

56
src/styles/greenvironment-material-theme.scss
Unescape Escape View File

@ -1,50 +1,50 @@
@import '~@angular/material/theming'; @import '~@angular/material/theming';
// Plus imports for other components in your app. // Plus imports for other components in your app.
$mat-black: (
// Include the common styles for Angular Material. We include this here so that you only 50 : #e4e4e4,
// have to load a single css file for Angular Material in your app. 100 : #bcbcbc,
// Be sure that you only ever include this mixin once! 200 : #909090,
@include mat-core(); 300 : #646464,
400 : #424242,
$md-gvgreen: ( 500 : #212121,
50 : #e0f7e7, 600 : #1d1d1d,
100 : #b3ebc3, 700 : #181818,
200 : #80de9c, 800 : #141414,
300 : #4dd174, 900 : #0b0b0b,
400 : #26c756, A100 : #e76c6c,
500 : #00bd38, A200 : #e04040,
600 : #00b732, A400 : #ec0000,
700 : #00ae2b, A700 : #d30000,
800 : #00a624,
900 : #009817,
A100 : #c3ffc9,
A200 : #90ff9a,
A400 : #5dff6b,
A700 : #44ff54,
contrast: ( contrast: (
50 : #000000, 50 : #000000,
100 : #000000, 100 : #000000,
200 : #000000, 200 : #000000,
300 : #000000, 300 : #ffffff,
400 : #000000, 400 : #ffffff,
500 : #ffffff, 500 : #ffffff,
600 : #ffffff, 600 : #ffffff,
700 : #ffffff, 700 : #ffffff,
800 : #ffffff, 800 : #ffffff,
900 : #ffffff, 900 : #ffffff,
A100 : #000000, A100 : #000000,
A200 : #000000, A200 : #ffffff,
A400 : #000000, A400 : #ffffff,
A700 : #000000, A700 : #ffffff,
) )
); );
// Include the common styles for Angular Material. We include this here so that you only
// have to load a single css file for Angular Material in your app.
// Be sure that you only ever include this mixin once!
@include mat-core();
// Define the palettes for your theme using the Material Design palettes available in palette.scss // Define the palettes for your theme using the Material Design palettes available in palette.scss
// (imported above). For each palette, you can optionally specify a default, lighter, and darker // (imported above). For each palette, you can optionally specify a default, lighter, and darker
// hue. Available color palettes: https://material.io/design/color/ // hue. Available color palettes: https://material.io/design/color/
$primary: mat-palette($mat-light-green); $primary: mat-palette($mat-light-green);
$primary-color: mat-color($primary); $primary-color: mat-color($primary);
$accent: mat-palette($mat-brown, A200, A100, A400); $accent: mat-palette($mat-light-green);
// The warn palette is optional (defaults to red). // The warn palette is optional (defaults to red).
$warn: mat-palette($mat-red); $warn: mat-palette($mat-red);
@ -61,7 +61,7 @@ $light-theme: map_merge($light-theme, (background: $background));
$dark-primary: mat-palette($mat-light-green); $dark-primary: mat-palette($mat-light-green);
$dark-accent: mat-palette($mat-brown, A200, A100, A400); $dark-accent: mat-palette($mat-black);
$dark-warn: mat-palette($mat-red); $dark-warn: mat-palette($mat-red);
// Create the theme object (a Sass map containing all of the palettes). // Create the theme object (a Sass map containing all of the palettes).

Write Preview
Loading…
Cancel
Save