From b174c22eb957497e7ae07fbf4a4db8ac942bb2cf Mon Sep 17 00:00:00 2001 From: Priscila Oliveira Date: Sun, 20 Jan 2019 13:29:51 +0100 Subject: [PATCH 1/5] refactor: added top bottom padding --- src/webui/styles/global.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/webui/styles/global.scss b/src/webui/styles/global.scss index 1b8e4b16f..e33736172 100644 --- a/src/webui/styles/global.scss +++ b/src/webui/styles/global.scss @@ -3,7 +3,7 @@ :global { .container { - padding: 0px 15px; + padding: 15px; flex: 1; @include container-size; From 27b40fbdcbdc869bfe77a26999c865b4785e7774 Mon Sep 17 00:00:00 2001 From: Priscila Oliveira Date: Sun, 20 Jan 2019 13:30:19 +0100 Subject: [PATCH 2/5] refactor: changed card styleS --- src/webui/components/DetailContainer/index.js | 11 ++++------- 1 file changed, 4 insertions(+), 7 deletions(-) diff --git a/src/webui/components/DetailContainer/index.js b/src/webui/components/DetailContainer/index.js index f6d331706..708d4e3ce 100644 --- a/src/webui/components/DetailContainer/index.js +++ b/src/webui/components/DetailContainer/index.js @@ -13,6 +13,7 @@ import Tabs from '@material-ui/core/Tabs/index'; import Tab from '@material-ui/core/Tab/index'; import { Content } from './styles'; import Dependencies from '../Dependencies'; +import UpLinks from '../UpLinks'; class DetailContainer extends Component { state = { @@ -43,9 +44,9 @@ class DetailContainer extends Component { {tabPosition === 0 && this.renderReadme(readMe)} - {tabPosition === 1 && this.renderDependencies()} - {tabPosition === 2 && this.renderVersions()} - {tabPosition === 3 && this.renderReadme(readMe)} + {tabPosition === 1 && } + {tabPosition === 2 && } + {tabPosition === 3 && } ); @@ -57,10 +58,6 @@ class DetailContainer extends Component { return ; }; - renderVersions = () => ; - - renderDependencies = () => ; - handleChange = (event: any, tabPosition: number) => { event.preventDefault(); this.setState({ tabPosition }); From 05498fe651013defa3a546e317e0de4c0be69c65 Mon Sep 17 00:00:00 2001 From: Priscila Oliveira Date: Sun, 20 Jan 2019 13:32:08 +0100 Subject: [PATCH 3/5] refactor: added renderList --- src/webui/components/Dependencies/index.js | 33 ++++++++++----------- src/webui/components/Dependencies/styles.js | 30 ++++++++++++------- 2 files changed, 34 insertions(+), 29 deletions(-) diff --git a/src/webui/components/Dependencies/index.js b/src/webui/components/Dependencies/index.js index a0233e955..da27fa6c5 100644 --- a/src/webui/components/Dependencies/index.js +++ b/src/webui/components/Dependencies/index.js @@ -8,11 +8,10 @@ import React, { Component, Fragment } from 'react'; import { withRouter } from 'react-router-dom'; -import { DetailContextConsumer } from '../../pages/version/index'; -import CardContent from '@material-ui/core/CardContent/index'; -import Chip from '@material-ui/core/Chip/index'; -import { Content, Tags, Tag, CardWrap } from './styles'; -import Typography from '@material-ui/core/Typography/index'; +import { DetailContextConsumer } from '../../pages/version'; +import Chip from '@material-ui/core/Chip'; +import { Content, CardWrap, Heading, ListItem, CardContent } from './styles'; +import List from '@material-ui/core/List'; class DepDetail extends Component { constructor(props: any) { @@ -28,11 +27,10 @@ class DepDetail extends Component { render() { const { name, version } = this.state; const tagText = `${name}@${version}`; - return ( - + - + ); } @@ -48,6 +46,13 @@ class DepDetail extends Component { const WrappDepDetail = withRouter(DepDetail); class DependencyBlock extends Component { + renderList = (deps: object, enableLoading: boolean) => + deps.map(dep => { + const [name, version] = dep; + + return ; + }); + render() { const { dependencies, title } = this.props; const deps = Object.entries(dependencies); @@ -59,16 +64,8 @@ class DependencyBlock extends Component { return ( - - {title} - - - {deps.map(dep => { - const [name, version] = dep; - - return ; - })} - + {title} + {this.renderList(deps, enableLoading)} ); diff --git a/src/webui/components/Dependencies/styles.js b/src/webui/components/Dependencies/styles.js index 24571ae65..8254a5993 100644 --- a/src/webui/components/Dependencies/styles.js +++ b/src/webui/components/Dependencies/styles.js @@ -4,7 +4,10 @@ */ import styled from 'react-emotion'; -import Card from '@material-ui/core/Card/index'; +import Card from '@material-ui/core/Card'; +import Typography from '@material-ui/core/Typography'; +import { default as MuiListItem } from '@material-ui/core/ListItem'; +import { default as MuiCardContent } from '@material-ui/core/CardContent'; export const Content = styled.div` && { @@ -12,17 +15,9 @@ export const Content = styled.div` } `; -export const Tags = styled.span` +export const CardContent = styled(MuiCardContent)` && { - display: flex; - justify-content: start; - flex-wrap: wrap; - } -`; - -export const Tag = styled.span` - && { - margin: 5px; + padding-bottom: 0; } `; @@ -31,3 +26,16 @@ export const CardWrap = styled(Card)` margin: 0 0 25px; } `; + +export const Heading = styled(Typography)` + && { + font-weight: 700; + } +`; + +export const ListItem = styled(MuiListItem)` + && { + padding-left: 0; + padding-right: 0; + } +`; From 6c3276926eb3ebf549f3ef322b49c6e5fe0a30f8 Mon Sep 17 00:00:00 2001 From: Priscila Oliveira Date: Sun, 20 Jan 2019 13:32:53 +0100 Subject: [PATCH 4/5] feat: added uplinks component --- src/webui/components/UpLinks/index.js | 43 ++++++++++++++++++++++++++ src/webui/components/UpLinks/styles.js | 23 ++++++++++++++ src/webui/components/UpLinks/types.js | 6 ++++ 3 files changed, 72 insertions(+) create mode 100644 src/webui/components/UpLinks/index.js create mode 100644 src/webui/components/UpLinks/styles.js create mode 100644 src/webui/components/UpLinks/types.js diff --git a/src/webui/components/UpLinks/index.js b/src/webui/components/UpLinks/index.js new file mode 100644 index 000000000..6491bb15a --- /dev/null +++ b/src/webui/components/UpLinks/index.js @@ -0,0 +1,43 @@ +/** + * @prettier + * @flow + */ + +import { DetailContextConsumer } from '../../pages/version/index'; +import { Heading, ListItem, CardContent } from './styles'; +import List from '@material-ui/core/List'; +import Chip from '@material-ui/core/Chip'; +import Card from '@material-ui/core/Card'; + +import React from 'react'; + +class UpLinks extends React.PureComponent { + render() { + return {({ packageMeta }) => this.renderContent(packageMeta._uplinks)}; + } + + renderList = (uplinks: object) => ( + + {Object.keys(uplinks) + .reverse() + .map(name => ( + + + + ))} + + ); + + // $FlowFixMe + renderContent = uplinks => + uplinks && ( + + + {'UpLinks'} + {this.renderList(uplinks)} + + + ); +} + +export default UpLinks; diff --git a/src/webui/components/UpLinks/styles.js b/src/webui/components/UpLinks/styles.js new file mode 100644 index 000000000..5ab4c6147 --- /dev/null +++ b/src/webui/components/UpLinks/styles.js @@ -0,0 +1,23 @@ +import styled from 'react-emotion'; +import Typography from '@material-ui/core/Typography'; +import { default as MuiListItem } from '@material-ui/core/ListItem'; +import { default as MuiCardContent } from '@material-ui/core/CardContent'; + +export const Heading = styled(Typography)` + && { + font-weight: 700; + } +`; + +export const ListItem = styled(MuiListItem)` + && { + padding-left: 0; + padding-right: 0; + } +`; + +export const CardContent = styled(MuiCardContent)` + && { + padding-bottom: 0; + } +`; diff --git a/src/webui/components/UpLinks/types.js b/src/webui/components/UpLinks/types.js new file mode 100644 index 000000000..2c6bf3ee3 --- /dev/null +++ b/src/webui/components/UpLinks/types.js @@ -0,0 +1,6 @@ +/** + * @prettier + * @flow + */ + +export interface IProps {} From 108936a6e45d0a5354e87957f4476d672ae23a43 Mon Sep 17 00:00:00 2001 From: Priscila Oliveira Date: Sun, 20 Jan 2019 13:33:28 +0100 Subject: [PATCH 5/5] refactor: refactor styles --- src/webui/components/Versions/styles.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/webui/components/Versions/styles.js b/src/webui/components/Versions/styles.js index 8a2655ca9..b69cb9bcc 100644 --- a/src/webui/components/Versions/styles.js +++ b/src/webui/components/Versions/styles.js @@ -3,7 +3,9 @@ import Typography from '@material-ui/core/Typography'; import { default as MuiListItemText } from '@material-ui/core/ListItemText'; export const Heading = styled(Typography)` + && { font-weight: 700; + } `; export const Spacer = styled('div')`