merge-requests/7/head
Menaka Jayawardena
7 years ago
parent
8ee0bd0404
commit
60310d3ca1
@ -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;
|
||||||
|
}
|
||||||
@ -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.
|
||||||
|
*/
|
||||||
|
|
||||||
@ -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;
|
||||||
|
}
|
||||||
Loading…
Reference in new issue