Showing download count of extensions, make empty rating stars less attractive (#742)

* Showing download count of extensions instead of average rating counts on main page, make empty rating stars less attractive

* made empty stars as grey stars, added download icon before download counts

* make half star icon grey, remove brackets outside download counts

Author: yiningwang11

webui/src/pages/extension-detail/extension-rating-stars.tsx

@@ -10,15 +10,28 @@
 
 import * as React from 'react';
 import StarIcon from '@material-ui/icons/Star';
-import StarBorderIcon from '@material-ui/icons/StarBorder';
 import StarHalfIcon from '@material-ui/icons/StarHalf';
+import { Theme, WithStyles, createStyles, withStyles } from '@material-ui/core';
 
-interface ExportRatingStarsProps {
+const starStyles = (theme: Theme) => createStyles({
+    wrapper: {
+        position: 'relative',
+        display: 'inline-block',
+      },
+    topIcon: {
+        position: 'absolute',
+      },
+    bottomIcon: {
+        display: 'block',
+      }
+});
+
+interface ExportRatingStarsProps extends WithStyles<typeof starStyles>{
     number: number;
     fontSize?: 'inherit' | 'default' | 'small' | 'large';
 }
 
-export class ExportRatingStars extends React.Component<ExportRatingStarsProps> {
+class ExportRatingStarsComponent extends React.Component<ExportRatingStarsProps> {
     render(): React.ReactNode {
         return <React.Fragment>
             {this.getStar(1)}{this.getStar(2)}{this.getStar(3)}{this.getStar(4)}{this.getStar(5)}
@@ -32,8 +45,13 @@ export class ExportRatingStars extends React.Component<ExportRatingStarsProps> {
             return <StarIcon fontSize={fontSize}/>;
         }
         if (i > starsNumber && i - 1 < starsNumber) {
-            return <StarHalfIcon fontSize={fontSize}/>;
+            return <span className={this.props.classes.wrapper}>
+                <StarHalfIcon fontSize={fontSize} className={this.props.classes.topIcon}/>
+                <StarIcon style={{ color: '#bcbcbc' }} fontSize={fontSize} className={this.props.classes.bottomIcon}/>
+            </span>;
         }
-        return <StarBorderIcon fontSize={fontSize}/>;
+        return <StarIcon style={{ color: '#bcbcbc' }} fontSize={fontSize}/>;
     }
 }
+
+export const ExportRatingStars = withStyles(starStyles)(ExportRatingStarsComponent);

webui/src/pages/extension-list/extension-list-item.tsx

@@ -12,6 +12,7 @@ import * as React from 'react';
 import { Link as RouteLink } from 'react-router-dom';
 import { Paper, Typography, Box, Grid, Fade } from '@material-ui/core';
 import { withStyles, createStyles, WithStyles, Theme } from '@material-ui/core/styles';
+import SaveAltIcon from '@material-ui/icons/SaveAlt';
 import { MainContext } from '../../context';
 import { ExtensionDetailRoutes } from '../extension-detail/extension-detail';
 import { SearchEntry } from '../../extension-registry-types';
@@ -90,7 +91,7 @@ class ExtensionListItemComponent extends React.Component<ExtensionListItemCompon
         const { icon } = this.state;
         const route = createRoute([ExtensionDetailRoutes.ROOT, extension.namespace, extension.name]);
         const numberFormat = new Intl.NumberFormat(undefined, { notation: 'compact', compactDisplay: 'short' } as any);
-        const reviewCountFormatted = numberFormat.format(extension.reviewCount || 0);
+        const downloadCountFormatted = numberFormat.format(extension.downloadCount || 0);
         return <React.Fragment>
             <Fade in={true} timeout={{ enter: ((this.props.filterSize + this.props.idx) % this.props.filterSize) * 200 }}>
                 <Grid item xs={12} sm={3} md={2} title={extension.displayName || extension.name} className={classes.extensionCard}>
@@ -116,7 +117,8 @@ class ExtensionListItemComponent extends React.Component<ExtensionListItemCompon
                             </Box>
                             <Box display='flex' justifyContent='center'>
                                 <ExportRatingStars number={extension.averageRating || 0} fontSize='small'/>
-                                ({reviewCountFormatted})
+                                &nbsp;
+                                {downloadCountFormatted != "0" && <><SaveAltIcon/> {downloadCountFormatted}</>}
                             </Box>
                         </Paper>
                     </RouteLink>