mirror of
https://repository.entgra.net/community/device-mgt-core.git
synced 2025-10-06 02:01:45 +00:00
Stepper header implementation stage 1.
This commit is contained in:
Menaka Jayawardena
parent
66f8472da7
commit
4cdb1fc4c9
@ -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;
|
||||
}
|
||||
|
||||
@ -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>
|
||||
<Col>
|
||||
{this.props.children}
|
||||
</Col>
|
||||
<div className="platform-link-placeholder">
|
||||
<Button id="secondary-button" onClick={this.onClickPlatforms}><i className="fw fw-settings"></i> Platforms</Button>
|
||||
</div>
|
||||
</Row>
|
||||
<Row>
|
||||
<div id="application-content">
|
||||
<Row>
|
||||
<Col>
|
||||
{this.props.children}
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
</Row>
|
||||
</div>
|
||||
<ApplicationCreate open={this.state.openModal} close={this.closeModal}/>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user