Press n or j to go to the next uncovered block, b, p or k for the previous block.
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 | <script> import { GlTooltipDirective, GlIcon } from '@gitlab/ui'; import { BV_HIDE_TOOLTIP } from '~/lib/utils/constants'; import { SIDE_RIGHT } from '../constants'; import { otherSide } from '../utils'; export default { directives: { tooltip: GlTooltipDirective, }, components: { GlIcon, }, props: { tabs: { type: Array, required: true, }, side: { type: String, required: true, }, currentView: { type: String, required: false, default: '', }, isOpen: { type: Boolean, required: false, default: false, }, }, computed: { otherSide() { return otherSide(this.side); }, }, methods: { isActiveTab(tab) { return this.isOpen && tab.views.some((view) => view.name === this.currentView); }, buttonClasses(tab) { return [ { 'is-right': this.side === SIDE_RIGHT, active: this.isActiveTab(tab), }, ...(tab.buttonClasses || []), ]; }, clickTab(e, tab) { e.currentTarget.blur(); this.$root.$emit(BV_HIDE_TOOLTIP); if (this.isActiveTab(tab)) { this.$emit('close'); } else { this.$emit('open', tab.views[0]); } }, }, }; </script> <template> <nav class="ide-activity-bar"> <ul class="list-unstyled"> <li v-for="tab of tabs" :key="tab.title"> <button v-tooltip="{ container: 'body', placement: otherSide }" :title="tab.title" :aria-label="tab.title" :class="buttonClasses(tab)" class="ide-sidebar-link" type="button" @click="clickTab($event, tab)" > <gl-icon :size="16" :name="tab.icon" /> </button> </li> </ul> </nav> </template> |