diff options
author | Paul Slaughter <pslaughter@gitlab.com> | 2018-08-07 15:15:56 +0000 |
---|---|---|
committer | Phil Hughes <me@iamphill.com> | 2018-08-07 15:15:56 +0000 |
commit | 0d6e50d54270a973647f828047828b80fdf8d013 (patch) | |
tree | 9bf41acf27d039f673f45520187daff9d47cb04f /app/assets/javascripts/ide/components/nav_dropdown.vue | |
parent | 0e90f27ff79d1743d8ec5e49e003d4c68a689f78 (diff) | |
download | gitlab-ce-0d6e50d54270a973647f828047828b80fdf8d013.tar.gz |
Create Web IDE MR and branch picker
Diffstat (limited to 'app/assets/javascripts/ide/components/nav_dropdown.vue')
-rw-r--r-- | app/assets/javascripts/ide/components/nav_dropdown.vue | 59 |
1 files changed, 59 insertions, 0 deletions
diff --git a/app/assets/javascripts/ide/components/nav_dropdown.vue b/app/assets/javascripts/ide/components/nav_dropdown.vue new file mode 100644 index 00000000000..db36779c395 --- /dev/null +++ b/app/assets/javascripts/ide/components/nav_dropdown.vue @@ -0,0 +1,59 @@ +<script> +import $ from 'jquery'; +import Icon from '~/vue_shared/components/icon.vue'; +import NavForm from './nav_form.vue'; +import NavDropdownButton from './nav_dropdown_button.vue'; + +export default { + components: { + Icon, + NavDropdownButton, + NavForm, + }, + data() { + return { + isVisibleDropdown: false, + }; + }, + mounted() { + this.addDropdownListeners(); + }, + beforeDestroy() { + this.removeDropdownListeners(); + }, + methods: { + addDropdownListeners() { + $(this.$refs.dropdown) + .on('show.bs.dropdown', () => this.showDropdown()) + .on('hide.bs.dropdown', () => this.hideDropdown()); + }, + removeDropdownListeners() { + $(this.$refs.dropdown) + .off('show.bs.dropdown') + .off('hide.bs.dropdown'); + }, + showDropdown() { + this.isVisibleDropdown = true; + }, + hideDropdown() { + this.isVisibleDropdown = false; + }, + }, +}; +</script> + +<template> + <div + ref="dropdown" + class="btn-group ide-nav-dropdown dropdown" + > + <nav-dropdown-button /> + <div + class="dropdown-menu dropdown-menu-left p-0" + > + <nav-form + v-if="isVisibleDropdown" + /> + </div> + </div> +</template> |