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=5022152e3b18636c8cf87f3d752aac751b485c6f;hpb=5fe750cb519c88a5fd6c55a93670354b78b806dc;p=clamp.git diff --git a/ui-react/src/components/menu/MenuBar.js b/ui-react/src/components/menu/MenuBar.js index 5022152e..92380ab6 100644 --- a/ui-react/src/components/menu/MenuBar.js +++ b/ui-react/src/components/menu/MenuBar.js @@ -24,12 +24,13 @@ 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' +import { Link } from 'react-router-dom'; const StyledLink = styled(Link)` - color: ${props => props.theme.menuColor}; + color: ${props => props.theme.menuFontColor}; background-color: ${props => props.theme.menuBackgroundColor}; font-weight: normal; display: block; @@ -40,47 +41,81 @@ const StyledLink = styled(Link)` white-space: nowrap; border: 0; :hover { - text-decoration: none; - 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.menuColor}; + color: ${props => props.theme.menuFontColor}; background-color: ${props => props.theme.menuBackgroundColor}; - font-weight: normal; + font-weight: normal; padding: .25rem 1.5rem; :hover { - background-color: ${props => props.theme.loopViewerHeaderBackgroundColor}; - color: ${props => props.theme.loopViewerHeaderFontColor} + 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 - - + + 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 - + ); }