{this.state.screenshots.map((tile) => (
-
+ (512 X 512 32 bit PNG)
: }
+
+
+
))}
{this.state.screenshots.length < 3 ?
{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.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 00000000000..e4e8f09cc25
--- /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 (
+
@@ -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 9f0cb7594a9..e1281614a52 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 00000000000..3f719e47459
--- /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 (
+
+ 
+
+ )
+ }
+}
+
+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 00000000000..2747960b965
--- /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 7c700d79d6e..9a419ccc180 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 (
+ X
+
+
+ ×
{this.props.children}
+
+ {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 00000000000..80d34ae7e23
--- /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 127a39cf96f..2a07f15b251 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 00000000000..8fd19e88f4d
--- /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 (
+ +
+
+
+
+
+ );
+ }
+}
+
+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 00000000000..bfcade671b4
--- /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 (
+
+ ![]()
+
+
+ Your application, Facebook has been published.
+ +
+
+ );
+ }
+}
+
+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 00000000000..dbaeef53275
--- /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 6c904f70dd3..61cbab76f9b 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;
}
+
+
+ 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 +