Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Bug 1924078: Make Topology quick search View all results footer sticky #8029

Merged
merged 1 commit into from Feb 3, 2021
Merged

Bug 1924078: Make Topology quick search View all results footer sticky #8029

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
4 changes: 2 additions & 2 deletions frontend/packages/topology/src/components/quick-search/QuickSearchContent.scss
View file
Open in desktop
@@ -1,9 +1,9 @@
.odc-quick-search-content {
height: calc(100% - 60px);
flex: 1;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎉

overflow-y: hidden;
&__list {
width: 40%;
height: 100%;
overflow-y: auto;
}
&__details {
background: var(--pf-global--palette--white);
Expand Down
12 changes: 10 additions & 2 deletions frontend/packages/topology/src/components/quick-search/QuickSearchContent.tsx
View file
Open in desktop
@@ -1,10 +1,13 @@
import * as React from 'react';
import cx from 'classnames';
import { CatalogItem } from '@console/plugin-sdk';
import { Split, SplitItem, Divider } from '@patternfly/react-core';
import QuickSearchDetails from './QuickSearchDetails';
import QuickSearchList from './QuickSearchList';
import './QuickSearchContent.scss';

const MAX_CATALOG_ITEMS_SHOWN = 5;

interface QuickSearchContentProps {
catalogItems: CatalogItem[];
searchTerm: string;
Expand All @@ -24,9 +27,14 @@ const QuickSearchContent: React.FC<QuickSearchContentProps> = ({
}) => {
return (
<Split className="odc-quick-search-content">
<SplitItem className="odc-quick-search-content__list">
<SplitItem
className={cx('odc-quick-search-content__list', {
'odc-quick-search-content__list--overflow':
catalogItems.length >= MAX_CATALOG_ITEMS_SHOWN,
})}
>
<QuickSearchList
listItems={catalogItems.slice(0, 5)}
listItems={catalogItems.slice(0, MAX_CATALOG_ITEMS_SHOWN)}
totalItems={catalogItems.length}
selectedItemId={selectedItemId}
searchTerm={searchTerm}
Expand Down
21 changes: 16 additions & 5 deletions frontend/packages/topology/src/components/quick-search/QuickSearchList.scss
View file
Open in desktop
@@ -1,9 +1,21 @@
.odc-quick-search-list {
border-top: var(--pf-c-data-list--sm--BorderTopWidth) solid
var(--pf-c-data-list--sm--BorderTopColor) !important;
height: 100%;
display: flex;
flex-direction: column;
&__list {
border-top: var(--pf-c-data-list--sm--BorderTopWidth) solid var(--pf-c-data-list--sm--BorderTopColor) !important;
border-bottom: var(--pf-c-data-list--sm--BorderTopWidth) solid var(--pf-c-data-list--sm--BorderTopColor) !important;
flex: 1;
overflow-y: auto;
}
&__item {
border-bottom: var(--pf-c-data-list__item--sm--BorderBottomWidth) solid
var(--pf-c-data-list__item--sm--BorderBottomColor) !important;
&:last-of-type {
.odc-quick-search-content__list--overflow & {
border-bottom: 0 !important;
}
}
&--highlight {
background: var(--pf-global--active-color--200);
}
Expand All @@ -12,7 +24,7 @@
}
}
&__item-row {
padding: 0px var(--pf-global--spacer--sm);
padding: 0 var(--pf-global--spacer--sm);
}
&__item-content {
align-items: center;
Expand All @@ -30,8 +42,7 @@
var(--pf-c-data-list__item--sm--BorderBottomColor) !important;
}
&__all-items-link {
padding: var(--pf-global--spacer--sm) 0px;
padding: var(--pf-global--spacer--sm) 0 var(--pf-global--spacer--md);
text-align: center;
font-size: var(--pf-global--FontSize--md);
}
}
124 changes: 57 additions & 67 deletions frontend/packages/topology/src/components/quick-search/QuickSearchList.tsx
View file
Open in desktop
Expand Up @@ -61,74 +61,64 @@ const QuickSearchList: React.FC<QuickSearchListProps> = ({
};

return (
<DataList
className="odc-quick-search-list"
aria-label={t('topology~Quick search list')}
selectedDataListItemId={selectedItemId}
onSelectDataListItem={(itemId) => itemId !== 'viewAll' && onSelectListItem(itemId)}
isCompact
>
{listItems.map((item) => (
<DataListItem
id={item.uid}
key={item.uid}
tabIndex={-1}
className={cx('odc-quick-search-list__item', {
'odc-quick-search-list__item--highlight': item.uid === selectedItemId,
})}
onDoubleClick={(e: React.SyntheticEvent) => openForm(e, item)}
>
<DataListItemRow className="odc-quick-search-list__item-row">
<DataListItemCells
className="odc-quick-search-list__item-content"
dataListCells={[
<DataListCell isIcon key={`${item.uid}-icon`}>
{getIcon(item)}
</DataListCell>,
<DataListCell
style={{ paddingTop: 'var(--pf-global--spacer--sm)' }}
width={2}
wrapModifier="truncate"
key={`${item.uid}-name`}
>
<span className="odc-quick-search-list__item-name">{item.name}</span>
<Split style={{ alignItems: 'center' }} hasGutter>
<SplitItem>
<Label>{item.type}</Label>
</SplitItem>
<SplitItem>
<TextContent>
<Text component={TextVariants.small}>{item.provider}</Text>
</TextContent>
</SplitItem>
</Split>
</DataListCell>,
]}
/>
</DataListItemRow>
</DataListItem>
))}
<DataListItem
id="viewAll"
className="odc-quick-search-list__all-items"
onClick={goToCatalogPage}
<div className="odc-quick-search-list">
<DataList
className="odc-quick-search-list__list"
aria-label={t('topology~Quick search list')}
selectedDataListItemId={selectedItemId}
onSelectDataListItem={(itemId) => itemId !== 'viewAll' && onSelectListItem(itemId)}
isCompact
>
<DataListItemRow className="odc-quick-search-list__all-items-link">
<DataListItemCells
dataListCells={[
<DataListCell key="view-all-link">
<Button variant="link" tabIndex={-1}>
{t('topology~View all results for "{{searchTerm}}" ({{totalItems, number}})', {
searchTerm,
totalItems,
})}
</Button>
</DataListCell>,
]}
/>
</DataListItemRow>
</DataListItem>
</DataList>
{listItems.map((item) => (
<DataListItem
id={item.uid}
key={item.uid}
tabIndex={-1}
className={cx('odc-quick-search-list__item', {
'odc-quick-search-list__item--highlight': item.uid === selectedItemId,
})}
onDoubleClick={(e: React.SyntheticEvent) => openForm(e, item)}
>
<DataListItemRow className="odc-quick-search-list__item-row">
<DataListItemCells
className="odc-quick-search-list__item-content"
dataListCells={[
<DataListCell isIcon key={`${item.uid}-icon`}>
{getIcon(item)}
</DataListCell>,
<DataListCell
style={{ paddingTop: 'var(--pf-global--spacer--sm)' }}
width={2}
wrapModifier="truncate"
key={`${item.uid}-name`}
>
<span className="odc-quick-search-list__item-name">{item.name}</span>
<Split style={{ alignItems: 'center' }} hasGutter>
<SplitItem>
<Label>{item.type}</Label>
</SplitItem>
<SplitItem>
<TextContent>
<Text component={TextVariants.small}>{item.provider}</Text>
</TextContent>
</SplitItem>
</Split>
</DataListCell>,
]}
/>
</DataListItemRow>
</DataListItem>
))}
</DataList>
<div className="odc-quick-search-list__all-items-link">
<Button variant="link" onClick={goToCatalogPage}>
{t('topology~View all results for "{{searchTerm}}" ({{totalItems, number}})', {
searchTerm,
totalItems,
})}
</Button>
</div>
</div>
);
};

Expand Down
2 changes: 2 additions & 0 deletions frontend/packages/topology/src/components/quick-search/QuickSearchModalBody.scss
View file
Open in desktop
@@ -1,3 +1,5 @@
.odc-quick-search-modal-body {
display: flex;
flex-direction: column;
min-height: 60px;
}
2 changes: 1 addition & 1 deletion frontend/packages/topology/src/components/quick-search/QuickSearchModalBody.tsx
View file
Open in desktop
Expand Up @@ -143,7 +143,7 @@ const QuickSearchModalBody: React.FC<QuickSearchModalBodyProps> = ({
<div
ref={ref}
className="odc-quick-search-modal-body"
style={{ height: catalogItems?.length > 0 ? 468 : 60 }}
style={{ height: catalogItems?.length > 0 ? 460 : 60 }}
>
<QuickSearchBar
searchTerm={searchTerm}
Expand Down