From ff2f2f7f4eb92aba15830347fc02175a56fae277 Mon Sep 17 00:00:00 2001
From: Garrett LeSage <garrett@redhat.com>
Date: Mon, 24 Jun 2024 18:22:55 +0200
Subject: [PATCH] topbar: Rework action buttons

---
 src/app.scss              | 63 ++++++++++++++++++++++++++++-----------
 src/files-breadcrumbs.tsx |  8 ++---
 test/check-application    |  6 ++--
 3 files changed, 52 insertions(+), 25 deletions(-)

diff --git a/src/app.scss b/src/app.scss
index 30ff910b..54c3c188 100644
--- a/src/app.scss
+++ b/src/app.scss
@@ -18,7 +18,9 @@
 }
 
 // Move the scrollbar to the content area.
-// Do this by triggering the overflow on the fileview wrapper and sidebar panel when content doesn't fit. (Parent card is also needed to overflow, else the children won't here in this context.)
+// Do this by triggering the overflow on the fileview wrapper and sidebar panel
+// when content doesn't fit. (Parent card is also needed to overflow, else the
+// children won't here in this context.)
 .pf-v5-c-sidebar__content > .pf-v5-c-card,
 .fileview-wrapper,
 .sidebar-panel {
@@ -72,29 +74,54 @@
     @extend .ct-card;
 }
 
-.breadcrumb-button {
-    padding-inline: 0;
-}
-
-button.pf-m-secondary.breadcrumb-edit-button {
-    margin-inline-end: var(--pf-v5-global--spacer--sm);
+// We have to override PatternFly assumptions, as PatternFly does not expect
+// widgets other than breadcrumbs within a breadcrumbs bar. We should probably
+// reparent these and separate the breadcrumb into its own widget on the top
+// bar instead.
+.pf-v5-c-page__main-breadcrumb {
+    .pf-v5-c-button:not(.breadcrumb-button):has(.pf-v5-svg:last-child) {
+        // PatternFly doesn't expect icons in buttons in breadcrumbs, so we need to adjust for that
+        >.pf-v5-c-button__icon {
+            margin-inline: 0;
+        }
+    }
 
-    // PatternFly doesn't expect icons in buttons in breadcrumbs, so we need to adjust for that
-    > .pf-v5-c-button__icon {
-        margin-inline: 0;
+    .pf-v5-c-menu-toggle {
+        padding-inline: var(--pf-v5-global--spacer--md) calc(var(--pf-v5-global--spacer--md) * 0.75);
     }
 }
 
-button.breadcrumb-edit-apply-button {
-    padding-inline-end: var(--pf-v5-global--spacer--sm);
-}
+.breadcrumb {
+    &-button {
+        padding-inline: 0;
 
-button.breadcrumb-edit-cancel-button {
-    padding-inline-start: var(--pf-v5-global--spacer--sm);
-}
+        &.breadcrumb-0 {
+            margin-inline-start: var(--pf-v5-global--spacer--sm);
+        }
 
-.breadcrumb-edit-apply-icon {
-    color: var(--pf-v5-c-button--m-link--Color);
+        &-edit-apply,
+        &-edit-cancel {
+            padding-inline: var(--pf-v5-global--spacer--sm);
+        }
+
+        &-edit-apply {
+            svg {
+                color: var(--pf-v5-c-button--m-link--Color);
+            }
+
+            &:focus svg {
+                color: var(--pf-v5-c-button--m-link--focus--Color);
+            }
+
+            &:hover svg {
+                color: var(--pf-v5-c-button--m-link--hover--Color);
+            }
+
+            &:active svg {
+                color: var(--pf-v5-c-button--m-link--active--Color);
+            }
+        }
+    }
 }
 
 .path-divider {
diff --git a/src/files-breadcrumbs.tsx b/src/files-breadcrumbs.tsx
index 4b2a0296..0dcdbcd9 100644
--- a/src/files-breadcrumbs.tsx
+++ b/src/files-breadcrumbs.tsx
@@ -254,7 +254,7 @@ export function FilesBreadcrumbs({ path, showHidden, setShowHidden }: { path: st
                       variant="secondary"
                       icon={<PencilAltIcon />}
                       onClick={() => enableEditMode()}
-                      className="breadcrumb-edit-button"
+                      className="breadcrumb-button-edit"
                     />}
                 {!editMode && fullPath.map((dir, i) => {
                     return (
@@ -263,7 +263,7 @@ export function FilesBreadcrumbs({ path, showHidden, setShowHidden }: { path: st
                               isDisabled={i === path.length - 1}
                               icon={i === 0 ? <HddIcon /> : null}
                               variant="link" onClick={() => { navigate(i + 1) }}
-                              className={`breadcrumb-button breadcrumb-button-${i}`}
+                              className={`breadcrumb-button breadcrumb-${i}`}
                             >
                                 {dir || "/"}
                             </Button>
@@ -289,13 +289,13 @@ export function FilesBreadcrumbs({ path, showHidden, setShowHidden }: { path: st
                           variant="plain"
                           icon={<CheckIcon className="breadcrumb-edit-apply-icon" />}
                           onClick={changePath}
-                          className="breadcrumb-edit-apply-button"
+                          className="breadcrumb-button-edit-apply"
                         />
                         <Button
                           variant="plain"
                           icon={<TimesIcon />}
                           onClick={() => cancelPathEdit()}
-                          className="breadcrumb-edit-cancel-button"
+                          className="breadcrumb-button-edit-cancel"
                         />
                     </>}
                     <SettingsDropdown showHidden={showHidden} setShowHidden={setShowHidden} />
diff --git a/test/check-application b/test/check-application
index 59ba8b8f..89df0b66 100755
--- a/test/check-application
+++ b/test/check-application
@@ -297,9 +297,9 @@ class TestFiles(testlib.MachineCase):
 
         # Navigation via editing the path
         path_input = "#new-path-input"
-        edit_button = ".breadcrumb-edit-button"
-        apply_button = ".breadcrumb-edit-apply-button"
-        cancel_button = ".breadcrumb-edit-cancel-button"
+        edit_button = ".breadcrumb-button-edit"
+        apply_button = ".breadcrumb-button-edit-apply"
+        cancel_button = ".breadcrumb-button-edit-cancel"
 
         # Cancel