External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-02-15 18:20:00 -03:30
Code Issues Packages Projects Releases Wiki Activity

Standardize chip height (#213)

Browse Source 
* make all chips the same size

* create DetailList, Detail components; clean up Chips, ChipGroup

* delete BasicChip in favor of <Chip isReadOnly>

* create our own ChipGroup to handle overflow
This commit is contained in:
Keith Grant
2019-05-28 08:49:03 -04:00
committed by GitHub
parent 189e12f8b3
commit 29e17ac49e
25 changed files with 1455 additions and 1050 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/app.scss
View File

@@ -303,13 +303,6 @@
text-align: right;
}
.awx-c-chip {
padding: 3px 0;
height: 24px;
margin-right: 10px;
margin-bottom: 10px;
}
.awx-orgTabs-container{
display: flex
}

21
src/components/BasicChip/BasicChip.jsx
View File

@@ -1,21 +0,0 @@
import React from 'react';
import PropTypes from 'prop-types';
import { Chip } from '@patternfly/react-core';
import './basicChip.scss';
const BasicChip = ({ children, onToggle, isOverflowChip }) => (
<Chip
className="awx-c-chip--basic"
onClick={onToggle}
isOverflowChip={isOverflowChip}
>
{children}
</Chip>
);
BasicChip.propTypes = {
children: PropTypes.node.isRequired,
};
export default BasicChip;

18
src/components/BasicChip/basicChip.scss
View File

@@ -1,18 +0,0 @@
.awx-c-chip--basic {
padding: 3px 8px;
height: 24px;
margin-right: 10px;
margin-bottom: 10px;
&.pf-c-chip {
margin-top: 0;
}
&.pf-m-overflow {
padding: 0;
}
&:not(.pf-m-overflow) .pf-c-button {
display: none;
}
}

18
src/components/Chip/Chip.jsx Normal file
View File

@@ -0,0 +1,18 @@
import { Chip } from '@patternfly/react-core';
import styled from 'styled-components';
export default styled(Chip)`
--pf-c-chip--m-read-only--PaddingTop: 3px;
--pf-c-chip--m-read-only--PaddingRight: 8px;
--pf-c-chip--m-read-only--PaddingBottom: 3px;
--pf-c-chip--m-read-only--PaddingLeft: 8px;
& > .pf-c-button {
padding: 3px 8px;
}
${props => (props.isOverflowChip && `
padding: 0;
`)}
`;

41
src/components/Chip/ChipGroup.jsx Normal file
View File

@@ -0,0 +1,41 @@
import React, { useState } from 'react';
import { number } from 'prop-types';
import styled from 'styled-components';
import Chip from './Chip';
const ChipGroup = ({ children, className, showOverflowAfter, ...props }) => {
const [isExpanded, setIsExpanded] = useState(!showOverflowAfter);
const toggleIsOpen = () => setIsExpanded(!isExpanded);
const mappedChildren = React.Children.map(children, c => (
React.cloneElement(c, { component: 'li' })
));
const showOverflowToggle = showOverflowAfter && children.length > showOverflowAfter;
const numToShow = isExpanded
? children.length
: Math.min(showOverflowAfter, children.length);
const expandedText = 'Show Less';
const collapsedText = `${children.length - showOverflowAfter} more`;
return (
<ul className={`pf-c-chip-group ${className}`} {...props}>
{mappedChildren.slice(0, numToShow)}
{showOverflowToggle && (
<Chip isOverflowChip onClick={toggleIsOpen} component="li">
{isExpanded ? expandedText : collapsedText}
</Chip>
)}
</ul>
);
};
ChipGroup.propTypes = {
showOverflowAfter: number,
};
ChipGroup.defaultProps = {
showOverflowAfter: null,
};
export default styled(ChipGroup)`
--pf-c-chip-group--c-chip--MarginRight: 10px;
--pf-c-chip-group--c-chip--MarginBottom: 10px;
`;

2
src/components/Chip/index.js Normal file
View File

@@ -0,0 +1,2 @@
export { default as ChipGroup } from './ChipGroup';
export { default as Chip } from './Chip';

56
src/components/DetailList/Detail.jsx Normal file
View File

@@ -0,0 +1,56 @@
import React, { Fragment } from 'react';
import { node, bool } from 'prop-types';
import { TextListItem, TextListItemVariants } from '@patternfly/react-core';
import styled from 'styled-components';
const DetailName = styled(({ fullWidth, ...props }) => (
<TextListItem {...props} />
))`
font-weight: var(--pf-global--FontWeight--bold);
text-align: right;
${props => props.fullWidth && `
grid-column: 1;
`}
`;
const DetailValue = styled(({ fullWidth, ...props }) => (
<TextListItem {...props} />
))`
word-break: break-all;
${props => props.fullWidth && `
grid-column: 2 / -1;
`}
`;
const Detail = ({ label, value, fullWidth }) => {
if (!value) return null;
return (
<Fragment>
<DetailName
component={TextListItemVariants.dt}
fullWidth={fullWidth}
>
{label}
</DetailName>
<DetailValue
component={TextListItemVariants.dd}
fullWidth={fullWidth}
>
{value}
</DetailValue>
</Fragment>
);
};
Detail.propTypes = {
label: node.isRequired,
value: node,
fullWidth: bool,
};
Detail.defaultProps = {
value: null,
fullWidth: false,
};
export default Detail;
export { DetailName };
export { DetailValue };

28
src/components/DetailList/DetailList.jsx Normal file
View File

@@ -0,0 +1,28 @@
import React from 'react';
import { TextList, TextListVariants } from '@patternfly/react-core';
import styled from 'styled-components';
const DetailList = ({ children, stacked, ...props }) => (
<TextList component={TextListVariants.dl} {...props}>
{children}
</TextList>
);
export default styled(DetailList)`
display: grid;
grid-gap: 20px;
${props => (props.stacked ? (`
grid-template-columns: auto 1fr;
`) : (`
--column-count: 1;
grid-template-columns: repeat(var(--column-count), auto minmax(10em, 1fr));
@media (min-width: 920px) {
--column-count: 2;
}
@media (min-width: 1210px) {
--column-count: 3;
}
`))}
`;

2
src/components/DetailList/index.js Normal file
View File

@@ -0,0 +1,2 @@
export { default as DetailList } from './DetailList';
export { default as Detail, DetailName, DetailValue } from './Detail';

6
src/components/Lookup/Lookup.jsx
View File

@@ -5,7 +5,6 @@ import { SearchIcon } from '@patternfly/react-icons';
import {
Button,
ButtonVariant,
Chip,
InputGroup,
Modal,
} from '@patternfly/react-core';
@@ -17,6 +16,7 @@ import PaginatedDataList from '../PaginatedDataList';
import DataListToolbar from '../DataListToolbar';
import CheckboxListItem from '../ListItem';
import SelectedList from '../SelectedList';
import { ChipGroup, Chip } from '../Chip';
import { getQSConfig, parseNamespacedQueryString } from '../../util/qs';
class Lookup extends React.Component {
@@ -128,13 +128,13 @@ class Lookup extends React.Component {
const header = lookupHeader || i18n._(t`items`);
const chips = value ? (
<div className="pf-c-chip-group">
<ChipGroup>
{value.map(chip => (
<Chip key={chip.id} onClick={() => this.toggleSelected(chip)}>
{chip.name}
</Chip>
))}
</div>
</ChipGroup>
) : null;
return (

116
src/components/SelectedList/SelectedList.jsx
View File

@@ -1,40 +1,24 @@
import React, { Component, Fragment } from 'react';
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import {
Chip
} from '@patternfly/react-core';
import BasicChip from '../BasicChip/BasicChip';
import { Split as PFSplit, SplitItem } from '@patternfly/react-core';
import styled from 'styled-components';
import { ChipGroup, Chip } from '../Chip';
import VerticalSeparator from '../VerticalSeparator';
const selectedRowStyling = {
paddingTop: '15px',
paddingBottom: '5px',
borderLeft: '0',
borderRight: '0'
};
const Split = styled(PFSplit)`
padding-top: 15px;
padding-bottom: 5px;
border-bottom: #ebebeb var(--pf-global--BorderWidth--sm) solid;
align-items: baseline;
`;
const selectedLabelStyling = {
alignSelf: 'center',
fontSize: '14px',
fontWeight: 'bold'
};
const SplitLabelItem = styled(SplitItem)`
font-size: 14px;
font-weight: bold;
word-break: initial;
`;
class SelectedList extends Component {
constructor (props) {
super(props);
this.state = {
showOverflow: false
};
this.showOverflow = this.showOverflow.bind(this);
}
showOverflow = () => {
this.setState({ showOverflow: true });
};
render () {
const {
label,
@@ -44,58 +28,26 @@ class SelectedList extends Component {
displayKey,
isReadOnly
} = this.props;
const { showOverflow } = this.state;
const visibleItems = selected.slice(0, showOverflow ? selected.length : showOverflowAfter);
return (
<div className="awx-selectedList">
<div className="pf-l-split" style={selectedRowStyling}>
<div className="pf-l-split__item" style={selectedLabelStyling}>
{label}
</div>
<VerticalSeparator />
<div className="pf-l-split__item">
<div className="pf-c-chip-group">
{isReadOnly ? (
<Fragment>
{visibleItems
.map(selectedItem => (
<BasicChip
key={selectedItem.id}
>
{selectedItem[displayKey]}
</BasicChip>
))
}
</Fragment>
) : (
<Fragment>
{visibleItems
.map(selectedItem => (
<Chip
key={selectedItem.id}
onClick={() => onRemove(selectedItem)}
>
{selectedItem[displayKey]}
</Chip>
))
}
</Fragment>
)}
{(
!showOverflow
&& selected.length > showOverflowAfter
) && (
<Chip
isOverflowChip
onClick={() => this.showOverflow()}
>
{`${(selected.length - showOverflowAfter).toString()} more`}
</Chip>
)}
</div>
</div>
</div>
</div>
<Split>
<SplitLabelItem>
{label}
</SplitLabelItem>
<VerticalSeparator />
<SplitItem>
<ChipGroup showOverflowAfter={showOverflowAfter}>
{selected.map(item => (
<Chip
key={item.id}
isReadOnly={isReadOnly}
onClick={() => onRemove(item)}
>
{item[displayKey]}
</Chip>
))}
</ChipGroup>
</SplitItem>
</Split>
);
}
}

22
src/components/SelectedList/styles.scss
View File

@@ -1,22 +0,0 @@
.awx-selectedList {
--awx-selectedList--BackgroundColor: var(--pf-global--BackgroundColor--light-100);
--awx-selectedList--BorderColor: #ebebeb;
--awx-selectedList--BorderWidth: var(--pf-global--BorderWidth--sm);
--awx-selectedList--FontSize: var(--pf-c-chip__text--FontSize);
.pf-l-split {
padding-top: 20px;
padding-bottom: 10px;
border-bottom: var(--awx-selectedList--BorderWidth) solid var(--awx-selectedList--BorderColor);
}
.pf-l-split__item:first-child {
display: flex;
white-space: nowrap;
height: 30px;
}
.pf-c-chip {
margin-right: 10px;
margin-bottom: 10px;
}
}

23
src/components/VerticalSeparator/VerticalSeparator.jsx
View File

@@ -1,18 +1,19 @@
import React from 'react';
import styled from 'styled-components';
const Separator = styled.span`
display: inline-block;
width: 1px;
height: 30px;
margin-right: 20px;
margin-left: 20px;
background-color: #d7d7d7;
vertical-align: middle;
`;
const VerticalSeparator = () => (
<div>
<span style={{
content: '',
backgroundColor: '#d7d7d7',
width: '1px',
height: '30px',
display: 'inline-block',
verticalAlign: 'middle',
marginLeft: '20px',
marginRight: '20px'
}}
/>
<Separator />
</div>
);

1
src/index.jsx
View File

@@ -12,7 +12,6 @@ import { t } from '@lingui/macro';
import '@patternfly/react-core/dist/styles/base.css';
import './app.scss';
import './components/SelectedList/styles.scss';
import './components/AddRole/styles.scss';
import { Config } from './contexts/Config';

164
src/pages/Organizations/components/OrganizationAccessItem.jsx
View File

@@ -5,55 +5,21 @@ import { t } from '@lingui/macro';
import {
DataListItem,
DataListItemRow,
DataListItemCells,
DataListItemCells as PFDataListItemCells,
DataListCell,
Text,
TextContent,
TextVariants,
Chip,
} from '@patternfly/react-core';
import { Link } from 'react-router-dom';
import styled from 'styled-components';
import { AccessRecord } from '../../../types';
import BasicChip from '../../../components/BasicChip/BasicChip';
import { DetailList, Detail } from '../../../components/DetailList';
import { ChipGroup, Chip } from '../../../components/Chip';
const userRolesWrapperStyle = {
display: 'flex',
flexWrap: 'wrap',
};
const detailWrapperStyle = {
display: 'grid',
gridTemplateColumns: 'minmax(70px, max-content) minmax(60px, max-content)',
};
const detailLabelStyle = {
fontWeight: '700',
lineHeight: '24px',
marginRight: '20px',
};
const detailValueStyle = {
lineHeight: '28px',
overflow: 'visible',
};
/* TODO: does PF offer any sort of <dl> treatment for this? */
const Detail = ({ label, value, url, customStyles }) => {
let detail = null;
if (value) {
detail = (
<TextContent style={{ ...detailWrapperStyle, ...customStyles }}>
{url ? (
<Link to={{ pathname: url }}>
<Text component={TextVariants.h6} style={detailLabelStyle}>{label}</Text>
</Link>) : (<Text component={TextVariants.h6} style={detailLabelStyle}>{label}</Text>
)}
<Text component={TextVariants.p} style={detailValueStyle}>{value}</Text>
</TextContent>
);
}
return detail;
};
const DataListItemCells = styled(PFDataListItemCells)`
align-items: start;
`;
class OrganizationAccessItem extends React.Component {
static propTypes = {
@@ -61,6 +27,11 @@ class OrganizationAccessItem extends React.Component {
onRoleDelete: func.isRequired,
};
constructor (props) {
super(props);
this.renderChip = this.renderChip.bind(this);
}
getRoleLists () {
const { accessRecord } = this.props;
const teamRoles = [];
@@ -80,8 +51,21 @@ class OrganizationAccessItem extends React.Component {
return [teamRoles, userRoles];
}
renderChip (role) {
const { accessRecord, onRoleDelete } = this.props;
return (
<Chip
key={role.id}
isReadOnly={!role.user_capabilities.unattach}
onClick={() => { onRoleDelete(role, accessRecord); }}
>
{role.name}
</Chip>
);
}
render () {
const { accessRecord, onRoleDelete, i18n } = this.props;
const { accessRecord, i18n } = this.props;
const [teamRoles, userRoles] = this.getRoleLists();
return (
@@ -90,76 +74,60 @@ class OrganizationAccessItem extends React.Component {
<DataListItemCells dataListCells={[
<DataListCell key="name">
{accessRecord.username && (
<TextContent style={detailWrapperStyle}>
<TextContent>
{accessRecord.url ? (
<Link to={{ pathname: accessRecord.url }}>
<Text component={TextVariants.h6} style={detailLabelStyle}>
<Text component={TextVariants.h6}>
<Link
to={{ pathname: accessRecord.url }}
css="font-weight: bold"
>
{accessRecord.username}
</Text>
</Link>
</Link>
</Text>
) : (
<Text component={TextVariants.h6} style={detailLabelStyle}>
<Text
component={TextVariants.h6}
css="font-weight: bold"
>
{accessRecord.username}
</Text>
)}
</TextContent>
)}
{accessRecord.first_name || accessRecord.last_name ? (
<Detail
label={i18n._(t`Name`)}
value={`${accessRecord.first_name} ${accessRecord.last_name}`}
url={null}
customStyles={null}
/>
<DetailList stacked>
<Detail
label={i18n._(t`Name`)}
value={`${accessRecord.first_name} ${accessRecord.last_name}`}
/>
</DetailList>
) : (
null
)}
</DataListCell>,
<DataListCell key="roles">
{userRoles.length > 0 && (
<ul style={userRolesWrapperStyle}>
<Text component={TextVariants.h6} style={detailLabelStyle}>
{i18n._(t`User Roles`)}
</Text>
{userRoles.map(role => (
role.user_capabilities.unattach ? (
<Chip
key={role.id}
className="awx-c-chip"
onClick={() => { onRoleDelete(role, accessRecord); }}
>
{role.name}
</Chip>
) : (
<BasicChip key={role.id}>
{role.name}
</BasicChip>
)
))}
</ul>
)}
{teamRoles.length > 0 && (
<ul style={userRolesWrapperStyle}>
<Text component={TextVariants.h6} style={detailLabelStyle}>
{i18n._(t`Team Roles`)}
</Text>
{teamRoles.map(role => (
role.user_capabilities.unattach ? (
<Chip
key={role.id}
className="awx-c-chip"
onClick={() => { onRoleDelete(role, accessRecord); }}
>
{role.name}
</Chip>
) : (
<BasicChip key={role.id}>
{role.name}
</BasicChip>
)
))}
</ul>
)}
<DetailList stacked>
{userRoles.length > 0 && (
<Detail
label={i18n._(t`User Roles`)}
value={(
<ChipGroup>
{userRoles.map(this.renderChip)}
</ChipGroup>
)}
/>
)}
{teamRoles.length > 0 && (
<Detail
label={i18n._(t`Team Roles`)}
value={(
<ChipGroup>
{teamRoles.map(this.renderChip)}
</ChipGroup>
)}
/>
)}
</DetailList>
</DataListCell>
]}
/>

106
src/pages/Organizations/screens/Organization/OrganizationDetail.jsx
View File

@@ -2,75 +2,24 @@ import React, { Component } from 'react';
import { Link, withRouter } from 'react-router-dom';
import { withI18n } from '@lingui/react';
import { t } from '@lingui/macro';
import {
CardBody as PFCardBody,
Button,
TextList,
TextListItem,
TextListVariants,
TextListItemVariants,
} from '@patternfly/react-core';
import { CardBody as PFCardBody, Button } from '@patternfly/react-core';
import styled from 'styled-components';
import { DetailList, Detail } from '../../../../components/DetailList';
import { withNetwork } from '../../../../contexts/Network';
import BasicChip from '../../../../components/BasicChip/BasicChip';
import { ChipGroup, Chip } from '../../../../components/Chip';
const CardBody = styled(PFCardBody)`
padding-top: 20px;
`;
const DetailList = styled(TextList)`
display: grid;
grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
grid-gap: 20px;
& > div {
display: grid;
grid-template-columns: 10em 1fr;
grid-gap: 20px;
}
`;
const DetailName = styled(TextListItem)`
&& {
grid-column: 1;
font-weight: var(--pf-global--FontWeight--bold);
text-align: right;
}
`;
const DetailValue = styled(TextListItem)`
&& {
grid-column: 2;
word-break: break-all;
}
`;
const InstanceGroupsDetail = styled.div`
grid-column: 1 / -1;
`;
const Detail = ({ label, value }) => {
if (!value) return null;
return (
<div>
<DetailName component={TextListItemVariants.dt}>{label}</DetailName>
<DetailValue component={TextListItemVariants.dd}>{value}</DetailValue>
</div>
);
};
class OrganizationDetail extends Component {
constructor (props) {
super(props);
this.state = {
instanceGroups: [],
isToggleOpen: false,
error: false
};
this.handleChipToggle = this.handleChipToggle.bind(this);
this.loadInstanceGroups = this.loadInstanceGroups.bind(this);
}
@@ -78,12 +27,6 @@ class OrganizationDetail extends Component {
this.loadInstanceGroups();
}
handleChipToggle = () => {
this.setState((prevState) => ({
isToggleOpen: !prevState.isToggleOpen
}));
}
async loadInstanceGroups () {
const {
api,
@@ -106,7 +49,6 @@ class OrganizationDetail extends Component {
const {
error,
instanceGroups,
isToggleOpen,
} = this.state;
const {
@@ -121,30 +63,10 @@ class OrganizationDetail extends Component {
match,
i18n
} = this.props;
const showOverflowChipAfter = 5;
const instanceGroupChips = instanceGroups.slice(0, isToggleOpen
? instanceGroups.length : showOverflowChipAfter)
.map(instanceGroup => (
<BasicChip
key={instanceGroup.id}
>
{instanceGroup.name}
</BasicChip>
));
const overflowChip = (instanceGroups.length > showOverflowChipAfter) ? (
<BasicChip
isOverflowChip
onToggle={this.handleChipToggle}
>
{isToggleOpen ? 'Show less' : `${(instanceGroups.length - showOverflowChipAfter).toString()} more`}
</BasicChip>
) : null;
return (
<CardBody>
<DetailList component={TextListVariants.dl}>
<DetailList>
<Detail
label={i18n._(t`Name`)}
value={name}
@@ -166,15 +88,17 @@ class OrganizationDetail extends Component {
value={modified}
/>
{(instanceGroups && instanceGroups.length > 0) && (
<InstanceGroupsDetail>
<DetailName component={TextListItemVariants.dt}>
{i18n._(t`Instance Groups`)}
</DetailName>
<DetailValue component={TextListItemVariants.dd}>
{instanceGroupChips}
{overflowChip}
</DetailValue>
</InstanceGroupsDetail>
<Detail
fullWidth
label={i18n._(t`Instance Groups`)}
value={(
<ChipGroup showOverflowAfter={5}>
{instanceGroups.map(ig => (
<Chip key={ig.id} isReadOnly>{ig.name}</Chip>
))}
</ChipGroup>
)}
/>
)}
</DetailList>
{summary_fields.user_capabilities.edit && (