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.
2026-07-07 18:02:03 +02:00 · 2022-01-28 14:01:43 +01:00
parent f20be5dbec
commit de36c0d09d
6 changed files with 50 additions and 50 deletions
--- a/gradle/changelog/source-copy-and-markdown-toggle.yaml
+++ 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))
--- 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;
--- 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`] = `
      

      <div
-        className="SyntaxHighlighter__Container-ks8t62-0 icIltA"
+        className="SyntaxHighlighter__Container-ks8t62-1 eKVmMv"
      >
        <pre
          style={
@@ -4702,7 +4702,7 @@ exports[`Storyshots MarkdownView Code without Lang 1`] = `
          </code>
        </pre>
        <button
-          className="SyntaxHighlighter__TopRightButton-ks8t62-1 grhlRj"
+          className="SyntaxHighlighter__TopRightButton-ks8t62-0 iyikPX"
          onClick={[Function]}
          title="syntaxHighlighting.copyButton"
        >
@@ -5763,7 +5763,7 @@ Deserunt officia esse aliquip consectetur duis ut labore laborum commodo aliquip
      

      <div
-        className="SyntaxHighlighter__Container-ks8t62-0 icIltA"
+        className="SyntaxHighlighter__Container-ks8t62-1 eKVmMv"
      >
        <pre
          style={
@@ -6917,7 +6917,7 @@ Deserunt officia esse aliquip consectetur duis ut labore laborum commodo aliquip
          </code>
        </pre>
        <button
-          className="SyntaxHighlighter__TopRightButton-ks8t62-1 grhlRj"
+          className="SyntaxHighlighter__TopRightButton-ks8t62-0 iyikPX"
          onClick={[Function]}
          title="syntaxHighlighting.copyButton"
        >
@@ -14837,7 +14837,7 @@ exports[`Storyshots MarkdownView Inline Xml 1`] = `
      

      <div
-        className="SyntaxHighlighter__Container-ks8t62-0 icIltA"
+        className="SyntaxHighlighter__Container-ks8t62-1 eKVmMv"
      >
        <pre
          style={
@@ -15216,7 +15216,7 @@ exports[`Storyshots MarkdownView Inline Xml 1`] = `
          </code>
        </pre>
        <button
-          className="SyntaxHighlighter__TopRightButton-ks8t62-1 grhlRj"
+          className="SyntaxHighlighter__TopRightButton-ks8t62-0 iyikPX"
          onClick={[Function]}
          title="syntaxHighlighting.copyButton"
        >
@@ -16401,7 +16401,7 @@ Deserunt officia esse aliquip consectetur duis ut labore laborum commodo aliquip
      

      <div
-        className="SyntaxHighlighter__Container-ks8t62-0 icIltA"
+        className="SyntaxHighlighter__Container-ks8t62-1 eKVmMv"
      >
        <pre
          style={
@@ -17555,7 +17555,7 @@ Deserunt officia esse aliquip consectetur duis ut labore laborum commodo aliquip
          </code>
        </pre>
        <button
-          className="SyntaxHighlighter__TopRightButton-ks8t62-1 grhlRj"
+          className="SyntaxHighlighter__TopRightButton-ks8t62-0 iyikPX"
          onClick={[Function]}
          title="syntaxHighlighting.copyButton"
        >
@@ -17760,7 +17760,7 @@ exports[`Storyshots MarkdownView Xml Code Block 1`] = `
      

      <div
-        className="SyntaxHighlighter__Container-ks8t62-0 icIltA"
+        className="SyntaxHighlighter__Container-ks8t62-1 eKVmMv"
      >
        <pre
          style={
@@ -19178,7 +19178,7 @@ exports[`Storyshots MarkdownView Xml Code Block 1`] = `
          </code>
        </pre>
        <button
-          className="SyntaxHighlighter__TopRightButton-ks8t62-1 grhlRj"
+          className="SyntaxHighlighter__TopRightButton-ks8t62-0 iyikPX"
          onClick={[Function]}
          title="syntaxHighlighting.copyButton"
        >
@@ -76650,7 +76650,7 @@ exports[`Storyshots SyntaxHighlighter Go 1`] = `
  className="SyntaxHighlighterstories__Spacing-sc-1dcldp5-0 jbrCso"
 >
  <div
-    className="SyntaxHighlighter__Container-ks8t62-0 icIltA"
+    className="SyntaxHighlighter__Container-ks8t62-1 eKVmMv"
  >
    <pre
      style={
@@ -78017,7 +78017,7 @@ exports[`Storyshots SyntaxHighlighter Go 1`] = `
      </code>
    </pre>
    <button
-      className="SyntaxHighlighter__TopRightButton-ks8t62-1 grhlRj"
+      className="SyntaxHighlighter__TopRightButton-ks8t62-0 iyikPX"
      onClick={[Function]}
      title="syntaxHighlighting.copyButton"
    >
@@ -78034,7 +78034,7 @@ exports[`Storyshots SyntaxHighlighter Java 1`] = `
  className="SyntaxHighlighterstories__Spacing-sc-1dcldp5-0 jbrCso"
 >
  <div
-    className="SyntaxHighlighter__Container-ks8t62-0 icIltA"
+    className="SyntaxHighlighter__Container-ks8t62-1 eKVmMv"
  >
    <pre
      style={
@@ -80945,7 +80945,7 @@ exports[`Storyshots SyntaxHighlighter Java 1`] = `
      </code>
    </pre>
    <button
-      className="SyntaxHighlighter__TopRightButton-ks8t62-1 grhlRj"
+      className="SyntaxHighlighter__TopRightButton-ks8t62-0 iyikPX"
      onClick={[Function]}
      title="syntaxHighlighting.copyButton"
    >
@@ -80962,7 +80962,7 @@ exports[`Storyshots SyntaxHighlighter Javascript 1`] = `
  className="SyntaxHighlighterstories__Spacing-sc-1dcldp5-0 jbrCso"
 >
  <div
-    className="SyntaxHighlighter__Container-ks8t62-0 icIltA"
+    className="SyntaxHighlighter__Container-ks8t62-1 eKVmMv"
  >
    <pre
      style={
@@ -81768,7 +81768,7 @@ exports[`Storyshots SyntaxHighlighter Javascript 1`] = `
      </code>
    </pre>
    <button
-      className="SyntaxHighlighter__TopRightButton-ks8t62-1 grhlRj"
+      className="SyntaxHighlighter__TopRightButton-ks8t62-0 iyikPX"
      onClick={[Function]}
      title="syntaxHighlighting.copyButton"
    >
@@ -81785,7 +81785,7 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
  className="SyntaxHighlighterstories__Spacing-sc-1dcldp5-0 jbrCso"
 >
  <div
-    className="SyntaxHighlighter__Container-ks8t62-0 icIltA"
+    className="SyntaxHighlighter__Container-ks8t62-1 eKVmMv"
  >
    <pre
      style={
@@ -89753,7 +89753,7 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
      </code>
    </pre>
    <button
-      className="SyntaxHighlighter__TopRightButton-ks8t62-1 grhlRj"
+      className="SyntaxHighlighter__TopRightButton-ks8t62-0 iyikPX"
      onClick={[Function]}
      title="syntaxHighlighting.copyButton"
    >
@@ -89770,7 +89770,7 @@ exports[`Storyshots SyntaxHighlighter Python 1`] = `
  className="SyntaxHighlighterstories__Spacing-sc-1dcldp5-0 jbrCso"
 >
  <div
-    className="SyntaxHighlighter__Container-ks8t62-0 icIltA"
+    className="SyntaxHighlighter__Container-ks8t62-1 eKVmMv"
  >
    <pre
      style={
@@ -91227,7 +91227,7 @@ exports[`Storyshots SyntaxHighlighter Python 1`] = `
      </code>
    </pre>
    <button
-      className="SyntaxHighlighter__TopRightButton-ks8t62-1 grhlRj"
+      className="SyntaxHighlighter__TopRightButton-ks8t62-0 iyikPX"
      onClick={[Function]}
      title="syntaxHighlighting.copyButton"
    >
@@ -91244,7 +91244,7 @@ exports[`Storyshots SyntaxHighlighter Without line numbers 1`] = `
  className="SyntaxHighlighterstories__Spacing-sc-1dcldp5-0 jbrCso"
 >
  <div
-    className="SyntaxHighlighter__Container-ks8t62-0 icIltA"
+    className="SyntaxHighlighter__Container-ks8t62-1 eKVmMv"
  >
    <pre
      style={
@@ -93597,7 +93597,7 @@ exports[`Storyshots SyntaxHighlighter Without line numbers 1`] = `
      </code>
    </pre>
    <button
-      className="SyntaxHighlighter__TopRightButton-ks8t62-1 grhlRj"
+      className="SyntaxHighlighter__TopRightButton-ks8t62-0 iyikPX"
      onClick={[Function]}
      title="syntaxHighlighting.copyButton"
    >
--- a/scm-ui/ui-webapp/public/locales/de/repos.json
+++ b/scm-ui/ui-webapp/public/locales/de/repos.json
@@ -356,8 +356,8 @@
      "annotateButton": "Annotate",
      "downloadButton": "Download",
      "toggleButton": {
-        "showMarkdown": "Markdown rendern",
-        "showSources": "Sources anzeigen"
+        "showMarkdown": "Vorschau",
+        "showSources": "Source"
      },
      "showMore": "Mehr Informationen einblenden",
      "hideMore": "Mehr Informationen ausblenden",
--- a/scm-ui/ui-webapp/public/locales/en/repos.json
+++ b/scm-ui/ui-webapp/public/locales/en/repos.json
@@ -356,8 +356,8 @@
      "annotateButton": "Annotate",
      "downloadButton": "Download",
      "toggleButton": {
-        "showMarkdown": "Render markdown",
-        "showSources": "Show sources"
+        "showMarkdown": "Preview",
+        "showSources": "Source"
      },
      "showMore": "Show more information",
      "hideMore": "Hide more information",
--- a/scm-ui/ui-webapp/src/repos/sources/components/content/SwitchableMarkdownViewer.tsx
+++ b/scm-ui/ui-webapp/src/repos/sources/components/content/SwitchableMarkdownViewer.tsx
@@ -22,22 +22,14 @@
 * SOFTWARE.
 */
 import React, { FC, useState } from "react";
-import styled from "styled-components";
 import MarkdownViewer from "./MarkdownViewer";
 import { File } from "@scm-manager/ui-types";
-import { Button, ErrorNotification, Loading, SyntaxHighlighter } from "@scm-manager/ui-components";
+import { ErrorNotification, Loading, SyntaxHighlighter } from "@scm-manager/ui-components";
 import { useTranslation } from "react-i18next";
 import { useFileContent } from "@scm-manager/ui-api";
 import replaceBranchWithRevision from "../../ReplaceBranchWithRevision";
 import { useLocation } from "react-router-dom";
-
-const ToggleButton = styled(Button)`
-  max-width: 1rem;
-  position: absolute;
-  top: 0;
-  right: 0.25rem;
-  z-index: 30;
-`;
+import classNames from "classnames";

 type Props = {
  file: File;
@@ -65,17 +57,16 @@ const SwitchableMarkdownViewer: FC<Props> = ({ file, basePath }) => {

  return (
    <div className="is-relative">
-      <ToggleButton
-        color={renderMarkdown ? "link" : ""}
-        action={toggleMarkdown}
-        title={
-          renderMarkdown
-            ? t("sources.content.toggleButton.showSources")
-            : t("sources.content.toggleButton.showMarkdown")
-        }
-      >
-        <i className="fab fa-markdown" />
-      </ToggleButton>
+      <div className="tabs is-toggle is-right">
+        <ul>
+          <li className={classNames({ "is-active": renderMarkdown })} onClick={toggleMarkdown}>
+            <a>{t("sources.content.toggleButton.showMarkdown")}</a>
+          </li>
+          <li className={classNames({ "is-active": !renderMarkdown })} onClick={toggleMarkdown}>
+            <a>{t("sources.content.toggleButton.showSources")}</a>
+          </li>
+        </ul>
+      </div>
      {renderMarkdown ? (
        <MarkdownViewer content={content || ""} basePath={basePath} permalink={permalink} />
      ) : (