Added logo component, material design button styles. Replaced logo in main page.

feature/appm-store/pbac
Menaka Jayawardena 7 years ago
parent da51c4b270
commit 3c83cd9b80

@ -1,6 +1,7 @@
{ {
"Title" : "Title", "Title" : "Title",
"Description" : "Description", "Description" : "Description",
"ShortDescription" : "Short Description",
"Category" : "Category", "Category" : "Category",
"Visibility" : "Visibility", "Visibility" : "Visibility",
"Devices" : "Devices", "Devices" : "Devices",

@ -32,11 +32,90 @@
src: local("Roboto-Regular"), url("../../fonts/Roboto-Regular.woff2") format("woff2"); src: local("Roboto-Regular"), url("../../fonts/Roboto-Regular.woff2") format("woff2");
} }
/*Colors*/
.primary {
color: white;
background-color: #2196f3 !important;
}
.primary-flat {
color: #2196F3 !important;
}
.danger {
color: white;
background-color: #e91e63 !important;
}
.danger-flat {
color: #e91e63 !important;
}
.grey {
color: #b3b3b3 !important;
}
/* ==================================================================== */
/* Custom button styles based on material design specs. */
.custom-raised {
font-family: Roboto-Medium;
text-transform: uppercase !important;
font-size: 14px !important;
padding-left: 16px !important;
border-radius: 2px !important;
padding-right: 16px !important;
height: 36px !important;
border: none !important;
}
.custom-raised:hover {
cursor: pointer;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.08) !important;
-webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.08) !important;
background-color: #1976D2 !important;
}
.custom-raised:focus {
box-shadow: none !important;
-webkit-box-shadow: none !important;
background-color: #1976D2 !important;
}
.custom-flat {
font-family: Roboto-Medium;
height: 36px !important;
border-radius: 2px !important;
margin-left: 8px !important;
margin-right: 8px !important;
padding-left: 8px !important;
padding-right: 8px !important;
background-color: transparent !important;
text-transform: uppercase;
outline: none !important;
border: none !important;
}
.custom-flat:hover {
cursor: pointer;
background-color: rgba(0, 0, 0, 0.12) !important;
}
.custom-flat:focus {
outline: none !important;
border: none !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
background-color: rgba(0, 0, 0, 0.40) !important;
}
/* ==================================================================== */
/* Body Styling */ /* Body Styling */
body { body {
width: 100%; width: 100%;
font-family: "Roboto-Regular" !important; font-family: "Roboto-Regular" !important;
background-color: #dfdfdf !important; background-color: #e8e8e8 !important;
} }
.app-manager-title { .app-manager-title {
@ -67,26 +146,47 @@ body {
border-radius: 0; border-radius: 0;
} }
#login-btn { .login-btn {
border-radius: 0; float: right;
background-color: navy;
color: white;
cursor: pointer;
} }
#login-container { .login-header {
background-color: #3f50b5;
color: white;
height: 128px;
width: 100%;
margin: 0 !important;
padding: 20px;
box-shadow: -2px 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
} }
#login-card { #login-card {
width: 20%; width: 25%;
height: 50%; height: 50%;
margin: 10% auto; margin: 10% auto;
padding: 10px; font-family: Roboto-Regular;
font-size: 14px;
border-radius: 0; border-radius: 0;
background-color: #ffffff; background-color: #ffffff;
box-shadow: -2px 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); box-shadow: -2px 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
} }
.login-header-title {
font-family: Roboto-Medium;
font-size: 20px;
font-weight: 500;
}
.login-header-logo {
height: 70px;
width: 150px;
}
.login-form {
margin: 0 !important;
padding: 40px;
}
/* Base layout container */ /* Base layout container */
#container { #container {
background-color: #ededed; background-color: #ededed;
@ -207,8 +307,7 @@ body {
} }
.add-btn:hover { .add-btn:hover {
cursor: pointer; background-color: #E64A19;
background-color: rgb(255, 103, 5);
} }
#app-main-content { #app-main-content {
@ -383,18 +482,6 @@ body {
overflow-y: auto; overflow-y: auto;
} }
#secondary-button {
color: #979797;
background-color: transparent;
border: none;
}
#secondary-button:hover {
background-color: #d8d8d8;
outline: none;
cursor: pointer;
}
.step-index { .step-index {
height: 20px; height: 20px;
width: 20px; width: 20px;
@ -678,7 +765,7 @@ div.tab button.active {
} }
.platform-content { .platform-content {
width: 350px; width: 500px;
margin: 10px; margin: 10px;
padding: 24px; padding: 24px;
box-shadow: 2px 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); box-shadow: 2px 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
@ -698,11 +785,12 @@ div.tab button.active {
width: 100px; width: 100px;
border-radius: 50%; border-radius: 50%;
background-color: #3f50b5; background-color: #3f50b5;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.08) !important;
-webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.08) !important;
} }
.platform-content:hover { .platform-content:hover {
background-color: #f2f2f2; background-color: #f2f2f2;
cursor: pointer;
} }
.data-table-row-cell { .data-table-row-cell {

@ -25,6 +25,7 @@ import {Button, Col, Container, Input, Row,} from 'reactstrap';
import ApplicationCreate from '../Application/Create/ApplicationCreate'; import ApplicationCreate from '../Application/Create/ApplicationCreate';
import FloatingButton from "../UIComponents/FloatingButton/FloatingButton"; import FloatingButton from "../UIComponents/FloatingButton/FloatingButton";
import {FormattedMessage} from 'react-intl'; import {FormattedMessage} from 'react-intl';
import Logo from "../UIComponents/Logo/Logo";
/** /**
* Base Layout: * Base Layout:
@ -49,14 +50,7 @@ class BaseLayout extends Component {
} }
componentWillMount() { componentWillMount() {
Axios.get("/images/logo.png", {responseType: 'arraybuffer'}).then(
response => {
let image = "data:image/jpeg;base64," + new Buffer(response.data, 'binary').toString('base64');
this.setState({logo: image});
}
).catch(err => {
console.log(err);
});
} }
handleApplicationClick() { handleApplicationClick() {
@ -98,7 +92,7 @@ class BaseLayout extends Component {
<div id="header"> <div id="header">
<span id="header-text"> <span id="header-text">
<img className="header-image" src={this.state.logo}/> <Logo className="header-image" image_name="logo.png"/>
IoT <FormattedMessage id="App.Publisher" defaultMessage="Application Publisher"/> IoT <FormattedMessage id="App.Publisher" defaultMessage="Application Publisher"/>
</span> </span>
<div id="header-btn-container"> <div id="header-btn-container">
@ -136,7 +130,7 @@ class BaseLayout extends Component {
</Col> </Col>
<Col> <Col>
<div className="platform-link-placeholder"> <div className="platform-link-placeholder">
<Button id="secondary-button" onClick={this.onClickPlatforms}> <Button className="custom-flat grey" onClick={this.onClickPlatforms}>
<i className="fw fw-settings"></i> Platforms</Button> <i className="fw fw-settings"></i> Platforms</Button>
</div> </div>
</Col> </Col>

@ -0,0 +1,59 @@
/*
* Copyright (c) 2017, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
*
* WSO2 Inc. licenses this file to you 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.
*/
import PropTypes from 'prop-types';
import React, {Component} from 'react';
import Axios from 'axios';
const imageLocation = "/images/";
class Logo extends Component {
constructor() {
super();
this.state = {
image: ""
}
}
componentWillMount() {
let url = imageLocation + this.props.image_name;
Axios.get(url, {responseType: 'arraybuffer'}).then(
response => {
let image = "data:image/jpeg;base64," + new Buffer(response.data, 'binary').toString('base64');
this.setState({image: image});
}
).catch(err => {
console.log(err);
});
}
render() {
return (
<img className={this.props.className} src={this.state.image} />
)
}
}
Logo.prototypes = {
className: PropTypes.string,
image_name: PropTypes.string
};
export default Logo;

@ -20,7 +20,8 @@ import qs from 'qs';
import React, {Component} from 'react'; import React, {Component} from 'react';
import {Redirect, Switch} from 'react-router-dom'; import {Redirect, Switch} from 'react-router-dom';
import AuthHandler from '../../../api/authHandler'; import AuthHandler from '../../../api/authHandler';
import {Button, Card, CardBlock, CardTitle, Form, FormGroup, Input, Label} from 'reactstrap'; import {Button, Col, Form, FormGroup, Input, Label, Row} from 'reactstrap';
import Logo from "../../UIComponents/Logo/Logo";
/** /**
* The Login Component. * The Login Component.
@ -39,7 +40,8 @@ class Login extends Component {
userName: "", userName: "",
password: "", password: "",
rememberMe: true, rememberMe: true,
errors: {} errors: {},
loginError: ""
} }
} }
@ -120,7 +122,12 @@ class Login extends Component {
loginPromis.then(response => { loginPromis.then(response => {
console.log(AuthHandler.getUser()); console.log(AuthHandler.getUser());
this.setState({isLoggedIn: AuthHandler.getUser()}); this.setState({isLoggedIn: AuthHandler.getUser()});
}) }).catch(
err => {
console.log(err);
this.setState({loginError: err});
}
);
} }
} }
@ -130,38 +137,51 @@ class Login extends Component {
return ( return (
<div id="login-container"> <div id="login-container">
{/*TODO: Style the components.*/} {/*TODO: Style the components.*/}
<Card id="login-card"> <div id="login-card">
<CardBlock> <div id="login-card-content">
<CardTitle> <Row className="login-header">
WSO2 IoT APP Publisher <Col>
</CardTitle> <Logo className="login-header-logo" image_name="logo.png"/>
<hr/> </Col>
<Form onSubmit={this.handleLogin.bind(this)}> <Col>
<FormGroup> <p className="login-header-title">IoT APP Publisher</p>
<Label for="userName">User Name:</Label> </Col>
<Input </Row>
type="text" <Row className="login-form">
name="userName" <Col>
id="userName" <Form onSubmit={this.handleLogin.bind(this)}>
placeholder="User Name" <FormGroup>
onChange={this.onUserNameChange.bind(this)}/> <Label for="userName">User Name:</Label>
</FormGroup> <Input
<FormGroup> type="text"
<Label for="password">Password:</Label> name="userName"
<Input id="userName"
valid={false} placeholder="User Name"
type="password" onChange={this.onUserNameChange.bind(this)}/>
name="text" </FormGroup>
id="password" <FormGroup>
placeholder="Password" <Label for="password">Password:</Label>
onChange={this.onPasswordChange.bind(this)}/> <Input
</FormGroup> valid={false}
<FormGroup> type="password"
<Button type="submit" id="login-btn">Login</Button> name="text"
</FormGroup> id="password"
</Form> placeholder="Password"
</CardBlock> onChange={this.onPasswordChange.bind(this)}/>
</Card> </FormGroup>
<FormGroup>
<Button
type="submit"
className="custom-raised login-btn primary"
>
Login
</Button>
</FormGroup>
</Form>
</Col>
</Row>
</div>
</div>
</div>); </div>);
} else { } else {
return ( return (

Loading…
Cancel
Save