1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
|
<script>
import {
GlDisclosureDropdown,
GlTooltip,
GlDisclosureDropdownGroup,
GlDisclosureDropdownItem,
} from '@gitlab/ui';
import InviteMembersTrigger from '~/invite_members/components/invite_members_trigger.vue';
import { __ } from '~/locale';
import {
TOP_NAV_INVITE_MEMBERS_COMPONENT,
TRIGGER_ELEMENT_DISCLOSURE_DROPDOWN,
} from '~/invite_members/constants';
import { DROPDOWN_Y_OFFSET } from '../constants';
// Left offset required for the dropdown to be aligned with the super sidebar
const DROPDOWN_X_OFFSET = -147;
export default {
components: {
GlDisclosureDropdown,
GlDisclosureDropdownGroup,
GlDisclosureDropdownItem,
GlTooltip,
InviteMembersTrigger,
},
i18n: {
createNew: __('Create new...'),
},
props: {
groups: {
type: Array,
required: true,
},
},
data() {
return {
dropdownOpen: false,
};
},
methods: {
isInvitedMembers(groupItem) {
return groupItem.component === TOP_NAV_INVITE_MEMBERS_COMPONENT;
},
},
toggleId: 'create-menu-toggle',
dropdownOffset: { mainAxis: DROPDOWN_Y_OFFSET, crossAxis: DROPDOWN_X_OFFSET },
TRIGGER_ELEMENT_DISCLOSURE_DROPDOWN,
};
</script>
<template>
<div>
<gl-disclosure-dropdown
category="tertiary"
icon="plus"
no-caret
text-sr-only
:toggle-text="$options.i18n.createNew"
:toggle-id="$options.toggleId"
:dropdown-offset="$options.dropdownOffset"
data-qa-selector="new_menu_toggle"
data-testid="new-menu-toggle"
@shown="dropdownOpen = true"
@hidden="dropdownOpen = false"
>
<gl-disclosure-dropdown-group
v-for="(group, index) in groups"
:key="group.name"
:bordered="index !== 0"
:group="group"
>
<template v-for="groupItem in group.items">
<invite-members-trigger
v-if="isInvitedMembers(groupItem)"
:key="`${groupItem.text}-trigger`"
trigger-source="top-nav"
:trigger-element="$options.TRIGGER_ELEMENT_DISCLOSURE_DROPDOWN"
/>
<gl-disclosure-dropdown-item v-else :key="groupItem.text" :item="groupItem" />
</template>
</gl-disclosure-dropdown-group>
</gl-disclosure-dropdown>
<gl-tooltip
v-if="!dropdownOpen"
:target="`#${$options.toggleId}`"
placement="bottom"
container="#super-sidebar"
>
{{ $options.i18n.createNew }}
</gl-tooltip>
</div>
</template>
|
