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

Merge pull request #4324 from keithjgrant/4218-lookup-toolbar-width

Browse Source 
make lookup toolbar fill width of modal

Reviewed-by: https://github.com/softwarefactory-project-zuul[bot]
This commit is contained in:
softwarefactory-project-zuul[bot] 2019-07-16 18:18:46 +00:00 committed by GitHub
commit 1242ee2b65
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 42 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -34,7 +34,7 @@ const AWXToolbar = styled.div`
const Toolbar = styled(PFToolbar)`
flex-grow: 1;
margin-left: ${props => (props.marginleft ? '0' : '20px')};
margin-left: 20px;
margin-right: 20px;
`;
@ -46,23 +46,18 @@ const ToolbarGroup = styled(PFToolbarGroup)`
const ColumnLeft = styled.div`
display: flex;
flex-basis: 100%;
flex-grow: 1;
justify-content: flex-start;
align-items: center;
padding: 10px 0 8px 0;
@media screen and (min-width: 980px) {
flex-basis: 50%;
}
`;
const ColumnRight = styled(ColumnLeft)`
padding: 8px 0 10px 0;
@media screen and (min-width: 980px) {
margin-left: 0;
padding: 10px 0 8px 0;
}
const ColumnRight = styled.div`
flex-grow: 0;
display: flex;
justify-content: flex-start;
align-items: center;
padding: 10px 0 8px 0;
`;
const AdditionalControlsWrapper = styled.div`
@ -83,7 +78,7 @@ class DataListToolbar extends React.Component {
showSelectAll,
isAllSelected,
isCompact,
noLeftMargin,
fillWidth,
onSort,
onSearch,
onCompact,
@ -98,7 +93,7 @@ class DataListToolbar extends React.Component {
const showExpandCollapse = onCompact && onExpand;
return (
<AWXToolbar>
<Toolbar marginleft={noLeftMargin ? 1 : 0}>
<Toolbar css={fillWidth ? 'margin-right: 0; margin-left: 0' : ''}>
<ColumnLeft>
{showSelectAll && (
<Fragment>
@ -159,7 +154,7 @@ DataListToolbar.propTypes = {
showSelectAll: PropTypes.bool,
isAllSelected: PropTypes.bool,
isCompact: PropTypes.bool,
noLeftMargin: PropTypes.bool,
fillWidth: PropTypes.bool,
onCompact: PropTypes.func,
onExpand: PropTypes.func,
onSearch: PropTypes.func,
@ -174,7 +169,7 @@ DataListToolbar.defaultProps = {
showSelectAll: false,
isAllSelected: false,
isCompact: false,
noLeftMargin: false,
fillWidth: false,
onCompact: null,
onExpand: null,
onSearch: null,

4
awx/ui_next/src/components/Lookup/Lookup.jsx
View File

@ -194,9 +194,7 @@ class Lookup extends React.Component {
onSelect={() => this.toggleSelected(item)}
/>
)}
renderToolbar={props => (
<DataListToolbar {...props} alignToolbarLeft />
)}
renderToolbar={props => <DataListToolbar {...props} fillWidth />}
showPageSizeOptions={false}
/>
{lookupSelectedItems.length > 0 && (

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

@ -293,10 +293,10 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
},
]
}
fillWidth={false}
i18n={"/i18n/"}
isAllSelected={false}
isCompact={false}
noLeftMargin={false}
onCompact={null}
onExpand={null}
onSearch={[Function]}
@ -335,28 +335,30 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
<div
className="DataListToolbar__AWXToolbar-ajzso8-0 bKIKDr"
>
<DataListToolbar__Toolbar
marginleft={0}
<Styled(DataListToolbar__Toolbar)
_css=""
>
<StyledComponent
_css=""
forwardedComponent={
Object {
"$$typeof": Symbol(react.forward_ref),
"attrs": Array [],
"componentStyle": ComponentStyle {
"componentId": "DataListToolbar__Toolbar-ajzso8-1",
"componentId": "sc-htpNat",
"isStatic": false,
"lastClassName": "exECbH",
"lastClassName": "dnOsXG",
"rules": Array [
"flex-grow:1;margin-left:",
"flex-grow:1;margin-left:20px;margin-right:20px;",
[Function],
";margin-right:20px;",
],
},
"displayName": "DataListToolbar__Toolbar",
"foldedComponentIds": Array [],
"displayName": "Styled(DataListToolbar__Toolbar)",
"foldedComponentIds": Array [
"DataListToolbar__Toolbar-ajzso8-1",
],
"render": [Function],
"styledComponentId": "DataListToolbar__Toolbar-ajzso8-1",
"styledComponentId": "sc-htpNat",
"target": [Function],
"toString": [Function],
"warnTooManyClasses": [Function],
@ -364,15 +366,14 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
}
}
forwardedRef={null}
marginleft={0}
>
<Toolbar
className="DataListToolbar__Toolbar-ajzso8-1 exECbH"
marginleft={0}
_css=""
className="DataListToolbar__Toolbar-ajzso8-1 sc-htpNat dnOsXG"
>
<div
className="pf-l-toolbar DataListToolbar__Toolbar-ajzso8-1 exECbH"
marginleft={0}
_css=""
className="pf-l-toolbar DataListToolbar__Toolbar-ajzso8-1 sc-htpNat dnOsXG"
>
<DataListToolbar__ColumnLeft>
<StyledComponent
@ -383,9 +384,9 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
"componentStyle": ComponentStyle {
"componentId": "DataListToolbar__ColumnLeft-ajzso8-3",
"isStatic": true,
"lastClassName": "feZLWt",
"lastClassName": "bpkKMr",
"rules": Array [
"display:flex;flex-basis:100%;justify-content:flex-start;align-items:center;padding:10px 0 8px 0;@media screen and (min-width:980px){flex-basis:50%;}",
"display:flex;flex-grow:1;justify-content:flex-start;align-items:center;padding:10px 0 8px 0;",
],
},
"displayName": "DataListToolbar__ColumnLeft",
@ -401,7 +402,7 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
forwardedRef={null}
>
<div
className="DataListToolbar__ColumnLeft-ajzso8-3 feZLWt"
className="DataListToolbar__ColumnLeft-ajzso8-3 bpkKMr"
>
<Styled(ToolbarItem)>
<StyledComponent
@ -410,9 +411,9 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
"$$typeof": Symbol(react.forward_ref),
"attrs": Array [],
"componentStyle": ComponentStyle {
"componentId": "sc-htpNat",
"componentId": "sc-bxivhb",
"isStatic": true,
"lastClassName": "dqEVhr",
"lastClassName": "gYEJOJ",
"rules": Array [
"flex-grow: 1;",
],
@ -420,7 +421,7 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
"displayName": "Styled(ToolbarItem)",
"foldedComponentIds": Array [],
"render": [Function],
"styledComponentId": "sc-htpNat",
"styledComponentId": "sc-bxivhb",
"target": [Function],
"toString": [Function],
"warnTooManyClasses": [Function],
@ -430,10 +431,10 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
forwardedRef={null}
>
<ToolbarItem
className="sc-htpNat dqEVhr"
className="sc-bxivhb gYEJOJ"
>
<div
className="pf-l-toolbar__item sc-htpNat dqEVhr"
className="pf-l-toolbar__item sc-bxivhb gYEJOJ"
>
<WithI18n
columns={
@ -1017,16 +1018,13 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
"componentStyle": ComponentStyle {
"componentId": "DataListToolbar__ColumnRight-ajzso8-4",
"isStatic": true,
"lastClassName": "Deoai",
"lastClassName": "aHlzn",
"rules": Array [
"display:flex;flex-basis:100%;justify-content:flex-start;align-items:center;padding:10px 0 8px 0;@media screen and (min-width:980px){flex-basis:50%;}",
"padding:8px 0 10px 0;@media screen and (min-width:980px){margin-left:0;padding:10px 0 8px 0;}",
"flex-grow:0;display:flex;justify-content:flex-start;align-items:center;padding:10px 0 8px 0;",
],
},
"displayName": "DataListToolbar__ColumnRight",
"foldedComponentIds": Array [
"DataListToolbar__ColumnLeft-ajzso8-3",
],
"foldedComponentIds": Array [],
"render": [Function],
"styledComponentId": "DataListToolbar__ColumnRight-ajzso8-4",
"target": "div",
@ -1038,7 +1036,7 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
forwardedRef={null}
>
<div
className="DataListToolbar__ColumnLeft-ajzso8-3 DataListToolbar__ColumnRight-ajzso8-4 Deoai"
className="DataListToolbar__ColumnRight-ajzso8-4 aHlzn"
>
<ToolbarItem
className={null}
@ -1588,7 +1586,7 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
</div>
</Toolbar>
</StyledComponent>
</DataListToolbar__Toolbar>
</Styled(DataListToolbar__Toolbar)>
</div>
</StyledComponent>
</DataListToolbar__AWXToolbar>