topbar: Rework action buttons

cockpit-project · Jun 26, 2024 · ff2f2f7 · ff2f2f7
1 parent c5e17e5
commit ff2f2f7
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 25 deletions.
diff --git 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
@@ -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
@@ -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