Merge pull request #58 from berzniz/improve_ui

UI improvements

Author: berzniz

Diff for: src/js/components/actions/index.jsx

@@ -10,6 +10,7 @@ const Actions = ({ filter, filterFiles, onFullWidth, onOptions, onClose }) => (
           src='data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz48c3ZnIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMyIDMyIiBoZWlnaHQ9IjMycHgiIGlkPSLQodC70L7QuV8xIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAzMiAzMiIgd2lkdGg9IjMycHgiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxnIGlkPSJGdWxsc2NyZWVuIj48cGF0aCBkPSJNMzIsMWMwLTAuNTU4LTAuNDQyLTEtMS0xbC04Ljk4NSwwYy0wLjU2OCwwLTAuOTkxLDAuNDQ4LTAuOTkyLDEuMDE2QzIxLjAyMywxLjU4MywyMS40NDcsMiwyMi4wMTUsMkwzMCwyICAgbC0wLjAxNiw4LjAyM2MwLDAuNTY4LDAuNDMyLDEsMSwxYzAuNTY4LTAuMDAxLDEtMC40MzIsMS0xTDMyLDEuMDE1YzAtMC4wMDMtMC4wMDEtMC4wMDUtMC4wMDEtMC4wMDdDMzEuOTk5LDEuMDA1LDMyLDEuMDAzLDMyLDF6ICAgIiBmaWxsPSIjMTIxMzEzIi8+PHBhdGggZD0iTTEwLjAxNiwwSDEuMDMxQzEuMDI4LDAsMS4wMjYsMC4wMDEsMS4wMjMsMC4wMDFDMS4wMjEsMC4wMDEsMS4wMTgsMCwxLjAxNiwwYy0wLjU1OCwwLTEsMC40NDItMSwxICAgTDAsMTAuMDA4QzAsMTAuNTc2LDAuNDQ4LDExLDEuMDE2LDExQzEuNTgzLDExLDIsMTAuNTc2LDIsMTAuMDA4TDIuMDE2LDJoOGMwLjU2OCwwLDEtMC40MzIsMS0xQzExLjAxNSwwLjQzMiwxMC41ODMsMCwxMC4wMTYsMHoiIGZpbGw9IiMxMjEzMTMiLz48cGF0aCBkPSJNOS45ODUsMzBIMnYtOGMwLTAuNTY4LTAuNDMyLTEtMS0xYy0wLjU2OCwwLTEsMC40MzItMSwxdjguOTg1YzAsMC4wMDMsMC4wMDEsMC4wMDUsMC4wMDEsMC4wMDcgICBDMC4wMDEsMzAuOTk1LDAsMzAuOTk3LDAsMzFjMCwwLjU1OCwwLjQ0MiwxLDEsMWg4Ljk4NWMwLjU2OCwwLDAuOTkxLTAuNDQ4LDAuOTkyLTEuMDE2QzEwLjk3NywzMC40MTcsMTAuNTUzLDMwLDkuOTg1LDMweiIgZmlsbD0iIzEyMTMxMyIvPjxwYXRoIGQ9Ik0zMC45ODQsMjEuMDIzYy0wLjU2OCwwLTAuOTg1LDAuNDI0LTAuOTg0LDAuOTkyVjMwbC04LDBjLTAuNTY4LDAtMSwwLjQzMi0xLDFjMCwwLjU2OCwwLjQzMiwxLDEsMSAgIGw4Ljk4NSwwYzAuMDAzLDAsMC4wMDUtMC4wMDEsMC4wMDctMC4wMDFDMzAuOTk1LDMxLjk5OCwzMC45OTcsMzIsMzEsMzJjMC41NTgsMCwxLTAuNDQyLDEtMXYtOC45ODUgICBDMzIsMjEuNDQ3LDMxLjU1MiwyMS4wMjMsMzAuOTg0LDIxLjAyM3oiIGZpbGw9IiMxMjEzMTMiLz48L2c+PGcvPjxnLz48Zy8+PGcvPjxnLz48Zy8+PC9zdmc+'
           width={16}
           height={16}
+          alt='Toggle full width'
         />
       </button>
     </div>

Diff for: src/js/components/branch/index.jsx

@@ -2,17 +2,27 @@ import React from 'react'
 import TreeView from 'react-treeview'
 import File from '../file'
 
-const Branch = ({ nodeLabel, list, href, hasComments, isDeleted, diffElement, diffStats, visibleElement }) => {
+const Branch = ({ nodeLabel, list, href, hasComments, isDeleted, diffElement, diffStats, visibleElement, filter }) => {
   if (href) {
     const isVisible = (diffElement === visibleElement)
-    return <File name={nodeLabel} href={href} hasComments={hasComments} isDeleted={isDeleted} isVisible={isVisible} diffStats={diffStats} />
+    return (
+      <File
+        name={nodeLabel}
+        href={href}
+        hasComments={hasComments}
+        isDeleted={isDeleted}
+        isVisible={isVisible}
+        diffStats={diffStats}
+        filter={filter}
+      />
+    )
   }
 
   return (
     <TreeView nodeLabel={nodeLabel} defaultCollapsed={false}>
       {list.map(node => (
         <span key={node.nodeLabel}>
-          <Branch {...node} visibleElement={visibleElement} />
+          <Branch {...node} visibleElement={visibleElement} filter={filter} />
         </span>
       ))}
     </TreeView>

Diff for: src/js/components/file/index.jsx

@@ -26,21 +26,41 @@ class File extends React.Component {
     this.unmounted = true
   }
 
+  getHighlight ({ name, filter, index }) {
+    const prefix = name.substring(0, index)
+    const middle = name.substring(index, index + filter.length)
+    const suffix = name.substring(index + filter.length)
+    return (
+      <>
+        {prefix}
+        {middle ? <span className='github-pr-file-highlight-filter'>{middle}</span> : null}
+        {suffix}
+      </>
+    )
+  }
+
   render () {
-    const { name, href, hasComments, isDeleted, isVisible, diffStats } = this.props
+    const { name, href, hasComments, isDeleted, isVisible, diffStats, filter } = this.props
     const { options = {} } = this.state
     const className = fileIcons.getClassWithColor(name)
     const style = {
       background: isVisible ? highlightColor : transparentColor,
       textDecoration: isDeleted ? 'line-through' : null
     }
 
+    const index = filter ? (name.toLowerCase() || '').indexOf(filter.toLowerCase()) : -1
+    const highlightedName = (index === -1) ? name : this.getHighlight({ name, filter, index })
+
     return (
       <div className='github-pr-file' style={style}>
         <span className={`icon ${className}`} />
-        <a href={href} className='link-gray-dark'>{name}</a>
+        <a href={href} className='link-gray-dark'>{highlightedName}</a>
         {options.diffStats && diffStats && <DiffStats diffStats={diffStats} />}
-        {hasComments ? ' 💬' : ''}
+        {hasComments ? (
+          <svg className='github-pr-file-comment octicon octicon-comment text-gray' viewBox='0 0 16 16' width='16' height='16' aria-hidden='true'>
+            <path fillRule='evenodd' d='M14 1H2c-.55 0-1 .45-1 1v8c0 .55.45 1 1 1h2v3.5L7.5 11H14c.55 0 1-.45 1-1V2c0-.55-.45-1-1-1zm0 9H7l-2 2v-2H2V2h12v8z' />
+          </svg>
+        ) : null}
       </div>
     )
   }

Diff for: src/js/components/tree/index.jsx

@@ -162,20 +162,22 @@ class Tree extends React.Component {
 
     return (
       <div>
+        <div className='_better_github_pr_resizer' ref={node => { this.resizer = node }} />
         <Actions
           filter={filter}
           filterFiles={this.filterFiles}
           onFullWidth={this.onFullWidth}
           onOptions={this.onOptions}
           onClose={this.onClose}
         />
-        <div>
-          <div className='_better_github_pr_resizer' ref={node => { this.resizer = node }} />
-          {root.list.map(node => (
-            <span key={node.nodeLabel}>
-              <Branch {...node} visibleElement={visibleElement} />
-            </span>
-          ))}
+        <div className='file-container'>
+          <div>
+            {root.list.map(node => (
+              <span key={node.nodeLabel}>
+                <Branch {...node} visibleElement={visibleElement} filter={filter} />
+              </span>
+            ))}
+          </div>
         </div>
       </div>
     )

Diff for: src/js/style.css

@@ -30,20 +30,24 @@
     margin-top: 20px;
     padding: 0 10px 0;
     width: 330px;
-    height: calc(100vh - 61px);
+    height: calc(100vh - 68px);
     background-color: #ffffff;
     border: 1px solid #e1e4e8;
     box-sizing: border-box;
     border-radius: 3px;
 }
 
 .__better_github_pr > div {
+    height: calc(100% - 55px);
+}
+
+.__better_github_pr .file-container {
     overflow: auto;
     height: 100%;
     padding-bottom: 10px;
 }
 
-.__better_github_pr > div > div {
+.__better_github_pr .file-container > div {
     width: fit-content;
 }
 
@@ -211,11 +215,22 @@
 
 .github-pr-file span.change-block {
     display: inline-block;
+    vertical-align: middle;
     height: 6px;
-    margin-right: 2px;
     width: 6px;
+    margin-right: 2px;
 }
 
 .github-pr-file span.deletion {
     background-color: #b22;
 }
+
+.github-pr-file-highlight-filter {
+    background: #fffbdd;
+}
+
+.github-pr-file-comment {
+    margin-left: 3px;
+    position: relative;
+    top: 2px;
+}