diff options
| author |   sebdet <sebastien.determe@intl.att.com> | 2019-06-25 11:06:06 +0200 |
|---|---|---|
| committer | sebdet <sebastien.determe@intl.att.com> | 2019-06-25 11:50:09 +0200 |
| commit | c95e8dfe17f9ebf48ece6450c7bab40d7546ee0d (patch) | |
| tree | 79a54c340e2e4a28c8225ed028ecb869d218deaa /ui-react | |
| parent | 86042f471f05f08a9c6935988b523c3e2949b7f0 (diff) | |
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>
Diffstat (limited to 'ui-react')
| -rw-r--r-- | ui-react/nginx/nginx.conf | 17 | ||||
| -rw-r--r-- | ui-react/package.json | 27 | ||||
| -rw-r--r-- | ui-react/public/index.html | 18 | ||||
| -rw-r--r-- | ui-react/public/manifest.json | 15 | ||||
| -rw-r--r-- | ui-react/public/onap.ico | bin | 0 -> 18046 bytes | |||
| -rw-r--r-- | ui-react/src/images/logo_onap_2017.png | bin | 0 -> 21360 bytes | |||
| -rw-r--r-- | ui-react/src/index.css | 50 | ||||
| -rw-r--r-- | ui-react/src/index.js | 46 |
8 files changed, 173 insertions, 0 deletions
diff --git a/ui-react/nginx/nginx.conf b/ui-react/nginx/nginx.conf new file mode 100644 index 000000000..758a646e5 --- /dev/null +++ b/ui-react/nginx/nginx.conf @@ -0,0 +1,17 @@ +server { + + listen 80; + + location / { + root /usr/share/nginx/html; + index index.html index.htm; + try_files $uri $uri/ /index.html; + } + + error_page 500 502 503 504 /50x.html; + + location = /50x.html { + root /usr/share/nginx/html; + } + +}
\ No newline at end of file diff --git a/ui-react/package.json b/ui-react/package.json new file mode 100644 index 000000000..c8197d1e6 --- /dev/null +++ b/ui-react/package.json @@ -0,0 +1,27 @@ +{ + "name": "clamp-ui", + "version": "0.0.1", + "description": "ONAP Clamp Designer UI", + "main": "index.js", + "scripts": { + "start": "react-scripts start", + "build": "react-scripts build", + "test": "react-scripts test --env=jsdom", + "eject": "react-scripts eject" + }, + "author": "ONAP Clamp Team", + "license": "Apache-2.0", + "dependencies": { + "json-editor": "^0.7.28", + "react": "~16.8.0", + "react-dom": "~16.8.0", + "react-scripts": "~3.0.1", + "onap-ui-react":"0.1.1" + }, + "browserslist": [ + ">0.2%", + "not dead", + "not ie <= 11", + "not op_mini all" + ] +} diff --git a/ui-react/public/index.html b/ui-react/public/index.html new file mode 100644 index 000000000..85267426d --- /dev/null +++ b/ui-react/public/index.html @@ -0,0 +1,18 @@ + +<!DOCTYPE html> +<html lang="en"> +<head> +<meta charset="utf-8"> +<meta name="viewport" + content="width=device-width, initial-scale=1, shrink-to-fit=no"> +<meta name="theme-color" content="#000000"> +<link rel="manifest" href="%PUBLIC_URL%/manifest.json"> +<link rel="shortcut icon" href="%PUBLIC_URL%/onap.ico"> + +<title>Clamp Designer UI</title> +</head> +<body> + <noscript>You need to enable JavaScript to run this app.</noscript> + <div id="root"></div> +</body> +</html> diff --git a/ui-react/public/manifest.json b/ui-react/public/manifest.json new file mode 100644 index 000000000..8210c4ee5 --- /dev/null +++ b/ui-react/public/manifest.json @@ -0,0 +1,15 @@ +{ + "short_name": "Clamp Designer UI", + "name": "Clamp Designer UI", + "icons": [ + { + "src": "onap.ico", + "sizes": "64x64 32x32 24x24 16x16", + "type": "image/x-icon" + } + ], + "start_url": "./index.html", + "display": "standalone", + "theme_color": "#000000", + "background_color": "#ffffff" +} diff --git a/ui-react/public/onap.ico b/ui-react/public/onap.ico Binary files differnew file mode 100644 index 000000000..85e168ae2 --- /dev/null +++ b/ui-react/public/onap.ico diff --git a/ui-react/src/images/logo_onap_2017.png b/ui-react/src/images/logo_onap_2017.png Binary files differnew file mode 100644 index 000000000..c6f6857a5 --- /dev/null +++ b/ui-react/src/images/logo_onap_2017.png diff --git a/ui-react/src/index.css b/ui-react/src/index.css new file mode 100644 index 000000000..86e0f9e4b --- /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 000000000..fed8c0f41 --- /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') +) |
