diff options
Diffstat (limited to 'source/features/quick-pr-diff-options.tsx')
| -rw-r--r-- | source/features/quick-pr-diff-options.tsx | 36 |
1 files changed, 23 insertions, 13 deletions
diff --git a/source/features/quick-pr-diff-options.tsx b/source/features/quick-pr-diff-options.tsx index f3c4f3e9..d5165b65 100644 --- a/source/features/quick-pr-diff-options.tsx +++ b/source/features/quick-pr-diff-options.tsx @@ -31,8 +31,8 @@ function createDiffStyleToggle(): DocumentFragment { if (pageDetect.isPR()) { return isUnified - ? makeLink('split', <BookIcon/>, false) - : makeLink('unified', <DiffIcon/>, false); + ? makeLink('split', <BookIcon className="v-align-middle"/>, false) + : makeLink('unified', <DiffIcon className="v-align-middle"/>, false); } return ( @@ -43,36 +43,48 @@ function createDiffStyleToggle(): DocumentFragment { ); } +function isHidingWhitespace(): boolean { + // The selector is the native button + return new URL(location.href).searchParams.get('w') === '1' || select.exists('button[name="w"][value="0"]:not([hidden])'); +} + function createWhitespaceButton(): HTMLElement { const url = new URL(location.href); - const isHidingWhitespace = url.searchParams.get('w') === '1'; - if (isHidingWhitespace) { + if (isHidingWhitespace()) { url.searchParams.delete('w'); } else { url.searchParams.set('w', '1'); } const classes = pageDetect.isPR() - ? 'tooltipped tooltipped-s d-none d-lg-block color-icon-secondary color-fg-muted ' + (isHidingWhitespace ? '' : 'color-icon-info color-fg-accent') - : 'tooltipped tooltipped-s btn btn-sm tooltipped ' + (isHidingWhitespace ? 'color-text-tertiary color-fg-subtle' : ''); + ? 'tooltipped tooltipped-s d-none d-lg-block color-icon-secondary color-fg-muted' + : 'tooltipped tooltipped-s btn btn-sm tooltipped ' + (isHidingWhitespace() ? 'color-text-tertiary color-fg-subtle' : ''); return ( <a href={url.href} data-hotkey="d w" className={classes} - aria-label={`${isHidingWhitespace ? 'Show' : 'Hide'} whitespace changes`} + aria-label={`${isHidingWhitespace() ? 'Show' : 'Hide'} whitespace changes`} > - {pageDetect.isPR() ? <DiffModifiedIcon/> : <>{isHidingWhitespace && <CheckIcon/>} No Whitespace</>} + {pageDetect.isPR() ? <DiffModifiedIcon className="v-align-middle"/> : <>{isHidingWhitespace() && <CheckIcon/>} No Whitespace</>} </a> ); } function initPR(): false | void { - select('.js-file-filter')!.parentElement!.append( + // TODO [2022-05-01]: Remove `.js-diff-settings` from the selector (kept for GHE) + const originalToggle = select('.js-diff-settings, [aria-label="Diff settings"]')!.closest('details')!.parentElement!; + + if (!isHidingWhitespace()) { + originalToggle.after( + <div className="diffbar-item d-flex">{createWhitespaceButton()}</div>, + ); + } + + originalToggle.after( <div className="diffbar-item d-flex">{createDiffStyleToggle()}</div>, - <div className="diffbar-item d-flex">{createWhitespaceButton()}</div>, ); // Trim title @@ -82,9 +94,7 @@ function initPR(): false | void { prTitle.title = prTitle.textContent!; } - // Only show the native dropdown on medium and small screens #2597 - // TODO [2022-05-01]: Remove `.js-diff-settings` from the selector (kept for GHE) - select('.js-diff-settings, [aria-label="Diff settings"]')!.closest('details')!.classList.add('d-lg-none'); + originalToggle.classList.add('d-lg-none'); // Make space for the new button by removing "Changes from" #655 select('[data-hotkey="c"] strong')!.previousSibling!.remove(); |