From de36c0d09db3b7436ac049e1956b073b03ca7586 Mon Sep 17 00:00:00 2001 From: Konstantin Schaper Date: Fri, 28 Jan 2022 14:01:43 +0100 Subject: [PATCH] Fix markdown toggle & only show source copy button on hover (#1939) A recent update added a button that lets users copy source code. In markdown files, the toggle button covers the copy button visually which does not look good and makes it hard/impossible to use. Additionally, larger markdown files with multiple code blocks have too many visible buttons that clutter the screen. This PR moves the markdown toggle above the actual display and only shows the copy button upon hovering the code that is to be copied. --- .../source-copy-and-markdown-toggle.yaml | 4 ++ .../ui-components/src/SyntaxHighlighter.tsx | 11 +++-- .../src/__snapshots__/storyshots.test.ts.snap | 44 +++++++++---------- scm-ui/ui-webapp/public/locales/de/repos.json | 4 +- scm-ui/ui-webapp/public/locales/en/repos.json | 4 +- .../content/SwitchableMarkdownViewer.tsx | 33 +++++--------- 6 files changed, 50 insertions(+), 50 deletions(-) create mode 100644 gradle/changelog/source-copy-and-markdown-toggle.yaml diff --git a/gradle/changelog/source-copy-and-markdown-toggle.yaml b/gradle/changelog/source-copy-and-markdown-toggle.yaml new file mode 100644 index 0000000000..8d76c64618 --- /dev/null +++ b/gradle/changelog/source-copy-and-markdown-toggle.yaml @@ -0,0 +1,4 @@ +- type: changed + description: Only display source code copy button on hover ([#1939](https://github.com/scm-manager/scm-manager/pull/1939)) +- type: fixed + description: Markdown toggle covers source copy button ([#1939](https://github.com/scm-manager/scm-manager/pull/1939)) diff --git a/scm-ui/ui-components/src/SyntaxHighlighter.tsx b/scm-ui/ui-components/src/SyntaxHighlighter.tsx index 23831de209..4c95636339 100644 --- a/scm-ui/ui-components/src/SyntaxHighlighter.tsx +++ b/scm-ui/ui-components/src/SyntaxHighlighter.tsx @@ -37,15 +37,20 @@ import copyToClipboard from "./CopyToClipboard"; const LINE_NUMBER_URL_HASH_REGEX = /^#line-(.*)$/; -const Container = styled.div` - position: relative; -`; const TopRightButton = styled.button` position: absolute; + display: none; top: 0; right: 0; `; +const Container = styled.div` + position: relative; + &:hover > ${TopRightButton} { + display: inline-block; + } +`; + type Props = { language?: string; value: string; diff --git a/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap b/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap index 876ccde558..308d3681a2 100644 --- a/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap +++ b/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap @@ -4614,7 +4614,7 @@ exports[`Storyshots MarkdownView Code without Lang 1`] = `