Migrating to angular material

angular.json

@@ -22,6 +22,9 @@
               "src/favicon.ico"
             ],
             "styles": [
+              {
+                "input": "node_modules/@angular/material/prebuilt-themes/indigo-pink.css"
+              },
               "src/styles.css"
             ],
             "scripts": [
@@ -76,6 +79,9 @@
               "node_modules/cookieconsent/build/cookieconsent.min.js"
             ],
             "styles": [
+              {
+                "input": "node_modules/@angular/material/prebuilt-themes/indigo-pink.css"
+              },
               "src/styles.css"
             ],
             "assets": [

package.json

@@ -14,11 +14,14 @@
   "private": true,
   "dependencies": {
     "@angular/animations": "^6.1.6",
+    "@angular/cdk": "^6.2.0",
     "@angular/common": "^6.1.6",
     "@angular/compiler": "^6.1.6",
     "@angular/core": "^6.1.6",
+    "@angular/flex-layout": "^6.0.0-beta.18",
     "@angular/forms": "^6.1.6",
     "@angular/http": "^6.1.6",
+    "@angular/material": "^6.4.7",
     "@angular/platform-browser": "^6.1.6",
     "@angular/platform-browser-dynamic": "^6.1.6",
     "@angular/router": "^6.1.6",

src/app/app-material.module.ts

@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import {MatToolbarModule, MatButtonModule, MatMenuModule } from '@angular/material';
+
+@NgModule({
+  imports: [
+    MatToolbarModule,
+    MatButtonModule,
+    MatMenuModule
+  ],
+  exports: [
+    MatToolbarModule,
+    MatButtonModule,
+    MatMenuModule
+  ]
+})
+export class AppMaterialModule { }

src/app/app-routing.module.ts

@@ -1,15 +1,16 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 
-import { LoginComponent } from './login/login.component';
-import { ClientDownloadComponent } from './client-download/client-download.component';
-import { ServicesComponent } from './services/services.component';
+import { LoginComponent } from './pages/login/login.component';
+import { ClientDownloadComponent } from './pages/client-download/client-download.component';
+import { ServicesComponent } from './pages/services/services.component';
 
 const routes: Routes = [
   { path: '', redirectTo: 'services', pathMatch: 'full' },
   { path: 'services', component: ServicesComponent },
   { path: 'login', component: LoginComponent },
   { path: 'client-download', component: ClientDownloadComponent },
+  { path: 'about', component: ServicesComponent },
 ];
 
 @NgModule({

src/app/app.module.ts

@@ -4,18 +4,25 @@ import { NgModule } from '@angular/core';
 import { HttpClientModule } from '@angular/common/http';
 import { AppRoutingModule } from './app-routing.module';
 
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { AppMaterialModule } from './/app-material.module';
+import { FlexLayoutModule } from '@angular/flex-layout';
+
 import { AppComponent } from './app.component';
 import { NgbModule, NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
-import { NavbarComponent } from './navbar/navbar.component';
+
+import { NavbarComponent } from './gui/navbar/navbar.component';
 import { TranslateDirective } from './translate.directive';
 
+import { LoginComponent } from './pages/login/login.component';
+import { ClientDownloadComponent } from './pages/client-download/client-download.component';
+import { ServicesComponent } from './pages/services/services.component';
+import { ModalComponent } from './gui/modal/modal.component';
+import { SafeHtmlPipe } from './gui/safe-html.pipe';
+
+
 // Service providers
 import { UdsApiService } from './uds-api.service';
-import { LoginComponent } from './login/login.component';
-import { ClientDownloadComponent } from './client-download/client-download.component';
-import { ServicesComponent } from './services/services.component';
-import { ModalComponent } from './gui/modal/modal.component';
-import { SafeHtmlPipe } from './gui/safe-html.pipe';
 import { GuiService } from './gui/gui.service';
 
 @NgModule({
@@ -33,7 +40,10 @@ import { GuiService } from './gui/gui.service';
     BrowserModule,
     HttpClientModule,
     AppRoutingModule,
-    NgbModule.forRoot()
+    NgbModule.forRoot(),
+    BrowserAnimationsModule,
+    AppMaterialModule,
+    FlexLayoutModule,
   ],
   providers: [
     UdsApiService,

src/app/gui/navbar/navbar.component.css

@@ -0,0 +1,18 @@
+.uds-nav {
+    position: fixed;
+    top: 0;
+}
+
+.fill-remaining-space {
+    /*This fills the remaining space, by using flexbox.  
+   Every toolbar row uses a flexbox row layout. */
+   flex: 1 1 auto;
+}
+
+.fa {
+    margin-right: 0.3rem;
+}
+
+.udsicon {
+    width: 2rem;
+}

src/app/gui/navbar/navbar.component.html

@@ -0,0 +1,49 @@
+<form id="form_language" action="{{ api.config.urls.changeLang }}" method="post">
+    <input type="hidden" name="{{ api.config.csrf_field }}" value="{{ api.config.csrf }}" >
+    <input id="id_language" type="hidden" name="language" value="{{ lang.id }}" />
+</form>
+
+<!-- languages menu -->
+<mat-menu #appMenu="matMenu">
+  <button mat-menu-item *ngFor="let l of langs" (click)="changeLang(l)">{{ l.name }}</button>
+</mat-menu>
+
+<!-- user menu -->
+<mat-menu #userMenu="matMenu">
+    <button mat-menu-item routerLink="/"><i class="fa fa-download"></i><uds-translate>Preferences</uds-translate></button>
+    <button mat-menu-item *ngIf="api.user.isStaff" (click)="admin()"><i class="fa fa-download"></i><uds-translate>Dashboard</uds-translate></button>
+    <button mat-menu-item routerLink="/downloads"><i class="fa fa-download"></i><uds-translate>Downloads</uds-translate></button>
+</mat-menu>
+
+<!-- shriked menu -->
+<mat-menu x-position="before" #shrink="matMenu">
+    <button mat-menu-item *ngIf="api.user.isLogged" [matMenuTriggerFor]="userMenu">{{api.user.user}}</button>
+    <button mat-menu-item [matMenuTriggerFor]="appMenu">{{ lang.name }}</button>
+    <button mat-menu-item routerLink="/client-download"><i class="fa fa-download"></i> UDS Plugin</button>
+    <button mat-menu-item routerLink="/about"><i class="fa fa-info"></i><uds-translate>About</uds-translate></button>
+</mat-menu>
+
+
+<mat-toolbar color="primary" class="uds-nav">
+
+  <button mat-button routerLink="/">
+    <img alt="Universal Desktop Services" src="/static/modern/img/udsicon.png" class="udsicon"> UDS
+  </button>
+
+  <!-- This fills the remaining space of the current row -->
+  <span class="fill-remaining-space"></span>
+
+  <!-- elements only visible when expanded -->
+  <div fxLayout="row" fxShow="false" fxShow.gt-sm>
+      <button mat-button routerLink="/client-download"><i class="fa fa-download"></i>UDS Plugin</button>
+      <button mat-button routerLink="/about"><i class="fa fa-info"></i><uds-translate>About</uds-translate></button>
+      <button mat-button [matMenuTriggerFor]="appMenu">{{ lang.name }}</button>
+      <button mat-button *ngIf="api.user.isLogged" [matMenuTriggerFor]="userMenu">{{api.user.user}}</button>
+  </div>
+
+  <!-- button visible only when shrinked -->
+  <button mat-button [matMenuTriggerFor]="shrink" fxHide="false" fxHide.gt-sm>
+    <i class="fa fa-bars fa-2x"></i>
+  </button>
+
+</mat-toolbar>

src/app/gui/navbar/navbar.component.ts

@@ -1,6 +1,6 @@
 import { Component, OnInit } from '@angular/core';
-import { UdsApiService } from '../uds-api.service';
-import { Lang } from '../types/config';
+import { UdsApiService } from '../../uds-api.service';
+import { Lang } from '../../types/config';
 
 @Component({
   selector: 'uds-navbar',
@@ -37,4 +37,8 @@ export class NavbarComponent implements OnInit {
     return false;
   }
 
+  admin() {
+    window.location.href = this.api.config.urls.admin;
+  }
+
 }

src/app/navbar/navbar.component.css

@@ -1,14 +0,0 @@
-a.dropdown-toggle {
-    cursor: pointer;
-}
-
-.navbar-img {
-    width: 2em;
-    margin-top: -8px;
-}
-
-/* Fix dropdown menu */
-.dropdown-menu-right {
-    right: 0 !important;
-    left: auto !important;
-}

src/app/navbar/navbar.component.html

@@ -1,52 +0,0 @@
-<nav class="navbar navbar-expand-md navbar-light bg-light fixed-top">
-  <a class="navbar-brand" routerLink="/">
-    <img alt="Universal Desktop Services" src="/static/modern/img/udsicon.png" class="navbar-img pull-left">
-
-  </a>
-  <button class="navbar-toggler" type="button" (click)="isNavbarCollapsed = !isNavbarCollapsed" data-target="#navbarUDS" aria-controls="navbarUDS"
-    aria-expanded="false" aria-label="Toggle navigation">
-    <span class="navbar-toggler-icon"></span>
-  </button>
-  <div [ngbCollapse]="isNavbarCollapsed" class="navbar-collapse" id="navbarUDS">
-    <ul class="navbar-nav ml-auto">
-      <li class="nav-item">
-        <a class="nav-link" routerLink="/client-download">
-          <i class="fa fa-download"></i> UDS Plugin</a>
-      </li>
-      <li class="nav-item">
-        <a class="nav-link" href="#">
-          <uds-translate>About</uds-translate>
-        </a>
-      </li>
-      <li class="nav-item dropdown dropdown-menu-right" ngbDropdown>
-        <form id="form_language" action="{{ api.config.urls.changeLang }}" method="post">
-          <input type="hidden" name="{{ api.config.csrf_field }}" value="{{ api.config.csrf }}" >
-          <input id="id_language" type="hidden" name="language" value="{{ lang.id }}" />
-          <a class="nav-link dropdown-toggle" id="navbarLangDropdown" ngbDropdownToggle>{{ lang.name }}</a>
-          <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarLangDropdown" ngbDropdownMenu>
-            <a class="dropdown-item" href="#" (click)="changeLang(l)" *ngFor="let l of langs">{{ l.name }}</a>
-          </div>
-        </form>
-      </li>
-
-      <li *ngIf="api.user.isLogged" class="nav-item dropdown dropdown-menu-right" ngbDropdown>
-        <a class="nav-link dropdown-toggle" id="navbarUserDropdown" ngbDropdownToggle>{{ api.user.user }}</a>
-        <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarUserDropdown" ngbDropdownMenu>
-          <a class="dropdown-item" href="#">
-            <uds-translate>Preferences</uds-translate>
-          </a>
-          <a class="dropdown-item" href="#">
-            <uds-translate>Dashboard</uds-translate>
-          </a>
-          <a class="dropdown-item" href="#">
-            <uds-translate>Downloads</uds-translate>
-          </a>
-          <a class="dropdown-item" href="{{ api.config.urls.logout }}">
-            <uds-translate>Logout</uds-translate>
-          </a>
-        </div>
-      </li>
-
-    </ul>
-  </div>
-</nav>

src/app/pages/client-download/client-download.component.ts

@@ -1,6 +1,6 @@
 import { Component, OnInit } from '@angular/core';
-import { UdsApiService } from '../uds-api.service';
-import { Downloadable } from '../types/config';
+import { UdsApiService } from '../../uds-api.service';
+import { Downloadable } from '../../types/config';
 
 @Component({
   selector: 'uds-client-download',

src/app/pages/login/login.component.ts

@@ -1,6 +1,6 @@
 import { Component, OnInit } from '@angular/core';
-import { UdsApiService } from '../uds-api.service';
-import { Authenticator } from '../types/config';
+import { UdsApiService } from '../../uds-api.service';
+import { Authenticator } from '../../types/config';
 
 @Component({
   selector: 'uds-login',

src/app/pages/services/services.component.ts

@@ -1,8 +1,7 @@
 import { Component, OnInit } from '@angular/core';
-import { UdsApiService } from '../uds-api.service';
-import { Router } from '@angular/router';
-import { JSONServicesInformation, JSONGroup, JSONService } from '../types/services';
-import { Plugin } from '../helpers/plugin';
+import { UdsApiService } from '../../uds-api.service';
+import { JSONServicesInformation, JSONGroup, JSONService } from '../../types/services';
+import { Plugin } from '../../helpers/plugin';
 
 class GroupedServices {
   services: JSONService[];

src/index.html

@@ -2,6 +2,8 @@
 <html lang="en">
 
 <head>
+<!-- <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> -->
+<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
   <meta charset="utf-8">
   <title>Uds</title>
   <base href="/">

src/styles.css

@@ -5,6 +5,9 @@
 /* Cookie consent */
 @import "~cookieconsent/build/cookieconsent.min.css";
 
-body {
-    margin-top: 4rem;
+html, body { height: 100%; }
+
+body { 
+    margin: 4rem 0 0 0; /* leaves space for toolbar on top */
+    font-family: 'Roboto', sans-serif; 
 }