Infrastructure/verdaccio
0
Fork 0
mirror of https://github.com/verdaccio/verdaccio.git synced 2025-01-06 22:40:26 -05:00
Code Issues Activity

refactor: package list [WIP]

Browse source
This commit is contained in:
Ayush Sharma 2019-02-28 23:12:38 +01:00
parent aec337719e
commit f85479bc10
3 changed files with 107 additions and 84 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

119
src/webui/components/Package/index.js
View file

@ -49,20 +49,32 @@ import {
} from './styles'; } from './styles';
import { fontWeight } from '../../utils/styles/sizes'; import { fontWeight } from '../../utils/styles/sizes';
const getInitialsName = (name: string) => // const getInitialsName = (name: string) =>
name // name
.split(' ') // .split(' ')
.reduce((accumulator, currentValue) => accumulator.charAt(0) + currentValue.charAt(0), '') // .reduce((accumulator, currentValue) => accumulator.charAt(0) + currentValue.charAt(0), '')
.toUpperCase(); // .toUpperCase();
const Package = ({ name: label, version, dist: { unpackedSize } = {}, time, author: { name, avatar }, description, license, keywords = [] }: IProps): Element<WrapperLink> => { const Package = ({
console.log(unpackedSize); name: label,
const renderVersionInfo = () => version && ( version,
<OverviewItem> dist: { unpackedSize } = {},
<Icon name={'version'} /> time,
{`v${version}`} author: { name, avatar },
</OverviewItem> description,
); license,
keywords = [],
homepage,
bugs,
}: IProps): Element<WrapperLink> => {
console.log(homepage);
const renderVersionInfo = () =>
version && (
<OverviewItem>
<Icon name={'version'} />
{`v${version}`}
</OverviewItem>
);
const renderAuthorInfo = () => { const renderAuthorInfo = () => {
return ( return (
@ -73,19 +85,16 @@ const Package = ({ name: label, version, dist: { unpackedSize } = {}, time, auth
</Details> </Details>
</Author> </Author>
); );
<<<<<<< HEAD
};
=======
} }
const renderFileSize = () => unpackedSize && ( const renderFileSize = () =>
<OverviewItem> unpackedSize && (
<Icon name={'filebinary'} /> <OverviewItem>
{fileSizeSI(unpackedSize)} <Icon name={'filebinary'} />
</OverviewItem> {fileSizeSI(unpackedSize)}
); </OverviewItem>
);
>>>>>>> b4b8d6b0... wip
const renderLicenseInfo = () => const renderLicenseInfo = () =>
license && ( license && (
<OverviewItem> <OverviewItem>
@ -137,34 +146,50 @@ const Package = ({ name: label, version, dist: { unpackedSize } = {}, time, auth
</Tag> </Tag>
)); ));
const renderHomePageLink = () =>
homepage && (
<a href={homepage} target="_blank">
<Tooltip title="Visit homepage" aria-label="Add">
<IconButton aria-label="Report" style={{ padding: '6px' }}>
<HomeIcon fontSize="small" style={{ fontSize: '16px' }} />
</IconButton>
</Tooltip>
</a>
);
const renderBugsLink = () =>
bugs &&
bugs.url && (
<a href={bugs.url} target="_blank">
<Tooltip title="Open an issue" aria-label="Add">
<IconButton aria-label="Report" style={{ padding: '6px' }}>
<BugReport fontSize="small" style={{ fontSize: '16px' }} />
</IconButton>
</Tooltip>
</a>
);
return ( return (
<List style={{ padding: '12px 0 12px 0'}}> <List style={{ padding: '12px 0 12px 0' }}>
<ListItem alignItems="flex-start"> <ListItem alignItems="flex-start">
{/* <ListItemAvatar> <ListItemText
<Avatar2 alt="Remy Sharp" src="/static/images/avatar/1.jpg" /> component="div"
</ListItemAvatar> */} style={{ paddingRight: 0 }}
<ListItemText component="div" style={{ paddingRight: 0}}
primary={ primary={
<Grid item xs={12} container> <Grid item xs={12} container>
<Grid item xs> <Grid item xs>
<PackageName>{label}</PackageName> <WrapperLink to={`/-/web/detail/${label}`}>
<PackageName>{label}</PackageName>
</WrapperLink>
</Grid> </Grid>
<Grid item xs style={{ textAlign: "right" }}> <Grid item xs style={{ textAlign: 'right' }}>
<Tooltip title="Visit homepage" aria-label="Add"> {renderHomePageLink()}
<IconButton aria-label="Report" style={{ padding: '6px' }}> {renderBugsLink()}
<HomeIcon fontSize="small" style={{ fontSize: '16px' }} /> {/* <Tooltip title="Pin it" aria-label="Add">
</IconButton> <IconButton aria-label="Report" style={{ padding: '6px' }}>
</Tooltip> <BookmarkBorder fontSize="small" style={{ fontSize: '16px' }} />
<Tooltip title="Open an issue" aria-label="Add"> </IconButton>
<IconButton aria-label="Report" style={{ padding: '6px' }}> </Tooltip> */}
<BugReport fontSize="small" style={{ fontSize: '16px' }} />
</IconButton>
</Tooltip>
<Tooltip title="Pin it" aria-label="Add">
<IconButton aria-label="Report" style={{ padding: '6px' }}>
<BookmarkBorder fontSize="small" style={{ fontSize: '16px' }} />
</IconButton>
</Tooltip>
</Grid> </Grid>
</Grid> </Grid>
} }
@ -173,9 +198,7 @@ const Package = ({ name: label, version, dist: { unpackedSize } = {}, time, auth
<Typography component="span" style={{ color: '#586069', fontSize: '14px', paddingRight: 0 }}> <Typography component="span" style={{ color: '#586069', fontSize: '14px', paddingRight: 0 }}>
{description} {description}
</Typography> </Typography>
{tags.length > 0 && <span style={{ marginTop: '8px', display: 'block' }}> {tags.length > 0 && <span style={{ marginTop: '8px', display: 'block' }}>{tags}</span>}
{tags}
</span>}
</React.Fragment> </React.Fragment>
} }
/> />

68
src/webui/components/Package/styles.js
View file

@ -161,41 +161,41 @@ export const Footer = styled.div`
// Container // Container
export const WrapperLink = styled(Link)` export const WrapperLink = styled(Link)`
&& { && {
font-size: 12px; // font-size: 12px;
background-color: white; // background-color: white;
margin: 0 0 15px 0; // margin: 0 0 15px 0;
transition: box-shadow 0.15s; // transition: box-shadow 0.15s;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15); // box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15);
border-radius: 3px; // border-radius: 3px;
padding: 10px; // padding: 10px;
text-decoration: none; text-decoration: none;
display: block; // display: block;
color: #2f273c; // color: #2f273c;
${mq.medium(css` // ${mq.medium(css`
${Header} { // ${Header} {
flex-direction: row; // flex-direction: row;
justify-content: space-between; // justify-content: space-between;
align-items: center; // align-items: center;
} // }
${OverviewItem} { // ${OverviewItem} {
margin: 0 0 0 0; // margin: 0 0 0 0;
} // }
${Overview} { // ${Overview} {
flex-direction: row; // flex-direction: row;
${OverviewItem} { // ${OverviewItem} {
:first-child { // :first-child {
margin: 0; // margin: 0;
} // }
} // }
} // }
${Footer} { // ${Footer} {
display: block; // display: block;
} // }
${Published} { // ${Published} {
display: inline-block; // display: inline-block;
} // }
`)}; // `)};
} // }
`; `;
/** /**

4
src/webui/components/PackageList/index.js
View file

@ -25,13 +25,13 @@ export default class PackageList extends React.Component {
const { packages } = this.props; const { packages } = this.props;
return ( return (
packages.map((pkg, i) => { packages.map((pkg, i) => {
const { name, version, description, time, keywords, dist } = pkg; const { name, version, description, time, keywords, dist, homepage, bugs } = pkg;
const author = pkg.author; const author = pkg.author;
const license = formatLicense(pkg.license); const license = formatLicense(pkg.license);
return ( return (
<React.Fragment key={i}> <React.Fragment key={i}>
{i !== 0 && <Divider style={{ margin: 0 }}></Divider>} {i !== 0 && <Divider style={{ margin: 0 }}></Divider>}
<Package {...{ name, dist, version, author, description, license, time, keywords }} /> <Package {...{ name, dist, version, author, description, license, time, keywords, homepage, bugs }} />
</React.Fragment> </React.Fragment>
); );
}) })