From 0b2f883a95c35e99777f9eaa70eb8abc09607eb5 Mon Sep 17 00:00:00 2001 From: evansiroky Date: Thu, 4 Apr 2019 22:01:39 -0700 Subject: [PATCH 1/3] add diff stats styling --- src/js/components/branch.jsx | 4 ++-- src/js/components/file.jsx | 26 ++++++++++++++++++++++++-- src/js/lib.js | 23 ++++++++++++++++++++++- src/js/style.css | 21 +++++++++++++++++++++ 4 files changed, 69 insertions(+), 5 deletions(-) diff --git a/src/js/components/branch.jsx b/src/js/components/branch.jsx index a40b063..9e06021 100644 --- a/src/js/components/branch.jsx +++ b/src/js/components/branch.jsx @@ -2,10 +2,10 @@ import React from 'react' import TreeView from 'react-treeview' import File from './file' -const Branch = ({ nodeLabel, list, href, hasComments, isDeleted, diffElement, visibleElement }) => { +const Branch = ({ nodeLabel, list, href, hasComments, isDeleted, diffElement, diffStats, visibleElement }) => { if (href) { const isVisible = (diffElement === visibleElement) - return + return } return ( diff --git a/src/js/components/file.jsx b/src/js/components/file.jsx index 6d52cc4..1f77400 100644 --- a/src/js/components/file.jsx +++ b/src/js/components/file.jsx @@ -4,16 +4,38 @@ import fileIcons from 'file-icons-js' const highlightColor = '#ebebeb' const transparentColor = 'transparent' -const File = ({ name, href, hasComments, isDeleted, isVisible }) => { +const AdditionBlock = +const DeletionBlock = + +const File = ({ name, href, hasComments, isDeleted, isVisible, diffStats }) => { const className = fileIcons.getClassWithColor(name) const style = { background: isVisible ? highlightColor : transparentColor, textDecoration: isDeleted ? 'line-through' : null } + const changeBlocks = [] + let changeNumber + if (diffStats) { + for (let i = 0; i < Math.log(diffStats.additions); i++) { + changeBlocks.push(AdditionBlock) + } + for (let i = 0; i < Math.log(diffStats.deletions); i++) { + changeBlocks.push(DeletionBlock) + } + changeNumber = diffStats.additions + diffStats.deletions + changeNumber = changeNumber.toLocaleString() + } return (
- {name} {hasComments ? ' 💬' : ''} + {name} + {diffStats && + + {changeNumber} + {changeBlocks} + + } + {hasComments ? ' 💬' : ''}
) } diff --git a/src/js/lib.js b/src/js/lib.js index d30a173..f1b55a2 100644 --- a/src/js/lib.js +++ b/src/js/lib.js @@ -25,6 +25,26 @@ const sorter = (a, b) => { } } +const parseChangeNumber = (n) => { + if (!n.replace) return 0 + const number = parseInt(n.replace(',', ''), 10) + return isNaN(number) ? 0 : number +} + +/** + * Get the diff statistics (number of additions and deletions) for a file. + */ +const getDiffStatsForDiffElement = (diffElement) => { + const diffStatSpan = diffElement.getElementsByClassName('diffstat')[0] + const changesTxt = diffStatSpan && diffStatSpan.getAttribute('aria-label') + const changes = changesTxt && + changesTxt.match(/([\d,]*) additions? & ([\d,]*) deletions?/) + return changes && { + additions: parseChangeNumber(changes[1]), + deletions: parseChangeNumber(changes[2]) + } +} + const hasCommentsForFileIndex = (fileIndex) => { const diffTable = document.getElementById(`diff-${fileIndex}`) if (!diffTable) { @@ -103,7 +123,8 @@ export const createFileTree = (filter = EMPTY_FILTER) => { href: (index === parts.length - 1) ? href : null, hasComments, isDeleted, - diffElement + diffElement, + diffStats: getDiffStatsForDiffElement(diffElement) } location.list.push(node) } diff --git a/src/js/style.css b/src/js/style.css index 340eb12..25e3cfb 100644 --- a/src/js/style.css +++ b/src/js/style.css @@ -172,3 +172,24 @@ .github-pr-file > span { margin-right: 4px; } + +.github-pr-file > span.changes > .number { + color: #888888; + margin-left: 8px; + margin-right: 4px; +} + +.github-pr-file span.addition { + background-color: #6cc644; +} + +.github-pr-file span.change-block { + display: inline-block; + height: 6px; + margin-right: 2px; + width: 6px; +} + +.github-pr-file span.deletion { + background-color: #b22; +} From 0f7a3e31a55ce4123bb86d0112535fe80aa6710f Mon Sep 17 00:00:00 2001 From: Tal Bereznitskey Date: Mon, 8 Apr 2019 00:49:00 +0300 Subject: [PATCH 2/3] Make diff stats configurable --- src/js/components/diffStats.jsx | 24 ++++++++++++ src/js/components/file.jsx | 66 ++++++++++++++++++--------------- src/js/components/tree.jsx | 4 +- src/js/lib.js | 3 -- src/js/style.css | 2 +- 5 files changed, 63 insertions(+), 36 deletions(-) create mode 100644 src/js/components/diffStats.jsx diff --git a/src/js/components/diffStats.jsx b/src/js/components/diffStats.jsx new file mode 100644 index 0000000..dada300 --- /dev/null +++ b/src/js/components/diffStats.jsx @@ -0,0 +1,24 @@ +import React from 'react' + +const AdditionBlock = (props) => +const DeletionBlock = (props) => + +const DiffStats = ({ diffStats }) => { + const changeBlocks = [] + for (let i = 0; i < Math.log(diffStats.additions); i++) { + changeBlocks.push() + } + for (let i = 0; i < Math.log(diffStats.deletions); i++) { + changeBlocks.push() + } + const changeNumber = (diffStats.additions + diffStats.deletions).toLocaleString() + + return ( + + {changeNumber} + {changeBlocks} + + ) +} + +export default DiffStats diff --git a/src/js/components/file.jsx b/src/js/components/file.jsx index 1f77400..363f6df 100644 --- a/src/js/components/file.jsx +++ b/src/js/components/file.jsx @@ -1,43 +1,49 @@ import React from 'react' import fileIcons from 'file-icons-js' +import DiffStats from './diffStats' +import { StorageSync } from '../lib' const highlightColor = '#ebebeb' const transparentColor = 'transparent' -const AdditionBlock = -const DeletionBlock = - -const File = ({ name, href, hasComments, isDeleted, isVisible, diffStats }) => { - const className = fileIcons.getClassWithColor(name) - const style = { - background: isVisible ? highlightColor : transparentColor, - textDecoration: isDeleted ? 'line-through' : null +class File extends React.Component { + constructor (props) { + super(props) + this.state = {} } - const changeBlocks = [] - let changeNumber - if (diffStats) { - for (let i = 0; i < Math.log(diffStats.additions); i++) { - changeBlocks.push(AdditionBlock) + + async componentDidMount () { + const options = await StorageSync.get() + + if (this.unmounted) { + return } - for (let i = 0; i < Math.log(diffStats.deletions); i++) { - changeBlocks.push(DeletionBlock) + + this.setState({ options }) + } + + componentWillUnmount () { + this.unmounted = true + } + + render () { + const { name, href, hasComments, isDeleted, isVisible, diffStats } = this.props + const { options = {} } = this.state + const className = fileIcons.getClassWithColor(name) + const style = { + background: isVisible ? highlightColor : transparentColor, + textDecoration: isDeleted ? 'line-through' : null } - changeNumber = diffStats.additions + diffStats.deletions - changeNumber = changeNumber.toLocaleString() + + return ( +
+ + {name} + {options.diffStats && diffStats && } + {hasComments ? ' 💬' : ''} +
+ ) } - return ( -
- - {name} - {diffStats && - - {changeNumber} - {changeBlocks} - - } - {hasComments ? ' 💬' : ''} -
- ) } export default File diff --git a/src/js/components/tree.jsx b/src/js/components/tree.jsx index c2fd231..d756ddd 100644 --- a/src/js/components/tree.jsx +++ b/src/js/components/tree.jsx @@ -31,7 +31,7 @@ class Tree extends React.Component { root: this.props.root, show: true, visibleElement: null, - filter: null + filter: '' } } @@ -137,7 +137,7 @@ class Tree extends React.Component { } filterFiles (event) { - const filter = event.target.value || null + const filter = event.target.value || '' this.setState({ root: createFileTree(filter).tree, filter diff --git a/src/js/lib.js b/src/js/lib.js index bd41505..bccf499 100644 --- a/src/js/lib.js +++ b/src/js/lib.js @@ -31,9 +31,6 @@ const parseChangeNumber = (n) => { return isNaN(number) ? 0 : number } -/** - * Get the diff statistics (number of additions and deletions) for a file. - */ const getDiffStatsForDiffElement = (diffElement) => { const diffStatSpan = diffElement.getElementsByClassName('diffstat')[0] const changesTxt = diffStatSpan && diffStatSpan.getAttribute('aria-label') diff --git a/src/js/style.css b/src/js/style.css index 25e3cfb..f70b579 100644 --- a/src/js/style.css +++ b/src/js/style.css @@ -180,7 +180,7 @@ } .github-pr-file span.addition { - background-color: #6cc644; + background-color: #2cbe4e; } .github-pr-file span.change-block { From a612e075cc1604076a5b4766c460cc0cbd7c4f4e Mon Sep 17 00:00:00 2001 From: Tal Bereznitskey Date: Mon, 8 Apr 2019 00:51:45 +0300 Subject: [PATCH 3/3] Add tests before deploy --- deploy_chrome_store.sh | 1 + 1 file changed, 1 insertion(+) diff --git a/deploy_chrome_store.sh b/deploy_chrome_store.sh index b23c967..1e1baec 100755 --- a/deploy_chrome_store.sh +++ b/deploy_chrome_store.sh @@ -1,6 +1,7 @@ #!/bin/bash -e yarn +yarn test-ci OUTPUT=extension.zip NODE_ENV=production yarn build zip -r $OUTPUT build