Frontend initial draft
New frontend initial draft in React with docker image in nginx
Issue-ID: CLAMP-413
Change-Id: Ie5826d79aa3db23f863e8fd217189ba41534abe9
Signed-off-by: sebdet <sebastien.determe@intl.att.com>
diff --git a/ui-react/src/images/logo_onap_2017.png b/ui-react/src/images/logo_onap_2017.png
new file mode 100644
index 0000000..c6f6857
--- /dev/null
+++ b/ui-react/src/images/logo_onap_2017.png
Binary files differ
diff --git a/ui-react/src/index.css b/ui-react/src/index.css
new file mode 100644
index 0000000..86e0f9e
--- /dev/null
+++ b/ui-react/src/index.css
@@ -0,0 +1,50 @@
+.nav {
+ margin-left: 2px;
+ margin-right: 2px;
+}
+.navbar-brand {
+ float: left;
+ height: 50px;
+ padding: 15px 15px;
+ font-size: 18px;
+ line-height: 20px;
+}
+.rowC {
+ display: flex;
+ flex-direction:row;
+}
+.logo {
+ font-family: 'Trebuchet MS', cursive;
+ font-size: 20px;
+ font-weight: 500;
+ text-align: center;
+}
+.image_style {
+ display: inline-block;
+ float: left;
+}
+.dummy {
+ float: right;
+ padding-right: 50px;
+}
+.user_name {
+ display: block;
+ float: left;
+ font-family: 'Trebuchet MS', cursive;
+ font-size: 15px;
+ font-weight: 500;
+ height: 50px;
+ text-align: right;
+}
+
+.ClampHeader {
+ margin-left: 2px;
+ margin-right: 2px;
+}
+
+.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
+ float: left;
+ }
+ .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
+ float: left;
+ }
\ No newline at end of file
diff --git a/ui-react/src/index.js b/ui-react/src/index.js
new file mode 100644
index 0000000..fed8c0f
--- /dev/null
+++ b/ui-react/src/index.js
@@ -0,0 +1,46 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import './index.css';
+
+class UserBar extends React.Component {
+ render () {
+ const user = this.props.user;
+ return (
+ <div className="user_name">Hello:{user}
+ </div>
+ );
+ }
+}
+
+class ClampLogo extends React.Component {
+ render() {
+ return (
+ <div className="col-md-4 col-lg-4">
+ <img className="image_style" alt="" src={require('./images/logo_onap_2017.png')}
+ height="50px"
+ width="234px"/>
+ <div className="navbar-brand logo">
+
+ <b>CLAMP</b>
+ </div>
+ </div>
+ );
+ }
+}
+
+class ClampHeader extends React.Component {
+ render() {
+ return (
+ <div className='rowC'>
+ <ClampLogo />
+ <div className="dummy"></div>
+ <UserBar />
+ </div>
+ );
+ }
+}
+
+ReactDOM.render(
+ <ClampHeader />,
+ document.getElementById('root')
+)
