Skip to content

Commit c4b482f

Browse files
hjzhenghjzheng
committed
add headerbar and update karma and webpack build
1 parent bc0e5f4 commit c4b482f

26 files changed

+368
-24
lines changed

‎README.md

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,17 @@
1-
# angular-rdash-webpack
1+
# angular-rdash-webpack
2+
3+
#### 使用方法
4+
5+
- npm install
6+
- npm start
7+
- 访问 http://localhost:3000/login.html
8+
- 用户名/密码 hjzheng/hjzheng
9+
10+
11+
#### 其他
12+
- 运行测试 `npm test`
13+
- 运行build `npm run build`
14+
15+
#### TODO
16+
17+
- 添加后端代理, 目前是自己使用express mock的假数据

‎karma.conf.js

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,19 @@ module.exports = function(config) {
4747
{
4848
test: /\.woff|\.woff2|\.svg|.eot|\.ttf/,
4949
loader: 'url?prefix=font/&limit=10000'
50+
},
51+
{
52+
test: /\.scss$/,
53+
loaders: ['style', 'css', 'sass?sourceMap'],
54+
exclude: /node_modules/,
55+
include: __dirname + '/src'
56+
},
57+
{
58+
test: /\.tpl\.html|\.partial\.html$/,
59+
loader: 'html',
60+
query: {interpolate: true},
61+
exclude: /node_modules/,
62+
include: __dirname + '/src'
5063
}
5164
]
5265
},

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,7 @@
5959
"dependencies": {
6060
"angular": "^1.5.5",
6161
"angular-resource": "^1.5.5",
62+
"angular-ui-bootstrap": "^1.3.3",
6263
"angular-ui-router": "^0.3.0",
6364
"bootstrap": "^3.3.6"
6465
}

‎src/app/dashboard/dashboard.router.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,8 @@ function router($stateProvider, $urlRouterProvider) {
1010
.state('dashboard', {
1111
url: '/dashboard',
1212
template: template,
13-
label: "Dashboard",
14-
icon: "fa-tachometer"
13+
label: 'Dashboard',
14+
icon: 'glyphicon-dashboard'
1515
});
1616

1717
$urlRouterProvider.otherwise('/dashboard');

‎src/app/dashboard/index.js

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@
22
* @Author: hjzheng
33
* @Date: 16/5/23
44
*/
5-
65
import angular from 'angular';
76
import router from './dashboard.router';
87

‎src/app/example/example.router.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,8 @@ function router($stateProvider) {
1010
.state('example', {
1111
url: '/example',
1212
template: template,
13-
label: "Example",
14-
icon: "fa-tachometer"
13+
label: 'Example',
14+
icon: 'glyphicon-tint'
1515
});
1616
}
1717

‎src/app/example/index.js

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@
22
* @Author: hjzheng
33
* @Date: 16/5/23
44
*/
5-
65
import angular from 'angular';
76
import router from './example.router';
87

‎src/app/login/LoginCtrl.js

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
*/
55
import inject from '../utils/inject';
66
import './login.scss';
7+
import sessionstorage from '../utils/sessionstorage';
78

89
@inject('$http')
910
export default class LoginCtrl {
@@ -15,12 +16,13 @@ export default class LoginCtrl {
1516
password: ''
1617
};
1718
this.msg = '';
18-
}
19+
}
1920

2021
login() {
2122
this.$http.post('/login', this.user)
2223
.then(res => {
2324
if (res.data.success) {
25+
sessionstorage.set('username', this.user.username);
2426
location.href = '/';
2527
} else {
2628
this.msg = res.data.msg;

‎src/app/login/login.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import '../../../node_modules/bootstrap/dist/css/bootstrap.css';
22

33
import angular from '../../../node_modules/angular';
44
import ngResource from '../../../node_modules/angular-resource';
5-
import LoginCtrl from './LoginCtrl';
5+
import LoginCtrl from './LoginCtrl';
66

77
angular.module('rdashLogin', [ngResource])
88
.controller('LoginCtrl', LoginCtrl).name;

‎src/app/main/MainCtrl.js

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
* @Date: 16/5/23
44
*/
55
import inject from '../utils/inject';
6+
import sessionstorage from '../utils/sessionstorage';
67

78
@inject('$state', '$rootScope')
89
export default class MainCtrl {
@@ -12,19 +13,20 @@ export default class MainCtrl {
1213
this.navigation = {
1314
title: $state.current.label,
1415
links: this.getNavigation($state)
15-
};
16-
this.init($rootScope)
17-
}
16+
};
17+
this.username = sessionstorage.get('username');
18+
this.init($rootScope);
19+
}
1820

19-
getNavigation ($state) {
21+
getNavigation($state) {
2022
return $state.get();
2123
}
2224

23-
init ($rootScope){
25+
init($rootScope) {
2426
var $stateChangeStartCallback = $rootScope.$on('$stateChangeStart', (event, toState) => {
2527
this.navigation.title = toState.label;
2628
});
2729

28-
$rootScope.$on("$destroy", $stateChangeStartCallback);
30+
$rootScope.$on('$destroy', $stateChangeStartCallback);
2931
}
3032
}

‎src/app/main/body/Body.js

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
/**
2+
* @Author: hjzheng
3+
* @Date: 16/5/23
4+
*/
5+
import template from './body.tpl.html';
6+
import './body.scss';
7+
8+
export default class Body {
9+
10+
constructor() {
11+
this.template = template;
12+
this.transclude = true;
13+
}
14+
}
15+

‎src/app/main/body/body.scss

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
.content-wrapper {
2+
padding-left: 0;
3+
margin-left: 70px;
4+
height: auto;
5+
}

‎src/app/main/body/body.tpl.html

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
<div class="content-wrapper" ng-transclude>
2+
</div>

‎src/app/main/headerbar/Headerbar.js

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
/**
2+
* @Author: hjzheng
3+
* @Date: 16/5/23
4+
*/
5+
import template from './headerbar.tpl.html';
6+
import './headerbar.scss';
7+
import sessionstorage from '../../utils/sessionstorage';
8+
9+
export default class Headerbar {
10+
11+
constructor() {
12+
this.template = template;
13+
this.bindings = {
14+
username: '@',
15+
config: '='
16+
};
17+
this.controller = function() {
18+
this.logout = () => {
19+
sessionstorage.set('username', null);
20+
location.href = 'login.html';
21+
};
22+
};
23+
}
24+
}

‎src/app/main/headerbar/headerbar.scss

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
.header {
2+
height: 60px;
3+
background: #fff;
4+
padding: 0 10px;
5+
margin-bottom: 10px;
6+
background: #EFEFEF;
7+
}
8+
9+
.header .meta .page {
10+
font-size: 17px;
11+
padding-top: 11px;
12+
}
13+
14+
.header .meta .breadcrumb-links {
15+
font-size: 10px;
16+
}
17+
18+
.header .meta div {
19+
white-space: nowrap;
20+
overflow: hidden;
21+
text-overflow: ellipsis;
22+
}
23+
24+
.header .login a {
25+
padding: 18px;
26+
display: block;
27+
}
28+
29+
.header .user {
30+
min-width: 130px;
31+
line-height: 55px;
32+
font-size: 18px;
33+
}
34+
35+
.header .user > .item {
36+
width: 65px;
37+
height: 60px;
38+
float: right;
39+
display: inline-block;
40+
text-align: center;
41+
vertical-align: middle;
42+
}
43+
44+
.header .user > .item a {
45+
color: #919191;
46+
display: block;
47+
}
48+
49+
.header .user > .item i {
50+
font-size: 20px;
51+
line-height: 55px;
52+
}
53+
54+
.header .user > .item img {
55+
width: 40px;
56+
height: 40px;
57+
margin-top: 10px;
58+
border-radius: 2px;
59+
}
60+
61+
.header .user > .item ul.dropdown-menu {
62+
border-radius: 2px;
63+
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.05);
64+
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.05);
65+
}
66+
67+
.header .user > .item ul.dropdown-menu .dropdown-header {
68+
text-align: center;
69+
}
70+
71+
.header .user > .item ul.dropdown-menu li.link {
72+
text-align: left;
73+
}
74+
75+
.header .user > .item ul.dropdown-menu li.link a {
76+
padding-left: 7px;
77+
padding-right: 7px;
78+
}
79+
80+
.header .user > .item ul.dropdown-menu:before {
81+
position: absolute;
82+
top: -7px;
83+
right: 23px;
84+
display: inline-block;
85+
border-right: 7px solid transparent;
86+
border-bottom: 7px solid rgba(0, 0, 0, 0.2);
87+
border-left: 7px solid transparent;
88+
content: '';
89+
}
90+
91+
.header .user > .item ul.dropdown-menu:after {
92+
position: absolute;
93+
top: -6px;
94+
right: 24px;
95+
display: inline-block;
96+
border-right: 6px solid transparent;
97+
border-bottom: 6px solid #ffffff;
98+
border-left: 6px solid transparent;
99+
content: '';
100+
}

‎src/app/main/headerbar/headerbar.tpl.html

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
<div class="header">
2+
<div class="user pull-right">
3+
<div class="item dropdown" uib-dropdown>
4+
<a href="#" class="dropdown-toggle" uib-dropdown-toggle>
5+
{{$ctrl.username}}
6+
</a>
7+
<ul class="dropdown-menu dropdown-menu-right">
8+
<li class="dropdown-header">
9+
Joe Bloggs
10+
</li>
11+
<li class="divider"></li>
12+
<li class="link">
13+
<a href="#">
14+
Profile
15+
</a>
16+
</li>
17+
<li class="link">
18+
<a href="#">
19+
Menu Item
20+
</a>
21+
</li>
22+
<li class="link">
23+
<a href="#">
24+
Menu Item
25+
</a>
26+
</li>
27+
<li class="divider"></li>
28+
<li class="link" ng-click="$ctrl.logout()">
29+
<a href="#">
30+
Logout
31+
</a>
32+
</li>
33+
</ul>
34+
</div>
35+
<div class="item dropdown" uib-dropdown>
36+
<a href="#" class="dropdown-toggle" uib-dropdown-toggle>
37+
<i class="glyphicon glyphicon-send"></i>
38+
</a>
39+
<ul class="dropdown-menu dropdown-menu-right">
40+
<li class="dropdown-header">
41+
Notifications
42+
</li>
43+
<li class="divider"></li>
44+
<li>
45+
<a href="#">Server Down!</a>
46+
</li>
47+
</ul>
48+
</div>
49+
</div>
50+
<div class="meta">
51+
<div class="page">
52+
{{$ctrl.config.title}}
53+
</div>
54+
<div class="breadcrumb-links">
55+
Home / {{$ctrl.config.title}}
56+
</div>
57+
</div>
58+
</div>

‎src/app/main/index.js

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,17 @@
22
* @Author: hjzheng
33
* @Date: 16/5/23
44
*/
5-
65
import angular from 'angular';
76
import Sidebar from './sidebar/Sidebar';
7+
import Body from './body/Body';
8+
import Headerbar from './headerbar/Headerbar';
89
import MainCtrl from './MainCtrl';
10+
import dropdown from '../../../node_modules/angular-ui-bootstrap/src/dropdown';
911

1012
export default angular
11-
.module('rdashApp.main', [])
13+
.module('rdashApp.main', [dropdown])
1214
.component('rdashSidebar', new Sidebar())
15+
.component('rdashBody', new Body())
16+
.component('rdashHeaderbar', new Headerbar())
1317
.controller('MainCtrl', MainCtrl)
1418
.name;

0 commit comments

Comments
 (0)