fixed positioning of dropdownmulti-file-editor-small-sidebar-header

specs

5 files changed, 130 insertions, 40 deletions

diff --git a/app/assets/javascripts/repo/components/downloads/dropdown.vue b/app/assets/javascripts/repo/components/downloads/dropdown.vue
new file mode 100644
index 00000000000..bde3ddc30d1
--- /dev/null
+++ b/app/assets/javascripts/repo/components/downloads/dropdown.vue
@@ -0,0 +1,35 @@
+<script>
+  import { mapState } from 'vuex';
+
+  export default {
+    computed: {
+      ...mapState([
+        'downloads',
+      ]),
+    },
+  };
+</script>
+
+<template>
+  <div class="js-download-dropdown">
+    <ul
+      class="dropdown-menu download-dropdown-menu"
+      role="menu"
+    >
+      <template v-for="(data, key) in downloads">
+        <li class="dropdown-header">
+          {{ key }}
+        </li>
+        <li v-for="download in data">
+          <a
+            :href="download.link"
+            rel="nofollow"
+            download
+          >
+            {{ download.text }}
+          </a>
+        </li>
+      </template>
+    </ul>
+  </div>
+</template>
diff --git a/app/assets/javascripts/repo/components/list_header.vue b/app/assets/javascripts/repo/components/list_header.vue
index 9f3f64c162c..1833471725b 100644
--- a/app/assets/javascripts/repo/components/list_header.vue
+++ b/app/assets/javascripts/repo/components/list_header.vue
@@ -5,7 +5,6 @@
     computed: {
       ...mapState([
         'canCommit',
-        'downloads',
       ]),
     },
     methods: {
@@ -18,51 +17,31 @@
 
 <template>
   <header class="clearfix multi-file-list-header">
-    <div class="project-action-button dropdown inline">
-      <button
-        type="button"
-        class="btn btn default"
-        data-toggle="dropdown"
-        :aria-label="__('Select Archive Format')"
+    <button
+      type="button"
+      class="btn btn-default btn-sm js-download-btn"
+      data-toggle="dropdown"
+      data-target=".js-download-dropdown"
+      :aria-label="__('Select Archive Format')"
+    >
+      <i
+        class="fa fa-download"
+        aria-hidden="true"
       >
-        <i
-          class="fa fa-download"
-          aria-hidden="true"
-        >
-        </i>
-        <i
-          class="fa fa-caret-down"
-          aria-hidden="true"
-        >
-        </i>
-      </button>
-      <ul
-        class="dropdown-menu"
-        role="menu"
+      </i>
+      <i
+        class="fa fa-caret-down"
+        aria-hidden="true"
       >
-        <template v-for="(data, key) in downloads">
-          <li class="dropdown-header">
-            {{ key }}
-          </li>
-          <li v-for="download in data">
-            <a
-              :href="download.link"
-              rel="nofollow"
-              download
-            >
-              {{ download.text }}
-            </a>
-          </li>
-        </template>
-      </ul>
-    </div>
+      </i>
+    </button>
     <aside
       v-if="canCommit"
       class="pull-right"
     >
       <button
         type="button"
-        class="btn btn-transparent cdark"
+        class="btn btn-transparent btn-sm cdark"
         :aria-label="__('Create new file')"
         @click="openNewEntryModal('blob')"
       >
@@ -74,7 +53,7 @@
       </button>
       <button
         type="button"
-        class="btn btn-transparent cdark"
+        class="btn btn-transparent btn-sm cdark"
         :aria-label="__('Create new directory')"
         @click="openNewEntryModal('tree')"
       >
diff --git a/app/assets/javascripts/repo/components/repo.vue b/app/assets/javascripts/repo/components/repo.vue
index 98117802016..975d9532fad 100644
--- a/app/assets/javascripts/repo/components/repo.vue
+++ b/app/assets/javascripts/repo/components/repo.vue
@@ -6,6 +6,7 @@ import RepoTabs from './repo_tabs.vue';
 import RepoFileButtons from './repo_file_buttons.vue';
 import RepoPreview from './repo_preview.vue';
 import repoEditor from './repo_editor.vue';
+import downloadsDropdown from './downloads/dropdown.vue';
 
 export default {
   computed: {
@@ -24,6 +25,7 @@ export default {
     repoEditor,
     RepoCommitSection,
     RepoPreview,
+    downloadsDropdown,
   },
   mounted() {
     const returnValue = 'Are you sure you want to lose unsaved changes?';
@@ -43,6 +45,7 @@ export default {
   <div class="repository-view">
     <div class="tree-content-holder" :class="{'tree-content-holder-mini' : isCollapsed}">
       <repo-sidebar/>
+      <downloads-dropdown v-if="isCollapsed" />
       <div
         v-if="isCollapsed"
         class="panel-right"
diff --git a/app/assets/stylesheets/pages/repo.scss b/app/assets/stylesheets/pages/repo.scss
index 78ce0a44529..8e2509cb2c1 100644
--- a/app/assets/stylesheets/pages/repo.scss
+++ b/app/assets/stylesheets/pages/repo.scss
@@ -36,6 +36,7 @@
 }
 
 .repository-view {
+  position: relative;
   border: 1px solid $border-color;
   border-radius: $border-radius-default;
   color: $almost-black;
@@ -287,7 +288,15 @@
 }
 
 .multi-file-list-header {
-  background-color: $common-gray-light;
+  position: sticky;
+  top: 0;
+  padding: 5px;
+  background-color: $gray-darkest;
+}
+
+.download-dropdown-menu {
+  top: 35px;
+  left: 5px;
 }
 
 .render-error {
diff --git a/spec/javascripts/repo/components/list_header_spec.js b/spec/javascripts/repo/components/list_header_spec.js
new file mode 100644
index 00000000000..b769f815731
--- /dev/null
+++ b/spec/javascripts/repo/components/list_header_spec.js
@@ -0,0 +1,64 @@
+import Vue from 'vue';
+import store from '~/repo/stores';
+import listHeader from '~/repo/components/list_header.vue';
+import { resetStore } from '../helpers';
+
+describe('Multi-file list header', () => {
+  let vm;
+
+  beforeEach(() => {
+    const Comp = Vue.extend(listHeader);
+
+    vm = new Comp({
+      store,
+    }).$mount();
+  });
+
+  afterEach(() => {
+    resetStore(vm.$store);
+  });
+
+  describe('can commit', () => {
+    beforeEach((done) => {
+      vm.$store.state.canCommit = true;
+
+      Vue.nextTick(done);
+    });
+
+    it('renders new entry buttons', () => {
+      expect(vm.$el.querySelectorAll('.btn-transparent').length).toBe(2);
+      expect(
+        vm.$el.querySelectorAll('.btn-transparent')[0].getAttribute('aria-label'),
+      ).toBe('Create new file');
+      expect(
+        vm.$el.querySelectorAll('.btn-transparent')[1].getAttribute('aria-label'),
+      ).toBe('Create new directory');
+    });
+
+    it('opens new file modal after clicking new file button', () => {
+      vm.$el.querySelectorAll('.btn-transparent')[0].click();
+
+      expect(vm.$store.state.newEntryModalOpen).toBeTruthy();
+      expect(vm.$store.state.newEntryModalType).toBe('blob');
+    });
+
+    it('opens new directory modal after clicking new directory button', () => {
+      vm.$el.querySelectorAll('.btn-transparent')[1].click();
+
+      expect(vm.$store.state.newEntryModalOpen).toBeTruthy();
+      expect(vm.$store.state.newEntryModalType).toBe('tree');
+    });
+  });
+
+  describe('can not commit', () => {
+    beforeEach((done) => {
+      vm.$store.state.canCommit = false;
+
+      Vue.nextTick(done);
+    });
+
+    it('does not render new entry buttons', () => {
+      expect(vm.$el.querySelectorAll('.btn-transparent').length).toBe(0);
+    });
+  });
+});