tudor.stanciu
/
cdn-frontend
mirror of https://dev.azure.com/tstanciu94/CDN/_git/CDN_Frontend
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merged PR 29: cleanup

master
Tudor Stanciu 2021-07-05 16:54:42 +00:00
parent 98539899c1 faba61a3bc
commit 5be2561abb
60 changed files with 429 additions and 16864 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.env Normal file
View 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
View 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

1
.eslintcache
View File

File diff suppressed because one or more lines are too long

2
.gitignore vendored
View File

@ -22,3 +22,5 @@
npm-debug.log* npm-debug.log*
yarn-debug.log* yarn-debug.log*
yarn-error.log* yarn-error.log*
.eslintcache

2
.prettierrc
View File

@ -2,5 +2,5 @@
"tabWidth": 2, "tabWidth": 2,
"singleQuote": false, "singleQuote": false,
"semi": true, "semi": true,
"trailingComma": "all" "trailingComma": "none"
} }

21
LICENSE.txt
View File

@ -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
View File

@ -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/). 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)** **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)
[![image](https://user-images.githubusercontent.com/24964748/55800639-df780300-5adc-11e9-84b7-7c2437088516.png)](https://flatlogic.com/admin-dashboards/react-material-admin/demo) [![image](https://user-images.githubusercontent.com/24964748/55800639-df780300-5adc-11e9-84b7-7c2437088516.png)](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 ## Features
- React (**16.14.0**) - React (**16.14.0**)
- React Hooks - React Hooks
- React Context - React Context
- **No jQuery and Bootstrap!**
- Mobile friendly layout (responsive) - Mobile friendly layout (responsive)
- Create-react-app under the hood - Create-react-app under the hood
- React Router v5 - React Router v5

67
changelog.md
View File

@ -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

25
docs/asset-manifest.json
View File

@ -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
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 3.8 KiB

1
docs/index.html
View File

@ -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>

15
docs/manifest.json
View File

@ -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"
}

54
docs/precache-manifest.9910cad913c1899724ce0a968a9630a0.js
View File

@ -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"
}
]);

39
docs/service-worker.js
View File

@ -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
View File

File diff suppressed because one or more lines are too long

1
docs/static/css/2.637eb612.chunk.css.map vendored
View File

File diff suppressed because one or more lines are too long

3
docs/static/js/2.af6eef2b.chunk.js vendored
View File

File diff suppressed because one or more lines are too long

102
docs/static/js/2.af6eef2b.chunk.js.LICENSE.txt vendored
View File

@ -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
View File

File diff suppressed because one or more lines are too long

2
docs/static/js/main.fc3e922e.chunk.js vendored
View File

File diff suppressed because one or more lines are too long

1
docs/static/js/main.fc3e922e.chunk.js.map vendored
View File

File diff suppressed because one or more lines are too long

2
docs/static/js/runtime-main.4862f1b0.js vendored
View File

@ -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
View File

File diff suppressed because one or more lines are too long

BIN
docs/static/media/fontawesome-webfont.674f50d2.eot vendored
View File

Binary file not shown.

2671
docs/static/media/fontawesome-webfont.912ec66d.svg vendored
View File

File diff suppressed because it is too large Load Diff
Side by Side

Before

Width:  |  Height:  |  Size: 434 KiB

BIN
docs/static/media/fontawesome-webfont.af7ae505.woff2 vendored
View File

Binary file not shown.

BIN
docs/static/media/fontawesome-webfont.b06871f2.ttf vendored
View File

Binary file not shown.

BIN
docs/static/media/fontawesome-webfont.fee66e71.woff vendored
View File

Binary file not shown.

47
docs/static/media/google.09aea0f5.svg vendored
View File

@ -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>
Side by Side

Before

Width:  |  Height:  |  Size: 1.5 KiB

13
docs/static/media/logo.3d432ca2.svg vendored
View File

@ -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>
Side by Side

Before

Width:  |  Height:  |  Size: 858 B

12
package-lock.json generated
View File

@ -10469,9 +10469,9 @@
} }
}, },
"lodash": { "lodash": {
"version": "4.17.20", "version": "4.17.21",
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.20.tgz", "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
"integrity": "sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA==" "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
}, },
"lodash._reinterpolate": { "lodash._reinterpolate": {
"version": "3.0.0", "version": "3.0.0",
@ -15869,9 +15869,9 @@
} }
}, },
"ua-parser-js": { "ua-parser-js": {
"version": "0.7.23", "version": "0.7.28",
"resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.23.tgz", "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.28.tgz",
"integrity": "sha512-m4hvMLxgGHXG3O3fQVAyyAQpZzDOvwnhOTjYz5Xmr7r/+LpkNy3vJXdVRWgd1TkAb7NGROZuSy96CrlNVjA7KA==" "integrity": "sha512-6Gurc1n//gjp9eQNXjD9O3M/sMwVtN5S8Lv9bvOYBfKfDNiIIhqiyi01vMBO45u4zkDE420w/e0se7Vs+sIg+g=="
}, },
"unbox-primitive": { "unbox-primitive": {
"version": "1.0.1", "version": "1.0.1",

10
public/index.html
View File

@ -22,12 +22,12 @@
work correctly both with client-side routing and a non-root public URL. 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`. Learn how to configure a non-root public URL by running `npm run build`.
--> -->
<title>React Material Admin</title> <title>CDN Admin</title>
<meta name="description" content="React Material Admin is a React Template built with Material-UI"> <meta name="description" content="CDN administration application" />
<meta name="keywords" content="react material, material ui admin, react template, react material admin, react material dashboard"> <meta name="keywords" content="CDN, cdn admin" />
<meta name="author" content="Flatlogic LLC."> <meta name="author" content="Tudor Stanciu" />
</head> </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> <noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div> <div id="root"></div>
<!-- <!--

4
public/manifest.json
View File

@ -1,6 +1,6 @@
{ {
"short_name": "React Material Admin", "short_name": "CDN Admin",
"name": "React Material Admin is a React Template built with Material-UI", "name": "CDN administration application",
"icons": [ "icons": [
{ {
"src": "favicon.ico", "src": "favicon.ico",

16
src/components/App.js
View File

@ -2,7 +2,7 @@ import React from "react";
import { HashRouter, Route, Switch, Redirect } from "react-router-dom"; import { HashRouter, Route, Switch, Redirect } from "react-router-dom";
// components // components
import Layout from "./Layout"; import Layout from "./Layout/Layout";
// pages // pages
import Error from "../pages/error"; import Error from "../pages/error";
@ -16,7 +16,7 @@ export default function App() {
var { isAuthenticated } = useUserState(); var { isAuthenticated } = useUserState();
return ( return (
<HashRouter> <HashRouter basename={process.env.PUBLIC_URL || ""}>
<Switch> <Switch>
<Route exact path="/" render={() => <Redirect to="/app/dashboard" />} /> <Route exact path="/" render={() => <Redirect to="/app/dashboard" />} />
<Route <Route
@ -31,13 +31,11 @@ export default function App() {
</HashRouter> </HashRouter>
); );
// #######################################################################
function PrivateRoute({ component, ...rest }) { function PrivateRoute({ component, ...rest }) {
return ( return (
<Route <Route
{...rest} {...rest}
render={props => render={(props) =>
isAuthenticated ? ( isAuthenticated ? (
React.createElement(component, props) React.createElement(component, props)
) : ( ) : (
@ -45,8 +43,8 @@ export default function App() {
to={{ to={{
pathname: "/login", pathname: "/login",
state: { state: {
from: props.location, from: props.location
}, }
}} }}
/> />
) )
@ -59,11 +57,11 @@ export default function App() {
return ( return (
<Route <Route
{...rest} {...rest}
render={props => render={(props) =>
isAuthenticated ? ( isAuthenticated ? (
<Redirect <Redirect
to={{ to={{
pathname: "/", pathname: "/"
}} }}
/> />
) : ( ) : (

68
src/components/Header/Header.js
View File

@ -6,8 +6,7 @@ import {
InputBase, InputBase,
Menu, Menu,
MenuItem, MenuItem,
Fab, Fab
Link
} from "@material-ui/core"; } from "@material-ui/core";
import { import {
Menu as MenuIcon, Menu as MenuIcon,
@ -16,7 +15,7 @@ import {
Person as AccountIcon, Person as AccountIcon,
Search as SearchIcon, Search as SearchIcon,
Send as SendIcon, Send as SendIcon,
ArrowBack as ArrowBackIcon, MenuOpen as MenuOpenIcon
} from "@material-ui/icons"; } from "@material-ui/icons";
import classNames from "classnames"; import classNames from "classnames";
@ -24,7 +23,7 @@ import classNames from "classnames";
import useStyles from "./styles"; import useStyles from "./styles";
// components // components
import { Badge, Typography, Button } from "../Wrappers"; import { Badge, Typography } from "../Wrappers";
import Notification from "../Notification/Notification"; import Notification from "../Notification/Notification";
import UserAvatar from "../UserAvatar/UserAvatar"; import UserAvatar from "../UserAvatar/UserAvatar";
@ -32,7 +31,7 @@ import UserAvatar from "../UserAvatar/UserAvatar";
import { import {
useLayoutState, useLayoutState,
useLayoutDispatch, useLayoutDispatch,
toggleSidebar, toggleSidebar
} from "../../context/LayoutContext"; } from "../../context/LayoutContext";
import { useUserDispatch, signOut } from "../../context/UserContext"; import { useUserDispatch, signOut } from "../../context/UserContext";
@ -42,29 +41,29 @@ const messages = [
variant: "warning", variant: "warning",
name: "Jane Hew", name: "Jane Hew",
message: "Hey! How is it going?", message: "Hey! How is it going?",
time: "9:32", time: "9:32"
}, },
{ {
id: 1, id: 1,
variant: "success", variant: "success",
name: "Lloyd Brown", name: "Lloyd Brown",
message: "Check out my new Dashboard", message: "Check out my new Dashboard",
time: "9:18", time: "9:18"
}, },
{ {
id: 2, id: 2,
variant: "primary", variant: "primary",
name: "Mark Winstein", name: "Mark Winstein",
message: "I want rearrange the appointment", message: "I want rearrange the appointment",
time: "9:15", time: "9:15"
}, },
{ {
id: 3, id: 3,
variant: "secondary", variant: "secondary",
name: "Liana Dutti", name: "Liana Dutti",
message: "Good news from sale department", message: "Good news from sale department",
time: "9:09", time: "9:09"
}, }
]; ];
const notifications = [ const notifications = [
@ -73,20 +72,20 @@ const notifications = [
id: 1, id: 1,
color: "success", color: "success",
type: "info", type: "info",
message: "What is the best way to get ...", message: "What is the best way to get ..."
}, },
{ {
id: 2, id: 2,
color: "secondary", color: "secondary",
type: "notification", type: "notification",
message: "This is just a simple notification", message: "This is just a simple notification"
}, },
{ {
id: 3, id: 3,
color: "primary", color: "primary",
type: "e-commerce", type: "e-commerce",
message: "12 new orders has arrived today", message: "12 new orders has arrived today"
}, }
]; ];
export default function Header(props) { export default function Header(props) {
@ -113,42 +112,35 @@ export default function Header(props) {
onClick={() => toggleSidebar(layoutDispatch)} onClick={() => toggleSidebar(layoutDispatch)}
className={classNames( className={classNames(
classes.headerMenuButtonSandwich, classes.headerMenuButtonSandwich,
classes.headerMenuButtonCollapse, classes.headerMenuButtonCollapse
)} )}
> >
{layoutState.isSidebarOpened ? ( {layoutState.isSidebarOpened ? (
<ArrowBackIcon <MenuOpenIcon
classes={{ classes={{
root: classNames( root: classNames(classes.headerIcon, classes.headerIconCollapse)
classes.headerIcon,
classes.headerIconCollapse,
),
}} }}
/> />
) : ( ) : (
<MenuIcon <MenuIcon
classes={{ classes={{
root: classNames( root: classNames(classes.headerIcon, classes.headerIconCollapse)
classes.headerIcon,
classes.headerIconCollapse,
),
}} }}
/> />
)} )}
</IconButton> </IconButton>
<Typography variant="h6" weight="medium" className={classes.logotype}> <Typography variant="h6" weight="medium" className={classes.logotype}>
React Material Admin CDN Admin
</Typography> </Typography>
<div className={classes.grow} /> <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 <div
className={classNames(classes.search, { className={classNames(classes.search, {
[classes.searchFocused]: isSearchOpen, [classes.searchFocused]: isSearchOpen
})} })}
> >
<div <div
className={classNames(classes.searchIcon, { className={classNames(classes.searchIcon, {
[classes.searchIconOpened]: isSearchOpen, [classes.searchIconOpened]: isSearchOpen
})} })}
onClick={() => setSearchOpen(!isSearchOpen)} onClick={() => setSearchOpen(!isSearchOpen)}
> >
@ -158,7 +150,7 @@ export default function Header(props) {
placeholder="Search…" placeholder="Search…"
classes={{ classes={{
root: classes.inputRoot, root: classes.inputRoot,
input: classes.inputInput, input: classes.inputInput
}} }}
/> />
</div> </div>
@ -166,7 +158,7 @@ export default function Header(props) {
color="inherit" color="inherit"
aria-haspopup="true" aria-haspopup="true"
aria-controls="mail-menu" aria-controls="mail-menu"
onClick={e => { onClick={(e) => {
setNotificationsMenu(e.currentTarget); setNotificationsMenu(e.currentTarget);
setIsNotificationsUnread(false); setIsNotificationsUnread(false);
}} }}
@ -183,7 +175,7 @@ export default function Header(props) {
color="inherit" color="inherit"
aria-haspopup="true" aria-haspopup="true"
aria-controls="mail-menu" aria-controls="mail-menu"
onClick={e => { onClick={(e) => {
setMailMenu(e.currentTarget); setMailMenu(e.currentTarget);
setIsMailsUnread(false); setIsMailsUnread(false);
}} }}
@ -201,7 +193,7 @@ export default function Header(props) {
color="inherit" color="inherit"
className={classes.headerMenuButton} className={classes.headerMenuButton}
aria-controls="profile-menu" aria-controls="profile-menu"
onClick={e => setProfileMenu(e.currentTarget)} onClick={(e) => setProfileMenu(e.currentTarget)}
> >
<AccountIcon classes={{ root: classes.headerIcon }} /> <AccountIcon classes={{ root: classes.headerIcon }} />
</IconButton> </IconButton>
@ -227,7 +219,7 @@ export default function Header(props) {
{messages.length} New Messages {messages.length} New Messages
</Typography> </Typography>
</div> </div>
{messages.map(message => ( {messages.map((message) => (
<MenuItem key={message.id} className={classes.messageNotification}> <MenuItem key={message.id} className={classes.messageNotification}>
<div className={classes.messageNotificationSide}> <div className={classes.messageNotificationSide}>
<UserAvatar color={message.variant} name={message.name} /> <UserAvatar color={message.variant} name={message.name} />
@ -238,7 +230,7 @@ export default function Header(props) {
<div <div
className={classNames( className={classNames(
classes.messageNotificationSide, classes.messageNotificationSide,
classes.messageNotificationBodySide, classes.messageNotificationBodySide
)} )}
> >
<Typography weight="medium" gutterBottom> <Typography weight="medium" gutterBottom>
@ -268,7 +260,7 @@ export default function Header(props) {
className={classes.headerMenu} className={classes.headerMenu}
disableAutoFocusItem disableAutoFocusItem
> >
{notifications.map(notification => ( {notifications.map((notification) => (
<MenuItem <MenuItem
key={notification.id} key={notification.id}
onClick={() => setNotificationsMenu(null)} onClick={() => setNotificationsMenu(null)}
@ -303,7 +295,7 @@ export default function Header(props) {
<MenuItem <MenuItem
className={classNames( className={classNames(
classes.profileMenuItem, classes.profileMenuItem,
classes.headerMenuItem, classes.headerMenuItem
)} )}
> >
<AccountIcon className={classes.profileMenuIcon} /> Profile <AccountIcon className={classes.profileMenuIcon} /> Profile
@ -311,7 +303,7 @@ export default function Header(props) {
<MenuItem <MenuItem
className={classNames( className={classNames(
classes.profileMenuItem, classes.profileMenuItem,
classes.headerMenuItem, classes.headerMenuItem
)} )}
> >
<AccountIcon className={classes.profileMenuIcon} /> Tasks <AccountIcon className={classes.profileMenuIcon} /> Tasks
@ -319,7 +311,7 @@ export default function Header(props) {
<MenuItem <MenuItem
className={classNames( className={classNames(
classes.profileMenuItem, classes.profileMenuItem,
classes.headerMenuItem, classes.headerMenuItem
)} )}
> >
<AccountIcon className={classes.profileMenuIcon} /> Messages <AccountIcon className={classes.profileMenuIcon} /> Messages

456
src/components/Header/HeaderView.js
View File

@ -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);

6
src/components/Header/package.json
View File

@ -1,6 +0,0 @@
{
"name": "Header",
"version": "0.0.0",
"private": true,
"main": "Header.js"
}

52
src/components/Layout/Content.js Normal file
View 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
View 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;

136
src/components/Layout/Layout.js
View File

@ -1,147 +1,23 @@
import React from "react"; import React from "react";
import { import { withRouter } from "react-router-dom";
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'
//icons // components
import { import Header from "../Header/Header";
mdiFacebook as FacebookIcon, import Sidebar from "../Sidebar";
mdiTwitter as TwitterIcon, import Content from "./Content";
mdiGithub as GithubIcon,
} from '@mdi/js'
// styles // styles
import useStyles from "./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) { function Layout(props) {
var classes = useStyles(); var classes = useStyles();
// global
var layoutState = useLayoutState();
return ( return (
<div className={classes.root}> <div className={classes.root}>
<> <>
<Header history={props.history} /> <Header history={props.history} />
<Sidebar /> <Sidebar />
<div <Content />
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>
</> </>
</div> </div>
); );

6
src/components/Layout/package.json
View File

@ -1,6 +0,0 @@
{
"name": "Layout",
"version": "1.0.0",
"private": true,
"main": "Layout.js"
}

2
src/components/Notification/index.js Normal file
View File

@ -0,0 +1,2 @@
import Notification from "./Notification";
export default Notification;

6
src/components/Notification/package.json
View File

@ -1,6 +0,0 @@
{
"name": "Notification",
"version": "0.0.0",
"private": true,
"main": "Notification.js"
}

2
src/components/PageTitle/index.js Normal file
View File

@ -0,0 +1,2 @@
import PageTitle from "./PageTitle";
export default PageTitle;

6
src/components/PageTitle/package.json
View File

@ -1,6 +0,0 @@
{
"name": "PageTitle",
"version": "0.0.0",
"private": true,
"main": "PageTitle.js"
}

82
src/components/Sidebar/Sidebar.js
View File

@ -1,16 +1,6 @@
import React, { useState, useEffect } from "react"; import React, { useState, useEffect } from "react";
import { Drawer, IconButton, List } from "@material-ui/core"; import { Drawer, IconButton, List } from "@material-ui/core";
import { import { MenuOpen as MenuOpenIcon } from "@material-ui/icons";
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 { useTheme } from "@material-ui/styles"; import { useTheme } from "@material-ui/styles";
import { withRouter } from "react-router-dom"; import { withRouter } from "react-router-dom";
import classNames from "classnames"; import classNames from "classnames";
@ -20,67 +10,15 @@ import useStyles from "./styles";
// components // components
import SidebarLink from "./components/SidebarLink/SidebarLink"; import SidebarLink from "./components/SidebarLink/SidebarLink";
import Dot from "./components/Dot";
// context // context
import { import {
useLayoutState, useLayoutState,
useLayoutDispatch, useLayoutDispatch,
toggleSidebar, toggleSidebar
} from "../../context/LayoutContext"; } from "../../context/LayoutContext";
const structure = [ import menu from "./menu";
{ 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" />,
},
];
function Sidebar({ location }) { function Sidebar({ location }) {
var classes = useStyles(); var classes = useStyles();
@ -93,7 +31,7 @@ function Sidebar({ location }) {
// local // local
var [isPermanent, setPermanent] = useState(true); var [isPermanent, setPermanent] = useState(true);
useEffect(function() { useEffect(function () {
window.addEventListener("resize", handleWindowWidthChange); window.addEventListener("resize", handleWindowWidthChange);
handleWindowWidthChange(); handleWindowWidthChange();
return function cleanup() { return function cleanup() {
@ -106,28 +44,28 @@ function Sidebar({ location }) {
variant={isPermanent ? "permanent" : "temporary"} variant={isPermanent ? "permanent" : "temporary"}
className={classNames(classes.drawer, { className={classNames(classes.drawer, {
[classes.drawerOpen]: isSidebarOpened, [classes.drawerOpen]: isSidebarOpened,
[classes.drawerClose]: !isSidebarOpened, [classes.drawerClose]: !isSidebarOpened
})} })}
classes={{ classes={{
paper: classNames({ paper: classNames({
[classes.drawerOpen]: isSidebarOpened, [classes.drawerOpen]: isSidebarOpened,
[classes.drawerClose]: !isSidebarOpened, [classes.drawerClose]: !isSidebarOpened
}), })
}} }}
open={isSidebarOpened} open={isSidebarOpened}
> >
<div className={classes.toolbar} /> <div className={classes.toolbar} />
<div className={classes.mobileBackButton}> <div className={classes.mobileBackButton}>
<IconButton onClick={() => toggleSidebar(layoutDispatch)}> <IconButton onClick={() => toggleSidebar(layoutDispatch)}>
<ArrowBackIcon <MenuOpenIcon
classes={{ classes={{
root: classNames(classes.headerIcon, classes.headerIconCollapse), root: classNames(classes.headerIcon, classes.headerIconCollapse)
}} }}
/> />
</IconButton> </IconButton>
</div> </div>
<List className={classes.sidebarList}> <List className={classes.sidebarList}>
{structure.map(link => ( {menu.map((link) => (
<SidebarLink <SidebarLink
key={link.id} key={link.id}
location={location} location={location}

140
src/components/Sidebar/SidebarView.js
View File

@ -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);

45
src/components/Sidebar/components/SidebarLink/SidebarLink.js
View File

@ -6,7 +6,7 @@ import {
ListItem, ListItem,
ListItemIcon, ListItemIcon,
ListItemText, ListItemText,
Typography, Typography
} from "@material-ui/core"; } from "@material-ui/core";
import { Inbox as InboxIcon } from "@material-ui/icons"; import { Inbox as InboxIcon } from "@material-ui/icons";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
@ -26,7 +26,7 @@ export default function SidebarLink({
location, location,
isSidebarOpened, isSidebarOpened,
nested, nested,
type, type
}) { }) {
var classes = useStyles(); var classes = useStyles();
@ -36,19 +36,19 @@ export default function SidebarLink({
link && link &&
(location.pathname === link || location.pathname.indexOf(link) !== -1); (location.pathname === link || location.pathname.indexOf(link) !== -1);
if (type === "divider") return <Divider className={classes.divider} />;
if (type === "title") if (type === "title")
return ( return (
<Typography <Typography
className={classnames(classes.linkText, classes.sectionTitle, { className={classnames(classes.linkText, classes.sectionTitle, {
[classes.linkTextHidden]: !isSidebarOpened, [classes.linkTextHidden]: !isSidebarOpened
})} })}
> >
{label} {label}
</Typography> </Typography>
); );
if (type === "divider") return <Divider className={classes.divider} />; if (link && link.includes("http")) {
if (link && link.includes('http')) {
return ( return (
<ListItem <ListItem
button button
@ -56,15 +56,15 @@ export default function SidebarLink({
classes={{ classes={{
root: classnames(classes.linkRoot, { root: classnames(classes.linkRoot, {
[classes.linkActive]: isLinkActive && !nested, [classes.linkActive]: isLinkActive && !nested,
[classes.linkNested]: nested, [classes.linkNested]: nested
}), })
}} }}
disableRipple disableRipple
> >
<a className={classes.externalLink} href={link}> <a className={classes.externalLink} href={link}>
<ListItemIcon <ListItemIcon
className={classnames(classes.linkIcon, { className={classnames(classes.linkIcon, {
[classes.linkIconActive]: isLinkActive, [classes.linkIconActive]: isLinkActive
})} })}
> >
{nested ? <Dot color={isLinkActive && "primary"} /> : icon} {nested ? <Dot color={isLinkActive && "primary"} /> : icon}
@ -73,15 +73,16 @@ export default function SidebarLink({
classes={{ classes={{
primary: classnames(classes.linkText, { primary: classnames(classes.linkText, {
[classes.linkTextActive]: isLinkActive, [classes.linkTextActive]: isLinkActive,
[classes.linkTextHidden]: !isSidebarOpened, [classes.linkTextHidden]: !isSidebarOpened
}), })
}} }}
primary={label} primary={label}
/> />
</a> </a>
</ListItem> </ListItem>
) );
} }
if (!children) if (!children)
return ( return (
<ListItem <ListItem
@ -92,24 +93,24 @@ export default function SidebarLink({
classes={{ classes={{
root: classnames(classes.linkRoot, { root: classnames(classes.linkRoot, {
[classes.linkActive]: isLinkActive && !nested, [classes.linkActive]: isLinkActive && !nested,
[classes.linkNested]: nested, [classes.linkNested]: nested
}), })
}} }}
disableRipple disableRipple
> >
<ListItemIcon <ListItemIcon
className={classnames(classes.linkIcon, { className={classnames(classes.linkIcon, {
[classes.linkIconActive]: isLinkActive, [classes.linkIconActive]: isLinkActive
})} })}
> >
{nested ? <Dot color={isLinkActive && "primary"} /> : icon} {nested ? icon || <Dot color={isLinkActive && "primary"} /> : icon}
</ListItemIcon> </ListItemIcon>
<ListItemText <ListItemText
classes={{ classes={{
primary: classnames(classes.linkText, { primary: classnames(classes.linkText, {
[classes.linkTextActive]: isLinkActive, [classes.linkTextActive]: isLinkActive,
[classes.linkTextHidden]: !isSidebarOpened, [classes.linkTextHidden]: !isSidebarOpened
}), })
}} }}
primary={label} primary={label}
/> />
@ -128,7 +129,7 @@ export default function SidebarLink({
> >
<ListItemIcon <ListItemIcon
className={classnames(classes.linkIcon, { className={classnames(classes.linkIcon, {
[classes.linkIconActive]: isLinkActive, [classes.linkIconActive]: isLinkActive
})} })}
> >
{icon ? icon : <InboxIcon />} {icon ? icon : <InboxIcon />}
@ -137,8 +138,8 @@ export default function SidebarLink({
classes={{ classes={{
primary: classnames(classes.linkText, { primary: classnames(classes.linkText, {
[classes.linkTextActive]: isLinkActive, [classes.linkTextActive]: isLinkActive,
[classes.linkTextHidden]: !isSidebarOpened, [classes.linkTextHidden]: !isSidebarOpened
}), })
}} }}
primary={label} primary={label}
/> />
@ -151,7 +152,7 @@ export default function SidebarLink({
className={classes.nestedList} className={classes.nestedList}
> >
<List component="div" disablePadding> <List component="div" disablePadding>
{children.map(childrenLink => ( {children.map((childrenLink) => (
<SidebarLink <SidebarLink
key={childrenLink && childrenLink.link} key={childrenLink && childrenLink.link}
location={location} location={location}
@ -167,8 +168,6 @@ export default function SidebarLink({
</> </>
); );
// ###########################################################
function toggleCollapse(e) { function toggleCollapse(e) {
if (isSidebarOpened) { if (isSidebarOpened) {
e.preventDefault(); e.preventDefault();

2
src/components/Sidebar/index.js Normal file
View File

@ -0,0 +1,2 @@
import Sidebar from "./Sidebar";
export default Sidebar;

132
src/components/Sidebar/menu.js Normal file
View 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;

6
src/components/Sidebar/package.json
View File

@ -1,6 +0,0 @@
{
"name": "Sidebar",
"version": "0.0.0",
"private": true,
"main": "Sidebar.js"
}

6
src/components/UserAvatar/package.json
View File

@ -1,6 +0,0 @@
{
"name": "UserAvatar",
"version": "0.0.0",
"private": true,
"main": "UserAvatar.js"
}

21
src/components/Widget/Widget.js
View File

@ -4,7 +4,7 @@ import {
IconButton, IconButton,
Menu, Menu,
MenuItem, MenuItem,
Typography, Typography
} from "@material-ui/core"; } from "@material-ui/core";
import { MoreVert as MoreIcon } from "@material-ui/icons"; import { MoreVert as MoreIcon } from "@material-ui/icons";
import classnames from "classnames"; import classnames from "classnames";
@ -32,14 +32,21 @@ export default function Widget({
var [isMoreMenuOpen, setMoreMenuOpen] = useState(false); var [isMoreMenuOpen, setMoreMenuOpen] = useState(false);
return ( return (
<div className={classes.widgetWrapper} style={style && {...style}}> <div className={classes.widgetWrapper} style={style && { ...style }}>
<Paper className={classes.paper} classes={{ root: classnames(classes.widgetRoot, { <Paper
className={classes.paper}
classes={{
root: classnames(classes.widgetRoot, {
[classes.noWidgetShadow]: noWidgetShadow [classes.noWidgetShadow]: noWidgetShadow
}) }}> })
<div className={classnames(classes.widgetHeader, { }}
>
<div
className={classnames(classes.widgetHeader, {
[classes.noPadding]: noHeaderPadding, [classes.noPadding]: noHeaderPadding,
[headerClass]: headerClass [headerClass]: headerClass
})}> })}
>
{header ? ( {header ? (
header header
) : ( ) : (
@ -65,7 +72,7 @@ export default function Widget({
<div <div
className={classnames(classes.widgetBody, { className={classnames(classes.widgetBody, {
[classes.noPadding]: noBodyPadding, [classes.noPadding]: noBodyPadding,
[bodyClass]: bodyClass, [bodyClass]: bodyClass
})} })}
> >
{children} {children}

2
src/components/Widget/index.js Normal file
View File

@ -0,0 +1,2 @@
import Widget from "./Widget";
export default Widget;

6
src/components/Widget/package.json
View File

@ -1,6 +0,0 @@
{
"name": "Widget",
"version": "0.0.0",
"private": true,
"main": "Widget.js"
}

40
src/components/Wrappers/Wrappers.js
View File

@ -3,18 +3,18 @@ import {
withStyles, withStyles,
Badge as BadgeBase, Badge as BadgeBase,
Typography as TypographyBase, Typography as TypographyBase,
Button as ButtonBase, Button as ButtonBase
} from "@material-ui/core"; } from "@material-ui/core";
import { useTheme, makeStyles } from "@material-ui/styles"; import { useTheme, makeStyles } from "@material-ui/styles";
import classnames from "classnames"; import classnames from "classnames";
// styles // styles
var useStyles = makeStyles(theme => ({ var useStyles = makeStyles((theme) => ({
badge: { badge: {
fontWeight: 600, fontWeight: 600,
height: 16, height: 16,
minWidth: 16, minWidth: 16
}, }
})); }));
function Badge({ children, colorBrightness, color, ...props }) { function Badge({ children, colorBrightness, color, ...props }) {
@ -22,16 +22,16 @@ function Badge({ children, colorBrightness, color, ...props }) {
var theme = useTheme(); var theme = useTheme();
var Styled = createStyled({ var Styled = createStyled({
badge: { badge: {
backgroundColor: getColor(color, theme, colorBrightness), backgroundColor: getColor(color, theme, colorBrightness)
}, }
}); });
return ( return (
<Styled> <Styled>
{styledProps => ( {(styledProps) => (
<BadgeBase <BadgeBase
classes={{ classes={{
badge: classnames(classes.badge, styledProps.classes.badge), badge: classnames(classes.badge, styledProps.classes.badge)
}} }}
{...props} {...props}
> >
@ -57,7 +57,7 @@ function Typography({
style={{ style={{
color: getColor(color, theme, colorBrightness), color: getColor(color, theme, colorBrightness),
fontWeight: getFontWeight(weight), fontWeight: getFontWeight(weight),
fontSize: getFontSize(size, props.variant, theme), fontSize: getFontSize(size, props.variant, theme)
}} }}
{...props} {...props}
> >
@ -71,7 +71,7 @@ function Button({ children, color, className, ...props }) {
var Styled = createStyled({ var Styled = createStyled({
root: { root: {
color: getColor(color, theme), color: getColor(color, theme)
}, },
contained: { contained: {
backgroundColor: getColor(color, theme), backgroundColor: getColor(color, theme),
@ -79,20 +79,20 @@ function Button({ children, color, className, ...props }) {
color: `${color ? "white" : theme.palette.text.primary} !important`, color: `${color ? "white" : theme.palette.text.primary} !important`,
"&:hover": { "&:hover": {
backgroundColor: getColor(color, theme, "light"), backgroundColor: getColor(color, theme, "light"),
boxShadow: theme.customShadows.widgetWide, boxShadow: theme.customShadows.widgetWide
}, },
"&:active": { "&:active": {
boxShadow: theme.customShadows.widgetWide, boxShadow: theme.customShadows.widgetWide
}, }
}, },
outlined: { outlined: {
color: getColor(color, theme), color: getColor(color, theme),
borderColor: getColor(color, theme), borderColor: getColor(color, theme)
}, },
select: { select: {
backgroundColor: theme.palette.primary.main, backgroundColor: theme.palette.primary.main,
color: "#fff", color: "#fff"
}, }
}); });
return ( return (
@ -102,14 +102,14 @@ function Button({ children, color, className, ...props }) {
classes={{ classes={{
contained: classes.contained, contained: classes.contained,
root: classes.root, root: classes.root,
outlined: classes.outlined, outlined: classes.outlined
}} }}
{...props} {...props}
className={classnames( className={classnames(
{ {
[classes.select]: props.select, [classes.select]: props.select
}, },
className, className
)} )}
> >
{children} {children}
@ -172,7 +172,7 @@ function getFontSize(size, variant = "", theme) {
} }
function createStyled(styles, options) { function createStyled(styles, options) {
var Styled = function(props) { var Styled = function (props) {
const { children, ...other } = props; const { children, ...other } = props;
return children(other); return children(other);
}; };

1
src/components/Wrappers/index.js Normal file
View File

@ -0,0 +1 @@
export { Badge, Typography, Button } from "./Wrappers";

7
src/components/Wrappers/package.json
View File

@ -1,7 +0,0 @@
{
"name": "Wrappers",
"version": "0.0.0",
"private": true,
"main": "Wrappers.js"
}

17
src/pages/tables/Tables.js
View File

@ -28,14 +28,14 @@ const datatableData = [
["Anna Siranush", "Example Inc.", "Yonkers", "NY"], ["Anna Siranush", "Example Inc.", "Yonkers", "NY"],
["Avram Sylva", "Example Inc.", "Hartford", "CT"], ["Avram Sylva", "Example Inc.", "Hartford", "CT"],
["Serafima Babatunde", "Example Inc.", "Tampa", "FL"], ["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: { tableOverflow: {
overflow: 'auto' overflow: "auto"
} }
})) }));
export default function Tables() { export default function Tables() {
const classes = useStyles(); const classes = useStyles();
@ -49,12 +49,17 @@ export default function Tables() {
data={datatableData} data={datatableData}
columns={["Name", "Company", "City", "State"]} columns={["Name", "Company", "City", "State"]}
options={{ options={{
filterType: "checkbox", filterType: "checkbox"
}} }}
/> />
</Grid> </Grid>
<Grid item xs={12}> <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} /> <Table data={mock.table} />
</Widget> </Widget>
</Grid> </Grid>

12799
yarn.lock
View File

File diff suppressed because it is too large Load Diff