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

5 years ago · e8c38d14f9
parent 10c71cbc16 9d5674ec13
commit e8c38d14f9
12 changed files with 234 additions and 164 deletions
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@ -55,6 +55,11 @@ import { MatButtonModule } from '@angular/material/button';
 import { MatListModule } from '@angular/material/list';
 import {MatSortModule} from '@angular/material/sort';
 import { SearchComponent } from './components/search/search.component';
+import {DomSanitizer} from '@angular/platform-browser';
+import {MatIconRegistry} from '@angular/material/icon';
+
+// import logo from 'src/assets/gv-new-logo.svg';
+import logo from '!!raw-loader!./gv-new-logo-white.svg';


 const config: SocketIoConfig = { url: 'http://localhost:4444', options: {} };
@ -126,9 +131,14 @@ const appRoutes: Routes = [
    MatTableModule,
    MatSortModule,
    MatBadgeModule,
-    MatProgressSpinnerModule
+    MatProgressSpinnerModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
 })
-export class AppModule { }
+export class AppModule {
+  constructor(iconRegistry: MatIconRegistry, sanitizer: DomSanitizer) {
+    iconRegistry.addSvgIconLiteral(
+        'logo', sanitizer.bypassSecurityTrustHtml(logo));
+  }
+ }
--- a/src/app/components/home/home.component.sass
+++ b/src/app/components/home/home.component.sass
@ -1,38 +1,6 @@
@import '../../../styles/mixins.sass'
@import '../../../styles/vars.sass'

-#content
-  position: fixed
-  width: 100%
-  height: calc(100% - 56px)
-
-#chat
-  box-sizing: content-box
-  height: 100%
-  width: 25%
-  float: left
-  overflow-y: auto
-  
-#feed
-  box-sizing: content-box
-  height: 100%
-  width: 50%
-  float: left
-  overflow-y: auto
-
-#social
-  box-sizing: content-box
-  height: 100%
-  width: 25%
-  float: left
-  overflow-y: auto
-
-.mat-toolbar.mat-primary 
-  width: 100%
-  position: sticky
-  top: 0
-  z-index: 1
-
 /deep/ .mat-tab-body-wrapper
  height: 100% 

@ -45,8 +13,9 @@
  height: 100%

 .tab-content
-  height: 50%
+  box-sizing: content-box
  width: 100%



+
--- a/src/app/components/main-navigation/main-navigation.component.html
+++ b/src/app/components/main-navigation/main-navigation.component.html
@ -1,5 +1,7 @@
-<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
-<mat-sidenav-container class="sidenav-container" class="mat-typography">
+<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet"> <!-- getting the google material fonts-->
+<mat-sidenav-container class="mat-typography">
+
+  <!-- SIDENAV -->
  <mat-sidenav #drawer class="sidenav" 
      fxShow="true" fxHide.gt-sm="true"
      fixedInViewport="false"
@ -21,8 +23,12 @@
      </div>
    </mat-nav-list>
  </mat-sidenav>
+
+  <!-- TOOLBAR -->
  <mat-sidenav-content>
    <mat-toolbar color="primary" class="mat-elevation-z4">
+
+      <!--content on SMALL SCREEN-->
      <button
        type="button"
        aria-label="Toggle sidenav"
@ -31,8 +37,8 @@
        fxShow="true" fxHide.gt-sm="true">
        <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
      </button>
+      <mat-icon svgIcon="logo" style="min-width: 35px;"></mat-icon>
      <span>Greenvironment</span>
-        <!--The following menu items will be hidden on both SM and XS screen sizes -->
      <nav mat-tab-nav-bar backgroundColor="primary" fxShow="true" fxHide.lt-md="true">
        <div [hidden]="!loggedIn">
        <a mat-tab-link class="link"
@ -57,15 +63,19 @@
          </a>
        </div>
      </nav>
+
+      <!--content on BIG SCREEN-->
      <div id="menu-button-box">
        <span class="mat-button" *ngIf="loggedIn" fxShow="true" fxHide.lt-md="true" routerLink={{profileUrl}}>Hello, {{user.username}}</span>
        <button mat-icon-button [matMenuTriggerFor]="requestMenu" [disabled]="!loggedIn" id="menu-button">
          <mat-icon [matBadge]="user.receivedRequests.length" [matBadgeHidden]="!(user.receivedRequests.length > 0)" matBadgeColor="accent">notifications</mat-icon>
        </button>
+
        <button mat-icon-button [matMenuTriggerFor]="menu" id="menu-button">
          <mat-icon>more_vert</mat-icon>
        </button>
      </div>
+
      <mat-menu #requestMenu="matMenu">
        <span mat-menu-item disableRipple="true" disabled="true">friend requests:</span>
        <button mat-menu-item *ngFor = "let request of user.receivedRequests" [class.selected]="request === selectedRequest" (click)="$event.stopPropagation();" disableRipple="true">
@ -96,6 +106,7 @@
          </button> 
        </div>
      </mat-menu>
+
    </mat-toolbar>
    <router-outlet></router-outlet>
  </mat-sidenav-content>
--- a/src/app/components/main-navigation/main-navigation.component.sass
+++ b/src/app/components/main-navigation/main-navigation.component.sass
@ -1,23 +1,19 @@
-.sidenav-container 
-  height: 100%
-
 .mat-sidenav-container 
-  height: 100%
-
-.mat-sidenav-content 
-  height: 100vh
+  margin-top: 56px
+  height: calc(100vh - 56px)

 .sidenav 
  width: 200px

 .sidenav .mat-toolbar
-  background: inherit
+  //background: inherit

 .mat-toolbar.mat-primary
  height: 56px
-  position: sticky
+  position: fixed
+  //position: sticky
  top: 0
-  z-index: 1000
+  z-index: 999
  .mat-tab-nav-bar
    width: 50%
    height: 56px
@ -36,12 +32,7 @@
 /deep/ .mat-tab-link
  min-width: 5em!important
  
-#login-button
-  
 #menu-button-box
  text-align: right
  width: 100%

-
-
-
--- a/src/app/components/main-navigation/main-navigation.component.ts
+++ b/src/app/components/main-navigation/main-navigation.component.ts
@ -25,7 +25,7 @@ export class MainNavigationComponent implements OnInit {
    private settingsService: SettingsService,
    private requestservice: RequestService,
    private breakpointObserver: BreakpointObserver,
-    private http: Http, private router: Router
+    private http: Http, private router: Router,
  ) {
    this.overlay = overlayContainer.getContainerElement();
  }
--- a/src/app/components/profile/profile.component.html
+++ b/src/app/components/profile/profile.component.html
@ -1,3 +1,4 @@
+<div id="profile-page">
    <mat-toolbar color="primary">Profile</mat-toolbar>
    <div id="profile">
        <div id="profilecontainer" [hidden]="profileNotFound">
@ -102,4 +103,5 @@
                <h1>Profile not found :(</h1>
        </div>
    </div>
+</div>
  
--- a/src/app/components/profile/profile.component.sass
+++ b/src/app/components/profile/profile.component.sass
@ -1,6 +1,12 @@
@import '../../../styles/mixins.sass'
@import '../../../styles/vars.sass'

+#profile-page
+  position: fixed
+  width: 100%
+  height: calc(100% - 56px)
+  overflow: scroll
+
 #profile 
  padding: 2em
  max-width: 1200px
--- a/src/app/components/search/search.component.sass
+++ b/src/app/components/search/search.component.sass
@ -1,6 +1,7 @@

 #search 
  width: 100%
+  overflow-x: hidden
  height: 100%

 #input
--- a/src/app/components/social/friends/friends.component.html
+++ b/src/app/components/social/friends/friends.component.html
@ -1,8 +1,8 @@
 <mat-toolbar>
  <span>Friends</span>
-  <div id="button-box">
+  <!--<div id="button-box">
    <button mat-icon-button><mat-icon>person_add</mat-icon></button>
-  </div>
+  </div>-->
 </mat-toolbar>
 <div id="friendlist">
    <mat-card class="friend-card" *ngFor="let friend of user.friends" 
--- a/src/app/components/social/groups/groups.component.html
+++ b/src/app/components/social/groups/groups.component.html
@ -5,9 +5,9 @@
 </div>-->
 <mat-toolbar>
  <span>Groups</span>
-  <div id="button-box">
+  <!--<div id="button-box">
    <button mat-icon-button><mat-icon>group_add</mat-icon></button>
-  </div>
+  </div>-->
 </mat-toolbar>
 <div id="grouplist">
    <!--<div class="groupitem" *ngFor="let group of groups"
--- a/src/app/gv-new-logo-white.svg
+++ b/src/app/gv-new-logo-white.svg
@ -0,0 +1,76 @@
+<?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: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-white.svg">
+  <defs
+     id="defs3412" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="5.656854"
+     inkscape:cx="-16.580479"
+     inkscape:cy="40.712852"
+     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:#ffffff;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:#ffffff;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:#ffffff;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>
--- a/src/typings.d.ts
+++ b/src/typings.d.ts
@ -0,0 +1,4 @@
+declare module '*.svg' {
+    const svg: string;
+    export default svg;
+  }