refactor: Colors
This commit is contained in:
xidedix
parent
c46cb8400e
commit
eeb7a56641
@ -1,4 +1,63 @@
|
||||
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 {
|
||||
render() {
|
||||
@ -9,32 +68,32 @@ class Colors extends Component {
|
||||
<i className="icon-drop"></i> Theme colors
|
||||
</div>
|
||||
<div className="card-body">
|
||||
<div className="row">
|
||||
<div className="col-md-4">
|
||||
<div className="p-3 mb-3 bg-primary">Primary</div>
|
||||
</div>
|
||||
<div className="col-md-4">
|
||||
<div className="p-3 mb-3 bg-secondary">Secondary</div>
|
||||
</div>
|
||||
<div className="col-md-4">
|
||||
<div className="p-3 mb-3 bg-success">Success</div>
|
||||
</div>
|
||||
<div className="col-md-4">
|
||||
<div className="p-3 mb-3 bg-danger">Danger</div>
|
||||
</div>
|
||||
<div className="col-md-4">
|
||||
<div className="p-3 mb-3 bg-warning">Warning</div>
|
||||
</div>
|
||||
<div className="col-md-4">
|
||||
<div className="p-3 mb-3 bg-info">Info</div>
|
||||
</div>
|
||||
<div className="col-md-4">
|
||||
<div className="p-3 mb-3 bg-light">Light</div>
|
||||
</div>
|
||||
<div className="col-md-4">
|
||||
<div className="p-3 mb-3 bg-dark">Dark</div>
|
||||
</div>
|
||||
</div>
|
||||
<Row>
|
||||
<ThemeColor className="bg-primary">
|
||||
<h6>Brand Primary Color</h6>
|
||||
</ThemeColor>
|
||||
<ThemeColor className="bg-secondary">
|
||||
<h6>Brand Secondary Color</h6>
|
||||
</ThemeColor>
|
||||
<ThemeColor className="bg-success">
|
||||
<h6>Brand Success Color</h6>
|
||||
</ThemeColor>
|
||||
<ThemeColor className="bg-danger">
|
||||
<h6>Brand Danger Color</h6>
|
||||
</ThemeColor>
|
||||
<ThemeColor className="bg-warning">
|
||||
<h6>Brand Warning Color</h6>
|
||||
</ThemeColor>
|
||||
<ThemeColor className="bg-info">
|
||||
<h6>Brand Info Color</h6>
|
||||
</ThemeColor>
|
||||
<ThemeColor className="bg-light">
|
||||
<h6>Brand Light Color</h6>
|
||||
</ThemeColor>
|
||||
<ThemeColor className="bg-dark">
|
||||
<h6>Brand Dark Color</h6>
|
||||
</ThemeColor>
|
||||
</Row>
|
||||
</div>
|
||||
</div>
|
||||
<div className="card">
|
||||
@ -42,19 +101,35 @@ class Colors extends Component {
|
||||
<i className="icon-drop"></i> Grays
|
||||
</div>
|
||||
<div className="card-body">
|
||||
<div className="row mb-3">
|
||||
<div className="col-md-4">
|
||||
<div className="p-3 bg-gray-100">100</div>
|
||||
<div className="p-3 bg-gray-200">200</div>
|
||||
<div className="p-3 bg-gray-300">300</div>
|
||||
<div className="p-3 bg-gray-400">400</div>
|
||||
<div className="p-3 bg-gray-500">500</div>
|
||||
<div className="p-3 bg-gray-600">600</div>
|
||||
<div className="p-3 bg-gray-700">700</div>
|
||||
<div className="p-3 bg-gray-800">800</div>
|
||||
<div className="p-3 bg-gray-900">900</div>
|
||||
</div>
|
||||
</div>
|
||||
<Row className="mb-3">
|
||||
<ThemeColor className="bg-gray-100">
|
||||
<h6>Gray 100 Color</h6>
|
||||
</ThemeColor>
|
||||
<ThemeColor className="bg-gray-200">
|
||||
<h6>Gray 200 Color</h6>
|
||||
</ThemeColor>
|
||||
<ThemeColor className="bg-gray-300">
|
||||
<h6>Gray 300 Color</h6>
|
||||
</ThemeColor>
|
||||
<ThemeColor className="bg-gray-400">
|
||||
<h6>Gray 400 Color</h6>
|
||||
</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 className="card">
|
||||
@ -62,38 +137,41 @@ class Colors extends Component {
|
||||
<i className="icon-drop"></i> Additional colors
|
||||
</div>
|
||||
<div className="card-body">
|
||||
<div className="row">
|
||||
<div className="col-md-4">
|
||||
<div className="p-3 mb-3 bg-blue">Blue</div>
|
||||
</div>
|
||||
<div className="col-md-4">
|
||||
<div className="p-3 mb-3 bg-indigo">Indigo</div>
|
||||
</div>
|
||||
<div className="col-md-4">
|
||||
<div className="p-3 mb-3 bg-purple">Purple</div>
|
||||
</div>
|
||||
<div className="col-md-4">
|
||||
<div className="p-3 mb-3 bg-pink">Pink</div>
|
||||
</div>
|
||||
<div className="col-md-4">
|
||||
<div className="p-3 mb-3 bg-red">Red</div>
|
||||
</div>
|
||||
<div className="col-md-4">
|
||||
<div className="p-3 mb-3 bg-orange">Orange</div>
|
||||
</div>
|
||||
<div className="col-md-4">
|
||||
<div className="p-3 mb-3 bg-yellow">Yellow</div>
|
||||
</div>
|
||||
<div className="col-md-4">
|
||||
<div className="p-3 mb-3 bg-green">Green</div>
|
||||
</div>
|
||||
<div className="col-md-4">
|
||||
<div className="p-3 mb-3 bg-teal">Teal</div>
|
||||
</div>
|
||||
<div className="col-md-4">
|
||||
<div className="p-3 mb-3 bg-cyan">Cyan</div>
|
||||
</div>
|
||||
</div>
|
||||
<Row>
|
||||
<ThemeColor className="bg-blue">
|
||||
<h6>Blue Color</h6>
|
||||
</ThemeColor>
|
||||
<ThemeColor className="bg-light-blue">
|
||||
<h6>Light Blue Color</h6>
|
||||
</ThemeColor>
|
||||
<ThemeColor className="bg-indigo">
|
||||
<h6>Indigo Color</h6>
|
||||
</ThemeColor>
|
||||
<ThemeColor className="bg-purple">
|
||||
<h6>Purple Color</h6>
|
||||
</ThemeColor>
|
||||
<ThemeColor className="bg-pink">
|
||||
<h6>Pink Color</h6>
|
||||
</ThemeColor>
|
||||
<ThemeColor className="bg-red">
|
||||
<h6>Red Color</h6>
|
||||
</ThemeColor>
|
||||
<ThemeColor className="bg-orange">
|
||||
<h6>Orange Color</h6>
|
||||
</ThemeColor>
|
||||
<ThemeColor className="bg-yellow">
|
||||
<h6>Yellow Color</h6>
|
||||
</ThemeColor>
|
||||
<ThemeColor className="bg-green">
|
||||
<h6>Green Color</h6>
|
||||
</ThemeColor>
|
||||
<ThemeColor className="bg-teal">
|
||||
<h6>Teal Color</h6>
|
||||
</ThemeColor>
|
||||
<ThemeColor className="bg-cyan">
|
||||
<h6>Cyan Color</h6>
|
||||
</ThemeColor>
|
||||
</Row>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -6,4 +6,4 @@ it('renders without crashing', () => {
|
||||
const div = document.createElement('div');
|
||||
ReactDOM.render(<Colors />, div);
|
||||
ReactDOM.unmountComponentAtNode(div);
|
||||
});
|
||||
});
|
||||
|
||||
Loading…
Reference in New Issue
Block a user