fix(Grid) css update, fix(Widgets) css, fix(Widget) loading state

src/components/Header/Header.js

@@ -157,7 +157,7 @@ class Header extends React.Component {
 
  </Nav>
 
- <Form className="d-sm-down-none ml-5" inline>
+ <Form className={`d-sm-down-none ml-5 ${s.headerSearchInput}`} inline>
  <FormGroup>
  <InputGroup onFocus={this.toggleFocus} onBlur={this.toggleFocus} className={
  cx('input-group-no-border', {'focus' : !!focus})
@@ -190,7 +190,7 @@ class Header extends React.Component {
  <span>{firstUserLetter}</span>
  )}
  </span>
- <span className="small">{user.name || user.email || "Philip smith"}</span>
+ <span className={`small ${this.props.sidebarStatic ? s.adminEmail : ''}`}>{user.name || user.email || "Philip smith"}</span>
  <span className="ml-1 circle bg-warning text-white fw-bold">13</span>
  </DropdownToggle>
  <DropdownMenu right className={`${s.notificationsWrapper} py-0 animated animated-fast fadeInUp`}>
@@ -202,10 +202,10 @@ class Header extends React.Component {
  <i className="la la-cog" />
  </DropdownToggle>
  <DropdownMenu right className="super-colors">
- <DropdownItem><i className="la la-user" /> My Account</DropdownItem>
+ <DropdownItem href="/#/app/profile"><i className="la la-user" /> My Account</DropdownItem>
  <DropdownItem divider />
- <DropdownItem href="/calendar">Calendar</DropdownItem>
- <DropdownItem href="/inbox">Inbox &nbsp;&nbsp;<Badge color="danger" pill className="animated bounceIn">9</Badge></DropdownItem>
+ <DropdownItem href="/#/app/extra/calendar">Calendar</DropdownItem>
+ <DropdownItem href="/#/app/inbox">Inbox &nbsp;&nbsp;<Badge color="danger" pill className="animated bounceIn">9</Badge></DropdownItem>
  <DropdownItem divider />
  <DropdownItem onClick={this.doLogout}><i className="la la-sign-out" /> Log Out</DropdownItem>
  </DropdownMenu>
@@ -232,7 +232,8 @@ class Header extends React.Component {
  </div>
  </NavItem>
  <NavItem className="fs-lg d-md-none">
- <NavLink href="#" onClick={this.props.chatToggle}>
+ <NavLink href="#" onClick={this.toggleChat}>
+ <i className={`chat-notification-sing ${this.props.chatSidebar ? 'hide' : ''}`}></i>
  <span className="rounded rounded-lg bg-gray text-white"><i className="la la-globe" /></span>
  </NavLink>
  </NavItem>

src/components/Header/Header.module.scss

@@ -156,3 +156,17 @@
  opacity: 1;
  pointer-events: initial;
 }
+@media(max-width: 1020px) {
+ .headerSearchInput {
+ margin-left: 0!important;
+ } 
+}
+
+@media(max-width: 950px) {
+ .adminEmail {
+ display: none;
+ }
+ .headerSearchInput {
+ width: 180px;
+ }
+}

src/components/Widget/Widget.js

@@ -190,7 +190,7 @@ class Widget extends React.Component {
  <section
  style={{display: hideWidget ? 'none' : ''}} 
  className={
- classNames('widget', {'fullscreened' : !!fullscreened, 'collapsed' : !!collapseWidget}, s.widget, className, reloading ? s.reloading : '')
+ classNames('widget', {'fullscreened' : !!fullscreened, 'collapsed' : !!collapseWidget}, s.widget, className, (reloading || fetchingData) ? s.reloading : '')
  } {...attributes}
  >
  {
@@ -327,10 +327,8 @@ class Widget extends React.Component {
  }
  <AnimateHeight
  duration={ 500 }
- height={ height } // see props documentation bellow
+ height={ height }
  >
-
-
  <div className={`${s.widgetBody} widget-body ${bodyClass}`}>
  {reloading || fetchingData ? <Loader className={s.widgetLoader} size={40}/> : customBody ? (
  <div className="jumbotron handle bg-gray text-white mb-0">

src/components/Widget/Widget.module.scss

@@ -108,9 +108,6 @@
  }
 
  :global {
- .reset-padding {
- padding: 15px 0 0;
- }
  .loader {
  position: absolute;
  top: 0;
@@ -128,7 +125,7 @@
  }
  }
 
- .widget-body.p-0 {
+ .widget-body.undo_padding {
  margin: $widget-padding-vertical (-$widget-padding-horizontal) (-$widget-padding-vertical);
 
  + footer {

src/pages/analytics/Analitycs.module.scss

@@ -59,8 +59,4 @@
 
 :global .legendColorBox div {
  border-radius: 50%;
-}
-
-.resetPadding {
- padding: 0;
 }

src/pages/analytics/Analytics.js

@@ -260,7 +260,7 @@ class Analytics extends Component {
  <Col xs={12} className="mb-lg">
  <Widget
  className="pb-0"
- bodyClass={`mt ${s.resetPadding}`}
+ bodyClass={`mt p-0`}
  title={<h4> Support <strong>Requests</strong></h4>}
  close settings
  >

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

@@ -39,7 +39,7 @@ class BigStat extends Component {
  <div className="pb-xlg h-100">
  <Widget
  className="mb-0 h-100"
- bodyClass={`mt ${s.resetPadding}`}
+ bodyClass={`mt p-0`}
  title={
  <div className="d-flex justify-content-between flex-wrap">
  <h4 className={cx('d-flex align-items-center pb-1', s.bigStatTitle)}>

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

@@ -21,8 +21,4 @@
  }
  }
  }
-}
-
-.resetPadding {
- padding: 0;
 }

src/pages/charts/apex/Apex.js

@@ -6,6 +6,7 @@ import {
  BreadcrumbItem, 
 } from 'reactstrap';
 import ApexChart from 'react-apexcharts';
+import './ApexChart.module.scss';
 import Widget from '../../../components/Widget';
 import chartsData from './mock';
 

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

@@ -0,0 +1,5 @@
+:global {
+ .apexcharts-menu-item {
+ white-space: nowrap;
+ }
+}

src/pages/dashboard/Dashboard.js

@@ -240,7 +240,7 @@ class Dashboard extends React.Component {
  title={<h6><span className="badge badge-danger">New</span> Messages</h6>}
  refresh close
  >
- <div className="widget-body p-0">
+ <div className="widget-body undo_padding">
  <div className="list-group list-group-lg">
  <button className="list-group-item text-left">
  <span className="thumb-sm float-left mr">
@@ -366,7 +366,7 @@ class Dashboard extends React.Component {
  </Col>
 
  <Col lg={4} xs={12}>
- <Widget title={<h6>Calendar</h6>} settings close bodyClass={s.resetPadding}>
+ <Widget title={<h6>Calendar</h6>} settings close bodyClass={"pt-2 px-0 py-0"}>
  <Calendar />
  <div className="list-group fs-mini">
  <button className="list-group-item text-ellipsis">

src/pages/dashboard/Dashboard.module.scss

@@ -21,7 +21,3 @@
  }
  }
 }
-
-.resetPadding {
- padding: 15px 0 0;
-}

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

@@ -99,7 +99,7 @@ class Calendar extends Component {
 
  return (
  <div className={`${s.calendarRectangle}`}>
- <div className={`${s.calendarContent}`}>
+ <div>
  <section className={`${s.mainCalendar}`}>
  <header className={`${s.calendarHeader}`}>
  <div className={`${s.calendarRow} ${s.titleHeader}`}>

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import Rickshaw from 'rickshaw';
 import PropTypes from 'prop-types';
-
+import { connect } from 'react-redux';
 
 class RickshawGraph extends React.Component {
 
@@ -27,6 +27,12 @@ class RickshawGraph extends React.Component {
  window.addEventListener('resize', this.onResizeRickshaw);
  }
 
+ componentDidUpdate(prevProps) {
+ if (this.props.sidebarStatic !== prevProps.sidebarStatic) {
+ this.onResizeRickshaw()
+ }
+ }
+
  componentWillUnmount() {
  window.removeEventListener('resize', this.onResizeRickshaw);
  }
@@ -87,4 +93,10 @@ class RickshawGraph extends React.Component {
  }
 }
 
-export default RickshawGraph;
+function mapStateToProps(store) {
+ return {
+ sidebarStatic: store.navigation.sidebarStatic,
+ };
+}
+
+export default connect(mapStateToProps)(RickshawGraph);

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

@@ -63,7 +63,7 @@ const MessageTableHeader = (props) => {
  </DropdownMenu>
  </UncontrolledButtonDropdown>
  </div>
- <Input placeholder="Search Messages" size="sm" onChange={e => search(e.target.value)} />
+ <Input placeholder="Search Messages" bsSize="sm" onChange={e => search(e.target.value)} />
  </div>
  );
 };

src/pages/extra/invoice/Invoice.js

@@ -24,7 +24,7 @@ class Stats extends React.Component {
  <Col lg={11}>
  <Row className={s.root}>
  <Col xs={12}>
- <Widget bodyClass={s.resetPadding}>
+ <Widget bodyClass={"p-0"}>
  <div className="widget">
  <header>
  <Row>

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

@@ -14,8 +14,4 @@
  padding: 10px 20px;
  }
  }
-}
-
-.resetPadding {
- padding: 0;
 }

src/pages/extra/timeline/Timeline.js

@@ -102,7 +102,7 @@ class Timeline extends React.Component {
  <img className="rounded-circle" src={avatar} alt="..." />
  </span>
  <div className={s.commentBody}>
- <Input size="sm" placeholder="Write your comment..." />
+ <Input bsSize="sm" placeholder="Write your comment..." />
  </div>
  </li>
  </ul>
@@ -198,7 +198,7 @@ class Timeline extends React.Component {
  <img className="rounded-circle" src={avatar} alt="..." />
  </span>
  <div className={s.commentBody}>
- <Input size="sm" placeholder="Write your comment..." />
+ <Input bsSize="sm" placeholder="Write your comment..." />
  </div>
  </li>
  </ul>

src/pages/grid/Grid.js

@@ -10,7 +10,7 @@ import {
 import Sortable from 'react-sortablejs'
 
 import Widget from '../../components/Widget';
-import './Grid.scss';
+import s from './Grid.module.scss';
 
 import mock from './mock';
 
@@ -105,7 +105,7 @@ class Grid extends React.Component {
  widgetType="shares"
  prompt={true}
  className="shares-widget"
- bodyClass={"reset-padding"}
+ bodyClass={"pt-3 px-0 py-0"}
  showTooltip tooltipPlacement={tooltipPlacement}
  title={<h6>
  <span className="badge badge-primary"><i className="fa fa-facebook" /></span> &nbsp;
@@ -206,6 +206,7 @@ class Grid extends React.Component {
  customCollapse={true}
  customFullscreen={true}
  customReload={true}
+ bodyClass={"pt-3 px-0 py-0"}
  >
  <ul className={'news-list stretchable'}>
  {this.state.gridData.news.map(item => (
@@ -241,15 +242,14 @@ class Grid extends React.Component {
  Bruce Lee
  </footer>
  </blockquote>
- <p>To make a widget initially collapsed just add
- <code>data-widgster-collapsed=&quot;true&quot;</code> attribute
+ <p>To make a widget initially collapsed just add <code>collapsed</code> property
  to <code>.widget</code>.</p>
  <p>To make it locked (prevent dragging) add <code>.locked</code> class.</p>
  </div>
  </Widget>
 
  <Widget
- className="custom-gray-bg"
+ className={s.customGrayBg}
  customBody={true}
  >
  </Widget>

src/pages/grid/Grid.scss → src/pages/grid/Grid.module.scss

@@ -20,7 +20,7 @@
  }
 
  &:last-child {
- margin-bottom: -10px;
+ margin-bottom: 0px;
  }
  }
 
@@ -60,52 +60,6 @@
  }
 }
 
-.react-grid-layout {
- position: relative;
- width: 100%;
- transition: height 200ms ease;
-}
-.react-grid-item {
- transition: all 200ms ease;
- transition-property: left, top;
-}
-.react-grid-item.cssTransforms {
- transition-property: transform;
-}
-.react-grid-item.resizing {
- z-index: 1;
- will-change: width, height;
-}
-
-.react-grid-item.react-draggable-dragging {
- transition: none;
- z-index: 3;
- will-change: transform;
-}
-
-.react-grid-item.dropping {
- visibility: hidden;
-}
-
-.react-grid-item > .react-resizable-handle {
- position: absolute;
- width: 20px;
- height: 20px;
- bottom: 0;
- right: 0;
- cursor: se-resize;
-}
-
-.react-grid-item > .react-resizable-handle::after {
- content: "";
- position: absolute;
- right: 3px;
- bottom: 3px;
- width: 5px;
- height: 5px;
- border-right: 2px solid rgba(0, 0, 0, 0.4);
- border-bottom: 2px solid rgba(0, 0, 0, 0.4);
-}
 
 /* SHARES LIST */
 :global {
@@ -121,6 +75,6 @@
  }
 }
 
-.custom-gray-bg {
- background-color: #495057;
+.customGrayBg {
+ background-color: $gray-700;
 }

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

@@ -98,6 +98,8 @@
  button {
  color: $gray-500;
  width: 100%;
+ background: transparent;
+ border: none;
  }
  }