diff options
| author |  Federico Brigante <me@fregante.com>
| 2023-02-05 19:35:22 +0800 |
|---|---|---|
| committer |  GitHub <noreply@github.com>
| 2023-02-05 19:35:22 +0800 |
| commit | 814b0948d58d93470348a03ca1746831082b72d0 (patch) | |
| tree | 6ffd1a3206e7d14d8d22a1f63f692445ae634c5e | |
| parent | fa34bfa5b73c95a4b56085c1e7cbcae621de11a2 (diff) | |
| download | refined-github-814b0948d58d93470348a03ca1746831082b72d0.tar.gz refined-github-814b0948d58d93470348a03ca1746831082b72d0.tar.zst refined-github-814b0948d58d93470348a03ca1746831082b72d0.zip | |
Add name and "Copy name" button to `rgh-feature-descriptions` (#6292)
| -rw-r--r-- | source/features/rgh-feature-descriptions.css | 5 | ||||
| -rw-r--r-- | source/features/rgh-feature-descriptions.tsx | 15 |
2 files changed, 19 insertions, 1 deletions
diff --git a/source/features/rgh-feature-descriptions.css b/source/features/rgh-feature-descriptions.css index 86b6e223..847edef5 100644 --- a/source/features/rgh-feature-descriptions.css +++ b/source/features/rgh-feature-descriptions.css @@ -2,3 +2,8 @@ flex-basis: 300px !important; flex-grow: 1; } + +.rgh-feature-description :is(code, kbd) { + font-size: 0.8em; + line-height: 0.8; +} diff --git a/source/features/rgh-feature-descriptions.tsx b/source/features/rgh-feature-descriptions.tsx index 324dc46e..3da7c0bf 100644 --- a/source/features/rgh-feature-descriptions.tsx +++ b/source/features/rgh-feature-descriptions.tsx @@ -1,6 +1,7 @@ import './rgh-feature-descriptions.css'; import React from 'dom-chef'; import * as pageDetect from 'github-url-detection'; +import {CopyIcon} from '@primer/octicons-react'; import features from '../feature-manager'; import {featuresMeta} from '../../readme.md'; @@ -24,8 +25,20 @@ async function add(infoBanner: HTMLElement): Promise<void> { <div className="Box mb-3"> <div className="Box-row d-flex gap-3 flex-wrap"> <div className="rgh-feature-description"> + <h3 className="mb-2"><code>{feature.id}</code> + <clipboard-copy + aria-label="Copy" + data-copy-feedback="Copied!" + value={feature.id} + class="Link--onHover color-fg-muted d-inline-block ml-2" + tabindex="0" + role="button" + > + <CopyIcon className="v-align-baseline"/> + </clipboard-copy> + </h3> { /* eslint-disable-next-line react/no-danger */ } - <h3 dangerouslySetInnerHTML={{__html: feature.description}}/> + <div dangerouslySetInnerHTML={{__html: feature.description}} className="h3"/> <div className="no-wrap" data-turbo-frame="repo-content-turbo-frame"> <a href={conversationsUrl.href}>Related issues</a> { |