Updated commit section in IDE sidebar

app/assets/javascripts/ide/components/commit_sidebar/form.vue

+<script>
+import { mapState, mapActions, mapGetters } from 'vuex';
+import { sprintf, __ } from '~/locale';
+import LoadingButton from '~/vue_shared/components/loading_button.vue';
+import CommitMessageField from './message_field.vue';
+import Actions from './actions.vue';
+import { activityBarViews } from '../../constants';
+
+export default {
+  components: {
+    Actions,
+    LoadingButton,
+    CommitMessageField,
+  },
+  data() {
+    return {
+      isCompact: true,
+      componentHeight: null,
+    };
+  },
+  computed: {
+    ...mapState(['changedFiles', 'stagedFiles', 'currentActivityView']),
+    ...mapState('commit', ['commitMessage', 'submitCommitLoading']),
+    ...mapGetters('commit', ['commitButtonDisabled', 'discardDraftButtonDisabled']),
+    overviewText() {
+      return sprintf(
+        __(
+          '<strong>%{changedFilesLength} unstaged</strong> and <strong>%{stagedFilesLength} staged</strong> changes',
+        ),
+        {
+          stagedFilesLength: this.stagedFiles.length,
+          changedFilesLength: this.changedFiles.length,
+        },
+      );
+    },
+  },
+  watch: {
+    currentActivityView() {
+      this.isCompact = this.currentActivityView !== activityBarViews.commit;
+    },
+  },
+  methods: {
+    ...mapActions(['updateActivityBarView']),
+    ...mapActions('commit', ['updateCommitMessage', 'discardDraft', 'commitChanges']),
+    toggleIsSmall() {
+      this.updateActivityBarView(activityBarViews.commit)
+        .then(() => {
+          this.isCompact = !this.isCompact;
+        })
+        .catch(e => {
+          throw e;
+        });
+    },
+    beforeEnterTransition() {
+      const elHeight = this.isCompact
+        ? this.$refs.formEl.offsetHeight
+        : this.$refs.compactEl.offsetHeight;
+
+      this.componentHeight = elHeight + 32;
+    },
+    enterTransition() {
+      this.$nextTick(() => {
+        const elHeight = this.isCompact
+          ? this.$refs.compactEl.offsetHeight
+          : this.$refs.formEl.offsetHeight;
+
+        this.componentHeight = elHeight + 32;
+      });
+    },
+  },
+  activityBarViews,
+};
+</script>
+
+<template>
+  <div
+    class="multi-file-commit-form"
+    :class="{
+      'is-compact': isCompact,
+      'is-full': !isCompact
+    }"
+    :style="{
+      height: `${componentHeight}px`
+    }"
+  >
+    <transition
+      name="commit-form-slide-up"
+      @before-enter="beforeEnterTransition"
+      @enter="enterTransition"
+    >
+      <div
+        v-if="isCompact"
+        class="commit-form-compact"
+        ref="compactEl"
+      >
+        <button
+          type="button"
+          class="btn btn-primary btn-sm btn-block"
+          @click="toggleIsSmall"
+        >
+          {{ __('Commit') }}
+        </button>
+        <p
+          class="text-center"
+          v-html="overviewText"
+        ></p>
+      </div>
+      <form
+        v-if="!isCompact"
+        class="form-horizontal"
+        @submit.prevent.stop="commitChanges"
+        ref="formEl"
+      >
+        <commit-message-field
+          :text="commitMessage"
+          @input="updateCommitMessage"
+        />
+        <div class="clearfix prepend-top-15">
+          <actions />
+          <loading-button
+            :loading="submitCommitLoading"
+            :disabled="commitButtonDisabled"
+            container-class="btn btn-success btn-sm pull-left"
+            :label="__('Commit')"
+            @click="commitChanges"
+          />
+          <button
+            v-if="!discardDraftButtonDisabled"
+            type="button"
+            class="btn btn-default btn-sm pull-right"
+            @click="discardDraft"
+          >
+            {{ __('Discard draft') }}
+          </button>
+          <button
+            v-else
+            type="button"
+            class="btn btn-default btn-sm pull-right"
+            @click="toggleIsSmall"
+          >
+            {{ __('Collapse') }}
+          </button>
+        </div>
+      </form>
+    </transition>
+  </div>
+</template>

app/assets/javascripts/ide/components/commit_sidebar/list.vue

@@ -76,13 +76,11 @@ export default {
           :size="18"
         />
         {{ titleText }}
-        <button
-          type="button"
-          class="btn btn-blank btn-link ide-staged-action-btn"
-          @click="actionBtnClicked"
+        <span
+          class="ide-commit-file-count"
         >
-          {{ actionBtnText }}
-        </button>
+          {{ fileList.length }}
+        </span>
       </div>
     </header>
     <ul

app/assets/javascripts/ide/components/ide_side_bar.vue

@@ -9,6 +9,7 @@ import IdeTree from './ide_tree.vue';
 import ResizablePanel from './resizable_panel.vue';
 import ActivityBar from './activity_bar.vue';
 import CommitSection from './repo_commit_section.vue';
+import CommitForm from './commit_sidebar/form.vue';
 
 export default {
   components: {
@@ -21,6 +22,7 @@ export default {
     Identicon,
     CommitSection,
     IdeTree,
+    CommitForm,
   },
   computed: {
     ...mapState(['loading', 'currentBranchId', 'currentActivityView']),
@@ -91,6 +93,7 @@ export default {
             :is="currentActivityView"
           />
         </div>
+        <commit-form />
       </template>
     </div>
   </resizable-panel>

app/assets/javascripts/ide/components/repo_commit_section.vue

 <script>
-import { mapState, mapActions, mapGetters } from 'vuex';
+import { mapState, mapActions } from 'vuex';
 import tooltip from '~/vue_shared/directives/tooltip';
 import Icon from '~/vue_shared/components/icon.vue';
 import DeprecatedModal from '~/vue_shared/components/deprecated_modal.vue';
-import LoadingButton from '~/vue_shared/components/loading_button.vue';
 import CommitFilesList from './commit_sidebar/list.vue';
 import EmptyState from './commit_sidebar/empty_state.vue';
-import CommitMessageField from './commit_sidebar/message_field.vue';
 import * as consts from '../stores/modules/commit/constants';
-import Actions from './commit_sidebar/actions.vue';
 
 export default {
   components: {
@@ -16,25 +13,15 @@ export default {
     Icon,
     CommitFilesList,
     EmptyState,
-    Actions,
-    LoadingButton,
-    CommitMessageField,
   },
   directives: {
     tooltip,
   },
   computed: {
     ...mapState(['changedFiles', 'stagedFiles']),
-    ...mapState('commit', ['commitMessage', 'submitCommitLoading']),
-    ...mapGetters('commit', ['commitButtonDisabled', 'discardDraftButtonDisabled', 'branchName']),
   },
   methods: {
-    ...mapActions('commit', [
-      'updateCommitMessage',
-      'discardDraft',
-      'commitChanges',
-      'updateCommitAction',
-    ]),
+    ...mapActions('commit', ['commitChanges', 'updateCommitAction']),
     forceCreateNewBranch() {
       return this.updateCommitAction(consts.COMMIT_TO_NEW_BRANCH).then(() => this.commitChanges());
     },
@@ -62,6 +49,7 @@ export default {
       v-if="changedFiles.length || stagedFiles.length"
     >
       <commit-files-list
+        class="is-first"
         icon-name="unstaged"
         :title="__('Unstaged')"
         :file-list="changedFiles"
@@ -78,33 +66,6 @@ export default {
         item-action-component="unstage-button"
         :staged-list="true"
       />
-      <form
-        class="form-horizontal multi-file-commit-form"
-        @submit.prevent.stop="commitChanges"
-      >
-        <commit-message-field
-          :text="commitMessage"
-          @input="updateCommitMessage"
-        />
-        <div class="clearfix prepend-top-15">
-          <actions />
-          <loading-button
-            :loading="submitCommitLoading"
-            :disabled="commitButtonDisabled"
-            container-class="btn btn-success btn-sm pull-left"
-            :label="__('Commit')"
-            @click="commitChanges"
-          />
-          <button
-            v-if="!discardDraftButtonDisabled"
-            type="button"
-            class="btn btn-default btn-sm pull-right"
-            @click="discardDraft"
-          >
-            {{ __('Discard draft') }}
-          </button>
-        </div>
-      </form>
     </template>
     <empty-state
       v-else

app/assets/stylesheets/pages/repo.scss

@@ -484,13 +484,12 @@
   align-items: center;
   margin-bottom: 0;
   border-bottom: 1px solid $white-dark;
-  padding: $gl-btn-padding 0;
+  padding: $gl-btn-padding $gl-padding;
 }
 
 .multi-file-commit-panel-header-title {
   display: flex;
   flex: 1;
-  padding-left: $grid-size;
 
   svg {
     margin-right: $gl-btn-padding;
@@ -506,7 +505,7 @@
 .multi-file-commit-list {
   flex: 1;
   overflow: auto;
-  padding: $gl-padding 0;
+  padding: $gl-padding;
   min-height: 60px;
 }
 
@@ -602,7 +601,9 @@
 
 .multi-file-commit-form {
   padding: $gl-padding;
+  background-color: $white-light;
   border-top: 1px solid $white-dark;
+  border-left: 1px solid $white-dark;
 
   .btn {
     font-size: $gl-font-size;
@@ -760,12 +761,20 @@
   flex-direction: column;
   width: 100%;
   min-height: 140px;
-  padding: 0 16px;
 }
 
-.ide-staged-action-btn {
+.ide-commit-list-container.is-first {
+  border-bottom: 1px solid $white-dark;
+}
+
+.ide-commit-file-count {
+  min-width: 22px;
   margin-left: auto;
-  color: $gl-link-color;
+  background-color: $gray-light;
+  border-radius: $border-radius-default;
+  border: 1px solid $white-dark;
+  line-height: 20px;
+  text-align: center;
 }
 
 .ide-commit-radios {
@@ -947,3 +956,48 @@
     margin-top: -1px;
   }
 }
+
+.multi-file-commit-form {
+  position: relative;
+  transition: all 0.3s ease;
+}
+
+.commit-form-compact {
+  .btn {
+    margin-bottom: 8px;
+  }
+
+  p {
+    margin-bottom: 0;
+  }
+}
+
+.commit-form-slide-up-enter-active,
+.commit-form-slide-up-leave-active {
+  position: absolute;
+  top: 16px;
+  left: 16px;
+  right: 16px;
+  transition: all 0.3s ease;
+}
+
+.is-full .commit-form-slide-up-enter {
+  transform: translateY(100%);
+}
+
+.is-full .commit-form-slide-up-enter-to {
+  transform: translateY(0);
+}
+
+.commit-form-slide-up-enter,
+.commit-form-slide-up-leave-to {
+  opacity: 0;
+}
+
+.is-compact .commit-form-slide-up-leave {
+  transform: translateY(0);
+}
+
+.is-compact .commit-form-slide-up-leave-to {
+  transform: translateY(100%);
+}