gitadmin/admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: Colors

Browse Source
This commit is contained in:
xidedix 2018-04-11 18:31:25 +02:00
parent c46cb8400e
commit eeb7a56641
2 changed files with 150 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

220
src/views/Theme/Colors/Colors.js
View File

@ -1,4 +1,63 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import classNames from 'classnames';
import { Row, Col } from 'reactstrap'
import { rgbToHex }from '@coreui/coreui/js/src/utilities/'
class ThemeView extends Component {
constructor(props) {
super(props);
this.state = {
bgColor: 'rgb(255, 0, 0)'
}
}
componentDidMount () {
const elem = ReactDOM.findDOMNode(this).parentNode.firstChild
const color = window.getComputedStyle(elem).getPropertyValue('background-color')
this.setState({
bgColor: color
})
}
render() {
return (
<table className="w-100">
<tbody>
<tr>
<td className="text-muted">HEX:</td>
<td className="font-weight-bold">{ rgbToHex(this.state.bgColor) }</td>
</tr>
<tr>
<td className="text-muted">RGB:</td>
<td className="font-weight-bold">{ this.state.bgColor }</td>
</tr>
</tbody>
</table>
)
}
}
class ThemeColor extends Component {
constructor(props) {
super(props);
}
render() {
const { className, children, ...attributes } = this.props
const classes = classNames(className, 'theme-color w-75 rounded mb-3')
return (
<Col xl="2" md="4" sm="6" xs="12" className="mb-4">
<div className={classes} style={{paddingTop: '75%'}}></div>
{children}
<ThemeView/>
</Col>
)
}
}
class Colors extends Component { class Colors extends Component {
render() { render() {
@ -9,32 +68,32 @@ class Colors extends Component {
<i className="icon-drop"></i> Theme colors <i className="icon-drop"></i> Theme colors
</div> </div>
<div className="card-body"> <div className="card-body">
<div className="row"> <Row>
<div className="col-md-4"> <ThemeColor className="bg-primary">
<div className="p-3 mb-3 bg-primary">Primary</div> <h6>Brand Primary Color</h6>
</div> </ThemeColor>
<div className="col-md-4"> <ThemeColor className="bg-secondary">
<div className="p-3 mb-3 bg-secondary">Secondary</div> <h6>Brand Secondary Color</h6>
</div> </ThemeColor>
<div className="col-md-4"> <ThemeColor className="bg-success">
<div className="p-3 mb-3 bg-success">Success</div> <h6>Brand Success Color</h6>
</div> </ThemeColor>
<div className="col-md-4"> <ThemeColor className="bg-danger">
<div className="p-3 mb-3 bg-danger">Danger</div> <h6>Brand Danger Color</h6>
</div> </ThemeColor>
<div className="col-md-4"> <ThemeColor className="bg-warning">
<div className="p-3 mb-3 bg-warning">Warning</div> <h6>Brand Warning Color</h6>
</div> </ThemeColor>
<div className="col-md-4"> <ThemeColor className="bg-info">
<div className="p-3 mb-3 bg-info">Info</div> <h6>Brand Info Color</h6>
</div> </ThemeColor>
<div className="col-md-4"> <ThemeColor className="bg-light">
<div className="p-3 mb-3 bg-light">Light</div> <h6>Brand Light Color</h6>
</div> </ThemeColor>
<div className="col-md-4"> <ThemeColor className="bg-dark">
<div className="p-3 mb-3 bg-dark">Dark</div> <h6>Brand Dark Color</h6>
</div> </ThemeColor>
</div> </Row>
</div> </div>
</div> </div>
<div className="card"> <div className="card">
@ -42,19 +101,35 @@ class Colors extends Component {
<i className="icon-drop"></i> Grays <i className="icon-drop"></i> Grays
</div> </div>
<div className="card-body"> <div className="card-body">
<div className="row mb-3"> <Row className="mb-3">
<div className="col-md-4"> <ThemeColor className="bg-gray-100">
<div className="p-3 bg-gray-100">100</div> <h6>Gray 100 Color</h6>
<div className="p-3 bg-gray-200">200</div> </ThemeColor>
<div className="p-3 bg-gray-300">300</div> <ThemeColor className="bg-gray-200">
<div className="p-3 bg-gray-400">400</div> <h6>Gray 200 Color</h6>
<div className="p-3 bg-gray-500">500</div> </ThemeColor>
<div className="p-3 bg-gray-600">600</div> <ThemeColor className="bg-gray-300">
<div className="p-3 bg-gray-700">700</div> <h6>Gray 300 Color</h6>
<div className="p-3 bg-gray-800">800</div> </ThemeColor>
<div className="p-3 bg-gray-900">900</div> <ThemeColor className="bg-gray-400">
</div> <h6>Gray 400 Color</h6>
</div> </ThemeColor>
<ThemeColor className="bg-gray-500">
<h6>Gray 500 Color</h6>
</ThemeColor>
<ThemeColor className="bg-gray-600">
<h6>Gray 600 Color</h6>
</ThemeColor>
<ThemeColor className="bg-gray-700">
<h6>Gray 700 Color</h6>
</ThemeColor>
<ThemeColor className="bg-gray-800">
<h6>Gray 800 Color</h6>
</ThemeColor>
<ThemeColor className="bg-gray-900">
<h6>Gray 900 Color</h6>
</ThemeColor>
</Row>
</div> </div>
</div> </div>
<div className="card"> <div className="card">
@ -62,38 +137,41 @@ class Colors extends Component {
<i className="icon-drop"></i> Additional colors <i className="icon-drop"></i> Additional colors
</div> </div>
<div className="card-body"> <div className="card-body">
<div className="row"> <Row>
<div className="col-md-4"> <ThemeColor className="bg-blue">
<div className="p-3 mb-3 bg-blue">Blue</div> <h6>Blue Color</h6>
</div> </ThemeColor>
<div className="col-md-4"> <ThemeColor className="bg-light-blue">
<div className="p-3 mb-3 bg-indigo">Indigo</div> <h6>Light Blue Color</h6>
</div> </ThemeColor>
<div className="col-md-4"> <ThemeColor className="bg-indigo">
<div className="p-3 mb-3 bg-purple">Purple</div> <h6>Indigo Color</h6>
</div> </ThemeColor>
<div className="col-md-4"> <ThemeColor className="bg-purple">
<div className="p-3 mb-3 bg-pink">Pink</div> <h6>Purple Color</h6>
</div> </ThemeColor>
<div className="col-md-4"> <ThemeColor className="bg-pink">
<div className="p-3 mb-3 bg-red">Red</div> <h6>Pink Color</h6>
</div> </ThemeColor>
<div className="col-md-4"> <ThemeColor className="bg-red">
<div className="p-3 mb-3 bg-orange">Orange</div> <h6>Red Color</h6>
</div> </ThemeColor>
<div className="col-md-4"> <ThemeColor className="bg-orange">
<div className="p-3 mb-3 bg-yellow">Yellow</div> <h6>Orange Color</h6>
</div> </ThemeColor>
<div className="col-md-4"> <ThemeColor className="bg-yellow">
<div className="p-3 mb-3 bg-green">Green</div> <h6>Yellow Color</h6>
</div> </ThemeColor>
<div className="col-md-4"> <ThemeColor className="bg-green">
<div className="p-3 mb-3 bg-teal">Teal</div> <h6>Green Color</h6>
</div> </ThemeColor>
<div className="col-md-4"> <ThemeColor className="bg-teal">
<div className="p-3 mb-3 bg-cyan">Cyan</div> <h6>Teal Color</h6>
</div> </ThemeColor>
</div> <ThemeColor className="bg-cyan">
<h6>Cyan Color</h6>
</ThemeColor>
</Row>
</div> </div>
</div> </div>
</div> </div>