From 60310d3ca19604bafa35f9513018af08b3429be6 Mon Sep 17 00:00:00 2001 From: Menaka Jayawardena Date: Sun, 24 Sep 2017 21:10:05 +0530 Subject: [PATCH] Created custom components for image button, notification view and notification item. --- .../AppPublisherBase/BaseLayout.jsx | 13 +++- .../Application/ApplicationListing.jsx | 44 +++++++++-- .../Application/Create/CreateSteps/Step3.jsx | 29 +++---- .../Application/Edit/GeneralInfo.jsx | 26 +++---- .../UIComponents/AppImage/AppImage.js | 63 +++++++++++++++ .../UIComponents/AppImage/appImage.css | 65 ++++++++++++++++ .../components/UIComponents/Drawer/Drawer.jsx | 17 ++++- .../components/UIComponents/Drawer/drawer.css | 12 ++- .../ImageUploader/ImageUploader.jsx | 76 +++++++++++++++++++ .../ImageUploader/imageUploader.css | 18 +++++ .../components/UIComponents/Input/Input.js | 18 +++++ .../Notifications/NotificationItem.jsx | 46 +++++++++++ .../Notifications/NotificationView.jsx | 71 +++++++++++++++++ .../Notifications/notification.css | 49 ++++++++++++ .../main/resources/publisher/src/index.css | 22 +++++- 15 files changed, 522 insertions(+), 47 deletions(-) create mode 100644 components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/AppImage/AppImage.js create mode 100644 components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/AppImage/appImage.css create mode 100644 components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/ImageUploader/ImageUploader.jsx create mode 100644 components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/ImageUploader/imageUploader.css create mode 100644 components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/Notifications/NotificationItem.jsx create mode 100644 components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/Notifications/NotificationView.jsx create mode 100644 components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/Notifications/notification.css 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 dcb1e25d95..732aefc95b 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 @@ -24,7 +24,8 @@ import '../../css/font-wso2.css'; 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,} from 'reactstrap'; +import {Button, Input, InputGroup, Popover, PopoverContent, PopoverTitle,} from 'reactstrap'; +import NotificationItem from '../UIComponents/Notifications/NotificationItem'; /** @@ -76,8 +77,8 @@ class BaseLayout extends Component { WSO2 IoT App Publisher
- - + +
+ {/**/} + {/*Dismiss All*/} + {/**/} + {/**/} + {/**/} + {/**/} ); } 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 93f5c0f977..54f3d8ea31 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 @@ -21,9 +21,11 @@ import React, {Component} from 'react'; import {withRouter} from 'react-router-dom'; import AuthHandler from "../../api/authHandler"; import ApplicationMgtApi from '../../api/applicationMgtApi'; -import {Button, Table} from 'reactstrap'; +import {Button, 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. @@ -49,7 +51,9 @@ class ApplicationListing extends Component { open: false, application: {}, drawer: {}, - appListStyle: {} + 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"}] }; this.scriptId = "application-listing"; } @@ -212,7 +216,7 @@ class ApplicationListing extends Component { let appListStyle = { marginRight: '500px', - } + }; this.setState({drawer: style, appListStyle: appListStyle}); @@ -232,6 +236,32 @@ class ApplicationListing extends Component { this.props.history.push("apps/edit/fdsfdsf343"); } + remove(imageId) { + let tmp = this.state.image; + + console.log(imageId); + + let rem = tmp.filter((image) => { + return image.id !== imageId + + }); + console.log(rem); + + this.setState({image: rem}); + } + + closeDrawer() { + let style = { + width: '0', + marginLeft: '0' + }; + + let appListStyle = { + marginRight: '0', + }; + this.setState({drawer: style, appListStyle: appListStyle}); + } + render() { return ( @@ -260,7 +290,8 @@ class ApplicationListing extends Component { height='50px' width='50px' style={{border: 'solid 1px black', borderRadius: "100%"}} - /> + /> + {application.applicationName} {application.category} {application.platform} @@ -273,10 +304,7 @@ class ApplicationListing 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/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 f6b51894c6..e60a9d4e93 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 @@ -23,6 +23,7 @@ import React, {Component} from 'react'; import MenuItem from 'material-ui/MenuItem'; import SelectField from 'material-ui/SelectField'; import {FormGroup, Label} from 'reactstrap'; +import AppImage from "../../../UIComponents/AppImage/AppImage"; /** @@ -303,13 +304,9 @@ class Step3 extends Component { (600 X 800 32 bit PNG)
{this.state.screenshots.map((tile) => ( - +
+ +
))} {this.state.screenshots.length < 3 ? (512 X 512 32 bit PNG)
{this.state.icon.map((tile) => ( - +
+ +
))} -
{this.state.icon.length === 0 ?

+

 :
} +
@@ -362,11 +357,9 @@ class Step3 extends Component { (1000 X 400 32 bit PNG)
{this.state.banner.map((tile) => ( - +
+ +
))} {this.state.banner.length === 0 ?
@@ -151,18 +150,17 @@ class GeneralInfo extends Component { ))} + {this.state.icon.length === 0 ? + { + this.setState({icon, rejected}); + }} + > +

+

+ :
}
- - {this.state.icon.length === 0 ? - { - this.setState({icon, rejected}); - }} - > -

+

- :
}
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/AppImage/AppImage.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/AppImage/AppImage.js new file mode 100644 index 0000000000..e4e8f09cc2 --- /dev/null +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/AppImage/AppImage.js @@ -0,0 +1,63 @@ +/* + * Copyright (c) 2017, WSO2 Inc. (http://www.wso2.org) All Rights Reserved. + * + * WSO2 Inc. licenses this file to you under the Apache License, + * Version 2.0 (the "License"); you may not use this file except + * in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +import PropTypes from 'prop-types'; +import React, {Component} from 'react'; +import './appImage.css'; + +/** + * Component for holding uploaded image. + * This component has the feature to remove selected image from the array. + * */ +class AppImage extends Component { + + constructor() { + super(); + this.removeImage = this.removeImage.bind(this); + } + + /** + * Triggers the parent method to remove the selected image. + * @param event: The click event of the component. + * */ + removeImage(event) { + event.preventDefault(); + this.props.onRemove(event.target.id); + } + + render() { + const {image, imageId} = this.props; + return ( +
+ +
+ X +
+
+ ) + } +} + +AppImage.propTypes = { + image: PropTypes.string, + imageId: PropTypes.string, + onRemove: PropTypes.func, + imageStyles: PropTypes.object +}; + +export default AppImage; diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/AppImage/appImage.css b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/AppImage/appImage.css new file mode 100644 index 0000000000..2747960b96 --- /dev/null +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/AppImage/appImage.css @@ -0,0 +1,65 @@ +/* + * Copyright (c) 2017, WSO2 Inc. (http://www.wso2.org) All Rights Reserved. + * + * WSO2 Inc. licenses this file to you under the Apache License, + * Version 2.0 (the "License"); you may not use this file except + * in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +.image-container { + position: relative; + width: 100%; + height: 100%; + margin: 5px; +} + +.image { + opacity: 1; + display: block; + max-width: 100%; + max-height: 100%; + height: auto; + transition: .5s ease; + backface-visibility: hidden; +} + +.btn-content { + transition: .5s ease; + opacity: 0; + position: absolute; + top: 50%; + left: 50%; + background-color: rgba(243, 243, 243, 0.43); + border-radius: 50%; + border: solid 1px #ffffff; + transform: translate(-50%, -50%); + -ms-transform: translate(-50%, -50%) +} + +.image-container:hover .image { + opacity: 0.3; +} + +.image-container:hover .btn-content { + opacity: 1; +} + +.close-btn { + color: #000000; + font-size: 16px; + padding: 20px 30px; +} + +.close-btn:hover { + cursor: pointer; +} 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 7c700d79d6..9a419ccc18 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 @@ -19,16 +19,30 @@ import PropTypes from 'prop-types'; import React, {Component} from 'react'; import './drawer.css'; +import {Row} from "reactstrap"; /** * Custom React component for Application View. * */ class Drawer extends Component { + constructor() { + super(); + this.closeDrawer = this.closeDrawer.bind(this); + } + + /** + * Closes the drawer. + * */ + closeDrawer() { + this.props.onClose(); + } + render() { return (
+ × {this.props.children}
@@ -38,7 +52,8 @@ class Drawer extends Component { Drawer.propTypes = { style: PropTypes.object, - children: PropTypes.node + children: PropTypes.node, + onClose: PropTypes.func }; export default Drawer; 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 9f0cb7594a..e1281614a5 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: 10%; + top: 5%; right: 0%; background-color: #b5b5b5; overflow-x: hidden; /* Disable horizontal scroll */ @@ -50,6 +50,16 @@ margin-left: 50px; } +.drawer-close-btn { + height: 40px; + width: 30px; +} + +.drawer-close-btn:hover { + cursor: pointer; + color: #818181; +} + /* Style page content - use this if you want to push the page content to the right when you open the side navigation */ #main { transition: margin-left .5s; diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/ImageUploader/ImageUploader.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/ImageUploader/ImageUploader.jsx new file mode 100644 index 0000000000..3f719e4745 --- /dev/null +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/ImageUploader/ImageUploader.jsx @@ -0,0 +1,76 @@ +/* + * Copyright (c) 2017, WSO2 Inc. (http://www.wso2.org) All Rights Reserved. + * + * WSO2 Inc. licenses this file to you under the Apache License, + * Version 2.0 (the "License"); you may not use this file except + * in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +import PropTypes from 'prop-types'; +import React, {Component} from 'react'; +import './imageUploader.css'; +import Dropzone from "react-dropzone"; +import {Row} from "reactstrap"; + + +class ImageUploader extends Component { + constructor() { + super(); + this.setImages = this.setImages.bind(this); + this.state = { + images: [] + } + } + + setImages(images) { + this.props.setImages(images); + } + + render() { + let {images, height, width, accepted, multiple, maxAmount} = this.props; + return ( +
+ + {images.map((tile) => ( + + ) + )} + + + {this.state.screenshots.length < maxAmount ? + { + this.setImages(accepted); + }} + > +

+

+ :
} +
+ ); + } + +} + +ImageUploader.prototypes = { + height: PropTypes.string, + width: PropTypes.string, + accepted: PropTypes.array, + multiple: PropTypes.bool, + maxAmount: PropTypes.number, + setImages: PropTypes.func +}; + + +export default ImageUploader; diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/ImageUploader/imageUploader.css b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/ImageUploader/imageUploader.css new file mode 100644 index 0000000000..80d34ae7e2 --- /dev/null +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/ImageUploader/imageUploader.css @@ -0,0 +1,18 @@ +/* + * Copyright (c) 2017, WSO2 Inc. (http://www.wso2.org) All Rights Reserved. + * + * WSO2 Inc. licenses this file to you under the Apache License, + * Version 2.0 (the "License"); you may not use this file except + * in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/Input/Input.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/Input/Input.js index 127a39cf96..2a07f15b25 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/Input/Input.js +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/Input/Input.js @@ -1,3 +1,21 @@ +/* + * Copyright (c) 2017, WSO2 Inc. (http://www.wso2.org) All Rights Reserved. + * + * WSO2 Inc. licenses this file to you under the Apache License, + * Version 2.0 (the "License"); you may not use this file except + * in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + import React, {Component} from 'react'; import './input.css'; diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/Notifications/NotificationItem.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/Notifications/NotificationItem.jsx new file mode 100644 index 0000000000..8fd19e88f4 --- /dev/null +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/Notifications/NotificationItem.jsx @@ -0,0 +1,46 @@ +/* + * Copyright (c) 2017, WSO2 Inc. (http://www.wso2.org) All Rights Reserved. + * + * WSO2 Inc. licenses this file to you under the Apache License, + * Version 2.0 (the "License"); you may not use this file except + * in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +import React, {Component} from 'react'; +import {Col, Row} from "reactstrap"; +import './notification.css'; + +class NotificationItem extends Component { + constructor() { + super(); + } + + render() { + return ( +
+ + +
+ +
+ + +

Your application, Facebook has been published.

+ + +
+ ); + } +} + +export default NotificationItem; diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/Notifications/NotificationView.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/Notifications/NotificationView.jsx new file mode 100644 index 0000000000..bfcade671b --- /dev/null +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/Notifications/NotificationView.jsx @@ -0,0 +1,71 @@ +/* + * Copyright (c) 2017, WSO2 Inc. (http://www.wso2.org) All Rights Reserved. + * + * WSO2 Inc. licenses this file to you under the Apache License, + * Version 2.0 (the "License"); you may not use this file except + * in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +import React, {Component} from 'react'; +import {Col, Row} from "reactstrap"; +import './notification.css'; + +class NotificationView extends Component { + constructor() { + super(); + } + + render() { + return ( +
+
+ + +
+ +
+ + + + Application Name + + + Version 1.0 + + +

Your Application was rejected

+ + + +
+ + +

Following validations were detected in your review submission. + Please attend to them and re-submit

+
    +
  • sdjjfsdfsdfkjs shdfjhlkds hflkhfdslkd
    • +
  • sdfkds jfdsljfklsdfjksdjlksdjdlkf
    • +
  • sfksdf slkjskd jfjds lkfjdsfdsfdslkf sjf lkdsf
    • +
  • skfjslkdjfsdjfjksldjf sdkl jflkds jfkslfjs
    • +
  • ksdf jks;kshflk hlkjhds lkjhdsklhsd lkf
    • +
  • jsdljflksd jfklsdfskljfkjshf;ks ldj
    • +
+ + +
+
+ ); + } +} + +export default NotificationView; diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/Notifications/notification.css b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/Notifications/notification.css new file mode 100644 index 0000000000..dbaeef5327 --- /dev/null +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/Notifications/notification.css @@ -0,0 +1,49 @@ +/* + * Copyright (c) 2017, WSO2 Inc. (http://www.wso2.org) All Rights Reserved. + * + * WSO2 Inc. licenses this file to you under the Apache License, + * Version 2.0 (the "License"); you may not use this file except + * in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +.notification-app-icon { + border-radius: 50%; + border: solid 1px black; +} + +.small { + height: 50px; + width: 50px; +} + +.medium { + height: 100px; + width: 100px; +} + +#notification-view-content { + width: 50%; + border: solid 1px black; + margin: 0 auto; + box-shadow: -2px 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); +} + +#notification-content { + margin: 20px 10px 20px 10px; +} + +#app-reject-msg { + width: 100%; + height: 30px; + background-color: #888888; +} 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 6c904f70dd..61cbab76f9 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 @@ -48,11 +48,13 @@ body { #header-content { height: 100px; width: 100%; + margin: 0 10px 0 0; background-color: #BDBDBD; border-bottom: solid 2px; position: fixed; /* Set the navbar to fixed position */ top: 0; /* Position the navbar at the top of the page */ z-index: 2; + box-shadow: -2px 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); } #application-content { @@ -70,6 +72,7 @@ body { 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); } .add-btn.div { @@ -117,6 +120,21 @@ body { transition: margin-right .5s; } +#app-image-screenshot { + width: 300px; + height: 300px; +} + +#app-image-icon { + width: 300px; + height: 300px; +} + +#app-image-banner { + width: 400px; + height: 300px; +} + .applicationCreateBannerDropZone { width: 300px; height: 150px; @@ -158,11 +176,11 @@ body { #screenshot-container { display: flex; overflow-x: auto; - height: 170px; + height: 200px; } #app-icon-container { - max-width: 200px; + height: 300px; overflow-x: auto; }