External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-05-20 07:17:40 -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

68
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,12 +92,11 @@ class DataListToolbar extends React.Component {
return ( return (
<I18n> <I18n>
{({ i18n }) => ( {({ i18n }) => (
<AWXToolbar className="awx-toolbar"> <AWXToolbar>
<Level css="flex-grow: 1;">
<LevelItem css="display: flex; flex-basis: 700px">
<Toolbar noleftmargin={noLeftMargin}> <Toolbar noleftmargin={noLeftMargin}>
{ showSelectAll && ( { showSelectAll && (
<ToolbarGroup css="margin: 0;"> <Fragment>
<ColumnLeft>
<ToolbarItem> <ToolbarItem>
<Checkbox <Checkbox
checked={isAllSelected} checked={isAllSelected}
@@ -80,9 +106,6 @@ class DataListToolbar extends React.Component {
/> />
</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,7 +124,6 @@ class DataListToolbar extends React.Component {
sortedColumnKey={sortedColumnKey} sortedColumnKey={sortedColumnKey}
/> />
</ToolbarItem> </ToolbarItem>
</ToolbarGroup>
{ (showExpandCollapse || additionalControls.length) ? ( { (showExpandCollapse || additionalControls.length) ? (
<VerticalSeparator /> <VerticalSeparator />
) : null} ) : null}
@@ -119,13 +141,15 @@ class DataListToolbar extends React.Component {
)} )}
</Fragment> </Fragment>
)} )}
</Toolbar> <AdditionalControlsWrapper>
</LevelItem>
<LevelItem css="display: flex;">
{additionalControls} {additionalControls}
</LevelItem> </AdditionalControlsWrapper>
</Level> </ColumnRight>
</Fragment>
)}
</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}