External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-05-15 21:37:42 -02:30
Code Issues Packages Projects Releases Wiki Activity

Refactor DataListToolbar component.

Browse Source
This commit is contained in:
Kia Lam
2019-05-13 12:05:07 -04:00
parent a87c6ddf1b
commit a53509b359
2 changed files with 75 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

126
src/components/DataListToolbar/DataListToolbar.jsx
View File

@@ -4,8 +4,6 @@ import { I18n } from '@lingui/react';
import { t } from '@lingui/macro'; import { t } from '@lingui/macro';
import { import {
Checkbox, Checkbox,
Level,
LevelItem,
Toolbar as PFToolbar, Toolbar as PFToolbar,
ToolbarGroup as PFToolbarGroup, ToolbarGroup as PFToolbarGroup,
ToolbarItem, ToolbarItem,
@@ -22,15 +20,15 @@ const AWXToolbar = styled.div`
--awx-toolbar--BorderColor: #ebebeb; --awx-toolbar--BorderColor: #ebebeb;
--awx-toolbar--BorderWidth: var(--pf-global--BorderWidth--sm); --awx-toolbar--BorderWidth: var(--pf-global--BorderWidth--sm);
--pf-global--target-size--MinHeight: 0;
--pf-global--target-size--MinWidth: 0;
--pf-global--FontSize--md: 14px;
border-bottom: var(--awx-toolbar--BorderWidth) solid var(--awx-toolbar--BorderColor); border-bottom: var(--awx-toolbar--BorderWidth) solid var(--awx-toolbar--BorderColor);
background-color: var(--awx-toolbar--BackgroundColor); background-color: var(--awx-toolbar--BackgroundColor);
display: flex; display: flex;
min-height: 70px; min-height: 70px;
padding-top: 5px; flex-grow: 1;
--pf-global--target-size--MinHeight: 0px;
--pf-global--target-size--MinWidth: 0px;
--pf-global--FontSize--md: 14px;
`; `;
const Toolbar = styled(PFToolbar)` const Toolbar = styled(PFToolbar)`
@@ -43,6 +41,35 @@ const ToolbarGroup = styled(PFToolbarGroup)`
margin: 0; margin: 0;
} }
`; `;
const ColumnLeft = styled.div`
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%;
}
`;
const ColumnRight = styled(ColumnLeft)`
margin-left: 60px;
padding: 8px 0 10px 0;
@media screen and (min-width: 980px) {
margin-left: 0;
padding: 10px 0 8px 0;
}
`;
const AdditionalControlsWrapper = styled.div`
display: flex;
flex-grow: 1;
justify-content: flex-end;
`;
class DataListToolbar extends React.Component { class DataListToolbar extends React.Component {
render () { render () {
const { const {
@@ -65,24 +92,20 @@ class DataListToolbar extends React.Component {
return ( return (
<I18n> <I18n>
{({ i18n }) => ( {({ i18n }) => (
<AWXToolbar className="awx-toolbar"> <AWXToolbar>
<Level css="flex-grow: 1;"> <Toolbar noleftmargin={noLeftMargin}>
<LevelItem css="display: flex; flex-basis: 700px"> { showSelectAll && (
<Toolbar noleftmargin={noLeftMargin}> <Fragment>
{ showSelectAll && ( <ColumnLeft>
<ToolbarGroup css="margin: 0;"> <ToolbarItem>
<ToolbarItem> <Checkbox
<Checkbox checked={isAllSelected}
checked={isAllSelected} onChange={onSelectAll}
onChange={onSelectAll} aria-label={i18n._(t`Select all`)}
aria-label={i18n._(t`Select all`)} id="select-all"
id="select-all" />
/> </ToolbarItem>
</ToolbarItem> <VerticalSeparator />
<VerticalSeparator />
</ToolbarGroup>
)}
<ToolbarGroup css="margin: 0; flex-grow: 1;">
<ToolbarItem css="flex-grow: 1;"> <ToolbarItem css="flex-grow: 1;">
<Search <Search
columns={columns} columns={columns}
@@ -91,8 +114,8 @@ class DataListToolbar extends React.Component {
/> />
</ToolbarItem> </ToolbarItem>
<VerticalSeparator /> <VerticalSeparator />
</ToolbarGroup> </ColumnLeft>
<ToolbarGroup> <ColumnRight>
<ToolbarItem> <ToolbarItem>
<Sort <Sort
columns={columns} columns={columns}
@@ -101,31 +124,32 @@ class DataListToolbar extends React.Component {
sortedColumnKey={sortedColumnKey} sortedColumnKey={sortedColumnKey}
/> />
</ToolbarItem> </ToolbarItem>
</ToolbarGroup> { (showExpandCollapse || additionalControls.length) ? (
{ (showExpandCollapse || additionalControls.length) ? ( <VerticalSeparator />
<VerticalSeparator /> ) : null}
) : null} {showExpandCollapse && (
{showExpandCollapse && ( <Fragment>
<Fragment> <ToolbarGroup>
<ToolbarGroup> <ExpandCollapse
<ExpandCollapse isCompact={isCompact}
isCompact={isCompact} onCompact={onCompact}
onCompact={onCompact} onExpand={onExpand}
onExpand={onExpand} />
/> </ToolbarGroup>
</ToolbarGroup> { additionalControls && (
{ additionalControls && ( <VerticalSeparator />
<VerticalSeparator /> )}
)} </Fragment>
</Fragment> )}
)} <AdditionalControlsWrapper>
</Toolbar> {additionalControls}
</LevelItem> </AdditionalControlsWrapper>
<LevelItem css="display: flex;"> </ColumnRight>
{additionalControls} </Fragment>
</LevelItem> )}
</Level> </Toolbar>
</AWXToolbar> </AWXToolbar>
)} )}
</I18n> </I18n>
); );

1
src/components/Search/Search.jsx
View File

@@ -112,7 +112,6 @@ class Search extends React.Component {
{({ i18n }) => ( {({ i18n }) => (
<div className="pf-c-input-group"> <div className="pf-c-input-group">
<Dropdown <Dropdown
className="searchKeyDropdown"
onToggle={this.handleDropdownToggle} onToggle={this.handleDropdownToggle}
onSelect={this.handleDropdownSelect} onSelect={this.handleDropdownSelect}
direction={up} direction={up}