diff options
Diffstat (limited to 'app/assets/javascripts/boards/components/board_add_new_column_form.vue')
-rw-r--r-- | app/assets/javascripts/boards/components/board_add_new_column_form.vue | 119 |
1 files changed, 79 insertions, 40 deletions
diff --git a/app/assets/javascripts/boards/components/board_add_new_column_form.vue b/app/assets/javascripts/boards/components/board_add_new_column_form.vue index d85343a5390..70ba90bb1d4 100644 --- a/app/assets/javascripts/boards/components/board_add_new_column_form.vue +++ b/app/assets/javascripts/boards/components/board_add_new_column_form.vue @@ -1,5 +1,12 @@ <script> -import { GlButton, GlFormGroup, GlSearchBoxByType, GlSkeletonLoader } from '@gitlab/ui'; +import { + GlButton, + GlDropdown, + GlFormGroup, + GlIcon, + GlSearchBoxByType, + GlSkeletonLoader, +} from '@gitlab/ui'; import { mapActions } from 'vuex'; import { __ } from '~/locale'; @@ -8,13 +15,16 @@ export default { add: __('Add to board'), cancel: __('Cancel'), newList: __('New list'), - noneSelected: __('None'), noResults: __('No matching results'), + scope: __('Scope'), + scopeDescription: __('Issues must match this scope to appear in this list.'), selected: __('Selected'), }, components: { GlButton, + GlDropdown, GlFormGroup, + GlIcon, GlSearchBoxByType, GlSkeletonLoader, }, @@ -23,11 +33,12 @@ export default { type: Boolean, required: true, }, - formDescription: { + searchLabel: { type: String, - required: true, + required: false, + default: null, }, - searchLabel: { + noneSelected: { type: String, required: true, }, @@ -46,8 +57,23 @@ export default { searchValue: '', }; }, + watch: { + selectedId(val) { + if (val) { + this.$refs.dropdown.hide(true); + } + }, + }, methods: { ...mapActions(['setAddColumnFormVisibility']), + setFocus() { + this.$refs.searchBox.focusInput(); + }, + onHide() { + this.searchValue = ''; + this.$emit('filter-items', ''); + this.$emit('hide'); + }, }, }; </script> @@ -62,51 +88,64 @@ export default { class="board-inner gl-display-flex gl-flex-direction-column gl-relative gl-h-full gl-rounded-base gl-bg-white" > <h3 - class="gl-font-base gl-px-5 gl-py-5 gl-m-0 gl-border-b-1 gl-border-b-solid gl-border-b-gray-100" + class="gl-font-size-h2 gl-px-5 gl-py-4 gl-m-0 gl-border-b-1 gl-border-b-solid gl-border-b-gray-100" data-testid="board-add-column-form-title" > {{ $options.i18n.newList }} </h3> - <div class="gl-display-flex gl-flex-direction-column gl-h-full gl-overflow-hidden"> - <slot name="select-list-type"> - <div class="gl-mb-5"></div> - </slot> + <div + class="gl-display-flex gl-flex-direction-column gl-h-full gl-overflow-y-auto gl-align-items-flex-start" + > + <div class="gl-px-5"> + <h3 class="gl-font-lg gl-mt-5 gl-mb-2"> + {{ $options.i18n.scope }} + </h3> + <p class="gl-mb-3">{{ $options.i18n.scopeDescription }}</p> + </div> - <p class="gl-px-5">{{ formDescription }}</p> + <slot name="select-list-type"></slot> - <div class="gl-px-5 gl-pb-4"> - <label class="gl-mb-2">{{ $options.i18n.selected }}</label> - <slot name="selected"> - <div class="gl-text-gray-500">{{ $options.i18n.noneSelected }}</div> - </slot> - </div> + <gl-form-group class="gl-px-5 lg-mb-3 gl-max-w-full" :label="searchLabel"> + <gl-dropdown + ref="dropdown" + class="gl-mb-3 gl-max-w-full" + toggle-class="gl-max-w-full gl-display-flex gl-align-items-center gl-text-trunate" + boundary="viewport" + @shown="setFocus" + @hide="onHide" + > + <template #button-content> + <slot name="selected"> + <div>{{ noneSelected }}</div> + </slot> + <gl-icon class="dropdown-chevron gl-flex-shrink-0" name="chevron-down" /> + </template> - <gl-form-group - class="gl-mx-5 gl-mb-3" - :label="searchLabel" - label-for="board-available-column-entities" - > - <gl-search-box-by-type - id="board-available-column-entities" - v-model="searchValue" - debounce="250" - :placeholder="searchPlaceholder" - @input="$emit('filter-items', $event)" - /> - </gl-form-group> + <template #header> + <gl-search-box-by-type + ref="searchBox" + v-model="searchValue" + debounce="250" + class="gl-mt-0!" + :placeholder="searchPlaceholder" + @input="$emit('filter-items', $event)" + /> + </template> - <div v-if="loading" class="gl-px-5"> - <gl-skeleton-loader :width="500" :height="172"> - <rect width="480" height="20" x="10" y="15" rx="4" /> - <rect width="380" height="20" x="10" y="50" rx="4" /> - <rect width="430" height="20" x="10" y="85" rx="4" /> - </gl-skeleton-loader> - </div> + <div v-if="loading" class="gl-px-5"> + <gl-skeleton-loader :width="400" :height="172"> + <rect width="380" height="20" x="10" y="15" rx="4" /> + <rect width="280" height="20" x="10" y="50" rx="4" /> + <rect width="330" height="20" x="10" y="85" rx="4" /> + </gl-skeleton-loader> + </div> - <slot v-else name="items"> - <p class="gl-mx-5">{{ $options.i18n.noResults }}</p> - </slot> + <slot v-else name="items"> + <p class="gl-mx-5">{{ $options.i18n.noResults }}</p> + </slot> + </gl-dropdown> + </gl-form-group> </div> <div class="gl-display-flex gl-p-3 gl-border-t-1 gl-border-t-solid gl-border-gray-100 gl-bg-gray-10 gl-rounded-bottom-left-base gl-rounded-bottom-right-base" |