mirror of
https://repository.entgra.net/community/device-mgt-core.git
synced 2025-10-06 02:01:45 +00:00
Stage 1: Added material design colors and WSO2 fonts.
This commit is contained in:
Menaka Jayawardena
parent
da146bfb07
commit
4a09b41434
@ -20,12 +20,9 @@ import PropTypes from 'prop-types';
|
||||
import React, {Component} from 'react';
|
||||
import {withRouter} from 'react-router-dom';
|
||||
import AuthHandler from "../../api/authHandler";
|
||||
import NotificationsIcon from 'material-ui/svg-icons/social/notifications';
|
||||
import ActionAccountCircle from 'material-ui/svg-icons/action/account-circle';
|
||||
import ApplicationCreate from '../Application/Create/ApplicationCreate';
|
||||
import {Button, Input, InputGroup, Popover, PopoverContent, PopoverTitle,} from 'reactstrap';
|
||||
import NotificationItem from '../UIComponents/Notifications/NotificationItem';
|
||||
|
||||
import {Button, Col, Input, Row,} from 'reactstrap';
|
||||
import FloatingButton from "../UIComponents/FloatingButton/FloatingButton";
|
||||
|
||||
/**
|
||||
* Base Layout:
|
||||
@ -43,6 +40,7 @@ class BaseLayout extends Component {
|
||||
openModal: false
|
||||
};
|
||||
this.logout = this.logout.bind(this);
|
||||
this.closeModal = this.closeModal.bind(this);
|
||||
}
|
||||
|
||||
handleApplicationClick() {
|
||||
@ -50,6 +48,7 @@ class BaseLayout extends Component {
|
||||
}
|
||||
|
||||
handleApplicationCreateClick(event) {
|
||||
console.log("dsfds");
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
this.setState({openModal: true});
|
||||
@ -67,6 +66,10 @@ class BaseLayout extends Component {
|
||||
AuthHandler.logout();
|
||||
}
|
||||
|
||||
closeModal() {
|
||||
this.setState({openModal: false});
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div id="container">
|
||||
@ -76,36 +79,35 @@ class BaseLayout extends Component {
|
||||
WSO2 IoT App Publisher
|
||||
</span>
|
||||
<div id="header-btn">
|
||||
<Button className="btn-notification" id="btn"><NotificationsIcon/></Button>
|
||||
<Button className="btn-account" id="btn"><ActionAccountCircle/></Button>
|
||||
<i className="fw fw-notification btn-header"></i>
|
||||
<i className="fw fw-user btn-header"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div id="search-box">
|
||||
<InputGroup>
|
||||
<Input
|
||||
id="search"
|
||||
name="search"
|
||||
placeholder={'Search for Applications'}
|
||||
onChange={(event) => console.log(event.target.value)}
|
||||
/>
|
||||
</InputGroup>
|
||||
<i className="fw fw-search search-icon">
|
||||
</i>
|
||||
<Input
|
||||
id="search"
|
||||
name="search"
|
||||
placeholder={'Search for Applications'}
|
||||
onChange={(event) => console.log(event.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div id="add-btn-container">
|
||||
<Button
|
||||
id="add-btn"
|
||||
onClick={this.handleApplicationCreateClick.bind(this)}
|
||||
>
|
||||
<h3>
|
||||
<strong>+</strong>
|
||||
</h3>
|
||||
</Button>
|
||||
<FloatingButton className="add-btn small" onClick={this.handleApplicationCreateClick.bind(this)}/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="application-content" style={this.state.style}>
|
||||
{this.props.children}
|
||||
<Row>
|
||||
<Col>
|
||||
{this.props.children}
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
</div>
|
||||
<ApplicationCreate open={this.state.openModal}/>
|
||||
<ApplicationCreate open={this.state.openModal} close={this.closeModal}/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -19,13 +19,9 @@
|
||||
import Theme from '../../theme';
|
||||
import React, {Component} from 'react';
|
||||
import {withRouter} from 'react-router-dom';
|
||||
import AuthHandler from "../../api/authHandler";
|
||||
import ApplicationMgtApi from '../../api/applicationMgtApi';
|
||||
import {Button, Row, Table} from 'reactstrap';
|
||||
import {Button, Col, Row, Table} from 'reactstrap';
|
||||
import Drawer from '../UIComponents/Drawer/Drawer';
|
||||
import ApplicationView from './View/ApplicationView';
|
||||
import NotificationView from "../UIComponents/Notifications/NotificationView";
|
||||
import AppImage from "../UIComponents/AppImage/AppImage";
|
||||
|
||||
/**
|
||||
* The App Create Component.
|
||||
@ -53,7 +49,10 @@ class ApplicationListing extends Component {
|
||||
drawer: {},
|
||||
appListStyle: {},
|
||||
image: [{id: "1", src: "https://www.greenfoot.org/images/logos/macos.png"},
|
||||
{id: "2", src:"http://dl1.cbsistatic.com/i/r/2016/08/08/0e67e43a-5a45-41ab-b81d-acfba8708044/resize/736x552/0c0ee669677b5060a0fa1bfb0c7873b4/android-logo-promo-470.png"}]
|
||||
{
|
||||
id: "2",
|
||||
src: "http://dl1.cbsistatic.com/i/r/2016/08/08/0e67e43a-5a45-41ab-b81d-acfba8708044/resize/736x552/0c0ee669677b5060a0fa1bfb0c7873b4/android-logo-promo-470.png"
|
||||
}]
|
||||
};
|
||||
this.scriptId = "application-listing";
|
||||
}
|
||||
@ -131,15 +130,15 @@ class ApplicationListing extends Component {
|
||||
*Loading the theme files based on the the user-preference.
|
||||
*/
|
||||
Theme.insertThemingScripts(this.scriptId);
|
||||
let getApps = ApplicationMgtApi.getApplications();
|
||||
getApps.then(response => {
|
||||
let apps = this.setData(response.data.applications);
|
||||
console.log(apps); //TODO: Remove this.
|
||||
this.setState({searchedApplications: apps});
|
||||
// console.log(this.setState({data: response.data}), console.log(this.state));
|
||||
}).catch(err => {
|
||||
AuthHandler.unauthorizedErrorHandler(err);
|
||||
});
|
||||
// let getApps = ApplicationMgtApi.getApplications();
|
||||
// getApps.then(response => {
|
||||
// let apps = this.setData(response.data.applications);
|
||||
// console.log(apps); //TODO: Remove this.
|
||||
// this.setState({searchedApplications: apps});
|
||||
// // console.log(this.setState({data: response.data}), console.log(this.state));
|
||||
// }).catch(err => {
|
||||
// AuthHandler.unauthorizedErrorHandler(err);
|
||||
// });
|
||||
}
|
||||
|
||||
/**
|
||||
@ -218,7 +217,7 @@ class ApplicationListing extends Component {
|
||||
this.props.history.push("apps/edit/fdsfdsf343");
|
||||
}
|
||||
|
||||
remove(imageId) {
|
||||
remove(imageId) {
|
||||
let tmp = this.state.image;
|
||||
|
||||
console.log(imageId);
|
||||
@ -248,44 +247,61 @@ class ApplicationListing extends Component {
|
||||
return (
|
||||
|
||||
<div id="application-list" style={this.state.appListStyle}>
|
||||
<Table striped hover>
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
{/* TODO: Remove console.log and add sort method. */}
|
||||
<th onClick={() => {console.log("sort")}}>Application Name</th>
|
||||
<th>Category</th>
|
||||
<th>Platform</th>
|
||||
<th>Status</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{this.applications.map(
|
||||
(application) => {
|
||||
return (
|
||||
<tr key={application.id} onClick={this.onRowClick}>
|
||||
<td>
|
||||
{/* TODO: Move this styles to css. */}
|
||||
<img
|
||||
src={application.icon}
|
||||
height='50px'
|
||||
width='50px'
|
||||
style={{border: 'solid 1px black', borderRadius: "100%"}}
|
||||
/>
|
||||
</td>
|
||||
<td>{application.applicationName}</td>
|
||||
<td>{application.category}</td>
|
||||
<td>{application.platform}</td>
|
||||
<td>{application.status}</td>
|
||||
<td><Button onClick={this.handleButtonClick}>Edit</Button></td>
|
||||
</tr>
|
||||
)
|
||||
}
|
||||
)}
|
||||
</tbody>
|
||||
</Table>
|
||||
|
||||
<Row>
|
||||
<Col xs="3 offset-9">
|
||||
<div className="platform-link-placeholder">
|
||||
<Button><i className="fw fw-settings"></i> Platforms</Button>
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row>
|
||||
<Col>
|
||||
<Table striped hover>
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
{/* TODO: Remove console.log and add sort method. */}
|
||||
<th onClick={() => {
|
||||
console.log("sort")
|
||||
}}>Application Name
|
||||
</th>
|
||||
<th>Category</th>
|
||||
<th>Platform</th>
|
||||
<th>Status</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{this.applications.map(
|
||||
(application) => {
|
||||
return (
|
||||
<tr key={application.id} onClick={this.onRowClick}>
|
||||
<td>
|
||||
{/* TODO: Move this styles to css. */}
|
||||
<img
|
||||
src={application.icon}
|
||||
height='50px'
|
||||
width='50px'
|
||||
style={{border: 'solid 1px black', borderRadius: "100%"}}
|
||||
/>
|
||||
</td>
|
||||
<td>{application.applicationName}</td>
|
||||
<td>{application.category}</td>
|
||||
<td>{application.platform}</td>
|
||||
<td>{application.status}</td>
|
||||
<td>
|
||||
<Button onClick={this.handleButtonClick}>
|
||||
<i className="fw fw-edit"></i>
|
||||
</Button>
|
||||
</td>
|
||||
</tr>
|
||||
)
|
||||
}
|
||||
)}
|
||||
</tbody>
|
||||
</Table>
|
||||
</Col>
|
||||
</Row>
|
||||
<Drawer onClose={this.closeDrawer.bind(this)} style={this.state.drawer}>
|
||||
<ApplicationView/>
|
||||
</Drawer>
|
||||
|
||||
@ -21,7 +21,7 @@ import {withRouter} from 'react-router-dom';
|
||||
import AuthHandler from "../../../api/authHandler";
|
||||
import {Step1, Step2, Step3, Step4} from './CreateSteps/index';
|
||||
import ApplicationMgtApi from '../../../api/applicationMgtApi';
|
||||
import {Button, Modal, ModalBody, ModalFooter, ModalHeader} from 'reactstrap';
|
||||
import {Button, Col, Modal, ModalBody, ModalFooter, ModalHeader, Row} from 'reactstrap';
|
||||
|
||||
/**
|
||||
* The App Create Component.
|
||||
@ -61,12 +61,12 @@ class ApplicationCreate extends Component {
|
||||
}
|
||||
|
||||
close() {
|
||||
this.setState({open: false, stepIndex: 0})
|
||||
this.props.close();
|
||||
}
|
||||
|
||||
handleBack() {
|
||||
let currentStep = this.state.stepIndex;
|
||||
let nextStep = currentStep === 0 ? currentStep : currentStep - 1 ;
|
||||
let nextStep = currentStep === 0 ? currentStep : currentStep - 1;
|
||||
this.setState({stepIndex: nextStep}, console.log(this.state.stepIndex));
|
||||
}
|
||||
|
||||
@ -88,7 +88,7 @@ class ApplicationCreate extends Component {
|
||||
handleSubmit() {
|
||||
let stepData = this.state.stepData;
|
||||
let applicationCreationPromise = ApplicationMgtApi.createApplication(stepData);
|
||||
applicationCreationPromise.then( response => {
|
||||
applicationCreationPromise.then(response => {
|
||||
this.handleYes();
|
||||
}
|
||||
).catch(
|
||||
@ -216,10 +216,21 @@ class ApplicationCreate extends Component {
|
||||
backdrop={'static'}>
|
||||
<ModalHeader toggle={this.toggle}>Create Application</ModalHeader>
|
||||
<ModalBody id="modal-body-content">
|
||||
{this.getStepContent(this.state.stepIndex)}
|
||||
<Row>
|
||||
<Col>
|
||||
<div className="stepper-header">
|
||||
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row>
|
||||
<Col>
|
||||
{this.getStepContent(this.state.stepIndex)}
|
||||
</Col>
|
||||
</Row>
|
||||
</ModalBody>
|
||||
<ModalFooter>
|
||||
{this.state.stepIndex === 0? <div/> :
|
||||
{this.state.stepIndex === 0 ? <div/> :
|
||||
<Button color="primary" onClick={this.handlePrev}>Back</Button>}
|
||||
<Button color="secondary" onClick={this.close}>Cancel</Button>
|
||||
{this.state.finished ?
|
||||
|
||||
@ -79,7 +79,12 @@ class ApplicationEdit extends Component {
|
||||
return (
|
||||
<div id="application-edit-base">
|
||||
<Row id="application-edit-header">
|
||||
<Col>Application Name</Col>
|
||||
<Col xs="3">
|
||||
<a className="back-to-app"><i className="fw fw-left"></i></a>
|
||||
</Col>
|
||||
<Col>
|
||||
Application Name
|
||||
</Col>
|
||||
</Row>
|
||||
<Row id="application-edit-main-container">
|
||||
<Col xs="3">
|
||||
|
||||
@ -16,20 +16,11 @@
|
||||
* under the License.
|
||||
*/
|
||||
|
||||
#application-edit-base {
|
||||
width: 70%;
|
||||
margin: 0 auto;
|
||||
height: 100%;
|
||||
background-color: #f6f6f6;
|
||||
border: solid 1px #828282;
|
||||
}
|
||||
|
||||
#application-edit-header {
|
||||
height: 50px;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
background-color: #9a9a9a;
|
||||
border: solid 1px #a2a2a2;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
@ -60,8 +51,7 @@
|
||||
/*Tab styling*/
|
||||
div.tab {
|
||||
float: left;
|
||||
border: 1px solid #ccc;
|
||||
background-color: #f1f1f1;
|
||||
border-right: 1px solid #d8d8d8;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
@ -81,13 +71,14 @@ div.tab button {
|
||||
|
||||
/* Change background color of buttons on hover */
|
||||
div.tab button:hover {
|
||||
background-color: #ddd;
|
||||
background-color: #ddd6d7;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Create an active/current "tab button" class */
|
||||
div.tab button.active {
|
||||
background-color: #ccc;
|
||||
background-color: #1b3bcc;
|
||||
color: white;
|
||||
}
|
||||
|
||||
|
||||
@ -109,3 +100,12 @@ div.tab button.active {
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.back-to-app {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.back-to-app:hover {
|
||||
cursor: pointer;
|
||||
background-color: #888888;
|
||||
}
|
||||
|
||||
@ -76,8 +76,15 @@ class ApplicationView extends Component {
|
||||
</Col>
|
||||
</Row>
|
||||
<Row>
|
||||
<Col>Rating</Col>
|
||||
<Col>View in Store</Col>
|
||||
<Col>
|
||||
<i className="fw fw-star"></i>
|
||||
<i className="fw fw-star"></i>
|
||||
<i className="fw fw-star"></i>
|
||||
<i className="fw fw-star"></i>
|
||||
</Col>
|
||||
<Col>
|
||||
<a href="#">View in Store</a>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
<hr/>
|
||||
|
||||
@ -42,7 +42,7 @@ class Drawer extends Component {
|
||||
return (
|
||||
<div>
|
||||
<div id="app-view" className="app-view-drawer" style={this.props.style}>
|
||||
<a onClick={this.closeDrawer} className="drawer-close-btn">×</a>
|
||||
<a onClick={this.closeDrawer} className="drawer-close-btn"><i className="fw fw-uncheck"></i></a>
|
||||
{this.props.children}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -23,11 +23,10 @@
|
||||
z-index: 1; /* Stay on top */
|
||||
top: 5%;
|
||||
right: 0%;
|
||||
background-color: #b5b5b5;
|
||||
background-color: #ffffff;
|
||||
overflow-x: hidden; /* Disable horizontal scroll */
|
||||
padding-top: 60px; /* Place content 60px from the top */
|
||||
transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
|
||||
border: solid 1px black;
|
||||
box-shadow: -2px 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
|
||||
}
|
||||
|
||||
|
||||
@ -54,8 +54,7 @@ body {
|
||||
height: 100px;
|
||||
width: 100%;
|
||||
margin: 0 10px 0 0;
|
||||
background-color: #BDBDBD;
|
||||
border-bottom: solid 2px;
|
||||
background-color: #3b33bd;
|
||||
position: fixed; /* Set the navbar to fixed position */
|
||||
top: 0; /* Position the navbar at the top of the page */
|
||||
z-index: 2;
|
||||
@ -63,21 +62,17 @@ body {
|
||||
}
|
||||
|
||||
#application-content {
|
||||
max-height: 800px;
|
||||
margin-top: 150px;
|
||||
height: auto;
|
||||
width: 80%;
|
||||
margin: 150px auto;
|
||||
box-shadow: -2px 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
|
||||
padding: 10px 10px 10px 10px;
|
||||
}
|
||||
|
||||
#add-btn {
|
||||
border-radius: 50%;
|
||||
border: solid 2px;
|
||||
.add-btn {
|
||||
position: absolute;
|
||||
background-color: #BDBDBD;
|
||||
left: 15px;
|
||||
top: 75px;
|
||||
cursor: pointer;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
box-shadow: -2px 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
|
||||
left:12%;
|
||||
top: 35px;
|
||||
}
|
||||
|
||||
.add-btn.div {
|
||||
@ -90,12 +85,14 @@ body {
|
||||
content: '\e601';
|
||||
}
|
||||
|
||||
#btn {
|
||||
background-color: #BDBDBD;
|
||||
border-color: #BDBDBD;
|
||||
.btn-header {
|
||||
margin-top: 10px;
|
||||
margin-right: 20px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
#header-text {
|
||||
color: #ffffff;
|
||||
font-size: 25px;
|
||||
top: 10px;
|
||||
margin-left: 10px;
|
||||
@ -105,21 +102,47 @@ body {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.search-icon {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
left: 5px;
|
||||
}
|
||||
|
||||
#search-box {
|
||||
display: flex;
|
||||
color: #a8a8a8;
|
||||
position: relative;
|
||||
float: right;
|
||||
top: 35px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
#search {
|
||||
background-color: #BDBDBD;
|
||||
left: 110px;
|
||||
top: 20px;
|
||||
position: relative;
|
||||
color: white;
|
||||
background-color: transparent;
|
||||
left: 15px;
|
||||
top: 0px;
|
||||
height: 25px;
|
||||
outline: none;
|
||||
border: none;
|
||||
border-bottom: solid 1px black;
|
||||
border-radius: 0%;
|
||||
}
|
||||
|
||||
.stepper-header {
|
||||
width: 100%;
|
||||
border-bottom: solid 1px cornflowerblue;
|
||||
padding-bottom: 5px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.platform-link-placeholder {
|
||||
color: #888888;
|
||||
float: right;
|
||||
margin-right: 20px;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
#application-list {
|
||||
margin-top: 20px;
|
||||
transition: margin-right .5s;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user