Created Application View Component with styles.

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/ApplicationListing.jsx

@@ -21,9 +21,9 @@ import React, {Component} from 'react';
 import {withRouter} from 'react-router-dom';
 import AuthHandler from "../../api/authHandler";
 import ApplicationMgtApi from '../../api/applicationMgtApi';
-import {Table} from 'reactstrap';
+import {Button, Table} from 'reactstrap';
 import Drawer from '../UIComponents/Drawer/Drawer';
-import ApplicationEdit from './Edit/Base/ApplicationEditBaseLayout';
+import ApplicationView from './View/ApplicationView';
 
 /**
  * The App Create Component.
@@ -139,7 +139,6 @@ class ApplicationListing extends Component {
     }
 
     componentWillUnmount() {
-        Theme.removeThemingScripts(this.scriptId);
         // this.setState({data: this.data});
     }
 
@@ -207,12 +206,12 @@ class ApplicationListing extends Component {
     onRowClick() {
         console.log("sfsdfsdf");
         let style = {
-            width: '250px',
+            width: '500px',
-            marginLeft: '250px'
+            marginLeft: '500px'
         };
 
         let appListStyle = {
-            marginRight: '250px',
+            marginRight: '500px',
         }
 
         this.setState({drawer: style, appListStyle: appListStyle});
@@ -228,59 +227,57 @@ class ApplicationListing extends Component {
         // this.props.history.push("apps/" + id);
     }
 
-    handleButtonClick(id) {
+    handleButtonClick() {
-        console.log("Application Listing", id);
+        console.log("Application Listing");
-        this.props.history.push("apps/" + id);
+        this.props.history.push("apps/edit/fdsfdsf343");
     }
 
     render() {
         return (
 
             <div id="application-list" style={this.state.appListStyle}>
-                {/*<Table striped hover>*/}
+                <Table striped hover>
-                    {/*<thead>*/}
+                    <thead>
-                    {/*<tr>*/}
+                    <tr>
-                        {/*<th></th>*/}
+                        <th></th>
-                        {/*/!* TODO: Remove console.log and add sort method. *!/*/}
+                        {/* TODO: Remove console.log and add sort method. */}
-                        {/*<th onClick={() => {console.log("sort")}}>Application Name</th>*/}
+                        <th onClick={() => {console.log("sort")}}>Application Name</th>
-                        {/*<th>Category</th>*/}
+                        <th>Category</th>
-                        {/*<th>Platform</th>*/}
+                        <th>Platform</th>
-                        {/*<th>Status</th>*/}
+                        <th>Status</th>
-                        {/*<th></th>*/}
+                        <th></th>
-                    {/*</tr>*/}
+                    </tr>
-                    {/*</thead>*/}
+                    </thead>
-                    {/*<tbody>*/}
+                    <tbody>
-                    {/*{this.applications.map(*/}
+                    {this.applications.map(
-                        {/*(application) => {*/}
+                        (application) => {
-                            {/*return (*/}
+                            return (
-                                {/*<tr key={application.id} onClick={this.onRowClick}>*/}
+                                <tr key={application.id} onClick={this.onRowClick}>
-                                    {/*<td>*/}
+                                    <td>
-                                        {/*/!* TODO: Move this styles to css. *!/*/}
+                                        {/* TODO: Move this styles to css. */}
-                                        {/*<img*/}
+                                        <img
-                                            {/*src={application.icon}*/}
+                                            src={application.icon}
-                                            {/*height='50px'*/}
+                                            height='50px'
-                                            {/*width='50px'*/}
+                                            width='50px'
-                                            {/*style={{border: 'solid 1px black', borderRadius: "100%"}}*/}
+                                            style={{border: 'solid 1px black', borderRadius: "100%"}}
-                                        {/*/></td>*/}
+                                        /></td>
-                                    {/*<td>{application.applicationName}</td>*/}
+                                    <td>{application.applicationName}</td>
-                                    {/*<td>{application.category}</td>*/}
+                                    <td>{application.category}</td>
-                                    {/*<td>{application.platform}</td>*/}
+                                    <td>{application.platform}</td>
-                                    {/*<td>{application.status}</td>*/}
+                                    <td>{application.status}</td>
-                                    {/*<td><i>Edit</i></td>*/}
+                                    <td><Button onClick={this.handleButtonClick}>Edit</Button></td>
-                                {/*</tr>*/}
+                                </tr>
-                            {/*)*/}
+                            )
-                        {/*}*/}
+                        }
-                    {/*)}*/}
+                    )}
-                    {/*</tbody>*/}
+                    </tbody>
-                {/*</Table>*/}
+                </Table>
 
-                <ApplicationEdit/>
+                {/*<ApplicationEdit/>*/}
 
 
                 <Drawer style={this.state.drawer}>
-                    <div id="application-view">
+                    <ApplicationView/>
-
-                    </div>
                 </Drawer>
             </div>
         );

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/ApplicationView.jsx

@@ -1,71 +0,0 @@
-/*
- * 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 {withRouter} from 'react-router-dom';
-import IconButton from 'material-ui/IconButton'
-import Create from 'material-ui/svg-icons/content/create';
-
-/**
- * Application view component.
- * Shows the details of the application.
- * */
-class ApplicationView extends Component{
-    constructor() {
-        super();
-        this.state = {
-            application: {}
-        }
-    }
-
-    componentWillReceiveProps(props, nextProps) {
-        this.setState({application: props.application});
-        console.log(props.application, nextProps)
-    }
-
-    componentDidMount() {
-        //Download image artifacts.
-        // this.setState({application: this.props.application});
-    }
-
-    handleEdit() {
-        this.props.history.push("/assets/apps/edit/" + this.state.application.uuid);
-    }
-
-    render() {
-        const platform = this.state.application;
-        console.log(platform);
-
-        return (
-            <div>
-
-                <label>Application Name : {this.state.application.name}</label>
-                <br/>
-                <label>Description: {this.state.application.description}</label>
-                <br/>
-
-                <IconButton onClick={this.handleEdit.bind(this)}>
-                    <Create/>
-                </IconButton>
-
-            </div>
-        );
-    }
-}
-
-export default withRouter(ApplicationView);

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Edit/Base/ApplicationEditBaseLayout.jsx

@@ -16,11 +16,11 @@
  * under the License.
  */
 
-import React, {Component} from 'react';
 import './baseLayout.css';
-import ReleaseManager from '../../Release/ReleaseMgtBase/ReleaseManager';
 import {Col, Row} from "reactstrap";
+import React, {Component} from 'react';
 import GeneralInfo from "../GeneralInfo";
+import ReleaseManager from '../../Release/ReleaseMgtBase/ReleaseManager';
 
 class ApplicationEdit extends Component {
 

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/View/ApplicationView.jsx

@@ -0,0 +1,124 @@
+/*
+ * 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 {withRouter} from 'react-router-dom';
+import {Col, Row} from "reactstrap";
+import './applicationView.css';
+
+/**
+ * Application view component.
+ * Shows the details of the application.
+ * */
+class ApplicationView extends Component {
+    constructor() {
+        super();
+        this.state = {
+            application: {}
+        }
+    }
+
+    componentWillReceiveProps(props, nextProps) {
+        this.setState({application: props.application});
+        console.log(props.application, nextProps)
+    }
+
+    componentDidMount() {
+        //Download image artifacts.
+        // this.setState({application: this.props.application});
+    }
+
+    handleEdit() {
+        this.props.history.push("/assets/apps/edit/" + this.state.application.uuid);
+    }
+
+    render() {
+        const platform = this.state.application;
+        console.log(platform);
+
+        return (
+            <div id="application-view-content">
+                <div id="application-view-row">
+                    <Row>
+                        <Col>
+                            <div id="app-icon">
+
+                            </div>
+                        </Col>
+                        <Col>
+                            <Row>
+                                <span><strong>Facebook</strong></span>
+                            </Row>
+                            <Row>
+                                <span className="app-updated-date">Last updated on 2017-09-23</span>
+                            </Row>
+                        </Col>
+                    </Row>
+                </div>
+                <div id="application-view-row">
+                    <Row>
+                        <Col>
+                            <span className="app-install-count">2k Installs</span>
+                        </Col>
+                    </Row>
+                    <Row>
+                        <Col>Rating</Col>
+                        <Col>View in Store</Col>
+                    </Row>
+                </div>
+                <hr/>
+                <div id="application-view-row">
+                    <Row>
+                        <Col>
+                            <span><strong>Description: </strong></span>
+                        </Col>
+                        <Col>
+                            <p>sdfjlkdsjfsjdfjsdf sfjdslkjfdsflkjdsfslkdjfl j</p>
+                        </Col>
+                    </Row>
+                    <Row>
+                        <Col>
+                            <span><strong>Tags: </strong></span>
+                        </Col>
+                        <Col>
+                            <p>[list of tags...]</p>
+                        </Col>
+                    </Row>
+                    <Row>
+                        <Col>
+                            <span><strong>Release: </strong></span>
+                        </Col>
+                        <Col>
+                            <p>Production</p>
+                        </Col>
+                    </Row>
+                    <Row>
+                        <Col>
+                            <span><strong>Version: </strong></span>
+                        </Col>
+                        <Col>
+                            <p>v1.0</p>
+                        </Col>
+                    </Row>
+                </div>
+            </div>
+        );
+    }
+}
+
+export default withRouter(ApplicationView);

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/View/applicationView.css

@@ -0,0 +1,56 @@
+/*
+ * 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.
+ */
+
+
+#application-view-content {
+    width: 100%;
+}
+
+#application-view-row {
+    margin: 10px 10px 20px 20px;
+}
+
+#app-icon {
+    height: 100px;
+    width: 100px;
+    border: solid 1px black;
+    border-radius: 50%;
+}
+
+.app-updated-date {
+    color: #888888;
+    font-style: italic;
+}
+
+.app-install-count {
+    font-style: italic;
+}
+
+.app-details-tbl {
+    outline: none;
+    border-color: #2196F3;
+}
+
+.app-details-tbl tr {
+    margin: 20px 0 0 0;
+}
+
+.app-details-tbl td {
+    margin-left: 10px;
+    max-width: 400px;
+}

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/Drawer/Drawer.jsx

@@ -20,14 +20,15 @@ import PropTypes from 'prop-types';
 import React, {Component} from 'react';
 import './drawer.css';
 
-
+/**
-
+ * Custom React component for Application View.
+ * */
 class Drawer extends Component {
 
     render() {
         return (
             <div>
-                <div id="mySidenav" className="sidenav" style={this.props.style}>
+                <div id="app-view" className="app-view-drawer" style={this.props.style}>
                     {this.props.children}
                 </div>
             </div>

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/Drawer/drawer.css

@@ -16,21 +16,22 @@
  * under the License.
  */
 
-.sidenav {
+.app-view-drawer {
     height: 100%; /* 100% Full-height */
     width: 0; /* 0 width - change this with JavaScript */
     position: fixed; /* Stay in place */
     z-index: 1; /* Stay on top */
-    top: 11%;
+    top: 10%;
     right: 0%;
-    background-color: white;
+    background-color: #b5b5b5;
     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);
 }
 
-.sidenav a {
+.app-view-drawer a {
     padding: 8px 8px 8px 32px;
     text-decoration: none;
     font-size: 25px;
@@ -39,13 +40,9 @@
     transition: 0.3s
 }
 
-/* When you mouse over the navigation links, change their color */
-.sidenav a:hover, .offcanvas a:focus{
-    color: #f1f1f1;
-}
 
 /* Position and style the close button (top right corner) */
-.sidenav .closebtn {
+.app-view-drawer .closebtn {
     position: absolute;
     top: 0;
     right: 25px;

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/index.css

@@ -114,6 +114,7 @@ body {
 
 #application-list {
     margin-top: 20px;
+    transition: margin-right .5s;
 }
 
 .applicationCreateBannerDropZone {