diff options
Diffstat (limited to 'app/assets/javascripts/blob/components/table_contents.vue')
-rw-r--r-- | app/assets/javascripts/blob/components/table_contents.vue | 50 |
1 files changed, 28 insertions, 22 deletions
diff --git a/app/assets/javascripts/blob/components/table_contents.vue b/app/assets/javascripts/blob/components/table_contents.vue index b3410b94b98..28e81b83713 100644 --- a/app/assets/javascripts/blob/components/table_contents.vue +++ b/app/assets/javascripts/blob/components/table_contents.vue @@ -1,5 +1,5 @@ <script> -import { GlDropdown, GlDropdownItem } from '@gitlab/ui'; +import { GlDisclosureDropdown } from '@gitlab/ui'; function getHeaderNumber(el) { return parseInt(el.tagName.match(/\d+/)[0], 10); @@ -7,8 +7,7 @@ function getHeaderNumber(el) { export default { components: { - GlDropdown, - GlDropdownItem, + GlDisclosureDropdown, }, data() { return { @@ -43,33 +42,40 @@ export default { } }, methods: { + close() { + this.$refs.disclosureDropdown?.close(); + }, generateHeaders() { + const BASE_PADDING = 16; const headers = [...this.blobViewer.querySelectorAll('h1,h2,h3,h4,h5,h6')]; - if (headers.length) { - const firstHeader = getHeaderNumber(headers[0]); - - this.items = headers.map((el) => ({ - text: el.textContent.trim(), - anchor: el.querySelector('a').getAttribute('id'), - spacing: Math.max((getHeaderNumber(el) - firstHeader) * 8, 0), - })); + if (headers.length === 0) { + return; } + + const firstHeader = getHeaderNumber(headers[0]); + + this.items = headers.map((el) => ({ + text: el.textContent.trim(), + href: `#${el.querySelector('a').getAttribute('id')}`, + extraAttrs: { + style: { + paddingLeft: `${BASE_PADDING + Math.max((getHeaderNumber(el) - firstHeader) * 8, 0)}px`, + }, + }, + })); }, }, }; </script> <template> - <gl-dropdown v-if="!isHidden && items.length" icon="list-bulleted" class="gl-mr-2" lazy> - <gl-dropdown-item v-for="(item, index) in items" :key="index" :href="`#${item.anchor}`"> - <span - :style="{ 'padding-left': `${item.spacing}px` }" - class="gl-display-block" - data-testid="tableContentsLink" - > - {{ item.text }} - </span> - </gl-dropdown-item> - </gl-dropdown> + <gl-disclosure-dropdown + v-if="!isHidden && items.length" + ref="disclosureDropdown" + icon="list-bulleted" + class="gl-mr-2" + :items="items" + @action="close" + /> </template> |