diff options
Diffstat (limited to 'source/features/clean-repo-filelist-actions.tsx')
-rw-r--r-- | source/features/clean-repo-filelist-actions.tsx | 67 |
1 files changed, 42 insertions, 25 deletions
diff --git a/source/features/clean-repo-filelist-actions.tsx b/source/features/clean-repo-filelist-actions.tsx index 01849493..98f4397d 100644 --- a/source/features/clean-repo-filelist-actions.tsx +++ b/source/features/clean-repo-filelist-actions.tsx @@ -1,32 +1,52 @@ import React from 'dom-chef'; import select from 'select-dom'; +import onetime from 'onetime'; +import {observe} from 'selector-observer'; import * as pageDetect from 'github-url-detection'; import {PlusIcon, SearchIcon} from '@primer/octicons-react'; +import {wrap} from '../helpers/dom-utils'; import features from '.'; +/** Add tooltip on a wrapper to avoid breaking dropdown functionality */ +function addTooltipToSummary(childElement: Element, tooltip: string): void { + wrap( + childElement.closest('details')!, + <div className="tooltipped tooltipped-ne" aria-label={tooltip}/> + ); +} + function init(): void { - const searchButton = select('.btn[data-hotkey="t"]')!; - searchButton.classList.add('tooltipped', 'tooltipped-ne'); - searchButton.setAttribute('aria-label', 'Go to file'); - searchButton.firstChild!.replaceWith(<SearchIcon/>); - - const addButtonWrapper = searchButton.nextElementSibling!; - if (addButtonWrapper.nodeName === 'DETAILS') { - addButtonWrapper.classList.add('tooltipped', 'tooltipped-ne'); - addButtonWrapper.setAttribute('aria-label', 'Add file'); - - const addIcon = select('.btn span', addButtonWrapper)!; - addIcon.classList.replace('d-md-flex', 'd-md-block'); - addIcon.firstChild!.replaceWith(<PlusIcon/>); - } - - const downloadButton = select('get-repo details'); - if (downloadButton) { - downloadButton.classList.add('tooltipped', 'tooltipped-ne'); - downloadButton.setAttribute('aria-label', 'Clone or download'); - select('.octicon-download', downloadButton)!.nextSibling!.remove(); - } + // `.btn` selects the desktop version + observe('.btn[data-hotkey="t"]:not(.rgh-repo-filelist-actions)', { + add(searchButton) { + searchButton.classList.add('tooltipped', 'tooltipped-ne', 'rgh-repo-filelist-actions'); + searchButton.setAttribute('aria-label', 'Go to file'); + + // Replace "Go to file" with icon + searchButton.firstChild!.replaceWith(<SearchIcon/>); + + // This button doesn't appear on `isSingleFile` + const addFileDropdown = searchButton.nextElementSibling!.querySelector('.dropdown-caret'); + if (addFileDropdown) { + addFileDropdown.parentElement!.classList.replace('d-md-flex', 'd-md-block'); + + // Replace "Add file" with icon + addFileDropdown.previousSibling!.replaceWith(<PlusIcon/>); + + addTooltipToSummary(addFileDropdown, 'Add file'); + } + + // This dropdown doesn't appear on `isSingleFile` + const downloadIcon = select('get-repo .octicon-download'); + if (downloadIcon) { + // Remove "Code" text next to it + downloadIcon.nextSibling!.remove(); + + addTooltipToSummary(downloadIcon, 'Clone, open or download'); + } + } + }); } void features.add(__filebasename, { @@ -34,8 +54,5 @@ void features.add(__filebasename, { pageDetect.isRepoTree, pageDetect.isSingleFile ], - exclude: [ - pageDetect.isEmptyRepo - ], - init + init: onetime(init) }); |