Skip to content

Commit

Permalink
Merge pull request #11384 from sg00dwin/dark-theme-row-filter
Browse files Browse the repository at this point in the history 
CONSOLE-3090: [Dark Theme] Convert custom row-filter to use PatternFly ToggleGroup component for styling that is dark theme enabled.
  • Loading branch information
@openshift-merge-robot
openshift-merge-robot committed May 5, 2022
2 parents f23676d + 273d39e commit c7cb0e3
Show file tree
Hide file tree
Showing 2 changed files with 82 additions and 104 deletions.
111 changes: 41 additions & 70 deletions frontend/public/components/_row-filter.scss
View file
Original file line number Diff line number Diff line change
@@ -1,89 +1,60 @@
$color-row-filter-border: $pf-color-black-300;
$color-row-filter-border--active: $pf-color-blue-300;
@import '~@patternfly/patternfly/sass-utilities/all';

.co-m-row-filter__controls {
display: flex;
flex: 1;
flex-wrap: nowrap;
justify-content: space-between;
z-index: 1;
}

.co-m-row-filter__items {
font-weight: var(--pf-global--FontWeight--bold);
padding: 7px 10px;
white-space: nowrap;
}

.co-m-row-filter__selector {
white-space: nowrap !important;
}

.row-filter {
.co-row-filter {
background-color: var(--pf-global--BackgroundColor--100);
display: flex;
flex-wrap: wrap;
margin-bottom: $pf-global--spacer--xl;
// use pseudo element for border so .row-filter__box-es can overlaps
&::before {
border: var(--pf-global--BorderWidth--sm) solid var(--pf-global--BorderColor--100);
bottom: calc(var(--pf-global--spacer--xl) - 1px);
content: '';
left: $pf-global-gutter;
position: absolute;
right: $pf-global-gutter;
top: 0;
}
}

.row-filter__box {
background: $pf-color-black-150;
display: inline-block;
margin: 0 -1px -1px 0;
padding: 7px 10px;
// relative is to trigger z-index
position: relative;
&,
&:focus,
&:hover {
border: var(--pf-global--BorderWidth--sm) solid var(--pf-global--BorderColor--100);
color: inherit;
text-decoration: none;
}
&:focus {
border-color: var(--pf-global--BorderColor--200);
border-style: dotted;
z-index: 2;

// use pseudo element for border so that .pf-c-toggle-group__item(s) overlap
@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;
}
}
&:hover {
text-decoration: none;

.pf-c-toggle-group {
overflow: auto;
}
}

.row-filter__box--active {
background: $pf-color-blue-50;
border-color: $color-row-filter-border--active !important;
// z-index is because latter blocks overlap the joining outline of former blocks
z-index: 1;
&:focus {
border-color: darken($color-row-filter-border--active, 25%) !important;
// .pf-c-toggle-group has a default border-radius
// Since .co-row-filter wraps both .pf-c-toggle-group and .co-row-filter__items with a boxed border at > 768px,
// we move the top-right & bottom-right radius from .pf-c-toggle-group__item:list-child to the right side of the .co-row-filter box.
@media screen and (min-width: $pf-global--breakpoint--md) {
.co-row-filter .pf-c-toggle-group__item:last-child .pf-c-toggle-group__button,
.co-row-filter .pf-c-toggle-group__item:last-child .pf-c-toggle-group__button::before {
border-bottom-right-radius: 0;
border-top-right-radius: 0;
}
}

.row-filter__box--empty {
color: $pf-color-black-500 !important;
.row-filter__number-bubble {
background: inherit;
.co-row-filter__items {
font-weight: var(--pf-global--FontWeight--bold);
white-space: nowrap;

@media screen and (min-width: $pf-global--breakpoint--md) {
padding: 0 var(--pf-global--spacer--md);
}
}

.row-filter__number-bubble {
background: $pf-color-white;
border-radius: 4px;
.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: 16px;
margin-right: 6px;
line-height: var(--pf-global--LineHeight--sm);;
margin-right: var(--pf-global--spacer--sm);
padding: 2px 5px 0;
text-align: center;

&.co-row-filter__number-bubble--active {
border-color: var(--pf-global--primary-color--100);
}
}
75 changes: 41 additions & 34 deletions frontend/public/components/row-filter.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,23 +2,31 @@ import * as _ from 'lodash-es';
import * as React from 'react';
import { connect } from 'react-redux';
import * as classNames from 'classnames';
import { Button } from '@patternfly/react-core';
import { Button, Divider, Flex, FlexItem, ToggleGroup } from '@patternfly/react-core';
import { useTranslation } from 'react-i18next';

import { filterList } from '@console/dynamic-plugin-sdk/src/app/k8s/actions/k8s';
import { getQueryArgument, setQueryArgument } from './utils';

export const CheckBox = ({ title, active, number, toggle }) => {
const klass = classNames('row-filter__box', {
'row-filter__box--active': active,
'row-filter__box--empty': !number,
const klass = classNames('pf-c-toggle-group__button', {
'pf-m-selected co-row-filter__box--active': active,
'pf-m-disabled': !number,
});

return (
<a href="#" onClick={toggle} className={klass}>
<span className="row-filter__number-bubble">{number}</span>
{title}
</a>
<div className="pf-c-toggle-group__item">
<a href="#" onClick={toggle} className={klass}>
<span
className={classNames('co-row-filter__number-bubble', {
'co-row-filter__number-bubble--active': active,
})}
>
{number}
</span>
{title}
</a>
</div>
);
};

Expand All @@ -31,32 +39,31 @@ export const CheckBoxControls = ({
}) => {
const { t } = useTranslation();
return (
<div className="row">
<div className="col-xs-12">
<div className="row-filter">
{children}
<div className="co-m-row-filter__controls">
<Button
className="co-m-row-filter__selector"
disabled={allSelected}
type="button"
onClick={onSelectAll}
variant="link"
>
{t('public~Select all filters')}
</Button>
<span className="co-m-row-filter__items">
{itemCount === selectedCount ? (
itemCount
) : (
<>{t('public~{{selectedCount}} of {{itemCount}}', { selectedCount, itemCount })}</>
)}{' '}
{t('public~Item', { count: itemCount })}
</span>
</div>
</div>
</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>
);
};

Expand Down

0 comments on commit c7cb0e3

Please sign in to comment.