Merge pull request #5 from mattnolting/dark-theme-row-filter

added responsive support
openshift · Apr 22, 2022 · 24f5076 · 24f5076
2 parents a0a615c + cd74734
commit 24f5076
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 47 deletions.
diff --git a/frontend/public/components/_row-filter.scss b/frontend/public/components/_row-filter.scss
@@ -1,18 +1,27 @@
+@import '~@patternfly/patternfly/sass-utilities/all';
+
 .co-row-filter {
   background-color: var(--pf-global--BackgroundColor--100);
   margin-bottom: $pf-global--spacer--xl;
+  position: relative;
 
   // use pseudo element for border so that .pf-c-toggle-group__item(s) overlap
-  &::before {
-    border: var(--pf-global--BorderWidth--sm) solid var(--pf-global--BorderColor--100);
-    border-bottom-right-radius: var(--pf-global--BorderRadius--sm);
-    border-top-right-radius: var(--pf-global--BorderRadius--sm);
-    bottom: calc(var(--pf-global--spacer--xl));
-    content: '';
-    left: $pf-global-gutter;
-    position: absolute;
-    right: $pf-global-gutter;
-    top: 0;
+  @media screen and (min-width: $pf-global--breakpoint--md) {
+    &::before {
+      border: var(--pf-global--BorderWidth--sm) solid var(--pf-global--BorderColor--100);
+      border-bottom-right-radius: var(--pf-global--BorderRadius--sm);
+      border-top-right-radius: var(--pf-global--BorderRadius--sm);
+      bottom: 0;
+      content: '';
+      left: 0;
+      position: absolute;
+      right: 0;
+      top: 0;
+    }
+  }
+
+  .pf-c-toggle-group {
+    overflow: auto;
   }
 }
 
@@ -27,16 +36,19 @@
 
 .co-row-filter__items {
   font-weight: var(--pf-global--FontWeight--bold);
-  padding: 0 var(--pf-global--spacer--md);
   white-space: nowrap;
+
+  @media screen and (min-width: $pf-global--breakpoint--md) {
+    padding: 0 var(--pf-global--spacer--md);
+  }
 }
 
 .co-row-filter__number-bubble {
   border: var(--pf-global--BorderWidth--sm) solid var(--pf-global--BorderColor--100);
   border-radius: var(--pf-global--BorderRadius--sm);
   display: inline-block;
   line-height: var(--pf-global--LineHeight--sm);;
-  margin-right: var(--pf-global--spacer--xs);
+  margin-right: var(--pf-global--spacer--sm);
   padding: 2px 5px 0;
   text-align: center;
 

diff --git a/frontend/public/components/row-filter.jsx b/frontend/public/components/row-filter.jsx
@@ -2,8 +2,9 @@ import * as _ from 'lodash-es';
 import * as React from 'react';
 import { connect } from 'react-redux';
 import * as classNames from 'classnames';
-import { Button, Flex, FlexItem, ToggleGroup } from '@patternfly/react-core';
+import { Button, Divider, Flex, FlexItem, ToggleGroup } from '@patternfly/react-core';
 import { useTranslation } from 'react-i18next';
+import '@patternfly/react-styles/css/utilities/Accessibility/accessibility.css';
 
 import { filterList } from '@console/dynamic-plugin-sdk/src/app/k8s/actions/k8s';
 import { getQueryArgument, setQueryArgument } from './utils';
@@ -39,40 +40,31 @@ export const CheckBoxControls = ({
 }) => {
   const { t } = useTranslation();
   return (
-    <div className="row">
-      <div className="col-xs-12">
-        <Flex className="co-row-filter">
-          <Flex>
-            <FlexItem>
-              <ToggleGroup>{children}</ToggleGroup>
-            </FlexItem>
-          </Flex>
-          <Flex>
-            <FlexItem>
-              <Button
-                disabled={allSelected}
-                type="button"
-                onClick={onSelectAll}
-                variant="link"
-                isInline
-              >
-                {t('public~Select all filters')}
-              </Button>
-            </FlexItem>
-          </Flex>
-          <Flex flex={{ default: 'flex_1' }}>
-            <FlexItem align={{ default: 'alignRight' }} className="co-row-filter__items">
-              {itemCount === selectedCount ? (
-                itemCount
-              ) : (
-                <>{t('public~{{selectedCount}} of {{itemCount}}', { selectedCount, itemCount })}</>
-              )}{' '}
-              {t('public~Item', { count: itemCount })}
-            </FlexItem>
-          </Flex>
-        </Flex>
-      </div>
-    </div>
+    <Flex className="co-row-filter" direction={{ default: 'column', md: 'row' }}>
+      <ToggleGroup>{children}</ToggleGroup>
+      <Divider className="pf-u-hidden-on-md" />
+      <Flex flex={{ default: 'flex_1' }}>
+        <FlexItem>
+          <Button
+            disabled={allSelected}
+            type="button"
+            onClick={onSelectAll}
+            variant="link"
+            isInline
+          >
+            {t('public~Select all filters')}
+          </Button>
+        </FlexItem>
+        <FlexItem align={{ default: 'alignRight' }} className="co-row-filter__items">
+          {itemCount === selectedCount ? (
+            itemCount
+          ) : (
+            <>{t('public~{{selectedCount}} of {{itemCount}}', { selectedCount, itemCount })}</>
+          )}{' '}
+          {t('public~Item', { count: itemCount })}
+        </FlexItem>
+      </Flex>
+    </Flex>
   );
 };