Toolbar and routing

src/app/app-routing.module.ts

@@ -1,8 +1,15 @@
 import { NgModule } from '@angular/core'
 import { Routes, RouterModule } from '@angular/router'
+import { BrowseComponent } from './components/browse/browse.component'
 
 
-const routes: Routes = []
+const routes: Routes = [
+  { path: 'browse', component: BrowseComponent },
+  { path: 'library', component: BrowseComponent },
+  { path: 'settings', component: BrowseComponent },
+  { path: 'about', component: BrowseComponent }, // TODO: replace these with the correct components
+  { path: '**', redirectTo: '/browse'}
+]
 
 @NgModule({
   imports: [RouterModule.forRoot(routes)],

src/app/app.component.html

@@ -0,0 +1,2 @@
+<app-toolbar></app-toolbar>
+<router-outlet></router-outlet>

src/app/app.component.ts

@@ -1,31 +1,11 @@
-import { Component, OnInit } from '@angular/core'
-import { ElectronService } from './core/services/electron.service'
+import { Component } from '@angular/core'
 
 @Component({
   selector: 'app-root',
-  template: `
-    <!--The content below is only a placeholder and can be replaced.-->
-    <div style="text-align:center" class="content">
-      <h1>
-        {{title}}
-      </h1>
-      <span style="display: block">{{ title }} app is running!</span>
-      <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
-    </div>
-    <h2>Here are some links to help you start: </h2>
-    <button class="ui button">Fomantic UI test</button>
-
-    <router-outlet></router-outlet>
-  `,
+  templateUrl: './app.component.html',
   styles: []
 })
-export class AppComponent implements OnInit {
-  title = 'Loading title...'
+export class AppComponent {
 
-  constructor(private electronService: ElectronService) { }
-
-  async ngOnInit() {
-    const response = await this.electronService.invoke('test-event-A', { value1: 'AAAAA', value2: 42 })
-    this.title = response
-  }
+  constructor() { }
 }

src/app/app.module.ts

@@ -3,10 +3,14 @@ import { NgModule } from '@angular/core'
 
 import { AppRoutingModule } from './app-routing.module'
 import { AppComponent } from './app.component'
+import { ToolbarComponent } from './components/toolbar/toolbar.component'
+import { BrowseComponent } from './components/browse/browse.component'
 
 @NgModule({
   declarations: [
-    AppComponent
+    AppComponent,
+    ToolbarComponent,
+    BrowseComponent
   ],
   imports: [
     BrowserModule,

src/app/components/browse/browse.component.html

@@ -0,0 +1 @@
+<p>browse works!</p>

src/app/components/browse/browse.component.ts

@@ -0,0 +1,16 @@
+import { Component, OnInit } from '@angular/core'
+
+@Component({
+  selector: 'app-browse',
+  templateUrl: './browse.component.html',
+  styleUrls: ['./browse.component.scss']
+})
+export class BrowseComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+    console.log('Browse component loaded.')
+  }
+
+}

src/app/components/toolbar/toolbar.component.html

@@ -0,0 +1,12 @@
+<div class="ui top fixed menu">
+  <a class="item" routerLinkActive="active" routerLink="/browse">Browse</a>
+  <a class="item" routerLinkActive="active" routerLink="/library">Library</a>
+  <a class="item" routerLinkActive="active" routerLink="/settings">Settings</a>
+  <a class="item" routerLinkActive="active" routerLink="/about">About</a>
+
+  <div class="right menu">
+    <a class="item traffic-light" (click)="minimize()"><i class="minus icon"></i></a>
+    <a class="item traffic-light" (click)="maximize()"><i class="plus icon"></i></a>
+    <a class="item traffic-light" (click)="close()"><i class="x icon"></i></a>
+  </div>
+</div>

src/app/components/toolbar/toolbar.component.scss

@@ -0,0 +1,24 @@
+.menu {
+  -webkit-app-region: drag;
+  z-index: 9000 !important;
+
+  .item,
+  .item * {
+    -webkit-app-region: no-drag;
+    cursor: default !important;
+  }
+}
+
+.traffic-light {
+  &:before {
+    display: none !important;
+  }
+
+  i {
+    margin: 0 !important;
+  }
+
+  &:last-child:hover {
+    background: rgba(255, 0, 0, .1) !important;
+  }
+}

src/app/components/toolbar/toolbar.component.ts

@@ -0,0 +1,24 @@
+import { Component } from '@angular/core'
+import { ElectronService } from 'src/app/core/services/electron.service'
+
+@Component({
+  selector: 'app-toolbar',
+  templateUrl: './toolbar.component.html',
+  styleUrls: ['./toolbar.component.scss']
+})
+export class ToolbarComponent {
+
+  constructor(private electronService: ElectronService) { }
+
+  minimize() {
+    this.electronService.remote.getCurrentWindow().minimize()
+  }
+
+  maximize() {
+    this.electronService.remote.getCurrentWindow().maximize()
+  }
+
+  close() {
+    this.electronService.remote.app.quit()
+  }
+}