Skip to content
This repository was archived by the owner on Sep 7, 2021. It is now read-only.

Commit 9b67856

Browse files
author
booleanhunter
committed
Header bar updates
Header bar components such as messages, notifications and tasks have been containerized. Messages, notifications and tasks are standalone components, which makes it easier to add or remove them
1 parent 2548466 commit 9b67856

49 files changed

Lines changed: 1815 additions & 683 deletions

File tree

Some content is hidden

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

‎reactjs-adminlte/public/dist/js/buttons.bundle.js‎

Lines changed: 3 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎reactjs-adminlte/public/dist/js/dashboardV1.bundle.js‎

Lines changed: 6 additions & 6 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎reactjs-adminlte/public/dist/js/generalUIElements.bundle.js‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎reactjs-adminlte/public/dist/js/timeline.bundle.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎reactjs-adminlte/public/dist/js/vendors.js‎

Lines changed: 10 additions & 10 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎reactjs-adminlte/public/dist/js/widgets.bundle.js‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎reactjs-adminlte/public/src/buttons/js/components/header-bar/header-bar.js‎

Lines changed: 6 additions & 96 deletions
Original file line numberDiff line numberDiff line change
@@ -2,19 +2,12 @@ define(
22
[
33
'react',
44
'jquery',
5-
'./header-messages',
6-
'./header-notifications',
7-
'./header-tasks'
5+
'./header-messages/header-messages',
6+
'./header-notifications/header-notifications',
7+
'./header-tasks/header-tasks'
88
],
99
function (React, $, HeaderMessages, HeaderNotifications, HeaderTasks) {
1010
var HeaderBar = React.createClass({
11-
getInitialState: function () {
12-
return {
13-
messages: [],
14-
notifications: [],
15-
tasks: []
16-
}
17-
},
1811
pushMenu: function () {
1912
var body = document.body;
2013
if(body.clientWidth > 768){
@@ -31,71 +24,6 @@ define(
3124
}
3225
}
3326
},
34-
componentDidMount: function () {
35-
var messages = [{
36-
displayName: 'Support Team',
37-
displayPicture: 'dist/img/user2-160x160.jpg',
38-
messageSubject: 'Why not buy a new awesome theme?',
39-
messageTime: '5 mins',
40-
}, {
41-
displayName: 'AdminLTE Design Team',
42-
displayPicture: 'dist/img/user3-128x128.jpg',
43-
messageSubject: 'Why not buy a new awesome theme?',
44-
messageTime: '2 hours',
45-
}, {
46-
displayName: 'Developers',
47-
displayPicture: 'dist/img/user4-128x128.jpg',
48-
messageSubject: 'Why not buy a new awesome theme?',
49-
messageTime: 'Today',
50-
}, {
51-
displayName: 'Sales Department',
52-
displayPicture: 'dist/img/user3-128x128.jpg',
53-
messageSubject: 'Why not buy a new awesome theme?',
54-
messageTime: 'Yesterday',
55-
}, {
56-
displayName: 'Reviewers',
57-
displayPicture: 'dist/img/user4-128x128.jpg',
58-
messageSubject: 'Why not buy a new awesome theme?',
59-
messageTime: '2 days',
60-
}];
61-
62-
var notifications = [{
63-
subject: '5 new members joined today',
64-
className: 'fa fa-users text-aqua'
65-
}, {
66-
subject: 'Very long description here that may not fit into the page and may cause design problems',
67-
className: 'fa fa-warning text-yellow'
68-
}, {
69-
subject: '5 new members joined',
70-
className: 'fa fa-users text-red'
71-
}, {
72-
subject: '25 sales made',
73-
className: 'fa fa-shopping-cart text-green'
74-
}, {
75-
subject: 'You changed your username',
76-
className: 'fa fa-user text-red'
77-
}];
78-
79-
var tasks = [{
80-
subject: 'Design some buttons',
81-
percentage: 20
82-
}, {
83-
subject: 'Create a nice theme',
84-
percentage: 40
85-
}, {
86-
subject: 'Some task I need to do',
87-
percentage: 60
88-
}, {
89-
subject: 'Make beautiful transitions',
90-
percentage: 80
91-
}];
92-
93-
this.setState({
94-
messages: messages,
95-
notifications: notifications,
96-
tasks: tasks
97-
});
98-
},
9927
render: function () {
10028
var that = this;
10129
return (
@@ -116,29 +44,11 @@ define(
11644
<div className="navbar-custom-menu">
11745
<ul className="nav navbar-nav">
11846
{/* Messages: style can be found in dropdown.less*/}
119-
<li className="dropdown messages-menu">
120-
<a href="#" className="dropdown-toggle" data-toggle="dropdown">
121-
<i className="fa fa-envelope-o"></i>
122-
<span className="label label-success">{that.state.messages.length}</span>
123-
</a>
124-
<HeaderMessages messages={that.state.messages} />
125-
</li>
47+
<HeaderMessages />
12648
{/* Notifications: style can be found in dropdown.less */}
127-
<li className="dropdown notifications-menu">
128-
<a href="#" className="dropdown-toggle" data-toggle="dropdown">
129-
<i className="fa fa-bell-o"></i>
130-
<span className="label label-warning">{that.state.notifications.length}</span>
131-
</a>
132-
<HeaderNotifications notifications={that.state.notifications} />
133-
</li>
49+
<HeaderNotifications />
13450
{/* Tasks: style can be found in dropdown.less */}
135-
<li className="dropdown tasks-menu">
136-
<a href="#" className="dropdown-toggle" data-toggle="dropdown">
137-
<i className="fa fa-flag-o"></i>
138-
<span className="label label-danger">{that.state.notifications.length}</span>
139-
</a>
140-
<HeaderTasks tasks={that.state.tasks} />
141-
</li>
51+
<HeaderTasks />
14252
{/* User Account: style can be found in dropdown.less */}
14353
<li className="dropdown user user-menu">
14454
<a href="#" className="dropdown-toggle" data-toggle="dropdown">

‎reactjs-adminlte/public/src/buttons/js/components/header-bar/header-messages/header-messages.js‎

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
define(
2+
[
3+
'react',
4+
'./message-item'
5+
],
6+
function (React, MessageItem) {
7+
var HeaderMessages = React.createClass({
8+
getInitialState: function () {
9+
return {
10+
messages: []
11+
}
12+
},
13+
componentDidMount: function(){
14+
var messages = [{
15+
title: 'Support Team',
16+
displayPicture: 'dist/img/user2-160x160.jpg',
17+
content: 'Why not buy a new awesome theme?',
18+
time: '5 mins',
19+
}, {
20+
title: 'AdminLTE Design Team',
21+
displayPicture: 'dist/img/user3-128x128.jpg',
22+
content: 'Why not buy a new awesome theme?',
23+
time: '2 hours',
24+
}, {
25+
title: 'Developers',
26+
displayPicture: 'dist/img/user4-128x128.jpg',
27+
content: 'Why not buy a new awesome theme?',
28+
time: 'Today',
29+
}, {
30+
title: 'Sales Department',
31+
displayPicture: 'dist/img/user3-128x128.jpg',
32+
content: 'Why not buy a new awesome theme?',
33+
time: 'Yesterday',
34+
}, {
35+
title: 'Reviewers',
36+
displayPicture: 'dist/img/user4-128x128.jpg',
37+
content: 'Why not buy a new awesome theme?',
38+
time: '2 days',
39+
}];
40+
41+
this.setState({
42+
messages: messages
43+
});
44+
},
45+
render: function () {
46+
var that = this;
47+
48+
var messageList = this.state.messages.map(function (messageDetails, iterator) {
49+
return (
50+
<MessageItem
51+
key={iterator}
52+
title={messageDetails.title}
53+
displayPicture={messageDetails.displayPicture}
54+
time={messageDetails.time}
55+
content={messageDetails.content} />
56+
)
57+
});
58+
59+
return (
60+
<li className="dropdown messages-menu">
61+
<a href="#" className="dropdown-toggle" data-toggle="dropdown">
62+
<i className="fa fa-envelope-o"></i>
63+
<span className="label label-success">{that.state.messages.length}</span>
64+
</a>
65+
<ul className="dropdown-menu">
66+
<li className="header">You have {this.state.messages.length} messages</li>
67+
<li>
68+
{/* inner menu: contains the actual data */}
69+
<div className="slimScrollDiv" >
70+
71+
<ul className="menu" >
72+
{messageList}
73+
</ul>
74+
75+
<div className="slimScrollBar"></div>
76+
<div className="slimScrollRail"></div>
77+
</div>
78+
</li>
79+
<li className="footer"><a href="#">See All Messages</a></li>
80+
</ul>
81+
</li>
82+
83+
)
84+
}
85+
});
86+
87+
return HeaderMessages;
88+
}
89+
)

‎reactjs-adminlte/public/src/buttons/js/components/header-bar/header-messages/message-item.js‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
define(
2+
[
3+
'react',
4+
],
5+
function (React) {
6+
var MessageItem = React.createClass({
7+
8+
render: function () {
9+
10+
return (
11+
<li>
12+
{/* start message */}
13+
<a href="#">
14+
<div className="pull-left">
15+
<img src={this.props.displayPicture} className="img-circle" alt="User Image" />
16+
</div>
17+
<h4>
18+
{this.props.title}
19+
<small><i className="fa fa-clock-o"></i> {this.props.time}</small>
20+
</h4>
21+
<p>{this.props.content}</p>
22+
</a>
23+
</li>
24+
)
25+
}
26+
});
27+
28+
return MessageItem;
29+
}
30+
)

‎reactjs-adminlte/public/src/buttons/js/components/header-bar/header-notifications/header-notifications.js‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
define(
2+
[
3+
'react',
4+
'./notification-item'
5+
],
6+
function (React, NotificationItem) {
7+
var HeaderNotifications = React.createClass({
8+
getInitialState: function () {
9+
return {
10+
notifications: []
11+
}
12+
},
13+
componentDidMount: function(){
14+
var notifications = [{
15+
content: '5 new members joined today',
16+
theme: 'fa fa-users text-aqua'
17+
}, {
18+
content: 'Very long description here that may not fit into the page and may cause design problems',
19+
theme: 'fa fa-warning text-yellow'
20+
}, {
21+
content: '5 new members joined',
22+
theme: 'fa fa-users text-red'
23+
}, {
24+
content: '25 sales made',
25+
theme: 'fa fa-shopping-cart text-green'
26+
}, {
27+
content: 'You changed your username',
28+
className: 'fa fa-user text-red'
29+
}];
30+
31+
this.setState({
32+
notifications: notifications
33+
});
34+
},
35+
render: function () {
36+
var that = this;
37+
38+
var notificationList = this.state.notifications.map(function (notificationDetails, iterator) {
39+
return (
40+
<NotificationItem
41+
key={iterator}
42+
theme={notificationDetails.theme}
43+
content={notificationDetails.content} />
44+
)
45+
});
46+
47+
return (
48+
<li className="dropdown notifications-menu">
49+
<a href="#" className="dropdown-toggle" data-toggle="dropdown">
50+
<i className="fa fa-bell-o"></i>
51+
<span className="label label-warning">{that.state.notifications.length}</span>
52+
</a>
53+
54+
<ul className="dropdown-menu">
55+
<li className="header">You have {this.state.notifications.length} notifications</li>
56+
<li>
57+
{/* inner menu: contains the actual data */}
58+
<div className="slimScrollDiv">
59+
60+
<ul className="menu">
61+
{notificationList}
62+
</ul>
63+
64+
<div className="slimScrollBar"></div>
65+
<div className="slimScrollRail"></div>
66+
</div>
67+
</li>
68+
<li className="footer"><a href="#">View all</a></li>
69+
</ul>
70+
</li>
71+
)
72+
}
73+
});
74+
75+
return HeaderNotifications;
76+
}
77+
)

0 commit comments

Comments
 (0)