From cd374ab350a887f2645d32b0c4799e99a70432be Mon Sep 17 00:00:00 2001 From: Jayasanka Date: Sat, 5 Oct 2019 18:42:15 +0530 Subject: [PATCH] Fix icon size & change paddings of the tile in APPM store --- .../src/components/apps/list-apps/ListApps.js | 65 ++++++++++++++++++- .../src/pages/dashboard/apps/Apps.js | 2 + .../react-app/src/components/apps/AppCard.css | 49 ++++++++++++++ .../react-app/src/components/apps/AppCard.js | 18 ++--- 4 files changed, 124 insertions(+), 10 deletions(-) create mode 100644 components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/AppCard.css diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/list-apps/ListApps.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/list-apps/ListApps.js index 803d4bbeb01..d5639cea70a 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/list-apps/ListApps.js +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/list-apps/ListApps.js @@ -17,10 +17,11 @@ */ import React from "react"; -import {Card, Col, Row, Typography, Input, Divider} from "antd"; +import {Card, Col, Row, Typography, Input, Divider, notification} from "antd"; import AppsTable from "./appsTable/AppsTable"; import Filters from "./Filters"; import AppDetailsDrawer from "./AppDetailsDrawer/AppDetailsDrawer"; +import axios from "axios"; const {Title} = Typography; const Search = Input.Search; @@ -51,6 +52,68 @@ class ListApps extends React.Component { }); }; + getCategories = () => { + const config = this.props.context; + axios.get( + window.location.origin+ config.serverConfig.invoker.uri + config.serverConfig.invoker.publisher + "/applications/categories" + ).then(res => { + if (res.status === 200) { + let categories = JSON.parse(res.data.data); + this.getTags(); + this.setState({ + categories: categories, + loading: false + }); + } + + }).catch((error) => { + if (error.hasOwnProperty("response") && error.response.status === 401) { + window.location.href = window.location.origin+ '/publisher/login'; + } else { + notification["error"]({ + message: "There was a problem", + duration: 0, + description: + "Error occurred while trying to load categories.", + }); + } + this.setState({ + loading: false + }); + }); + }; + + getTags = () => { + const config = this.props.context; + axios.get( + window.location.origin+ config.serverConfig.invoker.uri + config.serverConfig.invoker.publisher + "/applications/tags" + ).then(res => { + if (res.status === 200) { + let tags = JSON.parse(res.data.data); + this.getDeviceTypes(); + this.setState({ + tags: tags, + loading: false, + }); + } + + }).catch((error) => { + if (error.hasOwnProperty("response") && error.response.status === 401) { + window.location.href = window.location.origin+ '/publisher/login'; + } else { + notification["error"]({ + message: "There was a problem", + duration: 0, + description: + "Error occurred while trying to load tags.", + }); + } + this.setState({ + loading: false + }); + }); + }; + render() { const {isDrawerVisible, filters} = this.state; return ( diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/apps/Apps.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/apps/Apps.js index 248fca92aee..de480c0c5d6 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/apps/Apps.js +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/apps/Apps.js @@ -27,6 +27,8 @@ class Apps extends React.Component { } + + render() { return (
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/AppCard.css b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/AppCard.css new file mode 100644 index 00000000000..c976ceb6d32 --- /dev/null +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/AppCard.css @@ -0,0 +1,49 @@ +/* + * Copyright (c) 2019, Entgra (pvt) Ltd. (http://entgra.io) All Rights Reserved. + * + * Entgra (pvt) Ltd. 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. + */ +.app-icon { + min-width: 100%; + height: auto; +} + +.content { + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; +} + +.box { + position: relative; + width: 100%; /* desired width */ +} + +.box:before { + content: ""; + display: block; + padding-top: 100%; /* initial ratio of 1:1*/ +} + +.release .release-icon { + margin-right: 15px; +} + +.release .release-icon img { + width: 100%; + border-radius: 28%; +} diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/AppCard.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/AppCard.js index d18aa40bbfa..bd8f43582da 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/AppCard.js +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/AppCard.js @@ -19,7 +19,7 @@ import {Card, Typography, Col, Row} from 'antd'; import React from "react"; import {Link} from "react-router-dom"; -import "../../App.css"; +import "./AppCard.css"; import StarRatings from 'react-star-ratings'; const {Meta} = Card; @@ -29,11 +29,6 @@ class AppCard extends React.Component { constructor(props) { super(props); - this.handleReleasesClick = this.handleReleasesClick.bind(this); - } - - handleReleasesClick() { - this.props.openReleasesModal(this.props.app); } render() { @@ -45,12 +40,17 @@ class AppCard extends React.Component { - icon +
+
+ icon +
+
+ {/*icon*/} {/**/} - + {app.name}
- {app.deviceType}
+ {app.subMethod.toLowerCase()}