diff options
| author | Dave Pisek <dpisek@gitlab.com> | 2019-09-11 16:20:05 +1000 |
|---|---|---|
| committer | Dave Pisek <dpisek@gitlab.com> | 2019-09-12 09:59:16 +1000 |
| commit | a2b028de000e67e0d20d49f8965053265589a536 (patch) | |
| tree | 17151f98cd5df90aee71c3e0cfb232a6219eb536 /app | |
| parent | b966e9e027f467cf3d8228f55d120347f1dd0079 (diff) | |
| download | gitlab-ce-project-selector-use-gitlab-ui-search-input.tar.gz | |
Use GlSearchBoxByType in project selectorproject-selector-use-gitlab-ui-search-input
Replaces the vanilla input field within the project-selector component
with a `<gl-search-box-by-type>` to improve design consistency.
Diffstat (limited to 'app')
| -rw-r--r-- | app/assets/javascripts/vue_shared/components/project_selector/project_selector.vue | 11 |
1 files changed, 4 insertions, 7 deletions
diff --git a/app/assets/javascripts/vue_shared/components/project_selector/project_selector.vue b/app/assets/javascripts/vue_shared/components/project_selector/project_selector.vue index 596fd48f96a..7f0345c7ec0 100644 --- a/app/assets/javascripts/vue_shared/components/project_selector/project_selector.vue +++ b/app/assets/javascripts/vue_shared/components/project_selector/project_selector.vue @@ -1,6 +1,6 @@ <script> import _ from 'underscore'; -import { GlLoadingIcon } from '@gitlab/ui'; +import { GlLoadingIcon, GlSearchBoxByType } from '@gitlab/ui'; import ProjectListItem from './project_list_item.vue'; const SEARCH_INPUT_TIMEOUT_MS = 500; @@ -9,6 +9,7 @@ export default { name: 'ProjectSelector', components: { GlLoadingIcon, + GlSearchBoxByType, ProjectListItem, }, props: { @@ -53,9 +54,6 @@ export default { isSelected(project) { return Boolean(_.findWhere(this.selectedProjects, { id: project.id })); }, - focusSearchInput() { - this.$refs.searchInput.focus(); - }, onInput: _.debounce(function debouncedOnInput() { this.$emit('searched', this.searchQuery); }, SEARCH_INPUT_TIMEOUT_MS), @@ -64,12 +62,11 @@ export default { </script> <template> <div> - <input - ref="searchInput" + <gl-search-box-by-type v-model="searchQuery" :placeholder="__('Search your projects')" type="search" - class="form-control mb-3 js-project-selector-input" + class="mb-3" autofocus @input="onInput" /> |