Stepper header implementation stage 1.

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

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

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

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

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

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

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

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