shaba/awx
1
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2024-10-31 06:51:10 +03:00
Code Releases Activity

Reverts data list toolbar back to 50/50 width on normal lists but maintains full width on lookups.

Browse Source
This commit is contained in:
mabashian 2019-08-22 15:34:30 -04:00
parent 92bc608af3
commit 3079b54d31
2 changed files with 41 additions and 15 deletions
Show Stats 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`
display: flex;
flex-grow: 1;
flex-basis: ${props => (props.fillWidth ? 'auto' : '100%')};
flex-grow: ${props => (props.fillWidth ? '1' : '0')};
justify-content: flex-start;
align-items: center;
padding: 10px 0 8px 0;
@media screen and (min-width: 980px) {
flex-basis: ${props => (props.fillWidth ? 'auto' : '50%')};
}
`;
const ColumnRight = styled.div`
flex-grow: 0;
display: flex;
flex-basis: ${props => (props.fillWidth ? 'auto' : '100%')};
flex-grow: 0;
justify-content: flex-start;
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`
@ -94,7 +104,7 @@ class DataListToolbar extends React.Component {
return (
<AWXToolbar>
<Toolbar css={fillWidth ? 'margin-right: 0; margin-left: 0' : ''}>
<ColumnLeft>
<ColumnLeft fillWidth={fillWidth}>
{showSelectAll && (
<Fragment>
<ToolbarItem>
@ -117,7 +127,7 @@ class DataListToolbar extends React.Component {
</ToolbarItem>
<VerticalSeparator />
</ColumnLeft>
<ColumnRight>
<ColumnRight fillWidth={fillWidth}>
<ToolbarItem>
<Sort
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=""
className="pf-l-toolbar DataListToolbar__Toolbar-ajzso8-1 sc-htpNat dnOsXG"
>
<DataListToolbar__ColumnLeft>
<DataListToolbar__ColumnLeft
fillWidth={false}
>
<StyledComponent
fillWidth={false}
forwardedComponent={
Object {
"$$typeof": Symbol(react.forward_ref),
"attrs": Array [],
"componentStyle": ComponentStyle {
"componentId": "DataListToolbar__ColumnLeft-ajzso8-3",
"isStatic": true,
"lastClassName": "bpkKMr",
"isStatic": false,
"lastClassName": "bPvPpR",
"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",
@ -505,7 +514,7 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
forwardedRef={null}
>
<div
className="DataListToolbar__ColumnLeft-ajzso8-3 bpkKMr"
className="DataListToolbar__ColumnLeft-ajzso8-3 bPvPpR"
>
<Styled(ToolbarItem)>
<StyledComponent
@ -931,18 +940,25 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
</div>
</StyledComponent>
</DataListToolbar__ColumnLeft>
<DataListToolbar__ColumnRight>
<DataListToolbar__ColumnRight
fillWidth={false}
>
<StyledComponent
fillWidth={false}
forwardedComponent={
Object {
"$$typeof": Symbol(react.forward_ref),
"attrs": Array [],
"componentStyle": ComponentStyle {
"componentId": "DataListToolbar__ColumnRight-ajzso8-4",
"isStatic": true,
"lastClassName": "aHlzn",
"isStatic": false,
"lastClassName": "gTMHVz",
"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",
@ -958,7 +974,7 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
forwardedRef={null}
>
<div
className="DataListToolbar__ColumnRight-ajzso8-4 aHlzn"
className="DataListToolbar__ColumnRight-ajzso8-4 gTMHVz"
>
<ToolbarItem
className={null}