Add minor UI fixes to APPM UI

The following changes are with this commit
- Display wrong credentials error in Login form
- Display tags and categories in APPM store release view
4.x.x
Jayasanka Weerasinghe 5 years ago committed by Dharmakeerthi Lasantha
parent a2ceef5e84
commit 85890e9036

@ -30,7 +30,7 @@ import {
Spin,
message,
Icon,
Card, Badge
Card, Badge, Tooltip, Popover
} from 'antd';
import DetailedRating from "../../detailed-rating/DetailedRating";
import {Link} from "react-router-dom";
@ -486,7 +486,6 @@ class AppDetailsDrawer extends React.Component {
<Divider dashed={true}/>
</div>
)}
<Text strong={true}>Releases </Text>
<div className="releases-details">
<List
@ -500,48 +499,55 @@ class AppDetailsDrawer extends React.Component {
renderItem={release => (
<div className="app-release-cards">
<List.Item>
<Link to={"apps/releases/" + release.uuid}>
<Card className="release-card">
<Meta
avatar={
<div>
{(release.currentStatus === "PUBLISHED") ? (
<Badge
title="Published"
style={{
backgroundColor: '#52c41a',
borderRadius: "50%",
color: "white"
}}
count={
<Icon
type="check-circle"/>
}>
<Tooltip title="Click to view full details"
placement="topRight">
<Link to={"apps/releases/" + release.uuid}>
<Card className="release-card">
<Meta
avatar={
<div>
{(release.currentStatus === "PUBLISHED") ? (
<Badge
title="Published"
count={
<Tooltip
title="Published">
<Icon
style={{
backgroundColor: '#52c41a',
borderRadius: "50%",
color: "white"
}}
type="check-circle"/>
</Tooltip>
}>
<Avatar size="large" shape="square"
src={release.iconPath}/>
</Badge>
) : (
<Avatar size="large" shape="square"
src={release.iconPath}/>
</Badge>
) : (
<Avatar size="large" shape="square"
src={release.iconPath}/>
)}
</div>
}
title={release.version}
description={
<div style={{
fontSize: "0.7em"
}} className="description-view">
<IconText type="check" text={release.currentStatus}/>
<Divider type="vertical"/>
<IconText type="upload" text={release.releaseType}/>
<Divider type="vertical"/>
<IconText type="star-o"
text={release.rating.toFixed(1)}/>
</div>
}
/>
</Card>
</Link>
)}
</div>
}
title={release.version}
description={
<div style={{
fontSize: "0.7em"
}} className="description-view">
<IconText type="check"
text={release.currentStatus}/>
<Divider type="vertical"/>
<IconText type="upload" text={release.releaseType}/>
<Divider type="vertical"/>
<IconText type="star-o"
text={release.rating.toFixed(1)}/>
</div>
}
/>
</Card>
</Link>
</Tooltip>
</List.Item>
</div>
)}

@ -17,7 +17,7 @@
*/
import React from "react";
import {Avatar, Table, Tag, Icon, message, notification, Col, Badge, Alert} from "antd";
import {Avatar, Table, Tag, Icon, message, notification, Col, Badge, Alert, Tooltip} from "antd";
import axios from "axios";
import pSBC from 'shade-blend-color';
import "./AppsTable.css";
@ -60,8 +60,16 @@ const columns = [
title="Published"
style={{backgroundColor: '#52c41a', borderRadius: "50%", color: "white"}}
count={
<Icon
type="check-circle"/>
<Tooltip
title="Published">
<Icon
style={{
backgroundColor: '#52c41a',
borderRadius: "50%",
color: "white"
}}
type="check-circle"/>
</Tooltip>
}>
<Avatar shape="square" size="large"
style={{

@ -17,10 +17,10 @@
*/
import React from "react";
import {Button, Col, Form, Icon, Input, Row, Select, Switch, Upload, InputNumber, Modal, Alert} from "antd";
import {Button, Col, Form, Icon, Input, Row, Select, Switch, Upload, Typography, Modal, Alert} from "antd";
import "@babel/polyfill";
import axios from "axios";
import {handleApiError} from "../../../js/Utils";
const {Text} = Typography;
const formItemLayout = {
labelCol: {
@ -196,12 +196,6 @@ class NewAppUploadForm extends React.Component {
});
};
handlePriceTypeChange = (value) => {
this.setState({
isFree: (value === 'free')
});
};
handlePreviewCancel = () => this.setState({previewVisible: false});
handlePreview = async file => {
if (!file.url && !file.preview) {
@ -231,7 +225,7 @@ class NewAppUploadForm extends React.Component {
handleUpperOsVersionChange = (upperOsVersion) => {
if (upperOsVersion === "all") {
this.upperOsVersion = this.props.supportedOsVersions[this.props.supportedOsVersions.length - 1]["versionName"];
}else{
} else {
this.upperOsVersion = upperOsVersion;
}
this.setState({
@ -247,7 +241,6 @@ class NewAppUploadForm extends React.Component {
icons,
screenshots,
binaryFiles,
isFree,
previewImage,
previewVisible,
binaryFileHelperText,
@ -310,17 +303,19 @@ class NewAppUploadForm extends React.Component {
required: true,
message: 'Please select a icon'
})(
<Upload
name="logo"
listType="picture-card"
onChange={this.handleIconChange}
beforeUpload={() => false}
onPreview={this.handlePreview}>
{icons.length === 1 ? null : uploadButton}
</Upload>,
<div>
<Upload
name="logo"
listType="picture-card"
onChange={this.handleIconChange}
beforeUpload={() => false}
onPreview={this.handlePreview}>
{icons.length === 1 ? null : uploadButton}
</Upload>
<Text>Recommended : 240px x 240px</Text>
</div>
)}
</Form.Item>
<Form.Item {...formItemLayout}
label="Screenshots"
validateStatus="error"
@ -331,14 +326,17 @@ class NewAppUploadForm extends React.Component {
required: true,
message: 'Please select a icon'
})(
<Upload
name="screenshots"
listType="picture-card"
onChange={this.handleScreenshotChange}
beforeUpload={() => false}
onPreview={this.handlePreview}>
{screenshots.length >= 3 ? null : uploadButton}
</Upload>,
<div>
<Upload
name="screenshots"
listType="picture-card"
onChange={this.handleScreenshotChange}
beforeUpload={() => false}
onPreview={this.handlePreview}>
{screenshots.length >= 3 ? null : uploadButton}
</Upload>
<Text>Required 3 screenshots, Recommended min. 320px max. 3840px</Text>
</div>
)}
</Form.Item>

Loading…
Cancel
Save