Initial commit

angular.json

@@ -7,9 +7,9 @@
       "root": "",
       "sourceRoot": "src",
       "projectType": "application",
-      "prefix": "app",
       "schematics": {
         "@schematics/angular:component": {
+          "viewEncapsulation":"Native",
           "styleext": "scss",
           "spec": false
         },

electron.main.js

@@ -0,0 +1,48 @@
+const { app, BrowserWindow, session, globalShortcut } = require("electron");
+const path = require("path");
+class Main {
+  constructor() {
+    const {
+      width,
+      height
+    } = require("electron").screen.getPrimaryDisplay().workAreaSize;
+
+    this.win = new BrowserWindow({
+      title: "Control",
+      backgroundColor: "#520000",
+      x: width / 2,
+      y: 0,
+      width: width / 2,
+      height: height,
+      resizable: true,
+      frame: false,
+      show: false,
+      webPreferences: {
+        webSecurity: false
+      }
+    });
+    if (process.env.NODE_ENV == "production")
+      this.win.loadURL(`file://${__dirname}/dist/index.html`);
+    else if (process.env.NODE_ENV == "development"){
+      this.win.loadURL("http://localhost:4200");
+      this.win.webContents.openDevTools();
+    }
+
+    this.win.once("ready-to-show", () => {
+      this.win.show();
+    });
+
+    // Open the DevTools.
+    globalShortcut.register("commandOrControl+shift+c", () => {
+      this.win.webContents.openDevTools();
+    });
+
+    globalShortcut.register("commandOrControl+shift+r", () => {
+      this.win.webContents.reload();
+    });
+  }
+}
+
+app.on("ready", () => {
+  new Main();
+});

package.json

@@ -7,6 +7,8 @@
     "build": "ng build",
     "test": "ng test",
     "lint": "ng lint",
+    "cli-prod": "cross-env NODE_ENV=production nodemon --watch electron.main.js --exec electron electron.main.js",
+    "cli": "cross-env NODE_ENV=development nodemon --watch electron.main.js --exec electron electron.main.js",
     "e2e": "ng e2e"
   },
   "private": true,
@@ -21,6 +23,7 @@
     "@angular/platform-browser-dynamic": "^6.1.0",
     "@angular/router": "^6.1.0",
     "core-js": "^2.5.4",
+    "ngx-electron": "^1.0.4",
     "rxjs": "~6.2.0",
     "zone.js": "~0.8.26"
   },
@@ -33,6 +36,8 @@
     "@types/jasminewd2": "~2.0.3",
     "@types/node": "~8.9.4",
     "codelyzer": "~4.3.0",
+    "cross-env": "^5.2.0",
+    "electron": "^3.0.0",
     "jasmine-core": "~2.99.1",
     "jasmine-spec-reporter": "~4.2.1",
     "karma": "~3.0.0",
@@ -40,6 +45,7 @@
     "karma-coverage-istanbul-reporter": "~2.0.1",
     "karma-jasmine": "~1.1.2",
     "karma-jasmine-html-reporter": "^0.2.2",
+    "nodemon": "^1.18.4",
     "protractor": "~5.4.0",
     "ts-node": "~7.0.0",
     "tslint": "~5.11.0",

src/app/about/about.component.html

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

src/app/about/about.component.ts

@@ -0,0 +1,16 @@
+import { Component, OnInit, ViewEncapsulation } from '@angular/core';
+
+@Component({
+  selector: 'about',
+  templateUrl: './about.component.html',
+  styleUrls: ['./about.component.scss'],
+  encapsulation: ViewEncapsulation.Native
+})
+export class AboutComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/app-menu/app-menu.component.html

@@ -0,0 +1,28 @@
+<div class="menu" [class.reducted]="reducted">
+  <div style="height: 48px; background-color: rgba(0,0,0,0.3);"></div>
+  <svg (click)="reducted = !reducted" x="0px" y="0px" viewBox="0 0 20 12.5" style="position: absolute; padding: 8px 10px; top: 7px; left: 4px; width: 20px; height: 20px;">
+    <path fill="#ffffff" fill-rule="evenodd" clip-rule="evenodd" d="M0,12.5h20V11H0V12.5z M0,7h20V5.5H0V7z M0,0v1.5h20V0H0z"></path>
+  </svg>
+  <a [routerLink]="['/home']" [queryParams]="{ title : 'Welcome' }" routerLinkActive="selected">
+    <span>
+      <i>
+        <svg x="0px" y="0px" width="10px" height="16px" viewBox="0 0 10 16">
+          <path fill="#ffffff" d="M5,0C2.3,0,0,2.3,0,5c0,2,2,5.9,3.7,8.8c0.6,1.1,1.1,1.8,1.1,1.8L5,16l0.2-0.4c0,0,0.5-0.7,1.1-1.8 C8,10.9,10,7.1,10,5C10,2.3,7.8,0,5,0z M5.8,13.5c-0.3,0.5-0.6,1-0.8,1.3c-0.2-0.3-0.5-0.8-0.8-1.3C2.9,11.1,0.6,7.1,0.6,5 c0-2.4,2-4.4,4.4-4.4s4.4,2,4.4,4.4C9.4,7.1,7.1,11.1,5.8,13.5z"></path>
+          <path fill="#ffffff" d="M5,1.9C3.3,1.9,1.9,3.3,1.9,5S3.3,8.2,5,8.2S8.2,6.7,8.2,5S6.7,1.9,5,1.9z M5,7.5C3.6,7.5,2.5,6.4,2.5,5 S3.6,2.5,5,2.5S7.5,3.6,7.5,5S6.4,7.5,5,7.5z"></path>
+        </svg>
+      </i>
+      <span *ngIf="!reducted">Welcome</span>
+    </span>
+  </a>
+  <a [routerLink]="['/about']" [queryParams]="{ title: 'About' }" routerLinkActive="selected">
+    <span>
+      <i>
+        <svg x="0px" y="0px" width="10px" height="16px" viewBox="0 0 10 16">
+          <path fill="#ffffff" d="M5,0C2.3,0,0,2.3,0,5c0,2,2,5.9,3.7,8.8c0.6,1.1,1.1,1.8,1.1,1.8L5,16l0.2-0.4c0,0,0.5-0.7,1.1-1.8 C8,10.9,10,7.1,10,5C10,2.3,7.8,0,5,0z M5.8,13.5c-0.3,0.5-0.6,1-0.8,1.3c-0.2-0.3-0.5-0.8-0.8-1.3C2.9,11.1,0.6,7.1,0.6,5 c0-2.4,2-4.4,4.4-4.4s4.4,2,4.4,4.4C9.4,7.1,7.1,11.1,5.8,13.5z"></path>
+          <path fill="#ffffff" d="M5,1.9C3.3,1.9,1.9,3.3,1.9,5S3.3,8.2,5,8.2S8.2,6.7,8.2,5S6.7,1.9,5,1.9z M5,7.5C3.6,7.5,2.5,6.4,2.5,5 S3.6,2.5,5,2.5S7.5,3.6,7.5,5S6.4,7.5,5,7.5z"></path>
+        </svg>
+      </i>
+    <span *ngIf="!reducted">About</span>
+    </span>
+  </a>
+</div>

src/app/app-menu/app-menu.component.scss

@@ -0,0 +1,57 @@
+.menu {
+  cursor: default;
+  user-select: none;
+  display: flex;
+  position: relative;
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex-direction: column;
+  overflow: hidden;
+  width: 200px;
+  padding: 0;
+  background-color: rgba(0, 0, 0, .15);
+  height: 100%;
+  &.reducted {
+    width: 48px;
+  }
+  svg:hover>path {
+    fill: rgba(154, 19, 19, 0.8);
+  }
+  >a {
+    display: flex;
+    align-items: center;
+    height: 44px;
+    color:initial;
+    text-decoration: none;
+    &:hover {
+      background-color: rgba(255, 255, 255, 0.1);
+    }
+    &.selected {
+      background-color: rgba(154, 19, 19, 0.6);
+      &:hover {
+        background-color: rgba(154, 19, 19, 0.8);
+      }
+    }
+    >span {
+      display: flex;
+      align-items: center;
+      color: rgb(255, 255, 255);
+      font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
+      font-size: 15px;
+      letter-spacing: 0.4pt;
+      padding: 0px 16px;
+      transition: transform 0.1s ease-in 0s;
+      user-select: none;
+      &:active{
+        transition: transform 0s ease-in 0s;
+        transform: scale(0.97);
+      }
+      >i {
+        margin-right: 8px;
+        height: 44px;
+        display: flex;
+        align-items: center;
+      }
+    }
+  }
+}

src/app/app-menu/app-menu.component.ts

@@ -0,0 +1,11 @@
+import { Component, OnInit, ViewEncapsulation } from '@angular/core';
+
+@Component({
+  selector: 'app-menu',
+  templateUrl: './app-menu.component.html',
+  styleUrls: ['./app-menu.component.scss'],
+  encapsulation: ViewEncapsulation.Native
+})
+export class AppMenuComponent{
+  reducted: Boolean = false
+}

src/app/app-routing.module.ts

@@ -1,7 +1,16 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
+import { HomeComponent } from './home/home.component';
+import { AboutComponent } from './about/about.component';
 
-const routes: Routes = [];
+const routes: Routes = [
+  {
+    path:'home', component: HomeComponent, 
+  },{
+    path:'about', component: AboutComponent
+  },
+  { path: "**", redirectTo: "/home?title=Welcome",  }
+];
 
 @NgModule({
   imports: [RouterModule.forRoot(routes)],

src/app/app.component.html

@@ -1,21 +1,20 @@
-<!--The content below is only a placeholder and can be replaced.-->
-<div style="text-align:center">
-  <h1>
-    Welcome to {{ title }}!
-  </h1>
-  <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>
-<ul>
-  <li>
-    <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
-  </li>
-  <li>
-    <h2><a target="_blank" rel="noopener" href="https://github.com/angular/angular-cli/wiki">CLI Documentation</a></h2>
-  </li>
-  <li>
-    <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
-  </li>
-</ul>
-
-<router-outlet></router-outlet>
+<title-bar *ngIf="_electron.isElectronApp"></title-bar>
+<div id="container">
+  <div class="background-container">
+    <div class="preset"></div>
+    <div class="noise"></div>
+  </div>
+  <div>
+    <app-menu></app-menu>
+    <div class="content">
+      <div>
+        <div class="title">
+          <div>{{ title }}</div>
+        </div>
+        <div class="content">
+          <router-outlet></router-outlet>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

src/app/app.component.scss

@@ -0,0 +1,73 @@
+#container {
+  display: flex;
+  position: relative;
+  flex-grow: 1;
+  height: 100%;
+  .background-container {
+    top: 0;
+    left: 0;
+    display: block;
+    width: 100%;
+    height: 100%;
+    position: fixed;
+    z-index: -1;
+    .preset {
+      background-image: url('/assets/preset-light.png');
+      background-size: cover;
+      background-position: center center;
+      background-repeat: no-repeat;
+      width: 100%;
+      height: 100%;
+      position: absolute;
+      z-index: 2;
+    }
+    .noise {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      background: url('/assets/noise.png');
+      z-index: 2;
+    }
+  }
+  >div {
+    display: flex;
+    flex-wrap: nowrap;
+    position: relative;
+    flex: 1 1 0%;
+    >.content {
+      position: relative;
+      flex-grow: 1;
+      flex-shrink: 0;
+      display: flex;
+      >div {
+        display: flex;
+        flex: 1 1 0%;
+        flex-direction: column;
+        >.title {
+          background-color: rgba(0, 0, 0, 0.15);
+          &>div {
+            position: relative;
+            color: rgb(255, 255, 255);
+            height: 48px;
+            display: flex;
+            align-items: center;
+            font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
+            font-size: 15px;
+            text-transform: uppercase;
+            padding: 0px 24px;
+            overflow: hidden;
+            cursor: default;
+            user-select: none;
+          }
+        }
+        >.content {
+          display: flex;
+          flex: 1 1 0%;
+          flex-direction: column;
+          height: 500px; // background-image: url("/assets/christian-holzinger-755549-unsplash.jpg");
+          // background-size: cover;
+        }
+      }
+    }
+  }
+}

src/app/app.component.ts

@@ -1,10 +1,32 @@
-import { Component } from '@angular/core';
+import { Component, ViewEncapsulation, OnInit } from "@angular/core";
+import { ElectronService } from "ngx-electron";
+import { ActivatedRoute } from "@angular/router";
 
 @Component({
-  selector: 'app-root',
-  templateUrl: './app.component.html',
-  styleUrls: ['./app.component.scss']
+  selector: "app-root",
+  templateUrl: "./app.component.html",
+  styleUrls: ["./app.component.scss"],
+  encapsulation: ViewEncapsulation.Native
 })
-export class AppComponent {
-  title = 'angutron';
+export class AppComponent implements OnInit {
+  title: string = "";
+
+  constructor(
+    public _electron: ElectronService,
+    public _activatedRoute: ActivatedRoute
+  ) {
+    if (_electron.isElectronApp) {
+      document.body.classList.add("isElectron");
+      _electron.remote
+        .getCurrentWindow()
+        .on("focus", () => document.body.classList.add("hasFocus"))
+        .on("blur", () => document.body.classList.remove("hasFocus"));
+    }
+  }
+
+  ngOnInit() {
+    this._activatedRoute.queryParams.subscribe(
+      params => (this.title = params["title"])
+    );
+  }
 }

src/app/app.module.ts

@@ -1,18 +1,30 @@
-import { BrowserModule } from '@angular/platform-browser';
-import { NgModule } from '@angular/core';
+import { BrowserModule } from "@angular/platform-browser";
+import { NgModule } from "@angular/core";
 
-import { AppRoutingModule } from './app-routing.module';
-import { AppComponent } from './app.component';
+import { AppRoutingModule } from "./app-routing.module";
+import { NgxElectronModule } from "ngx-electron";
+import { AppComponent } from "./app.component";
+import { TitleBarComponent } from "./title-bar/title-bar.component";
+import { AppMenuComponent } from "./app-menu/app-menu.component";
+import { HomeComponent } from './home/home.component';
+import { AboutComponent } from './about/about.component';
 
 @NgModule({
   declarations: [
-    AppComponent
+    AppComponent,
+    TitleBarComponent,
+    AppMenuComponent,
+    HomeComponent,
+    AboutComponent
   ],
   imports: [
-    BrowserModule,
-    AppRoutingModule
+    BrowserModule, 
+    AppRoutingModule, 
+    NgxElectronModule
   ],
   providers: [],
-  bootstrap: [AppComponent]
+  bootstrap: [
+    AppComponent
+  ]
 })
-export class AppModule { }
+export class AppModule {}

src/app/home/home.component.html

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

src/app/home/home.component.ts

@@ -0,0 +1,16 @@
+import { Component, OnInit, ViewEncapsulation } from '@angular/core';
+
+@Component({
+  selector: 'home',
+  templateUrl: './home.component.html',
+  styleUrls: ['./home.component.scss'],
+  encapsulation: ViewEncapsulation.Native
+})
+export class HomeComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/title-bar/title-bar.component.html

@@ -0,0 +1,22 @@
+<div id="title-bar">
+  <div class="title">
+    Window Application
+  </div>
+  <div class="controls">
+    <a class="minimize" title="Minimize" data-radium="true" (click)="minimize()">
+      <svg x="0px" y="0px" viewBox="0 0 10.2 1" data-radium="true" style="width: 10px; height: 10px;">
+        <rect fill="#ffffff" width="10.2" height="1"></rect>
+      </svg>
+    </a>
+    <a class="maximize" title="Maximize" data-radium="true" (click)="maximize()">
+      <svg x="0px" y="0px" viewBox="0 0 10.2 10.1" data-radium="true" style="width: 10px; height: 10px;">
+        <path fill="#ffffff" d="M0,0v10.1h10.2V0H0z M9.2,9.2H1.1V1h8.1V9.2z"></path>
+      </svg>
+    </a>
+    <a class="close" title="Close" data-radium="true" (click)="close()">
+      <svg x="0px" y="0px" viewBox="0 0 10.2 10.2" data-radium="true" style="width: 10px; height: 10px;">
+        <polygon fill="#ffffff" points="10.2,0.7 9.5,0 5.1,4.4 0.7,0 0,0.7 4.4,5.1 0,9.5 0.7,10.2 5.1,5.8 9.5,10.2 10.2,9.5 5.8,5.1 "></polygon>
+      </svg>
+    </a>
+  </div>
+</div>

src/app/title-bar/title-bar.component.scss

@@ -0,0 +1,58 @@
+#title-bar {
+  user-select: none;
+  -webkit-app-region: drag;
+  cursor: default;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 31px;
+  background-color: #191818;
+  visibility: visible;
+  &>.title {
+    user-select: none;
+    cursor: default;
+    padding-left: 12px;
+    font-family: "Segoe UI", Arial;
+    font-size: 12px;
+    color: rgb(255, 255, 255);
+    flex: 1 1 0%;
+  }
+  &>.controls {
+    user-select: none;
+    cursor: default;
+    display: flex;
+    height: 32px;
+    &>.minimize,
+    &>.maximize,
+    &>.close {
+      user-select: none;
+      -webkit-app-region: no-drag;
+      cursor: default;
+      width: 46px;
+      height: 100%;
+      line-height: 0;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+    &>.minimize:hover,
+    &>.maximize:hover {
+      transition: background-color 0.1s ease 0s;
+      background-color: rgba(255, 255, 255, 0.13);
+    }
+    &>.minimize:active,
+    &>.maximize:active {
+      background-color: rgba(255, 255, 255, 0.23);
+    }
+    &>.close:hover {
+      transition: background-color 0.1s ease 0s;
+      background-color: rgb(232, 17, 35);
+    }
+    &>.close:active {
+      background-color: rgb(241, 112, 122);
+    }
+    &>.close:active>svg>polygon {
+      fill: rgb(0, 0, 0);
+    }
+  }
+}

src/app/title-bar/title-bar.component.ts

@@ -0,0 +1,41 @@
+import { Component, OnInit, ViewEncapsulation } from "@angular/core";
+import { ElectronService } from "ngx-electron";
+
+@Component({
+  selector: "title-bar",
+  templateUrl: "./title-bar.component.html",
+  styleUrls: ["./title-bar.component.scss"],
+  encapsulation: ViewEncapsulation.Native
+})
+export class TitleBarComponent implements OnInit {
+  old: {
+    position: number[];
+    size: number[];
+  };
+
+  constructor(private _electron: ElectronService) {}
+
+  ngOnInit() {}
+
+  minimize() {
+    this._electron.remote.getCurrentWindow().minimize();
+  }
+
+  maximize() {
+    let currentWindow = this._electron.remote.getCurrentWindow();
+    if (!currentWindow.isMaximized()) {
+      this.old = {
+        position : currentWindow.getPosition(), 
+        size : currentWindow.getSize()
+      };
+      currentWindow.maximize();
+    }else if(this.old !== undefined){
+      currentWindow.setPosition(this.old.position[0], this.old.position[1], true);
+      currentWindow.setSize(this.old.size[0], this.old.size[1], true);
+    }
+  }
+
+  close() {
+    this._electron.remote.getCurrentWindow().close();
+  }
+}

src/styles.scss

@@ -1 +1,41 @@
 /* You can add global styles to this file, and also import other style files */
+
+html,
+body,
+app-root {
+  height: 100%;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+}
+
+html {
+  overflow: hidden;
+}
+
+body {
+  user-select: none;
+  cursor: default;
+  background-color: rgb(23, 23, 23);
+  display: flex;
+  flex-direction: column;
+  font: 13px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
+    "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+    sans-serif;
+  color: #333;
+  &.isElectron {
+    box-sizing: border-box;
+    border-width: 1px;
+    border-style: solid;
+    box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 11px 3px;
+    border-color: #3a3939;
+  }
+  &.hasFocus{
+    border-color: rgb(154, 19, 19);
+  }
+}
+
+// #content {
+//   max-height: calc(100% - 32px);
+//   overflow: auto;
+// }