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

Fix UX nitpicks on Collections page #97

Merged
merged 10 commits into from
Feb 27, 2020
Merged

Fix UX nitpicks on Collections page #97

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
4ae2560
Fix header padding
newswangerd Feb 5, 2020
913be34
Adjust padding on search sidebar
newswangerd Feb 5, 2020
c8e95d6
Make Tags use h4 header.
newswangerd Feb 5, 2020
1b1ea52
Lower card list switcher to toolbar
newswangerd Feb 5, 2020
50110ce
Update empty state with remove filters button.
newswangerd Feb 5, 2020
3d8f44b
Remove padding on search list.
newswangerd Feb 5, 2020
faf33b2
update tags to use chip component.
newswangerd Feb 5, 2020
9a7a4b4
Swap order of content summary and tags.
newswangerd Feb 5, 2020
2c1dee2
Fix empty states and other minutia.
newswangerd Feb 13, 2020
dec5d66
fix sentence case on search filter
newswangerd Feb 13, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 5 additions & 5 deletions src/components/collection-list/collection-list-item.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,11 +79,6 @@ export class CollectionListItem extends React.Component<IProps, {}> {
<div className='entry'>
{latest_version.metadata.description}
</div>
<div className='entry pf-l-flex pf-m-wrap'>
{latest_version.metadata.tags.map((tag, index) => (
<Tag key={index}>{tag}</Tag>
))}
</div>
<div className='entry pf-l-flex pf-m-wrap content'>
{Object.keys(contentSummary.contents).map(k => (
<div key={k}>
Expand All @@ -94,6 +89,11 @@ export class CollectionListItem extends React.Component<IProps, {}> {
</div>
))}
</div>
<div className='entry pf-l-flex pf-m-wrap'>
{latest_version.metadata.tags.map((tag, index) => (
<Tag key={index}>{tag}</Tag>
))}
</div>
</DataListCell>,
);

Expand Down
15 changes: 11 additions & 4 deletions src/components/collection-list/collection-list.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import {
EmptyStateVariant,
EmptyStateBody,
} from '@patternfly/react-core';
import { WarningTriangleIcon } from '@patternfly/react-icons';
import { SearchIcon } from '@patternfly/react-icons';

import { CollectionListType } from '../../api';
import {
Expand Down Expand Up @@ -94,13 +94,20 @@ export class CollectionList extends React.Component<IProps, IState> {
className='empty'
variant={EmptyStateVariant.full}
>
<EmptyStateIcon icon={WarningTriangleIcon} />
<EmptyStateIcon icon={SearchIcon} />
<Title headingLevel='h2' size='lg'>
No collections found
No results found
</Title>
<EmptyStateBody>
Please try adjusting your search query.
No results match the filter criteria. Remove all
filters or clear all filters to show results.
</EmptyStateBody>
<Button
variant='link'
onClick={() => updateParams({})}
>
Clear all filters
</Button>
</EmptyState>
)}
</DataList>
Expand Down
5 changes: 3 additions & 2 deletions src/components/tags/tag-filter.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@ import * as React from 'react';
import { Checkbox } from '@patternfly/react-core';

import { ParamHelper } from '../../utilities/param-helper';
import { NumericLabel } from '../../components';

interface IProps {
tags: string[];
Expand All @@ -19,7 +18,9 @@ export class TagFilter extends React.Component<IProps> {
const { tags, params } = this.props;
return (
<div>
<div>Tags</div>
<div className='pf-c-content'>
<h4>Tags</h4>
</div>
{tags.map(t => (
<div
key={t}
Expand Down
3 changes: 3 additions & 0 deletions src/components/tags/tag.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
.tag {
margin: 4px;
}
19 changes: 5 additions & 14 deletions src/components/tags/tag.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,7 @@
import * as React from 'react';
import './tag.scss';

import { Chip } from '@patternfly/react-core';

interface IProps {
children: string;
Expand All @@ -7,21 +10,9 @@ interface IProps {
export class Tag extends React.Component<IProps, {}> {
render() {
return (
<div
style={{
display: 'inline-block',
margin: '4px',
backgroundColor: '#E8E6E6',
fontSize: '14px',
paddingLeft: '5px',
paddingRight: '5px',
paddingBottom: '2px',
paddingTop: '2px',
borderRadius: '3px',
}}
>
<Chip className='tag' isReadOnly>
{this.props.children}
</div>
</Chip>
);
}
}
15 changes: 4 additions & 11 deletions src/containers/namespace-detail/namespace-detail.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,6 @@
import * as React from 'react';

import {
withRouter,
RouteComponentProps,
Redirect,
Link,
} from 'react-router-dom';
import { RouteComponentProps, Redirect, Link } from 'react-router-dom';
import { Section } from '@redhat-cloud-services/frontend-components';
import {
Button,
Expand Down Expand Up @@ -76,10 +71,6 @@ export class NamespaceDetail extends React.Component<IProps, IState> {
'page_size',
]);

if (!params['tab']) {
params['tab'] = 'collections';
}

params['namespace'] = props.match.params['namespace'];

this.state = {
Expand Down Expand Up @@ -122,6 +113,8 @@ export class NamespaceDetail extends React.Component<IProps, IState> {

const tabs = ['Collections'];

const tab = params['tab'] || 'collections';

if (namespace.resources) {
tabs.push('Resources');
}
Expand Down Expand Up @@ -175,7 +168,7 @@ export class NamespaceDetail extends React.Component<IProps, IState> {
></PartnerHeader>
<Main>
<Section className='body'>
{params.tab.toLowerCase() === 'collections' ? (
{tab.toLowerCase() === 'collections' ? (
<CollectionList
updateParams={params =>
this.updateParams(params, () =>
Expand Down
2 changes: 1 addition & 1 deletion src/containers/namespace-list/namespace-list.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
}

.toolbar {
padding-bottom: 16px;
padding-bottom: 24px;
display: flex;
justify-content: space-between;
}
47 changes: 34 additions & 13 deletions src/containers/namespace-list/namespace-list.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import {
EmptyStateBody,
EmptyStateVariant,
} from '@patternfly/react-core';
import { WarningTriangleIcon } from '@patternfly/react-icons';
import { SearchIcon } from '@patternfly/react-icons';

import { ParamHelper } from '../../utilities/param-helper';
import {
Expand Down Expand Up @@ -143,7 +143,7 @@ export class NamespaceList extends React.Component<IProps, IState> {
sortOptions={[
{ title: 'Name', id: 'name', type: 'alpha' },
]}
searchPlaceholder={'Search ' + title}
searchPlaceholder={'Search ' + title.toLowerCase()}
updateParams={p =>
this.updateParams(p, () =>
this.loadNamespaces(),
Expand Down Expand Up @@ -201,17 +201,38 @@ export class NamespaceList extends React.Component<IProps, IState> {

if (namespaces.length === 0) {
return (
<EmptyState className='empty' variant={EmptyStateVariant.full}>
<EmptyStateIcon icon={WarningTriangleIcon} />
<Title headingLevel='h2' size='lg'>
{hasPermission ? 'No matches' : 'No managed namespaces'}
</Title>
<EmptyStateBody>
{hasPermission
? 'Please try adjusting your search query.'
: 'This account is not set up to manage any namespaces.'}
</EmptyStateBody>
</EmptyState>
<Section>
<EmptyState
className='empty'
variant={EmptyStateVariant.full}
>
<EmptyStateIcon icon={SearchIcon} />
<Title headingLevel='h2' size='lg'>
{hasPermission
? 'No results found'
: 'No managed namespaces'}
</Title>
<EmptyStateBody>
{hasPermission
? 'No results match the filter criteria.' +
' Remove all filters or clear all filters' +
' to show results.'
: 'This account is not set up to manage any namespaces.'}
</EmptyStateBody>
{hasPermission && (
<Button
variant='link'
onClick={() =>
this.updateParams({}, () =>
this.loadNamespaces(),
)
}
>
Clear all filters
</Button>
)}
</EmptyState>
</Section>
);
}

Expand Down
16 changes: 13 additions & 3 deletions src/containers/search/search.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,19 @@
@import '../../global-variables.scss';

.toolbar {
margin-bottom: 16px;
padding-bottom: 24px;
display: flex;
justify-content: space-between;
align-items: center;

.pagination-container {
display: flex;
align-items: center;

.card-list-switcher {
margin-right: 24px;
}
}
}

.header {
Expand All @@ -25,7 +34,7 @@
margin-top: -24px;
background-color: white;
min-width: 190px;
padding: 16px;
padding: 24px;
padding-top: 24px;

@media (max-width: $breakpoint-md) {
Expand All @@ -52,7 +61,8 @@
.list {
margin-bottom: 24px;
margin-left: 24px;
// padding: 15px;
padding-top: 16px;
padding-bottom: 16px;

// Hack to hide the annoying line at the top of the data list.
overflow: hidden;
Expand Down
Loading