moved CSS into SCSS file

added ellipsis to path but not name

app/assets/javascripts/ide/components/file_finder/index.vue

@@ -5,7 +5,7 @@ import VirtualList from 'vue-virtual-scroll-list';
 import Item from './item.vue';
 import router from '../../ide_router';
 
-const MAX_RESULTS = 20;
+const MAX_RESULTS = 40;
 
 export default {
   components: {
@@ -48,16 +48,14 @@ export default {
       this.$nextTick(() => {
         if (!this.fileFindVisible) {
           this.searchText = '';
-          this.focusedIndex = 0;
         } else {
+          this.focusedIndex = 0;
           this.$refs.searchInput.focus();
         }
       });
     },
     searchText() {
-      if (this.searchText.trim() !== '') {
       this.focusedIndex = 0;
-      }
     },
   },
   methods: {
@@ -103,7 +101,7 @@ export default {
 <template>
   <div
     class="ide-file-finder-overlay"
-    @click.self="toggleFileFinder(false)"
+    @mousedown.self="toggleFileFinder(false)"
   >
     <div
       class="dropdown-menu diff-file-changes ide-file-finder show"
@@ -112,7 +110,7 @@ export default {
         <input
           type="search"
           class="dropdown-input-field"
-          placeholder="Search files"
+          :placeholder="__('Search files')"
           autocomplete="off"
           v-model="searchText"
           ref="searchInput"
@@ -150,10 +148,10 @@ export default {
           >
             <a href="">
               <template v-if="loading">
-                Loading...
+                {{ __('Loading...') }}
               </template>
               <template v-else>
-                No files found.
+                {{ __('No files found.') }}
               </template>
             </a>
           </li>
@@ -162,20 +160,3 @@ export default {
     </div>
   </div>
 </template>
-
-<style>
-.ide-file-finder-overlay {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  z-index: 100;
-}
-
-.ide-file-finder {
-  top: 10px;
-  left: 50%;
-  transform: translateX(-50%);
-}
-</style>

app/assets/javascripts/ide/components/file_finder/item.vue

@@ -2,6 +2,8 @@
 import fuzzaldrinPlus from 'fuzzaldrin-plus';
 import FileIcon from '../../../vue_shared/components/file_icon.vue';
 
+const MAX_PATH_LENGTH = 60;
+
 export default {
   components: {
     FileIcon,
@@ -24,10 +26,14 @@ export default {
     clickRow() {
       this.$emit('click', this.file);
     },
-    highlightText(text) {
-      const occurrences = fuzzaldrinPlus.match(text, this.searchText);
+    highlightText(text, addEllipsis) {
+      const maxText =
+        text.length < MAX_PATH_LENGTH || !addEllipsis
+          ? text
+          : `...${text.substr(text.length - MAX_PATH_LENGTH)}`;
+      const occurrences = fuzzaldrinPlus.match(maxText, this.searchText);
 
-      return text
+      return maxText
         .split('')
         .map(
           (char, i) =>
@@ -56,21 +62,14 @@ export default {
     <span class="diff-changed-file-content append-right-8">
       <strong
         class="diff-changed-file-name"
-        v-html="highlightText(file.name)"
+        v-html="highlightText(file.name, false)"
       >
       </strong>
       <span
         class="diff-changed-file-path prepend-top-5"
-        v-html="highlightText(file.path)"
+        v-html="highlightText(file.path, true)"
       >
       </span>
     </span>
   </a>
 </template>
-
-<style>
-.highlighted {
-  color: #1b69b6;
-  font-weight: 600;
-}
-</style>

app/assets/javascripts/ide/lib/editor.js

@@ -200,13 +200,14 @@ export default class Editor {
     const getKeyCode = key => {
       const monacoKeyMod = key.indexOf('KEY_') === 0;
 
-      return monacoKeyMod ? monaco.KeyCode[key] : monaco.KeyMod[key];
+      return monacoKeyMod ? this.monaco.KeyCode[key] : this.monaco.KeyMod[key];
     };
 
     keymap.forEach(command => {
       const keybindings = command.bindings.map(binding => {
         const keys = binding.split('+');
 
+        // eslint-disable-next-line no-bitwise
         return keys.length > 1 ? getKeyCode(keys[0]) | getKeyCode(keys[1]) : getKeyCode(keys[0]);
       });
 

app/assets/stylesheets/pages/repo.scss

@@ -840,3 +840,23 @@
   align-items: center;
   font-weight: $gl-font-weight-bold;
 }
+
+.ide-file-finder-overlay {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 100;
+}
+
+.ide-file-finder {
+  top: 10px;
+  left: 50%;
+  transform: translateX(-50%);
+
+  .highlighted {
+    color: $blue-500;
+    font-weight: $gl-font-weight-bold;
+  }
+}