[#70073] disable diff view button when diff is empty

antmicro · Dec 12, 2024 · c34c81d · c34c81d
1 parent f48f267
commit c34c81d
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 4 deletions.
diff --git a/src/components/ButtonGroup.jsx b/src/components/ButtonGroup.jsx
@@ -14,7 +14,7 @@ const RadioButton = styled(DefaultButton)`
   border-left: none;
   border-radius: 0;
 
-  &:hover {
+  &:hover:not(&:disabled) {
     background-color: var(--icon-main-selected);
   }
 
@@ -40,9 +40,11 @@ const ButtonGroup = ({ buttons, clickedId }) => {
         <RadioButton
           className="icon radio-icon"
           type="button"
+          disabled={button.disabled}
           key={button.id}
           name={button.id}
           onClick={() => button.action()}
+          onMouseOver={() => button.hover?.()}
           title={button.tooltip}
           active={i === clickedId}
         >

diff --git a/src/components/Buttons.js b/src/components/Buttons.js
@@ -5,6 +5,10 @@ const DefaultButton = styled.button`
     outline: 0 !important;
   }
 
+  &:disabled {
+    cursor: default;
+  }
+
   cursor: pointer;
   color: var(--icon-color);
   text-transform: uppercase;

diff --git a/src/components/Topbar.jsx b/src/components/Topbar.jsx
@@ -7,7 +7,7 @@ import ButtonGroup from "./ButtonGroup";
 import Avatars from "./Avatars";
 import TemplateManager from "./TemplateManager";
 import { MystState } from "../mystState";
-import { useComputed } from "@preact/signals";
+import { useComputed, useSignal } from "@preact/signals";
 
 const renderMdLinks = (title) =>
   [...(title || "").matchAll(/\[(.+)\]\(([^\s]+)\)/g)].reduce(
@@ -200,14 +200,22 @@ const icons = {
 };
 
 export const EditorTopbar = ({ alert, users, text, buttons }) => {
-  const { options } = useContext(MystState);
+  const { options, editorView } = useContext(MystState);
   const titleHtml = useComputed(() => purify.sanitize(renderMdLinks(options.title.value)));
+  const emptyDiff = useSignal(false);
   const editorModeButtons = useComputed(() => {
     const modeButtons = [
       { id: "source", tooltip: "Source", action: () => (options.mode.value = "Source"), icon: SourceIcon },
       { id: "preview", tooltip: "Preview", action: () => (options.mode.value = "Preview"), icon: PreviewIcon },
       { id: "both", tooltip: "Dual Pane", action: () => (options.mode.value = "Both"), icon: BothIcon },
-      { id: "diff", tooltip: "Diff View", action: () => (options.mode.value = "Diff"), icon: DiffIcon },
+      {
+        id: "diff",
+        tooltip: emptyDiff.value ? "No changes to show" : "Diff View",
+        disabled: emptyDiff.value,
+        action: () => (options.mode.value = "Diff"),
+        hover: () => (emptyDiff.value = options.initialText == editorView.value?.state?.doc?.toString?.()),
+        icon: DiffIcon,
+      },
     ];
     if (options.collaboration.value.resolvingCommentsEnabled) {
       modeButtons.push({ id: "resolved", tooltip: "Resolved Comments", action: () => (options.mode.value = "Resolved"), icon: ResolvedIcon });