diff options
Diffstat (limited to 'app/assets/javascripts/emoji/components/picker.vue')
-rw-r--r-- | app/assets/javascripts/emoji/components/picker.vue | 25 |
1 files changed, 14 insertions, 11 deletions
diff --git a/app/assets/javascripts/emoji/components/picker.vue b/app/assets/javascripts/emoji/components/picker.vue index 462420ba4e5..8b1784ae551 100644 --- a/app/assets/javascripts/emoji/components/picker.vue +++ b/app/assets/javascripts/emoji/components/picker.vue @@ -1,6 +1,6 @@ <!-- eslint-disable vue/multi-word-component-names --> <script> -import { GlIcon, GlDropdown, GlDropdownItem, GlSearchBoxByType } from '@gitlab/ui'; +import { GlButton, GlIcon, GlDropdown, GlDropdownItem, GlSearchBoxByType } from '@gitlab/ui'; import { findLastIndex } from 'lodash'; import VirtualList from 'vue-virtual-scroll-list'; import { getEmojiCategoryMap, state } from '~/emoji'; @@ -11,6 +11,7 @@ import { addToFrequentlyUsed, getEmojiCategories, hasFrequentlyUsedEmojis } from export default { components: { + GlButton, GlIcon, GlDropdown, GlDropdownItem, @@ -94,6 +95,11 @@ export default { this.currentCategory = findLastIndex(Object.values(categories), ({ top }) => offset >= top); }, + onHide() { + this.currentCategory = 0; + this.searchValue = ''; + this.$emit('hidden'); + }, }, }; </script> @@ -111,7 +117,7 @@ export default { :right="right" lazy @shown="$emit('shown')" - @hidden="$emit('hidden')" + @hidden="onHide" > <template #button-content> <slot name="button-content"> @@ -139,19 +145,16 @@ export default { v-show="!searchValue" class="gl-display-flex gl-mx-5 gl-border-b-solid gl-border-gray-100 gl-border-b-1" > - <button + <gl-button v-for="(category, index) in categoryNames" :key="category.name" - :class="{ - 'gl-text-body! emoji-picker-category-active': index === currentCategory, - }" - type="button" - class="gl-border-0 gl-border-b-2 gl-border-b-solid gl-flex-grow-1 gl-text-gray-300 gl-pt-3 gl-pb-3 gl-bg-transparent emoji-picker-category-tab" + category="tertiary" + :class="{ 'emoji-picker-category-active': index === currentCategory }" + class="gl-px-3! gl-rounded-0! gl-border-b-2! gl-border-b-solid! gl-flex-grow-1 emoji-picker-category-tab" + :icon="category.icon" :aria-label="category.name" @click="scrollToCategory(category.name)" - > - <gl-icon :name="category.icon" /> - </button> + /> </div> <emoji-list :search-value="searchValue"> <template #default="{ filteredCategories }"> |