mirror of
https://dev.azure.com/tstanciu94/CDN/_git/CDN_Frontend
synced 2025-06-21 19:24:34 +03:00
Merged PR 29: cleanup
This commit is contained in:
Tudor Stanciu
commit
5be2561abb
2
.env
Normal file
2
.env
Normal file
@ -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
|
||||
3
.env.production
Normal file
3
.env.production
Normal file
@ -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
2
.gitignore
vendored
2
.gitignore
vendored
@ -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: [/^\/_/,/\/[^\/?]+\.[^\/]+$/],
|
||||
});
|
||||
6
docs/static/css/2.637eb612.chunk.css
vendored
6
docs/static/css/2.637eb612.chunk.css
vendored
File diff suppressed because one or more lines are too long
1
docs/static/css/2.637eb612.chunk.css.map
vendored
1
docs/static/css/2.637eb612.chunk.css.map
vendored
File diff suppressed because one or more lines are too long
3
docs/static/js/2.af6eef2b.chunk.js
vendored
3
docs/static/js/2.af6eef2b.chunk.js
vendored
File diff suppressed because one or more lines are too long
102
docs/static/js/2.af6eef2b.chunk.js.LICENSE.txt
vendored
102
docs/static/js/2.af6eef2b.chunk.js.LICENSE.txt
vendored
@ -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.
|
||||
*/
|
||||
1
docs/static/js/2.af6eef2b.chunk.js.map
vendored
1
docs/static/js/2.af6eef2b.chunk.js.map
vendored
File diff suppressed because one or more lines are too long
2
docs/static/js/main.fc3e922e.chunk.js
vendored
2
docs/static/js/main.fc3e922e.chunk.js
vendored
File diff suppressed because one or more lines are too long
1
docs/static/js/main.fc3e922e.chunk.js.map
vendored
1
docs/static/js/main.fc3e922e.chunk.js.map
vendored
File diff suppressed because one or more lines are too long
2
docs/static/js/runtime-main.4862f1b0.js
vendored
2
docs/static/js/runtime-main.4862f1b0.js
vendored
@ -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
|
||||
1
docs/static/js/runtime-main.4862f1b0.js.map
vendored
1
docs/static/js/runtime-main.4862f1b0.js.map
vendored
File diff suppressed because one or more lines are too long
BIN
docs/static/media/fontawesome-webfont.674f50d2.eot
vendored
BIN
docs/static/media/fontawesome-webfont.674f50d2.eot
vendored
Binary file not shown.
2671
docs/static/media/fontawesome-webfont.912ec66d.svg
vendored
2671
docs/static/media/fontawesome-webfont.912ec66d.svg
vendored
File diff suppressed because it is too large
Load Diff
|
Before Width: | Height: | Size: 434 KiB |
BIN
docs/static/media/fontawesome-webfont.af7ae505.woff2
vendored
BIN
docs/static/media/fontawesome-webfont.af7ae505.woff2
vendored
Binary file not shown.
BIN
docs/static/media/fontawesome-webfont.b06871f2.ttf
vendored
BIN
docs/static/media/fontawesome-webfont.b06871f2.ttf
vendored
Binary file not shown.
BIN
docs/static/media/fontawesome-webfont.fee66e71.woff
vendored
BIN
docs/static/media/fontawesome-webfont.fee66e71.woff
vendored
Binary file not shown.
47
docs/static/media/google.09aea0f5.svg
vendored
47
docs/static/media/google.09aea0f5.svg
vendored
@ -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 |
13
docs/static/media/logo.3d432ca2.svg
vendored
13
docs/static/media/logo.3d432ca2.svg
vendored
@ -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 |
12
package-lock.json
generated
12
package-lock.json
generated
@ -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"
|
||||
}
|
||||
52
src/components/Layout/Content.js
Normal file
52
src/components/Layout/Content.js
Normal file
@ -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;
|
||||
73
src/components/Layout/ContentFooter.js
Normal file
73
src/components/Layout/ContentFooter.js
Normal file
@ -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"
|
||||
}
|
||||
2
src/components/Notification/index.js
Normal file
2
src/components/Notification/index.js
Normal file
@ -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"
|
||||
}
|
||||
2
src/components/PageTitle/index.js
Normal file
2
src/components/PageTitle/index.js
Normal file
@ -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();
|
||||
|
||||
2
src/components/Sidebar/index.js
Normal file
2
src/components/Sidebar/index.js
Normal file
@ -0,0 +1,2 @@
|
||||
import Sidebar from "./Sidebar";
|
||||
export default Sidebar;
|
||||
132
src/components/Sidebar/menu.js
Normal file
132
src/components/Sidebar/menu.js
Normal file
@ -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}
|
||||
|
||||
2
src/components/Widget/index.js
Normal file
2
src/components/Widget/index.js
Normal file
@ -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);
|
||||
};
|
||||
|
||||
1
src/components/Wrappers/index.js
Normal file
1
src/components/Wrappers/index.js
Normal file
@ -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…
x
Reference in New Issue
Block a user