Add dummy components (#113)

src/app.module.ts

@@ -9,10 +9,12 @@ import { Select2Component } from 'ng2-select2/ng2-select2';
 
 import { ContenteditableDirective } from './directives/contenteditable';
 
+import { AddOnComponent } from './components/add-on';
 import { KeymapAddComponent, KeymapComponent, KeymapHeaderComponent } from './components/keymap';
 import { LayersComponent } from './components/layers';
 import {
     MacroActionEditorComponent,
+    MacroAddComponent,
     MacroComponent,
     MacroDelayTabComponent,
     MacroItemComponent,
@@ -32,6 +34,7 @@ import {
 } from './components/popover/tab';
 import { CaptureKeystrokeButtonComponent } from './components/popover/widgets/capture-keystroke';
 import { IconComponent } from './components/popover/widgets/icon';
+import { SettingsComponent } from './components/settings';
 import { SideMenuComponent } from './components/side-menu';
 import { SvgKeyboardComponent } from './components/svg/keyboard';
 import {
@@ -102,13 +105,16 @@ const storeConfig = {
         CaptureKeystrokeButtonComponent,
         IconComponent,
         MacroComponent,
+        MacroAddComponent,
         MacroItemComponent,
         MacroActionEditorComponent,
         MacroDelayTabComponent,
         MacroKeyTabComponent,
         MacroMouseTabComponent,
         MacroTextTabComponent,
-        ContenteditableDirective
+        ContenteditableDirective,
+        AddOnComponent,
+        SettingsComponent
     ],
     imports: [
         BrowserModule,

src/components/add-on/add-on.component.html

@@ -0,0 +1,7 @@
+<div class="row">
+    <h1 class="col-xs-12 pane-title">
+        <i class="fa fa-puzzle-piece"></i>
+        <span class="macro__name pane-title__name">{{ name$ | async }}</span>
+    </h1>
+</div>
+To be done...

src/components/add-on/add-on.component.ts

@@ -0,0 +1,19 @@
+import { Component } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+
+import { Observable } from 'rxjs/Observable';
+
+@Component({
+    selector: 'add-on',
+    template: require('./add-on.component.html'),
+    styles: [require('./add-on.component.scss')]
+})
+export class AddOnComponent {
+    private name$: Observable<string>;
+
+    constructor(private route: ActivatedRoute) {
+        this.name$ = route
+            .params
+            .select<string>('name');
+    }
+}

src/components/add-on/add-on.routes.ts

@@ -0,0 +1,10 @@
+import { Routes } from '@angular/router';
+
+import { AddOnComponent } from './add-on.component';
+
+export const addOnRoutes: Routes = [
+    {
+        path: 'add-on/:name',
+        component: AddOnComponent
+    }
+];

src/components/add-on/index.ts

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

src/components/macro/add/macro-add.component.html

@@ -0,0 +1,7 @@
+<div class="row">
+    <h1 class="col-xs-12 pane-title">
+        <i class="fa fa-play"></i>
+        <span class="macro__name pane-title__name">Add macro</span>
+    </h1>
+</div>
+To be done...

src/components/macro/add/macro-add.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'macro-add',
+    template: require('./macro-add.component.html'),
+    styles: [require('./macro-add.component.scss')]
+})
+export class MacroAddComponent {
+    constructor() { }
+}

src/components/macro/index.ts

@@ -1,4 +1,5 @@
 export * from './macro.component';
+export * from './add/macro-add.component';
 export * from './macro.routes';
 export * from './macro-item';
 export * from './macro-action-editor';

src/components/macro/macro.routes.ts

@@ -1,5 +1,6 @@
 import { Routes } from '@angular/router';
 
+import { MacroAddComponent } from './add/macro-add.component';
 import { MacroComponent } from './macro.component';
 
 export const macroRoutes: Routes = [
@@ -7,6 +8,10 @@ export const macroRoutes: Routes = [
         path: 'macro',
         component: MacroComponent
     },
+    {
+        path: 'macro/add',
+        component: MacroAddComponent
+    },
     {
         path: 'macro/:id',
         component: MacroComponent

src/components/settings/index.ts

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

src/components/settings/settings.component.html

@@ -0,0 +1,7 @@
+<div class="row">
+    <h1 class="col-xs-12 pane-title">
+        <i class="fa fa-gear"></i>
+        <span class="macro__name pane-title__name">Settings</span>
+    </h1>
+</div>
+To be done...

src/components/settings/settings.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'settings',
+    template: require('./settings.component.html'),
+    styles: [require('./settings.component.scss')]
+})
+export class SettingsComponent {
+    constructor() { }
+}

src/components/settings/settings.routes.ts

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

src/components/side-menu/side-menu.component.html

@@ -19,7 +19,7 @@
     <li class="sidebar__level-1--item">
         <div class="sidebar__level-1">
             <i class="fa fa-play"></i> Macros
-            <a class="btn btn-default pull-right btn-sm" (click)="addMacro()">
+            <a [routerLink]="['/macro/add']" class="btn btn-default pull-right btn-sm">
                 <i class="fa fa-plus"></i>
             </a>
             <i class="fa fa-chevron-up pull-right" (click)="toggleHide($event, 'macro')"></i>
@@ -40,22 +40,22 @@
         <ul [@toggler]="animation.addon">
             <li class="sidebar__level-2--item" data-name="Key cluster" data-abbrev="">
                 <div class="sidebar__level-2">
-                    <a href="#">Key cluster</a>
+                    <a [routerLink]="['/add-on', 'Key cluster']">Key cluster</a>
                 </div>
             </li>
             <li class="sidebar__level-2--item" data-name="Trackball" data-abbrev="">
                 <div class="sidebar__level-2">
-                    <a href="#">Trackball</a>
+                    <a [routerLink]="['/add-on', 'Trackball']">Trackball</a>
                 </div>
             </li>
             <li class="sidebar__level-2--item" data-name="Toucpad" data-abbrev="">
                 <div class="sidebar__level-2">
-                    <a href="#">Touchpad</a>
+                    <a [routerLink]="['/add-on', 'Touchpad']">Touchpad</a>
                 </div>
             </li>
             <li class="sidebar__level-2--item" data-name="Trackpoint" data-abbrev="">
                 <div class="sidebar__level-2">
-                    <a href="#">Trackpoint</a>
+                    <a [routerLink]="['/add-on', 'Trackpoint']">Trackpoint</a>
                 </div>
             </li>
         </ul>
@@ -63,6 +63,8 @@
 </ul>
 <ul class="menu--bottom">
     <li class="sidebar__level-1--item">
-        <div class="sidebar__level-1"><i class="fa fa-gear"></i> Settings</div>
+        <a class="sidebar__level-1" [routerLink]="['/settings']">
+            <i class="fa fa-gear"></i> Settings
+        </a>
     </li>
 </ul>

src/components/side-menu/side-menu.component.scss

@@ -31,6 +31,7 @@ ul {
         padding: 0.5rem 1rem;
         font-size: 2rem;
         line-height: 3rem;
+        cursor: default;
 
         &:hover {
             .fa-chevron-up,
@@ -59,6 +60,7 @@ ul {
             position: relative;
             top: 0.5rem;
             display: none;
+            cursor: pointer;
         }
     }
 
@@ -81,6 +83,10 @@ ul {
                 }
             }
 
+            &:hover {
+                cursor: pointer;
+            }
+
             // General "right side" icon theming.
             .fa.pull-right {
                 position: relative;
@@ -108,7 +114,6 @@ ul {
     &__level-1,
     &__level-2--item {
         &:hover {
-            cursor: pointer;
             background-color: rgba(0, 0, 0, 0.05);
         }
     }
@@ -128,8 +133,13 @@ ul {
 
     .sidebar {
         &__level-1 {
-            background-color: transparent;
+            display: block;
             padding: 1rem;
+            cursor: pointer;
+
+            &:hover {
+                text-decoration: none;
+            }
         }
     }
 }

src/main-app/main-app.routes.ts

@@ -1,12 +1,16 @@
 import { ModuleWithProviders } from '@angular/core';
 import { RouterModule, Routes }  from '@angular/router';
 
+import { addOnRoutes } from '../components/add-on';
 import { keymapRoutes } from '../components/keymap';
 import { macroRoutes } from '../components/macro';
+import { settingsRoutes } from '../components/settings';
 
 const appRoutes: Routes = [
     ...keymapRoutes,
-    ...macroRoutes
+    ...macroRoutes,
+    ...addOnRoutes,
+    ...settingsRoutes
 ];
 
 export const appRoutingProviders: any[] = [ ];