X-Git-Url: https://gerrit.onap.org/r/gitweb?a=blobdiff_plain;f=ui-react%2Fsrc%2Fcomponents%2Fmenu%2FMenuBar.js;h=92380ab6c994b6d82e76e67eaa95dd52400440cd;hb=2d28cbf6954c50de004a0d8f1a2ada7ec400fea3;hp=491cc675dc46670ea784f648dc254ba4ed9c153f;hpb=2eb723772eb99e67d621165d38f289a260488b05;p=clamp.git
diff --git a/ui-react/src/components/menu/MenuBar.js b/ui-react/src/components/menu/MenuBar.js
index 491cc675..92380ab6 100644
--- a/ui-react/src/components/menu/MenuBar.js
+++ b/ui-react/src/components/menu/MenuBar.js
@@ -21,45 +21,102 @@
*
*/
import React from 'react';
+import Nav from 'react-bootstrap/Nav';
import Navbar from 'react-bootstrap/Navbar';
import NavDropdown from 'react-bootstrap/NavDropdown';
+import OnapConstants from '../../utils/OnapConstants';
import 'bootstrap-css-only/css/bootstrap.min.css';
import styled from 'styled-components';
+import { Link } from 'react-router-dom';
-const StyledNavDropdownItem = styled(NavDropdown.Item)`
- color: ${props => props.theme.fontNormal};
+const StyledLink = styled(Link)`
+ color: ${props => props.theme.menuFontColor};
+ background-color: ${props => props.theme.menuBackgroundColor};
+ font-weight: normal;
+ display: block;
+ width: 100%;
+ padding: .25rem 1.5rem;
+ clear: both;
+ text-align: inherit;
+ white-space: nowrap;
+ border: 0;
:hover {
- background-color: ${props => props.theme.loopViewerHeaderBackgroundColor};
- color: ${props => props.theme.loopViewerHeaderFontColor}
+ text-decoration: none;
+ background-color: ${props => props.theme.menuHighlightedBackgroundColor};
+ color: ${props => props.theme.menuHighlightedFontColor};
+ }
+`;
+const StyledNavLink = styled(Nav.Link)`
+ color: ${props => props.theme.menuFontColor};
+ background-color: ${props => props.theme.menuBackgroundColor};
+ font-weight: normal;
+ padding: .25rem 1.5rem;
+ :hover {
+ background-color: ${props => props.theme.menuHighlightedBackgroundColor};
+ color: ${props => props.theme.menuHighlightedFontColor};
+ }
+`;
+
+const StyledNavDropdown = styled(NavDropdown)`
+ color: ${props => props.theme.menuFontColor};
+ & .dropdown-toggle {
+ color: ${props => props.theme.menuFontColor};
+ background-color: ${props => props.theme.backgroundColor};
+ font-weight: normal;
+ :hover {
+ font-weight: bold;
+ }
}
`;
export default class MenuBar extends React.Component {
+ state = {
+ loopName: this.props.loopName,
+ disabled: true
+ };
+
+ componentWillReceiveProps(newProps) {
+ if (newProps.loopName !== OnapConstants.defaultLoopName) {
+ this.setState({ disabled: false });
+ } else {
+ this.setState({ disabled: true });
+ }
+ }
+
render () {
- return (
-
-
- Open CL
- Properties CL
- Close Model
-
-
- Submit
- Stop
- Restart
- Delete
- Deploy
- UnDeploy
-
-
- Refresh Status
-
-
- Wiki
- Contact Us
- User Info
-
-
- );
- }
+ return (
+
+
+
+ View All Templates
+
+
+ Upload Tosca Model
+ View Tosca Models
+
+
+ Create
+ Open
+ Properties
+ Close
+ Modify
+ Refresh Status
+
+
+ Create and deploy to Policy Engine(SUBMIT)
+ Undeploy from Policy Engine (STOP)
+ ReDeploy to Policy Engine (RESTART)
+ Delete loop instance (DELETE)
+
+ Deploy to DCAE (DEPLOY)
+ UnDeploy to DCAE (UNDEPLOY)
+
+
+ Wiki
+ Contact Us
+ User Info
+
+
+ );
+ }
}