diff options
Diffstat (limited to 'app/assets/javascripts')
4 files changed, 105 insertions, 85 deletions
diff --git a/app/assets/javascripts/ide/components/file_finder/index.vue b/app/assets/javascripts/ide/components/file_finder/index.vue index a7b1911fa72..843632c5c70 100644 --- a/app/assets/javascripts/ide/components/file_finder/index.vue +++ b/app/assets/javascripts/ide/components/file_finder/index.vue @@ -4,8 +4,15 @@ import fuzzaldrinPlus from 'fuzzaldrin-plus'; import VirtualList from 'vue-virtual-scroll-list'; import Item from './item.vue'; import router from '../../ide_router'; - -const MAX_RESULTS = 40; +import { + MAX_FILE_FINDER_RESULTS, + FILE_FINDER_ROW_HEIGHT, + FILE_FINDER_EMPTY_ROW_HEIGHT, + UP_KEY_CODE, + DOWN_KEY_CODE, + ENTER_KEY_CODE, + ESC_KEY_CODE, +} from '../../constants'; export default { components: { @@ -25,12 +32,14 @@ export default { filteredBlobs() { const searchText = this.searchText.trim(); - if (searchText === '') return this.allBlobs.slice(0, MAX_RESULTS); + if (searchText === '') { + return this.allBlobs.slice(0, MAX_FILE_FINDER_RESULTS); + } return fuzzaldrinPlus .filter(this.allBlobs, searchText, { key: 'path', - maxResults: MAX_RESULTS, + maxResults: MAX_FILE_FINDER_RESULTS, }) .sort((a, b) => b.lastOpenedAt - a.lastOpenedAt); }, @@ -38,12 +47,10 @@ export default { return this.filteredBlobs.length; }, listShowCount() { - if (!this.filteredBlobsLength) return 1; - - return this.filteredBlobsLength > 5 ? 5 : this.filteredBlobsLength; + return this.filteredBlobsLength ? Math.min(this.filteredBlobsLength, 5) : 1; }, listHeight() { - return this.filteredBlobsLength ? 55 : 33; + return this.filteredBlobsLength ? FILE_FINDER_ROW_HEIGHT : FILE_FINDER_EMPTY_ROW_HEIGHT; }, showClearInputButton() { return this.searchText.trim() !== ''; @@ -57,7 +64,9 @@ export default { } else { this.focusedIndex = 0; - this.$refs.searchInput.focus(); + if (this.$refs.searchInput) { + this.$refs.searchInput.focus(); + } } }); }, @@ -85,8 +94,7 @@ export default { }, onKeydown(e) { switch (e.keyCode) { - case 38: - // UP + case UP_KEY_CODE: e.preventDefault(); this.mouseOver = false; if (this.focusedIndex > 0) { @@ -95,8 +103,7 @@ export default { this.focusedIndex = this.filteredBlobsLength - 1; } break; - case 40: - // DOWN + case DOWN_KEY_CODE: e.preventDefault(); this.mouseOver = false; if (this.focusedIndex < this.filteredBlobsLength - 1) { @@ -111,12 +118,10 @@ export default { }, onKeyup(e) { switch (e.keyCode) { - case 13: - // ENTER + case ENTER_KEY_CODE: this.openFile(this.filteredBlobs[this.focusedIndex]); break; - case 27: - // ESC + case ESC_KEY_CODE: this.toggleFileFinder(false); break; default: diff --git a/app/assets/javascripts/ide/components/file_finder/item.vue b/app/assets/javascripts/ide/components/file_finder/item.vue index 3941a247234..0170f4837f8 100644 --- a/app/assets/javascripts/ide/components/file_finder/item.vue +++ b/app/assets/javascripts/ide/components/file_finder/item.vue @@ -30,9 +30,11 @@ export default { }, computed: { pathWithEllipsis() { - return this.file.path.length < MAX_PATH_LENGTH - ? this.file.path - : `...${this.file.path.substr(this.file.path.length - MAX_PATH_LENGTH)}`; + const path = this.file.path; + + return path.length < MAX_PATH_LENGTH + ? path + : `...${path.substr(path.length - MAX_PATH_LENGTH)}`; }, nameSearchTextOccurences() { return fuzzaldrinPlus.match(this.file.name, this.searchText); diff --git a/app/assets/javascripts/ide/components/ide.vue b/app/assets/javascripts/ide/components/ide.vue index 1dc162d2eb4..0274fc7d299 100644 --- a/app/assets/javascripts/ide/components/ide.vue +++ b/app/assets/javascripts/ide/components/ide.vue @@ -1,77 +1,82 @@ <script> -import { mapActions, mapState, mapGetters } from 'vuex'; -import Mousetrap from 'mousetrap'; -import ideSidebar from './ide_side_bar.vue'; -import ideContextbar from './ide_context_bar.vue'; -import repoTabs from './repo_tabs.vue'; -import ideStatusBar from './ide_status_bar.vue'; -import repoEditor from './repo_editor.vue'; -import FindFile from './file_finder/index.vue'; + import { mapActions, mapState, mapGetters } from 'vuex'; + import Mousetrap from 'mousetrap'; + import ideSidebar from './ide_side_bar.vue'; + import ideContextbar from './ide_context_bar.vue'; + import repoTabs from './repo_tabs.vue'; + import ideStatusBar from './ide_status_bar.vue'; + import repoEditor from './repo_editor.vue'; + import FindFile from './file_finder/index.vue'; -export default { - components: { - ideSidebar, - ideContextbar, - repoTabs, - ideStatusBar, - repoEditor, - FindFile, - }, - props: { - emptyStateSvgPath: { - type: String, - required: true, + const originalStopCallback = Mousetrap.stopCallback; + + export default { + components: { + ideSidebar, + ideContextbar, + repoTabs, + ideStatusBar, + repoEditor, + FindFile, }, - noChangesStateSvgPath: { - type: String, - required: true, + props: { + emptyStateSvgPath: { + type: String, + required: true, + }, + noChangesStateSvgPath: { + type: String, + required: true, + }, + committedStateSvgPath: { + type: String, + required: true, + }, }, - committedStateSvgPath: { - type: String, - required: true, + computed: { + ...mapState([ + 'changedFiles', + 'openFiles', + 'viewer', + 'currentMergeRequestId', + 'fileFindVisible', + ]), + ...mapGetters(['activeFile', 'hasChanges']), }, - }, - computed: { - ...mapState([ - 'changedFiles', - 'openFiles', - 'viewer', - 'currentMergeRequestId', - 'fileFindVisible', - ]), - ...mapGetters(['activeFile', 'hasChanges']), - }, - mounted() { - const returnValue = 'Are you sure you want to lose unsaved changes?'; - window.onbeforeunload = e => { - if (!this.changedFiles.length) return undefined; + mounted() { + const returnValue = 'Are you sure you want to lose unsaved changes?'; + window.onbeforeunload = e => { + if (!this.changedFiles.length) return undefined; - Object.assign(e, { - returnValue, - }); - return returnValue; - }; + Object.assign(e, { + returnValue, + }); + return returnValue; + }; + + Mousetrap.bind(['t', 'command+p', 'ctrl+p'], e => { + if (e.preventDefault) { + e.preventDefault(); + } - Mousetrap.bind(['t', 'command+p', 'ctrl+p'], e => { - e.preventDefault(); - this.toggleFileFinder(!this.fileFindVisible); - }); + this.toggleFileFinder(!this.fileFindVisible); + }); - const originalStopCallback = Mousetrap.stopCallback; - Mousetrap.stopCallback = (e, el, combo) => { - if (combo === 't' && el.classList.contains('dropdown-input-field')) { - return true; - } else if (combo === 'command+p' || combo === 'ctrl+p') { - return false; - } + Mousetrap.stopCallback = (e, el, combo) => this.mousetrapStopCallback(e, el, combo); + }, + methods: { + ...mapActions(['toggleFileFinder']), + mousetrapStopCallback(e, el, combo) { + if (combo === 't' && el.classList.contains('dropdown-input-field')) { + return true; + } else if (combo === 'command+p' || combo === 'ctrl+p') { + return false; + } - return originalStopCallback(e, el, combo); - }; - }, - methods: { - ...mapActions(['toggleFileFinder']), - }, -}; + return originalStopCallback(e, el, combo); + }, + }, + }; </script> <template> diff --git a/app/assets/javascripts/ide/constants.js b/app/assets/javascripts/ide/constants.js new file mode 100644 index 00000000000..e4e54f967aa --- /dev/null +++ b/app/assets/javascripts/ide/constants.js @@ -0,0 +1,8 @@ +// Fuzzy file finder +export const MAX_FILE_FINDER_RESULTS = 40; +export const FILE_FINDER_ROW_HEIGHT = 55; +export const FILE_FINDER_EMPTY_ROW_HEIGHT = 33; +export const UP_KEY_CODE = 38; +export const DOWN_KEY_CODE = 40; +export const ENTER_KEY_CODE = 13; +export const ESC_KEY_CODE = 27; |