Skip to content

Commit 8416a91

Browse files
weihomechenweihomechen
committed
项目更新
1 parent 22200a2 commit 8416a91

File tree

87 files changed

+20770
-38
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

87 files changed

+20770
-38
lines changed

‎.angular-cli.json‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,9 +19,14 @@
1919
"testTsconfig": "tsconfig.spec.json",
2020
"prefix": "app",
2121
"styles": [
22-
"styles.css"
22+
"styles.css",
23+
"./src/assets/global/plugins/datatables/css/datatables.material.min.css"
24+
],
25+
"scripts": [
26+
"node_modules/jquery/dist/jquery.min.js",
27+
"./src/assets/global/plugins/datatables/js/jquery.datatables.js",
28+
"./src/assets/global/plugins/datatables/js/datatables.material.js"
2329
],
24-
"scripts": [],
2530
"environmentSource": "environments/environment.ts",
2631
"environments": {
2732
"dev": "environments/environment.ts",

‎package.json‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
},
1313
"private": true,
1414
"dependencies": {
15+
"@angular-mdl/core": "^4.0.3",
1516
"@angular/common": "^4.0.0",
1617
"@angular/compiler": "^4.0.0",
1718
"@angular/core": "^4.0.0",
@@ -22,8 +23,9 @@
2223
"@angular/platform-browser-dynamic": "^4.0.0",
2324
"@angular/router": "^4.0.0",
2425
"@types/hammerjs": "^2.0.34",
26+
"@types/jquery": "^2.0.45",
2527
"core-js": "^2.4.1",
26-
"@angular-mdl/core": "^4.0.3",
28+
"jquery": "^3.2.1",
2729
"material-design-icons": "^3.0.1",
2830
"material-design-lite": "^1.3.0",
2931
"rxjs": "^5.1.0",
@@ -40,9 +42,9 @@
4042
"karma": "~1.4.1",
4143
"karma-chrome-launcher": "~2.1.1",
4244
"karma-cli": "~1.0.1",
45+
"karma-coverage-istanbul-reporter": "^0.2.0",
4346
"karma-jasmine": "~1.1.0",
4447
"karma-jasmine-html-reporter": "^0.2.2",
45-
"karma-coverage-istanbul-reporter": "^0.2.0",
4648
"protractor": "~5.1.0",
4749
"ts-node": "~2.0.0",
4850
"tslint": "~4.5.0",

‎src/app/app.routing.ts‎

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import { Demo3Component } from './demo/demo3/demo3.component';
1010
const appRoutes: Routes = [
1111
{
1212
path: '',
13-
redirectTo: '/home',
13+
redirectTo: '/demo',
1414
pathMatch: 'full'
1515
},
1616
{ path: 'demo1', component: Demo1Component },
@@ -26,28 +26,29 @@ export class CustomReuseStrategy implements RouteReuseStrategy {
2626

2727
handlers: { [key: string]: DetachedRouteHandle } = {};
2828

29+
// 决定是否将当前的路由进行分离并暂存
2930
shouldDetach(route: ActivatedRouteSnapshot): boolean {
3031
console.log('CustomReuseStrategy:shouldDetach', route);
3132
return true;
3233
}
33-
34+
// 存储分离出的路由
3435
store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle): void {
3536
console.log('CustomReuseStrategy:store', route, handle);
3637
this.handlers[route.routeConfig.path] = handle;
3738
}
38-
39+
// 决定当前的路由是否还原
3940
shouldAttach(route: ActivatedRouteSnapshot): boolean {
4041
console.log('CustomReuseStrategy:shouldAttach', route);
4142
return !!route.routeConfig && !!this.handlers[route.routeConfig.path];
4243
}
43-
44+
// 取得之前暂存的路由
4445
retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle {
4546
console.log('CustomReuseStrategy:retrieve', route);
46-
return this.handlers[route.routeConfig.path];//从暂存处取回
47+
return this.handlers[route.routeConfig.path]; // 从暂存处取回
4748
}
48-
49+
// 决定是否重用路由
4950
shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
50-
//在此处可以取得跳转前和跳转后的路由路径
51+
// 在此处可以取得跳转前和跳转后的路由路径
5152
console.log('CustomReuseStrategy:shouldReuseRoute', future, curr);
5253
return future.routeConfig === curr.routeConfig;
5354
}

‎src/app/demo/demo1/demo1.component.html‎

Lines changed: 32 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,32 @@
1-
<p>
2-
demo1 works!
3-
</p>
4-
<mdl-textfield type="text" [(ngModel)]="theText" icon="search"></mdl-textfield>
1+
<div class="portlet display-list-container">
2+
<div class="portlet-header display-list-header">
3+
<div class="table-toolbar">
4+
<div class="toolbar-btns">
5+
<button mdl-button mdl-button-type="raised" mdl-ripple class="btn-add"><i class="fa fa-plus"></i></button>
6+
<button mdl-button mdl-button-type="raised" mdl-ripple class="btn-info"><i class="fa fa-info"></i></button>
7+
<button mdl-button mdl-button-type="raised" mdl-ripple class="btn-edit"><i class="fa fa-edit"></i></button>
8+
<button mdl-button mdl-button-type="raised" mdl-ripple class="btn-del"><i class="fa fa-minus"></i></button>
9+
</div>
10+
11+
<div class="toolbar-search">
12+
<mdl-textfield type="text" label="姓名" [(ngModel)]="text1" autocomplete="name" (blur)="onInputBlur($event)" (focus)="onInputFocus($event)"
13+
(keyup)="onInputKeyup($event)" floating-label></mdl-textfield>
14+
<mdl-textfield type="text" label="姓名" [(ngModel)]="text2" autocomplete="name" (blur)="onInputBlur($event)" (focus)="onInputFocus($event)"
15+
(keyup)="onInputKeyup($event)" floating-label></mdl-textfield>
16+
<mdl-textfield type="text" label="姓名" [(ngModel)]="text3" autocomplete="name" (blur)="onInputBlur($event)" (focus)="onInputFocus($event)"
17+
(keyup)="onInputKeyup($event)" floating-label></mdl-textfield>
18+
<button mdl-button mdl-button-type="fab" class="btn-search">
19+
<i class="fa fa-search"></i>
20+
</button>
21+
<button mdl-button mdl-button-type="fab" class="btn-reset">
22+
<i class="fa fa-refresh"></i>
23+
</button>
24+
</div>
25+
</div>
26+
</div>
27+
<div class="portlet-body display-list-body">
28+
<!--<mdl-table-selectable mdl-shadow="2" [table-model]="tableModel" [table-model-selected]="selected" (table-model-selectionChanged)="selectionChanged($event)">
29+
</mdl-table-selectable>-->
30+
<table id="demo_table"></table>
31+
</div>
32+
</div>

‎src/app/demo/demo1/demo1.component.ts‎

Lines changed: 59 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,73 @@
11
import { Component, OnInit } from '@angular/core';
22

3+
import { MdlDefaultTableModel, IMdlTableModelItem } from '@angular-mdl/core';
4+
5+
declare var $: JQueryStatic;
6+
7+
export interface ITableItem extends IMdlTableModelItem {
8+
name: string;
9+
sex: string;
10+
team: string;
11+
account: string;
12+
role: string;
13+
position: string;
14+
}
15+
316
@Component({
417
selector: 'app-demo1',
518
templateUrl: './demo1.component.html',
619
styleUrls: ['./demo1.component.css']
720
})
821
export class Demo1Component implements OnInit {
922

10-
constructor() { }
23+
tableData: [ITableItem] = [
24+
{ name: '叶秋', sex: '男', team: '兴欣', account: '君莫笑', role: '散人', position: '队长', selected: true },
25+
{ name: '苏沐橙', sex: '女', team: '兴欣', account: '风梳烟沐', role: '枪炮师', position: '队员', selected: false },
26+
{ name: '方锐', sex: '男', team: '兴欣', account: '海无量', role: '气功师', position: '队员', selected: false }
27+
];
1128

29+
selected: Array<ITableItem> = new Array<ITableItem>();
30+
31+
public tableModel = new MdlDefaultTableModel([
32+
{ key: 'name', name: '姓名', sortable: true },
33+
{ key: 'sex', name: '性别', sortable: true },
34+
{ key: 'team', name: '队伍', sortable: true },
35+
{ key: 'account', name: '账号', sortable: true },
36+
{ key: 'role', name: '角色', sortable: true },
37+
{ key: 'position', name: '职位', sortable: true },
38+
]);
39+
text1: string;
40+
text2: string;
41+
text3: string;
42+
43+
constructor() { }
1244
ngOnInit() {
45+
this.tableModel.addAll(this.tableData);
46+
this.selected = this.tableData.filter(data => data.selected);
47+
}
48+
49+
initTable() {
50+
$('#example').DataTable({
51+
columnDefs: [
52+
{
53+
targets: [0, 1, 2],
54+
className: 'mdl-data-table__cell--non-numeric'
55+
}
56+
]
57+
});
58+
}
59+
60+
selectionChanged($event) {
61+
this.selected = $event.value;
1362
}
1463

64+
onInputBlur(event) {
65+
66+
}
67+
68+
onInputFocus(event) {
69+
}
70+
71+
onInputKeyup(event) { }
72+
1573
}

‎src/app/layout/header/tab/tab.component.css‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,9 @@
1616
.md2-tabs-canvas { position: relative; height: 100%; /*overflow: hidden;*/ display: block; outline: none; }
1717
.md2-tabs-canvas.md2-paginated { margin: 0 32px; }
1818
.md2-tabs-header { position: relative; display: inline-block; height: 100%; white-space: nowrap; -moz-transition: 0.5s cubic-bezier(0.35,0,0.25,1); -o-transition: 0.5s cubic-bezier(0.35,0,0.25,1); -webkit-transition: 0.5s cubic-bezier(0.35,0,0.25,1); transition: 0.5s cubic-bezier(0.35,0,0.25,1); }
19-
.md2-tab-label { position: relative; height: 100%; color: rgba(0,0,0,0.54); font-size: 14px; text-align: center; line-height: 24px; border-radius: 5px 5px 0 0 ; padding: 4px 20px; -moz-transition: background-color .35s cubic-bezier(.35,0,.25,1); -o-transition: background-color .35s cubic-bezier(.35,0,.25,1); -webkit-transition: background-color .35s cubic-bezier(.35,0,.25,1); transition: background-color .35s cubic-bezier(.35,0,.25,1); cursor: pointer; white-space: nowrap; text-transform: uppercase; display: inline-block; font-weight: 500; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; overflow: hidden; -ms-text-overflow: ellipsis; -o-text-overflow: ellipsis; text-overflow: ellipsis; }
19+
.md2-tab-label { position: relative; height: 100%; color: #fff!important; font-size: 14px; text-align: center; line-height: 30px; border-radius: 5px 5px 0 0 ; padding: 4px 20px; -moz-transition: background-color .35s cubic-bezier(.35,0,.25,1); -o-transition: background-color .35s cubic-bezier(.35,0,.25,1); -webkit-transition: background-color .35s cubic-bezier(.35,0,.25,1); transition: background-color .35s cubic-bezier(.35,0,.25,1); cursor: pointer; white-space: nowrap; text-transform: uppercase; display: inline-block; font-weight: 500; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; overflow: hidden; -ms-text-overflow: ellipsis; -o-text-overflow: ellipsis; text-overflow: ellipsis; }
2020
.md2-tab-label.active { background-color: #fff; }
21+
.md2-tab-label.active a { color: #000; }
2122
.md2-tab-label a { font-size:16px; vertical-align: super;}
2223
.md2-tabs-canvas:focus .md2-tab-label.focus { background: rgba(0,0,0,0.05); }
2324
.md2-tab-label.disabled { color: rgba(0,0,0,0.26); pointer-events: none; -webkit-user-select: none; -moz-user-select: none;
@@ -27,6 +28,7 @@
2728
md2-tab { padding: 16px; display: none; position: relative; }
2829
md2-tab.active { display: block; position: relative;}
2930
.white {color:#fff;}
30-
#tab_manage_btn {vertical-align: top;min-width:40px;}
31+
#tab_manage_btn {vertical-align: top;min-width:40px;margin-left: -4px;}
3132
#tab_manage_btn .fa-lg {vertical-align: initial;}
33+
.md2-tabs-header .mdl-button {padding: 0 10px;}
3234

‎src/app/layout/header/tab/tabs.ts‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -197,7 +197,7 @@ export class Md2Tabs implements OnInit, AfterContentInit {
197197
closeNow() {
198198
const index = this.tabControlServiceModal.activeTab;
199199
if (index === 0) {
200-
return
200+
return;
201201
}
202202
this.tabControlServiceModal.tabs.splice(index, 1);
203203
this.tabControlServiceModal.activeTab = index - 1;
@@ -232,7 +232,6 @@ export class Md2Tabs implements OnInit, AfterContentInit {
232232
_updateInkBar(activeIndex?: number): void {
233233
const elements = this.element;
234234
if (!elements.tabs[this.tabControlServiceModal.activeTab]) { return; }
235-
debugger
236235
const index = activeIndex || this.tabControlServiceModal.activeTab;
237236
const tab = elements.tabs[index];
238237
this.inkBarLeft = tab.offsetLeft + 'px';

‎src/app/layout/nav/nav.component.css‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -15,13 +15,17 @@ ul {
1515
a,a:visited {
1616
transition: color 0s;
1717
}
18+
.mdl-layout__drawer .mdl-navigation .top-menu-link{
19+
padding: 12px 10px;
20+
font-size: 15px;
21+
}
1822

19-
.mdl-navigation__link .material-icons {
20-
vertical-align: bottom;
23+
.mdl-layout__drawer .mdl-navigation .second-menu-link {
24+
padding: 10px 10px;
2125
}
2226

23-
.mdl-layout__drawer .mdl-navigation__link .second-menu-link {
24-
padding: 12px 10px;
27+
.mdl-navigation__link .material-icons {
28+
vertical-align: bottom;
2529
}
2630

2731
.has-sub {
@@ -34,7 +38,6 @@ a,a:visited {
3438
height: auto;
3539
min-height:100%;
3640
max-height: none;
37-
/*top:50px;*/
3841
z-index: 5;
3942
}
4043

@@ -51,17 +54,14 @@ a,a:visited {
5154
.mdl-layout__drawer .mdl-navigation .mdl-navigation__link:hover {
5255
background-color:darkcyan;
5356
color: #fff;
57+
text-decoration: none;
5458
}
5559

5660

57-
.mdl-layout__drawer .mdl-navigation .third-menu-link:hover:hover {
61+
.mdl-layout__drawer .mdl-navigation .third-menu-link:hover {
5862
color: rgb(255,255,255);
5963
background-color:rgb(28,175,154);
60-
}
61-
62-
.top-menu-link {
63-
height: 20px;
64-
line-height: 20px;
64+
text-decoration: none;
6565
}
6666

6767
.top-menu-item a i {
@@ -89,7 +89,7 @@ a,a:visited {
8989

9090
.mdl-layout__drawer .mdl-navigation .third-menu-link {
9191
width: 200px;
92-
padding: 14px 0px;
92+
padding: 6px 0px;
9393
background-color: #fff;
9494
opacity: 1;
9595
}

‎src/app/layout/nav/nav.component.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@
33
<ul class="mdl-navigation">
44
<li *ngFor="let menu of menus" class="top-menu-item">
55
<a [routerLink]="menu.link" routerLinkActive="active" class="mdl-navigation__link top-menu-link" (click)="openTopMenuTab(menu,secondNav,expandIcon)">
6-
<i class="material-icons ">{{menu.icon}}</i>{{menu.name}}
7-
<i class="material-icons isexpand" #expandIcon>keyboard_arrow_left</i></a>
6+
<i class="material-icons">{{menu.icon}}</i>{{menu.name}}
7+
<i class="material-icons isexpand" [hidden]="!menu.submenu" #expandIcon>keyboard_arrow_left</i></a>
88
<ul class="mdl-navigation second-nav" [hidden]="ishidden" #secondNav>
99
<li *ngFor="let secondMenu of menu.submenu" (mouseover)="thirdMenuToggle(secondNav,thirdNav)" (mouseout)="thirdMenuToggle(secondNav,thirdNav)"
1010
class="secMenuItme" #secMenu>

‎src/assets/global/img/accordion-plusminus.png‎

162 Bytes

0 commit comments

Comments
 (0)