-
Notifications
You must be signed in to change notification settings - Fork 6
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #10 from StarRatio/add-table-view
Add table view
- Loading branch information
Showing
23 changed files
with
522 additions
and
171 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1 +1 @@ | ||
| <!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=1200,initial-scale=1"><link href="/favicon.ico" rel="shortcut icon"><title>Compare Javascript Open-source Projects</title><meta property="og:title" content="StarRatio - Stats That Matter"/><meta property="og:title" content="Handy Tool to Compare Javascript Open-source Projects"/><meta property="og:type" content="website"/><meta property="og:url" content="http://starratio.js.org"/><meta property="og:image" content="http://starratio.js.org/thumbnail.png"/><script src="//cdn.polyfill.io/v1/polyfill.min.js?features=Intl.~locale.en"></script><link rel="shortcut icon" href="/favicon.ico"><link href="/static/css/main.4c12b50b.css" rel="stylesheet"></head><body><div id="root"></div><footer><span class="footer-copyright"><a class="footer-copyright-link" href="//github.com/StarRatio" target="_blank" rel="nofollow">StarRatio</a> © 2016</span></footer><script async defer="defer" src="//buttons.github.io/buttons.js"></script><script type="text/javascript" src="/static/js/main.ef28510f.js"></script></body></html> | ||
| <!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=1200,initial-scale=1"><link href="/favicon.ico" rel="shortcut icon"><title>Compare Javascript Open-source Projects</title><meta property="og:title" content="StarRatio - Stats That Matter"/><meta property="og:title" content="Handy Tool to Compare Javascript Open-source Projects"/><meta property="og:type" content="website"/><meta property="og:url" content="http://starratio.js.org"/><meta property="og:image" content="http://starratio.js.org/thumbnail.png"/><script src="//cdn.polyfill.io/v1/polyfill.min.js?features=Intl.~locale.en"></script><link rel="shortcut icon" href="/favicon.ico"><link href="/static/css/main.6b5ad037.css" rel="stylesheet"></head><body><div id="root"></div><footer><span class="footer-copyright"><a class="footer-copyright-link" href="//github.com/StarRatio" target="_blank" rel="nofollow">StarRatio</a> © 2016</span></footer><script async defer="defer" src="//buttons.github.io/buttons.js"></script><script type="text/javascript" src="/static/js/main.26317bca.js"></script></body></html> |
This file was deleted.
Oops, something went wrong.
Large diffs are not rendered by default.
Oops, something went wrong.
Large diffs are not rendered by default.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,67 @@ | ||
| .TableView { | ||
| background-color: #fff; | ||
| box-shadow: rgba(0, 0, 0, 0.117647) 0px 1px 6px, rgba(0, 0, 0, 0.117647) 0px 1px 4px; | ||
| border-radius: 2px; | ||
| color: #000; | ||
| font-weight: 300; | ||
| font-size: 12px; | ||
| } | ||
|
|
||
| .TableView-table { | ||
| border-collapse: collapse; | ||
| text-align: center; | ||
| } | ||
|
|
||
| .TableView-item-remove { | ||
| width: 18px; | ||
| height: 18px; | ||
| box-shadow: rgba(0, 0, 0, 0.117647) 0px 1px 6px, rgba(0, 0, 0, 0.117647) 0px 1px 4px; | ||
| background: #E35071; | ||
| color: #fff; | ||
| font-weight: 100; | ||
| } | ||
|
|
||
| .reactable-column-header { | ||
| height: 56px; | ||
| border-bottom: 1px solid #eaeaea; | ||
| font-size: 13px; | ||
| } | ||
| .reactable-header-sortable { | ||
| outline: none; | ||
| padding-right: 10px; | ||
| } | ||
|
|
||
| .reactable-header-sort-asc, | ||
| .reactable-header-sort-desc { | ||
| padding-right: 0px; | ||
| } | ||
|
|
||
| .reactable-header-sort-asc:after { | ||
| content: '\25BC'; | ||
| font-size: 10px; | ||
| color: #bababa; | ||
| } | ||
|
|
||
| .reactable-header-sort-desc:after { | ||
| content: '\25B2'; | ||
| font-size: 10px; | ||
| color: #bababa; | ||
| } | ||
|
|
||
| .reactable-data tr:hover { | ||
| background: #eaeaea; | ||
| } | ||
|
|
||
| .reactable-data td { | ||
| height: 48px; | ||
| padding: 0 24px; | ||
| border-bottom: 1px solid #eaeaea; | ||
| } | ||
|
|
||
| .reactable-data tr:last-child td { | ||
| border-bottom: none; | ||
| } | ||
|
|
||
| .reactable-tfoot td { | ||
| height: 12px; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,129 @@ | ||
| import React, { PropTypes, Component } from 'react'; | ||
| import { Table, Thead, Th, Tr, Td, Tfoot } from 'reactable'; | ||
| import { FormattedNumber } from 'react-intl'; | ||
| import ReactTooltip from 'react-tooltip'; | ||
| import Button from '../../Button'; | ||
| import { bindClass, durationToString, dateDiffFromNowToString } from '../../../utils'; | ||
| import { fieldTooltips } from '../../../constants'; | ||
|
|
||
| import './index.css'; | ||
|
|
||
| class TableView extends Component { | ||
| constructor(props) { | ||
| super(props); | ||
| bindClass(this); | ||
| } | ||
|
|
||
| render() { | ||
| const { keys, data, handleRemove } = this.props; | ||
| const dataItems = keys.map((item) => {return { key: item, item: data[item]};}); | ||
| return ( | ||
| <div className="TableView"> | ||
| <Table className="TableView-table" sortable> | ||
| <Thead> | ||
| <Th column="name"> | ||
| <strong className="name-header">name</strong> | ||
| </Th> | ||
| <Th column="downloads"> | ||
| <span className="octicon octicon-cloud-download" data-tip={fieldTooltips['downloads']}></span> | ||
| </Th> | ||
| <Th column="stars"> | ||
| <span className="octicon octicon-star" data-tip={fieldTooltips['stars']}></span> | ||
| </Th> | ||
| <Th column="openedIssues"> | ||
| <span className="octicon octicon-issue-opened" data-tip={fieldTooltips['openedIssues']}></span> | ||
| </Th> | ||
| <Th column="closedIssues"> | ||
| <span className="octicon octicon-issue-closed" data-tip={fieldTooltips['closedIssues']}></span> | ||
| </Th> | ||
| <Th column="openedPullRequests"> | ||
| <span className="octicon octicon-git-branch" data-tip={fieldTooltips['openedPullRequests']}></span> | ||
| </Th> | ||
| <Th column="mergedPullRequests"> | ||
| <span className="octicon octicon-git-pull-request" data-tip={fieldTooltips['mergedPullRequests']}></span> | ||
| </Th> | ||
| <Th column="commitsCount"> | ||
| <span className="octicon octicon-git-commit" data-tip={fieldTooltips['commitsCount']}></span> | ||
| </Th> | ||
| <Th column="contributors"> | ||
| <span className="octicon octicon-organization" data-tip={fieldTooltips['contributors']}></span> | ||
| </Th> | ||
| <Th column="issueTtl"> | ||
| <span className="octicon octicon-issue-opened"></span> | ||
| <span className="octicon octicon-arrow-right"></span> | ||
| <span className="octicon octicon-issue-closed"></span> | ||
| </Th> | ||
| <Th column="pullRequestTtl"> | ||
| <span className="octicon octicon-git-branch"></span> | ||
| <span className="octicon octicon-arrow-right"></span> | ||
| <span className="octicon octicon-git-pull-request"></span> | ||
| </Th> | ||
| <Th column="lastCommit"> | ||
| Last <span className="octicon octicon-git-commit"></span> | ||
| </Th> | ||
| <Th column="actions"><span></span></Th> | ||
| </Thead> | ||
| { dataItems.map((({key, item}) => | ||
| <Tr key={`${item.user}/${item.repo}`}> | ||
| <Td column="name" data={`${item.user}/${item.repo}`}/> | ||
| <Td column="downloads" value={item.downloads || 0}> | ||
| { item.downloads ? <FormattedNumber value={item.downloads}/> : <span>-</span> } | ||
| </Td> | ||
| <Td column="stars" value={item.stars}> | ||
| <FormattedNumber value={item.stars} /> | ||
| </Td> | ||
| <Td column="openedIssues" value={item.openedIssues}> | ||
| <FormattedNumber value={item.openedIssues} /> | ||
| </Td> | ||
| <Td column="closedIssues" value={item.closedIssues}> | ||
| <FormattedNumber value={item.closedIssues} /> | ||
| </Td> | ||
| <Td column="openedPullRequests" value={item.openedPullRequests}> | ||
| <FormattedNumber value={item.openedPullRequests} /> | ||
| </Td> | ||
| <Td column="mergedPullRequests" value={item.mergedPullRequests}> | ||
| <FormattedNumber value={item.mergedPullRequests} /> | ||
| </Td> | ||
| <Td column="commitsCount" value={item.commitsCount}> | ||
| <FormattedNumber value={item.commitsCount} /> | ||
| </Td> | ||
| <Td column="contributors" value={item.contributors}> | ||
| <FormattedNumber value={item.contributors} /> | ||
| </Td> | ||
| <Td column="issueTtl" value={item.issueTtl}> | ||
| <span>{durationToString(item.issueTtl)}</span> | ||
| </Td> | ||
| <Td column="pullRequestTtl" value={item.pullRequestTtl.toString()}> | ||
| <span>{durationToString(item.pullRequestTtl)}</span> | ||
| </Td> | ||
| <Td column="lastCommit" value={item.lastCommit}> | ||
| <span>{dateDiffFromNowToString(item.lastCommit)}</span> | ||
| </Td> | ||
| <Td column="actions"> | ||
| <Button className="TableView-item-remove" | ||
| handleClick={handleRemove} | ||
| payload={key}> | ||
| X | ||
| </Button> | ||
| </Td> | ||
| </Tr> | ||
| ))} | ||
| <Tfoot className="reactable-tfoot"> | ||
| <tr> | ||
| <td></td> | ||
| </tr> | ||
| </Tfoot> | ||
| </Table> | ||
| <ReactTooltip place="bottom" /> | ||
| </div> | ||
| ); | ||
| } | ||
| } | ||
|
|
||
| TableView.propTypes = { | ||
| handleRemove: PropTypes.func.isRequired, | ||
| keys: PropTypes.array.isRequired, | ||
| data: PropTypes.object.isRequired | ||
| }; | ||
|
|
||
| export default TableView; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,28 @@ | ||
| .TileView { | ||
| display: flex; | ||
| flex-wrap: wrap; | ||
| flex-direction: row; | ||
| justify-content: center; | ||
| width: 960px; | ||
| max-width: 960px; | ||
| } | ||
|
|
||
| .TileView-item { | ||
| position: relative; | ||
| width: 250px; | ||
| flex-basis: 250px; | ||
| margin: 20px; | ||
| } | ||
|
|
||
| .TileView-item-remove { | ||
| position: absolute; | ||
| right: -12px; | ||
| top: -12px; | ||
| width: 24px; | ||
| height: 24px; | ||
| border-radius: 50%; | ||
| box-shadow: rgba(0, 0, 0, 0.117647) 0px 1px 6px, rgba(0, 0, 0, 0.117647) 0px 1px 4px; | ||
| background: #E35071; | ||
| color: #fff; | ||
| font-weight: 100; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,39 @@ | ||
| import React, { PropTypes, Component } from 'react'; | ||
| import StatsItem from '../../StatsItem'; | ||
| import Button from '../../Button'; | ||
| import { bindClass } from '../../../utils'; | ||
|
|
||
| import './index.css'; | ||
|
|
||
| class TileView extends Component { | ||
| constructor(props) { | ||
| super(props); | ||
| bindClass(this); | ||
| } | ||
|
|
||
| render() { | ||
| const { keys, data, handleRemove } = this.props; | ||
| return ( | ||
| <div className="TileView"> | ||
| { keys.map(item => | ||
| <div key={`${data[item].user}${data[item].repo}`} className="TileView-item"> | ||
| <Button className="TileView-item-remove" | ||
| handleClick={handleRemove} | ||
| payload={item}> | ||
| X | ||
| </Button> | ||
| <StatsItem data={data[item]}/> | ||
| </div> | ||
| )} | ||
| </div> | ||
| ); | ||
| } | ||
| } | ||
|
|
||
| TileView.propTypes = { | ||
| handleRemove: PropTypes.func.isRequired, | ||
| keys: PropTypes.array.isRequired, | ||
| data: PropTypes.object.isRequired | ||
| }; | ||
|
|
||
| export default TileView; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,26 @@ | ||
| .ViewSwitcher { | ||
| margin: 15px; | ||
| text-align: center; | ||
| } | ||
|
|
||
| .ViewSwitcher-items { | ||
| display: inline-block; | ||
| border: 1px solid #00BCD4; | ||
| } | ||
|
|
||
| .ViewSwitcher-link { | ||
| display: inline-block; | ||
| padding: 5px 16px; | ||
| outline: none; | ||
| text-decoration: none; | ||
| font-size: 12px; | ||
| text-transform: uppercase; | ||
| line-height: 18px; | ||
| background-color: #fff; | ||
| color:#00BCD4; | ||
| } | ||
|
|
||
| .ViewSwitcher-link__active { | ||
| background-color: #00BCD4; | ||
| color: #fff; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,23 @@ | ||
| import React, { Component } from 'react'; | ||
| import { withRouter, Link } from 'react-router'; | ||
| import './index.css'; | ||
|
|
||
| class ViewSwitcher extends Component { | ||
| render() { | ||
| const { query } = this.props; | ||
| return ( | ||
| <div className="ViewSwitcher"> | ||
| <span className="ViewSwitcher-items"> | ||
| <Link className="ViewSwitcher-link" activeClassName="ViewSwitcher-link__active" to={{pathname: '/compare/tiles', query: query}}> | ||
| Tiles | ||
| </Link> | ||
| <Link className="ViewSwitcher-link" activeClassName="ViewSwitcher-link__active" to={{pathname: '/compare/table', query: query}}> | ||
| Table | ||
| </Link> | ||
| </span> | ||
| </div> | ||
| ); | ||
| } | ||
| } | ||
|
|
||
| export default withRouter(ViewSwitcher); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.