Created custom components for image button, notification view and notification item.

merge-requests/7/head
Menaka Jayawardena 7 years ago
parent 8ee0bd0404
commit 60310d3ca1

@ -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
</span>
<div id="header-btn">
<Button id="btn"><NotificationsIcon/></Button>
<Button id="btn"><ActionAccountCircle/></Button>
<Button className="btn-notification" id="btn"><NotificationsIcon/></Button>
<Button className="btn-account" id="btn"><ActionAccountCircle/></Button>
</div>
</div>
<div id="search-box">
@ -106,6 +107,12 @@ class BaseLayout extends Component {
{this.props.children}
</div>
<ApplicationCreate open={this.state.openModal}/>
{/*<Popover style={{right: '20px'}} target="btn" isOpen={true} placement="bottom">*/}
{/*<PopoverTitle>Dismiss All</PopoverTitle>*/}
{/*<PopoverContent>*/}
{/*<NotificationItem/>*/}
{/*</PopoverContent>*/}
{/*</Popover>*/}
</div>
);
}

@ -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%"}}
/></td>
/>
</td>
<td>{application.applicationName}</td>
<td>{application.category}</td>
<td>{application.platform}</td>
@ -273,10 +304,7 @@ class ApplicationListing extends Component {
</tbody>
</Table>
{/*<ApplicationEdit/>*/}
<Drawer style={this.state.drawer}>
<Drawer onClose={this.closeDrawer.bind(this)} style={this.state.drawer}>
<ApplicationView/>
</Drawer>
</div>

@ -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 {
<span className="image-sub-title"> (600 X 800 32 bit PNG)</span>
<div id="screenshot-container">
{this.state.screenshots.map((tile) => (
<button id="img-btn-screenshot" style={{height: '210px', width: '410px'}}
onMouseEnter={() => {
console.log("Mouse Entered")
}}>
{console.log(tile[0].preview)}
<img style={{height: '200px', width: '400px'}} src={tile[0].preview}/>
</button>
<div id="app-image-screenshot">
<AppImage image={tile[0].preview}/>
</div>
))}
{this.state.screenshots.length < 3 ?
<Dropzone
@ -336,13 +333,10 @@ class Step3 extends Component {
<span className="image-sub-title"> (512 X 512 32 bit PNG)</span>
<div id="app-icon-container">
{this.state.icon.map((tile) => (
<button onMouseEnter={() => {
console.log("Mouse Entered")
}}>
<img style={{height: '200px', width: '200px'}} src={tile.preview}/>
</button>
))}
<div id="app-image-icon">
<AppImage image={tile.preview}/>
</div>
))}
{this.state.icon.length === 0 ?
<Dropzone
@ -354,6 +348,7 @@ class Step3 extends Component {
>
<p className="applicationCreateIconp">+</p>
</Dropzone> : <div/>}
</div>
</FormGroup>
</div>
<div style={{marginLeft: '15px'}}>
@ -362,11 +357,9 @@ class Step3 extends Component {
<span className="image-sub-title"> (1000 X 400 32 bit PNG)</span>
<div id="app-banner-container">
{this.state.banner.map((tile) => (
<button onMouseEnter={() => {
console.log("Mouse Entered")
}}>
<img style={{height: '200px', width: '400px'}} src={tile.preview}/>
</button>
<div id="app-image-banner">
<AppImage image={tile.preview}/>
</div>
))}
{this.state.banner.length === 0 ?
<Dropzone

@ -16,9 +16,8 @@
* under the License.
*/
import PropTypes from 'prop-types';
import React, {Component} from 'react';
import {FormGroup, Input, Label, Badge, Button} from 'reactstrap';
import {Badge, Button, FormGroup, Input, Label} from 'reactstrap';
import Dropzone from 'react-dropzone';
import './generalInfo.css';
@ -36,7 +35,7 @@ class GeneralInfo extends Component {
}
render() {
return(
return (
<div className="app-edit-general-info">
<form>
<FormGroup>
@ -151,8 +150,6 @@ class GeneralInfo extends Component {
<img style={{height: '200px', width: '200px'}} src={tile.preview}/>
</button>
))}
</div>
{this.state.icon.length === 0 ?
<Dropzone
className="applicationCreateIconDropZone"
@ -163,6 +160,7 @@ class GeneralInfo extends Component {
>
<p className="applicationCreateIconp">+</p>
</Dropzone> : <div/>}
</div>
</FormGroup>
</div>
<div style={{marginLeft: '15px'}}>

@ -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 (
<div className="image-container" style={this.props.imageStyles}>
<img src={image} style={{width: '100%'}} className="image" id={imageId}/>
<div className="btn-content">
<i className="close-btn" id={imageId} onClick={this.removeImage}>X</i>
</div>
</div>
)
}
}
AppImage.propTypes = {
image: PropTypes.string,
imageId: PropTypes.string,
onRemove: PropTypes.func,
imageStyles: PropTypes.object
};
export default AppImage;

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

@ -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 (
<div>
<div id="app-view" className="app-view-drawer" style={this.props.style}>
<a onClick={this.closeDrawer} className="drawer-close-btn">&times;</a>
{this.props.children}
</div>
</div>
@ -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;

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

@ -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 (
<div id="screenshot-container">
<Row>
{images.map((tile) => (
<input type="image" src={tile[0].preview} onClick=""/>
)
)}
</Row>
{this.state.screenshots.length < maxAmount ?
<Dropzone
className="add-image"
accept="image/jpeg, image/png"
onDrop={(accepted, rejected) => {
this.setImages(accepted);
}}
>
<p className="add-image-symbol">+</p>
</Dropzone> : <div/>}
</div>
);
}
}
ImageUploader.prototypes = {
height: PropTypes.string,
width: PropTypes.string,
accepted: PropTypes.array,
multiple: PropTypes.bool,
maxAmount: PropTypes.number,
setImages: PropTypes.func
};
export default ImageUploader;

@ -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.
*/

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

@ -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 (
<div>
<Row>
<Col>
<div className="notification-app-icon small">
<img/>
</div>
</Col>
<Col>
<p>Your application, Facebook has been published.</p>
</Col>
</Row>
</div>
);
}
}
export default NotificationItem;

@ -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 (
<div id="notification-view-content">
<div>
<Row id="notification-content">
<Col xs="3">
<div className="notification-app-icon medium">
</div>
</Col>
<Col xs="9">
<Row>
<span><strong>Application Name</strong></span>
</Row>
<Row>
<span>Version 1.0</span>
</Row>
<Row>
<p id="app-reject-msg">Your Application was rejected</p>
</Row>
</Col>
</Row>
<hr/>
<Row id="notification-content">
<Col xs="12">
<p>Following validations were detected in your review submission.
Please attend to them and re-submit</p>
<ul>
<li>sdjjfsdfsdfkjs shdfjhlkds hflkhfdslkd </li>
<li>sdfkds jfdsljfklsdfjksdjlksdjdlkf</li>
<li>sfksdf slkjskd jfjds lkfjdsfdsfdslkf sjf lkdsf</li>
<li>skfjslkdjfsdjfjksldjf sdkl jflkds jfkslfjs</li>
<li>ksdf jks;kshflk hlkjhds lkjhdsklhsd lkf</li>
<li> jsdljflksd jfklsdfskljfkjshf;ks ldj</li>
</ul>
</Col>
</Row>
</div>
</div>
);
}
}
export default NotificationView;

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

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

Loading…
Cancel
Save