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

Merge pull request #4572 from mabashian/4474-datalist-width

Browse Source 
Reverts data list toolbar back to expected width on normal lists

Reviewed-by: https://github.com/apps/softwarefactory-project-zuul
This commit is contained in:
softwarefactory-project-zuul[bot]
2019-08-23 20:08:20 +00:00
committed by GitHub
parent 6e6676adb3 3079b54d31
commit 72df2ca3a3
2 changed files with 41 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
awx/ui_next/src/components/DataListToolbar/DataListToolbar.jsx
View File

@@ -46,18 +46,28 @@ const ToolbarGroup = styled(PFToolbarGroup)`
const ColumnLeft = styled.div` const ColumnLeft = styled.div`
display: flex; display: flex;
flex-grow: 1; flex-basis: ${props => (props.fillWidth ? 'auto' : '100%')};
flex-grow: ${props => (props.fillWidth ? '1' : '0')};
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
padding: 10px 0 8px 0; padding: 10px 0 8px 0;
@media screen and (min-width: 980px) {
flex-basis: ${props => (props.fillWidth ? 'auto' : '50%')};
}
`; `;
const ColumnRight = styled.div` const ColumnRight = styled.div`
flex-grow: 0;
display: flex; display: flex;
flex-basis: ${props => (props.fillWidth ? 'auto' : '100%')};
flex-grow: 0;
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
padding: 10px 0 8px 0; padding: 8px 0 10px 0;
@media screen and (min-width: 980px) {
flex-basis: ${props => (props.fillWidth ? 'auto' : '50%')};
}
`; `;
const AdditionalControlsWrapper = styled.div` const AdditionalControlsWrapper = styled.div`
@@ -94,7 +104,7 @@ class DataListToolbar extends React.Component {
return ( return (
<AWXToolbar> <AWXToolbar>
<Toolbar css={fillWidth ? 'margin-right: 0; margin-left: 0' : ''}> <Toolbar css={fillWidth ? 'margin-right: 0; margin-left: 0' : ''}>
<ColumnLeft> <ColumnLeft fillWidth={fillWidth}>
{showSelectAll && ( {showSelectAll && (
<Fragment> <Fragment>
<ToolbarItem> <ToolbarItem>
@@ -117,7 +127,7 @@ class DataListToolbar extends React.Component {
</ToolbarItem> </ToolbarItem>
<VerticalSeparator /> <VerticalSeparator />
</ColumnLeft> </ColumnLeft>
<ColumnRight> <ColumnRight fillWidth={fillWidth}>
<ToolbarItem> <ToolbarItem>
<Sort <Sort
columns={columns} columns={columns}

36
awx/ui_next/src/screens/Organization/OrganizationNotifications/__snapshots__/OrganizationNotifications.test.jsx.snap
View File

@@ -478,18 +478,27 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
_css="" _css=""
className="pf-l-toolbar DataListToolbar__Toolbar-ajzso8-1 sc-htpNat dnOsXG" className="pf-l-toolbar DataListToolbar__Toolbar-ajzso8-1 sc-htpNat dnOsXG"
> >
<DataListToolbar__ColumnLeft> <DataListToolbar__ColumnLeft
fillWidth={false}
>
<StyledComponent <StyledComponent
fillWidth={false}
forwardedComponent={ forwardedComponent={
Object { Object {
"$$typeof": Symbol(react.forward_ref), "$$typeof": Symbol(react.forward_ref),
"attrs": Array [], "attrs": Array [],
"componentStyle": ComponentStyle { "componentStyle": ComponentStyle {
"componentId": "DataListToolbar__ColumnLeft-ajzso8-3", "componentId": "DataListToolbar__ColumnLeft-ajzso8-3",
"isStatic": true, "isStatic": false,
"lastClassName": "bpkKMr", "lastClassName": "bPvPpR",
"rules": Array [ "rules": Array [
"display:flex;flex-grow:1;justify-content:flex-start;align-items:center;padding:10px 0 8px 0;", "display:flex;flex-basis:",
[Function],
";flex-grow:",
[Function],
";justify-content:flex-start;align-items:center;padding:10px 0 8px 0;@media screen and (min-width:980px){flex-basis:",
[Function],
";}",
], ],
}, },
"displayName": "DataListToolbar__ColumnLeft", "displayName": "DataListToolbar__ColumnLeft",
@@ -505,7 +514,7 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
forwardedRef={null} forwardedRef={null}
> >
<div <div
className="DataListToolbar__ColumnLeft-ajzso8-3 bpkKMr" className="DataListToolbar__ColumnLeft-ajzso8-3 bPvPpR"
> >
<Styled(ToolbarItem)> <Styled(ToolbarItem)>
<StyledComponent <StyledComponent
@@ -931,18 +940,25 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
</div> </div>
</StyledComponent> </StyledComponent>
</DataListToolbar__ColumnLeft> </DataListToolbar__ColumnLeft>
<DataListToolbar__ColumnRight> <DataListToolbar__ColumnRight
fillWidth={false}
>
<StyledComponent <StyledComponent
fillWidth={false}
forwardedComponent={ forwardedComponent={
Object { Object {
"$$typeof": Symbol(react.forward_ref), "$$typeof": Symbol(react.forward_ref),
"attrs": Array [], "attrs": Array [],
"componentStyle": ComponentStyle { "componentStyle": ComponentStyle {
"componentId": "DataListToolbar__ColumnRight-ajzso8-4", "componentId": "DataListToolbar__ColumnRight-ajzso8-4",
"isStatic": true, "isStatic": false,
"lastClassName": "aHlzn", "lastClassName": "gTMHVz",
"rules": Array [ "rules": Array [
"flex-grow:0;display:flex;justify-content:flex-start;align-items:center;padding:10px 0 8px 0;", "display:flex;flex-basis:",
[Function],
";flex-grow:0;justify-content:flex-start;align-items:center;padding:8px 0 10px 0;@media screen and (min-width:980px){flex-basis:",
[Function],
";}",
], ],
}, },
"displayName": "DataListToolbar__ColumnRight", "displayName": "DataListToolbar__ColumnRight",
@@ -958,7 +974,7 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
forwardedRef={null} forwardedRef={null}
> >
<div <div
className="DataListToolbar__ColumnRight-ajzso8-4 aHlzn" className="DataListToolbar__ColumnRight-ajzso8-4 gTMHVz"
> >
<ToolbarItem <ToolbarItem
className={null} className={null}