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

make lookup toolbar fill width of modal

Browse Source
This commit is contained in:
Keith Grant
2019-07-12 13:26:21 -07:00
committed by Jake McDermott
parent fef6e0b191
commit aea08eef6b
3 changed files with 42 additions and 51 deletions
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)` const Toolbar = styled(PFToolbar)`
flex-grow: 1; flex-grow: 1;
margin-left: ${props => (props.marginleft ? '0' : '20px')}; margin-left: 20px;
margin-right: 20px; margin-right: 20px;
`; `;
@@ -46,23 +46,18 @@ const ToolbarGroup = styled(PFToolbarGroup)`
const ColumnLeft = styled.div` const ColumnLeft = styled.div`
display: flex; display: flex;
flex-basis: 100%; flex-grow: 1;
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: 50%;
}
`; `;
const ColumnRight = styled(ColumnLeft)` const ColumnRight = styled.div`
padding: 8px 0 10px 0; flex-grow: 0;
display: flex;
@media screen and (min-width: 980px) { justify-content: flex-start;
margin-left: 0; align-items: center;
padding: 10px 0 8px 0; padding: 10px 0 8px 0;
}
`; `;
const AdditionalControlsWrapper = styled.div` const AdditionalControlsWrapper = styled.div`
@@ -83,7 +78,7 @@ class DataListToolbar extends React.Component {
showSelectAll, showSelectAll,
isAllSelected, isAllSelected,
isCompact, isCompact,
noLeftMargin, fillWidth,
onSort, onSort,
onSearch, onSearch,
onCompact, onCompact,
@@ -98,7 +93,7 @@ class DataListToolbar extends React.Component {
const showExpandCollapse = onCompact && onExpand; const showExpandCollapse = onCompact && onExpand;
return ( return (
<AWXToolbar> <AWXToolbar>
<Toolbar marginleft={noLeftMargin ? 1 : 0}> <Toolbar css={fillWidth ? 'margin-right: 0; margin-left: 0' : ''}>
<ColumnLeft> <ColumnLeft>
{showSelectAll && ( {showSelectAll && (
<Fragment> <Fragment>
@@ -159,7 +154,7 @@ DataListToolbar.propTypes = {
showSelectAll: PropTypes.bool, showSelectAll: PropTypes.bool,
isAllSelected: PropTypes.bool, isAllSelected: PropTypes.bool,
isCompact: PropTypes.bool, isCompact: PropTypes.bool,
noLeftMargin: PropTypes.bool, fillWidth: PropTypes.bool,
onCompact: PropTypes.func, onCompact: PropTypes.func,
onExpand: PropTypes.func, onExpand: PropTypes.func,
onSearch: PropTypes.func, onSearch: PropTypes.func,
@@ -174,7 +169,7 @@ DataListToolbar.defaultProps = {
showSelectAll: false, showSelectAll: false,
isAllSelected: false, isAllSelected: false,
isCompact: false, isCompact: false,
noLeftMargin: false, fillWidth: false,
onCompact: null, onCompact: null,
onExpand: null, onExpand: null,
onSearch: 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)} onSelect={() => this.toggleSelected(item)}
/> />
)} )}
renderToolbar={props => ( renderToolbar={props => <DataListToolbar {...props} fillWidth />}
<DataListToolbar {...props} alignToolbarLeft />
)}
showPageSizeOptions={false} showPageSizeOptions={false}
/> />
{lookupSelectedItems.length > 0 && ( {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/"} i18n={"/i18n/"}
isAllSelected={false} isAllSelected={false}
isCompact={false} isCompact={false}
noLeftMargin={false}
onCompact={null} onCompact={null}
onExpand={null} onExpand={null}
onSearch={[Function]} onSearch={[Function]}
@@ -335,28 +335,30 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
<div <div
className="DataListToolbar__AWXToolbar-ajzso8-0 bKIKDr" className="DataListToolbar__AWXToolbar-ajzso8-0 bKIKDr"
> >
<DataListToolbar__Toolbar <Styled(DataListToolbar__Toolbar)
marginleft={0} _css=""
> >
<StyledComponent <StyledComponent
_css=""
forwardedComponent={ forwardedComponent={
Object { Object {
"$$typeof": Symbol(react.forward_ref), "$$typeof": Symbol(react.forward_ref),
"attrs": Array [], "attrs": Array [],
"componentStyle": ComponentStyle { "componentStyle": ComponentStyle {
"componentId": "DataListToolbar__Toolbar-ajzso8-1", "componentId": "sc-htpNat",
"isStatic": false, "isStatic": false,
"lastClassName": "exECbH", "lastClassName": "dnOsXG",
"rules": Array [ "rules": Array [
"flex-grow:1;margin-left:", "flex-grow:1;margin-left:20px;margin-right:20px;",
[Function], [Function],
";margin-right:20px;",
], ],
}, },
"displayName": "DataListToolbar__Toolbar", "displayName": "Styled(DataListToolbar__Toolbar)",
"foldedComponentIds": Array [], "foldedComponentIds": Array [
"DataListToolbar__Toolbar-ajzso8-1",
],
"render": [Function], "render": [Function],
"styledComponentId": "DataListToolbar__Toolbar-ajzso8-1", "styledComponentId": "sc-htpNat",
"target": [Function], "target": [Function],
"toString": [Function], "toString": [Function],
"warnTooManyClasses": [Function], "warnTooManyClasses": [Function],
@@ -364,15 +366,14 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
} }
} }
forwardedRef={null} forwardedRef={null}
marginleft={0}
> >
<Toolbar <Toolbar
className="DataListToolbar__Toolbar-ajzso8-1 exECbH" _css=""
marginleft={0} className="DataListToolbar__Toolbar-ajzso8-1 sc-htpNat dnOsXG"
> >
<div <div
className="pf-l-toolbar DataListToolbar__Toolbar-ajzso8-1 exECbH" _css=""
marginleft={0} className="pf-l-toolbar DataListToolbar__Toolbar-ajzso8-1 sc-htpNat dnOsXG"
> >
<DataListToolbar__ColumnLeft> <DataListToolbar__ColumnLeft>
<StyledComponent <StyledComponent
@@ -383,9 +384,9 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
"componentStyle": ComponentStyle { "componentStyle": ComponentStyle {
"componentId": "DataListToolbar__ColumnLeft-ajzso8-3", "componentId": "DataListToolbar__ColumnLeft-ajzso8-3",
"isStatic": true, "isStatic": true,
"lastClassName": "feZLWt", "lastClassName": "bpkKMr",
"rules": Array [ "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", "displayName": "DataListToolbar__ColumnLeft",
@@ -401,7 +402,7 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
forwardedRef={null} forwardedRef={null}
> >
<div <div
className="DataListToolbar__ColumnLeft-ajzso8-3 feZLWt" className="DataListToolbar__ColumnLeft-ajzso8-3 bpkKMr"
> >
<Styled(ToolbarItem)> <Styled(ToolbarItem)>
<StyledComponent <StyledComponent
@@ -410,9 +411,9 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
"$$typeof": Symbol(react.forward_ref), "$$typeof": Symbol(react.forward_ref),
"attrs": Array [], "attrs": Array [],
"componentStyle": ComponentStyle { "componentStyle": ComponentStyle {
"componentId": "sc-htpNat", "componentId": "sc-bxivhb",
"isStatic": true, "isStatic": true,
"lastClassName": "dqEVhr", "lastClassName": "gYEJOJ",
"rules": Array [ "rules": Array [
"flex-grow: 1;", "flex-grow: 1;",
], ],
@@ -420,7 +421,7 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
"displayName": "Styled(ToolbarItem)", "displayName": "Styled(ToolbarItem)",
"foldedComponentIds": Array [], "foldedComponentIds": Array [],
"render": [Function], "render": [Function],
"styledComponentId": "sc-htpNat", "styledComponentId": "sc-bxivhb",
"target": [Function], "target": [Function],
"toString": [Function], "toString": [Function],
"warnTooManyClasses": [Function], "warnTooManyClasses": [Function],
@@ -430,10 +431,10 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
forwardedRef={null} forwardedRef={null}
> >
<ToolbarItem <ToolbarItem
className="sc-htpNat dqEVhr" className="sc-bxivhb gYEJOJ"
> >
<div <div
className="pf-l-toolbar__item sc-htpNat dqEVhr" className="pf-l-toolbar__item sc-bxivhb gYEJOJ"
> >
<WithI18n <WithI18n
columns={ columns={
@@ -1017,16 +1018,13 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
"componentStyle": ComponentStyle { "componentStyle": ComponentStyle {
"componentId": "DataListToolbar__ColumnRight-ajzso8-4", "componentId": "DataListToolbar__ColumnRight-ajzso8-4",
"isStatic": true, "isStatic": true,
"lastClassName": "Deoai", "lastClassName": "aHlzn",
"rules": Array [ "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%;}", "flex-grow:0;display:flex;justify-content:flex-start;align-items:center;padding:10px 0 8px 0;",
"padding:8px 0 10px 0;@media screen and (min-width:980px){margin-left:0;padding:10px 0 8px 0;}",
], ],
}, },
"displayName": "DataListToolbar__ColumnRight", "displayName": "DataListToolbar__ColumnRight",
"foldedComponentIds": Array [ "foldedComponentIds": Array [],
"DataListToolbar__ColumnLeft-ajzso8-3",
],
"render": [Function], "render": [Function],
"styledComponentId": "DataListToolbar__ColumnRight-ajzso8-4", "styledComponentId": "DataListToolbar__ColumnRight-ajzso8-4",
"target": "div", "target": "div",
@@ -1038,7 +1036,7 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
forwardedRef={null} forwardedRef={null}
> >
<div <div
className="DataListToolbar__ColumnLeft-ajzso8-3 DataListToolbar__ColumnRight-ajzso8-4 Deoai" className="DataListToolbar__ColumnRight-ajzso8-4 aHlzn"
> >
<ToolbarItem <ToolbarItem
className={null} className={null}
@@ -1588,7 +1586,7 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
</div> </div>
</Toolbar> </Toolbar>
</StyledComponent> </StyledComponent>
</DataListToolbar__Toolbar> </Styled(DataListToolbar__Toolbar)>
</div> </div>
</StyledComponent> </StyledComponent>
</DataListToolbar__AWXToolbar> </DataListToolbar__AWXToolbar>