From 99af739f15e45ce46fb0b0c17cb843512f89944a Mon Sep 17 00:00:00 2001 From: Menaka Jayawardena Date: Sun, 8 Oct 2017 02:08:05 +0530 Subject: [PATCH 1/6] Stepper component created and added it to the application creation modal. --- .../publisher/public/locales/en.json | 3 +- .../public/themes/default/default-theme.css | 53 ++--- .../Application/Create/ApplicationCreate.jsx | 67 ++---- .../Application/Create/CreateSteps/Step1.jsx | 215 +++++++++--------- .../Application/Create/CreateSteps/Step2.jsx | 59 ++--- .../Application/Create/CreateSteps/Step3.jsx | 146 ++++++------ .../Application/Create/CreateSteps/Step4.jsx | 6 +- .../UIComponents/StepprHeader/Step.jsx | 74 ++++++ .../UIComponents/StepprHeader/Stepper.jsx | 52 +++++ .../UIComponents/StepprHeader/stepper.css | 97 ++++++++ 10 files changed, 490 insertions(+), 282 deletions(-) create mode 100644 components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/StepprHeader/Step.jsx create mode 100644 components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/StepprHeader/Stepper.jsx create mode 100644 components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/StepprHeader/stepper.css diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/locales/en.json b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/locales/en.json index 3bc7a828d77..99cad4fbb59 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/locales/en.json +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/locales/en.json @@ -57,5 +57,6 @@ "Yes" : "Yes", "No" : "No", "No.Platform.Tags" : "No Platform Tags", - "Create.Platform" : "Create Platform" + "Create.Platform" : "Create Platform", + "Optional": "Optional" } diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/themes/default/default-theme.css b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/themes/default/default-theme.css index a1e6296243a..ded54adbd79 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/themes/default/default-theme.css +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/themes/default/default-theme.css @@ -335,24 +335,6 @@ body { padding: 24px; } -.stepper-header { - width: 100%; - color: #BaBaBa; - padding-bottom: 5px; - margin-bottom: 10px; -} - -#application-tag { - margin: 0 2px 0 2px; - background-color: blue; - height: 20px; -} - -#application-tag:hover { - cursor: pointer; - background-color: #007bff; -} - .platform-link-placeholder { color: #888888; float: right; @@ -484,26 +466,29 @@ body { #modal-body-content { max-height: 700px; + padding-left: 24px; overflow-y: auto; } -.step-index { - height: 20px; - width: 20px; - background-color: #2196F3; - border-radius: 50%; -} - #img-btn-screenshot { margin: 0 5px 0 5px; } #app-create-modal { max-width: 700px; - overflow-x: auto; border-radius: 0% !important; } +.app-create-modal-header { + background-color: #4353bd; + color: white; + padding: 24px !important; +} + +.app-create-modal-content { + padding: 0 !important; +} + #store { border: none; border-bottom: solid #BDBDBD 1px; @@ -853,3 +838,19 @@ div.tab button.active { font-weight: 500; color: #9e9e9e; } + +/** + If you need to change the color of active steps in stepper, + uncomment the following and set the background color and font color as needed. +*/ +/* +.stepper-active-index { + background-color: #0a6eff !important; + color: white !important; +} + +.stepper-passed-index { + background-color: #0a6eff !important; + color: green !important; +} +*/ diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Create/ApplicationCreate.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Create/ApplicationCreate.jsx index 4d03280ff19..ffcee5be92d 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Create/ApplicationCreate.jsx +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Create/ApplicationCreate.jsx @@ -21,8 +21,9 @@ 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 {Col, Modal, ModalBody, ModalHeader, Row} from 'reactstrap'; +import {Modal, ModalHeader} from 'reactstrap'; import {FormattedMessage} from 'react-intl'; +import Stepper from "../../UIComponents/StepprHeader/Stepper"; /** @@ -148,6 +149,18 @@ class ApplicationCreate extends Component { } }; + /** + * Defines the application creation stepper. + * */ + getStepperHeaders() { + return [ + {index: 1, text: }, + {index: 2, text: }, + {index: 3, text: }, + {index: 4, text: , optional: true} + ]; + } + /** * Remove the last data point * */ @@ -239,51 +252,17 @@ class ApplicationCreate extends Component {
- + - - - -
- - -
-
1
-
- -
-
- - - 2 - - - - - - 3 - - - - - - 4 - - - - - -
- - - - - {this.getStepContent(stepIndex)} - - - +
+ + {this.getStepContent(stepIndex)} +
); } diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Create/CreateSteps/Step1.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Create/CreateSteps/Step1.jsx index bd7de1e981c..e0e477f77ab 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Create/CreateSteps/Step1.jsx +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Create/CreateSteps/Step1.jsx @@ -19,7 +19,7 @@ import PropTypes from 'prop-types'; import React, {Component} from 'react'; import {FormattedMessage} from 'react-intl'; -import {Button, Form, FormFeedback, FormGroup, Input, Label, ModalFooter} from 'reactstrap'; +import {Button, Form, FormFeedback, FormGroup, Input, Label, ModalFooter, ModalBody} from 'reactstrap'; import * as validator from '../../../../common/validator'; import Chip from "../../../UIComponents/Chip/Chip"; @@ -166,6 +166,7 @@ class Step1 extends Component { * Set text field values to state. * */ onTextFieldChange(event) { + console.log(event.target.value); let field = event.target.name; switch (field) { case "appName": { @@ -236,114 +237,112 @@ class Step1 extends Component { return (
-
-
- - - - {this.state.errors.name} - - - - - {this.state.errors.shortDescription} - - - - - {this.state.errors.description} - - - - - - - - - -
- - - - - - - - - {visibilityItem()} -
- - - - + + + + + {this.state.errors.name} + + + + + {this.state.errors.shortDescription} + + + + + {this.state.errors.description} + + + + + + + + + +
+ + + + + + + + + {visibilityItem()} +
+ + + + -
- {this.state.tags.map(tag => { - return ( - - ) - } - )} -
- {this.state.errors.tags} - -
-
+
+ {this.state.tags.map(tag => { + return ( + + ) + } + )} +
+ {this.state.errors.tags} + + - + +
+ + +
); diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Create/CreateSteps/Step2.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Create/CreateSteps/Step2.jsx index af8017d1bba..382f7f30265 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Create/CreateSteps/Step2.jsx +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Create/CreateSteps/Step2.jsx @@ -175,16 +175,20 @@ class Step2 extends Component { {this.state.errors.platform} - - - - + +
+ +
+
+ + +
); diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Create/CreateSteps/Step3.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Create/CreateSteps/Step3.jsx index 74b68eb5526..dc6b7028755 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Create/CreateSteps/Step3.jsx +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Create/CreateSteps/Step3.jsx @@ -226,16 +226,20 @@ class Step3 extends Component { - - - - + +
+ +
+
+ + +
); diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Create/CreateSteps/Step4.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Create/CreateSteps/Step4.jsx index 392441878d6..77bff62b924 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Create/CreateSteps/Step4.jsx +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Create/CreateSteps/Step4.jsx @@ -151,16 +151,20 @@ class Step4 extends Component { - - - - + +
+ +
+
+ + +
); From 7ec90258d5a11f3688bec3f4776a01fe6dfce12a Mon Sep 17 00:00:00 2001 From: Menaka Jayawardena Date: Sun, 8 Oct 2017 10:47:20 +0530 Subject: [PATCH 4/6] Modified stepper based on material design specs. --- .../src/components/UIComponents/StepprHeader/Step.jsx | 8 ++++---- .../src/components/UIComponents/StepprHeader/Stepper.jsx | 2 +- .../src/components/UIComponents/StepprHeader/stepper.css | 6 ++---- 3 files changed, 7 insertions(+), 9 deletions(-) diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/StepprHeader/Step.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/StepprHeader/Step.jsx index 6ca41e42b96..5ddc1954498 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/StepprHeader/Step.jsx +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/StepprHeader/Step.jsx @@ -37,7 +37,7 @@ class Step extends Component { let stepIndexContent = index === passed || index < passed ? : index; return ( -
+
@@ -46,14 +46,14 @@ class Step extends Component {
- {text} {!finalStep? : } + {text}
{optional ?
() -
:
} +
:
}
- + {!finalStep ? : }
) diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/StepprHeader/Stepper.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/StepprHeader/Stepper.jsx index 75b619907f0..aed929eb7d2 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/StepprHeader/Stepper.jsx +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/StepprHeader/Stepper.jsx @@ -26,7 +26,7 @@ class Stepper extends Component { render() { const {stepContent, activeStep, previousStep} = this.props; return ( -
+
{stepContent.map(content => { return ( Date: Sun, 8 Oct 2017 10:54:26 +0530 Subject: [PATCH 5/6] Added key field to data table columns and rows. --- .../Application/ApplicationListing.jsx | 34 +++++++++++++------ 1 file changed, 23 insertions(+), 11 deletions(-) diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/ApplicationListing.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/ApplicationListing.jsx index 6effa9b7ea7..9ec06153c71 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/ApplicationListing.jsx +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/ApplicationListing.jsx @@ -223,34 +223,46 @@ class ApplicationListing extends Component { {this.headers.map(header => { if (header.data_id === "applicationName") { return ( - {header.label}) + {header.label}) } else if (header.data_id === "image") { - return ({header.label}) + return ({header.label}) } else if (header.data_id === "edit") { - return + return } - return ({header.label}) + return ({header.label}) })}
{this.state.searchedApplications.map(application => { return ( - { + { this.onRowClick(application.uuid) }}> - + - {application.name} - {application.platform.name} - {application.category.name} {application.currentLifecycle.lifecycleState.name} + key={Math.random()} + xs="4" + className="data-table-row-cell" + > + {application.name} - + {application.platform.name} + {application.category.name} + + {application.currentLifecycle.lifecycleState.name} + +