From aadde87f42e4b705b652f009a9681c48de2b9c61 Mon Sep 17 00:00:00 2001 From: Phil Hughes <me@iamphill.com> Date: Thu, 19 Apr 2018 12:04:49 +0100 Subject: [PATCH] moved keycodes constants to common lib file updated markup to use buttons instead of links --- .../javascripts/ide/components/file_finder/index.vue | 12 +++++++----- .../javascripts/ide/components/file_finder/item.vue | 6 +++--- app/assets/javascripts/ide/constants.js | 4 ---- app/assets/javascripts/lib/utils/keycodes.js | 4 ++++ app/assets/stylesheets/framework/common.scss | 1 + .../ide/components/file_finder/index_spec.js | 2 +- 6 files changed, 16 insertions(+), 13 deletions(-) create mode 100644 app/assets/javascripts/lib/utils/keycodes.js diff --git a/app/assets/javascripts/ide/components/file_finder/index.vue b/app/assets/javascripts/ide/components/file_finder/index.vue index deddc38c97..ea2b13a8b2 100644 --- a/app/assets/javascripts/ide/components/file_finder/index.vue +++ b/app/assets/javascripts/ide/components/file_finder/index.vue @@ -8,11 +8,13 @@ import { MAX_FILE_FINDER_RESULTS, FILE_FINDER_ROW_HEIGHT, FILE_FINDER_EMPTY_ROW_HEIGHT, +} from '../../constants'; +import { UP_KEY_CODE, DOWN_KEY_CODE, ENTER_KEY_CODE, ESC_KEY_CODE, -} from '../../constants'; +} from '../../../lib/utils/keycodes'; export default { components: { @@ -191,7 +193,7 @@ export default { ></i> <i role="button" - aria-hidden="true" + :aria-label="__('Clear search input')" class="fa fa-times dropdown-input-clear" :class="{ show: showClearInputButton @@ -225,16 +227,16 @@ export default { </template> <li v-else - class="dropdown-menu-empty-itemhidden" + class="dropdown-menu-empty-item" > - <a href="#"> + <div class="append-right-default prepend-left-default prepend-top-8 append-bottom-8"> <template v-if="loading"> {{ __('Loading...') }} </template> <template v-else> {{ __('No files found.') }} </template> - </a> + </div> </li> </virtual-list> </div> diff --git a/app/assets/javascripts/ide/components/file_finder/item.vue b/app/assets/javascripts/ide/components/file_finder/item.vue index fc29ef01f6..d442742020 100644 --- a/app/assets/javascripts/ide/components/file_finder/item.vue +++ b/app/assets/javascripts/ide/components/file_finder/item.vue @@ -58,8 +58,8 @@ export default { </script> <template> - <a - href="#" + <button + type="button" class="diff-changed-file" :class="{ 'is-focused': focused, @@ -109,5 +109,5 @@ export default { :file="file" /> </span> - </a> + </button> </template> diff --git a/app/assets/javascripts/ide/constants.js b/app/assets/javascripts/ide/constants.js index 09ee9d39d4..b06da9f95d 100644 --- a/app/assets/javascripts/ide/constants.js +++ b/app/assets/javascripts/ide/constants.js @@ -2,10 +2,6 @@ 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; // Commit message textarea export const MAX_TITLE_LENGTH = 50; diff --git a/app/assets/javascripts/lib/utils/keycodes.js b/app/assets/javascripts/lib/utils/keycodes.js new file mode 100644 index 0000000000..5e0f9b612a --- /dev/null +++ b/app/assets/javascripts/lib/utils/keycodes.js @@ -0,0 +1,4 @@ +export const UP_KEY_CODE = 38; +export const DOWN_KEY_CODE = 40; +export const ENTER_KEY_CODE = 13; +export const ESC_KEY_CODE = 27; diff --git a/app/assets/stylesheets/framework/common.scss b/app/assets/stylesheets/framework/common.scss index d0dda50a83..e058a0b35b 100644 --- a/app/assets/stylesheets/framework/common.scss +++ b/app/assets/stylesheets/framework/common.scss @@ -472,6 +472,7 @@ img.emoji { .append-right-20 { margin-right: 20px; } .append-bottom-0 { margin-bottom: 0; } .append-bottom-5 { margin-bottom: 5px; } +.append-bottom-8 { margin-bottom: $grid-size; } .append-bottom-10 { margin-bottom: 10px; } .append-bottom-15 { margin-bottom: 15px; } .append-bottom-20 { margin-bottom: 20px; } diff --git a/spec/javascripts/ide/components/file_finder/index_spec.js b/spec/javascripts/ide/components/file_finder/index_spec.js index 594427ba14..4f208e946d 100644 --- a/spec/javascripts/ide/components/file_finder/index_spec.js +++ b/spec/javascripts/ide/components/file_finder/index_spec.js @@ -1,7 +1,7 @@ import Vue from 'vue'; import store from '~/ide/stores'; import FindFileComponent from '~/ide/components/file_finder/index.vue'; -import { UP_KEY_CODE, DOWN_KEY_CODE, ENTER_KEY_CODE, ESC_KEY_CODE } from '~/ide/constants'; +import { UP_KEY_CODE, DOWN_KEY_CODE, ENTER_KEY_CODE, ESC_KEY_CODE } from '~/lib/utils/keycodes'; import router from '~/ide/ide_router'; import { file, resetStore } from '../../helpers'; import { mountComponentWithStore } from '../../../helpers/vue_mount_component_helper'; -- 2.30.9