Skip to content

Commit b1ba7d8

Browse files
xidedixxidedix
committed
refactor(FullAside): ListGroup (deprecate callout)
1 parent f7cd054 commit b1ba7d8

File tree

1 file changed

+82
-82
lines changed

1 file changed

+82
-82
lines changed

‎src/containers/Full/FullAside.js

+82-82
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { Component } from 'react';
2-
import { Input, Label, Nav, NavItem, NavLink, Progress, TabContent, TabPane } from 'reactstrap';
2+
import { Input, Label, Nav, NavItem, NavLink, Progress, TabContent, TabPane, ListGroup, ListGroupItem } from 'reactstrap';
33
import PropTypes from 'prop-types';
44
import classNames from 'classnames';
55

@@ -30,6 +30,7 @@ class FullAside extends Component {
3030

3131
render() {
3232

33+
// eslint-disable-next-line
3334
const { children, ...attributes } = this.props;
3435

3536
return (
@@ -62,90 +63,89 @@ class FullAside extends Component {
6263
</Nav>
6364
<TabContent activeTab={this.state.activeTab}>
6465
<TabPane tabId="1">
65-
<div className="callout m-0 py-2 text-muted text-center bg-light text-uppercase">
66-
<small><b>Today</b></small>
67-
</div>
68-
<hr className="transparent mx-3 my-0" />
69-
<div className="callout callout-warning m-0 py-3">
70-
<div className="avatar float-right">
71-
<img src={'assets/img/avatars/7.jpg'} className="img-avatar" alt="[email protected]" />
72-
</div>
73-
<div>Meeting with <strong>Lucas</strong></div>
74-
<small className="text-muted mr-3"><i className="icon-calendar"></i>&nbsp; 1 - 3pm</small>
75-
<small className="text-muted"><i className="icon-location-pin"></i>&nbsp; Palo Alto, CA</small>
76-
</div>
77-
<hr className="mx-3 my-0" />
78-
<div className="callout callout-info m-0 py-3">
79-
<div className="avatar float-right">
80-
<img src={'assets/img/avatars/4.jpg'} className="img-avatar" alt="[email protected]" />
81-
</div>
82-
<div>Skype with <strong>Megan</strong></div>
83-
<small className="text-muted mr-3"><i className="icon-calendar"></i>&nbsp; 4 - 5pm</small>
84-
<small className="text-muted"><i className="icon-social-skype"></i>&nbsp; On-line</small>
85-
</div>
86-
<hr className="transparent mx-3 my-0" />
87-
<div className="callout m-0 py-2 text-muted text-center bg-light text-uppercase">
88-
<small><b>Tomorrow</b></small>
89-
</div>
90-
<hr className="transparent mx-3 my-0" />
91-
<div className="callout callout-danger m-0 py-3">
92-
<div>New UI Project - <strong>deadline</strong></div>
93-
<small className="text-muted mr-3"><i className="icon-calendar"></i>&nbsp; 10 - 11pm</small>
94-
<small className="text-muted"><i className="icon-home"></i>&nbsp; creativeLabs HQ</small>
95-
<div className="avatars-stack mt-2">
96-
<div className="avatar avatar-xs">
97-
<img src={'assets/img/avatars/2.jpg'} className="img-avatar" alt="[email protected]" />
98-
</div>
99-
<div className="avatar avatar-xs">
100-
<img src={'assets/img/avatars/3.jpg'} className="img-avatar" alt="[email protected]" />
101-
</div>
102-
<div className="avatar avatar-xs">
103-
<img src={'assets/img/avatars/4.jpg'} className="img-avatar" alt="[email protected]" />
104-
</div>
105-
<div className="avatar avatar-xs">
106-
<img src={'assets/img/avatars/5.jpg'} className="img-avatar" alt="[email protected]" />
107-
</div>
108-
<div className="avatar avatar-xs">
109-
<img src={'assets/img/avatars/6.jpg'} className="img-avatar" alt="[email protected]" />
110-
</div>
111-
</div>
112-
</div>
113-
<hr className="mx-3 my-0" />
114-
<div className="callout callout-success m-0 py-3">
115-
<div><strong>#10 Startups.Garden</strong> Meetup</div>
116-
<small className="text-muted mr-3"><i className="icon-calendar"></i>&nbsp; 1 - 3pm</small>
117-
<small className="text-muted"><i className="icon-location-pin"></i>&nbsp; Palo Alto, CA</small>
118-
</div>
119-
<hr className="mx-3 my-0" />
120-
<div className="callout callout-primary m-0 py-3">
121-
<div><strong>Team meeting</strong></div>
122-
<small className="text-muted mr-3"><i className="icon-calendar"></i>&nbsp; 4 - 6pm</small>
123-
<small className="text-muted"><i className="icon-home"></i>&nbsp; creativeLabs HQ</small>
124-
<div className="avatars-stack mt-2">
125-
<div className="avatar avatar-xs">
126-
<img src={'assets/img/avatars/2.jpg'} className="img-avatar" alt="[email protected]" />
127-
</div>
128-
<div className="avatar avatar-xs">
129-
<img src={'assets/img/avatars/3.jpg'} className="img-avatar" alt="[email protected]" />
66+
<ListGroup className="list-group-accent">
67+
<ListGroupItem className="list-group-item-accent-secondary bg-light text-center font-weight-bold text-muted text-uppercase small">Today</ListGroupItem>
68+
<ListGroupItem action tag="a" href="#" className="list-group-item-accent-warning list-group-item-divider">
69+
<div className="avatar float-right">
70+
<img className="img-avatar" src="assets/img/avatars/7.jpg" alt="[email protected]"></img>
13071
</div>
131-
<div className="avatar avatar-xs">
132-
<img src={'assets/img/avatars/4.jpg'} className="img-avatar" alt="[email protected]" />
133-
</div>
134-
<div className="avatar avatar-xs">
135-
<img src={'assets/img/avatars/5.jpg'} className="img-avatar" alt="[email protected]" />
136-
</div>
137-
<div className="avatar avatar-xs">
138-
<img src={'assets/img/avatars/6.jpg'} className="img-avatar" alt="[email protected]" />
72+
<div>Meeting with <strong>Lucas</strong> </div>
73+
<small className="text-muted mr-3">
74+
<i className="icon-calendar"></i>&nbsp; 1 - 3pm
75+
</small>
76+
<small className="text-muted">
77+
<i className="icon-location-pin"></i> Palo Alto, CA
78+
</small>
79+
</ListGroupItem>
80+
<ListGroupItem action tag="a" href="#" className="list-group-item-accent-info list-group-item-divider">
81+
<div className="avatar float-right">
82+
<img className="img-avatar" src="assets/img/avatars/4.jpg" alt="[email protected]"></img>
13983
</div>
140-
<div className="avatar avatar-xs">
141-
<img src={'assets/img/avatars/7.jpg'} className="img-avatar" alt="[email protected]" />
84+
<div>Skype with <strong>Megan</strong></div>
85+
<small className="text-muted mr-3">
86+
<i className="icon-calendar"></i>&nbsp; 4 - 5pm
87+
</small>
88+
<small className="text-muted">
89+
<i className="icon-social-skype"></i> On-line
90+
</small>
91+
</ListGroupItem>
92+
<ListGroupItem className="list-group-item-accent-secondary bg-light text-center font-weight-bold text-muted text-uppercase small">Tomorrow</ListGroupItem>
93+
<ListGroupItem action tag="a" href="#" className="list-group-item-accent-danger list-group-item-divider">
94+
<div>New UI Project - <strong>deadline</strong></div>
95+
<small className="text-muted mr-3"><i className="icon-calendar"></i>&nbsp; 10 - 11pm</small>
96+
<small className="text-muted"><i className="icon-home"></i>&nbsp; creativeLabs HQ</small>
97+
<div className="avatars-stack mt-2">
98+
<div className="avatar avatar-xs">
99+
<img src={'assets/img/avatars/2.jpg'} className="img-avatar" alt="[email protected]" />
100+
</div>
101+
<div className="avatar avatar-xs">
102+
<img src={'assets/img/avatars/3.jpg'} className="img-avatar" alt="[email protected]" />
103+
</div>
104+
<div className="avatar avatar-xs">
105+
<img src={'assets/img/avatars/4.jpg'} className="img-avatar" alt="[email protected]" />
106+
</div>
107+
<div className="avatar avatar-xs">
108+
<img src={'assets/img/avatars/5.jpg'} className="img-avatar" alt="[email protected]" />
109+
</div>
110+
<div className="avatar avatar-xs">
111+
<img src={'assets/img/avatars/6.jpg'} className="img-avatar" alt="[email protected]" />
112+
</div>
142113
</div>
143-
<div className="avatar avatar-xs">
144-
<img src={'assets/img/avatars/8.jpg'} className="img-avatar" alt="[email protected]" />
114+
</ListGroupItem>
115+
<ListGroupItem action tag="a" href="#" className="list-group-item-accent-success list-group-item-divider">
116+
<div><strong>#10 Startups.Garden</strong> Meetup</div>
117+
<small className="text-muted mr-3"><i className="icon-calendar"></i>&nbsp; 1 - 3pm</small>
118+
<small className="text-muted"><i className="icon-location-pin"></i>&nbsp; Palo Alto, CA</small>
119+
</ListGroupItem>
120+
<ListGroupItem action tag="a" href="#" className="list-group-item-accent-primary list-group-item-divider">
121+
<div><strong>Team meeting</strong></div>
122+
<small className="text-muted mr-3"><i className="icon-calendar"></i>&nbsp; 4 - 6pm</small>
123+
<small className="text-muted"><i className="icon-home"></i>&nbsp; creativeLabs HQ</small>
124+
<div className="avatars-stack mt-2">
125+
<div className="avatar avatar-xs">
126+
<img src={'assets/img/avatars/2.jpg'} className="img-avatar" alt="[email protected]" />
127+
</div>
128+
<div className="avatar avatar-xs">
129+
<img src={'assets/img/avatars/3.jpg'} className="img-avatar" alt="[email protected]" />
130+
</div>
131+
<div className="avatar avatar-xs">
132+
<img src={'assets/img/avatars/4.jpg'} className="img-avatar" alt="[email protected]" />
133+
</div>
134+
<div className="avatar avatar-xs">
135+
<img src={'assets/img/avatars/5.jpg'} className="img-avatar" alt="[email protected]" />
136+
</div>
137+
<div className="avatar avatar-xs">
138+
<img src={'assets/img/avatars/6.jpg'} className="img-avatar" alt="[email protected]" />
139+
</div>
140+
<div className="avatar avatar-xs">
141+
<img src={'assets/img/avatars/7.jpg'} className="img-avatar" alt="[email protected]" />
142+
</div>
143+
<div className="avatar avatar-xs">
144+
<img src={'assets/img/avatars/8.jpg'} className="img-avatar" alt="[email protected]" />
145+
</div>
145146
</div>
146-
</div>
147-
</div>
148-
<hr className="mx-3 my-0" />
147+
</ListGroupItem>
148+
</ListGroup>
149149
</TabPane>
150150
<TabPane tabId="2" className="p-3">
151151
<div className="message">
@@ -326,4 +326,4 @@ class FullAside extends Component {
326326
FullAside.propTypes = propTypes;
327327
FullAside.defaultProps = defaultProps;
328328

329-
export default FullAside;
329+
export default FullAside;

0 commit comments

Comments
 (0)