From f7d6bbd639637a35d9123be001eecb44f4a64174 Mon Sep 17 00:00:00 2001 From: Menaka Jayawardena Date: Thu, 28 Sep 2017 22:45:03 +0530 Subject: [PATCH] Layout modifications. --- .../AppPublisherBase/BaseLayout.jsx | 35 +- .../Application/Create/CreateSteps/Step1.jsx | 347 +++++++++++++----- .../Application/Create/CreateSteps/Step2.jsx | 347 +++++------------- .../Application/Create/CreateSteps/Step3.jsx | 1 - .../Edit/Base/ApplicationEditBaseLayout.jsx | 2 +- .../Application/Edit/Base/baseLayout.css | 1 + .../Edit/{ => GenenralInfo}/GeneralInfo.jsx | 0 .../Edit/{ => GenenralInfo}/generalInfo.css | 0 .../components/UIComponents/Drawer/drawer.css | 2 +- .../FloatingButton/floatingButton.css | 1 + .../main/resources/publisher/src/index.css | 35 +- .../resources/publisher/webpack.config.js | 4 + 12 files changed, 388 insertions(+), 387 deletions(-) rename components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Edit/{ => GenenralInfo}/GeneralInfo.jsx (100%) rename components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Edit/{ => GenenralInfo}/generalInfo.css (100%) diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/AppPublisherBase/BaseLayout.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/AppPublisherBase/BaseLayout.jsx index c40ae23086..998b409da1 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/AppPublisherBase/BaseLayout.jsx +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/AppPublisherBase/BaseLayout.jsx @@ -21,7 +21,7 @@ import React, {Component} from 'react'; import {withRouter} from 'react-router-dom'; import AuthHandler from "../../api/authHandler"; import ApplicationCreate from '../Application/Create/ApplicationCreate'; -import {Button, Col, Input, Row,} from 'reactstrap'; +import {Col, Container, Input, Row,} from 'reactstrap'; import FloatingButton from "../UIComponents/FloatingButton/FloatingButton"; /** @@ -48,7 +48,6 @@ class BaseLayout extends Component { } handleApplicationCreateClick(event) { - console.log("dsfds"); event.preventDefault(); event.stopPropagation(); this.setState({openModal: true}); @@ -72,7 +71,7 @@ class BaseLayout extends Component { render() { return ( -
+
-
-
- +
- -
{this.props.children} -
- + ); } } 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 b85054689a..f46c280a13 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 @@ -18,148 +18,299 @@ import PropTypes from 'prop-types'; import React, {Component} from 'react'; -import AuthHandler from "../../../../api/authHandler"; -import PlatformMgtApi from "../../../../api/platformMgtApi"; -import {FormGroup, Input, Label} from 'reactstrap'; +import {Badge, FormGroup, Input, Label} from 'reactstrap'; /** - * The first step of the application creation wizard. - * This contains following components: - * * Application Title - * * Store Type - * * Application Platform + * The Second step of application create wizard. + * This contains following components. + * * App Title + * * Short Description + * * Application Description + * * Application Visibility + * * Application Tags : {Used Material UI Chip component} + * * Application Category. + * * Platform Specific properties. * * Parent Component: Create * Props: - * 1. handleNext: {type: function, Invokes handleNext function of parent component} - * 2. setData : {type: function, Sets current form data to the state of the parent component} - * 3. removeData: {type: function, Invokes the removeStepData function click of parent} + * * handleNext : {type: function, Invokes handleNext function in Parent.} + * * handlePrev : {type: function, Invokes handlePrev function in Parent} + * * setData : {type: function, Invokes setStepData function in Parent} + * * removeData : {type: Invokes removeStepData function in Parent} * */ class Step1 extends Component { constructor() { super(); - this.setPlatforms = this.setPlatforms.bind(this); - this.setStepData = this.setStepData.bind(this); - this.cancel = this.cancel.bind(this); - this.platforms = []; this.state = { - finished: false, - stepIndex: 0, - store: 1, - platformSelectedIndex: 0, - platform: "", - platforms: [], - stepData: [], + tags: [], + icon: [], title: "", - titleError: "" + errors: {}, + banner: [], + defValue: "", + category: 0, + visibility: 0, + description: "", + screenshots: [], + identifier: "", + shortDescription: "" }; - this.scriptId = "application-create-step1"; - } - - componentDidMount() { - //Get the list of available platforms and set to the state. - PlatformMgtApi.getPlatforms().then(response => { - console.log(response); - this.setPlatforms(response.data); - }).catch(err => { - AuthHandler.unauthorizedErrorHandler(err); - }) + this.scriptId = "application-create-step2"; } /** - * Extract the platforms from the response data and populate the state. - * @param platforms: The array returned as the response. + * Create a tag on Enter key press and set it to the state. + * Clears the tags text field. + * Chip gets two parameters: Key and value. * */ - setPlatforms(platforms) { - let tmpPlatforms = []; - for (let index in platforms) { - let platform = {}; - platform = platforms[index]; - tmpPlatforms.push(platform); + addTags(event) { + let tags = this.state.tags; + if (event.charCode === 13) { + event.preventDefault(); + tags.push({key: Math.floor(Math.random() * 1000), value: event.target.value}); + this.setState({tags, defValue: ""}, console.log(tags)); } - this.setState({platforms: tmpPlatforms, platformSelectedIndex: 0, platform: tmpPlatforms[0].name}) } /** - * Persist the current form data to the state. + * Set the value for tag. * */ - setStepData() { - console.log("Platforms", this.state.platforms); - let step = { - store: this.state.store, - platform: this.state.platforms[this.state.platformSelectedIndex] - }; - console.log(step); - this.props.setData("step1", {step: step}); + handleTagChange(event) { + let defaultValue = this.state.defValue; + defaultValue = event.target.value; + this.setState({defValue: defaultValue}) } - cancel() { + /** + * Invokes the handleNext function in Create component. + * */ + handleNext() { + let fields = [{name: "Title", value: this.state.title}, + {name: "Short Description", value: this.state.shortDescription}, + {name: "Description", value: this.state.description}, + {name: "Banner", value: this.state.banner}, + {name: "Screenshots", value: this.state.screenshots}, + {name: "Identifier", value: this.state.identifier}, + {name: "Icon", value: this.state.icon}]; + this.validate(fields); + } + /** + * Invokes the handlePrev function in Create component. + * */ + handlePrev() { + this.props.handlePrev(); } /** - * Triggers when changing the Platform selection. + * Handles Chip delete function. + * Removes the tag from state.tags + * */ + handleRequestDelete(event) { + this.chipData = this.state.tags; + console.log(event.target); + const chipToDelete = this.chipData.map((chip) => chip.value).indexOf(event.target.value); + this.chipData.splice(chipToDelete, 1); + this.setState({tags: this.chipData}); + }; + + /** + * Validate the form. * */ - onChangePlatform(event) { - console.log(event.target.value, this.state.platforms); - let id = event.target.value; - let selectedPlatform = this.state.platforms.filter((platform) => { - return platform.identifier === id; + validate(fields) { + let errors = {}; + let errorsPresent = false; + fields.forEach(function (field) { + switch (field.name) { + case 'Title': { + if (field.value === "") { + errors[field.name] = field.name + " is required!"; + errorsPresent = true; + } else { + errorsPresent = false; + } + break; + } + case 'Identifier': { + if (field.value === "") { + errors[field.name] = field.name + " is required!"; + errorsPresent = true; + } else { + errorsPresent = false; + } + break; + } + case 'Short Description': { + if (field.value === "") { + errors[field.name] = field.name + " is required!"; + errorsPresent = true; + } else { + errorsPresent = false; + } + break; + } + case 'Description': { + if (field.value === "") { + errors[field.name] = field.name + " is required!"; + errorsPresent = true; + } else { + errorsPresent = false; + } + break; + } + case 'Banner': { + if (field.value.length === 0) { + errors[field.name] = field.name + " is required!"; + errorsPresent = true; + } else { + errorsPresent = false; + } + break; + } + case 'Icon': { + if (field.value.length === 0) { + errors[field.name] = field.name + " is required!"; + errorsPresent = true; + } else { + errorsPresent = false; + } + break; + } + case 'Screenshots': { + if (field.value.length < 3) { + errors[field.name] = "3 " + field.name + " are required!"; + errorsPresent = true; + } else { + errorsPresent = false; + } + break; + } + } }); - console.log(selectedPlatform); - this.setState({platform: selectedPlatform}); + if (!errorsPresent) { + this.setStepData(); + } else { + this.setState({errors: errors}, console.log(errors)); + } + } + + /** + * Creates an object with the current step data and persist in the parent. + * */ + setStepData() { + let stepData = {}; + + this.props.setData("step2", {step: stepData}); }; /** - * Triggers when changing the Store selection. + * Set text field values to state. * */ - onChangeStore(event) { - console.log(event.target.value); - this.setState({store: event.target.value}); + onTextFieldChange(event, value) { + let field = event.target.id; + switch (field) { + case "name": { + this.setState({name: value}); + break; + } + case "shortDescription": { + this.setState({shortDescription: value}); + break; + } + case "description": { + this.setState({description: value}); + break; + } + case "identifier": { + this.setState({identifier: value}); + break; + } + } }; render() { + console.log(this.state.visibilityComponent); return ( -
- - - - - - - - - - - - {this.state.platforms.length > 0 ? this.state.platforms.map(platform => { - return ( - - ) - }) : } - - +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + +
+ {this.state.tags.map(tag => { + return ( + + {tag.value} + + ) + } + )} +
+ +
+
); } } -Step1.propTypes = { +Step1.prototypes = { handleNext: PropTypes.func, + handlePrev: PropTypes.func, setData: PropTypes.func, removeData: PropTypes.func }; 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 ad024b1829..31e26693fa 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 @@ -18,299 +18,148 @@ import PropTypes from 'prop-types'; import React, {Component} from 'react'; -import {Badge, FormGroup, Input, Label} from 'reactstrap'; +import AuthHandler from "../../../../api/authHandler"; +import PlatformMgtApi from "../../../../api/platformMgtApi"; +import {FormGroup, Input, Label} from 'reactstrap'; /** - * The Second step of application create wizard. - * This contains following components. - * * App Title - * * Short Description - * * Application Description - * * Application Visibility - * * Application Tags : {Used Material UI Chip component} - * * Application Category. - * * Platform Specific properties. + * The first step of the application creation wizard. + * This contains following components: + * * Application Title + * * Store Type + * * Application Platform * * Parent Component: Create * Props: - * * handleNext : {type: function, Invokes handleNext function in Parent.} - * * handlePrev : {type: function, Invokes handlePrev function in Parent} - * * setData : {type: function, Invokes setStepData function in Parent} - * * removeData : {type: Invokes removeStepData function in Parent} + * 1. handleNext: {type: function, Invokes handleNext function of parent component} + * 2. setData : {type: function, Sets current form data to the state of the parent component} + * 3. removeData: {type: function, Invokes the removeStepData function click of parent} * */ class Step2 extends Component { constructor() { super(); + this.setPlatforms = this.setPlatforms.bind(this); + this.setStepData = this.setStepData.bind(this); + this.cancel = this.cancel.bind(this); + this.platforms = []; this.state = { - tags: [], - icon: [], + finished: false, + stepIndex: 0, + store: 1, + platformSelectedIndex: 0, + platform: "", + platforms: [], + stepData: [], title: "", - errors: {}, - banner: [], - defValue: "", - category: 0, - visibility: 0, - description: "", - screenshots: [], - identifier: "", - shortDescription: "" + titleError: "" }; - this.scriptId = "application-create-step2"; + this.scriptId = "application-create-step1"; } - /** - * Create a tag on Enter key press and set it to the state. - * Clears the tags text field. - * Chip gets two parameters: Key and value. - * */ - addTags(event) { - let tags = this.state.tags; - if (event.charCode === 13) { - event.preventDefault(); - tags.push({key: Math.floor(Math.random() * 1000), value: event.target.value}); - this.setState({tags, defValue: ""}, console.log(tags)); - } + componentDidMount() { + //Get the list of available platforms and set to the state. + PlatformMgtApi.getPlatforms().then(response => { + console.log(response); + this.setPlatforms(response.data); + }).catch(err => { + AuthHandler.unauthorizedErrorHandler(err); + }) } /** - * Set the value for tag. + * Extract the platforms from the response data and populate the state. + * @param platforms: The array returned as the response. * */ - handleTagChange(event) { - let defaultValue = this.state.defValue; - defaultValue = event.target.value; - this.setState({defValue: defaultValue}) - } - - /** - * Invokes the handleNext function in Create component. - * */ - handleNext() { - let fields = [{name: "Title", value: this.state.title}, - {name: "Short Description", value: this.state.shortDescription}, - {name: "Description", value: this.state.description}, - {name: "Banner", value: this.state.banner}, - {name: "Screenshots", value: this.state.screenshots}, - {name: "Identifier", value: this.state.identifier}, - {name: "Icon", value: this.state.icon}]; - this.validate(fields); + setPlatforms(platforms) { + let tmpPlatforms = []; + for (let index in platforms) { + let platform = {}; + platform = platforms[index]; + tmpPlatforms.push(platform); + } + this.setState({platforms: tmpPlatforms, platformSelectedIndex: 0, platform: tmpPlatforms[0].name}) } /** - * Invokes the handlePrev function in Create component. + * Persist the current form data to the state. * */ - handlePrev() { - this.props.handlePrev(); + setStepData() { + console.log("Platforms", this.state.platforms); + let step = { + store: this.state.store, + platform: this.state.platforms[this.state.platformSelectedIndex] + }; + console.log(step); + this.props.setData("step1", {step: step}); } - /** - * Handles Chip delete function. - * Removes the tag from state.tags - * */ - handleRequestDelete(event) { - this.chipData = this.state.tags; - console.log(event.target); - const chipToDelete = this.chipData.map((chip) => chip.value).indexOf(event.target.value); - this.chipData.splice(chipToDelete, 1); - this.setState({tags: this.chipData}); - }; - - /** - * Validate the form. - * */ - validate(fields) { - let errors = {}; - let errorsPresent = false; - fields.forEach(function (field) { - switch (field.name) { - case 'Title': { - if (field.value === "") { - errors[field.name] = field.name + " is required!"; - errorsPresent = true; - } else { - errorsPresent = false; - } - break; - } - case 'Identifier': { - if (field.value === "") { - errors[field.name] = field.name + " is required!"; - errorsPresent = true; - } else { - errorsPresent = false; - } - break; - } - case 'Short Description': { - if (field.value === "") { - errors[field.name] = field.name + " is required!"; - errorsPresent = true; - } else { - errorsPresent = false; - } - break; - } - case 'Description': { - if (field.value === "") { - errors[field.name] = field.name + " is required!"; - errorsPresent = true; - } else { - errorsPresent = false; - } - break; - } - case 'Banner': { - if (field.value.length === 0) { - errors[field.name] = field.name + " is required!"; - errorsPresent = true; - } else { - errorsPresent = false; - } - break; - } - case 'Icon': { - if (field.value.length === 0) { - errors[field.name] = field.name + " is required!"; - errorsPresent = true; - } else { - errorsPresent = false; - } - break; - } - case 'Screenshots': { - if (field.value.length < 3) { - errors[field.name] = "3 " + field.name + " are required!"; - errorsPresent = true; - } else { - errorsPresent = false; - } - break; - } - } - }); + cancel() { - if (!errorsPresent) { - this.setStepData(); - } else { - this.setState({errors: errors}, console.log(errors)); - } } /** - * Creates an object with the current step data and persist in the parent. + * Triggers when changing the Platform selection. * */ - setStepData() { - let stepData = {}; + onChangePlatform(event) { + console.log(event.target.value, this.state.platforms); + let id = event.target.value; + let selectedPlatform = this.state.platforms.filter((platform) => { + return platform.identifier === id; + }); + console.log(selectedPlatform); - this.props.setData("step2", {step: stepData}); + this.setState({platform: selectedPlatform}); }; /** - * Set text field values to state. + * Triggers when changing the Store selection. * */ - onTextFieldChange(event, value) { - let field = event.target.id; - switch (field) { - case "name": { - this.setState({name: value}); - break; - } - case "shortDescription": { - this.setState({shortDescription: value}); - break; - } - case "description": { - this.setState({description: value}); - break; - } - case "identifier": { - this.setState({identifier: value}); - break; - } - } + onChangeStore(event) { + console.log(event.target.value); + this.setState({store: event.target.value}); }; render() { - console.log(this.state.visibilityComponent); return ( -
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - -
- {this.state.tags.map(tag => { - return ( - - {tag.value} - - ) - } - )} -
- -
-
+
+ + + + + + + + + + + + {this.state.platforms.length > 0 ? this.state.platforms.map(platform => { + return ( + + ) + }) : } + +
); } } -Step2.prototypes = { +Step2.propTypes = { handleNext: PropTypes.func, - handlePrev: PropTypes.func, setData: PropTypes.func, removeData: PropTypes.func }; 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 e60a9d4e93..124844c739 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 @@ -25,7 +25,6 @@ import SelectField from 'material-ui/SelectField'; import {FormGroup, Label} from 'reactstrap'; import AppImage from "../../../UIComponents/AppImage/AppImage"; - /** * The Third step of application create wizard. * This contains following components. diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Edit/Base/ApplicationEditBaseLayout.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Edit/Base/ApplicationEditBaseLayout.jsx index 731b23ef10..aba70453be 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Edit/Base/ApplicationEditBaseLayout.jsx +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Edit/Base/ApplicationEditBaseLayout.jsx @@ -19,7 +19,7 @@ import './baseLayout.css'; import {Col, Row} from "reactstrap"; import React, {Component} from 'react'; -import GeneralInfo from "../GeneralInfo"; +import GeneralInfo from "../GenenralInfo/GeneralInfo"; import ReleaseManager from '../../Release/ReleaseMgtBase/ReleaseManager'; class ApplicationEdit extends Component { diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Edit/Base/baseLayout.css b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Edit/Base/baseLayout.css index 0c5b460a9d..a93f84a9b2 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Edit/Base/baseLayout.css +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Edit/Base/baseLayout.css @@ -22,6 +22,7 @@ width: 100%; margin: 0; font-size: 20px; + border-bottom: solid 1px #d8d8d8; } .application-header-text { diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Edit/GeneralInfo.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Edit/GenenralInfo/GeneralInfo.jsx similarity index 100% rename from components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Edit/GeneralInfo.jsx rename to components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Edit/GenenralInfo/GeneralInfo.jsx diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Edit/generalInfo.css b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Edit/GenenralInfo/generalInfo.css similarity index 100% rename from components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Edit/generalInfo.css rename to components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Edit/GenenralInfo/generalInfo.css diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/Drawer/drawer.css b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/Drawer/drawer.css index aa7e71f856..eea79c5b69 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/Drawer/drawer.css +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/Drawer/drawer.css @@ -21,7 +21,7 @@ width: 0; /* 0 width - change this with JavaScript */ position: fixed; /* Stay in place */ z-index: 1; /* Stay on top */ - top: 5%; + top: 8%; right: 0%; background-color: #ffffff; overflow-x: hidden; /* Disable horizontal scroll */ diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/FloatingButton/floatingButton.css b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/FloatingButton/floatingButton.css index a4257ac2cd..5cc8756320 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/FloatingButton/floatingButton.css +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/FloatingButton/floatingButton.css @@ -42,6 +42,7 @@ .btn-circle:hover { cursor: pointer; + background-color: rgb(255, 93, 2); } .primary { diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/index.css b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/index.css index 7e4a275863..f8673ceb90 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/index.css +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/index.css @@ -18,7 +18,7 @@ body { width: 100%; - font-family: sans-serif; + font-family: Roboto sans-serif; } #userName { @@ -48,10 +48,11 @@ body { #container { background-color: #ffffff; + padding: 0; } #header-content { - height: 100px; + height: 125px; width: 100%; margin: 0 10px 0 0; background-color: #3b33bd; @@ -61,6 +62,12 @@ body { box-shadow: -2px 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); } +#header { + margin: 16px 16px 20px 16px; + height: 100%; + position: relative; +} + #application-content { height: auto; width: 80%; @@ -69,24 +76,14 @@ body { padding: 10px 10px 10px 10px; } -.add-btn { +#add-btn-container { position: absolute; - left:12%; - top: 35px; -} - -.add-btn.div { - position: relative; - margin-top: 20px; - margin-left: 20px; -} - -#fw-api:before { - content: '\e601'; + left: 12%; + top: 100px; } .btn-header { - margin-top: 10px; + margin-top: 15px; margin-right: 20px; color: white; } @@ -113,8 +110,9 @@ body { color: #a8a8a8; position: relative; float: right; - top: 35px; - margin-right: 10px; + top: 75px; + left: 80px; + margin-right: 16px; } #search { @@ -175,7 +173,6 @@ body { margin: 70px 40px 40px 150px; } - .applicationCreateScreenshotDropZone { width: 150px; height: 150px; diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/webpack.config.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/webpack.config.js index 2cd24bd2ac..2437370729 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/webpack.config.js +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/webpack.config.js @@ -48,6 +48,10 @@ const config = { test: /\.css$/, use: [ 'style-loader', 'css-loader' ] }, + { + test: /\.scss$/, + use: [ 'style-loader', 'scss-loader' ] + }, { test: /\.less$/, use: [{