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()
+  }
+}

src/assets/themes/dark.css

@@ -0,0 +1,122 @@
+body ::-webkit-scrollbar-track {
+  background: rgba(255, 255, 255, 0.1) !important;
+}
+
+body ::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.25) !important;
+}
+
+app-browse, app-downloads, app-library, app-settings, app-about {
+  background-color: #1E1E1E;
+  color: #CCCCCC !important;
+}
+
+app-about img.logo {
+  filter: drop-shadow(0 0px 14px white);
+}
+
+.ui.dimmer {
+  background: rgba(0,0,0,0.85) !important;
+}
+
+.ui.inverted.dimmer .ui.loader, .ui.loader {
+  color: #888888 !important;
+}
+
+.ui.segment {
+  background: #3C3C3C;
+}
+
+.ui.header, .ui.form .field>label, .ui.basic.button, .ui.basic.buttons .button {
+  color: #CCCCCC !important;
+}
+
+/* Loading */
+app-app-loading {
+  background-color: #1E1E1E !important;
+}
+
+app-app-loading svg .st0 {
+  stroke: #CCCCCC !important;
+}
+
+/* Menu */
+.ui[class*="top fixed"].menu {
+  background-color: #3C3C3C; 
+}
+
+.ui.menu:not(.vertical) .item {
+  color: #CCCCCC !important;
+}
+
+.ui.link.menu .item:hover, .ui.menu .dropdown.item:hover, .ui.menu .link.item:hover, .ui.menu a.item:hover {
+  background: rgba(0,0,0,0.2) !important;
+}
+
+.ui.menu .active.item {
+  color: white !important;
+  background: rgba(0,0,0,0.4) !important;
+}
+
+/* Display Items */
+.ui.items>.item>.content>*:not(.button) {
+  color: rgb(218, 218, 218) !important;
+}
+
+/* Inputs */
+.ui.input>input, .ui.selection.dropdown {
+  background: #383838 !important;
+  color: #AEAEAE !important;
+}
+
+/* Buttons */
+.ui.button {
+  box-shadow: 0 0 0 2px #fff inset !important;
+  background: transparent none;
+  color: #fff;
+  text-shadow: none !important;
+}
+
+.ui.button:hover {
+  background: #fff;
+  box-shadow: 0 0 0 2px #fff inset!important;
+  color: rgba(0,0,0,.8);
+}
+
+.ui.teal.button, .ui.teal.buttons .button {
+  background-color: transparent;
+  box-shadow: 0 0 0 2px #00b5ad inset !important;
+  color: #02e0d6;
+  text-shadow: none !important;
+}
+
+.ui.teal.button:hover, .ui.teal.buttons .button:hover {
+  background-color: #00b5ad;
+  color: white;
+}
+
+.ui.teal.button:active, .ui.teal.buttons .button:active {
+  background-color: #00827c !important;
+  box-shadow: 0 0 0 2px #00827c inset !important;
+  color: #fff;
+  text-shadow: none;
+}
+
+.ui.buttons .button:first-child {
+  margin-left: 0;
+}
+
+.ui.buttons .button {
+  margin: 0 0 0 -2px;
+}
+
+.ui.green.button, .ui.green.buttons .button {
+  background-color: transparent;
+  box-shadow: 0 0 0 2px #21BA45 inset !important;
+  color: #21BA45;
+  text-shadow: none !important;
+}
+.ui.green.button:hover, .ui.green.buttons .button:hover {
+  background-color: #21BA45;
+  color: white;
+}

src/styles.scss

@@ -1 +1,49 @@
-/* You can add global styles to this file, and also import other style files */
+// @import './assets/themes/dark.css';
+
+* {
+  user-select: none;
+  -webkit-user-drag: none;
+}
+
+.flex-row {
+  display: flex;
+}
+
+@keyframes fade-in {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes fade-out {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+  }
+}
+
+.ui.inverted.teal.button,
+.ui.inverted.teal.buttons .button {
+  background-color: transparent;
+  box-shadow: 0 0 0 2px #00b5ad inset !important;
+  color: #02e0d6;
+}
+
+.ui.inverted.teal.button:hover,
+.ui.inverted.teal.buttons .button:hover {
+  background-color: #00b5ad;
+  color: white;
+}
+
+.ui.inverted.teal.button:active,
+.ui.inverted.teal.buttons .button:active {
+  background-color: #089C95;
+  color: white;
+}