From 4a09b4143420c6bb2ab9b4be20fab37056a33ea4 Mon Sep 17 00:00:00 2001 From: Menaka Jayawardena Date: Thu, 28 Sep 2017 15:27:00 +0530 Subject: [PATCH] Stage 1: Added material design colors and WSO2 fonts. --- .../AppPublisherBase/BaseLayout.jsx | 52 ++++---- .../Application/ApplicationListing.jsx | 124 ++++++++++-------- .../Application/Create/ApplicationCreate.jsx | 23 +++- .../Edit/Base/ApplicationEditBaseLayout.jsx | 7 +- .../Application/Edit/Base/baseLayout.css | 26 ++-- .../Application/View/ApplicationView.jsx | 11 +- .../components/UIComponents/Drawer/Drawer.jsx | 2 +- .../components/UIComponents/Drawer/drawer.css | 3 +- .../main/resources/publisher/src/index.css | 65 ++++++--- 9 files changed, 188 insertions(+), 125 deletions(-) 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 220dd790f5f..c40ae23086c 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 @@ -20,12 +20,9 @@ import PropTypes from 'prop-types'; import React, {Component} from 'react'; import {withRouter} from 'react-router-dom'; import AuthHandler from "../../api/authHandler"; -import NotificationsIcon from 'material-ui/svg-icons/social/notifications'; -import ActionAccountCircle from 'material-ui/svg-icons/action/account-circle'; import ApplicationCreate from '../Application/Create/ApplicationCreate'; -import {Button, Input, InputGroup, Popover, PopoverContent, PopoverTitle,} from 'reactstrap'; -import NotificationItem from '../UIComponents/Notifications/NotificationItem'; - +import {Button, Col, Input, Row,} from 'reactstrap'; +import FloatingButton from "../UIComponents/FloatingButton/FloatingButton"; /** * Base Layout: @@ -43,6 +40,7 @@ class BaseLayout extends Component { openModal: false }; this.logout = this.logout.bind(this); + this.closeModal = this.closeModal.bind(this); } handleApplicationClick() { @@ -50,6 +48,7 @@ class BaseLayout extends Component { } handleApplicationCreateClick(event) { + console.log("dsfds"); event.preventDefault(); event.stopPropagation(); this.setState({openModal: true}); @@ -67,6 +66,10 @@ class BaseLayout extends Component { AuthHandler.logout(); } + closeModal() { + this.setState({openModal: false}); + } + render() { return (
@@ -76,36 +79,35 @@ class BaseLayout extends Component { WSO2 IoT App Publisher
- - + +
- +
+
- {this.props.children} + + + {this.props.children} + + +
- + ); } 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 7b10c366c00..96d39fbe3f1 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 @@ -19,13 +19,9 @@ import Theme from '../../theme'; import React, {Component} from 'react'; import {withRouter} from 'react-router-dom'; -import AuthHandler from "../../api/authHandler"; -import ApplicationMgtApi from '../../api/applicationMgtApi'; -import {Button, Row, Table} from 'reactstrap'; +import {Button, Col, Row, Table} from 'reactstrap'; import Drawer from '../UIComponents/Drawer/Drawer'; import ApplicationView from './View/ApplicationView'; -import NotificationView from "../UIComponents/Notifications/NotificationView"; -import AppImage from "../UIComponents/AppImage/AppImage"; /** * The App Create Component. @@ -53,7 +49,10 @@ class ApplicationListing extends Component { drawer: {}, appListStyle: {}, image: [{id: "1", src: "https://www.greenfoot.org/images/logos/macos.png"}, - {id: "2", src:"http://dl1.cbsistatic.com/i/r/2016/08/08/0e67e43a-5a45-41ab-b81d-acfba8708044/resize/736x552/0c0ee669677b5060a0fa1bfb0c7873b4/android-logo-promo-470.png"}] + { + id: "2", + src: "http://dl1.cbsistatic.com/i/r/2016/08/08/0e67e43a-5a45-41ab-b81d-acfba8708044/resize/736x552/0c0ee669677b5060a0fa1bfb0c7873b4/android-logo-promo-470.png" + }] }; this.scriptId = "application-listing"; } @@ -131,15 +130,15 @@ class ApplicationListing extends Component { *Loading the theme files based on the the user-preference. */ Theme.insertThemingScripts(this.scriptId); - let getApps = ApplicationMgtApi.getApplications(); - getApps.then(response => { - let apps = this.setData(response.data.applications); - console.log(apps); //TODO: Remove this. - this.setState({searchedApplications: apps}); - // console.log(this.setState({data: response.data}), console.log(this.state)); - }).catch(err => { - AuthHandler.unauthorizedErrorHandler(err); - }); + // let getApps = ApplicationMgtApi.getApplications(); + // getApps.then(response => { + // let apps = this.setData(response.data.applications); + // console.log(apps); //TODO: Remove this. + // this.setState({searchedApplications: apps}); + // // console.log(this.setState({data: response.data}), console.log(this.state)); + // }).catch(err => { + // AuthHandler.unauthorizedErrorHandler(err); + // }); } /** @@ -218,7 +217,7 @@ class ApplicationListing extends Component { this.props.history.push("apps/edit/fdsfdsf343"); } - remove(imageId) { + remove(imageId) { let tmp = this.state.image; console.log(imageId); @@ -248,44 +247,61 @@ class ApplicationListing extends Component { return (
- - - - - {/* TODO: Remove console.log and add sort method. */} - - - - - - - - - {this.applications.map( - (application) => { - return ( - - - - - - - - - ) - } - )} - -
{console.log("sort")}}>Application NameCategoryPlatformStatus
- {/* TODO: Move this styles to css. */} - - {application.applicationName}{application.category}{application.platform}{application.status}
- + + +
+ +
+ + + + + + + + + {/* TODO: Remove console.log and add sort method. */} + + + + + + + + + {this.applications.map( + (application) => { + return ( + + + + + + + + + ) + } + )} + +
{ + console.log("sort") + }}>Application Name + CategoryPlatformStatus
+ {/* TODO: Move this styles to css. */} + + {application.applicationName}{application.category}{application.platform}{application.status} + +
+ + 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 38b5d261029..2a2a151538f 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,7 +21,7 @@ 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 {Button, Modal, ModalBody, ModalFooter, ModalHeader} from 'reactstrap'; +import {Button, Col, Modal, ModalBody, ModalFooter, ModalHeader, Row} from 'reactstrap'; /** * The App Create Component. @@ -61,12 +61,12 @@ class ApplicationCreate extends Component { } close() { - this.setState({open: false, stepIndex: 0}) + this.props.close(); } handleBack() { let currentStep = this.state.stepIndex; - let nextStep = currentStep === 0 ? currentStep : currentStep - 1 ; + let nextStep = currentStep === 0 ? currentStep : currentStep - 1; this.setState({stepIndex: nextStep}, console.log(this.state.stepIndex)); } @@ -88,7 +88,7 @@ class ApplicationCreate extends Component { handleSubmit() { let stepData = this.state.stepData; let applicationCreationPromise = ApplicationMgtApi.createApplication(stepData); - applicationCreationPromise.then( response => { + applicationCreationPromise.then(response => { this.handleYes(); } ).catch( @@ -216,10 +216,21 @@ class ApplicationCreate extends Component { backdrop={'static'}> Create Application - {this.getStepContent(this.state.stepIndex)} + + +
+ +
+ + + + + {this.getStepContent(this.state.stepIndex)} + + - {this.state.stepIndex === 0?
: + {this.state.stepIndex === 0 ?
: } {this.state.finished ? 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 8776efafd8e..731b23ef107 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 @@ -79,7 +79,12 @@ class ApplicationEdit extends Component { return (
- Application Name + + + + + Application Name + 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 3ee209b3e53..0c5b460a9d5 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 @@ -16,20 +16,11 @@ * under the License. */ -#application-edit-base { - width: 70%; - margin: 0 auto; - height: 100%; - background-color: #f6f6f6; - border: solid 1px #828282; -} #application-edit-header { height: 50px; width: 100%; margin: 0; - background-color: #9a9a9a; - border: solid 1px #a2a2a2; font-size: 20px; } @@ -60,8 +51,7 @@ /*Tab styling*/ div.tab { float: left; - border: 1px solid #ccc; - background-color: #f1f1f1; + border-right: 1px solid #d8d8d8; height: 100%; } @@ -81,13 +71,14 @@ div.tab button { /* Change background color of buttons on hover */ div.tab button:hover { - background-color: #ddd; + background-color: #ddd6d7; cursor: pointer; } /* Create an active/current "tab button" class */ div.tab button.active { - background-color: #ccc; + background-color: #1b3bcc; + color: white; } @@ -109,3 +100,12 @@ div.tab button.active { height: 100%; position: relative; } + +.back-to-app { + position: absolute; +} + +.back-to-app:hover { + cursor: pointer; + background-color: #888888; +} diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/View/ApplicationView.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/View/ApplicationView.jsx index d0fecb6e6f5..22503fdf8c7 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/View/ApplicationView.jsx +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/View/ApplicationView.jsx @@ -76,8 +76,15 @@ class ApplicationView extends Component { - Rating - View in Store + + + + + + + + View in Store +
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/Drawer/Drawer.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/Drawer/Drawer.jsx index 9a419ccc180..3c7f21c2e1a 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/Drawer/Drawer.jsx +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/Drawer/Drawer.jsx @@ -42,7 +42,7 @@ class Drawer extends Component { return (
- × + {this.props.children}
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 e1281614a52..aa7e71f8563 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 @@ -23,11 +23,10 @@ z-index: 1; /* Stay on top */ top: 5%; right: 0%; - background-color: #b5b5b5; + background-color: #ffffff; overflow-x: hidden; /* Disable horizontal scroll */ padding-top: 60px; /* Place content 60px from the top */ transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */ - border: solid 1px black; box-shadow: -2px 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); } 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 750b93911ba..7e4a275863c 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 @@ -54,8 +54,7 @@ body { height: 100px; width: 100%; margin: 0 10px 0 0; - background-color: #BDBDBD; - border-bottom: solid 2px; + background-color: #3b33bd; position: fixed; /* Set the navbar to fixed position */ top: 0; /* Position the navbar at the top of the page */ z-index: 2; @@ -63,21 +62,17 @@ body { } #application-content { - max-height: 800px; - margin-top: 150px; + height: auto; + width: 80%; + margin: 150px 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; } -#add-btn { - border-radius: 50%; - border: solid 2px; +.add-btn { position: absolute; - background-color: #BDBDBD; - left: 15px; - top: 75px; - cursor: pointer; - height: 50px; - width: 50px; - box-shadow: -2px 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); + left:12%; + top: 35px; } .add-btn.div { @@ -90,12 +85,14 @@ body { content: '\e601'; } -#btn { - background-color: #BDBDBD; - border-color: #BDBDBD; +.btn-header { + margin-top: 10px; + margin-right: 20px; + color: white; } #header-text { + color: #ffffff; font-size: 25px; top: 10px; margin-left: 10px; @@ -105,21 +102,47 @@ body { float: right; } +.search-icon { + position: absolute; + top: 5px; + left: 5px; +} + #search-box { + display: flex; + color: #a8a8a8; + position: relative; float: right; + top: 35px; + margin-right: 10px; } #search { - background-color: #BDBDBD; - left: 110px; - top: 20px; + position: relative; + color: white; + background-color: transparent; + left: 15px; + top: 0px; height: 25px; outline: none; border: none; - border-bottom: solid 1px black; border-radius: 0%; } +.stepper-header { + width: 100%; + border-bottom: solid 1px cornflowerblue; + padding-bottom: 5px; + margin-bottom: 10px; +} + +.platform-link-placeholder { + color: #888888; + float: right; + margin-right: 20px; + padding-bottom: 10px; +} + #application-list { margin-top: 20px; transition: margin-right .5s;