Fix icon size & change paddings of the tile in APPM store

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 (

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 (
             <div>

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%;
+}

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 {
                 <Link to={"/store/"+app.deviceType+"/apps/" + release.uuid}>
                     <Row className="release">
                         <Col span={24} className="release-icon">
-                            <img src={release.iconPath} alt="icon"/>
+                            <div className='box'>
+                                <div className='content'>
+                                    <img className='app-icon' src={release.iconPath} alt="icon"/>
+                                </div>
+                            </div>
+                            {/*<img src={release.iconPath} alt="icon"/>*/}
                             {/*<Avatar shape="square" size={128} src={release.iconPath} />*/}
                         </Col>
-                        <Col span={24}>
+                        <Col span={24} style={{paddingTop:10}}>
                             <Text strong level={4}>{app.name}</Text><br/>
-                            <Text type="secondary" level={4}>{app.deviceType}</Text><br/>
+                            <Text type="secondary" level={4}>{app.subMethod.toLowerCase()}</Text><br/>
                             <StarRatings
                                 rating={app.rating}
                                 starRatedColor="#777"