Skip to content

Commit 0fc0861

Browse files
guardofparadiseguardofparadise
authored
Merge pull request #8 from flatlogic/new_version_improvements
fix(Grid) css update, fix(Widgets) css, fix(FlotCharts) using pure co…
2 parents 0920ade + 7003877 commit 0fc0861

File tree

30 files changed

+104
-55
lines changed

30 files changed

+104
-55
lines changed

‎src/components/Header/Header.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -258,19 +258,19 @@ class Header extends React.Component {
258258
<span className="text-white">Philip Daineka</span>
259259
</section>
260260
<DropdownItem>
261-
<NavLink href="/profile">
261+
<NavLink href="/#/app/profile">
262262
<i className="fa fa-user fa-fw" />
263263
Profile
264264
</NavLink>
265265
</DropdownItem>
266266
<DropdownItem>
267-
<NavLink href="/calendar">
267+
<NavLink href="/#/app/extra/calendar">
268268
<i className="fa fa-calendar fa-fw" />
269269
Calendar
270270
</NavLink>
271271
</DropdownItem>
272272
<DropdownItem>
273-
<NavLink href="/inbox">
273+
<NavLink href="/#/app/inbox">
274274
<i className="fa fa-inbox fa-fw" />
275275
Inbox
276276
</NavLink>

‎src/components/Widget/Widget.js

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -190,7 +190,7 @@ class Widget extends React.Component {
190190
<section
191191
style={{display: hideWidget ? 'none' : ''}}
192192
className={
193-
classNames('widget', {'fullscreened' : !!fullscreened, 'collapsed' : !!collapseWidget}, s.widget, className, reloading ? s.reloading : '')
193+
classNames('widget', {'fullscreened' : !!fullscreened, 'collapsed' : !!collapseWidget}, s.widget, className, (reloading || fetchingData) ? s.reloading : '')
194194
} {...attributes}
195195
>
196196
{
@@ -327,10 +327,9 @@ class Widget extends React.Component {
327327
}
328328
<AnimateHeight
329329
duration={ 500 }
330-
height={ height } // see props documentation bellow
330+
height={ height }
331331
>
332332

333-
334333
<div className={`${s.widgetBody} widget-body ${bodyClass}`}>
335334
{reloading || fetchingData ? <Loader className={s.widgetLoader} size={40}/> : customBody ? (
336335
<div className="jumbotron handle bg-gray text-white mb-0">

‎src/components/Widget/Widget.module.scss

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -107,9 +107,7 @@
107107
}
108108

109109
:global {
110-
.reset-padding {
111-
padding: 15px 0 0;
112-
}
110+
113111
.loader {
114112
position: absolute;
115113
top: 0;
@@ -126,7 +124,7 @@
126124
text-align: center;
127125
}
128126
}
129-
.widget-body.p-0 {
127+
.widget-body.undo_padding {
130128
margin: $widget-padding-vertical (-$widget-padding-horizontal) (-$widget-padding-vertical);
131129

132130

‎src/pages/analytics/Analitycs.module.scss

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -63,8 +63,4 @@
6363

6464
:global .legendColorBox div {
6565
border-radius: 50%;
66-
}
67-
68-
.resetPadding {
69-
padding: 0;
70-
}
66+
}

‎src/pages/analytics/Analytics.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -260,7 +260,7 @@ class Analytics extends Component {
260260
<Col xs={12} className="mb-lg">
261261
<Widget
262262
className="pb-0"
263-
bodyClass={`mt ${s.resetPadding}`}
263+
bodyClass={`mt p-0`}
264264
title={<h4> Support <strong>Requests</strong></h4>}
265265
close settings
266266
>

‎src/pages/analytics/components/BigStat/BigStat.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ class BigStat extends Component {
3939
<div className="pb-xlg h-100">
4040
<Widget
4141
className="mb-0 h-100"
42-
bodyClass={`mt ${s.resetPadding}`}
42+
bodyClass={`mt p-0`}
4343
title={
4444
<div className="d-flex justify-content-between flex-wrap">
4545
<h4 className={cx('d-flex align-items-center pb-1', s.bigStatTitle)}>

‎src/pages/analytics/components/BigStat/BigStat.module.scss

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,4 @@
11
.bigStatTitle {
22
width: 220px;
33
margin-right: 0.5rem;
4-
}
5-
6-
.resetPadding {
7-
padding: 0;
84
}

‎src/pages/analytics/components/TableContainer/TableContainer.module.scss

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,3 +16,10 @@
1616
background-color: rgba($widget-bg-color, 0.1);
1717
}
1818
}
19+
20+
:global {
21+
.table-responsive {
22+
border-bottom-left-radius: $widget-border-radius;
23+
border-bottom-right-radius: $widget-border-radius;
24+
}
25+
}

‎src/pages/charts/apex/Apex.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import {
66
BreadcrumbItem,
77
} from 'reactstrap';
88
import ApexChart from 'react-apexcharts';
9+
import './ApexChart.module.scss';
910
import Widget from '../../../components/Widget';
1011
import chartsData from './mock';
1112

‎src/pages/charts/apex/ApexChart.module.scss

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
:global {
2+
.apexcharts-menu-item {
3+
color: #777777;
4+
}
5+
}

‎src/pages/dashboard/Dashboard.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -240,7 +240,7 @@ class Dashboard extends React.Component {
240240
title={<h6><span className="badge badge-danger">New</span> Messages</h6>}
241241
refresh close
242242
>
243-
<div className="widget-body p-0">
243+
<div className="widget-body undo_padding">
244244
<div className="list-group list-group-lg">
245245
<button className="list-group-item text-left">
246246
<span className="thumb-sm float-left mr">
@@ -366,7 +366,7 @@ class Dashboard extends React.Component {
366366
</Col>
367367

368368
<Col lg={4} xs={12}>
369-
<Widget title={<h6>Calendar</h6>} settings close bodyClass="reset-padding">
369+
<Widget title={<h6>Calendar</h6>} settings close bodyClass={"pt-2 px-0 py-0"}>
370370
<Calendar />
371371
<div className="list-group fs-mini">
372372
<button className="list-group-item text-ellipsis">

‎src/pages/dashboard/components/calendar/Calendar.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -100,7 +100,7 @@ class Calendar extends Component {
100100

101101
return (
102102
<div className={`${s.calendarRectangle}`}>
103-
<div className={`${s.calendarContent}`}>
103+
<div>
104104
<section className={`${s.mainCalendar}`}>
105105
<header className={`${s.calendarHeader}`}>
106106
<div className={`${s.calendarRow} ${s.titleHeader}`}>

‎src/pages/dashboard/components/rickshaw/Rickshaw.js

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from 'react';
22
import Rickshaw from 'rickshaw';
33
import PropTypes from 'prop-types';
4-
4+
import { connect } from 'react-redux';
55

66
class RickshawGraph extends React.Component {
77

@@ -27,6 +27,12 @@ class RickshawGraph extends React.Component {
2727
window.addEventListener('resize', this.onResizeRickshaw);
2828
}
2929

30+
componentDidUpdate(prevProps) {
31+
if (this.props.sidebarVisibility !== prevProps.sidebarVisibility) {
32+
this.onResizeRickshaw()
33+
}
34+
}
35+
3036
componentWillUnmount() {
3137
window.removeEventListener('resize', this.onResizeRickshaw);
3238
}
@@ -87,4 +93,10 @@ class RickshawGraph extends React.Component {
8793
}
8894
}
8995

90-
export default RickshawGraph;
96+
function mapStateToProps(store) {
97+
return {
98+
sidebarVisibility: store.navigation.sidebarVisibility,
99+
};
100+
}
101+
102+
export default connect(mapStateToProps)(RickshawGraph);

‎src/pages/email/components/MessageTableHeader/MessageTableHeader.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@ const MessageTableHeader = (props) => {
6363
</DropdownMenu>
6464
</UncontrolledButtonDropdown>
6565
</div>
66-
<Input placeholder="Search Messages" size="sm" onChange={e => search(e.target.value)} />
66+
<Input placeholder="Search Messages" bsSize="sm" onChange={e => search(e.target.value)} />
6767
</div>
6868
);
6969
};

‎src/pages/extra/invoice/Invoice.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ class Stats extends React.Component {
2424
<Col lg={11}>
2525
<Row className={s.root}>
2626
<Col xs={12}>
27-
<Widget bodyClass="resetPadding">
27+
<Widget bodyClass="p-0">
2828
<div className="widget">
2929
<header>
3030
<Row>

‎src/pages/extra/invoice/Invoice.module.scss

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,9 +14,6 @@
1414
.widget {
1515
padding: 10px 20px;
1616
}
17-
.resetPadding {
18-
padding: 0;
19-
}
2017
}
2118
}
2219

‎src/pages/extra/timeline/Timeline.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -102,7 +102,7 @@ class Timeline extends React.Component {
102102
<img className="rounded-circle" src={avatar} alt="..." />
103103
</span>
104104
<div className={s.commentBody}>
105-
<Input size="sm" placeholder="Write your comment..." />
105+
<Input bsSize="sm" placeholder="Write your comment..." />
106106
</div>
107107
</li>
108108
</ul>
@@ -198,7 +198,7 @@ class Timeline extends React.Component {
198198
<img className="rounded-circle" src={avatar} alt="..." />
199199
</span>
200200
<div className={s.commentBody}>
201-
<Input size="sm" placeholder="Write your comment..." />
201+
<Input bsSize="sm" placeholder="Write your comment..." />
202202
</div>
203203
</li>
204204
</ul>

‎src/pages/grid/Grid.js

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import {
1010
import Sortable from 'react-sortablejs'
1111

1212
import Widget from '../../components/Widget';
13-
import './Grid.scss';
13+
import s from './Grid.module.scss';
1414

1515
import mock from './mock';
1616

@@ -105,7 +105,7 @@ class Grid extends React.Component {
105105
widgetType="shares"
106106
prompt={true}
107107
className="shares-widget"
108-
bodyClass={"reset-padding"}
108+
bodyClass={"pt-3 px-0 py-0"}
109109
showTooltip tooltipPlacement={tooltipPlacement}
110110
title={<h6>
111111
<span className="badge badge-primary"><i className="fa fa-facebook" /></span> &nbsp;
@@ -206,6 +206,7 @@ class Grid extends React.Component {
206206
customCollapse={true}
207207
customFullscreen={true}
208208
customReload={true}
209+
bodyClass={"pt-3 px-0 py-0"}
209210
>
210211
<ul className={'news-list stretchable'}>
211212
{this.state.gridData.news.map(item => (
@@ -241,15 +242,14 @@ class Grid extends React.Component {
241242
Bruce Lee
242243
</footer>
243244
</blockquote>
244-
<p>To make a widget initially collapsed just add
245-
<code>data-widgster-collapsed=&quot;true&quot;</code> attribute
245+
<p>To make a widget initially collapsed just add <code>collapsed</code> property
246246
to <code>.widget</code>.</p>
247247
<p>To make it locked (prevent dragging) add <code>.locked</code> class.</p>
248248
</div>
249249
</Widget>
250250

251251
<Widget
252-
className="custom-gray-bg"
252+
className={s.customGrayBg}
253253
customBody={true}
254254
>
255255
</Widget>

‎src/pages/grid/Grid.scss renamed to ‎src/pages/grid/Grid.module.scss

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,8 @@
2020
}
2121

2222
&:last-child {
23-
margin-bottom: -10px;
23+
border-bottom-left-radius: $widget-border-radius;
24+
border-bottom-right-radius: $widget-border-radius;
2425
}
2526
}
2627

@@ -74,6 +75,6 @@
7475
}
7576
}
7677

77-
.custom-gray-bg {
78-
background-color: #495057;
78+
.customGrayBg {
79+
background-color: $gray-700;
7980
}

‎src/pages/product/components/Description/Description.module.scss

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -98,6 +98,8 @@
9898

9999
button {
100100
color: $gray-500;
101+
background: transparent;
102+
border: none;
101103
width: 100%;
102104
}
103105
}

‎src/pages/profile/Profile.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -167,7 +167,7 @@ const Profile = () => (
167167
</ul>
168168
</footer>
169169
</section>
170-
<Form className="mt" action="#">
170+
<Form className="mt mb-4" action="#">
171171
<FormGroup className="mb-2">
172172
<Label className="sr-only" for="new-event">New event</Label>
173173
<Input type="textarea" id="new-event" placeholder="Post something..." rows="3" />

‎src/pages/ui-elements/card/Card.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -103,7 +103,7 @@ const Cards = () => (
103103
</Card>
104104
</Col>
105105
<Col xs={12} sm={6} md={4}>
106-
<Card className="border-0">
106+
<Card className="border-0 mb-4">
107107
<CardImg top width="100%" src={reactnativeImg} alt="Card image cap" />
108108
<CardBody>
109109
<small>Technology</small><br />

‎src/pages/ui-elements/icons/Icons.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ class Icons extends React.Component {
2525

2626
render() {
2727
return (
28-
<section className={s.root}>
28+
<section className={`${s.root} mb-4`}>
2929
<ol className="breadcrumb">
3030
<li className="breadcrumb-item">YOU ARE HERE</li>
3131
<li className="breadcrumb-item active">UI Icons</li>

‎src/pages/ui-elements/modal/Modal.js

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -114,7 +114,7 @@ class ModalExample extends React.Component {
114114
...
115115
</ModalBody>
116116
<ModalFooter>
117-
<Button color="secondary" onClick={() => this.toggle('demo')}>Close</Button>
117+
<Button color="dark" onClick={() => this.toggle('demo')}>Close</Button>
118118
<Button color="primary">Save changes</Button>
119119
</ModalFooter>
120120
</Modal>
@@ -174,7 +174,7 @@ class ModalExample extends React.Component {
174174
</p>
175175
</ModalBody>
176176
<ModalFooter>
177-
<Button color="secondary" onClick={() => this.toggle('scrollingLong')}>Close</Button>
177+
<Button color="dark" onClick={() => this.toggle('scrollingLong')}>Close</Button>
178178
<Button color="primary">Save changes</Button>
179179
</ModalFooter>
180180
</Modal>
@@ -187,7 +187,7 @@ class ModalExample extends React.Component {
187187
cupiditate odio vitae? Eligendi nisi consequuntur vero tenetur nemo!
188188
</ModalBody>
189189
<ModalFooter>
190-
<Button color="secondary" onClick={() => this.toggle('large')}>Close</Button>
190+
<Button color="dark" onClick={() => this.toggle('large')}>Close</Button>
191191
<Button color="primary">Save changes</Button>
192192
</ModalFooter>
193193
</Modal>
@@ -200,7 +200,7 @@ class ModalExample extends React.Component {
200200
cupiditate odio vitae? Eligendi nisi consequuntur vero tenetur nemo!
201201
</ModalBody>
202202
<ModalFooter>
203-
<Button color="secondary" onClick={() => this.toggle('small')}>Close</Button>
203+
<Button color="dark" onClick={() => this.toggle('small')}>Close</Button>
204204
<Button color="primary">Save changes</Button>
205205
</ModalFooter>
206206
</Modal>
@@ -223,7 +223,7 @@ class ModalExample extends React.Component {
223223
</Container>
224224
</ModalBody>
225225
<ModalFooter>
226-
<Button color="secondary" onClick={() => this.toggle('launch')}>Close</Button>
226+
<Button color="dark" onClick={() => this.toggle('launch')}>Close</Button>
227227
<Button color="primary">Save changes</Button>
228228
</ModalFooter>
229229
</Modal>

0 commit comments

Comments
 (0)