Merge pull request #3 from flatlogic/new_version_improvements

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

Author: guardofparadise

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 renamed to 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;
     }
   }