diff --git a/CHANGELOG.md b/CHANGELOG.md index 987c50e..2638fad 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,10 +1,18 @@ ## [CoreUI](https://coreui.io/) for [react](./REACT.md) changelog ##### `v2.0.0-alpha.3` -- refactor: Colors -- refactor: FullAside - ListGroup (deprecate callout) -- refactor: Full* containers minor fixes -- refactor: Dropdowns minor fixes +- refactor(Colors): view layout, minor temp tweaks +- refactor(FullAside): - ListGroup (deprecate callout) +- refactor(Full*): containers minor fixes +- refactor(Dropdowns): minor fixes +- refactor(Forms): `card-header-actions` +- feat(Forms): `` +- feat(Forms): `FormFeedback` +- feat(Collapses): Accordion, Custom Accordion +- feat(ListGroup): with TabPanes +- refactor(PaginationItem): `tag="button"` +- refactor(BrandButtons): spacing +- refactor:(Buttons): view layout ##### `v2.0.0-alpha.2` - refactor: FullHeader `` (required prop `direction`) diff --git a/package.json b/package.json index 350ac4b..424c4ad 100644 --- a/package.json +++ b/package.json @@ -12,7 +12,7 @@ "url": "git@github.com:mrholek/CoreUI-React.git" }, "dependencies": { - "@coreui/coreui": "^2.0.0-beta.5", + "@coreui/coreui": "^2.0.0-beta.6", "@coreui/react": "^2.0.0-alpha.5", "babel-jest": "^22.4.3", "bootstrap": "4.0.0", diff --git a/src/scss/style.css b/src/scss/style.css index 28c624f..bbd02fe 100644 --- a/src/scss/style.css +++ b/src/scss/style.css @@ -1,7 +1,7 @@ @charset "UTF-8"; /*! * CoreUI - Open Source Dashboard UI Kit - * @version v2.0.0-beta.5 + * @version v2.0.0-beta.6 * @link https://coreui.io * Copyright (c) 2018 creativeLabs Łukasz Holeczek * Licensed under MIT (https://coreui.io/license) @@ -7423,17 +7423,16 @@ canvas { align-items: center; font-size: 0.76563rem; white-space: nowrap; } + .chartjs-tooltip .tooltip-body-item-color { + display: inline-block; + width: 0.875rem; + height: 0.875rem; + margin-right: 0.875rem; } .chartjs-tooltip .tooltip-body-item-value { padding-left: 1rem; margin-left: auto; font-weight: 700; } -.chartjs-tooltip-key { - display: inline-block; - width: 0.875rem; - height: 0.875rem; - margin-right: 0.875rem; } - .dropdown-item { position: relative; padding: 10px 20px; diff --git a/src/views/Base/Cards/Cards.js b/src/views/Base/Cards/Cards.js index c4487e7..25d0310 100644 --- a/src/views/Base/Cards/Cards.js +++ b/src/views/Base/Cards/Cards.js @@ -1,7 +1,27 @@ import React, { Component } from 'react'; -import { Badge, Card, CardBody, CardFooter, CardHeader, Col, Input, Label, Row } from 'reactstrap'; +import { Badge, Card, CardBody, CardFooter, CardHeader, Col, Input, Label, Row, Collapse, Fade } from 'reactstrap'; class Cards extends Component { + constructor(props) { + super(props); + + this.toggle = this.toggle.bind(this); + this.toggleFade = this.toggleFade.bind(this); + this.state = { + collapse: true, + fadeIn: true, + timeout: 300 + }; + } + + toggle() { + this.setState({ collapse: !this.state.collapse }); + } + + toggleFade() { + this.setState({ fadeIn: !this.state.fadeIn }); + } + render() { return (
@@ -356,9 +376,30 @@ class Cards extends Component { + + + + + Card actions +
+ + + +
+ + + + Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut + laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation + ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. + + + + + +
- ); } } diff --git a/src/views/Base/Collapses/Collapses.js b/src/views/Base/Collapses/Collapses.js index c1708d3..5917489 100644 --- a/src/views/Base/Collapses/Collapses.js +++ b/src/views/Base/Collapses/Collapses.js @@ -1,5 +1,5 @@ import React, { Component } from 'react'; -import { Button, Card, CardBody, CardFooter, CardHeader, Collapse, Fade } from 'reactstrap'; +import { Button, Card, CardBody, CardFooter, CardHeader, Col, Collapse, Fade, Row } from 'reactstrap'; class Collapses extends Component { @@ -10,9 +10,13 @@ class Collapses extends Component { this.onExiting = this.onExiting.bind(this); this.onExited = this.onExited.bind(this); this.toggle = this.toggle.bind(this); + this.toggleAccordion = this.toggleAccordion.bind(this); + this.toggleCustom = this.toggleCustom.bind(this); this.toggleFade = this.toggleFade.bind(this); this.state = { collapse: false, + accordion: [true, false, false], + custom: [true, false], status: 'Closed', fadeIn: true, timeout: 300, @@ -39,6 +43,26 @@ class Collapses extends Component { this.setState({ collapse: !this.state.collapse }); } + toggleAccordion(tab) { + + const prevState = this.state.accordion; + const state = prevState.map((x, index) => tab === index ? !x : false); + + this.setState({ + accordion: state, + }); + } + + toggleCustom(tab) { + + const prevState = this.state.custom; + const state = prevState.map((x, index) => tab === index ? !x : false); + + this.setState({ + custom: state, + }); + } + toggleFade() { this.setState({ fadeIn: !this.state.fadeIn }); } @@ -46,68 +70,157 @@ class Collapses extends Component { render() { return (
- - - Collapse -
- - docs - -
- - - -

- Anim pariatur cliche reprehenderit, - enim eiusmod high life accusamus terry richardson ad squid. Nihil - anim keffiyeh helvetica, craft beer labore wes anderson cred - nesciunt sapiente ea proident. -

-

- Donec molestie odio id nisi malesuada, mattis tincidunt velit egestas. Sed non pulvinar risus. Aenean - elementum eleifend nunc, pellentesque dapibus arcu hendrerit fringilla. Aliquam in nibh massa. Cras - ultricies lorem non enim volutpat, a eleifend urna placerat. Fusce id luctus urna. In sed leo tellus. - Mauris tristique leo a nisl feugiat, eget vehicula leo venenatis. Quisque magna metus, luctus quis - sollicitudin vel, vehicula nec ipsum. Donec rutrum commodo lacus ut condimentum. Integer vel turpis - purus. Etiam vehicula, nulla non fringilla blandit, massa purus faucibus tellus, a luctus enim orci non - augue. Aenean ullamcorper nisl urna, non feugiat tortor volutpat in. Vivamus lobortis massa dolor, eget - faucibus ipsum varius eget. Pellentesque imperdiet, turpis sed sagittis lobortis, leo elit laoreet arcu, - vehicula sagittis elit leo id nisi. -

- - - - -
Current state: {this.state.status}
- - - - - Fade -
- - docs - -
- - - - This content will fade in and out as the button is pressed... - - - - - - + + + + + Collapse + + + + +

+ Anim pariatur cliche reprehenderit, + enim eiusmod high life accusamus terry richardson ad squid. Nihil + anim keffiyeh helvetica, craft beer labore wes anderson cred + nesciunt sapiente ea proident. +

+

+ Donec molestie odio id nisi malesuada, mattis tincidunt velit egestas. Sed non pulvinar risus. Aenean + elementum eleifend nunc, pellentesque dapibus arcu hendrerit fringilla. Aliquam in nibh massa. Cras + ultricies lorem non enim volutpat, a eleifend urna placerat. Fusce id luctus urna. In sed leo tellus. + Mauris tristique leo a nisl feugiat, eget vehicula leo venenatis. Quisque magna metus, luctus quis + sollicitudin vel, vehicula nec ipsum. Donec rutrum commodo lacus ut condimentum. Integer vel turpis + purus. Etiam vehicula, nulla non fringilla blandit, massa purus faucibus tellus, a luctus enim orci non + augue. Aenean ullamcorper nisl urna, non feugiat tortor volutpat in. Vivamus lobortis massa dolor, eget + faucibus ipsum varius eget. Pellentesque imperdiet, turpis sed sagittis lobortis, leo elit laoreet arcu, + vehicula sagittis elit leo id nisi. +

+ + + + +
Current state: {this.state.status}
+ + + + + Fade + + + + + This content will fade in and out as the button is pressed... + + + + + + + + + + + Collapse accordion + + +
+ + + + + + + 1. Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non + cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird + on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred + nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft + beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. + + + + + + + + + + 2. Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non + cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird + on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred + nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft + beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. + + + + + + + + + + 3. Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non + cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird + on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred + nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft + beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. + + + +
+ + + + + Collapse custom accordion + + +
+
+ + +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pretium lorem non vestibulum scelerisque. Proin a vestibulum sem, eget + tristique massa. Aliquam lacinia rhoncus nibh quis ornare. +

+ +
+
+ + +

+ Donec at ipsum dignissim, rutrum turpis scelerisque, tristique lectus. Pellentesque habitant morbi tristique senectus et netus et + malesuada fames ac turpis egestas. Vivamus nec dui turpis. Orci varius natoque penatibus et magnis dis parturient montes, + nascetur ridiculus mus. +

+ +
+
+ + + +
); } } -export default Collapses; \ No newline at end of file +export default Collapses; diff --git a/src/views/Base/Forms/Forms.js b/src/views/Base/Forms/Forms.js index f82969f..50cdc1b 100644 --- a/src/views/Base/Forms/Forms.js +++ b/src/views/Base/Forms/Forms.js @@ -14,6 +14,7 @@ import { Form, FormGroup, FormText, + FormFeedback, Input, InputGroup, InputGroupAddon, @@ -127,14 +128,14 @@ class Forms extends Component { - + - + @@ -192,6 +193,14 @@ class Forms extends Component { Please enter a complex password + + + + + + + + @@ -572,11 +581,13 @@ class Forms extends Component { - + + Cool! Input is valid - + + Houston, we have a problem... @@ -591,10 +602,12 @@ class Forms extends Component { + Non-required + Please provide a valid information @@ -1051,9 +1064,9 @@ class Forms extends Component { Form Elements
- - - + + +
diff --git a/src/views/Base/Jumbotrons/Jumbotrons.js b/src/views/Base/Jumbotrons/Jumbotrons.js index f8a96a2..56bdaca 100644 --- a/src/views/Base/Jumbotrons/Jumbotrons.js +++ b/src/views/Base/Jumbotrons/Jumbotrons.js @@ -1,50 +1,56 @@ import React, { Component } from 'react'; -import { Button, Card, CardBody, CardHeader, Container, Jumbotron } from 'reactstrap'; +import { Button, Card, CardBody, CardHeader, Col, Container, Jumbotron, Row } from 'reactstrap'; class Jumbotrons extends Component { render() { return (
- - - Jumbotron - - - - -

Hello, world!

-

This is a simple hero unit, a simple Jumbotron-style component for calling extra - attention to featured content or information.

-
-

It uses utility classes for typgraphy and spacing to space content out within the larger container.

-

- -

- - - - - - Jumbotron - fluid - - - - -

Fluid jumbotron

-

This is a modified jumbotron that occupies the entire horizontal space of its parent.

- - - - + + + + + Jumbotron + + + + +

Hello, world!

+

This is a simple hero unit, a simple Jumbotron-style component for calling extra + attention to featured content or information.

+
+

It uses utility classes for typgraphy and spacing to space content out within the larger container.

+

+ +

+ + + + + + + + Jumbotron + fluid + + + + +

Fluid jumbotron

+

This is a modified jumbotron that occupies the entire horizontal space of its parent.

+ + + + + +
); } } -export default Jumbotrons; \ No newline at end of file +export default Jumbotrons; diff --git a/src/views/Base/ListGroups/ListGroups.js b/src/views/Base/ListGroups/ListGroups.js index 341c1c5..4a29a51 100644 --- a/src/views/Base/ListGroups/ListGroups.js +++ b/src/views/Base/ListGroups/ListGroups.js @@ -1,8 +1,25 @@ import React, { Component } from 'react'; -import { Badge, Card, CardBody, CardHeader, Col, ListGroup, ListGroupItem, ListGroupItemHeading, ListGroupItemText, Row } from 'reactstrap'; +import { Badge, Card, CardBody, CardHeader, Col, ListGroup, ListGroupItem, ListGroupItemHeading, ListGroupItemText, Row, TabContent, TabPane } from 'reactstrap'; class ListGroups extends Component { + constructor(props) { + super(props); + + this.toggle = this.toggle.bind(this); + this.state = { + activeTab: 1 + }; + } + + toggle(tab) { + if (this.state.activeTab !== tab) { + this.setState({ + activeTab: tab + }); + } + } + render() { return (
@@ -150,9 +167,60 @@ class ListGroups extends Component { + + + + + List Group with TabPanes + + + + + + this.toggle(0)} action active={this.state.activeTab === 0} >Home + this.toggle(1)} action active={this.state.activeTab === 1} >Profile + this.toggle(2)} action active={this.state.activeTab === 2} >Messages + this.toggle(3)} action active={this.state.activeTab === 3} >Settings + + + + + +

Velit aute mollit ipsum ad dolor consectetur nulla officia culpa adipisicing exercitation fugiat tempor. Voluptate deserunt sit sunt + nisi aliqua fugiat proident ea ut. Mollit voluptate reprehenderit occaecat nisi ad non minim + tempor sunt voluptate consectetur exercitation id ut nulla. Ea et fugiat aliquip nostrud sunt incididunt consectetur culpa aliquip + eiusmod dolor. Anim ad Lorem aliqua in cupidatat nisi enim eu nostrud do aliquip veniam minim.

+ + +

Cupidatat quis ad sint excepteur laborum in esse qui. Et excepteur consectetur ex nisi eu do cillum ad laborum. Mollit et eu officia + dolore sunt Lorem culpa qui commodo velit ex amet id ex. Officia anim incididunt laboris deserunt + anim aute dolor incididunt veniam aute dolore do exercitation. Dolor nisi culpa ex ad irure in elit eu dolore. Ad laboris ipsum + reprehenderit irure non commodo enim culpa commodo veniam incididunt veniam ad.

+ + +

Ut ut do pariatur aliquip aliqua aliquip exercitation do nostrud commodo reprehenderit aute ipsum voluptate. Irure Lorem et laboris + nostrud amet cupidatat cupidatat anim do ut velit mollit consequat enim tempor. Consectetur + est minim nostrud nostrud consectetur irure labore voluptate irure. Ipsum id Lorem sit sint voluptate est pariatur eu ad cupidatat et + deserunt culpa sit eiusmod deserunt. Consectetur et fugiat anim do eiusmod aliquip nulla + laborum elit adipisicing pariatur cillum.

+ + +

Irure enim occaecat labore sit qui aliquip reprehenderit amet velit. Deserunt ullamco ex elit nostrud ut dolore nisi officia magna + sit occaecat laboris sunt dolor. Nisi eu minim cillum occaecat aute est cupidatat aliqua labore + aute occaecat ea aliquip sunt amet. Aute mollit dolor ut exercitation irure commodo non amet consectetur quis amet culpa. Quis ullamco + nisi amet qui aute irure eu. Magna labore dolor quis ex labore id nostrud deserunt dolor + eiusmod eu pariatur culpa mollit in irure.

+ + + + + + + +
); } } -export default ListGroups; \ No newline at end of file +export default ListGroups; diff --git a/src/views/Base/Paginations/Pagnations.js b/src/views/Base/Paginations/Pagnations.js index 294e4bb..b399116 100644 --- a/src/views/Base/Paginations/Pagnations.js +++ b/src/views/Base/Paginations/Pagnations.js @@ -18,35 +18,35 @@ class Paginations extends Component { - + - + 1 - + 2 - + 3 - + 4 - + 5 - + @@ -59,35 +59,35 @@ class Paginations extends Component { - + - + 1 - + 2 - + 3 - + 4 - + 5 - + @@ -100,71 +100,71 @@ class Paginations extends Component { - + - + 1 - + 2 - + 3 - + - + - + 1 - + 2 - + 3 - + - + - + 1 - + 2 - + 3 - + @@ -174,4 +174,4 @@ class Paginations extends Component { } } -export default Paginations; \ No newline at end of file +export default Paginations; diff --git a/src/views/Base/Tables/Tables.js b/src/views/Base/Tables/Tables.js index 87c7dcb..5debc82 100644 --- a/src/views/Base/Tables/Tables.js +++ b/src/views/Base/Tables/Tables.js @@ -66,22 +66,22 @@ class Tables extends Component { - + - 1 + 1 - 2 + 2 - 3 + 3 - 4 + 4 - + @@ -147,14 +147,14 @@ class Tables extends Component { - Prev + Prev - 1 + 1 - 2 - 3 - 4 - Next + 2 + 3 + 4 + Next @@ -222,14 +222,14 @@ class Tables extends Component { - Prev + Prev - 1 + 1 - 2 - 3 - 4 - Next + 2 + 3 + 4 + Next @@ -294,14 +294,14 @@ class Tables extends Component { - Prev + Prev - 1 + 1 - 2 - 3 - 4 - Next + 2 + 3 + 4 + Next @@ -370,14 +370,14 @@ class Tables extends Component { diff --git a/src/views/Buttons/BrandButtons/BrandButtons.js b/src/views/Buttons/BrandButtons/BrandButtons.js index 982a7fe..5ddfe9b 100644 --- a/src/views/Buttons/BrandButtons/BrandButtons.js +++ b/src/views/Buttons/BrandButtons/BrandButtons.js @@ -21,89 +21,89 @@ class BrandButtons extends Component { Add this class .btn-sm

- - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + +

Size Normal

- - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + +

Size Large Add this class .btn-lg

- - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + +

@@ -124,89 +124,89 @@ class BrandButtons extends Component { Add this class .btn-sm

- - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + +

Size Normal

- - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + +

Size Large Add this class .btn-lg

- - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + +

@@ -227,89 +227,89 @@ class BrandButtons extends Component { Add this class .btn-sm

- - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + +

Size Normal

- - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + +

Size Large Add this class .btn-lg

- - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + +

diff --git a/src/views/Buttons/ButtonGroups/ButtonGroups.js b/src/views/Buttons/ButtonGroups/ButtonGroups.js index 062cbed..454c547 100644 --- a/src/views/Buttons/ButtonGroups/ButtonGroups.js +++ b/src/views/Buttons/ButtonGroups/ButtonGroups.js @@ -40,7 +40,7 @@ class ButtonGroups extends Component { return (
- + Button Group @@ -58,6 +58,26 @@ class ButtonGroups extends Component { + + + Vertical variation + + + + + + { this.toggle(1); }}> + + Dropdown + + + Dropdown Link + Dropdown Link + + + + + Button Toolbar @@ -81,38 +101,8 @@ class ButtonGroups extends Component { - - - Button Toolbar - mix with input groups - - - - - - - - - - - @ - - - - - - - - - - - - @ - - - - - + + Sizing @@ -157,24 +147,39 @@ class ButtonGroups extends Component { + + + + - Vertical variation + Button Toolbar with input groups - - - - { this.toggle(1); }}> - - Dropdown - - - Dropdown Link - Dropdown Link - - - + + + + + + + + + @ + + + + + + + + + + + + @ + + + @@ -184,4 +189,4 @@ class ButtonGroups extends Component { } } -export default ButtonGroups; \ No newline at end of file +export default ButtonGroups; diff --git a/src/views/Buttons/Buttons/Buttons.js b/src/views/Buttons/Buttons/Buttons.js index 9e06033..9fc90d4 100644 --- a/src/views/Buttons/Buttons/Buttons.js +++ b/src/views/Buttons/Buttons/Buttons.js @@ -5,6 +5,627 @@ class Buttons extends Component { render() { return (
+ + + Standard Buttons + + + + +

Normal

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Active State + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Disabled + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Outline Buttons + + +

+ Use .btn-outline-* class for outline buttons. +

+ + + Normal + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Active State + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Disabled + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Ghost Buttons + + +

+ Use + .btn-ghost-* class for ghost buttons. +

+ + + Normal + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Active State + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Disabled + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Square Buttons + + +

+ Use + .btn-square class for square buttons. +

+ + + Normal + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Active State + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Disabled + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Pill Buttons + + +

+ Use + .btn-pill class for pill buttons. +

+ + + Normal + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Active State + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Disabled + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Sizes + + +

Fancy larger or smaller buttons? Add .btn-lg or .btn-sm for additional sizes.

+ + + Small add + .btn-sm + + + + + + + + + + + + + + + + + + + + Normal + + + + + + + + + + + + + + + + + + + + Large add .btn-lg. + + + + + + + + + + + + + + + + + + + + + + With Icons + + + + + + + + + + + + + + + + + + + + + @@ -36,9 +657,9 @@ class Buttons extends Component { Size Large - Add this class .btn-lg +

Add this class .btn-lg

@@ -51,9 +672,9 @@ class Buttons extends Component { Size Small - Add this class .btn-sm +

Add class .btn-sm

@@ -66,9 +687,9 @@ class Buttons extends Component { Disabled state - Add this disabled="disabled" +

Add disabled="disabled"

@@ -81,9 +702,9 @@ class Buttons extends Component { Active state - Add this class .active +

Add class .active

@@ -96,9 +717,9 @@ class Buttons extends Component { Block Level Buttons - Add this class .btn-block +

Add class .btn-block

@@ -137,9 +758,9 @@ class Buttons extends Component { Size Large - Add this class .btn-lg +

Add class .btn-lg

@@ -151,9 +772,9 @@ class Buttons extends Component { Size Small - Add this class .btn-sm +

Add class .btn-sm

@@ -165,9 +786,9 @@ class Buttons extends Component { Disabled state - Add this disabled="disabled" +

Add disabled="disabled"

@@ -179,9 +800,9 @@ class Buttons extends Component { Active state - Add this class .active +

Add class .active

@@ -193,9 +814,10 @@ class Buttons extends Component { Block Level Buttons - Add this class .btn-block + {/*Add this class .btn-block*/} +

Add class .btn-block

diff --git a/src/views/Notifications/Badges/Badges.js b/src/views/Notifications/Badges/Badges.js index b377f13..17e3ec4 100644 --- a/src/views/Notifications/Badges/Badges.js +++ b/src/views/Notifications/Badges/Badges.js @@ -26,7 +26,7 @@ class Badges extends Component { @@ -34,8 +34,7 @@ class Badges extends Component { - Badges - contextual variations + Badges contextual variations Primary @@ -50,8 +49,7 @@ class Badges extends Component { - Badges - pill badges + Badges pill badges Primary @@ -66,8 +64,7 @@ class Badges extends Component { - Badges - links + Badges links Primary @@ -87,4 +84,4 @@ class Badges extends Component { } } -export default Badges; \ No newline at end of file +export default Badges; diff --git a/src/views/Theme/Colors/Colors.js b/src/views/Theme/Colors/Colors.js index 51498db..45d52f9 100644 --- a/src/views/Theme/Colors/Colors.js +++ b/src/views/Theme/Colors/Colors.js @@ -2,13 +2,26 @@ 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/' +// import { rgbToHex } from '@coreui/coreui/js/src/utilities/' + +const rgbToHex = (color) => { + const rgb = color.match(/^rgba?[\s+]?\([\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?/i) + if (rgb) { + const r = `0${parseInt(rgb[1], 10).toString(16)}` + const g = `0${parseInt(rgb[2], 10).toString(16)}` + const b = `0${parseInt(rgb[3], 10).toString(16)}` + + return rgb ? `#${r.slice(-2)}${g.slice(-2)}${b.slice(-2)}` : '' + } + return '' +} class ThemeView extends Component { constructor(props) { super(props); + this.state = { - bgColor: 'rgb(255, 0, 0)' + bgColor: 'rgb(255, 255, 255)' } } @@ -16,7 +29,7 @@ class ThemeView extends Component { const elem = ReactDOM.findDOMNode(this).parentNode.firstChild const color = window.getComputedStyle(elem).getPropertyValue('background-color') this.setState({ - bgColor: color + bgColor: color || this.state.bgColor }) } @@ -40,12 +53,13 @@ class ThemeView extends Component { } class ThemeColor extends Component { - constructor(props) { - super(props); - } + // constructor(props) { + // super(props); + // } render() { - const { className, children, ...attributes } = this.props + // const { className, children, ...attributes } = this.props + const { className, children } = this.props const classes = classNames(className, 'theme-color w-75 rounded mb-3')