Agent menu (#540)

* Add generate version module script

* Remove Fork me on GitHub banner

* Add app-version.ts

* Revert "Add app-version.ts"

This reverts commit fe1a37e631.

* Add app-version.ts

* Add agent icon class

* Move settings component under agent folder

* Add AboutComponent

* Add agent routes

* Add index.ts for agent folder

* Fix agent folder imports in shared module

* Add agent menu to side menu, with Settings and About pages under it

* Fix agent icon alignment in side menu

* Simplify About page

* Make Agent menu 0 level in side menu

* Remove bottom Settings menu

* Fix Agent menu closing if My UHK is closed in side menu

* Fix version text alignment in auto update settings

* Remove github fork ribbon styles

* use package.json instead of app-version.ts

* fix OpenUrlInNewWindow naming

* fix lint request

* fix: firmware download url calculation

packages/uhk-web/src/app/components/agent/about/about.component.html

@@ -0,0 +1,10 @@
+<div class="row">
+    <h1 class="col-xs-12 pane-title">
+        <i class="uhk-icon uhk-icon-agent-icon"></i>
+        <span>About</span>
+    </h1>
+    <div class="col-xs-12">
+        <div class="agent-version">Agent version: <span class="text-bold">{{version}}</span></div>
+        <div><a class="link-github" (click)="openAgentGitHubPage($event)">Agent on GitHub</a></div>
+    </div>
+</div>

packages/uhk-web/src/app/components/agent/about/about.component.scss

@@ -0,0 +1,20 @@
+:host {
+    overflow-y: auto;
+    display: block;
+    height: 100%;
+    width: 100%;
+}
+
+.agent {
+    &-version {
+        margin-bottom: 1rem;
+
+        span {
+            font-weight: bold;
+        }
+    }
+}
+
+.link-github {
+    cursor: pointer;
+}

packages/uhk-web/src/app/components/agent/about/about.component.ts

@@ -0,0 +1,27 @@
+import { Component } from '@angular/core';
+import { Store } from '@ngrx/store';
+import { Constants } from 'uhk-common';
+
+import { AppState } from '../../../store';
+import { getVersions } from '../../../util';
+import { OpenUrlInNewWindowAction } from '../../../store/actions/app';
+
+@Component({
+    selector: 'about-page',
+    templateUrl: './about.component.html',
+    styleUrls: ['./about.component.scss'],
+    host: {
+        'class': 'container-fluid'
+    }
+})
+export class AboutComponent {
+    version: string = getVersions().version;
+
+    constructor(private store: Store<AppState>) {
+    }
+
+    openAgentGitHubPage(event) {
+        event.preventDefault();
+        this.store.dispatch(new OpenUrlInNewWindowAction(Constants.AGENT_GITHUB_URL));
+    }
+}

packages/uhk-web/src/app/components/agent/agent.routes.ts

@@ -0,0 +1,15 @@
+import { Routes } from '@angular/router';
+
+import { SettingsComponent } from './settings/settings.component';
+import { AboutComponent } from './about/about.component';
+
+export const agentRoutes: Routes = [
+    {
+        path: 'settings',
+        component: SettingsComponent
+    },
+    {
+        path: 'about',
+        component: AboutComponent
+    }
+];

packages/uhk-web/src/app/components/agent/index.ts

@@ -0,0 +1,3 @@
+export * from './agent.routes';
+export * from './about/about.component';
+export * from './settings/settings.component';

packages/uhk-web/src/app/components/agent/settings/settings.component.ts

@@ -2,13 +2,14 @@ import { Component } from '@angular/core';
 import { Store } from '@ngrx/store';
 import { Observable } from 'rxjs/Observable';
 
-import { AppState, getAutoUpdateSettings, getCheckingForUpdate } from '../../store';
+import { AppState, getAutoUpdateSettings, getCheckingForUpdate } from '../../../store';
 import {
     CheckForUpdateNowAction,
     ToggleCheckForUpdateOnStartupAction,
     TogglePreReleaseFlagAction
-} from '../../store/actions/auto-update-settings';
-import { AutoUpdateSettings } from '../../models/auto-update-settings';
+} from '../../../store/actions/auto-update-settings';
+import { AutoUpdateSettings } from '../../../models/auto-update-settings';
+import { getVersions } from '../../../util';
 
 @Component({
     selector: 'settings',
@@ -19,8 +20,7 @@ import { AutoUpdateSettings } from '../../models/auto-update-settings';
     }
 })
 export class SettingsComponent {
-    // TODO: From where do we get the version number? The electron gives back in main process, but the web...
-    version = '1.0.0';
+    version: string = getVersions().version;
     autoUpdateSettings$: Observable<AutoUpdateSettings>;
     checkingForUpdate$: Observable<boolean>;
 

packages/uhk-web/src/app/components/auto-update-settings/auto-update-settings.html

@@ -19,7 +19,7 @@
         <div class="form-group">
             <label class="col-sm-2 control-label">Version:</label>
             <div class="col-sm-10">
-                <p class="form-control-static">{{version}}</p>
+                <p>{{version}}</p>
             </div>
         </div>
 

packages/uhk-web/src/app/components/settings/index.ts

@@ -1,2 +0,0 @@
-export * from './settings.component';
-export * from './settings.routes';

packages/uhk-web/src/app/components/settings/settings.routes.ts

@@ -1,10 +0,0 @@
-import { Routes } from '@angular/router';
-
-import { SettingsComponent } from './settings.component';
-
-export const settingsRoutes: Routes = [
-    {
-        path: 'settings',
-        component: SettingsComponent
-    }
-];

packages/uhk-web/src/app/components/side-menu/side-menu.component.html

@@ -117,14 +117,25 @@
                     </li>
                 </ul>
             </li>
-
+        </ul>
+    </li>
+    <li class="sidebar__level-0--item" [routerLinkActive]="['active']">
+        <div class="sidebar__level-0">
+            <i class="uhk-icon uhk-icon-agent-icon"></i> Agent
+            <i class="fa fa-chevron-up pull-right"
+                (click)="toggleHide($event, 'agent')"></i>
+        </div>
+        <ul [@toggler]="animation['agent']">
+            <li class="sidebar__level-2--item">
+                <div class="sidebar__level-2" [routerLinkActive]="['active']">
+                    <a [routerLink]="['/settings']">Settings</a>
+                </div>
+            </li>
+            <li class="sidebar__level-2--item">
+                <div class="sidebar__level-2" [routerLinkActive]="['active']">
+                    <a [routerLink]="['/about']">About</a>
+                </div>
+            </li>
         </ul>
     </li>
 </ul>
-<ul class="menu--bottom" *ngIf="runInElectron$ | async">
-    <li class="sidebar__level-1--item" [routerLinkActive]="['active']">
-        <a class="sidebar__level-1" [routerLink]="['/settings']">
-            <i class="fa fa-gear"></i> Settings
-        </a>
-    </li>
-</ul>

packages/uhk-web/src/app/components/side-menu/side-menu.component.scss

@@ -64,6 +64,10 @@ ul {
             display: none;
             cursor: pointer;
         }
+
+        .uhk-icon-agent-icon {
+            margin-left: -3px;
+        }
     }
 
     &__level-2 {