2021-06-02 15:09:59 +00:00
|
|
|
<script>
|
2021-06-16 12:10:18 +00:00
|
|
|
import { GlButton } from '@gitlab/ui';
|
|
|
|
import { mapActions, mapGetters, mapState } from 'vuex';
|
2021-06-02 15:09:59 +00:00
|
|
|
|
|
|
|
import DropdownContentsCreateView from './dropdown_contents_create_view.vue';
|
|
|
|
import DropdownContentsLabelsView from './dropdown_contents_labels_view.vue';
|
|
|
|
|
|
|
|
export default {
|
|
|
|
components: {
|
|
|
|
DropdownContentsLabelsView,
|
|
|
|
DropdownContentsCreateView,
|
2021-06-16 12:10:18 +00:00
|
|
|
GlButton,
|
2021-06-02 15:09:59 +00:00
|
|
|
},
|
|
|
|
props: {
|
|
|
|
renderOnTop: {
|
|
|
|
type: Boolean,
|
|
|
|
required: false,
|
|
|
|
default: false,
|
|
|
|
},
|
2021-06-16 12:10:18 +00:00
|
|
|
labelsCreateTitle: {
|
|
|
|
type: String,
|
|
|
|
required: true,
|
|
|
|
},
|
2021-06-02 15:09:59 +00:00
|
|
|
},
|
|
|
|
computed: {
|
2021-06-16 12:10:18 +00:00
|
|
|
...mapState(['showDropdownContentsCreateView', 'labelsListTitle']),
|
|
|
|
...mapGetters(['isDropdownVariantSidebar', 'isDropdownVariantEmbedded']),
|
2021-06-02 15:09:59 +00:00
|
|
|
dropdownContentsView() {
|
|
|
|
if (this.showDropdownContentsCreateView) {
|
|
|
|
return 'dropdown-contents-create-view';
|
|
|
|
}
|
|
|
|
return 'dropdown-contents-labels-view';
|
|
|
|
},
|
|
|
|
directionStyle() {
|
|
|
|
const bottom = this.isDropdownVariantSidebar ? '3rem' : '2rem';
|
|
|
|
return this.renderOnTop ? { bottom } : {};
|
|
|
|
},
|
2021-06-16 12:10:18 +00:00
|
|
|
dropdownTitle() {
|
|
|
|
return this.showDropdownContentsCreateView ? this.labelsCreateTitle : this.labelsListTitle;
|
|
|
|
},
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
...mapActions(['toggleDropdownContentsCreateView', 'toggleDropdownContents']),
|
2021-06-02 15:09:59 +00:00
|
|
|
},
|
|
|
|
};
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<template>
|
|
|
|
<div
|
|
|
|
class="labels-select-dropdown-contents gl-w-full gl-my-2 gl-py-3 gl-rounded-base gl-absolute"
|
|
|
|
data-qa-selector="labels_dropdown_content"
|
|
|
|
:style="directionStyle"
|
|
|
|
>
|
2021-06-16 12:10:18 +00:00
|
|
|
<div
|
|
|
|
v-if="isDropdownVariantSidebar || isDropdownVariantEmbedded"
|
|
|
|
class="dropdown-title gl-display-flex gl-align-items-center gl-pt-0 gl-pb-3!"
|
|
|
|
data-testid="dropdown-title"
|
|
|
|
>
|
|
|
|
<gl-button
|
|
|
|
v-if="showDropdownContentsCreateView"
|
|
|
|
:aria-label="__('Go back')"
|
|
|
|
variant="link"
|
|
|
|
size="small"
|
|
|
|
class="js-btn-back dropdown-header-button p-0"
|
|
|
|
icon="arrow-left"
|
|
|
|
@click="toggleDropdownContentsCreateView"
|
|
|
|
/>
|
|
|
|
<span class="flex-grow-1">{{ dropdownTitle }}</span>
|
|
|
|
<gl-button
|
|
|
|
:aria-label="__('Close')"
|
|
|
|
variant="link"
|
|
|
|
size="small"
|
|
|
|
class="dropdown-header-button gl-p-0!"
|
|
|
|
icon="close"
|
|
|
|
@click="toggleDropdownContents"
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
<component :is="dropdownContentsView" @hideCreateView="toggleDropdownContentsCreateView" />
|
2021-06-02 15:09:59 +00:00
|
|
|
</div>
|
|
|
|
</template>
|