[WIP] Add FilePatch-header

lib/views/file-patch-view.js

@@ -67,32 +67,47 @@ export default class FilePatchView {
       <div className="github-FilePatchView" tabIndex="-1"
         onmouseup={this.mouseup}
         style={`font-size: ${this.fontSize}px`}>
-        {this.props.hunks.map(hunk => {
-          const isSelected = selectedHunks.has(hunk);
-          let stageButtonSuffix = (hunkSelectionMode || !isSelected) ? ' Hunk' : ' Selection';
-          if (selectedHunks.size > 1 && selectedHunks.has(hunk)) {
-            stageButtonSuffix += 's';
-          }
-          const stageButtonLabel = stageButtonLabelPrefix + stageButtonSuffix;
-
-          return (
-            <HunkView
-              key={hunk.getHeader()}
-              hunk={hunk}
-              isSelected={selectedHunks.has(hunk)}
-              hunkSelectionMode={hunkSelectionMode}
-              stageButtonLabel={stageButtonLabel}
-              selectedLines={selectedLines}
-              headLine={headLine}
-              headHunk={headHunk}
-              mousedownOnHeader={() => this.mousedownOnHeader(hunk)}
-              mousedownOnLine={this.mousedownOnLine}
-              mousemoveOnLine={this.mousemoveOnLine}
-              didClickStageButton={() => this.didClickStageButtonForHunk(hunk)}
-              registerView={this.props.registerHunkView}
-            />
-          );
-        })}
+
+        <header className="github-FilePatchView-header">
+          <span className="github-FilePatchView-title">file-name.js</span>
+          <label className="github-FilePatchView-toggle">
+            <input className='input-toggle' type='checkbox' />
+            Line Mode
+          </label>
+          <span className='btn-group'>
+            <button className='btn icon icon-tasklist'></button>
+            <button className='btn icon icon-code'></button>
+          </span>
+        </header>
+
+        <main className="github-FilePatchView-container">
+          {this.props.hunks.map(hunk => {
+            const isSelected = selectedHunks.has(hunk);
+            let stageButtonSuffix = (hunkSelectionMode || !isSelected) ? ' Hunk' : ' Selection';
+            if (selectedHunks.size > 1 && selectedHunks.has(hunk)) {
+              stageButtonSuffix += 's';
+            }
+            const stageButtonLabel = stageButtonLabelPrefix + stageButtonSuffix;
+
+            return (
+              <HunkView
+                key={hunk.getHeader()}
+                hunk={hunk}
+                isSelected={selectedHunks.has(hunk)}
+                hunkSelectionMode={hunkSelectionMode}
+                stageButtonLabel={stageButtonLabel}
+                selectedLines={selectedLines}
+                headLine={headLine}
+                headHunk={headHunk}
+                mousedownOnHeader={() => this.mousedownOnHeader(hunk)}
+                mousedownOnLine={this.mousedownOnLine}
+                mousemoveOnLine={this.mousemoveOnLine}
+                didClickStageButton={() => this.didClickStageButtonForHunk(hunk)}
+                registerView={this.props.registerHunkView}
+              />
+            );
+          })}
+        </main>
       </div>
     );
   }

styles/file-patch-view.less

@@ -1,7 +1,27 @@
 @import "variables";
 
 .github-FilePatchView {
+  display: flex;
+  flex-direction: column;
   -webkit-user-select: none;
   cursor: default;
   flex: 1;
+
+  &-header {
+    display: flex;
+    justify-content: space-between;
+    padding: @component-padding/2;
+    padding-left: @component-padding;
+    border-bottom: 1px solid @base-border-color;
+  }
+
+  &-toggle .input-toggle {
+    margin-left: .5em;
+    margin-right: .5em;
+  }
+
+  &-container {
+    flex: 1;
+    overflow-y: auto;
+  }
 }

styles/pane-view.less

@@ -2,7 +2,6 @@
 @import "ui-variables";
 
 .github-PaneView {
-  overflow-y: auto;
   display: flex;
 
   &.is-blank {