From abccda6fd54b15ef469d9a7d21dffe098c9edb55 Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Wed, 18 Apr 2018 17:16:40 +0100
Subject: [PATCH] fixed alignment of icon auto open new folder when creating
 item scroll dropdown into view when opening

---
 .../ide/components/new_dropdown/index.vue            | 12 +++++++++++-
 app/assets/javascripts/ide/components/repo_file.vue  |  2 +-
 app/assets/javascripts/ide/stores/actions.js         |  6 +++++-
 .../ide/stores/workers/files_decorator_worker.js     | 10 ++++++++--
 app/assets/stylesheets/pages/repo.scss               |  8 +++++++-
 5 files changed, 32 insertions(+), 6 deletions(-)

diff --git a/app/assets/javascripts/ide/components/new_dropdown/index.vue b/app/assets/javascripts/ide/components/new_dropdown/index.vue
index 769e9b79cad..94c3e8b4d19 100644
--- a/app/assets/javascripts/ide/components/new_dropdown/index.vue
+++ b/app/assets/javascripts/ide/components/new_dropdown/index.vue
@@ -27,6 +27,13 @@
         dropdownOpen: false,
       };
     },
+    watch: {
+      dropdownOpen() {
+        this.$nextTick(() => {
+          this.$refs.dropdownMenu.scrollIntoView();
+        });
+      },
+    },
     methods: {
       ...mapActions([
         'createTempEntry',
@@ -71,7 +78,10 @@
           css-classes="pull-left"
         />
       </button>
-      <ul class="dropdown-menu dropdown-menu-right">
+      <ul
+        class="dropdown-menu dropdown-menu-right"
+        ref="dropdownMenu"
+      >
         <li>
           <a
             href="#"
diff --git a/app/assets/javascripts/ide/components/repo_file.vue b/app/assets/javascripts/ide/components/repo_file.vue
index 3b5068d4910..45840c44e2f 100644
--- a/app/assets/javascripts/ide/components/repo_file.vue
+++ b/app/assets/javascripts/ide/components/repo_file.vue
@@ -97,7 +97,7 @@ export default {
             :file="file"
           />
         </span>
-        <span class="pull-right">
+        <span class="pull-right ide-file-icon-holder">
           <mr-file-icon
             v-if="file.mrChange"
           />
diff --git a/app/assets/javascripts/ide/stores/actions.js b/app/assets/javascripts/ide/stores/actions.js
index 59e77fb2150..3590f987aa7 100644
--- a/app/assets/javascripts/ide/stores/actions.js
+++ b/app/assets/javascripts/ide/stores/actions.js
@@ -60,7 +60,7 @@ export const createTempEntry = (
     }
 
     worker.addEventListener('message', ({ data }) => {
-      const { file } = data;
+      const { file, parentPath } = data;
 
       worker.terminate();
 
@@ -76,6 +76,10 @@ export const createTempEntry = (
         dispatch('setFileActive', file.path);
       }
 
+      if (parentPath && !state.entries[parentPath].opened) {
+        commit(types.TOGGLE_TREE_OPEN, parentPath);
+      }
+
       resolve(file);
     });
 
diff --git a/app/assets/javascripts/ide/stores/workers/files_decorator_worker.js b/app/assets/javascripts/ide/stores/workers/files_decorator_worker.js
index 949758c1aa6..d249b05f47c 100644
--- a/app/assets/javascripts/ide/stores/workers/files_decorator_worker.js
+++ b/app/assets/javascripts/ide/stores/workers/files_decorator_worker.js
@@ -6,6 +6,7 @@ self.addEventListener('message', e => {
 
   const treeList = [];
   let file;
+  let parentPath;
   const entries = data.reduce((acc, path) => {
     const pathSplit = path.split('/');
     const blobName = pathSplit.pop().trim();
@@ -17,6 +18,8 @@ self.addEventListener('message', e => {
         const foundEntry = acc[folderPath];
 
         if (!foundEntry) {
+          parentPath = parentFolder ? parentFolder.path : null;
+
           const tree = decorateData({
             projectId,
             branchId,
@@ -29,7 +32,7 @@ self.addEventListener('message', e => {
             tempFile,
             changed: tempFile,
             opened: tempFile,
-            parentPath: parentFolder ? parentFolder.path : null,
+            parentPath,
           });
 
           Object.assign(acc, {
@@ -53,6 +56,8 @@ self.addEventListener('message', e => {
 
     if (blobName !== '') {
       const fileFolder = acc[pathSplit.join('/')];
+      parentPath = fileFolder ? fileFolder.path : null;
+
       file = decorateData({
         projectId,
         branchId,
@@ -67,7 +72,7 @@ self.addEventListener('message', e => {
         content,
         base64,
         previewMode: viewerInformationForPath(blobName),
-        parentPath: fileFolder ? fileFolder.path : null,
+        parentPath,
       });
 
       Object.assign(acc, {
@@ -88,5 +93,6 @@ self.addEventListener('message', e => {
     entries,
     treeList: sortTree(treeList),
     file,
+    parentPath,
   });
 });
diff --git a/app/assets/stylesheets/pages/repo.scss b/app/assets/stylesheets/pages/repo.scss
index de9377a2fe0..62abf72eb49 100644
--- a/app/assets/stylesheets/pages/repo.scss
+++ b/app/assets/stylesheets/pages/repo.scss
@@ -54,6 +54,7 @@
       white-space: nowrap;
       text-overflow: ellipsis;
       max-width: inherit;
+      line-height: 22px;
 
       svg {
         vertical-align: middle;
@@ -66,13 +67,17 @@
       }
     }
 
+    .ide-file-icon-holder {
+      display: flex;
+      align-items: center;
+    }
+
     .ide-file-changed-icon {
       margin-left: auto;
     }
 
     .ide-new-btn {
       display: none;
-      margin-bottom: -4px;
       margin-right: -8px;
     }
 
@@ -104,6 +109,7 @@
 .file-col-commit-message {
   display: flex;
   overflow: visible;
+  align-items: center;
   padding: 6px 12px;
 }