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

Write Preview
Loading…
Cancel
Save