diff options
Diffstat (limited to 'app/assets/javascripts/super_sidebar/components/create_menu.vue')
-rw-r--r-- | app/assets/javascripts/super_sidebar/components/create_menu.vue | 78 |
1 files changed, 35 insertions, 43 deletions
diff --git a/app/assets/javascripts/super_sidebar/components/create_menu.vue b/app/assets/javascripts/super_sidebar/components/create_menu.vue index 3645606515f..d1e96479631 100644 --- a/app/assets/javascripts/super_sidebar/components/create_menu.vue +++ b/app/assets/javascripts/super_sidebar/components/create_menu.vue @@ -1,7 +1,7 @@ <script> import { GlDisclosureDropdown, - GlTooltip, + GlTooltipDirective, GlDisclosureDropdownGroup, GlDisclosureDropdownItem, } from '@gitlab/ui'; @@ -14,7 +14,7 @@ import { import { DROPDOWN_Y_OFFSET, IMPERSONATING_OFFSET } from '../constants'; // Left offset required for the dropdown to be aligned with the super sidebar -const DROPDOWN_X_OFFSET_BASE = -147; +const DROPDOWN_X_OFFSET_BASE = -179; const DROPDOWN_X_OFFSET_IMPERSONATING = DROPDOWN_X_OFFSET_BASE + IMPERSONATING_OFFSET; export default { @@ -22,9 +22,11 @@ export default { GlDisclosureDropdown, GlDisclosureDropdownGroup, GlDisclosureDropdownItem, - GlTooltip, InviteMembersTrigger, }, + directives: { + GlTooltip: GlTooltipDirective, + }, i18n: { createNew: __('Create new...'), }, @@ -59,45 +61,35 @@ export default { </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="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" - noninteractive + <gl-disclosure-dropdown + v-gl-tooltip:super-sidebar.hover.bottom="dropdownOpen ? '' : $options.i18n.createNew" + category="tertiary" + icon="plus" + no-caret + text-sr-only + :toggle-text="$options.i18n.createNew" + :toggle-id="$options.toggleId" + :dropdown-offset="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" > - {{ $options.i18n.createNew }} - </gl-tooltip> - </div> + <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> </template> |