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

Commit 3ab1513

Browse files
booleanhunterbooleanhunter
committed
SmallBox component in widgets page is obsolete, replaced it with Box component
1 parent fcbeb29 commit 3ab1513

10 files changed

Lines changed: 118 additions & 42445 deletions

File tree

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

Lines changed: 2 additions & 4448 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: 2 additions & 2766 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: 1 addition & 2179 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 & 1847 deletions
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: 42 additions & 27995 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 & 3161 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎reactjs-adminlte/public/src/widgets/js/components/page-widgets/custom-box/box-tool.js‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -21,15 +21,16 @@ define(
2121
var button = '', that = this;
2222

2323
switch(this.props.toolType){
24-
case 'minimize':
24+
case 'expand':
25+
return (
26+
<button className="btn btn-box-tool" data-widget="expand" onClick={that.toggleCollapse}><i className="fa fa-plus"></i></button>
27+
)
28+
case 'collapse':
2529
return (
2630
<button className="btn btn-box-tool" data-widget="collapse" onClick={that.toggleCollapse}><i className="fa fa-minus"></i></button>
2731
)
28-
case 'maximize':
29-
return (
30-
<button className="btn btn-box-tool" data-widget="expand" onClick={that.toggleCollapse}><i className="fa fa-plus"></i></button>
31-
)
32-
case 'close':
32+
33+
case 'remove':
3334
return (
3435
<button className="btn btn-box-tool" data-widget="remove" onClick={that.removeBox}><i className="fa fa-times"></i></button>
3536
)

‎reactjs-adminlte/public/src/widgets/js/components/page-widgets/custom-box/box.js‎

Lines changed: 36 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -2,38 +2,54 @@ define(
22
[
33
'react',
44
'reactDom',
5-
'./box-tool',
6-
'./box-functions'
75
],
8-
function (React, ReactDOM, BoxTool, boxFunctions) {
6+
function (React, ReactDOM) {
97
var Box = React.createClass({
10-
// getDefaultProps: function() {
11-
// return {
12-
// type: 'expandable',
13-
// theme: 'box-default',
14-
// loading: false,
15-
// border: true,
16-
// title: 'Default title',
17-
// content: 'Default content',
18-
// }
19-
// },
8+
getDefaultProps: function() {
9+
return {
10+
type: 'collapsable',
11+
theme: 'box-default',
12+
loading: false,
13+
border: true,
14+
title: 'Default title',
15+
content: 'Default content',
16+
}
17+
},
2018
render: function() {
21-
var that = this;
22-
var borderClass = "", boxToolsContainer, boxTools = []
19+
var boxType = '', borderClass = '', boxToolsContainer, boxTools = [], loadingState, footer;
20+
2321
if(this.props.border === true){
2422
borderClass = 'box-solid';
2523
}
26-
if(this.props.boxTools !== null){
27-
that.props.boxTools.map(function(tool, index){
24+
console.log(this.props.boxTools)
25+
if(this.props.boxTools){
26+
var BoxTool = require('./box-tool');
27+
28+
this.props.boxTools.map(function(tool, index){
2829
boxTools.push(<BoxTool key={index} toolType={tool} />)
2930
});
3031

3132
boxToolsContainer = <div className="box-tools pull-right">{boxTools}</div>
3233
}
3334

35+
if(this.props.loading === true){
36+
loadingState =
37+
<div className="overlay">
38+
<i className="fa fa-refresh fa-spin"></i>
39+
</div>
40+
}
41+
42+
if(this.props.type === 'collapsed'){
43+
boxType = "collapsed-box"
44+
}
45+
46+
if(this.props.footer){
47+
footer = <div className="box-footer">{this.props.footer}</div>
48+
}
49+
3450
return (
3551
<div className={"col-md-"+this.props.width+" col-sm-6 col-xs-12"}>
36-
<div className={"box "+this.props.theme+" "+borderClass+ " color-palette-box"}>
52+
<div className={"box "+this.props.theme+" "+borderClass+ " color-palette-box "+boxType}>
3753
<div className="box-header with-border">
3854
<h3 className="box-title">{this.props.headerMarkup} {this.props.title}</h3>
3955
{boxToolsContainer}
@@ -43,10 +59,9 @@ define(
4359
{this.props.children}
4460
</div>
4561

46-
<div className="box-footer">
47-
{this.props.footer}
48-
</div>
62+
{footer}
4963
{/* /.box-body */}
64+
{loadingState}
5065
</div>
5166
</div>
5267
)

‎reactjs-adminlte/public/src/widgets/js/components/page-widgets/small-box.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,8 @@ define(
1313
loading: false,
1414
border: true,
1515
title: 'Default title',
16-
content: 'Default content',
16+
content: '',
17+
footer: ''
1718
}
1819
},
1920
toggleCollapse: function(event) {

‎reactjs-adminlte/public/src/widgets/js/components/widgets.js‎

Lines changed: 23 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -125,53 +125,53 @@ define(
125125
}];
126126

127127
var smallBoxOptions = [{
128-
type: 'expandable',
128+
type: 'collapsed',
129129
theme: 'box-default',
130130
title: 'Expandable',
131-
content: 'The body of the box'
131+
content: 'The body of the box',
132+
boxTools: ['expand','remove']
132133
}, {
133-
type: 'collapsable',
134134
theme: 'box-success',
135135
title: 'Collapsable',
136-
content: 'The body of the box'
136+
content: 'The body of the box',
137+
boxTools: ['collapse']
137138
}, {
138-
type: 'removable',
139139
theme: 'box-warning',
140140
title: 'Removable',
141-
content: 'The body of the box'
141+
content: 'The body of the box',
142+
boxTools: ['remove']
142143
}, {
143-
type: 'removable',
144144
theme: 'box-danger',
145145
loading: true,
146146
title: 'Loading state',
147-
content: 'The body of the box'
147+
content: 'The body of the box'
148148
}];
149149

150150
var smallBoxBorderedOptions = [{
151-
type: 'expandable',
151+
type: 'collapsed',
152152
theme: 'box-primary',
153153
border: true,
154154
title: 'Expandable',
155-
content: 'The body of the box'
155+
content: 'The body of the box',
156+
boxTools: ['expand','remove']
156157
}, {
157-
type: 'collapsable',
158158
theme: 'box-warning',
159159
border: true,
160160
title: 'Collapsable',
161-
content: 'The body of the box'
161+
content: 'The body of the box',
162+
boxTools: ['collapse']
162163
}, {
163-
type: 'removable',
164164
theme: 'box-danger',
165165
border: true,
166166
title: 'Removable',
167-
content: 'The body of the box'
167+
content: 'The body of the box',
168+
boxTools: ['remove']
168169
}, {
169-
type: 'removable',
170170
theme: 'box-info',
171171
loading: true,
172172
border: true,
173173
title: 'Loading state',
174-
content: 'The body of the box'
174+
content: 'The body of the box',
175175
}];
176176

177177
var chatBoxOptions = [{
@@ -463,29 +463,31 @@ define(
463463

464464
var smallBoxWidgets = this.state.smallBoxOptions.map(function (options, iterator) {
465465
return (
466-
<SmallBox
466+
<Box
467467
key={"rowFour"+iterator}
468468
width = {3}
469469
border = {false}
470470
content = {options.content}
471471
loading = {options.loading}
472472
theme = {options.theme}
473473
title = {options.title}
474-
type = {options.type} />
474+
type = {options.type}
475+
boxTools = {options.boxTools} />
475476
)
476477
});
477478

478479
var smallBoxBorderedWidgets = this.state.smallBoxBorderedOptions.map(function (options, iterator) {
479480
return (
480-
<SmallBox
481+
<Box
481482
key={"rowFive"+iterator}
482483
width = {3}
483484
border = {options.border}
484485
content = {options.content}
485486
loading = {options.loading}
486487
theme = {options.theme}
487488
title = {options.title}
488-
type = {options.type} />
489+
type = {options.type}
490+
boxTools = {options.boxTools} />
489491
)
490492
});
491493

@@ -623,7 +625,7 @@ define(
623625
width="12"
624626
theme="box-default"
625627
border={false}
626-
boxTools = {['minimize','close']}
628+
boxTools = {['collapse','remove']}
627629
content="Sample Content"
628630
footer="footer"/>
629631
</div>

0 commit comments

Comments
 (0)