diff options
| -rw-r--r-- | source/features/collapsible-content-button.tsx | 29 |
1 files changed, 27 insertions, 2 deletions
diff --git a/source/features/collapsible-content-button.tsx b/source/features/collapsible-content-button.tsx index 93fb5469..5eeae580 100644 --- a/source/features/collapsible-content-button.tsx +++ b/source/features/collapsible-content-button.tsx @@ -3,6 +3,7 @@ import {FoldDownIcon} from '@primer/octicons-react'; import * as pageDetect from 'github-url-detection'; import * as textFieldEdit from 'text-field-edit'; import delegate, {DelegateEvent} from 'delegate-it'; +import {elementExists} from 'select-dom'; import features from '../feature-manager.js'; import smartBlockWrap from '../helpers/smart-block-wrap.js'; @@ -35,15 +36,39 @@ function addContentToDetails({delegateTarget}: DelegateEvent<MouseEvent, HTMLBut } function addButtons(referenceButton: HTMLElement): void { + const classes + = elementExists('md-ref', referenceButton) + ? [ + 'toolbar-item', + 'btn-octicon', + 'p-2', + 'p-md-1', + 'tooltipped', + 'tooltipped-sw', + 'rgh-collapsible-content-btn', + ] + : [ + 'Button', + 'Button--iconOnly', + 'Button--invisible', + 'Button--medium', + 'tooltipped', + 'tooltipped-sw', + 'rgh-collapsible-content-btn', + ]; + referenceButton.after( - <button type="button" className="toolbar-item btn-octicon p-2 p-md-1 tooltipped tooltipped-sw rgh-collapsible-content-btn" aria-label="Add collapsible content"> + <button type="button" className={classes.join(' ')} aria-label="Add collapsible content"> <FoldDownIcon/> </button>, ); } function init(signal: AbortSignal): void { - observe('md-ref', addButtons, {signal}); + observe([ + 'md-ref', // TODO: Drop in June 2024 + '.ActionBar-item:has([data-md-button=\'ref\'])', + ], addButtons, {signal}); delegate('.rgh-collapsible-content-btn', 'click', addContentToDetails, {signal}); } |