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

Commit c7e4293

Browse files
booleanhunterbooleanhunter
committed
Adding color palette, updating LICENSE
1 parent 35875f5 commit c7e4293

9 files changed

Lines changed: 149 additions & 181 deletions

File tree

‎LICENSE‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
Copyright for portions of project ReactJS-AdminLTE are held by almasaeed2010, 2015
22
as part of project AdminLTE. All other copyright for project ReactJS-AdminLTE
3-
are held by ashwin01, 2015.
3+
are held by booleanhunter, 2015-2016.
44

55
The MIT License (MIT)
66

7-
Copyright (c) 2015 ashwin01
7+
Copyright (c) 2015-2016 booleanhunter
88

99
Permission is hereby granted, free of charge, to any person obtaining a copy
1010
of this software and associated documentation files (the "Software"), to deal

‎reactjs-adminlte/public/dist/js/generalUIElements.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: 8 additions & 8 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/ui-elements/general/js/components/page-ui-elements/color-palette-set.js‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
define(
2+
[
3+
'react'
4+
],
5+
function (React) {
6+
var ColorPaletteSet = React.createClass({
7+
render: function(){
8+
return (
9+
<div className={"col-sm-4 col-md-"+this.props.width}>
10+
<h4 className="text-center">{this.props.title}</h4>
11+
12+
<div className="color-palette-set">
13+
<div className={this.props.theme+" disabled color-palette"}><span>Disabled</span></div>
14+
<div className={this.props.theme+" color-palette"}><span>#3c8dbc</span></div>
15+
<div className={this.props.theme+"-active color-palette"}><span>Active</span></div>
16+
</div>
17+
</div>
18+
)
19+
}
20+
});
21+
22+
return ColorPaletteSet;
23+
}
24+
)

‎reactjs-adminlte/public/src/ui-elements/general/js/components/page-ui-elements/custom-box/box-functions.js‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,22 @@ define(
55
'velocity'
66
],
77
function (exports, $, velocity) {
8+
//https://www.debuggex.com/r/Q-7k9g2R6hDLKE7J
9+
exports.findClosestElement = function(element, className){
10+
var regex = new RegExp("(^|\\s)"+className+"(\\s|$)", "gi")
11+
while (!regex.test(element.className)) {
12+
// Increment the loop to the parent node
13+
element = element.parentNode;
14+
if (!element) {
15+
return null;
16+
}
17+
}
18+
// At this point, the while loop has stopped and `element` represents the element that has
19+
// the class you specified in the second parameter of the function `clazz`
20+
21+
// Then return the matched element
22+
return element;
23+
};
824

925
exports.toggleBoxCollapse = function(box, boxBody, icon) {
1026
if(box.className.indexOf('collapsed-box') !== -1) {
@@ -35,6 +51,7 @@ define(
3551
};
3652

3753
exports.removeBox = function(box){
54+
console.log(box)
3855
$(box).velocity('slideUp', {
3956
duration: 500,
4057
easing: 'easeInSine'

‎reactjs-adminlte/public/src/ui-elements/general/js/components/page-ui-elements/custom-box/box-tool.js‎

Lines changed: 22 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,24 +2,37 @@ define(
22
[
33
'react',
44
'reactDom',
5+
'./box-functions'
56
],
6-
function (React, ReactDOM) {
7+
function (React, ReactDOM, boxFunctions) {
78
var BoxTool = React.createClass({
9+
toggleCollapse: function(event){
10+
var box = boxFunctions.findClosestElement(event.currentTarget, 'box'),
11+
boxBody = box.children[1],
12+
icon = event.currentTarget.children[0];
13+
14+
boxFunctions.toggleBoxCollapse(box, boxBody, icon);
15+
},
16+
removeBox: function(event){
17+
var box = boxFunctions.findClosestElement(event.currentTarget, 'box');
18+
boxFunctions.removeBox(box);
19+
},
820
render: function() {
921
var button = '', that = this;
1022

1123
switch(this.props.toolType){
12-
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':
1329
return (
14-
<button className="btn btn-box-tool" data-widget="collapse" onClick={that.props.callback}><i className="fa fa-minus"></i></button>
15-
)
16-
case 'maximize':
17-
return (
18-
<button className="btn btn-box-tool" data-widget="expand" onClick={that.props.callback}><i className="fa fa-plus"></i></button>
30+
<button className="btn btn-box-tool" data-widget="collapse" onClick={that.toggleCollapse}><i className="fa fa-minus"></i></button>
1931
)
20-
case 'close':
32+
33+
case 'remove':
2134
return (
22-
<button className="btn btn-box-tool" data-widget="remove" onClick={that.props.callback}><i className="fa fa-times"></i></button>
35+
<button className="btn btn-box-tool" data-widget="remove" onClick={that.removeBox}><i className="fa fa-times"></i></button>
2336
)
2437
}
2538
}

‎reactjs-adminlte/public/src/ui-elements/general/js/components/page-ui-elements/custom-box/box.js‎

Lines changed: 49 additions & 156 deletions
Original file line numberDiff line numberDiff line change
@@ -2,179 +2,72 @@ 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-
// },
20-
toggleCollapse: function(event) {
21-
console.log(ReactDOM.findDOMNode(this))
22-
var box = ReactDOM.findDOMNode(this).children[0],
23-
boxBody = ReactDOM.findDOMNode(this).children[0].children[1],
24-
icon = event.currentTarget.children[0];
25-
26-
boxFunctions.toggleBoxCollapse(box, boxBody, icon);
27-
},
28-
removeBox: function(event){
29-
var box = ReactDOM.findDOMNode(this).children[0];
30-
boxFunctions.removeBox(box);
8+
getDefaultProps: function() {
9+
return {
10+
collapsed: false,
11+
theme: 'box-default',
12+
loading: false,
13+
border: true,
14+
title: 'Default title',
15+
content: 'Default content',
16+
}
3117
},
3218
render: function() {
33-
var that=this;
34-
return (
35-
<div className="col-md-12">
36-
<div className="box box-default color-palette-box">
37-
<div className="box-header with-border">
38-
<h3 className="box-title">{this.props.headerMarkup} {this.props.title}</h3>
39-
<div className="box-tools pull-right">
40-
<BoxTool toolType="minimize" callback={that.toggleCollapse} />
41-
</div>
42-
</div>
43-
<div className="box-body">
44-
<div className="row">
45-
<div className="col-sm-4 col-md-2">
46-
<h4 className="text-center">Primary</h4>
47-
48-
<div className="color-palette-set">
49-
<div className="bg-light-blue disabled color-palette"><span>Disabled</span></div>
50-
<div className="bg-light-blue color-palette"><span>#3c8dbc</span></div>
51-
<div className="bg-light-blue-active color-palette"><span>Active</span></div>
52-
</div>
53-
</div>
54-
{/* /.col */}
55-
<div className="col-sm-4 col-md-2">
56-
<h4 className="text-center">Info</h4>
57-
58-
<div className="color-palette-set">
59-
<div className="bg-aqua disabled color-palette"><span>Disabled</span></div>
60-
<div className="bg-aqua color-palette"><span>#00c0ef</span></div>
61-
<div className="bg-aqua-active color-palette"><span>Active</span></div>
62-
</div>
63-
</div>
64-
{/* /.col */}
65-
<div className="col-sm-4 col-md-2">
66-
<h4 className="text-center">Success</h4>
67-
68-
<div className="color-palette-set">
69-
<div className="bg-green disabled color-palette"><span>Disabled</span></div>
70-
<div className="bg-green color-palette"><span>#00a65a</span></div>
71-
<div className="bg-green-active color-palette"><span>Active</span></div>
72-
</div>
73-
</div>
74-
{/* /.col */}
75-
<div className="col-sm-4 col-md-2">
76-
<h4 className="text-center">Warning</h4>
19+
var boxType = '', borderClass = '', boxToolsContainer, boxTools = [], loadingState, footer;
7720

78-
<div className="color-palette-set">
79-
<div className="bg-yellow disabled color-palette"><span>Disabled</span></div>
80-
<div className="bg-yellow color-palette"><span>#f39c12</span></div>
81-
<div className="bg-yellow-active color-palette"><span>Active</span></div>
82-
</div>
83-
</div>
84-
{/* /.col */}
85-
<div className="col-sm-4 col-md-2">
86-
<h4 className="text-center">Danger</h4>
21+
if(this.props.border === true){
22+
borderClass = 'box-solid';
23+
}
24+
25+
if(this.props.boxTools){
26+
var BoxTool = require('./box-tool');
8727

88-
<div className="color-palette-set">
89-
<div className="bg-red disabled color-palette"><span>Disabled</span></div>
90-
<div className="bg-red color-palette"><span>#f56954</span></div>
91-
<div className="bg-red-active color-palette"><span>Active</span></div>
92-
</div>
93-
</div>
94-
{/* /.col */}
95-
<div className="col-sm-4 col-md-2">
96-
<h4 className="text-center">Gray</h4>
28+
this.props.boxTools.map(function(tool, index){
29+
boxTools.push(<BoxTool key={index} toolType={tool} />)
30+
});
9731

98-
<div className="color-palette-set">
99-
<div className="bg-gray disabled color-palette"><span>Disabled</span></div>
100-
<div className="bg-gray color-palette"><span>#d2d6de</span></div>
101-
<div className="bg-gray-active color-palette"><span>Active</span></div>
102-
</div>
103-
</div>
104-
{/* /.col */}
105-
</div>
106-
{/* /.row */}
107-
<div className="row">
108-
<div className="col-sm-4 col-md-2">
109-
<h4 className="text-center">Navy</h4>
110-
111-
<div className="color-palette-set">
112-
<div className="bg-navy disabled color-palette"><span>Disabled</span></div>
113-
<div className="bg-navy color-palette"><span>#001F3F</span></div>
114-
<div className="bg-navy-active color-palette"><span>Active</span></div>
115-
</div>
116-
</div>
117-
{/* /.col */}
118-
<div className="col-sm-4 col-md-2">
119-
<h4 className="text-center">Teal</h4>
32+
boxToolsContainer = <div className="box-tools pull-right">{boxTools}</div>
33+
}
12034

121-
<div className="color-palette-set">
122-
<div className="bg-teal disabled color-palette"><span>Disabled</span></div>
123-
<div className="bg-teal color-palette"><span>#39CCCC</span></div>
124-
<div className="bg-teal-active color-palette"><span>Active</span></div>
125-
</div>
126-
</div>
127-
{/* /.col */}
128-
<div className="col-sm-4 col-md-2">
129-
<h4 className="text-center">Purple</h4>
130-
131-
<div className="color-palette-set">
132-
<div className="bg-purple disabled color-palette"><span>Disabled</span></div>
133-
<div className="bg-purple color-palette"><span>#605ca8</span></div>
134-
<div className="bg-purple-active color-palette"><span>Active</span></div>
135-
</div>
136-
</div>
137-
{/* /.col */}
138-
<div className="col-sm-4 col-md-2">
139-
<h4 className="text-center">Orange</h4>
35+
if(this.props.loading === true){
36+
loadingState =
37+
<div className="overlay">
38+
<i className="fa fa-refresh fa-spin"></i>
39+
</div>
40+
}
14041

141-
<div className="color-palette-set">
142-
<div className="bg-orange disabled color-palette"><span>Disabled</span></div>
143-
<div className="bg-orange color-palette"><span>#ff851b</span></div>
144-
<div className="bg-orange-active color-palette"><span>Active</span></div>
145-
</div>
146-
</div>
147-
{/* /.col */}
148-
<div className="col-sm-4 col-md-2">
149-
<h4 className="text-center">Maroon</h4>
42+
if(this.props.collapsed){
43+
boxType = "collapsed-box"
44+
}
15045

151-
<div className="color-palette-set">
152-
<div className="bg-maroon disabled color-palette"><span>Disabled</span></div>
153-
<div className="bg-maroon color-palette"><span>#D81B60</span></div>
154-
<div className="bg-maroon-active color-palette"><span>Active</span></div>
155-
</div>
156-
</div>
157-
{/* /.col */}
158-
<div className="col-sm-4 col-md-2">
159-
<h4 className="text-center">Black</h4>
46+
if(this.props.footer){
47+
footer = <div className="box-footer">{this.props.footer}</div>
48+
}
16049

161-
<div className="color-palette-set">
162-
<div className="bg-black disabled color-palette"><span>Disabled</span></div>
163-
<div className="bg-black color-palette"><span>#111111</span></div>
164-
<div className="bg-black-active color-palette"><span>Active</span></div>
165-
</div>
166-
</div>
167-
{/* /.col */}
50+
return (
51+
<div className={"col-md-"+this.props.width+" col-sm-6 col-xs-12"}>
52+
<div className={"box "+this.props.theme+" "+borderClass+ " color-palette-box "+boxType}>
53+
<div className="box-header with-border">
54+
<h3 className="box-title">{this.props.headerMarkup} {this.props.title}</h3>
55+
{boxToolsContainer}
56+
</div>
57+
<div className="box-body">
58+
{this.props.content}
59+
{this.props.children}
16860
</div>
169-
{/* /.row */}
61+
62+
{footer}
63+
{/* /.box-body */}
64+
{loadingState}
17065
</div>
171-
{/* /.box-body */}
172-
</div>
17366
</div>
17467
)
17568
}
17669

177-
})
70+
});
17871

17972
return Box;
18073
}

‎reactjs-adminlte/public/src/ui-elements/general/js/components/ui-elements.js‎

Lines changed: 24 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,10 @@ define(
44
'jquery',
55
'./header-bar/header-bar',
66
'./navigation-menu',
7+
'./page-ui-elements/color-palette-set',
78
'./page-ui-elements/custom-box/box'
89
],
9-
function (React, $, HeaderBar, NavigationMenu, Box) {
10+
function (React, $, HeaderBar, NavigationMenu, ColorPaletteSet, Box) {
1011
var UIElements = React.createClass({
1112
getInitialState: function() {
1213
return {
@@ -38,9 +39,29 @@ define(
3839
</section>
3940

4041
<section className="content">
41-
<Box
42+
<Box
43+
border = {false}
44+
width = "12"
45+
theme = "box-default"
4246
title = "Color Palette"
43-
headerMarkup={<i className="fa fa-tag"></i>} />
47+
headerMarkup={<i className="fa fa-tag"></i>} >
48+
<div className="row">
49+
<ColorPaletteSet width= "2" title="Primary" theme="bg-light-blue" />
50+
<ColorPaletteSet width= "2" title="Info" theme="bg-aqua" />
51+
<ColorPaletteSet width= "2" title="Success" theme="bg-green" />
52+
<ColorPaletteSet width= "2" title="Warning" theme="bg-yellow" />
53+
<ColorPaletteSet width= "2" title="Danger" theme="bg-red" />
54+
<ColorPaletteSet width= "2" title="Gray" theme="bg-gray" />
55+
</div>
56+
<div className="row">
57+
<ColorPaletteSet width= "2" title="Navy" theme="bg-navy" />
58+
<ColorPaletteSet width= "2" title="Teal" theme="bg-teal" />
59+
<ColorPaletteSet width= "2" title="Purple" theme="bg-purple" />
60+
<ColorPaletteSet width= "2" title="Orange" theme="bg-orange" />
61+
<ColorPaletteSet width= "2" title="Maroon" theme="bg-maroon" />
62+
<ColorPaletteSet width= "2" title="Black" theme="bg-black" />
63+
</div>
64+
</Box>
4465
</section>
4566

4667
</div>

0 commit comments

Comments
 (0)