solved creativetimofficial/ct-material-dashboard-pro-react#40 (comment)…

… ; updated dependecies ; made changes due to dependecies updated
creativetimofficial · Jul 23, 2018 · 00c0c11 · 00c0c11
1 parent 03c3a9c
commit 00c0c11
Show file tree

Hide file tree

Showing 22 changed files with 203 additions and 72 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,32 @@
+## [1.3.0] 2018-07-27
+### Bug Fixing
+- Added resize event listener for window ([see this issue here](https://github.com/creativetimofficial/ct-material-dashboard-pro-react/issues/40#issuecomment-406983150))
+- Added issues template file
+### Major style changes
+- Added styles for `svg`'s, **font-awesome** classes and `.material-icons` class inside
+  - `src/assets/jss/material-dashboard-react/views/dashboardStyle.jsx`
+  - `src/assets/jss/material-dashboard-react/components/buttonStyle.jsx`
+  - `src/assets/jss/material-dashboard-react/components/cardFooterStyle.jsx`
+  - `src/assets/jss/material-dashboard-react/components/cardHeaderStyle.jsx`
+  - `src/assets/jss/material-dashboard-react/components/headerLinksStyle.jsx`
+  - `src/assets/jss/material-dashboard-react/components/customTabsStyle.jsx`
+- Others
+  - `src/assets/jss/material-dashboard-react/tooltipStyle.jsx`
+### Dropped components
+### Added components
+- `src/components/Grid/GridContainer.jsx` (instead of MUI's `<Grid container...` component)
+### Deleted dependencies
+### Added dependencies
+### Update dependencies
+- `@material-ui/core v1.2.1` to `@material-ui/core v1.4.1`
+- `@material-ui/icons v1.1.0` to `@material-ui/icons v2.0.0`
+- `@types/googlemaps v3.30.9` to `@types/googlemaps v3.30.11`
+- `ajv v6.5.1` to `ajv v6.5.2`
+- `react v16.4.0` to `react v16.4.1`
+- `react-dom v16.4.0` to `react-dom v16.4.1`
+- `react-swipeable-views v0.12.13` to `react-swipeable-views v0.12.15`
+
+
 ## [1.3.0] 2018-06-15
 ### Bug Fixing
 - Changed import from `material-ui` to `@material-ui/core`

diff --git a/ISSUE_TEMPLATE.md b/ISSUE_TEMPLATE.md
@@ -0,0 +1,40 @@
+# Prerequisites
+
+Please answer the following questions for yourself before submitting an issue.
+
+- [ ] I am running the latest version
+- [ ] I checked the documentation and found no answer
+- [ ] I checked to make sure that this issue has not already been filed
+- [ ] I'm reporting the issue to the correct repository (for multi-repository projects)
+
+# Expected Behavior
+
+Please describe the behavior you are expecting
+
+# Current Behavior
+
+What is the current behavior?
+
+# Failure Information (for bugs)
+
+Please help provide information about the failure if this is a bug. If it is not a bug, please remove the rest of this template.
+
+## Steps to Reproduce
+
+Please provide detailed steps for reproducing the issue.
+
+1. step 1
+2. step 2
+3. you get it...
+
+## Context
+
+Please provide any relevant information about your setup. This is important in case the issue is not reproducible except for under certain conditions.
+
+* Device:
+* Operating System:
+* Browser and Version:
+
+## Failure Logs
+
+Please include any relevant log snippets or files here.
diff --git a/package.json b/package.json
@@ -3,24 +3,24 @@
   "version": "1.3.0",
   "description": "Material Dashboard React. Coded by Creative Tim",
   "private": false,
-  "main": "index.js",
+  "main": "src/index.js",
   "dependencies": {
-    "@material-ui/core": "1.2.1",
-    "@material-ui/icons": "1.1.0",
-    "@types/googlemaps": "3.30.9",
+    "@material-ui/core": "1.4.1",
+    "@material-ui/icons": "2.0.0",
+    "@types/googlemaps": "3.30.11",
     "@types/markerclustererplus": "2.1.33",
-    "ajv": "6.5.1",
+    "ajv": "6.5.2",
     "chartist": "0.10.1",
     "classnames": "2.2.6",
     "npm-run-all": "4.1.3",
     "perfect-scrollbar": "1.4.0",
-    "react": "16.4.0",
+    "react": "16.4.1",
     "react-chartist": "0.13.1",
-    "react-dom": "16.4.0",
+    "react-dom": "16.4.1",
     "react-google-maps": "9.4.5",
     "react-router-dom": "4.3.1",
     "react-scripts": "1.1.4",
-    "react-swipeable-views": "0.12.13"
+    "react-swipeable-views": "0.12.15"
   },
   "scripts": {
     "start": "react-scripts start",

diff --git a/src/assets/jss/material-dashboard-react/components/buttonStyle.jsx b/src/assets/jss/material-dashboard-react/components/buttonStyle.jsx
@@ -40,7 +40,7 @@ const buttonStyle = {
       boxShadow:
         "0 14px 26px -12px rgba(153, 153, 153, 0.42), 0 4px 23px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(153, 153, 153, 0.2)"
     },
-    "& .fab,& .fas,& .far,& .fal": {
+    "& .fab,& .fas,& .far,& .fal, &.material-icons": {
       position: "relative",
       display: "inline-block",
       top: "0",
@@ -60,7 +60,7 @@ const buttonStyle = {
       verticalAlign: "middle"
     },
     "&$justIcon": {
-      "& .fab,& .fas,& .far,& .fal": {
+      "& .fab,& .fas,& .far,& .fal,& .material-icons": {
         marginTop: "0px",
         position: "absolute",
         width: "100%",
@@ -219,15 +219,15 @@ const buttonStyle = {
     height: "41px",
     minWidth: "41px",
     width: "41px",
-    "& .fab,& .fas,& .far,& .fal,& svg": {
+    "& .fab,& .fas,& .far,& .fal,& svg,& .material-icons": {
       marginRight: "0px"
     },
     "&$lg": {
       height: "57px",
       minWidth: "57px",
       width: "57px",
       lineHeight: "56px",
-      "& .fab,& .fas,& .far,& .fal": {
+      "& .fab,& .fas,& .far,& .fal,& .material-icons": {
         fontSize: "32px",
         lineHeight: "56px"
       },
@@ -240,7 +240,7 @@ const buttonStyle = {
       height: "30px",
       minWidth: "30px",
       width: "30px",
-      "& .fab,& .fas,& .far,& .fal": {
+      "& .fab,& .fas,& .far,& .fal,& .material-icons": {
         fontSize: "17px",
         lineHeight: "29px"
       },

diff --git a/src/assets/jss/material-dashboard-react/components/cardFooterStyle.jsx b/src/assets/jss/material-dashboard-react/components/cardFooterStyle.jsx
@@ -28,7 +28,14 @@ const cardFooterStyle = {
       marginLeft: "3px",
       width: "16px",
       height: "16px"
-    }
+    },
+    "& .fab,& .fas,& .far,& .fal,& .material-icons": {
+      fontSize: "16px",
+      position: "relative",
+      top: "4px",
+      marginRight: "3px",
+      marginLeft: "3px",
+    },
   },
   cardFooterChart: {
     borderTop: "1px solid #eee"

diff --git a/src/assets/jss/material-dashboard-react/components/cardHeaderStyle.jsx b/src/assets/jss/material-dashboard-react/components/cardHeaderStyle.jsx
@@ -37,12 +37,14 @@ const cardHeaderStyle = {
       height: "36px",
       margin: "10px 10px 4px"
     },
-    "&$cardHeaderStats i": {
+    "&$cardHeaderStats i,&$cardHeaderStats .material-icons": {
       fontSize: "36px",
       lineHeight: "56px",
       width: "56px",
       height: "56px",
-      textAlign: "center"
+      textAlign: "center",
+      overflow: "unset",
+      marginBottom: "1px"
     },
     "&$cardHeaderStats$cardHeaderIcon": {
       textAlign: "right"
@@ -65,7 +67,7 @@ const cardHeaderStyle = {
       background: "transparent",
       boxShadow: "none"
     },
-    "& i": {
+    "& i,& .material-icons": {
       width: "33px",
       height: "33px",
       textAlign: "center",

diff --git a/src/assets/jss/material-dashboard-react/components/customTabsStyle.jsx b/src/assets/jss/material-dashboard-react/components/customTabsStyle.jsx
@@ -50,7 +50,7 @@ const customTabsStyle = {
     height: "unset !important",
     maxWidth: "unset !important",
     maxHeight: "unset !important",
-    "& > svg": {
+    "& > svg,& > .material-icons": {
       verticalAlign: "middle",
       margin: "-1px 5px 0 0"
     }

diff --git a/src/assets/jss/material-dashboard-react/components/headerLinksStyle.jsx b/src/assets/jss/material-dashboard-react/components/headerLinksStyle.jsx
@@ -41,6 +41,14 @@ const headerLinksStyle = theme => ({
         marginRight: "15px",
         marginLeft: "-15px"
       },
+      "& .fab,& .fas,& .far,& .fal,& .material-icons": {
+        fontSize: "24px",
+        lineHeight: "30px",
+        width: "24px",
+        height: "30px",
+        marginRight: "15px",
+        marginLeft: "-15px"
+      },
       "& > span": {
         justifyContent: "flex-start"
       }

diff --git a/src/assets/jss/material-dashboard-react/components/sidebarStyle.jsx b/src/assets/jss/material-dashboard-react/components/sidebarStyle.jsx
@@ -142,6 +142,8 @@ const sidebarStyle = theme => ({
   itemIcon: {
     width: "24px",
     height: "30px",
+    fontSize: "24px",
+    lineHeight: "30px",
     float: "left",
     marginRight: "15px",
     textAlign: "center",

diff --git a/src/assets/jss/material-dashboard-react/tooltipStyle.jsx b/src/assets/jss/material-dashboard-react/tooltipStyle.jsx
@@ -2,9 +2,7 @@ const tooltipStyle = {
   tooltip: {
     padding: "10px 15px",
     minWidth: "130px",
-    color: "#555555",
     lineHeight: "1.7em",
-    background: "#FFFFFF",
     border: "none",
     borderRadius: "3px",
     boxShadow:

diff --git a/src/assets/jss/material-dashboard-react/views/dashboardStyle.jsx b/src/assets/jss/material-dashboard-react/views/dashboardStyle.jsx
@@ -18,7 +18,15 @@ const dashboardStyle = {
       width: "16px",
       height: "16px",
       position: "relative",
-      marginRight: "3px"
+      marginRight: "3px",
+      marginLeft: "3px"
+    },
+    "& .fab,& .fas,& .far,& .fal,& .material-icons": {
+      top: "4px",
+      fontSize: "16px",
+      position: "relative",
+      marginRight: "3px",
+      marginLeft: "3px"
     }
   },
   cardCategory: {

diff --git a/src/components/CustomTabs/CustomTabs.jsx b/src/components/CustomTabs/CustomTabs.jsx
@@ -48,7 +48,8 @@ class CustomTabs extends React.Component {
             onChange={this.handleChange}
             classes={{
               root: classes.tabsRoot,
-              indicator: classes.displayNone
+              indicator: classes.displayNone,
+              scrollButtons: classes.displayNone
             }}
             scrollable
             scrollButtons="auto"

diff --git a/src/components/Grid/GridContainer.jsx b/src/components/Grid/GridContainer.jsx
@@ -0,0 +1,21 @@
+import React from "react";
+// @material-ui/core components
+import withStyles from "@material-ui/core/styles/withStyles";
+import Grid from "@material-ui/core/Grid";
+
+const style = {
+  grid: {
+    margin: "0 -15px !important"
+  }
+};
+
+function GridContainer(props) {
+  const { classes, children, ...rest } = props;
+  return (
+    <Grid container {...rest} className={classes.grid}>
+      {children}
+    </Grid>
+  );
+}
+
+export default withStyles(style)(GridContainer);
diff --git a/src/components/Sidebar/Sidebar.jsx b/src/components/Sidebar/Sidebar.jsx
@@ -10,6 +10,7 @@ import List from "@material-ui/core/List";
 import ListItem from "@material-ui/core/ListItem";
 import ListItemIcon from "@material-ui/core/ListItemIcon";
 import ListItemText from "@material-ui/core/ListItemText";
+import Icon from "@material-ui/core/Icon";
 // core components
 import HeaderLinks from "components/Header/HeaderLinks.jsx";
 
@@ -49,7 +50,9 @@ const Sidebar = ({ ...props }) => {
           >
             <ListItem button className={classes.itemLink + listItemClasses}>
               <ListItemIcon className={classes.itemIcon + whiteFontClasses}>
-                <prop.icon />
+                {
+                  typeof prop.icon === "string" ? <Icon>{prop.icon}</Icon>:<prop.icon />
+                }
               </ListItemIcon>
               <ListItemText
                 primary={prop.sidebarName}

diff --git a/src/layouts/Dashboard/Dashboard.jsx b/src/layouts/Dashboard/Dashboard.jsx
@@ -30,19 +30,29 @@ const switchRoutes = (
 );
 
 class App extends React.Component {
-  state = {
-    mobileOpen: false
-  };
+  constructor(props){
+    super(props);
+    this.state = {
+      mobileOpen: false
+    };
+    this.resizeFunction = this.resizeFunction.bind(this);
+  }
   handleDrawerToggle = () => {
     this.setState({ mobileOpen: !this.state.mobileOpen });
   };
   getRoute() {
     return this.props.location.pathname !== "/maps";
   }
+  resizeFunction(){
+    if(window.innerWidth >= 960){
+      this.setState({mobileOpen: false});
+    }
+  }
   componentDidMount() {
     if (navigator.platform.indexOf("Win") > -1) {
       const ps = new PerfectScrollbar(this.refs.mainPanel);
     }
+    window.addEventListener("resize", this.resizeFunction);
   }
   componentDidUpdate(e) {
     if (e.history.location.pathname !== e.location.pathname) {
@@ -52,6 +62,9 @@ class App extends React.Component {
       }
     }
   }
+  componentWillUnmount(){
+    window.removeEventListener("resize", this.resizeFunction);
+  }
   render() {
     const { classes, ...rest } = this.props;
     return (

diff --git a/src/routes/dashboard.jsx b/src/routes/dashboard.jsx
@@ -1,7 +1,7 @@
 // @material-ui/icons
 import Dashboard from "@material-ui/icons/Dashboard";
 import Person from "@material-ui/icons/Person";
-import ContentPaste from "@material-ui/icons/ContentPaste";
+// import ContentPaste from "@material-ui/icons/ContentPaste";
 import LibraryBooks from "@material-ui/icons/LibraryBooks";
 import BubbleChart from "@material-ui/icons/BubbleChart";
 import LocationOn from "@material-ui/icons/LocationOn";
@@ -36,7 +36,7 @@ const dashboardRoutes = [
     path: "/table",
     sidebarName: "Table List",
     navbarName: "Table List",
-    icon: ContentPaste,
+    icon: "content_paste",
     component: TableList
   },
   {