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

Stepper header implementation stage 1.

Browse Source
feature/appm-store/pbac
Menaka Jayawardena 7 years ago
parent 66f8472da7
commit 4cdb1fc4c9
4 changed files with 104 additions and 16 deletions
Show Stats Download Patch File Download Diff File

59
components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/themes/default/default-theme.css
Unescape View File

@ -85,6 +85,31 @@ body {
float: right;
}
#header-button {
border-radius: 50%;
background-color: transparent;
border: none;
height: 50px;
width: 50px;
margin-right: 10px;
position: relative;
}
#header-button:hover {
background-color: #4353bd;
cursor: pointer;
}
#header-button i {
position: absolute;
bottom: 19px;
left: 17px;
}
#header-button {
outline: none;
}
.btn-header {
margin-top: 15px;
margin-right: 20px;
@ -104,7 +129,7 @@ body {
position: relative;
float: right;
top: 75px;
left: 80px;
left: 150px;
margin-right: 16px;
}
@ -127,26 +152,33 @@ body {
top: 100px;
}
#app-main-content {
height: 100%;
position: inherit;
top: 125px;
}
/* Holds the app publisher pages. */
#application-content {
height: auto;
width: 80%;
margin: 150px auto;
margin: 20px 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;
}
.stepper-header {
width: 100%;
border-bottom: solid 1px cornflowerblue;
color: #BaBaBa;
padding-bottom: 5px;
margin-bottom: 10px;
}
.platform-link-placeholder {
color: #888888;
width: 80%;
float: right;
margin-right: 20px;
margin: 10px auto;
padding-bottom: 10px;
}
@ -232,6 +264,25 @@ body {
overflow-y: auto;
}
#secondary-button {
float: right;
background-color: transparent;
border: none;
}
#secondary-button:hover {
background-color: #e9e9e9;
outline: none;
cursor: pointer;
}
.step-index {
height: 20px;
width: 20px;
background-color: #2196F3;
border-radius: 50%;
}
#img-btn-screenshot {
margin: 0 5px 0 5px;
}

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

@ -20,8 +20,8 @@ import PropTypes from 'prop-types';
import React, {Component} from 'react';
import {withRouter} from 'react-router-dom';
import AuthHandler from "../../api/authHandler";
import {Button, Col, Container, Input, Row,} from 'reactstrap';
import ApplicationCreate from '../Application/Create/ApplicationCreate';
import {Col, Container, Input, Row,} from 'reactstrap';
import FloatingButton from "../UIComponents/FloatingButton/FloatingButton";
import {FormattedMessage} from 'react-intl';
@ -70,17 +70,21 @@ class BaseLayout extends Component {
this.setState({openModal: false});
}
onClickPlatforms() {
window.location.href = "/assets/platforms";
}
render() {
return (
<Container noGutters fluid id="container">
<Container fluid id="container">
<div id="header-content">
<div id="header">
<span id="header-text">
WSO2 IoT <FormattedMessage id="App.Publisher" defaultMessage="Application Publisher"/>
</span>
<div id="header-btn-container">
<i className="fw fw-notification btn-header"></i>
<i className="fw fw-user btn-header"></i>
<Button id="header-button"><i className="fw fw-notification btn-header"></i></Button>
<Button id="header-button"><i className="fw fw-user btn-header"></i></Button>
</div>
<div id="search-box">
<i className="fw fw-search search-icon">
@ -100,11 +104,20 @@ class BaseLayout extends Component {
/>
</div>
</div>
<div id="application-content" style={this.state.style}>
<div id="app-main-content" style={this.state.style}>
<Row>
<div className="platform-link-placeholder">
<Button id="secondary-button" onClick={this.onClickPlatforms}><i className="fw fw-settings"></i> Platforms</Button>
</div>
</Row>
<Row>
<Col>
{this.props.children}
</Col>
<div id="application-content">
<Row>
<Col>
{this.props.children}
</Col>
</Row>
</div>
</Row>
</div>
<ApplicationCreate open={this.state.openModal} close={this.closeModal}/>

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

@ -246,7 +246,7 @@ class ApplicationListing extends Component {
<td>{application.platform}</td>
<td>{application.status}</td>
<td>
<Button onClick={this.handleButtonClick}>
<Button id="secondary-button" onClick={this.handleButtonClick}>
<i className="fw fw-edit"></i>
</Button>
</td>

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

@ -71,7 +71,7 @@ class ApplicationCreate extends Component {
* Handles next button click event.
* */
onNextClick() {
console.log("Handle Next"); //TODO: Remove this
console.log(this.state.stepIndex); //TODO: Remove this
const {stepIndex} = this.state;
this.setState({
stepIndex: stepIndex + 1,
@ -108,10 +108,11 @@ class ApplicationCreate extends Component {
* This clears the data in the current step and returns to the previous step.
* */
onPrevClick() {
console.log(this.state.stepIndex);
const {stepIndex} = this.state;
if (stepIndex > 0) {
this.removeStepData();
this.setState({stepIndex: stepIndex - 1});
this.setState({stepIndex: stepIndex - 1, finished: false});
}
};
@ -204,6 +205,10 @@ class ApplicationCreate extends Component {
}
}
setStepHeader(stepIndex) {
}
render() {
const {finished, stepIndex} = this.state;
@ -218,7 +223,26 @@ class ApplicationCreate extends Component {
<Row>
<Col>
<div className="stepper-header">
<Row>
<Col>
<div className="stepper-header-content">
<div className="step-index">1</div>
<div className="step-header"> General Info</div>
</div>
</Col>
<Col>
<span className="step-index">2</span>
<span className="step-header"> Select Platform</span>
</Col>
<Col>
<span className="step-index">3</span>
<span className="step-header"> Screenshots</span>
</Col>
<Col>
<span className="step-index">4</span>
<span className="step-header"> Release</span>
</Col>
</Row>
</div>
</Col>
</Row>

Write Preview
Loading…
Cancel
Save