Commit 3ce47fa0 by Tuukka Kivilahti

sass and some ui stuff

1 parent 8c372a50
Showing with 178 additions and 123 deletions
...@@ -35,7 +35,7 @@ export class MoyaRestService { ...@@ -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 = ""; let suffix = "";
...@@ -71,7 +71,8 @@ export class MoyaRestService { ...@@ -71,7 +71,8 @@ export class MoyaRestService {
console.log("error on jira rest connection", error); 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); return Observable.throw(error);
} }
......
{ {
"project": { "project": {
"version": "1.0.0-beta.24",
"name": "moya-angular" "name": "moya-angular"
}, },
"apps": [ "apps": [
...@@ -16,10 +15,9 @@ ...@@ -16,10 +15,9 @@
"test": "test.ts", "test": "test.ts",
"tsconfig": "tsconfig.json", "tsconfig": "tsconfig.json",
"prefix": "app", "prefix": "app",
"mobile": false,
"styles": [ "styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css", "../node_modules/bootstrap/dist/css/bootstrap.min.css",
"styles.css" "styles.scss"
], ],
"scripts": [], "scripts": [],
"environmentSource": "environments/environment.ts", "environmentSource": "environments/environment.ts",
...@@ -30,37 +28,30 @@ ...@@ -30,37 +28,30 @@
} }
} }
], ],
"addons": [],
"packages": [],
"e2e": { "e2e": {
"protractor": { "protractor": {
"config": "./protractor.conf.js" "config": "./protractor.conf.js"
} }
}, },
"lint": [
{
"project": "src/tsconfig.json"
}
],
"test": { "test": {
"karma": { "karma": {
"config": "./karma.conf.js" "config": "./karma.conf.js"
} }
}, },
"defaults": { "defaults": {
"styleExt": "css", "styleExt": "scss",
"prefixInterfaces": false, "class": {
"inline": { "spec": false
"style": false,
"template": false
}, },
"spec": { "component": {
"class": false, "spec": true,
"component": true, "inlineStyle": false,
"directive": true, "inlineTemplate": false
"module": false,
"pipe": true,
"service": true
} }
},
"lint": [
{
"project": "src/tsconfig.json"
} }
]
} }
...@@ -3,7 +3,7 @@ import { Component, OnInit } from '@angular/core'; ...@@ -3,7 +3,7 @@ import { Component, OnInit } from '@angular/core';
@Component({ @Component({
selector: 'app-admin', selector: 'app-admin',
templateUrl: './admin.component.html', templateUrl: './admin.component.html',
styleUrls: ['./admin.component.css'] styleUrls: ['./admin.component.scss']
}) })
export class AdminComponent implements OnInit { export class AdminComponent implements OnInit {
......
#top-container { #top-container {
width: 100%; width: 100%;
display: flex; display: flex;
min-height: 100%;
} }
#left-menu { #left-menu {
border: 1px solid green;
} }
#contentarea { #contentarea {
border: 1px solid blue;
flex-grow: 1; flex-grow: 1;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
...@@ -21,7 +20,10 @@ ...@@ -21,7 +20,10 @@
} }
#content { #content {
border: 1px solid yellow;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
background-color: white;
margin-left: 30px;
padding: 20px;
flex-grow: 1;
} }
import {Component, NgZone} from '@angular/core'; import {Component, NgZone} from '@angular/core';
import {Router} from "@angular/router"; import {Router} from '@angular/router';
declare var window: any; declare var window: any;
...@@ -8,11 +8,11 @@ declare var window: any; ...@@ -8,11 +8,11 @@ declare var window: any;
@Component({ @Component({
selector: 'app-root', selector: 'app-root',
templateUrl: './app.component.html', templateUrl: './app.component.html',
styleUrls: ['./app.component.css'] styleUrls: ['./app.component.scss']
}) })
export class AppComponent { export class AppComponent {
constructor(private router : Router, private zone : NgZone) { constructor(private router: Router, private zone: NgZone) {
window.angularRoute = (url => { window.angularRoute = (url => {
zone.run(() => { zone.run(() => {
......
...@@ -5,17 +5,17 @@ import { HttpModule } from '@angular/http'; ...@@ -5,17 +5,17 @@ import { HttpModule } from '@angular/http';
import { AppComponent } from './app.component'; import { AppComponent } from './app.component';
import { ViplistComponent } from './viplist/viplist.component'; import { ViplistComponent } from './viplist/viplist.component';
import {AlertModule} from "ng2-bootstrap"; import {AlertModule} from 'ng2-bootstrap';
import {MoyaRestModule} from "moya-angular-common"; import {MoyaRestModule} from 'moya-angular-common';
import { RouterModule, Routes } from '@angular/router'; import { RouterModule, Routes } from '@angular/router';
import { OldMoyaComponent } from './old-moya/old-moya.component'; import { OldMoyaComponent } from './old-moya/old-moya.component';
import {SafePipe } from './pipes/safe.pipe'; import {SafePipe } from './pipes/safe.pipe';
import { I18nDirective } from './directives/i18n.directive'; 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 { AdminMenuComponent } from './menu/admin-menu/admin-menu.component';
import {TopMenuComponent} from "./menu/top-menu/top-menu.component"; import {TopMenuComponent} from './menu/top-menu/top-menu.component';
import {LeftMenuComponent} from "./menu/left-menu/left-menu.component"; import {LeftMenuComponent} from './menu/left-menu/left-menu.component';
import { InfoMenuComponent } from './menu/info-menu/info-menu.component'; import { InfoMenuComponent } from './menu/info-menu/info-menu.component';
import { UserMenuComponent } from './menu/user-menu/user-menu.component'; import { UserMenuComponent } from './menu/user-menu/user-menu.component';
import { UserComponent } from './user/user.component'; import { UserComponent } from './user/user.component';
...@@ -25,21 +25,21 @@ import { AdminComponent } from './admin/admin.component'; ...@@ -25,21 +25,21 @@ import { AdminComponent } from './admin/admin.component';
const appRoutes: Routes = [ const appRoutes: Routes = [
{ path: 'user', { path: 'user',
children: [ children: [
{ path: '', component: UserMenuComponent, outlet: "left-menu" }, { path: '', component: UserMenuComponent, outlet: 'left-menu' },
{ path: '', pathMatch: 'full', component: UserComponent }, { path: '', pathMatch: 'full', component: UserComponent },
{ path: 'old', component: OldMoyaComponent }, { path: 'old', component: OldMoyaComponent },
] ]
}, },
{ path: 'info', { path: 'info',
children: [ children: [
{ path: '', component: InfoMenuComponent, outlet: "left-menu" }, { path: '', component: InfoMenuComponent, outlet: 'left-menu' },
{ path: '', pathMatch: 'full', component: OldMoyaComponent }, { path: '', pathMatch: 'full', component: OldMoyaComponent },
{ path: 'old', component: OldMoyaComponent }, { path: 'old', component: OldMoyaComponent },
] ]
}, },
{ path: 'admin', { path: 'admin',
children: [ children: [
{ path: '', component: AdminMenuComponent, outlet: "left-menu" }, { path: '', component: AdminMenuComponent, outlet: 'left-menu' },
{ path: '', pathMatch: 'full', component: AdminComponent }, { path: '', pathMatch: 'full', component: AdminComponent },
{ path: 'old', component: OldMoyaComponent }, { path: 'old', component: OldMoyaComponent },
] ]
......
...@@ -3,7 +3,7 @@ import { Component, OnInit } from '@angular/core'; ...@@ -3,7 +3,7 @@ import { Component, OnInit } from '@angular/core';
@Component({ @Component({
selector: 'app-info', selector: 'app-info',
templateUrl: './info.component.html', templateUrl: './info.component.html',
styleUrls: ['./info.component.css'] styleUrls: ['./info.component.scss']
}) })
export class InfoComponent implements OnInit { export class InfoComponent implements OnInit {
......
<left-menu [menu]="menu"></left-menu> <left-menu [menu]="menu" styleClass="adminMenu"></left-menu>
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import {MenuGroup} from "../../models/menu-group.model"; import {MenuGroup} from '../../models/menu-group.model';
import {MENU} from "../defines/menu"; import {MENU} from '../defines/menu';
@Component({ @Component({
selector: 'app-admin-menu', selector: 'app-admin-menu',
templateUrl: './admin-menu.component.html', templateUrl: './admin-menu.component.html',
styleUrls: ['./admin-menu.component.css'] styleUrls: ['./admin-menu.component.scss']
}) })
export class AdminMenuComponent implements OnInit { export class AdminMenuComponent implements OnInit {
......
import {MenuGroup} from "../../models/menu-group.model"; import {MenuGroup} from '../../models/menu-group.model';
/** /**
* Created by tuukka on 13/05/17. * Created by tuukka on 13/05/17.
*/ */
export class MENU { export class MENU {
//useradmin/list.jsf
static ADMIN: MenuGroup[]= [ static ADMIN: MenuGroup[]= [
{ {
"name": "Kauppa", 'name': 'Kauppa',
"items": [ 'items': [
{ "path": "/admin/old", "name": "Products", "params": {p: 'product/list.jsf'} } { 'path': '/admin/old', 'name': 'Products', 'params': {p: 'product/list.jsf'} }
]} ]}
]; ];
static INFO: MenuGroup[]= [ static INFO: MenuGroup[]= [
{ {
"name": "Users", 'name': 'Users',
"items": [ 'items': [
{ "path": "/info/old", "name": "List users", "params": {p: 'useradmin/list.jsf'} } { 'path': '/info/old', 'name': 'List users', 'params': {p: 'useradmin/list.jsf'} }
]} ]}
]; ];
static USER: MenuGroup[] = [ static USER: MenuGroup[] = [
{ {
"name": "Shop", 'name': 'Shop',
"items": [ 'items': [
{ "path": "/user/old", "name": "Buy Tickets", "params": {p: 'shop/createBill.jsf'} }, { 'path': '/user/old', 'name': 'Buy Tickets', 'params': {p: 'shop/createBill.jsf'} },
{ "path": "/user/old", "name": "Own Orders", "params": {p: 'bill/list.jsf'} }, { 'path': '/user/old', 'name': 'Own Orders', 'params': {p: 'bill/list.jsf'} },
]}, ]},
{ {
"name": "POLL", 'name': 'POLL',
"items": [ 'items': [
{ "path": "/user/old", "name": "Jotain", "params": {p: 'poll/index.jsf'} }, { 'path': '/user/old', 'name': 'Jotain', 'params': {p: 'poll/index.jsf'} },
]}, ]},
]; ];
......
<left-menu [menu]="menu"></left-menu> <left-menu [menu]="menu" styleClass="infoMenu"></left-menu>
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import {MenuGroup} from "../../models/menu-group.model"; import {MenuGroup} from '../../models/menu-group.model';
import {MENU} from "../defines/menu"; import {MENU} from '../defines/menu';
@Component({ @Component({
selector: 'app-info-menu', selector: 'app-info-menu',
templateUrl: './info-menu.component.html', templateUrl: './info-menu.component.html',
styleUrls: ['./info-menu.component.css'] styleUrls: ['./info-menu.component.scss']
}) })
export class InfoMenuComponent implements OnInit { export class InfoMenuComponent implements OnInit {
......
.leftNavGroup a.active {
color: red;
}
#leftNav {
display: flex;
flex-direction: column;
}
.leftNavGroup {
display: flex;
flex-direction: column;
}
<div> <div id="leftNavTop" [class]="styleClass">
<nav id="leftNav"> <nav id="leftNav">
......
@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%);
}
import {Component, OnInit, Input} from '@angular/core'; import {Component, OnInit, Input} from '@angular/core';
import {MenuGroup} from "../../models/menu-group.model"; import {MenuGroup} from '../../models/menu-group.model';
@Component({ @Component({
selector: 'left-menu', selector: 'left-menu',
templateUrl: './left-menu.component.html', templateUrl: './left-menu.component.html',
styleUrls: ['./left-menu.component.css'] styleUrls: ['./left-menu.component.scss']
}) })
export class LeftMenuComponent implements OnInit { export class LeftMenuComponent implements OnInit {
@Input() @Input()
menu: MenuGroup[]; menu: MenuGroup[];
@Input()
styleClass: string;
constructor() { constructor() {
......
@import "../../scss/main.scss";
#topNav { #topNav {
padding: 10px 10px 10px 30px; padding: 10px 10px 10px 30px;
...@@ -29,13 +29,13 @@ ...@@ -29,13 +29,13 @@
} }
#userTopNav { #userTopNav {
background: #2b2c3a; background: $user-color;
} }
#infoTopNav { #infoTopNav {
background: #de821f; background: $info-color;
} }
#adminTopNav { #adminTopNav {
background: #69B1A1; background: $admin-color;
} }
...@@ -3,7 +3,7 @@ import { Component, OnInit } from '@angular/core'; ...@@ -3,7 +3,7 @@ import { Component, OnInit } from '@angular/core';
@Component({ @Component({
selector: 'top-menu', selector: 'top-menu',
templateUrl: './top-menu.component.html', templateUrl: './top-menu.component.html',
styleUrls: ['./top-menu.component.css'] styleUrls: ['./top-menu.component.scss']
}) })
export class TopMenuComponent implements OnInit { export class TopMenuComponent implements OnInit {
......
<left-menu [menu]="menu"></left-menu> <left-menu [menu]="menu" styleClass="userMenu"></left-menu>
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import {MenuGroup} from "../../models/menu-group.model"; import {MenuGroup} from '../../models/menu-group.model';
import {MENU} from "../defines/menu"; import {MENU} from '../defines/menu';
@Component({ @Component({
selector: 'app-user-menu', selector: 'app-user-menu',
templateUrl: './user-menu.component.html', templateUrl: './user-menu.component.html',
styleUrls: ['./user-menu.component.css'] styleUrls: ['./user-menu.component.scss']
}) })
export class UserMenuComponent implements OnInit { export class UserMenuComponent implements OnInit {
......
import {MenuItem} from "./menu-item.model"; import {MenuItem} from './menu-item.model';
export interface MenuGroup { export interface MenuGroup {
......
import { Component, OnInit, ViewChild, ElementRef } from '@angular/core'; import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import {Location, LocationStrategy, HashLocationStrategy, PathLocationStrategy} from "@angular/common"; import {Location, LocationStrategy, HashLocationStrategy, PathLocationStrategy} from '@angular/common';
import {NavigationExtras, ActivatedRoute, Router} from "@angular/router"; import {NavigationExtras, ActivatedRoute, Router} from '@angular/router';
import {Observable} from "rxjs"; import {Observable} from 'rxjs';
@Component({ @Component({
selector: 'old-moya', selector: 'old-moya',
providers: [Location, {provide: LocationStrategy, useClass: PathLocationStrategy}], providers: [Location, {provide: LocationStrategy, useClass: PathLocationStrategy}],
templateUrl: './old-moya.component.html', templateUrl: './old-moya.component.html',
styleUrls: ['./old-moya.component.css'] styleUrls: ['./old-moya.component.scss']
}) })
export class OldMoyaComponent implements OnInit { export class OldMoyaComponent implements OnInit {
frameUrl: String = "/MoyaWeb/"; frameUrl: String = '/MoyaWeb/';
@ViewChild('iframe') iframe: any; @ViewChild('iframe') iframe: any;
height: string = "700px"; height = '700px';
constructor(private location: Location, private route: ActivatedRoute) { constructor(private location: Location, private route: ActivatedRoute) {
route.queryParamMap.map(a => a.get("p")).subscribe(x => { route.queryParamMap.map(a => a.get('p')).subscribe(x => {
if(x) { if (x) {
this.frameUrl = "/MoyaWeb/" + x; this.frameUrl = '/MoyaWeb/' + x;
} }
}); });
...@@ -35,16 +35,16 @@ export class OldMoyaComponent implements OnInit { ...@@ -35,16 +35,16 @@ export class OldMoyaComponent implements OnInit {
ngOnInit() { } ngOnInit() { }
changeUrl() { 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) { if (tmpFrameUrl.length > 1) {
this.location.replaceState(this.location.path(false).split("?", 1)[0] + "?p=" + tmpFrameUrl[1]); this.location.replaceState(this.location.path(false).split('?', 1)[0] + '?p=' + tmpFrameUrl[1]);
} }
console.log(this.iframe.nativeElement.contentWindow.document.body.height); 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';
......
$user-color: #2b2c3a;
$info-color: #de821f;
$admin-color: #69B1A1;
...@@ -3,7 +3,7 @@ import {Component, OnInit, Input} from '@angular/core'; ...@@ -3,7 +3,7 @@ import {Component, OnInit, Input} from '@angular/core';
@Component({ @Component({
selector: 'app-test', selector: 'app-test',
templateUrl: './test.component.html', templateUrl: './test.component.html',
styleUrls: ['./test.component.css'] styleUrls: ['./test.component.scss']
}) })
export class TestComponent implements OnInit { export class TestComponent implements OnInit {
......
...@@ -3,7 +3,7 @@ import { Component, OnInit } from '@angular/core'; ...@@ -3,7 +3,7 @@ import { Component, OnInit } from '@angular/core';
@Component({ @Component({
selector: 'app-user', selector: 'app-user',
templateUrl: './user.component.html', templateUrl: './user.component.html',
styleUrls: ['./user.component.css'] styleUrls: ['./user.component.scss']
}) })
export class UserComponent implements OnInit { export class UserComponent implements OnInit {
......
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import {Observable} from "rxjs"; import {Observable} from 'rxjs';
import {ViplistService, Vip} from "moya-angular-common"; import {ViplistService, Vip} from 'moya-angular-common';
@Component({ @Component({
selector: 'moya-viplist', selector: 'moya-viplist',
templateUrl: './viplist.component.html', templateUrl: './viplist.component.html',
styleUrls: ['./viplist.component.css'] styleUrls: ['./viplist.component.scss']
}) })
export class ViplistComponent implements OnInit { export class ViplistComponent implements OnInit {
vips : Observable<Array<Vip>>; vips: Observable<Array<Vip>>;
constructor(private viplistService : ViplistService) { } constructor(private viplistService: ViplistService) { }
ngOnInit() { ngOnInit() {
......
import {NgModuleRef, ApplicationRef} from "@angular/core"; import {NgModuleRef, ApplicationRef} from '@angular/core';
import {createNewHosts} from "@angularclass/hmr"; import {createNewHosts} from '@angularclass/hmr';
/** /**
* Created by tuukka on 14/02/17. * Created by tuukka on 14/02/17.
*/ */
......
...@@ -4,7 +4,7 @@ import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; ...@@ -4,7 +4,7 @@ import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core'; import { enableProdMode } from '@angular/core';
import { environment } from './environments/environment'; import { environment } from './environments/environment';
import { AppModule } from './app/app.module'; import { AppModule } from './app/app.module';
import {hmrBootstrap} from "./hmr"; import {hmrBootstrap} from './hmr';
if (environment.production) { if (environment.production) {
enableProdMode(); enableProdMode();
...@@ -19,11 +19,11 @@ const bootstrap = () => { ...@@ -19,11 +19,11 @@ const bootstrap = () => {
if (environment.hmr) { if (environment.hmr) {
if (module['hot']) { if (module['hot']) {
console.log("starting with hmr!"); console.log('starting with hmr!');
hmrBootstrap(module, bootstrap); hmrBootstrap(module, bootstrap);
} else { } else {
console.error('HMR is not enabled for webpack-dev-server!'); 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 { } else {
bootstrap(); bootstrap();
......
...@@ -3,7 +3,13 @@ ...@@ -3,7 +3,13 @@
@import url('https://fonts.googleapis.com/css?family=Roboto'); @import url('https://fonts.googleapis.com/css?family=Roboto');
@import '~@angular/material/prebuilt-themes/indigo-pink.css'; @import '~@angular/material/prebuilt-themes/indigo-pink.css';
body { body {
background-color: #f2f3f9; background-color: #f2f3f9;
}
html, body {
height: 100%;
} }
...@@ -89,8 +89,8 @@ ...@@ -89,8 +89,8 @@
"check-type" "check-type"
], ],
"directive-selector": [true, "attribute", "app", "camelCase"], "directive-selector": [true, "attribute", "", "camelCase"],
"component-selector": [true, "element", "app", "kebab-case"], "component-selector": [true, "element", "", "kebab-case"],
"use-input-property-decorator": true, "use-input-property-decorator": true,
"use-output-property-decorator": true, "use-output-property-decorator": true,
"use-host-property-decorator": true, "use-host-property-decorator": true,
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!