Add Stage All and Unstage All buttons in git panel

lib/views/staging-view.js

@@ -62,6 +62,10 @@ export default class StagingView {
       'github:activate-next-list': () => this.activateNextList(),
       'github:activate-previous-list': () => this.activatePreviousList(),
     }));
+    this.subscriptions.add(this.props.commandRegistry.add('atom-workspace', {
+      'github:stage-all': () => this.stageAll(),
+      'github:unstage-all': () => this.unstageAll(),
+    }));
     window.addEventListener('mouseup', this.mouseup);
     this.subscriptions.add(new Disposable(() => window.removeEventListener('mouseup', this.mouseup)));
   }
@@ -111,6 +115,20 @@ export default class StagingView {
     return true;
   }
 
+  @autobind
+  stageAll() {
+    if (this.props.unstagedChanges.length === 0) { return null; }
+    const filePaths = this.props.unstagedChanges.map(filePatch => filePatch.filePath);
+    return this.props.attemptFileStageOperation(filePaths, 'unstaged');
+  }
+
+  @autobind
+  unstageAll() {
+    if (this.props.stagedChanges.length === 0) { return null; }
+    const filePaths = this.props.stagedChanges.map(filePatch => filePatch.filePath);
+    return this.props.attemptFileStageOperation(filePaths, 'staged');
+  }
+
   confirmSelectedItems() {
     const itemPaths = Array.from(this.selection.getSelectedItems()).map(item => item.filePath);
     return this.props.attemptFileStageOperation(itemPaths, this.selection.getActiveListKey());
@@ -266,6 +284,7 @@ export default class StagingView {
           <header className="github-StagingView-header">
             <span className="icon icon-list-unordered" />
             <span className="github-StagingView-title">Unstaged Changes</span>
+            { this.props.unstagedChanges.length ? this.renderStageAllButton() : null }
           </header>
 
           <div ref="unstagedChanges" className="github-StagingView-list github-FilePatchListView">
@@ -295,6 +314,7 @@ export default class StagingView {
                   : ''
               }
             </span>
+            { this.props.stagedChanges.length ? this.renderUnstageAllButton() : null }
           </header>
           <div ref="stagedChanges" className="github-StagingView-list github-FilePatchListView">
             {
@@ -347,6 +367,20 @@ export default class StagingView {
     }
   }
 
+  renderStageAllButton() {
+    return (
+      <button className="github-StagingView-headerButton icon icon-move-down"
+        onclick={this.stageAll}>Stage All</button>
+    );
+  }
+
+  renderUnstageAllButton() {
+    return (
+      <button className="github-StagingView-headerButton icon icon-move-up"
+        onclick={this.unstageAll}>Unstage All</button>
+    );
+  }
+
   getFocusClass(listKey) {
     return this.selection.getActiveListKey() === listKey ? 'is-focused' : '';
   }

styles/staging-view.less

@@ -13,30 +13,57 @@
 
   &-header {
     display: flex;
-    padding: @component-padding;
-    padding-bottom: 0;
+    align-items: center;
+    padding: 0 0 0 @component-padding;
     font-weight: 600;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
+    border-top: 1px solid @panel-heading-border-color;
+    border-bottom: 1px solid @panel-heading-border-color;
+
+    .github-StagingView-group:first-child & {
+      border-top: none;
+    }
 
     .icon {
       text-align: center;
       &:before {
         color: @text-color-subtle;
         margin-right: @component-padding / 1.2;
+        vertical-align: middle;
       }
     }
   }
 
+  &-headerButton {
+    height: 2.5em;
+    border: none;
+    padding: 0 @component-padding;
+    font-weight: normal;
+    border-left: 1px solid @panel-heading-border-color;
+    background: none;
+    cursor: default;
+
+    &:active {
+      background-color: @button-background-color-hover;
+    }
+
+    &.icon:before {
+      margin-right: 0;
+      font-size: 1em;
+      text-align: left;
+    }
+  }
+
+
   &-title {
     flex: 1;
-    padding-bottom: .5em;
-    border-bottom: 1px solid @panel-heading-border-color;
+    margin-right: @component-padding;
+    line-height: 2.5em;
   }
 
   &-list {
-    padding: .3em 0;
     flex: 1 1 0;
     overflow-x: auto;
   }