From 065c6a97d802c94e7b7b3b22cc82dd64667db729 Mon Sep 17 00:00:00 2001 From: xg353y Date: Tue, 25 Jun 2019 12:23:28 +0200 Subject: [PATCH] Restructure the clamp ui header Restructure the clamp ui header Issue-ID: CLAMP-414 Change-Id: I96553a60665553d4de8a8a60cb0e5d53ff949c62 Signed-off-by: xg353y --- ui-react/public/index.html | 23 ++++++++++++++++- ui-react/src/ClampHeader.js | 42 ++++++++++++++++++++++++++++++ ui-react/src/ClampLogo.js | 43 +++++++++++++++++++++++++++++++ ui-react/src/MenuBar.js | 55 ++++++++++++++++++++++++++++++++++++++++ ui-react/src/UserBar.js | 36 ++++++++++++++++++++++++++ ui-react/src/index.js | 62 +++++++++++++++++---------------------------- 6 files changed, 221 insertions(+), 40 deletions(-) create mode 100644 ui-react/src/ClampHeader.js create mode 100644 ui-react/src/ClampLogo.js create mode 100644 ui-react/src/MenuBar.js create mode 100644 ui-react/src/UserBar.js diff --git a/ui-react/public/index.html b/ui-react/public/index.html index 85267426..f255b75f 100644 --- a/ui-react/public/index.html +++ b/ui-react/public/index.html @@ -1,4 +1,25 @@ - +/*- + * ============LICENSE_START======================================================= + * ONAP CLAMP + * ================================================================================ + * Copyright (C) 2019 AT&T Intellectual Property. All rights + * reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END============================================ + * =================================================================== + * + */ diff --git a/ui-react/src/ClampHeader.js b/ui-react/src/ClampHeader.js new file mode 100644 index 00000000..79a24cdf --- /dev/null +++ b/ui-react/src/ClampHeader.js @@ -0,0 +1,42 @@ +/*- + * ============LICENSE_START======================================================= + * ONAP CLAMP + * ================================================================================ + * Copyright (C) 2019 AT&T Intellectual Property. All rights + * reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END============================================ + * =================================================================== + * + */ + +import React from 'react'; +import ClampLogo from './ClampLogo'; +import UserBar from './UserBar'; +import MenuBar from './MenuBar'; +import './index.css'; + +class ClampHeader extends React.Component { + render() { + return ( +
+ + + +
+ ); + } +} + +export default ClampHeader; diff --git a/ui-react/src/ClampLogo.js b/ui-react/src/ClampLogo.js new file mode 100644 index 00000000..bbde81e7 --- /dev/null +++ b/ui-react/src/ClampLogo.js @@ -0,0 +1,43 @@ +/*- + * ============LICENSE_START======================================================= + * ONAP CLAMP + * ================================================================================ + * Copyright (C) 2019 AT&T Intellectual Property. All rights + * reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END============================================ + * =================================================================== + * + */ + +import React from 'react'; +import './index.css'; + +class ClampLogo extends React.Component { + render() { + return ( +
+ +
+    + CLAMP +
+
+ ); + } +} + +export default ClampLogo; diff --git a/ui-react/src/MenuBar.js b/ui-react/src/MenuBar.js new file mode 100644 index 00000000..2078c962 --- /dev/null +++ b/ui-react/src/MenuBar.js @@ -0,0 +1,55 @@ +/*- + * ============LICENSE_START======================================================= + * ONAP CLAMP + * ================================================================================ + * Copyright (C) 2019 AT&T Intellectual Property. All rights + * reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END============================================ + * =================================================================== + * + */ +import React from 'react'; +import Navbar from 'react-bootstrap/Navbar'; +import Nav from 'react-bootstrap/Nav'; +import NavItem from 'react-bootstrap/NavItem'; +import NavDropdown from 'react-bootstrap/NavDropdown'; + + +class MenuBar extends React.Component { + render () { + return ( +
+ + React-Bootstrap + + + + + + +
+ + + ); + } +} + +export default MenuBar; diff --git a/ui-react/src/UserBar.js b/ui-react/src/UserBar.js new file mode 100644 index 00000000..d5f2554b --- /dev/null +++ b/ui-react/src/UserBar.js @@ -0,0 +1,36 @@ +/*- + * ============LICENSE_START======================================================= + * ONAP CLAMP + * ================================================================================ + * Copyright (C) 2019 AT&T Intellectual Property. All rights + * reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END============================================ + * =================================================================== + * + */ +import React from 'react'; +import './index.css'; + +class UserBar extends React.Component { + render () { + const user = this.props.user; + return ( +
Hello:{user} +
+ ); + } +} + +export default UserBar; diff --git a/ui-react/src/index.js b/ui-react/src/index.js index fed8c0f4..53d36988 100644 --- a/ui-react/src/index.js +++ b/ui-react/src/index.js @@ -1,44 +1,28 @@ +/*- + * ============LICENSE_START======================================================= + * ONAP CLAMP + * ================================================================================ + * Copyright (C) 2019 AT&T Intellectual Property. All rights + * reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END============================================ + * =================================================================== + * + */ import React from 'react'; import ReactDOM from 'react-dom'; -import './index.css'; - -class UserBar extends React.Component { - render () { - const user = this.props.user; - return ( -
Hello:{user} -
- ); - } -} - -class ClampLogo extends React.Component { - render() { - return ( -
- -
-    - CLAMP -
-
- ); - } -} - -class ClampHeader extends React.Component { - render() { - return ( -
- -
- -
- ); - } -} +import ClampHeader from './ClampHeader'; ReactDOM.render( , -- 2.16.6