From d7b290acf67bf8814c84f144025180092fd6d64c Mon Sep 17 00:00:00 2001 From: Jayasanka Date: Fri, 23 Aug 2019 14:32:31 +0530 Subject: [PATCH] Add nav bar to device mgt reat app --- .../react-app/public/conf/config.json | 8 +- .../react-app/public/images/logo.svg | 799 +----------------- .../react-app/src/App.css | 92 +- .../src/pages/Dashboard/Dashboard.js | 111 ++- .../{dashboard => Dashboard}/Dashboard.less | 0 5 files changed, 139 insertions(+), 871 deletions(-) rename components/device-mgt/io.entgra.device.mgt.ui/react-app/src/pages/{dashboard => Dashboard}/Dashboard.less (100%) diff --git a/components/device-mgt/io.entgra.device.mgt.ui/react-app/public/conf/config.json b/components/device-mgt/io.entgra.device.mgt.ui/react-app/public/conf/config.json index 43411cf4f81..0a78ea8abdb 100644 --- a/components/device-mgt/io.entgra.device.mgt.ui/react-app/public/conf/config.json +++ b/components/device-mgt/io.entgra.device.mgt.ui/react-app/public/conf/config.json @@ -1,17 +1,11 @@ { "theme": { - "type": "default", - "value": "lightBaseTheme", - "logo" : "https://entgra.io/assets/images/svg/logo.svg", + "logo" : "https://localhost:9443/entgra/public/images/logo.svg", "primaryColor": "rgb(24, 144, 255)" }, "serverConfig": { - "invokerUri": "/ui-request-handler/invoke/application-mgt-entgra/v1.0", "invoker": { "uri": "/entgra-ui-request-handler/invoke", - "publisher": "/application-mgt-publisher/v1.0", - "entgra": "/application-mgt-entgra/v1.0", - "admin" : "", "deviceMgt" : "/device-mgt/v1.0" }, "loginUri": "/entgra-ui-request-handler/login", diff --git a/components/device-mgt/io.entgra.device.mgt.ui/react-app/public/images/logo.svg b/components/device-mgt/io.entgra.device.mgt.ui/react-app/public/images/logo.svg index 05742db887f..05eb79a8117 100644 --- a/components/device-mgt/io.entgra.device.mgt.ui/react-app/public/images/logo.svg +++ b/components/device-mgt/io.entgra.device.mgt.ui/react-app/public/images/logo.svg @@ -1,798 +1 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +logo \ No newline at end of file diff --git a/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/App.css b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/App.css index d393e9ad689..ccb40f38c0a 100644 --- a/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/App.css +++ b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/App.css @@ -17,51 +17,85 @@ */ .ant-upload.ant-upload-drag { - height: 170px; + height: 170px; } -.release .release-icon{ - margin-right: 15px; +.release .release-icon { + margin-right: 15px; } -.release .release-icon img{ - width: 100%; - border-radius: 28%; +.release .release-icon img { + width: 100%; + border-radius: 28%; } -.release .release-title{ - margin-left: 15px; +.release .release-title { + margin-left: 15px; } -.release .release-screenshot img{ - width: 100%; - border-radius: 15px; - padding: 5px; +.release .release-screenshot img { + width: 100%; + border-radius: 15px; + padding: 5px; } -.logo-image { - /*width: 120px;*/ - height: 31px; - margin: 0 5px 16px 24px; - float: left; +/*.logo-image {*/ +/*!*width: 120px;*!*/ +/*height: 31px;*/ +/*margin: 0 5px 16px 24px;*/ +/*float: left;*/ +/*}*/ + + +.main-container { + background: #f0f2f5; + min-height: 780px } -.logo-image img{ - height: 35px; +.profile { + float: right; + margin-right: 2%; } -.main-container{ - background: #f0f2f5; - min-height: 780px +@media only screen and (min-width: 768px) { + .main-container { + padding: 24px; + } } -.profile{ - float:right; - margin-right: 2%; +.layout .trigger { + font-size: 18px; + /*line-height: 64px;*/ + padding: 0 24px; + cursor: pointer; + transition: color 0.3s; + float: left; } -@media only screen and (min-width: 768px) { - .main-container{ - padding: 24px; - } +.layout .trigger:hover { + color: #1890ff; +} + +.layout .logo-image { + position: relative; + height: 64px; + padding-left: 8px; + overflow: hidden; + line-height: 64px; + background: #001529; + transition: all .3s; +} + +.layout .brand{ + display: inline-block; + color: #fff; + font-weight: 600; + font-size: 20px; + font-family: Avenir,Helvetica Neue,Arial,Helvetica,sans-serif; + vertical-align: middle; +} + +.layout .logo-image img { + height: 32px; + margin: 16px; } \ No newline at end of file diff --git a/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/pages/Dashboard/Dashboard.js b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/pages/Dashboard/Dashboard.js index 590c190a582..a5953370948 100644 --- a/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/pages/Dashboard/Dashboard.js +++ b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/pages/Dashboard/Dashboard.js @@ -17,7 +17,7 @@ */ import React from "react"; -import {Layout, Menu, Icon} from 'antd'; +import {Layout, Menu, Icon, Typography} from 'antd'; import {Switch, Link} from "react-router-dom"; import RouteWithSubRoutes from "../../components/RouteWithSubRoutes" import {Redirect} from 'react-router' @@ -25,9 +25,10 @@ import "../../App.css"; import {withConfigContext} from "../../context/ConfigContext"; import Logout from "./Logout/Logout"; -const {Header, Content, Footer} = Layout; +const {Header, Content, Footer, Sider} = Layout; const {SubMenu} = Menu; +const {Title} = Typography; class Dashboard extends React.Component { constructor(props) { @@ -35,56 +36,92 @@ class Dashboard extends React.Component { this.state = { routes: props.routes, selectedKeys: [], - deviceTypes: [] + deviceTypes: [], + isNavBarCollapsed: false, }; this.logo = this.props.context.theme.logo; } + toggle = () => { + this.setState({ + isNavBarCollapsed: !this.state.isNavBarCollapsed, + }); + }; + render() { return (
- -
+ +
logo + Entgra
- - Devices - Geo - Reports + + + + + Devices + + + + + + Geo + + + + + + Reports + + + + + +
+
+ +
+ + - + + Profile - } - > - - + } + > + + - - -
- - - - - - {this.state.routes.map((route) => ( - - ))} - - -
- ©2019 entgra.io -
+ +
+ + + + {this.state.routes.map((route) => ( + + ))} + + + +
); diff --git a/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/pages/dashboard/Dashboard.less b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/pages/Dashboard/Dashboard.less similarity index 100% rename from components/device-mgt/io.entgra.device.mgt.ui/react-app/src/pages/dashboard/Dashboard.less rename to components/device-mgt/io.entgra.device.mgt.ui/react-app/src/pages/Dashboard/Dashboard.less