Merged PR 29: cleanup
Tudor Stanciu
commit
5be2561abb
|
|
@ -0,0 +1,2 @@
|
|||
REACT_APP_IDENTITY_AUTHENTICATION_URL=https://toodle.ddns.net/identity-server-api/identity/authenticate?UserName={username}&Password={password}
|
||||
REACT_APP_ENABLE_TEMPLATE_CONTENT=True
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
PUBLIC_URL=/cdn-admin/
|
||||
REACT_APP_IDENTITY_AUTHENTICATION_URL=https://toodle.ddns.net/identity-server-api/identity/authenticate?UserName={username}&Password={password}
|
||||
REACT_APP_ENABLE_TEMPLATE_CONTENT=False
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -22,3 +22,5 @@
|
|||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
|
||||
.eslintcache
|
||||
|
|
@ -2,5 +2,5 @@
|
|||
"tabWidth": 2,
|
||||
"singleQuote": false,
|
||||
"semi": true,
|
||||
"trailingComma": "all"
|
||||
"trailingComma": "none"
|
||||
}
|
||||
21
LICENSE.txt
21
LICENSE.txt
|
|
@ -1,21 +0,0 @@
|
|||
The MIT License
|
||||
|
||||
Copyright (c) 2019 Flatlogic LLC.
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in
|
||||
all copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
||||
THE SOFTWARE.
|
||||
10
README.md
10
README.md
|
|
@ -1,24 +1,18 @@
|
|||
# React Material Admin — Material-UI Dashboard Template
|
||||
# CDN Admin — CDN Administration application
|
||||
|
||||
Built with [React](https://facebook.github.io/react/), [Material-UI](https://material-ui.com), [React Router](https://reacttraining.com/react-router/).
|
||||
**No jQuery and Bootstrap!**
|
||||
|
||||
**This version uses React 16.14.0, React Router v5, MaterialUI v4, built with React Hooks and React Context (No Redux)**
|
||||
|
||||
[View Demo](https://flatlogic.com/templates/react-material-admin/demo) | [Download](https://github.com/flatlogic/react-material-admin/archive/master.zip) | [More templates](https://flatlogic.com/templates) | [Support forum](https://flatlogic.com/forum)
|
||||
[View Demo](https://toodle.ddns.net/cdn-admin-demo) | [Download](https://dev.azure.com/tstanciu94/CDN) | [More projects](https://toodle.ddns.net/heimdall) | [Support forum](https://toodle.ddns.net/forum)
|
||||
|
||||
[](https://flatlogic.com/admin-dashboards/react-material-admin/demo)
|
||||
|
||||
## Full Version
|
||||
|
||||
This is a limited version of [**Full React Material Admin**](https://flatlogic.com/templates/react-material-admin-full/demo) with more components, pages and theme support.
|
||||
|
||||
## Features
|
||||
|
||||
- React (**16.14.0**)
|
||||
- React Hooks
|
||||
- React Context
|
||||
- **No jQuery and Bootstrap!**
|
||||
- Mobile friendly layout (responsive)
|
||||
- Create-react-app under the hood
|
||||
- React Router v5
|
||||
|
|
|
|||
67
changelog.md
67
changelog.md
|
|
@ -1,67 +0,0 @@
|
|||
# Changelog
|
||||
|
||||
# [1.3.2]
|
||||
|
||||
### Updated
|
||||
- Packages updated
|
||||
- Edited README.md
|
||||
|
||||
# [1.3.1]
|
||||
|
||||
### Updated
|
||||
- Added link to flatlogic on login and register pages
|
||||
|
||||
# [1.3.0]
|
||||
|
||||
### Updated
|
||||
- Update packages
|
||||
|
||||
### Fixed
|
||||
- Header button on md adjusting
|
||||
- Dashboard page make more responsive
|
||||
- Notification page fix
|
||||
- Tables page fix TableBody paddings
|
||||
|
||||
# [1.2.3]
|
||||
|
||||
### Updated
|
||||
- Fixed security vulnerabilities in dependencies
|
||||
|
||||
# [1.2.2]
|
||||
|
||||
### Updated
|
||||
- Packages updated
|
||||
|
||||
# [1.2.1]
|
||||
|
||||
### Updated
|
||||
- Packages updated
|
||||
|
||||
### Fixed
|
||||
- Sign up name type of input
|
||||
- Dot component size prop
|
||||
- Performance errors
|
||||
|
||||
# [1.2.0]
|
||||
|
||||
### Updated
|
||||
- Packages update
|
||||
- Link to Full version
|
||||
|
||||
### Fixed
|
||||
- User login state improvements
|
||||
|
||||
## [1.1.0]
|
||||
|
||||
### New Feactures
|
||||
|
||||
- React v16.8.6
|
||||
- React Router v5
|
||||
- new React Hooks
|
||||
- Material UI v4.3
|
||||
|
||||
Bug fixes
|
||||
|
||||
## [1.0.0]
|
||||
|
||||
Initial version of the project
|
||||
|
|
@ -1,25 +0,0 @@
|
|||
{
|
||||
"files": {
|
||||
"main.js": "./static/js/main.fc3e922e.chunk.js",
|
||||
"main.js.map": "./static/js/main.fc3e922e.chunk.js.map",
|
||||
"runtime-main.js": "./static/js/runtime-main.4862f1b0.js",
|
||||
"runtime-main.js.map": "./static/js/runtime-main.4862f1b0.js.map",
|
||||
"static/css/2.637eb612.chunk.css": "./static/css/2.637eb612.chunk.css",
|
||||
"static/js/2.af6eef2b.chunk.js": "./static/js/2.af6eef2b.chunk.js",
|
||||
"static/js/2.af6eef2b.chunk.js.map": "./static/js/2.af6eef2b.chunk.js.map",
|
||||
"index.html": "./index.html",
|
||||
"precache-manifest.9910cad913c1899724ce0a968a9630a0.js": "./precache-manifest.9910cad913c1899724ce0a968a9630a0.js",
|
||||
"service-worker.js": "./service-worker.js",
|
||||
"static/css/2.637eb612.chunk.css.map": "./static/css/2.637eb612.chunk.css.map",
|
||||
"static/js/2.af6eef2b.chunk.js.LICENSE.txt": "./static/js/2.af6eef2b.chunk.js.LICENSE.txt",
|
||||
"static/media/font-awesome.min.css": "./static/media/fontawesome-webfont.fee66e71.woff",
|
||||
"static/media/google.svg": "./static/media/google.09aea0f5.svg",
|
||||
"static/media/logo.svg": "./static/media/logo.3d432ca2.svg"
|
||||
},
|
||||
"entrypoints": [
|
||||
"static/js/runtime-main.4862f1b0.js",
|
||||
"static/css/2.637eb612.chunk.css",
|
||||
"static/js/2.af6eef2b.chunk.js",
|
||||
"static/js/main.fc3e922e.chunk.js"
|
||||
]
|
||||
}
|
||||
BIN
docs/favicon.ico
BIN
docs/favicon.ico
Binary file not shown.
|
Before Width: | Height: | Size: 3.8 KiB |
|
|
@ -1 +0,0 @@
|
|||
<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="shortcut icon" href="./favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"/><meta name="theme-color" content="#000000"/><link rel="manifest" href="./manifest.json"/><title>React Material Admin</title><meta name="description" content="React Material Admin is a React Template built with Material-UI"><meta name="keywords" content="react material, material ui admin, react template, react material admin, react material dashboard"><meta name="author" content="Flatlogic LLC."><link href="./static/css/2.637eb612.chunk.css" rel="stylesheet"></head><body style="font-family:Roboto,sans-serif"><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script>!function(e){function r(r){for(var n,a,i=r[0],l=r[1],f=r[2],p=0,s=[];p<i.length;p++)a=i[p],Object.prototype.hasOwnProperty.call(o,a)&&o[a]&&s.push(o[a][0]),o[a]=0;for(n in l)Object.prototype.hasOwnProperty.call(l,n)&&(e[n]=l[n]);for(c&&c(r);s.length;)s.shift()();return u.push.apply(u,f||[]),t()}function t(){for(var e,r=0;r<u.length;r++){for(var t=u[r],n=!0,i=1;i<t.length;i++){var l=t[i];0!==o[l]&&(n=!1)}n&&(u.splice(r--,1),e=a(a.s=t[0]))}return e}var n={},o={1:0},u=[];function a(r){if(n[r])return n[r].exports;var t=n[r]={i:r,l:!1,exports:{}};return e[r].call(t.exports,t,t.exports,a),t.l=!0,t.exports}a.m=e,a.c=n,a.d=function(e,r,t){a.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},a.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},a.t=function(e,r){if(1&r&&(e=a(e)),8&r)return e;if(4&r&&"object"==typeof e&&e&&e.__esModule)return e;var t=Object.create(null);if(a.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:e}),2&r&&"string"!=typeof e)for(var n in e)a.d(t,n,function(r){return e[r]}.bind(null,n));return t},a.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return a.d(r,"a",r),r},a.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},a.p="./";var i=this["webpackJsonpreact-material-admin"]=this["webpackJsonpreact-material-admin"]||[],l=i.push.bind(i);i.push=r,i=i.slice();for(var f=0;f<i.length;f++)r(i[f]);var c=l;t()}([])</script><script src="./static/js/2.af6eef2b.chunk.js"></script><script src="./static/js/main.fc3e922e.chunk.js"></script></body></html>
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
{
|
||||
"short_name": "React Material Admin",
|
||||
"name": "React Material Admin is a React Template built with Material-UI",
|
||||
"icons": [
|
||||
{
|
||||
"src": "favicon.ico",
|
||||
"sizes": "64x64 32x32 24x24 16x16",
|
||||
"type": "image/x-icon"
|
||||
}
|
||||
],
|
||||
"start_url": ".",
|
||||
"display": "standalone",
|
||||
"theme_color": "#536DFE",
|
||||
"background_color": "#ffffff"
|
||||
}
|
||||
|
|
@ -1,54 +0,0 @@
|
|||
self.__precacheManifest = (self.__precacheManifest || []).concat([
|
||||
{
|
||||
"revision": "e5348224acfeb02d7e11ea3c1731985e",
|
||||
"url": "./index.html"
|
||||
},
|
||||
{
|
||||
"revision": "b12e029207b94b413809",
|
||||
"url": "./static/css/2.637eb612.chunk.css"
|
||||
},
|
||||
{
|
||||
"revision": "b12e029207b94b413809",
|
||||
"url": "./static/js/2.af6eef2b.chunk.js"
|
||||
},
|
||||
{
|
||||
"revision": "7d02737b1000ff1e4aedf1ef380f6e7b",
|
||||
"url": "./static/js/2.af6eef2b.chunk.js.LICENSE.txt"
|
||||
},
|
||||
{
|
||||
"revision": "41a71acbec3f321f5a82",
|
||||
"url": "./static/js/main.fc3e922e.chunk.js"
|
||||
},
|
||||
{
|
||||
"revision": "f6f2b74c08f9ec6d372d",
|
||||
"url": "./static/js/runtime-main.4862f1b0.js"
|
||||
},
|
||||
{
|
||||
"revision": "674f50d287a8c48dc19ba404d20fe713",
|
||||
"url": "./static/media/fontawesome-webfont.674f50d2.eot"
|
||||
},
|
||||
{
|
||||
"revision": "912ec66d7572ff821749319396470bde",
|
||||
"url": "./static/media/fontawesome-webfont.912ec66d.svg"
|
||||
},
|
||||
{
|
||||
"revision": "af7ae505a9eed503f8b8e6982036873e",
|
||||
"url": "./static/media/fontawesome-webfont.af7ae505.woff2"
|
||||
},
|
||||
{
|
||||
"revision": "b06871f281fee6b241d60582ae9369b9",
|
||||
"url": "./static/media/fontawesome-webfont.b06871f2.ttf"
|
||||
},
|
||||
{
|
||||
"revision": "fee66e712a8a08eef5805a46892932ad",
|
||||
"url": "./static/media/fontawesome-webfont.fee66e71.woff"
|
||||
},
|
||||
{
|
||||
"revision": "09aea0f59807f6f4f66af7f5719cba9e",
|
||||
"url": "./static/media/google.09aea0f5.svg"
|
||||
},
|
||||
{
|
||||
"revision": "3d432ca2badb7e0130b379f9162b99b1",
|
||||
"url": "./static/media/logo.3d432ca2.svg"
|
||||
}
|
||||
]);
|
||||
|
|
@ -1,39 +0,0 @@
|
|||
/**
|
||||
* Welcome to your Workbox-powered service worker!
|
||||
*
|
||||
* You'll need to register this file in your web app and you should
|
||||
* disable HTTP caching for this file too.
|
||||
* See https://goo.gl/nhQhGp
|
||||
*
|
||||
* The rest of the code is auto-generated. Please don't update this file
|
||||
* directly; instead, make changes to your Workbox build configuration
|
||||
* and re-run your build process.
|
||||
* See https://goo.gl/2aRDsh
|
||||
*/
|
||||
|
||||
importScripts("https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-sw.js");
|
||||
|
||||
importScripts(
|
||||
"./precache-manifest.9910cad913c1899724ce0a968a9630a0.js"
|
||||
);
|
||||
|
||||
self.addEventListener('message', (event) => {
|
||||
if (event.data && event.data.type === 'SKIP_WAITING') {
|
||||
self.skipWaiting();
|
||||
}
|
||||
});
|
||||
|
||||
workbox.core.clientsClaim();
|
||||
|
||||
/**
|
||||
* The workboxSW.precacheAndRoute() method efficiently caches and responds to
|
||||
* requests for URLs in the manifest.
|
||||
* See https://goo.gl/S9QRab
|
||||
*/
|
||||
self.__precacheManifest = [].concat(self.__precacheManifest || []);
|
||||
workbox.precaching.precacheAndRoute(self.__precacheManifest, {});
|
||||
|
||||
workbox.routing.registerNavigationRoute(workbox.precaching.getCacheKeyForURL("./index.html"), {
|
||||
|
||||
blacklist: [/^\/_/,/\/[^\/?]+\.[^\/]+$/],
|
||||
});
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1,102 +0,0 @@
|
|||
/*
|
||||
object-assign
|
||||
(c) Sindre Sorhus
|
||||
@license MIT
|
||||
*/
|
||||
|
||||
/*!
|
||||
* $script.js JS loader & dependency manager
|
||||
* https://github.com/ded/script.js
|
||||
* (c) Dustin Diaz 2014 | License MIT
|
||||
*/
|
||||
|
||||
/*!
|
||||
Copyright (c) 2017 Jed Watson.
|
||||
Licensed under the MIT License (MIT), see
|
||||
http://jedwatson.github.io/classnames
|
||||
*/
|
||||
|
||||
/*!
|
||||
* ApexCharts v3.20.0
|
||||
* (c) 2018-2020 Juned Chhipa
|
||||
* Released under the MIT License.
|
||||
*/
|
||||
|
||||
/*! decimal.js-light v2.5.0 https://github.com/MikeMcl/decimal.js-light/LICENCE */
|
||||
|
||||
/*! svg.draggable.js - v2.2.2 - 2019-01-08
|
||||
* https://github.com/svgdotjs/svg.draggable.js
|
||||
* Copyright (c) 2019 Wout Fierens; Licensed MIT */
|
||||
|
||||
/*! svg.filter.js - v2.0.2 - 2016-02-24
|
||||
* https://github.com/wout/svg.filter.js
|
||||
* Copyright (c) 2016 Wout Fierens; Licensed MIT */
|
||||
|
||||
/**
|
||||
* A better abstraction over CSS.
|
||||
*
|
||||
* @copyright Oleg Isonen (Slobodskoi) / Isonen 2014-present
|
||||
* @website https://github.com/cssinjs/jss
|
||||
* @license MIT
|
||||
*/
|
||||
|
||||
/** @license React v0.19.1
|
||||
* scheduler.production.min.js
|
||||
*
|
||||
* Copyright (c) Facebook, Inc. and its affiliates.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*/
|
||||
|
||||
/** @license React v16.13.1
|
||||
* react-dom.production.min.js
|
||||
*
|
||||
* Copyright (c) Facebook, Inc. and its affiliates.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*/
|
||||
|
||||
/** @license React v16.13.1
|
||||
* react-is.production.min.js
|
||||
*
|
||||
* Copyright (c) Facebook, Inc. and its affiliates.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*/
|
||||
|
||||
/** @license React v16.13.1
|
||||
* react.production.min.js
|
||||
*
|
||||
* Copyright (c) Facebook, Inc. and its affiliates.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*/
|
||||
|
||||
/**!
|
||||
* @fileOverview Kickass library to create and place poppers near their reference elements.
|
||||
* @version 1.16.1-lts
|
||||
* @license
|
||||
* Copyright (c) 2016 Federico Zivolo and contributors
|
||||
*
|
||||
* Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
* of this software and associated documentation files (the "Software"), to deal
|
||||
* in the Software without restriction, including without limitation the rights
|
||||
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
* copies of the Software, and to permit persons to whom the Software is
|
||||
* furnished to do so, subject to the following conditions:
|
||||
*
|
||||
* The above copyright notice and this permission notice shall be included in all
|
||||
* copies or substantial portions of the Software.
|
||||
*
|
||||
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
* SOFTWARE.
|
||||
*/
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1,2 +0,0 @@
|
|||
!function(e){function r(r){for(var n,a,i=r[0],l=r[1],f=r[2],p=0,s=[];p<i.length;p++)a=i[p],Object.prototype.hasOwnProperty.call(o,a)&&o[a]&&s.push(o[a][0]),o[a]=0;for(n in l)Object.prototype.hasOwnProperty.call(l,n)&&(e[n]=l[n]);for(c&&c(r);s.length;)s.shift()();return u.push.apply(u,f||[]),t()}function t(){for(var e,r=0;r<u.length;r++){for(var t=u[r],n=!0,i=1;i<t.length;i++){var l=t[i];0!==o[l]&&(n=!1)}n&&(u.splice(r--,1),e=a(a.s=t[0]))}return e}var n={},o={1:0},u=[];function a(r){if(n[r])return n[r].exports;var t=n[r]={i:r,l:!1,exports:{}};return e[r].call(t.exports,t,t.exports,a),t.l=!0,t.exports}a.m=e,a.c=n,a.d=function(e,r,t){a.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},a.r=function(e){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},a.t=function(e,r){if(1&r&&(e=a(e)),8&r)return e;if(4&r&&"object"===typeof e&&e&&e.__esModule)return e;var t=Object.create(null);if(a.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:e}),2&r&&"string"!=typeof e)for(var n in e)a.d(t,n,function(r){return e[r]}.bind(null,n));return t},a.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return a.d(r,"a",r),r},a.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},a.p="./";var i=this["webpackJsonpreact-material-admin"]=this["webpackJsonpreact-material-admin"]||[],l=i.push.bind(i);i.push=r,i=i.slice();for(var f=0;f<i.length;f++)r(i[f]);var c=l;t()}([]);
|
||||
//# sourceMappingURL=runtime-main.4862f1b0.js.map
|
||||
File diff suppressed because one or more lines are too long
Binary file not shown.
File diff suppressed because it is too large
Load Diff
|
Before Width: | Height: | Size: 434 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
|
@ -1,47 +0,0 @@
|
|||
<?xml version="1.0" encoding="iso-8859-1"?>
|
||||
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
|
||||
<path style="fill:#FBBB00;" d="M113.47,309.408L95.648,375.94l-65.139,1.378C11.042,341.211,0,299.9,0,256
|
||||
c0-42.451,10.324-82.483,28.624-117.732h0.014l57.992,10.632l25.404,57.644c-5.317,15.501-8.215,32.141-8.215,49.456
|
||||
C103.821,274.792,107.225,292.797,113.47,309.408z"/>
|
||||
<path style="fill:#518EF8;" d="M507.527,208.176C510.467,223.662,512,239.655,512,256c0,18.328-1.927,36.206-5.598,53.451
|
||||
c-12.462,58.683-45.025,109.925-90.134,146.187l-0.014-0.014l-73.044-3.727l-10.338-64.535
|
||||
c29.932-17.554,53.324-45.025,65.646-77.911h-136.89V208.176h138.887L507.527,208.176L507.527,208.176z"/>
|
||||
<path style="fill:#28B446;" d="M416.253,455.624l0.014,0.014C372.396,490.901,316.666,512,256,512
|
||||
c-97.491,0-182.252-54.491-225.491-134.681l82.961-67.91c21.619,57.698,77.278,98.771,142.53,98.771
|
||||
c28.047,0,54.323-7.582,76.87-20.818L416.253,455.624z"/>
|
||||
<path style="fill:#F14336;" d="M419.404,58.936l-82.933,67.896c-23.335-14.586-50.919-23.012-80.471-23.012
|
||||
c-66.729,0-123.429,42.957-143.965,102.724l-83.397-68.276h-0.014C71.23,56.123,157.06,0,256,0
|
||||
C318.115,0,375.068,22.126,419.404,58.936z"/>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.5 KiB |
|
|
@ -1,13 +0,0 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="131px" height="106px" viewBox="0 0 131 106" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: Sketch 53.2 (72643) - https://sketchapp.com -->
|
||||
<title>logo_white</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<g id="logo_white" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
|
||||
<g id="Group-39" transform="translate(12.000000, 16.000000)" stroke-width="16.3476923">
|
||||
<path d="M4,72.4669231 L52.2318841,0" id="Line-10" stroke="#FFFFFF"></path>
|
||||
<path d="M1.10416667,74.69 L105.551432,74.69" id="Line-10" stroke="#FBC02D"></path>
|
||||
<path d="M52.2318841,0 L105.551432,74.69" id="Line-10" stroke="#FF5252"></path>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 858 B |
|
|
@ -10469,9 +10469,9 @@
|
|||
}
|
||||
},
|
||||
"lodash": {
|
||||
"version": "4.17.20",
|
||||
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.20.tgz",
|
||||
"integrity": "sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA=="
|
||||
"version": "4.17.21",
|
||||
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
|
||||
"integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
|
||||
},
|
||||
"lodash._reinterpolate": {
|
||||
"version": "3.0.0",
|
||||
|
|
@ -15869,9 +15869,9 @@
|
|||
}
|
||||
},
|
||||
"ua-parser-js": {
|
||||
"version": "0.7.23",
|
||||
"resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.23.tgz",
|
||||
"integrity": "sha512-m4hvMLxgGHXG3O3fQVAyyAQpZzDOvwnhOTjYz5Xmr7r/+LpkNy3vJXdVRWgd1TkAb7NGROZuSy96CrlNVjA7KA=="
|
||||
"version": "0.7.28",
|
||||
"resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.28.tgz",
|
||||
"integrity": "sha512-6Gurc1n//gjp9eQNXjD9O3M/sMwVtN5S8Lv9bvOYBfKfDNiIIhqiyi01vMBO45u4zkDE420w/e0se7Vs+sIg+g=="
|
||||
},
|
||||
"unbox-primitive": {
|
||||
"version": "1.0.1",
|
||||
|
|
|
|||
|
|
@ -22,12 +22,12 @@
|
|||
work correctly both with client-side routing and a non-root public URL.
|
||||
Learn how to configure a non-root public URL by running `npm run build`.
|
||||
-->
|
||||
<title>React Material Admin</title>
|
||||
<meta name="description" content="React Material Admin is a React Template built with Material-UI">
|
||||
<meta name="keywords" content="react material, material ui admin, react template, react material admin, react material dashboard">
|
||||
<meta name="author" content="Flatlogic LLC.">
|
||||
<title>CDN Admin</title>
|
||||
<meta name="description" content="CDN administration application" />
|
||||
<meta name="keywords" content="CDN, cdn admin" />
|
||||
<meta name="author" content="Tudor Stanciu" />
|
||||
</head>
|
||||
<body style="font-family: 'Roboto', sans-serif;">
|
||||
<body style="font-family: 'Roboto', sans-serif">
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
<div id="root"></div>
|
||||
<!--
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"short_name": "React Material Admin",
|
||||
"name": "React Material Admin is a React Template built with Material-UI",
|
||||
"short_name": "CDN Admin",
|
||||
"name": "CDN administration application",
|
||||
"icons": [
|
||||
{
|
||||
"src": "favicon.ico",
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ import React from "react";
|
|||
import { HashRouter, Route, Switch, Redirect } from "react-router-dom";
|
||||
|
||||
// components
|
||||
import Layout from "./Layout";
|
||||
import Layout from "./Layout/Layout";
|
||||
|
||||
// pages
|
||||
import Error from "../pages/error";
|
||||
|
|
@ -16,7 +16,7 @@ export default function App() {
|
|||
var { isAuthenticated } = useUserState();
|
||||
|
||||
return (
|
||||
<HashRouter>
|
||||
<HashRouter basename={process.env.PUBLIC_URL || ""}>
|
||||
<Switch>
|
||||
<Route exact path="/" render={() => <Redirect to="/app/dashboard" />} />
|
||||
<Route
|
||||
|
|
@ -31,13 +31,11 @@ export default function App() {
|
|||
</HashRouter>
|
||||
);
|
||||
|
||||
// #######################################################################
|
||||
|
||||
function PrivateRoute({ component, ...rest }) {
|
||||
return (
|
||||
<Route
|
||||
{...rest}
|
||||
render={props =>
|
||||
render={(props) =>
|
||||
isAuthenticated ? (
|
||||
React.createElement(component, props)
|
||||
) : (
|
||||
|
|
@ -45,8 +43,8 @@ export default function App() {
|
|||
to={{
|
||||
pathname: "/login",
|
||||
state: {
|
||||
from: props.location,
|
||||
},
|
||||
from: props.location
|
||||
}
|
||||
}}
|
||||
/>
|
||||
)
|
||||
|
|
@ -59,11 +57,11 @@ export default function App() {
|
|||
return (
|
||||
<Route
|
||||
{...rest}
|
||||
render={props =>
|
||||
render={(props) =>
|
||||
isAuthenticated ? (
|
||||
<Redirect
|
||||
to={{
|
||||
pathname: "/",
|
||||
pathname: "/"
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
|
|
|
|||
|
|
@ -6,8 +6,7 @@ import {
|
|||
InputBase,
|
||||
Menu,
|
||||
MenuItem,
|
||||
Fab,
|
||||
Link
|
||||
Fab
|
||||
} from "@material-ui/core";
|
||||
import {
|
||||
Menu as MenuIcon,
|
||||
|
|
@ -16,7 +15,7 @@ import {
|
|||
Person as AccountIcon,
|
||||
Search as SearchIcon,
|
||||
Send as SendIcon,
|
||||
ArrowBack as ArrowBackIcon,
|
||||
MenuOpen as MenuOpenIcon
|
||||
} from "@material-ui/icons";
|
||||
import classNames from "classnames";
|
||||
|
||||
|
|
@ -24,7 +23,7 @@ import classNames from "classnames";
|
|||
import useStyles from "./styles";
|
||||
|
||||
// components
|
||||
import { Badge, Typography, Button } from "../Wrappers";
|
||||
import { Badge, Typography } from "../Wrappers";
|
||||
import Notification from "../Notification/Notification";
|
||||
import UserAvatar from "../UserAvatar/UserAvatar";
|
||||
|
||||
|
|
@ -32,7 +31,7 @@ import UserAvatar from "../UserAvatar/UserAvatar";
|
|||
import {
|
||||
useLayoutState,
|
||||
useLayoutDispatch,
|
||||
toggleSidebar,
|
||||
toggleSidebar
|
||||
} from "../../context/LayoutContext";
|
||||
import { useUserDispatch, signOut } from "../../context/UserContext";
|
||||
|
||||
|
|
@ -42,29 +41,29 @@ const messages = [
|
|||
variant: "warning",
|
||||
name: "Jane Hew",
|
||||
message: "Hey! How is it going?",
|
||||
time: "9:32",
|
||||
time: "9:32"
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
variant: "success",
|
||||
name: "Lloyd Brown",
|
||||
message: "Check out my new Dashboard",
|
||||
time: "9:18",
|
||||
time: "9:18"
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
variant: "primary",
|
||||
name: "Mark Winstein",
|
||||
message: "I want rearrange the appointment",
|
||||
time: "9:15",
|
||||
time: "9:15"
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
variant: "secondary",
|
||||
name: "Liana Dutti",
|
||||
message: "Good news from sale department",
|
||||
time: "9:09",
|
||||
},
|
||||
time: "9:09"
|
||||
}
|
||||
];
|
||||
|
||||
const notifications = [
|
||||
|
|
@ -73,20 +72,20 @@ const notifications = [
|
|||
id: 1,
|
||||
color: "success",
|
||||
type: "info",
|
||||
message: "What is the best way to get ...",
|
||||
message: "What is the best way to get ..."
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
color: "secondary",
|
||||
type: "notification",
|
||||
message: "This is just a simple notification",
|
||||
message: "This is just a simple notification"
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
color: "primary",
|
||||
type: "e-commerce",
|
||||
message: "12 new orders has arrived today",
|
||||
},
|
||||
message: "12 new orders has arrived today"
|
||||
}
|
||||
];
|
||||
|
||||
export default function Header(props) {
|
||||
|
|
@ -113,42 +112,35 @@ export default function Header(props) {
|
|||
onClick={() => toggleSidebar(layoutDispatch)}
|
||||
className={classNames(
|
||||
classes.headerMenuButtonSandwich,
|
||||
classes.headerMenuButtonCollapse,
|
||||
classes.headerMenuButtonCollapse
|
||||
)}
|
||||
>
|
||||
{layoutState.isSidebarOpened ? (
|
||||
<ArrowBackIcon
|
||||
<MenuOpenIcon
|
||||
classes={{
|
||||
root: classNames(
|
||||
classes.headerIcon,
|
||||
classes.headerIconCollapse,
|
||||
),
|
||||
root: classNames(classes.headerIcon, classes.headerIconCollapse)
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<MenuIcon
|
||||
classes={{
|
||||
root: classNames(
|
||||
classes.headerIcon,
|
||||
classes.headerIconCollapse,
|
||||
),
|
||||
root: classNames(classes.headerIcon, classes.headerIconCollapse)
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</IconButton>
|
||||
<Typography variant="h6" weight="medium" className={classes.logotype}>
|
||||
React Material Admin
|
||||
CDN Admin
|
||||
</Typography>
|
||||
<div className={classes.grow} />
|
||||
<Button component={Link} href="https://flatlogic.com/templates/react-material-admin-full" variant={"outlined"} color={"secondary"} className={classes.purchaseBtn}>Unlock full version</Button>
|
||||
<div
|
||||
className={classNames(classes.search, {
|
||||
[classes.searchFocused]: isSearchOpen,
|
||||
[classes.searchFocused]: isSearchOpen
|
||||
})}
|
||||
>
|
||||
<div
|
||||
className={classNames(classes.searchIcon, {
|
||||
[classes.searchIconOpened]: isSearchOpen,
|
||||
[classes.searchIconOpened]: isSearchOpen
|
||||
})}
|
||||
onClick={() => setSearchOpen(!isSearchOpen)}
|
||||
>
|
||||
|
|
@ -158,7 +150,7 @@ export default function Header(props) {
|
|||
placeholder="Search…"
|
||||
classes={{
|
||||
root: classes.inputRoot,
|
||||
input: classes.inputInput,
|
||||
input: classes.inputInput
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -166,7 +158,7 @@ export default function Header(props) {
|
|||
color="inherit"
|
||||
aria-haspopup="true"
|
||||
aria-controls="mail-menu"
|
||||
onClick={e => {
|
||||
onClick={(e) => {
|
||||
setNotificationsMenu(e.currentTarget);
|
||||
setIsNotificationsUnread(false);
|
||||
}}
|
||||
|
|
@ -183,7 +175,7 @@ export default function Header(props) {
|
|||
color="inherit"
|
||||
aria-haspopup="true"
|
||||
aria-controls="mail-menu"
|
||||
onClick={e => {
|
||||
onClick={(e) => {
|
||||
setMailMenu(e.currentTarget);
|
||||
setIsMailsUnread(false);
|
||||
}}
|
||||
|
|
@ -201,7 +193,7 @@ export default function Header(props) {
|
|||
color="inherit"
|
||||
className={classes.headerMenuButton}
|
||||
aria-controls="profile-menu"
|
||||
onClick={e => setProfileMenu(e.currentTarget)}
|
||||
onClick={(e) => setProfileMenu(e.currentTarget)}
|
||||
>
|
||||
<AccountIcon classes={{ root: classes.headerIcon }} />
|
||||
</IconButton>
|
||||
|
|
@ -227,7 +219,7 @@ export default function Header(props) {
|
|||
{messages.length} New Messages
|
||||
</Typography>
|
||||
</div>
|
||||
{messages.map(message => (
|
||||
{messages.map((message) => (
|
||||
<MenuItem key={message.id} className={classes.messageNotification}>
|
||||
<div className={classes.messageNotificationSide}>
|
||||
<UserAvatar color={message.variant} name={message.name} />
|
||||
|
|
@ -238,7 +230,7 @@ export default function Header(props) {
|
|||
<div
|
||||
className={classNames(
|
||||
classes.messageNotificationSide,
|
||||
classes.messageNotificationBodySide,
|
||||
classes.messageNotificationBodySide
|
||||
)}
|
||||
>
|
||||
<Typography weight="medium" gutterBottom>
|
||||
|
|
@ -268,7 +260,7 @@ export default function Header(props) {
|
|||
className={classes.headerMenu}
|
||||
disableAutoFocusItem
|
||||
>
|
||||
{notifications.map(notification => (
|
||||
{notifications.map((notification) => (
|
||||
<MenuItem
|
||||
key={notification.id}
|
||||
onClick={() => setNotificationsMenu(null)}
|
||||
|
|
@ -303,7 +295,7 @@ export default function Header(props) {
|
|||
<MenuItem
|
||||
className={classNames(
|
||||
classes.profileMenuItem,
|
||||
classes.headerMenuItem,
|
||||
classes.headerMenuItem
|
||||
)}
|
||||
>
|
||||
<AccountIcon className={classes.profileMenuIcon} /> Profile
|
||||
|
|
@ -311,7 +303,7 @@ export default function Header(props) {
|
|||
<MenuItem
|
||||
className={classNames(
|
||||
classes.profileMenuItem,
|
||||
classes.headerMenuItem,
|
||||
classes.headerMenuItem
|
||||
)}
|
||||
>
|
||||
<AccountIcon className={classes.profileMenuIcon} /> Tasks
|
||||
|
|
@ -319,7 +311,7 @@ export default function Header(props) {
|
|||
<MenuItem
|
||||
className={classNames(
|
||||
classes.profileMenuItem,
|
||||
classes.headerMenuItem,
|
||||
classes.headerMenuItem
|
||||
)}
|
||||
>
|
||||
<AccountIcon className={classes.profileMenuIcon} /> Messages
|
||||
|
|
|
|||
|
|
@ -1,456 +0,0 @@
|
|||
import React from "react";
|
||||
import {
|
||||
AppBar,
|
||||
Toolbar,
|
||||
IconButton,
|
||||
InputBase,
|
||||
Menu,
|
||||
MenuItem,
|
||||
Fab,
|
||||
withStyles
|
||||
} from "@material-ui/core";
|
||||
import {
|
||||
Menu as MenuIcon,
|
||||
MailOutline as MailIcon,
|
||||
NotificationsNone as NotificationsIcon,
|
||||
Person as AccountIcon,
|
||||
Search as SearchIcon,
|
||||
Send as SendIcon,
|
||||
ArrowBack as ArrowBackIcon
|
||||
} from "@material-ui/icons";
|
||||
import { fade } from "@material-ui/core/styles/colorManipulator";
|
||||
import classNames from "classnames";
|
||||
|
||||
import { Badge, Typography } from "../Wrappers";
|
||||
import Notification from "../Notification";
|
||||
import UserAvatar from "../UserAvatar";
|
||||
|
||||
const messages = [
|
||||
{
|
||||
id: 0,
|
||||
variant: "warning",
|
||||
name: "Jane Hew",
|
||||
message: "Hey! How is it going?",
|
||||
time: "9:32"
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
variant: "success",
|
||||
name: "Lloyd Brown",
|
||||
message: "Check out my new Dashboard",
|
||||
time: "9:18"
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
variant: "primary",
|
||||
name: "Mark Winstein",
|
||||
message: "I want rearrange the appointment",
|
||||
time: "9:15"
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
variant: "secondary",
|
||||
name: "Liana Dutti",
|
||||
message: "Good news from sale department",
|
||||
time: "9:09"
|
||||
}
|
||||
];
|
||||
|
||||
const notifications = [
|
||||
{ id: 0, color: "warning", message: "Check out this awesome ticket" },
|
||||
{
|
||||
id: 1,
|
||||
color: "success",
|
||||
type: "info",
|
||||
message: "What is the best way to get ..."
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
color: "secondary",
|
||||
type: "notification",
|
||||
message: "This is just a simple notification"
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
color: "primary",
|
||||
type: "e-commerce",
|
||||
message: "12 new orders has arrived today"
|
||||
}
|
||||
];
|
||||
|
||||
const Header = ({ classes, isSidebarOpened, toggleSidebar, ...props }) => (
|
||||
<AppBar position="fixed" className={classes.appBar}>
|
||||
<Toolbar className={classes.toolbar}>
|
||||
<IconButton
|
||||
color="inherit"
|
||||
onClick={toggleSidebar}
|
||||
className={classNames(
|
||||
classes.headerMenuButton,
|
||||
classes.headerMenuButtonCollapse
|
||||
)}
|
||||
>
|
||||
{isSidebarOpened ? (
|
||||
<ArrowBackIcon
|
||||
classes={{
|
||||
root: classNames(classes.headerIcon, classes.headerIconCollapse)
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<MenuIcon
|
||||
classes={{
|
||||
root: classNames(classes.headerIcon, classes.headerIconCollapse)
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</IconButton>
|
||||
<Typography variant="h6" weight="medium" className={classes.logotype}>React Material Admin</Typography>
|
||||
<div className={classes.grow} />
|
||||
<div
|
||||
className={classNames(classes.search, {
|
||||
[classes.searchFocused]: props.isSearchOpen
|
||||
})}
|
||||
>
|
||||
<div
|
||||
className={classNames(classes.searchIcon, {
|
||||
[classes.searchIconOpened]: props.isSearchOpen
|
||||
})}
|
||||
onClick={props.toggleSearch}
|
||||
>
|
||||
<SearchIcon classes={{ root: classes.headerIcon }} />
|
||||
</div>
|
||||
<InputBase
|
||||
placeholder="Search…"
|
||||
classes={{
|
||||
root: classes.inputRoot,
|
||||
input: classes.inputInput
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<IconButton
|
||||
color="inherit"
|
||||
aria-haspopup="true"
|
||||
aria-controls="mail-menu"
|
||||
onClick={props.openNotificationsMenu}
|
||||
className={classes.headerMenuButton}
|
||||
>
|
||||
<Badge
|
||||
badgeContent={
|
||||
props.isNotificationsUnread ? notifications.length : null
|
||||
}
|
||||
colortheme="warning"
|
||||
>
|
||||
<NotificationsIcon classes={{ root: classes.headerIcon }} />
|
||||
</Badge>
|
||||
</IconButton>
|
||||
<IconButton
|
||||
color="inherit"
|
||||
aria-haspopup="true"
|
||||
aria-controls="mail-menu"
|
||||
onClick={props.openMailMenu}
|
||||
className={classes.headerMenuButton}
|
||||
>
|
||||
<Badge
|
||||
badgeContent={props.isMailsUnread ? messages.length : null}
|
||||
color="secondary"
|
||||
>
|
||||
<MailIcon classes={{ root: classes.headerIcon }} />
|
||||
</Badge>
|
||||
</IconButton>
|
||||
<IconButton
|
||||
aria-haspopup="true"
|
||||
color="inherit"
|
||||
className={classes.headerMenuButton}
|
||||
aria-controls="profile-menu"
|
||||
onClick={props.openProfileMenu}
|
||||
>
|
||||
<AccountIcon classes={{ root: classes.headerIcon }} />
|
||||
</IconButton>
|
||||
<Menu
|
||||
id="mail-menu"
|
||||
open={Boolean(props.mailMenu)}
|
||||
anchorEl={props.mailMenu}
|
||||
onClose={props.closeMailMenu}
|
||||
MenuListProps={{ className: classes.headerMenuList }}
|
||||
className={classes.headerMenu}
|
||||
classes={{ paper: classes.profileMenu }}
|
||||
disableAutoFocusItem
|
||||
>
|
||||
<div className={classes.profileMenuUser}>
|
||||
<Typography variant="h4" weight="medium">
|
||||
New Messages
|
||||
</Typography>
|
||||
<Typography
|
||||
className={classes.profileMenuLink}
|
||||
component="a"
|
||||
color="secondary"
|
||||
>
|
||||
{messages.length} New Messages
|
||||
</Typography>
|
||||
</div>
|
||||
{messages.map(message => (
|
||||
<MenuItem key={message.id} className={classes.messageNotification}>
|
||||
<div className={classes.messageNotificationSide}>
|
||||
<UserAvatar color={message.variant} name={message.name} />
|
||||
<Typography size="sm" color="textSecondary">
|
||||
{message.time}
|
||||
</Typography>
|
||||
</div>
|
||||
<div
|
||||
className={classNames(
|
||||
classes.messageNotificationSide,
|
||||
classes.messageNotificationBodySide
|
||||
)}
|
||||
>
|
||||
<Typography weight="medium" gutterBottom>
|
||||
{message.name}
|
||||
</Typography>
|
||||
<Typography color="textSecondary">{message.message}</Typography>
|
||||
</div>
|
||||
</MenuItem>
|
||||
))}
|
||||
<Fab
|
||||
variant="extended"
|
||||
color="primary"
|
||||
aria-label="Add"
|
||||
className={classes.sendMessageButton}
|
||||
>
|
||||
Send New Message
|
||||
<SendIcon className={classes.sendButtonIcon} />
|
||||
</Fab>
|
||||
</Menu>
|
||||
<Menu
|
||||
id="notifications-menu"
|
||||
open={Boolean(props.notificationsMenu)}
|
||||
anchorEl={props.notificationsMenu}
|
||||
onClose={props.closeNotificationsMenu}
|
||||
className={classes.headerMenu}
|
||||
disableAutoFocusItem
|
||||
>
|
||||
{notifications.map(notification => (
|
||||
<MenuItem
|
||||
key={notification.id}
|
||||
onClick={props.closeNotificationsMenu}
|
||||
className={classes.headerMenuItem}
|
||||
>
|
||||
<Notification {...notification} typographyVariant="inherit" />
|
||||
</MenuItem>
|
||||
))}
|
||||
</Menu>
|
||||
<Menu
|
||||
id="profile-menu"
|
||||
open={Boolean(props.profileMenu)}
|
||||
anchorEl={props.profileMenu}
|
||||
onClose={props.closeProfileMenu}
|
||||
className={classes.headerMenu}
|
||||
classes={{ paper: classes.profileMenu }}
|
||||
disableAutoFocusItem
|
||||
>
|
||||
<div className={classes.profileMenuUser}>
|
||||
<Typography variant="h4" weight="medium">
|
||||
John Smith
|
||||
</Typography>
|
||||
<Typography
|
||||
className={classes.profileMenuLink}
|
||||
component="a"
|
||||
color="primary"
|
||||
href="https://flatlogic.com"
|
||||
>
|
||||
Flalogic.com
|
||||
</Typography>
|
||||
</div>
|
||||
<MenuItem
|
||||
className={classNames(
|
||||
classes.profileMenuItem,
|
||||
classes.headerMenuItem
|
||||
)}
|
||||
>
|
||||
<AccountIcon className={classes.profileMenuIcon} /> Profile
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
className={classNames(
|
||||
classes.profileMenuItem,
|
||||
classes.headerMenuItem
|
||||
)}
|
||||
>
|
||||
<AccountIcon className={classes.profileMenuIcon} /> Tasks
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
className={classNames(
|
||||
classes.profileMenuItem,
|
||||
classes.headerMenuItem
|
||||
)}
|
||||
>
|
||||
<AccountIcon className={classes.profileMenuIcon} /> Messages
|
||||
</MenuItem>
|
||||
<div className={classes.profileMenuUser}>
|
||||
<Typography
|
||||
className={classes.profileMenuLink}
|
||||
color="primary"
|
||||
onClick={props.signOut}
|
||||
>
|
||||
Sign Out
|
||||
</Typography>
|
||||
</div>
|
||||
</Menu>
|
||||
</Toolbar>
|
||||
</AppBar>
|
||||
);
|
||||
|
||||
const styles = theme => ({
|
||||
logotype: {
|
||||
color: "white",
|
||||
marginLeft: theme.spacing.unit * 2.5,
|
||||
marginRight: theme.spacing.unit * 2.5,
|
||||
fontWeight: 500,
|
||||
fontSize: 18,
|
||||
whiteSpace: "nowrap",
|
||||
[theme.breakpoints.down("xs")]: {
|
||||
display: "none"
|
||||
}
|
||||
},
|
||||
appBar: {
|
||||
width: "100vw",
|
||||
zIndex: theme.zIndex.drawer + 1,
|
||||
transition: theme.transitions.create(["margin"], {
|
||||
easing: theme.transitions.easing.sharp,
|
||||
duration: theme.transitions.duration.leavingScreen
|
||||
})
|
||||
},
|
||||
toolbar: {
|
||||
paddingLeft: theme.spacing.unit * 2,
|
||||
paddingRight: theme.spacing.unit * 2
|
||||
},
|
||||
hide: {
|
||||
display: "none"
|
||||
},
|
||||
grow: {
|
||||
flexGrow: 1
|
||||
},
|
||||
search: {
|
||||
position: "relative",
|
||||
borderRadius: 25,
|
||||
paddingLeft: theme.spacing.unit * 2.5,
|
||||
width: 36,
|
||||
backgroundColor: fade(theme.palette.common.black, 0),
|
||||
transition: theme.transitions.create(["background-color", "width"]),
|
||||
"&:hover": {
|
||||
cursor: "pointer",
|
||||
backgroundColor: fade(theme.palette.common.black, 0.08)
|
||||
}
|
||||
},
|
||||
searchFocused: {
|
||||
backgroundColor: fade(theme.palette.common.black, 0.08),
|
||||
width: "100%",
|
||||
[theme.breakpoints.up("md")]: {
|
||||
width: 250
|
||||
}
|
||||
},
|
||||
searchIcon: {
|
||||
width: 36,
|
||||
right: 0,
|
||||
height: "100%",
|
||||
position: "absolute",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
transition: theme.transitions.create("right"),
|
||||
"&:hover": {
|
||||
cursor: "pointer"
|
||||
}
|
||||
},
|
||||
searchIconOpened: {
|
||||
right: theme.spacing.unit * 1.25
|
||||
},
|
||||
inputRoot: {
|
||||
color: "inherit",
|
||||
width: "100%"
|
||||
},
|
||||
inputInput: {
|
||||
height: 36,
|
||||
padding: 0,
|
||||
paddingRight: 36 + theme.spacing.unit * 1.25,
|
||||
width: "100%"
|
||||
},
|
||||
messageContent: {
|
||||
display: "flex",
|
||||
flexDirection: "column"
|
||||
},
|
||||
headerMenu: {
|
||||
marginTop: theme.spacing.unit * 7
|
||||
},
|
||||
headerMenuList: {
|
||||
display: "flex",
|
||||
flexDirection: "column"
|
||||
},
|
||||
headerMenuItem: {
|
||||
"&:hover, &:focus": {
|
||||
backgroundColor: theme.palette.primary.main,
|
||||
color: "white"
|
||||
}
|
||||
},
|
||||
headerMenuButton: {
|
||||
marginLeft: theme.spacing.unit * 2,
|
||||
padding: theme.spacing.unit / 2
|
||||
},
|
||||
headerMenuButtonCollapse: {
|
||||
marginRight: theme.spacing.unit * 2
|
||||
},
|
||||
headerIcon: {
|
||||
fontSize: 28,
|
||||
color: "rgba(255, 255, 255, 0.35)"
|
||||
},
|
||||
headerIconCollapse: {
|
||||
color: "white"
|
||||
},
|
||||
profileMenu: {
|
||||
minWidth: 265
|
||||
},
|
||||
profileMenuUser: {
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
padding: theme.spacing.unit * 2
|
||||
},
|
||||
profileMenuItem: {
|
||||
color: theme.palette.text.hint
|
||||
},
|
||||
profileMenuIcon: {
|
||||
marginRight: theme.spacing.unit * 2,
|
||||
color: theme.palette.text.hint
|
||||
},
|
||||
profileMenuLink: {
|
||||
fontSize: 16,
|
||||
textDecoration: "none",
|
||||
"&:hover": {
|
||||
cursor: "pointer"
|
||||
}
|
||||
},
|
||||
messageNotification: {
|
||||
height: "auto",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
"&:hover, &:focus": {
|
||||
backgroundColor: theme.palette.background.light
|
||||
}
|
||||
},
|
||||
messageNotificationSide: {
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
alignItems: "center",
|
||||
marginRight: theme.spacing.unit * 2
|
||||
},
|
||||
messageNotificationBodySide: {
|
||||
alignItems: "flex-start",
|
||||
marginRight: 0
|
||||
},
|
||||
sendMessageButton: {
|
||||
margin: theme.spacing.unit * 4,
|
||||
marginTop: theme.spacing.unit * 2,
|
||||
marginBottom: theme.spacing.unit * 2,
|
||||
textTransform: "none"
|
||||
},
|
||||
sendButtonIcon: {
|
||||
marginLeft: theme.spacing.unit * 2
|
||||
}
|
||||
});
|
||||
|
||||
export default withStyles(styles)(Header);
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
{
|
||||
"name": "Header",
|
||||
"version": "0.0.0",
|
||||
"private": true,
|
||||
"main": "Header.js"
|
||||
}
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
import React from "react";
|
||||
import { Route, Switch, Redirect } from "react-router-dom";
|
||||
import classnames from "classnames";
|
||||
|
||||
// pages
|
||||
import Dashboard from "../../pages/dashboard/Dashboard";
|
||||
import Typography from "../../pages/typography/Typography";
|
||||
import Notifications from "../../pages/notifications/Notifications";
|
||||
import Maps from "../../pages/maps/Maps";
|
||||
import Tables from "../../pages/tables/Tables";
|
||||
import Icons from "../../pages/icons/Icons";
|
||||
import Charts from "../../pages/charts/Charts";
|
||||
import ContentFooter from "./ContentFooter";
|
||||
|
||||
// context
|
||||
import { useLayoutState } from "../../context/LayoutContext";
|
||||
|
||||
// styles
|
||||
import useStyles from "./styles";
|
||||
|
||||
const Content = () => {
|
||||
// global
|
||||
var layoutState = useLayoutState();
|
||||
var classes = useStyles();
|
||||
|
||||
return (
|
||||
<div
|
||||
className={classnames(classes.content, {
|
||||
[classes.contentShift]: layoutState.isSidebarOpened
|
||||
})}
|
||||
>
|
||||
<div className={classes.fakeToolbar} />
|
||||
<Switch>
|
||||
<Route path="/app/dashboard" component={Dashboard} />
|
||||
<Route path="/app/typography" component={Typography} />
|
||||
<Route path="/app/tables" component={Tables} />
|
||||
<Route path="/app/notifications" component={Notifications} />
|
||||
<Route
|
||||
exact
|
||||
path="/app/ui"
|
||||
render={() => <Redirect to="/app/ui/icons" />}
|
||||
/>
|
||||
<Route path="/app/ui/maps" component={Maps} />
|
||||
<Route path="/app/ui/icons" component={Icons} />
|
||||
<Route path="/app/ui/charts" component={Charts} />
|
||||
</Switch>
|
||||
<ContentFooter />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Content;
|
||||
|
|
@ -0,0 +1,73 @@
|
|||
import React from "react";
|
||||
import { Box, IconButton, Link } from "@material-ui/core";
|
||||
import Icon from "@mdi/react";
|
||||
|
||||
//icons
|
||||
import {
|
||||
mdiFacebook as FacebookIcon,
|
||||
mdiTwitter as TwitterIcon,
|
||||
mdiGithub as GithubIcon
|
||||
} from "@mdi/js";
|
||||
|
||||
// styles
|
||||
import useStyles from "./styles";
|
||||
|
||||
const ContentFooter = () => {
|
||||
var classes = useStyles();
|
||||
|
||||
return (
|
||||
<Box
|
||||
mt={5}
|
||||
width={"100%"}
|
||||
display={"flex"}
|
||||
alignItems={"center"}
|
||||
justifyContent="space-between"
|
||||
>
|
||||
<div>
|
||||
<Link
|
||||
color={"primary"}
|
||||
href={"https://toodle.ddns.net/heimdall"}
|
||||
target={"_blank"}
|
||||
className={classes.link}
|
||||
>
|
||||
Toodle
|
||||
</Link>
|
||||
<Link
|
||||
color={"primary"}
|
||||
href={"https://toodle.ddns.net/heimdall"}
|
||||
target={"_blank"}
|
||||
className={classes.link}
|
||||
>
|
||||
About Us
|
||||
</Link>
|
||||
<Link
|
||||
color={"primary"}
|
||||
href={"https://toodle.ddns.net/heimdall"}
|
||||
target={"_blank"}
|
||||
className={classes.link}
|
||||
>
|
||||
Blog
|
||||
</Link>
|
||||
</div>
|
||||
<div>
|
||||
<Link href={"https://www.facebook.com"} target={"_blank"}>
|
||||
<IconButton aria-label="facebook">
|
||||
<Icon path={FacebookIcon} size={1} color="#6E6E6E99" />
|
||||
</IconButton>
|
||||
</Link>
|
||||
<Link href={"https://twitter.com"} target={"_blank"}>
|
||||
<IconButton aria-label="twitter">
|
||||
<Icon path={TwitterIcon} size={1} color="#6E6E6E99" />
|
||||
</IconButton>
|
||||
</Link>
|
||||
<Link href={"https://dev.azure.com/tstanciu94"} target={"_blank"}>
|
||||
<IconButton aria-label="github" style={{ marginRight: -12 }}>
|
||||
<Icon path={GithubIcon} size={1} color="#6E6E6E99" />
|
||||
</IconButton>
|
||||
</Link>
|
||||
</div>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default ContentFooter;
|
||||
|
|
@ -1,148 +1,24 @@
|
|||
import React from "react";
|
||||
import {
|
||||
Route,
|
||||
Switch,
|
||||
Redirect,
|
||||
withRouter,
|
||||
} from "react-router-dom";
|
||||
import classnames from "classnames";
|
||||
import {Box, IconButton, Link} from '@material-ui/core'
|
||||
import Icon from '@mdi/react'
|
||||
import { withRouter } from "react-router-dom";
|
||||
|
||||
//icons
|
||||
import {
|
||||
mdiFacebook as FacebookIcon,
|
||||
mdiTwitter as TwitterIcon,
|
||||
mdiGithub as GithubIcon,
|
||||
} from '@mdi/js'
|
||||
// components
|
||||
import Header from "../Header/Header";
|
||||
import Sidebar from "../Sidebar";
|
||||
import Content from "./Content";
|
||||
|
||||
// styles
|
||||
import useStyles from "./styles";
|
||||
|
||||
// components
|
||||
import Header from "../Header";
|
||||
import Sidebar from "../Sidebar";
|
||||
|
||||
// pages
|
||||
import Dashboard from "../../pages/dashboard";
|
||||
import Typography from "../../pages/typography";
|
||||
import Notifications from "../../pages/notifications";
|
||||
import Maps from "../../pages/maps";
|
||||
import Tables from "../../pages/tables";
|
||||
import Icons from "../../pages/icons";
|
||||
import Charts from "../../pages/charts";
|
||||
|
||||
// context
|
||||
import { useLayoutState } from "../../context/LayoutContext";
|
||||
|
||||
function Layout(props) {
|
||||
var classes = useStyles();
|
||||
|
||||
// global
|
||||
var layoutState = useLayoutState();
|
||||
|
||||
return (
|
||||
<div className={classes.root}>
|
||||
<>
|
||||
<Header history={props.history} />
|
||||
<Sidebar />
|
||||
<div
|
||||
className={classnames(classes.content, {
|
||||
[classes.contentShift]: layoutState.isSidebarOpened,
|
||||
})}
|
||||
>
|
||||
<div className={classes.fakeToolbar} />
|
||||
<Switch>
|
||||
<Route path="/app/dashboard" component={Dashboard} />
|
||||
<Route path="/app/typography" component={Typography} />
|
||||
<Route path="/app/tables" component={Tables} />
|
||||
<Route path="/app/notifications" component={Notifications} />
|
||||
<Route
|
||||
exact
|
||||
path="/app/ui"
|
||||
render={() => <Redirect to="/app/ui/icons" />}
|
||||
/>
|
||||
<Route path="/app/ui/maps" component={Maps} />
|
||||
<Route path="/app/ui/icons" component={Icons} />
|
||||
<Route path="/app/ui/charts" component={Charts} />
|
||||
</Switch>
|
||||
<Box
|
||||
mt={5}
|
||||
width={"100%"}
|
||||
display={"flex"}
|
||||
alignItems={"center"}
|
||||
justifyContent="space-between"
|
||||
>
|
||||
<div>
|
||||
<Link
|
||||
color={'primary'}
|
||||
href={'https://flatlogic.com/'}
|
||||
target={'_blank'}
|
||||
className={classes.link}
|
||||
>
|
||||
Flatlogic
|
||||
</Link>
|
||||
<Link
|
||||
color={'primary'}
|
||||
href={'https://flatlogic.com/about'}
|
||||
target={'_blank'}
|
||||
className={classes.link}
|
||||
>
|
||||
About Us
|
||||
</Link>
|
||||
<Link
|
||||
color={'primary'}
|
||||
href={'https://flatlogic.com/blog'}
|
||||
target={'_blank'}
|
||||
className={classes.link}
|
||||
>
|
||||
Blog
|
||||
</Link>
|
||||
</div>
|
||||
<div>
|
||||
<Link
|
||||
href={'https://www.facebook.com/flatlogic'}
|
||||
target={'_blank'}
|
||||
>
|
||||
<IconButton aria-label="facebook">
|
||||
<Icon
|
||||
path={FacebookIcon}
|
||||
size={1}
|
||||
color="#6E6E6E99"
|
||||
/>
|
||||
</IconButton>
|
||||
</Link>
|
||||
<Link
|
||||
href={'https://twitter.com/flatlogic'}
|
||||
target={'_blank'}
|
||||
>
|
||||
<IconButton aria-label="twitter">
|
||||
<Icon
|
||||
path={TwitterIcon}
|
||||
size={1}
|
||||
color="#6E6E6E99"
|
||||
/>
|
||||
</IconButton>
|
||||
</Link>
|
||||
<Link
|
||||
href={'https://github.com/flatlogic'}
|
||||
target={'_blank'}
|
||||
>
|
||||
<IconButton
|
||||
aria-label="github"
|
||||
style={{marginRight: -12}}
|
||||
>
|
||||
<Icon
|
||||
path={GithubIcon}
|
||||
size={1}
|
||||
color="#6E6E6E99"
|
||||
/>
|
||||
</IconButton>
|
||||
</Link>
|
||||
</div>
|
||||
</Box>
|
||||
</div>
|
||||
</>
|
||||
<>
|
||||
<Header history={props.history} />
|
||||
<Sidebar />
|
||||
<Content />
|
||||
</>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +0,0 @@
|
|||
{
|
||||
"name": "Layout",
|
||||
"version": "1.0.0",
|
||||
"private": true,
|
||||
"main": "Layout.js"
|
||||
}
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
import Notification from "./Notification";
|
||||
export default Notification;
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
{
|
||||
"name": "Notification",
|
||||
"version": "0.0.0",
|
||||
"private": true,
|
||||
"main": "Notification.js"
|
||||
}
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
import PageTitle from "./PageTitle";
|
||||
export default PageTitle;
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
{
|
||||
"name": "PageTitle",
|
||||
"version": "0.0.0",
|
||||
"private": true,
|
||||
"main": "PageTitle.js"
|
||||
}
|
||||
|
|
@ -1,16 +1,6 @@
|
|||
import React, { useState, useEffect } from "react";
|
||||
import { Drawer, IconButton, List } from "@material-ui/core";
|
||||
import {
|
||||
Home as HomeIcon,
|
||||
NotificationsNone as NotificationsIcon,
|
||||
FormatSize as TypographyIcon,
|
||||
FilterNone as UIElementsIcon,
|
||||
BorderAll as TableIcon,
|
||||
QuestionAnswer as SupportIcon,
|
||||
LibraryBooks as LibraryIcon,
|
||||
HelpOutline as FAQIcon,
|
||||
ArrowBack as ArrowBackIcon,
|
||||
} from "@material-ui/icons";
|
||||
import { MenuOpen as MenuOpenIcon } from "@material-ui/icons";
|
||||
import { useTheme } from "@material-ui/styles";
|
||||
import { withRouter } from "react-router-dom";
|
||||
import classNames from "classnames";
|
||||
|
|
@ -20,67 +10,15 @@ import useStyles from "./styles";
|
|||
|
||||
// components
|
||||
import SidebarLink from "./components/SidebarLink/SidebarLink";
|
||||
import Dot from "./components/Dot";
|
||||
|
||||
// context
|
||||
import {
|
||||
useLayoutState,
|
||||
useLayoutDispatch,
|
||||
toggleSidebar,
|
||||
toggleSidebar
|
||||
} from "../../context/LayoutContext";
|
||||
|
||||
const structure = [
|
||||
{ id: 0, label: "Dashboard", link: "/app/dashboard", icon: <HomeIcon /> },
|
||||
{
|
||||
id: 1,
|
||||
label: "Typography",
|
||||
link: "/app/typography",
|
||||
icon: <TypographyIcon />,
|
||||
},
|
||||
{ id: 2, label: "Tables", link: "/app/tables", icon: <TableIcon /> },
|
||||
{
|
||||
id: 3,
|
||||
label: "Notifications",
|
||||
link: "/app/notifications",
|
||||
icon: <NotificationsIcon />,
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
label: "UI Elements",
|
||||
link: "/app/ui",
|
||||
icon: <UIElementsIcon />,
|
||||
children: [
|
||||
{ label: "Icons", link: "/app/ui/icons" },
|
||||
{ label: "Charts", link: "/app/ui/charts" },
|
||||
{ label: "Maps", link: "/app/ui/maps" },
|
||||
],
|
||||
},
|
||||
{ id: 5, type: "divider" },
|
||||
{ id: 6, type: "title", label: "HELP" },
|
||||
{ id: 7, label: "Library", link: "https://flatlogic.com/templates", icon: <LibraryIcon /> },
|
||||
{ id: 8, label: "Support", link: "https://flatlogic.com/forum", icon: <SupportIcon /> },
|
||||
{ id: 9, label: "FAQ", link: "https://flatlogic.com/forum", icon: <FAQIcon /> },
|
||||
{ id: 10, type: "divider" },
|
||||
{ id: 11, type: "title", label: "PROJECTS" },
|
||||
{
|
||||
id: 12,
|
||||
label: "My recent",
|
||||
link: "",
|
||||
icon: <Dot size="small" color="warning" />,
|
||||
},
|
||||
{
|
||||
id: 13,
|
||||
label: "Starred",
|
||||
link: "",
|
||||
icon: <Dot size="small" color="primary" />,
|
||||
},
|
||||
{
|
||||
id: 14,
|
||||
label: "Background",
|
||||
link: "",
|
||||
icon: <Dot size="small" color="secondary" />,
|
||||
},
|
||||
];
|
||||
import menu from "./menu";
|
||||
|
||||
function Sidebar({ location }) {
|
||||
var classes = useStyles();
|
||||
|
|
@ -93,7 +31,7 @@ function Sidebar({ location }) {
|
|||
// local
|
||||
var [isPermanent, setPermanent] = useState(true);
|
||||
|
||||
useEffect(function() {
|
||||
useEffect(function () {
|
||||
window.addEventListener("resize", handleWindowWidthChange);
|
||||
handleWindowWidthChange();
|
||||
return function cleanup() {
|
||||
|
|
@ -106,28 +44,28 @@ function Sidebar({ location }) {
|
|||
variant={isPermanent ? "permanent" : "temporary"}
|
||||
className={classNames(classes.drawer, {
|
||||
[classes.drawerOpen]: isSidebarOpened,
|
||||
[classes.drawerClose]: !isSidebarOpened,
|
||||
[classes.drawerClose]: !isSidebarOpened
|
||||
})}
|
||||
classes={{
|
||||
paper: classNames({
|
||||
[classes.drawerOpen]: isSidebarOpened,
|
||||
[classes.drawerClose]: !isSidebarOpened,
|
||||
}),
|
||||
[classes.drawerClose]: !isSidebarOpened
|
||||
})
|
||||
}}
|
||||
open={isSidebarOpened}
|
||||
>
|
||||
<div className={classes.toolbar} />
|
||||
<div className={classes.mobileBackButton}>
|
||||
<IconButton onClick={() => toggleSidebar(layoutDispatch)}>
|
||||
<ArrowBackIcon
|
||||
<MenuOpenIcon
|
||||
classes={{
|
||||
root: classNames(classes.headerIcon, classes.headerIconCollapse),
|
||||
root: classNames(classes.headerIcon, classes.headerIconCollapse)
|
||||
}}
|
||||
/>
|
||||
</IconButton>
|
||||
</div>
|
||||
<List className={classes.sidebarList}>
|
||||
{structure.map(link => (
|
||||
{menu.map((link) => (
|
||||
<SidebarLink
|
||||
key={link.id}
|
||||
location={location}
|
||||
|
|
|
|||
|
|
@ -1,140 +0,0 @@
|
|||
import React from 'react';
|
||||
import {
|
||||
Drawer,
|
||||
IconButton,
|
||||
List,
|
||||
withStyles } from "@material-ui/core";
|
||||
import {
|
||||
Home as HomeIcon,
|
||||
NotificationsNone as NotificationsIcon,
|
||||
FormatSize as TypographyIcon,
|
||||
FilterNone as UIElementsIcon,
|
||||
BorderAll as TableIcon,
|
||||
QuestionAnswer as SupportIcon,
|
||||
LibraryBooks as LibraryIcon,
|
||||
HelpOutline as FAQIcon,
|
||||
ArrowBack as ArrowBackIcon,
|
||||
} from "@material-ui/icons";
|
||||
import classNames from 'classnames';
|
||||
|
||||
import SidebarLink from './components/SidebarLink/SidebarLinkContainer';
|
||||
import Dot from './components/Dot';
|
||||
|
||||
const structure = [
|
||||
{ id: 0, label: 'Dashboard', link: '/app/dashboard', icon: <HomeIcon /> },
|
||||
{ id: 1, label: 'Typography', link: '/app/typography', icon: <TypographyIcon /> },
|
||||
{ id: 2, label: 'Tables', link: '/app/tables', icon: <TableIcon /> },
|
||||
{ id: 3, label: 'Notifications', link: '/app/notifications', icon: <NotificationsIcon />},
|
||||
{
|
||||
id: 4,
|
||||
label: 'UI Elements',
|
||||
link: '/app/ui',
|
||||
icon: <UIElementsIcon />,
|
||||
children: [
|
||||
{ label: 'Icons', link: '/app/ui/icons' },
|
||||
{ label: 'Charts', link: '/app/ui/charts' },
|
||||
{ label: 'Maps', link: '/app/ui/maps' },
|
||||
],
|
||||
},
|
||||
{ id: 5, type: 'divider' },
|
||||
{ id: 6, type: 'title', label: 'HELP' },
|
||||
{ id: 7, label: 'Library', link: 'https://flatlogic.com/templates', icon: <LibraryIcon /> },
|
||||
{ id: 8, label: 'Support', link: 'https://flatlogic.com/forum/', icon: <SupportIcon /> },
|
||||
{ id: 9, label: 'FAQ', link: 'https://flatlogic.com/forum/', icon: <FAQIcon />},
|
||||
{ id: 10, type: 'divider' },
|
||||
{ id: 11, type: 'title', label: 'PROJECTS' },
|
||||
{ id: 12, label: 'My recent', link: '', icon: <Dot size="small" color="secondary" /> },
|
||||
{ id: 13, label: 'Starred', link: '', icon: <Dot size="small" color="primary" /> },
|
||||
{ id: 14, label: 'Background', link: '', icon: <Dot size="small" color="secondary" /> },
|
||||
];
|
||||
|
||||
const SidebarView = ({ classes, theme, toggleSidebar, isSidebarOpened, isPermanent, location }) => {
|
||||
return (
|
||||
<Drawer
|
||||
variant={isPermanent ? 'permanent' : 'temporary'}
|
||||
className={classNames(classes.drawer, {
|
||||
[classes.drawerOpen]: isSidebarOpened,
|
||||
[classes.drawerClose]: !isSidebarOpened,
|
||||
})}
|
||||
classes={{
|
||||
paper: classNames(classes.drawer, {
|
||||
[classes.drawerOpen]: isSidebarOpened,
|
||||
[classes.drawerClose]: !isSidebarOpened,
|
||||
}),
|
||||
}}
|
||||
open={isSidebarOpened}
|
||||
>
|
||||
<div className={classes.mobileBackButton}>
|
||||
<IconButton
|
||||
onClick={toggleSidebar}
|
||||
>
|
||||
<ArrowBackIcon classes={{ root: classNames(classes.headerIcon, classes.headerIconCollapse) }} />
|
||||
</IconButton>
|
||||
</div>
|
||||
<List className={classes.sidebarList}>
|
||||
{structure.map(link => <SidebarLink key={link.id} location={location} isSidebarOpened={isSidebarOpened} {...link} />)}
|
||||
</List>
|
||||
</Drawer>
|
||||
);
|
||||
}
|
||||
|
||||
const drawerWidth = 240;
|
||||
|
||||
const styles = theme => ({
|
||||
menuButton: {
|
||||
marginLeft: 12,
|
||||
marginRight: 36,
|
||||
},
|
||||
hide: {
|
||||
display: 'none',
|
||||
},
|
||||
drawer: {
|
||||
width: drawerWidth,
|
||||
flexShrink: 0,
|
||||
whiteSpace: 'nowrap',
|
||||
top: theme.spacing.unit * 8,
|
||||
[theme.breakpoints.down("sm")]: {
|
||||
top: 0,
|
||||
}
|
||||
},
|
||||
drawerOpen: {
|
||||
width: drawerWidth,
|
||||
transition: theme.transitions.create('width', {
|
||||
easing: theme.transitions.easing.sharp,
|
||||
duration: theme.transitions.duration.enteringScreen,
|
||||
}),
|
||||
},
|
||||
drawerClose: {
|
||||
transition: theme.transitions.create('width', {
|
||||
easing: theme.transitions.easing.sharp,
|
||||
duration: theme.transitions.duration.leavingScreen,
|
||||
}),
|
||||
overflowX: 'hidden',
|
||||
width: theme.spacing.unit * 7 + 40,
|
||||
[theme.breakpoints.down("sm")]: {
|
||||
width: drawerWidth,
|
||||
}
|
||||
},
|
||||
toolbar: {
|
||||
...theme.mixins.toolbar,
|
||||
[theme.breakpoints.down("sm")]: {
|
||||
display: 'none',
|
||||
}
|
||||
},
|
||||
content: {
|
||||
flexGrow: 1,
|
||||
padding: theme.spacing.unit * 3,
|
||||
},
|
||||
mobileBackButton: {
|
||||
marginTop: theme.spacing.unit * .5,
|
||||
marginLeft: theme.spacing.unit * 3,
|
||||
[theme.breakpoints.only("sm")]: {
|
||||
marginTop: theme.spacing.unit * .625,
|
||||
},
|
||||
[theme.breakpoints.up("md")]: {
|
||||
display: 'none',
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
export default withStyles(styles, { withTheme: true })(SidebarView);
|
||||
|
|
@ -6,7 +6,7 @@ import {
|
|||
ListItem,
|
||||
ListItemIcon,
|
||||
ListItemText,
|
||||
Typography,
|
||||
Typography
|
||||
} from "@material-ui/core";
|
||||
import { Inbox as InboxIcon } from "@material-ui/icons";
|
||||
import { Link } from "react-router-dom";
|
||||
|
|
@ -26,7 +26,7 @@ export default function SidebarLink({
|
|||
location,
|
||||
isSidebarOpened,
|
||||
nested,
|
||||
type,
|
||||
type
|
||||
}) {
|
||||
var classes = useStyles();
|
||||
|
||||
|
|
@ -36,19 +36,19 @@ export default function SidebarLink({
|
|||
link &&
|
||||
(location.pathname === link || location.pathname.indexOf(link) !== -1);
|
||||
|
||||
if (type === "divider") return <Divider className={classes.divider} />;
|
||||
if (type === "title")
|
||||
return (
|
||||
<Typography
|
||||
className={classnames(classes.linkText, classes.sectionTitle, {
|
||||
[classes.linkTextHidden]: !isSidebarOpened,
|
||||
[classes.linkTextHidden]: !isSidebarOpened
|
||||
})}
|
||||
>
|
||||
{label}
|
||||
</Typography>
|
||||
);
|
||||
|
||||
if (type === "divider") return <Divider className={classes.divider} />;
|
||||
if (link && link.includes('http')) {
|
||||
if (link && link.includes("http")) {
|
||||
return (
|
||||
<ListItem
|
||||
button
|
||||
|
|
@ -56,32 +56,33 @@ export default function SidebarLink({
|
|||
classes={{
|
||||
root: classnames(classes.linkRoot, {
|
||||
[classes.linkActive]: isLinkActive && !nested,
|
||||
[classes.linkNested]: nested,
|
||||
}),
|
||||
[classes.linkNested]: nested
|
||||
})
|
||||
}}
|
||||
disableRipple
|
||||
>
|
||||
<a className={classes.externalLink} href={link}>
|
||||
<ListItemIcon
|
||||
className={classnames(classes.linkIcon, {
|
||||
[classes.linkIconActive]: isLinkActive,
|
||||
})}
|
||||
>
|
||||
{nested ? <Dot color={isLinkActive && "primary"} /> : icon}
|
||||
</ListItemIcon>
|
||||
<ListItemText
|
||||
classes={{
|
||||
primary: classnames(classes.linkText, {
|
||||
[classes.linkTextActive]: isLinkActive,
|
||||
[classes.linkTextHidden]: !isSidebarOpened,
|
||||
}),
|
||||
}}
|
||||
primary={label}
|
||||
/>
|
||||
<ListItemIcon
|
||||
className={classnames(classes.linkIcon, {
|
||||
[classes.linkIconActive]: isLinkActive
|
||||
})}
|
||||
>
|
||||
{nested ? <Dot color={isLinkActive && "primary"} /> : icon}
|
||||
</ListItemIcon>
|
||||
<ListItemText
|
||||
classes={{
|
||||
primary: classnames(classes.linkText, {
|
||||
[classes.linkTextActive]: isLinkActive,
|
||||
[classes.linkTextHidden]: !isSidebarOpened
|
||||
})
|
||||
}}
|
||||
primary={label}
|
||||
/>
|
||||
</a>
|
||||
</ListItem>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
if (!children)
|
||||
return (
|
||||
<ListItem
|
||||
|
|
@ -92,24 +93,24 @@ export default function SidebarLink({
|
|||
classes={{
|
||||
root: classnames(classes.linkRoot, {
|
||||
[classes.linkActive]: isLinkActive && !nested,
|
||||
[classes.linkNested]: nested,
|
||||
}),
|
||||
[classes.linkNested]: nested
|
||||
})
|
||||
}}
|
||||
disableRipple
|
||||
>
|
||||
<ListItemIcon
|
||||
className={classnames(classes.linkIcon, {
|
||||
[classes.linkIconActive]: isLinkActive,
|
||||
[classes.linkIconActive]: isLinkActive
|
||||
})}
|
||||
>
|
||||
{nested ? <Dot color={isLinkActive && "primary"} /> : icon}
|
||||
{nested ? icon || <Dot color={isLinkActive && "primary"} /> : icon}
|
||||
</ListItemIcon>
|
||||
<ListItemText
|
||||
classes={{
|
||||
primary: classnames(classes.linkText, {
|
||||
[classes.linkTextActive]: isLinkActive,
|
||||
[classes.linkTextHidden]: !isSidebarOpened,
|
||||
}),
|
||||
[classes.linkTextHidden]: !isSidebarOpened
|
||||
})
|
||||
}}
|
||||
primary={label}
|
||||
/>
|
||||
|
|
@ -128,7 +129,7 @@ export default function SidebarLink({
|
|||
>
|
||||
<ListItemIcon
|
||||
className={classnames(classes.linkIcon, {
|
||||
[classes.linkIconActive]: isLinkActive,
|
||||
[classes.linkIconActive]: isLinkActive
|
||||
})}
|
||||
>
|
||||
{icon ? icon : <InboxIcon />}
|
||||
|
|
@ -137,8 +138,8 @@ export default function SidebarLink({
|
|||
classes={{
|
||||
primary: classnames(classes.linkText, {
|
||||
[classes.linkTextActive]: isLinkActive,
|
||||
[classes.linkTextHidden]: !isSidebarOpened,
|
||||
}),
|
||||
[classes.linkTextHidden]: !isSidebarOpened
|
||||
})
|
||||
}}
|
||||
primary={label}
|
||||
/>
|
||||
|
|
@ -151,7 +152,7 @@ export default function SidebarLink({
|
|||
className={classes.nestedList}
|
||||
>
|
||||
<List component="div" disablePadding>
|
||||
{children.map(childrenLink => (
|
||||
{children.map((childrenLink) => (
|
||||
<SidebarLink
|
||||
key={childrenLink && childrenLink.link}
|
||||
location={location}
|
||||
|
|
@ -167,8 +168,6 @@ export default function SidebarLink({
|
|||
</>
|
||||
);
|
||||
|
||||
// ###########################################################
|
||||
|
||||
function toggleCollapse(e) {
|
||||
if (isSidebarOpened) {
|
||||
e.preventDefault();
|
||||
|
|
|
|||
|
|
@ -0,0 +1,2 @@
|
|||
import Sidebar from "./Sidebar";
|
||||
export default Sidebar;
|
||||
|
|
@ -0,0 +1,132 @@
|
|||
import {
|
||||
Dashboard as DashboardIcon,
|
||||
NotificationsNone as NotificationsIcon,
|
||||
FormatSize as TypographyIcon,
|
||||
FilterNone as UIElementsIcon,
|
||||
BorderAll as TableIcon,
|
||||
QuestionAnswer as SupportIcon,
|
||||
LibraryBooks as LibraryIcon,
|
||||
HelpOutline as FAQIcon,
|
||||
Image as ImageIcon,
|
||||
Build as BuildIcon,
|
||||
Settings as SettingsIcon,
|
||||
NetworkCheck as NetworkCheckIcon
|
||||
} from "@material-ui/icons";
|
||||
import Dot from "./components/Dot";
|
||||
|
||||
let menu = [
|
||||
{
|
||||
id: 0,
|
||||
label: "Dashboard",
|
||||
link: "/app/dashboard",
|
||||
icon: <DashboardIcon />
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
label: "Resources",
|
||||
link: "/app/resources",
|
||||
icon: <ImageIcon />
|
||||
},
|
||||
|
||||
{ id: 2, type: "divider" },
|
||||
{ id: 3, type: "title", label: "System" },
|
||||
{
|
||||
id: 4,
|
||||
label: "Admin",
|
||||
link: "/app/admin",
|
||||
icon: <BuildIcon />
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
label: "Settings",
|
||||
link: "/app/settings",
|
||||
icon: <SettingsIcon />,
|
||||
children: [
|
||||
{
|
||||
id: 50,
|
||||
label: "Notifications",
|
||||
link: "/app/notifications",
|
||||
icon: <NotificationsIcon />
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
label: "Health",
|
||||
link: "/app/health",
|
||||
icon: <NetworkCheckIcon />
|
||||
},
|
||||
{ id: 7, type: "divider" },
|
||||
{ id: 8, type: "title", label: "Community" },
|
||||
{
|
||||
id: 9,
|
||||
label: "Library",
|
||||
link: "https://dev.azure.com/tstanciu94/CDN",
|
||||
icon: <LibraryIcon />
|
||||
},
|
||||
{
|
||||
id: 10,
|
||||
label: "Support",
|
||||
link: "https://toodle.ddns.net/forum",
|
||||
icon: <SupportIcon />
|
||||
},
|
||||
{
|
||||
id: 11,
|
||||
label: "FAQ",
|
||||
link: "https://toodle.ddns.net/forum",
|
||||
icon: <FAQIcon />
|
||||
}
|
||||
];
|
||||
|
||||
const enableTemplateContent =
|
||||
process.env.REACT_APP_ENABLE_TEMPLATE_CONTENT === "True";
|
||||
|
||||
if (enableTemplateContent) {
|
||||
menu.push(
|
||||
{ id: 12, type: "divider" },
|
||||
{
|
||||
id: 13,
|
||||
label: "Template",
|
||||
children: [
|
||||
{
|
||||
id: 14,
|
||||
label: "Typography",
|
||||
link: "/app/typography",
|
||||
icon: <TypographyIcon />
|
||||
},
|
||||
{ id: 15, label: "Tables", link: "/app/tables", icon: <TableIcon /> },
|
||||
{
|
||||
id: 16,
|
||||
label: "UI Elements",
|
||||
link: "/app/ui",
|
||||
icon: <UIElementsIcon />,
|
||||
children: [
|
||||
{ label: "Icons", link: "/app/ui/icons" },
|
||||
{ label: "Charts", link: "/app/ui/charts" },
|
||||
{ label: "Maps", link: "/app/ui/maps" }
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 17,
|
||||
label: "My recent",
|
||||
link: "",
|
||||
icon: <Dot size="small" color="warning" />
|
||||
},
|
||||
{
|
||||
id: 18,
|
||||
label: "Starred",
|
||||
link: "",
|
||||
icon: <Dot size="small" color="primary" />
|
||||
},
|
||||
{
|
||||
id: 19,
|
||||
label: "Background",
|
||||
link: "",
|
||||
icon: <Dot size="small" color="secondary" />
|
||||
}
|
||||
]
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
export default menu;
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
{
|
||||
"name": "Sidebar",
|
||||
"version": "0.0.0",
|
||||
"private": true,
|
||||
"main": "Sidebar.js"
|
||||
}
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
{
|
||||
"name": "UserAvatar",
|
||||
"version": "0.0.0",
|
||||
"private": true,
|
||||
"main": "UserAvatar.js"
|
||||
}
|
||||
|
|
@ -4,7 +4,7 @@ import {
|
|||
IconButton,
|
||||
Menu,
|
||||
MenuItem,
|
||||
Typography,
|
||||
Typography
|
||||
} from "@material-ui/core";
|
||||
import { MoreVert as MoreIcon } from "@material-ui/icons";
|
||||
import classnames from "classnames";
|
||||
|
|
@ -32,14 +32,21 @@ export default function Widget({
|
|||
var [isMoreMenuOpen, setMoreMenuOpen] = useState(false);
|
||||
|
||||
return (
|
||||
<div className={classes.widgetWrapper} style={style && {...style}}>
|
||||
<Paper className={classes.paper} classes={{ root: classnames(classes.widgetRoot, {
|
||||
[classes.noWidgetShadow]: noWidgetShadow
|
||||
}) }}>
|
||||
<div className={classnames(classes.widgetHeader, {
|
||||
[classes.noPadding]: noHeaderPadding,
|
||||
[headerClass]: headerClass
|
||||
})}>
|
||||
<div className={classes.widgetWrapper} style={style && { ...style }}>
|
||||
<Paper
|
||||
className={classes.paper}
|
||||
classes={{
|
||||
root: classnames(classes.widgetRoot, {
|
||||
[classes.noWidgetShadow]: noWidgetShadow
|
||||
})
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className={classnames(classes.widgetHeader, {
|
||||
[classes.noPadding]: noHeaderPadding,
|
||||
[headerClass]: headerClass
|
||||
})}
|
||||
>
|
||||
{header ? (
|
||||
header
|
||||
) : (
|
||||
|
|
@ -65,7 +72,7 @@ export default function Widget({
|
|||
<div
|
||||
className={classnames(classes.widgetBody, {
|
||||
[classes.noPadding]: noBodyPadding,
|
||||
[bodyClass]: bodyClass,
|
||||
[bodyClass]: bodyClass
|
||||
})}
|
||||
>
|
||||
{children}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,2 @@
|
|||
import Widget from "./Widget";
|
||||
export default Widget;
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
{
|
||||
"name": "Widget",
|
||||
"version": "0.0.0",
|
||||
"private": true,
|
||||
"main": "Widget.js"
|
||||
}
|
||||
|
|
@ -3,18 +3,18 @@ import {
|
|||
withStyles,
|
||||
Badge as BadgeBase,
|
||||
Typography as TypographyBase,
|
||||
Button as ButtonBase,
|
||||
Button as ButtonBase
|
||||
} from "@material-ui/core";
|
||||
import { useTheme, makeStyles } from "@material-ui/styles";
|
||||
import classnames from "classnames";
|
||||
|
||||
// styles
|
||||
var useStyles = makeStyles(theme => ({
|
||||
var useStyles = makeStyles((theme) => ({
|
||||
badge: {
|
||||
fontWeight: 600,
|
||||
height: 16,
|
||||
minWidth: 16,
|
||||
},
|
||||
minWidth: 16
|
||||
}
|
||||
}));
|
||||
|
||||
function Badge({ children, colorBrightness, color, ...props }) {
|
||||
|
|
@ -22,16 +22,16 @@ function Badge({ children, colorBrightness, color, ...props }) {
|
|||
var theme = useTheme();
|
||||
var Styled = createStyled({
|
||||
badge: {
|
||||
backgroundColor: getColor(color, theme, colorBrightness),
|
||||
},
|
||||
backgroundColor: getColor(color, theme, colorBrightness)
|
||||
}
|
||||
});
|
||||
|
||||
return (
|
||||
<Styled>
|
||||
{styledProps => (
|
||||
{(styledProps) => (
|
||||
<BadgeBase
|
||||
classes={{
|
||||
badge: classnames(classes.badge, styledProps.classes.badge),
|
||||
badge: classnames(classes.badge, styledProps.classes.badge)
|
||||
}}
|
||||
{...props}
|
||||
>
|
||||
|
|
@ -57,7 +57,7 @@ function Typography({
|
|||
style={{
|
||||
color: getColor(color, theme, colorBrightness),
|
||||
fontWeight: getFontWeight(weight),
|
||||
fontSize: getFontSize(size, props.variant, theme),
|
||||
fontSize: getFontSize(size, props.variant, theme)
|
||||
}}
|
||||
{...props}
|
||||
>
|
||||
|
|
@ -71,7 +71,7 @@ function Button({ children, color, className, ...props }) {
|
|||
|
||||
var Styled = createStyled({
|
||||
root: {
|
||||
color: getColor(color, theme),
|
||||
color: getColor(color, theme)
|
||||
},
|
||||
contained: {
|
||||
backgroundColor: getColor(color, theme),
|
||||
|
|
@ -79,20 +79,20 @@ function Button({ children, color, className, ...props }) {
|
|||
color: `${color ? "white" : theme.palette.text.primary} !important`,
|
||||
"&:hover": {
|
||||
backgroundColor: getColor(color, theme, "light"),
|
||||
boxShadow: theme.customShadows.widgetWide,
|
||||
boxShadow: theme.customShadows.widgetWide
|
||||
},
|
||||
"&:active": {
|
||||
boxShadow: theme.customShadows.widgetWide,
|
||||
},
|
||||
boxShadow: theme.customShadows.widgetWide
|
||||
}
|
||||
},
|
||||
outlined: {
|
||||
color: getColor(color, theme),
|
||||
borderColor: getColor(color, theme),
|
||||
borderColor: getColor(color, theme)
|
||||
},
|
||||
select: {
|
||||
backgroundColor: theme.palette.primary.main,
|
||||
color: "#fff",
|
||||
},
|
||||
color: "#fff"
|
||||
}
|
||||
});
|
||||
|
||||
return (
|
||||
|
|
@ -102,14 +102,14 @@ function Button({ children, color, className, ...props }) {
|
|||
classes={{
|
||||
contained: classes.contained,
|
||||
root: classes.root,
|
||||
outlined: classes.outlined,
|
||||
outlined: classes.outlined
|
||||
}}
|
||||
{...props}
|
||||
className={classnames(
|
||||
{
|
||||
[classes.select]: props.select,
|
||||
[classes.select]: props.select
|
||||
},
|
||||
className,
|
||||
className
|
||||
)}
|
||||
>
|
||||
{children}
|
||||
|
|
@ -172,7 +172,7 @@ function getFontSize(size, variant = "", theme) {
|
|||
}
|
||||
|
||||
function createStyled(styles, options) {
|
||||
var Styled = function(props) {
|
||||
var Styled = function (props) {
|
||||
const { children, ...other } = props;
|
||||
return children(other);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
export { Badge, Typography, Button } from "./Wrappers";
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
{
|
||||
"name": "Wrappers",
|
||||
"version": "0.0.0",
|
||||
"private": true,
|
||||
"main": "Wrappers.js"
|
||||
}
|
||||
|
||||
|
|
@ -28,14 +28,14 @@ const datatableData = [
|
|||
["Anna Siranush", "Example Inc.", "Yonkers", "NY"],
|
||||
["Avram Sylva", "Example Inc.", "Hartford", "CT"],
|
||||
["Serafima Babatunde", "Example Inc.", "Tampa", "FL"],
|
||||
["Gaston Festus", "Example Inc.", "Tampa", "FL"],
|
||||
["Gaston Festus", "Example Inc.", "Tampa", "FL"]
|
||||
];
|
||||
|
||||
const useStyles = makeStyles(theme => ({
|
||||
const useStyles = makeStyles((theme) => ({
|
||||
tableOverflow: {
|
||||
overflow: 'auto'
|
||||
overflow: "auto"
|
||||
}
|
||||
}))
|
||||
}));
|
||||
|
||||
export default function Tables() {
|
||||
const classes = useStyles();
|
||||
|
|
@ -49,12 +49,17 @@ export default function Tables() {
|
|||
data={datatableData}
|
||||
columns={["Name", "Company", "City", "State"]}
|
||||
options={{
|
||||
filterType: "checkbox",
|
||||
filterType: "checkbox"
|
||||
}}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={12}>
|
||||
<Widget title="Material-UI Table" upperTitle noBodyPadding bodyClass={classes.tableOverflow}>
|
||||
<Widget
|
||||
title="Material-UI Table"
|
||||
upperTitle
|
||||
noBodyPadding
|
||||
bodyClass={classes.tableOverflow}
|
||||
>
|
||||
<Table data={mock.table} />
|
||||
</Widget>
|
||||
</Grid>
|
||||
|
|
|
|||
Loading…
Reference in New Issue