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

merge-requests/281/head
Jayasanka 5 years ago
parent 11610d3635
commit cd374ab350

@ -17,10 +17,11 @@
*/ */
import React from "react"; 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 AppsTable from "./appsTable/AppsTable";
import Filters from "./Filters"; import Filters from "./Filters";
import AppDetailsDrawer from "./AppDetailsDrawer/AppDetailsDrawer"; import AppDetailsDrawer from "./AppDetailsDrawer/AppDetailsDrawer";
import axios from "axios";
const {Title} = Typography; const {Title} = Typography;
const Search = Input.Search; 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() { render() {
const {isDrawerVisible, filters} = this.state; const {isDrawerVisible, filters} = this.state;
return ( return (

@ -27,6 +27,8 @@ class Apps extends React.Component {
} }
render() { render() {
return ( return (
<div> <div>

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

@ -19,7 +19,7 @@
import {Card, Typography, Col, Row} from 'antd'; import {Card, Typography, Col, Row} from 'antd';
import React from "react"; import React from "react";
import {Link} from "react-router-dom"; import {Link} from "react-router-dom";
import "../../App.css"; import "./AppCard.css";
import StarRatings from 'react-star-ratings'; import StarRatings from 'react-star-ratings';
const {Meta} = Card; const {Meta} = Card;
@ -29,11 +29,6 @@ class AppCard extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.handleReleasesClick = this.handleReleasesClick.bind(this);
}
handleReleasesClick() {
this.props.openReleasesModal(this.props.app);
} }
render() { render() {
@ -45,12 +40,17 @@ class AppCard extends React.Component {
<Link to={"/store/"+app.deviceType+"/apps/" + release.uuid}> <Link to={"/store/"+app.deviceType+"/apps/" + release.uuid}>
<Row className="release"> <Row className="release">
<Col span={24} className="release-icon"> <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} />*/} {/*<Avatar shape="square" size={128} src={release.iconPath} />*/}
</Col> </Col>
<Col span={24}> <Col span={24} style={{paddingTop:10}}>
<Text strong level={4}>{app.name}</Text><br/> <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 <StarRatings
rating={app.rating} rating={app.rating}
starRatedColor="#777" starRatedColor="#777"

Loading…
Cancel
Save