tharusha
/
device-mgt-core
forked from community/device-mgt-core
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Stage 1: Added material design colors and WSO2 fonts.

Browse Source
feature/appm-store/pbac
Menaka Jayawardena 7 years ago
parent da146bfb07
commit 4a09b41434
9 changed files with 188 additions and 125 deletions
Show Stats Download Patch File Download Diff File

52
components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/AppPublisherBase/BaseLayout.jsx
Unescape View File

@ -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>
);
}

124
components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/ApplicationListing.jsx
Unescape View File

@ -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>

23
components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Create/ApplicationCreate.jsx
Unescape View File

@ -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 ?

7
components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Edit/Base/ApplicationEditBaseLayout.jsx
Unescape View File

@ -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">

26
components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Edit/Base/baseLayout.css
Unescape View File

@ -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;
}

11
components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/View/ApplicationView.jsx
Unescape View File

@ -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/>

2
components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/Drawer/Drawer.jsx
Unescape View File

@ -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">&times;</a>
<a onClick={this.closeDrawer} className="drawer-close-btn"><i className="fw fw-uncheck"></i></a>
{this.props.children}
</div>
</div>

3
components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/Drawer/drawer.css
Unescape View File

@ -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);
}

65
components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/index.css
Unescape View File

@ -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;

Write Preview
Loading…
Cancel
Save