From 8ee0bd04046b848b19493399f75aa3588a400650 Mon Sep 17 00:00:00 2001 From: Menaka Jayawardena Date: Sat, 23 Sep 2017 00:56:52 +0530 Subject: [PATCH] Created Application View Component with styles. --- .../Application/ApplicationListing.jsx | 95 +++++++------- .../Application/ApplicationView.jsx | 71 ---------- .../Edit/Base/ApplicationEditBaseLayout.jsx | 4 +- .../Application/View/ApplicationView.jsx | 124 ++++++++++++++++++ .../Application/View/applicationView.css | 56 ++++++++ .../components/UIComponents/Drawer/Drawer.jsx | 7 +- .../components/UIComponents/Drawer/drawer.css | 15 +-- .../main/resources/publisher/src/index.css | 1 + 8 files changed, 239 insertions(+), 134 deletions(-) delete mode 100644 components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/ApplicationView.jsx create mode 100644 components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/View/ApplicationView.jsx create mode 100644 components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/View/applicationView.css 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 90516bcee7..93f5c0f977 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,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', - marginLeft: '250px' + width: '500px', + 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) { - console.log("Application Listing", id); - this.props.history.push("apps/" + id); + handleButtonClick() { + console.log("Application Listing"); + this.props.history.push("apps/edit/fdsfdsf343"); } render() { return (
- {/**/} - {/**/} - {/**/} - {/**/} - {/*/!* TODO: Remove console.log and add sort method. *!/*/} - {/**/} - {/**/} - {/**/} - {/**/} - {/**/} - {/**/} - {/**/} - {/**/} - {/*{this.applications.map(*/} - {/*(application) => {*/} - {/*return (*/} - {/**/} - {/**/} - {/**/} - {/**/} - {/**/} - {/**/} - {/**/} - {/**/} - {/*)*/} - {/*}*/} - {/*)}*/} - {/**/} - {/*
{console.log("sort")}}>Application NameCategoryPlatformStatus
*/} - {/*/!* TODO: Move this styles to css. *!/*/} - {/*{application.applicationName}{application.category}{application.platform}{application.status}Edit
*/} + + + + + {/* TODO: Remove console.log and add sort method. */} + + + + + + + + + {this.applications.map( + (application) => { + return ( + + + + + + + + + ) + } + )} + +
{console.log("sort")}}>Application NameCategoryPlatformStatus
+ {/* TODO: Move this styles to css. */} + {application.applicationName}{application.category}{application.platform}{application.status}
- + {/**/} -
- -
+
); diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/ApplicationView.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/ApplicationView.jsx deleted file mode 100644 index b6e7111abb..0000000000 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/ApplicationView.jsx +++ /dev/null @@ -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 ( -
- - -
- -
- - - - - -
- ); - } -} - -export default withRouter(ApplicationView); diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Edit/Base/ApplicationEditBaseLayout.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Edit/Base/ApplicationEditBaseLayout.jsx index 1962659fbf..8776efafd8 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Edit/Base/ApplicationEditBaseLayout.jsx +++ b/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 { diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/View/ApplicationView.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/View/ApplicationView.jsx new file mode 100644 index 0000000000..f4e6656d36 --- /dev/null +++ b/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 ( +
+
+ + +
+ +
+ + + + Facebook + + + Last updated on 2017-09-23 + + + +
+
+ + + 2k Installs + + + + Rating + View in Store + +
+
+
+ + + Description: + + +

sdfjlkdsjfsjdfjsdf sfjdslkjfdsflkjdsfslkdjfl j

+ + + + + Tags: + + +

[list of tags...]

+ + + + + Release: + + +

Production

+ + + + + Version: + + +

v1.0

+ + +
+
+ ); + } +} + +export default withRouter(ApplicationView); diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/View/applicationView.css b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/View/applicationView.css new file mode 100644 index 0000000000..8d5dfd100c --- /dev/null +++ b/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; +} 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 966d8f7ce0..7c700d79d6 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 @@ -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 (
-
+
{this.props.children}
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 cf32a9e7d9..9f0cb7594a 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 @@ -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; 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 32f3c298a8..6c904f70dd 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 @@ -114,6 +114,7 @@ body { #application-list { margin-top: 20px; + transition: margin-right .5s; } .applicationCreateBannerDropZone {