CR: Replace button with label

apache · Oct 18, 2024 · 8ec7aa0 · 8ec7aa0
1 parent a676844
commit 8ec7aa0
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 75 deletions.
diff --git a/packages/dmn-editor/src/DmnEditor.css b/packages/dmn-editor/src/DmnEditor.css
@@ -397,35 +397,7 @@
 
 /* (begin) evaluation-highlights panel toggle */
 .kie-dmn-editor--evaluation-highlights-panel-toggle {
-  border-radius: 40px;
-}
-.kie-dmn-editor--evaluation-highlights-panel-toggle:not(:last-child) {
-  margin-right: 16px;
-}
-
-.kie-dmn-editor--evaluation-highlights-panel-toggle:hover {
-  box-shadow: -4px 4px 2px 0px rgb(127 127 127);
-}
-.kie-dmn-editor--evaluation-highlights-panel-toggle-button,
-.kie-dmn-editor--evaluation-highlights-panel-toggle-button-off {
-  margin: 0;
-  height: 40px;
-  border-radius: 40px;
-  border: 0;
-}
-.kie-dmn-editor--evaluation-highlights-panel-toggle-button {
-  background: white;
-  border: 1px solid black;
-}
-.kie-dmn-editor--evaluation-highlights-panel-toggle-button-off {
-  background: var(--pf-global--palette--black-150);
-  border: 1px solid var(--pf-global--BorderColor--100);
-}
-.kie-dmn-editor--evaluation-highlights-panel-toggle-button:hover {
-  filter: brightness(95%);
-}
-.kie-dmn-editor--evaluation-highlights-panel-toggle-button:active {
-  filter: brightness(90%);
+  min-width: 190px;
 }
 /* (end) evaluation-highlights panel toggle */
 

diff --git a/packages/dmn-editor/src/diagram/Diagram.tsx b/packages/dmn-editor/src/diagram/Diagram.tsx
@@ -127,6 +127,7 @@ import OptimizeIcon from "@patternfly/react-icons/dist/js/icons/optimize-icon";
 import { applyAutoLayoutToDrd } from "../mutations/applyAutoLayoutToDrd";
 import { useSettings } from "../settings/DmnEditorSettingsContext";
 import { EvaluationHighlightsBadge } from "../evaluationHighlights/EvaluationHighlightsBadge";
+import { Flex } from "@patternfly/react-core/dist/js/layouts/Flex";
 
 const isFirefox = typeof (window as any).InstallTrigger !== "undefined"; // See https://stackoverflow.com/questions/9847580/how-to-detect-safari-chrome-ie-firefox-and-opera-browsers
 
@@ -1708,46 +1709,48 @@ export function TopRightCornerPanels({ availableHeight }: TopRightCornerPanelsPr
 
   return (
     <>
-      <RF.Panel position={"top-right"} style={{ display: "flex" }}>
-        {diagram.overlays.enableEvaluationHighlights && <EvaluationHighlightsBadge />}
-        {!settings.isReadOnly && (
-          <aside className={"kie-dmn-editor--autolayout-panel-toggle"}>
-            <AutolayoutButton />
-          </aside>
-        )}
-        <aside className={"kie-dmn-editor--overlays-panel-toggle"}>
-          <Popover
-            className={"kie-dmn-editor--overlay-panel-popover"}
-            key={`${diagram.overlaysPanel.isOpen}`}
-            aria-label="Overlays Panel"
-            position={"bottom-end"}
-            enableFlip={false}
-            flipBehavior={["bottom-end"]}
-            hideOnOutsideClick={false}
-            showClose={false}
-            isVisible={diagram.overlaysPanel.isOpen}
-            bodyContent={<OverlaysPanel availableHeight={(availableHeight ?? 0) - AREA_ABOVE_OVERLAYS_PANEL} />}
-          >
-            <button
-              className={"kie-dmn-editor--overlays-panel-toggle-button"}
-              onClick={toggleOverlaysPanel}
-              title={"Overlays"}
-            >
-              <VirtualMachineIcon size={"sm"} />
-            </button>
-          </Popover>
-        </aside>
-        {!diagram.propertiesPanel.isOpen && (
-          <aside className={"kie-dmn-editor--properties-panel-toggle"}>
-            <button
-              className={"kie-dmn-editor--properties-panel-toggle-button"}
-              onClick={togglePropertiesPanel}
-              title={"Properties panel"}
+      <RF.Panel position={"top-right"}>
+        <Flex>
+          {diagram.overlays.enableEvaluationHighlights && <EvaluationHighlightsBadge />}
+          {!settings.isReadOnly && (
+            <aside className={"kie-dmn-editor--autolayout-panel-toggle"}>
+              <AutolayoutButton />
+            </aside>
+          )}
+          <aside className={"kie-dmn-editor--overlays-panel-toggle"}>
+            <Popover
+              className={"kie-dmn-editor--overlay-panel-popover"}
+              key={`${diagram.overlaysPanel.isOpen}`}
+              aria-label="Overlays Panel"
+              position={"bottom-end"}
+              enableFlip={false}
+              flipBehavior={["bottom-end"]}
+              hideOnOutsideClick={false}
+              showClose={false}
+              isVisible={diagram.overlaysPanel.isOpen}
+              bodyContent={<OverlaysPanel availableHeight={(availableHeight ?? 0) - AREA_ABOVE_OVERLAYS_PANEL} />}
             >
-              <InfoIcon size={"sm"} />
-            </button>
+              <button
+                className={"kie-dmn-editor--overlays-panel-toggle-button"}
+                onClick={toggleOverlaysPanel}
+                title={"Overlays"}
+              >
+                <VirtualMachineIcon size={"sm"} />
+              </button>
+            </Popover>
           </aside>
-        )}
+          {!diagram.propertiesPanel.isOpen && (
+            <aside className={"kie-dmn-editor--properties-panel-toggle"}>
+              <button
+                className={"kie-dmn-editor--properties-panel-toggle-button"}
+                onClick={togglePropertiesPanel}
+                title={"Properties panel"}
+              >
+                <InfoIcon size={"sm"} />
+              </button>
+            </aside>
+          )}
+        </Flex>
       </RF.Panel>
     </>
   );

diff --git a/packages/dmn-editor/src/evaluationHighlights/EvaluationHighlightsBadge.tsx b/packages/dmn-editor/src/evaluationHighlights/EvaluationHighlightsBadge.tsx
@@ -19,28 +19,27 @@
 
 import * as React from "react";
 import { useDmnEditorStore, useDmnEditorStoreApi } from "../store/StoreContext";
+import { Label } from "@patternfly/react-core/dist/js/components/Label";
+import { OffIcon, OnIcon } from "@patternfly/react-icons/dist/js/icons";
 
 export function EvaluationHighlightsBadge() {
   const dmnEditorStoreApi = useDmnEditorStoreApi();
   const isEvaluationHighlightsEnabled = useDmnEditorStore((s) => s.diagram.overlays.enableEvaluationHighlights);
 
   return (
     <aside className={"kie-dmn-editor--evaluation-highlights-panel-toggle"}>
-      <button
-        className={
-          isEvaluationHighlightsEnabled
-            ? "kie-dmn-editor--evaluation-highlights-panel-toggle-button"
-            : "kie-dmn-editor--evaluation-highlights-panel-toggle-button-off"
-        }
+      <Label
+        icon={isEvaluationHighlightsEnabled ? <OnIcon /> : <OffIcon />}
+        color={isEvaluationHighlightsEnabled ? "green" : "grey"}
         onClick={() => {
           dmnEditorStoreApi.setState((state) => {
             state.diagram.overlays.enableEvaluationHighlights = !state.diagram.overlays.enableEvaluationHighlights;
           });
         }}
         title={"Evaluation highlights"}
       >
-        Evaluation Highlights: {dmnEditorStoreApi.getState().diagram.overlays.enableEvaluationHighlights ? "On" : "Off"}
-      </button>
+        Evaluation highlights: {dmnEditorStoreApi.getState().diagram.overlays.enableEvaluationHighlights ? "on" : "off"}
+      </Label>
     </aside>
   );
 }