sass and some ui stuff

code/moya-angular-common/src/moya-rest/services/moya-rest.service.ts

@@ -35,7 +35,7 @@ export class MoyaRestService {
   }
 
 
-  private genUrl(subUrl: string, urlParams? : Map<string, string>): string {
+  private genUrl(subUrl: string, urlParams?: Map<string, string>): string {
 
     let suffix = "";
 
@@ -71,7 +71,8 @@ export class MoyaRestService {
 
     console.log("error on jira rest connection", error);
 
-    // TODO: add handlers to 403's and other "not logged in" or "invalid permissions" -statuscodes, and route them using some nice global parameter
+    // TODO: add handlers to 403's and other "not logged in" or "invalid permissions"
+    // -statuscodes, and route them using some nice global parameter
 
     return Observable.throw(error);
   }

code/moya-angular/angular-cli.json

 {
   "project": {
-    "version": "1.0.0-beta.24",
     "name": "moya-angular"
   },
   "apps": [
@@ -16,10 +15,9 @@
       "test": "test.ts",
       "tsconfig": "tsconfig.json",
       "prefix": "app",
-      "mobile": false,
       "styles": [
         "../node_modules/bootstrap/dist/css/bootstrap.min.css",
-        "styles.css"
+        "styles.scss"
       ],
       "scripts": [],
       "environmentSource": "environments/environment.ts",
@@ -30,37 +28,30 @@
       }
     }
   ],
-  "addons": [],
-  "packages": [],
   "e2e": {
     "protractor": {
       "config": "./protractor.conf.js"
     }
   },
+  "lint": [
+    {
+      "project": "src/tsconfig.json"
+    }
+  ],
   "test": {
     "karma": {
       "config": "./karma.conf.js"
     }
   },
   "defaults": {
-    "styleExt": "css",
-    "prefixInterfaces": false,
-    "inline": {
-      "style": false,
-      "template": false
+    "styleExt": "scss",
+    "class": {
+      "spec": false
     },
-    "spec": {
-      "class": false,
-      "component": true,
-      "directive": true,
-      "module": false,
-      "pipe": true,
-      "service": true
-    }
-  },
-  "lint": [
-    {
-      "project": "src/tsconfig.json"
+    "component": {
+      "spec": true,
+      "inlineStyle": false,
+      "inlineTemplate": false
     }
-  ]
+  }
 }

code/moya-angular/src/app/admin/admin.component.html

 <p>
   admin works!
 </p>
+
+

code/moya-angular/src/app/admin/admin.component.ts

@@ -3,7 +3,7 @@ import { Component, OnInit } from '@angular/core';
 @Component({
   selector: 'app-admin',
   templateUrl: './admin.component.html',
-  styleUrls: ['./admin.component.css']
+  styleUrls: ['./admin.component.scss']
 })
 export class AdminComponent implements OnInit {
 

code/moya-angular/src/app/app.component.css → code/moya-angular/src/app/app.component.scss

 #top-container {
   width: 100%;
   display: flex;
+  min-height: 100%;
 }
 
 #left-menu {
-  border: 1px solid green;
 }
 
 
 
 #contentarea {
-  border: 1px solid blue;
   flex-grow: 1;
   display: flex;
   flex-direction: column;
@@ -21,7 +20,10 @@
 }
 
 #content {
-  border: 1px solid yellow;
   display: flex;
   flex-direction: row;
+  background-color: white;
+  margin-left: 30px;
+  padding: 20px;
+  flex-grow: 1;
 }

code/moya-angular/src/app/app.component.ts

 import {Component, NgZone} from '@angular/core';
-import {Router} from "@angular/router";
+import {Router} from '@angular/router';
 
 declare var window: any;
 
@@ -8,11 +8,11 @@ declare var window: any;
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css']
+  styleUrls: ['./app.component.scss']
 })
 export class AppComponent {
 
-  constructor(private router : Router, private zone : NgZone) {
+  constructor(private router: Router, private zone: NgZone) {
 
     window.angularRoute = (url => {
       zone.run(() => {

code/moya-angular/src/app/app.module.ts

@@ -5,17 +5,17 @@ import { HttpModule } from '@angular/http';
 
 import { AppComponent } from './app.component';
 import { ViplistComponent } from './viplist/viplist.component';
-import {AlertModule} from "ng2-bootstrap";
-import {MoyaRestModule} from "moya-angular-common";
+import {AlertModule} from 'ng2-bootstrap';
+import {MoyaRestModule} from 'moya-angular-common';
 
 import { RouterModule, Routes } from '@angular/router';
 import { OldMoyaComponent } from './old-moya/old-moya.component';
 import {SafePipe } from './pipes/safe.pipe';
 import { I18nDirective } from './directives/i18n.directive';
-import {TestComponent} from "./test/test.component";
+import {TestComponent} from './test/test.component';
 import { AdminMenuComponent } from './menu/admin-menu/admin-menu.component';
-import {TopMenuComponent} from "./menu/top-menu/top-menu.component";
-import {LeftMenuComponent} from "./menu/left-menu/left-menu.component";
+import {TopMenuComponent} from './menu/top-menu/top-menu.component';
+import {LeftMenuComponent} from './menu/left-menu/left-menu.component';
 import { InfoMenuComponent } from './menu/info-menu/info-menu.component';
 import { UserMenuComponent } from './menu/user-menu/user-menu.component';
 import { UserComponent } from './user/user.component';
@@ -25,21 +25,21 @@ import { AdminComponent } from './admin/admin.component';
 const appRoutes: Routes = [
   { path: 'user',
     children: [
-      { path: '', component: UserMenuComponent, outlet: "left-menu" },
+      { path: '', component: UserMenuComponent, outlet: 'left-menu' },
       { path: '', pathMatch: 'full', component: UserComponent },
       { path: 'old', component: OldMoyaComponent },
     ]
   },
   { path: 'info',
     children: [
-      { path: '', component: InfoMenuComponent, outlet: "left-menu" },
+      { path: '', component: InfoMenuComponent, outlet: 'left-menu' },
       { path: '', pathMatch: 'full', component: OldMoyaComponent },
       { path: 'old', component: OldMoyaComponent },
     ]
   },
   { path: 'admin',
     children: [
-      { path: '', component: AdminMenuComponent, outlet: "left-menu" },
+      { path: '', component: AdminMenuComponent, outlet: 'left-menu' },
       { path: '', pathMatch: 'full', component: AdminComponent },
       { path: 'old', component: OldMoyaComponent },
     ]

code/moya-angular/src/app/info/info.component.ts

@@ -3,7 +3,7 @@ import { Component, OnInit } from '@angular/core';
 @Component({
   selector: 'app-info',
   templateUrl: './info.component.html',
-  styleUrls: ['./info.component.css']
+  styleUrls: ['./info.component.scss']
 })
 export class InfoComponent implements OnInit {
 

code/moya-angular/src/app/menu/admin-menu/admin-menu.component.html

-<left-menu [menu]="menu"></left-menu>
+<left-menu [menu]="menu" styleClass="adminMenu"></left-menu>

code/moya-angular/src/app/menu/admin-menu/admin-menu.component.ts

 import { Component, OnInit } from '@angular/core';
-import {MenuGroup} from "../../models/menu-group.model";
-import {MENU} from "../defines/menu";
+import {MenuGroup} from '../../models/menu-group.model';
+import {MENU} from '../defines/menu';
 
 @Component({
   selector: 'app-admin-menu',
   templateUrl: './admin-menu.component.html',
-  styleUrls: ['./admin-menu.component.css']
+  styleUrls: ['./admin-menu.component.scss']
 })
 export class AdminMenuComponent implements OnInit {
 

code/moya-angular/src/app/menu/defines/menu.ts

-import {MenuGroup} from "../../models/menu-group.model";
+import {MenuGroup} from '../../models/menu-group.model';
 /**
  * Created by tuukka on 13/05/17.
  */
 
 
 export class MENU {
-  //useradmin/list.jsf
 
   static ADMIN: MenuGroup[]= [
     {
-      "name": "Kauppa",
-      "items": [
-        { "path": "/admin/old", "name": "Products", "params": {p: 'product/list.jsf'} }
+      'name': 'Kauppa',
+      'items': [
+        { 'path': '/admin/old', 'name': 'Products', 'params': {p: 'product/list.jsf'} }
       ]}
   ];
 
   static INFO: MenuGroup[]= [
     {
-      "name": "Users",
-      "items": [
-        { "path": "/info/old", "name": "List users", "params": {p: 'useradmin/list.jsf'} }
+      'name': 'Users',
+      'items': [
+        { 'path': '/info/old', 'name': 'List users', 'params': {p: 'useradmin/list.jsf'} }
       ]}
   ];
 
   static USER: MenuGroup[] = [
     {
-      "name": "Shop",
-      "items": [
-        { "path": "/user/old", "name": "Buy Tickets", "params": {p: 'shop/createBill.jsf'} },
-        { "path": "/user/old", "name": "Own Orders", "params": {p: 'bill/list.jsf'} },
+      'name': 'Shop',
+      'items': [
+        { 'path': '/user/old', 'name': 'Buy Tickets', 'params': {p: 'shop/createBill.jsf'} },
+        { 'path': '/user/old', 'name': 'Own Orders', 'params': {p: 'bill/list.jsf'} },
       ]},
     {
-      "name": "POLL",
-      "items": [
-        { "path": "/user/old", "name": "Jotain", "params": {p: 'poll/index.jsf'} },
+      'name': 'POLL',
+      'items': [
+        { 'path': '/user/old', 'name': 'Jotain', 'params': {p: 'poll/index.jsf'} },
       ]},
   ];
 

code/moya-angular/src/app/menu/info-menu/info-menu.component.html

-<left-menu [menu]="menu"></left-menu>
+<left-menu [menu]="menu" styleClass="infoMenu"></left-menu>

code/moya-angular/src/app/menu/info-menu/info-menu.component.ts

 import { Component, OnInit } from '@angular/core';
-import {MenuGroup} from "../../models/menu-group.model";
-import {MENU} from "../defines/menu";
+import {MenuGroup} from '../../models/menu-group.model';
+import {MENU} from '../defines/menu';
 
 @Component({
   selector: 'app-info-menu',
   templateUrl: './info-menu.component.html',
-  styleUrls: ['./info-menu.component.css']
+  styleUrls: ['./info-menu.component.scss']
 })
 export class InfoMenuComponent implements OnInit {
 

code/moya-angular/src/app/menu/left-menu/left-menu.component.css

-
-
-.leftNavGroup a.active {
-  color: red;
-}
-
-
-#leftNav {
-  display: flex;
-  flex-direction: column;
-}
-
-
-.leftNavGroup {
-  display: flex;
-  flex-direction: column;
-}
-

code/moya-angular/src/app/menu/left-menu/left-menu.component.html

 
 
-<div>
+<div id="leftNavTop"  [class]="styleClass">
 
   <nav id="leftNav">
 

code/moya-angular/src/app/menu/left-menu/left-menu.component.scss

+@import "../../scss/main.scss";
+
+#leftNavTop {
+  min-height: 100vh;
+  width: 255px;
+}
+
+.leftNavItem {
+  font-family: Roboto;
+  font-size: 14px;
+  color: #FFFFFF;
+  text-align: center;
+  padding-bottom: 12px;
+  padding-top: 12px;
+}
+
+.leftNavItem.active {
+
+  background-image: linear-gradient(90deg, rgba(126, 142, 218,0.13) 0%, rgba(255,255,255,0.00) 92%);
+  border-left: 3px solid #69B1A1;
+
+}
+
+
+#leftNav {
+  display: flex;
+  flex-direction: column;
+}
+
+
+.leftNavGroup {
+  display: flex;
+  flex-direction: column;
+
+  font-family: Roboto;
+  font-weight: 500;
+  font-size: 15px;
+
+  color: #E49436;
+  letter-spacing: 1.17px;
+
+  margin-top: 30px;
+  text-align: center;
+  padding-bottom: 12px;
+  padding-top: 12px;
+}
+
+.infoMenu  .leftNavGroup {
+  color: $user-color;
+}
+
+
+
+
+.userMenu {
+//  background-color: $user-color;
+  background-image: linear-gradient(0deg, #485173 0%, #141721 100%);
+}
+.infoMenu {
+//  background-color: $info-color;
+  background-image: linear-gradient(0deg, #fad9b1 0%, #de821f 100%);
+}
+.adminMenu {
+//  background-color: $admin-color;
+  background-image: linear-gradient(0deg, #569f8e 0%, #11141b 100%);
+}

code/moya-angular/src/app/menu/left-menu/left-menu.component.ts

 import {Component, OnInit, Input} from '@angular/core';
-import {MenuGroup} from "../../models/menu-group.model";
+import {MenuGroup} from '../../models/menu-group.model';
 
 @Component({
   selector: 'left-menu',
   templateUrl: './left-menu.component.html',
-  styleUrls: ['./left-menu.component.css']
+  styleUrls: ['./left-menu.component.scss']
 })
 export class LeftMenuComponent implements OnInit {
 
   @Input()
   menu: MenuGroup[];
 
-
+  @Input()
+  styleClass: string;
 
   constructor() {
 

code/moya-angular/src/app/menu/top-menu/top-menu.component.css → code/moya-angular/src/app/menu/top-menu/top-menu.component.scss

-
+@import "../../scss/main.scss";
 
 #topNav {
   padding: 10px 10px 10px 30px;
@@ -29,13 +29,13 @@
 }
 
 #userTopNav {
-  background: #2b2c3a;
+  background: $user-color;
 }
 
 #infoTopNav {
-  background: #de821f;
+  background: $info-color;
 }
 
 #adminTopNav {
-  background: #69B1A1;
+  background: $admin-color;
 }

code/moya-angular/src/app/menu/top-menu/top-menu.component.ts

@@ -3,7 +3,7 @@ import { Component, OnInit } from '@angular/core';
 @Component({
   selector: 'top-menu',
   templateUrl: './top-menu.component.html',
-  styleUrls: ['./top-menu.component.css']
+  styleUrls: ['./top-menu.component.scss']
 })
 export class TopMenuComponent implements OnInit {
 

code/moya-angular/src/app/menu/user-menu/user-menu.component.html

-<left-menu [menu]="menu"></left-menu>
+<left-menu [menu]="menu" styleClass="userMenu"></left-menu>

code/moya-angular/src/app/menu/user-menu/user-menu.component.ts

 import { Component, OnInit } from '@angular/core';
-import {MenuGroup} from "../../models/menu-group.model";
-import {MENU} from "../defines/menu";
+import {MenuGroup} from '../../models/menu-group.model';
+import {MENU} from '../defines/menu';
 
 @Component({
   selector: 'app-user-menu',
   templateUrl: './user-menu.component.html',
-  styleUrls: ['./user-menu.component.css']
+  styleUrls: ['./user-menu.component.scss']
 })
 export class UserMenuComponent implements OnInit {
 

code/moya-angular/src/app/models/menu-group.model.ts

 
-import {MenuItem} from "./menu-item.model";
+import {MenuItem} from './menu-item.model';
 
 
 export interface MenuGroup {

code/moya-angular/src/app/old-moya/old-moya.component.ts

 import { Component, OnInit,  ViewChild, ElementRef } from '@angular/core';
-import {Location, LocationStrategy, HashLocationStrategy, PathLocationStrategy} from "@angular/common";
-import {NavigationExtras, ActivatedRoute, Router} from "@angular/router";
-import {Observable} from "rxjs";
+import {Location, LocationStrategy, HashLocationStrategy, PathLocationStrategy} from '@angular/common';
+import {NavigationExtras, ActivatedRoute, Router} from '@angular/router';
+import {Observable} from 'rxjs';
 
 @Component({
   selector: 'old-moya',
   providers: [Location, {provide: LocationStrategy, useClass: PathLocationStrategy}],
   templateUrl: './old-moya.component.html',
-  styleUrls: ['./old-moya.component.css']
+  styleUrls: ['./old-moya.component.scss']
 })
 export class OldMoyaComponent implements OnInit {
 
 
-  frameUrl: String = "/MoyaWeb/";
+  frameUrl: String = '/MoyaWeb/';
 
 
 
   @ViewChild('iframe') iframe: any;
-  height: string = "700px";
+  height = '700px';
 
 
 
   constructor(private location: Location, private route: ActivatedRoute) {
 
-    route.queryParamMap.map(a => a.get("p")).subscribe(x => {
-      if(x) {
-        this.frameUrl = "/MoyaWeb/" + x;
+    route.queryParamMap.map(a => a.get('p')).subscribe(x => {
+      if (x) {
+        this.frameUrl = '/MoyaWeb/' + x;
       }
     });
 
@@ -35,16 +35,16 @@ export class OldMoyaComponent implements OnInit {
   ngOnInit() { }
 
   changeUrl() {
-    let tmpFrameUrl = this.iframe.nativeElement.contentWindow.location.href.split("/MoyaWeb/",2);
+    let tmpFrameUrl = this.iframe.nativeElement.contentWindow.location.href.split('/MoyaWeb/', 2);
 
-    if(tmpFrameUrl.length > 1) {
-      this.location.replaceState(this.location.path(false).split("?", 1)[0] + "?p=" + tmpFrameUrl[1]);
+    if (tmpFrameUrl.length > 1) {
+      this.location.replaceState(this.location.path(false).split('?', 1)[0] + '?p=' + tmpFrameUrl[1]);
     }
 
 
     console.log(this.iframe.nativeElement.contentWindow.document.body.height);
 
-    this.height = this.iframe.nativeElement.contentWindow.document.body.scrollHeight + "px";
+    this.height = this.iframe.nativeElement.contentWindow.document.body.scrollHeight + 'px';
 
 
 

code/moya-angular/src/app/scss/main.scss

+
+$user-color: #2b2c3a;
+$info-color: #de821f;
+$admin-color: #69B1A1;
+

code/moya-angular/src/app/test/test.component.ts

@@ -3,7 +3,7 @@ import {Component, OnInit, Input} from '@angular/core';
 @Component({
   selector: 'app-test',
   templateUrl: './test.component.html',
-  styleUrls: ['./test.component.css']
+  styleUrls: ['./test.component.scss']
 })
 export class TestComponent implements OnInit {
 

code/moya-angular/src/app/user/user.component.ts

@@ -3,7 +3,7 @@ import { Component, OnInit } from '@angular/core';
 @Component({
   selector: 'app-user',
   templateUrl: './user.component.html',
-  styleUrls: ['./user.component.css']
+  styleUrls: ['./user.component.scss']
 })
 export class UserComponent implements OnInit {
 

code/moya-angular/src/app/viplist/viplist.component.ts

 import { Component, OnInit } from '@angular/core';
-import {Observable} from "rxjs";
-import {ViplistService, Vip} from "moya-angular-common";
+import {Observable} from 'rxjs';
+import {ViplistService, Vip} from 'moya-angular-common';
 
 @Component({
   selector: 'moya-viplist',
   templateUrl: './viplist.component.html',
-  styleUrls: ['./viplist.component.css']
+  styleUrls: ['./viplist.component.scss']
 })
 export class ViplistComponent implements OnInit {
 
-  vips : Observable<Array<Vip>>;
+  vips: Observable<Array<Vip>>;
 
-  constructor(private viplistService : ViplistService) { }
+  constructor(private viplistService: ViplistService) { }
 
 
   ngOnInit() {

code/moya-angular/src/hmr.ts

-import {NgModuleRef, ApplicationRef} from "@angular/core";
-import {createNewHosts} from "@angularclass/hmr";
+import {NgModuleRef, ApplicationRef} from '@angular/core';
+import {createNewHosts} from '@angularclass/hmr';
 /**
  * Created by tuukka on 14/02/17.
  */

code/moya-angular/src/main.ts

@@ -4,7 +4,7 @@ import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 import { enableProdMode } from '@angular/core';
 import { environment } from './environments/environment';
 import { AppModule } from './app/app.module';
-import {hmrBootstrap} from "./hmr";
+import {hmrBootstrap} from './hmr';
 
 if (environment.production) {
   enableProdMode();
@@ -19,11 +19,11 @@ const bootstrap = () => {
 
 if (environment.hmr) {
   if (module['hot']) {
-    console.log("starting with hmr!");
+    console.log('starting with hmr!');
     hmrBootstrap(module, bootstrap);
   } else {
     console.error('HMR is not enabled for webpack-dev-server!');
-    console.info('Are you using the --hmr flag for ng serve?');
+    console.log('Are you using the --hmr flag for ng serve?');
   }
 } else {
   bootstrap();

code/moya-angular/src/styles.css → code/moya-angular/src/styles.scss

@@ -3,7 +3,13 @@
 @import url('https://fonts.googleapis.com/css?family=Roboto');
 @import '~@angular/material/prebuilt-themes/indigo-pink.css';
 
-
 body {
   background-color: #f2f3f9;
+
+
+}
+
+
+html, body {
+  height: 100%;
 }

code/moya-angular/tslint.json

@@ -89,8 +89,8 @@
       "check-type"
     ],
 
-    "directive-selector": [true, "attribute", "app", "camelCase"],
-    "component-selector": [true, "element", "app", "kebab-case"],
+    "directive-selector": [true, "attribute", "", "camelCase"],
+    "component-selector": [true, "element", "", "kebab-case"],
     "use-input-property-decorator": true,
     "use-output-property-decorator": true,
     "use-host-property-decorator": true,