External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-03-18 09:27:31 -02:30
Code Issues Packages Projects Releases Wiki Activity

Convert DataListToolbar to a styled-component.

Browse Source
This commit is contained in:
Kia Lam
2019-05-10 17:21:31 -04:00
parent 0ea4a4dedd
commit a87c6ddf1b
5 changed files with 153 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -6,16 +6,43 @@ import {
Checkbox, Checkbox,
Level, Level,
LevelItem, LevelItem,
Toolbar, Toolbar as PFToolbar,
ToolbarGroup, ToolbarGroup as PFToolbarGroup,
ToolbarItem, ToolbarItem,
} from '@patternfly/react-core'; } from '@patternfly/react-core';
import styled from 'styled-components';
import ExpandCollapse from '../ExpandCollapse'; import ExpandCollapse from '../ExpandCollapse';
import Search from '../Search'; import Search from '../Search';
import Sort from '../Sort'; import Sort from '../Sort';
import VerticalSeparator from '../VerticalSeparator'; import VerticalSeparator from '../VerticalSeparator';
const AWXToolbar = styled.div`
--awx-toolbar--BackgroundColor: var(--pf-global--BackgroundColor--light-100);
--awx-toolbar--BorderColor: #ebebeb;
--awx-toolbar--BorderWidth: var(--pf-global--BorderWidth--sm);
border-bottom: var(--awx-toolbar--BorderWidth) solid var(--awx-toolbar--BorderColor);
background-color: var(--awx-toolbar--BackgroundColor);
display: flex;
min-height: 70px;
padding-top: 5px;
--pf-global--target-size--MinHeight: 0px;
--pf-global--target-size--MinWidth: 0px;
--pf-global--FontSize--md: 14px;
`;
const Toolbar = styled(PFToolbar)`
flex-grow: 1;
margin-left: ${props => (props.noleftmargin ? '0' : '20px')};
`;
const ToolbarGroup = styled(PFToolbarGroup)`
&&& {
margin: 0;
}
`;
class DataListToolbar extends React.Component { class DataListToolbar extends React.Component {
render () { render () {
const { const {
@@ -38,12 +65,12 @@ class DataListToolbar extends React.Component {
return ( return (
<I18n> <I18n>
{({ i18n }) => ( {({ i18n }) => (
<div className="awx-toolbar"> <AWXToolbar className="awx-toolbar">
<Level> <Level css="flex-grow: 1;">
<LevelItem style={{ display: 'flex', flexBasis: '700px' }}> <LevelItem css="display: flex; flex-basis: 700px">
<Toolbar style={{ marginLeft: noLeftMargin ? '0px' : '20px', flexGrow: '1' }}> <Toolbar noleftmargin={noLeftMargin}>
{ showSelectAll && ( { showSelectAll && (
<ToolbarGroup> <ToolbarGroup css="margin: 0;">
<ToolbarItem> <ToolbarItem>
<Checkbox <Checkbox
checked={isAllSelected} checked={isAllSelected}
@@ -55,8 +82,8 @@ class DataListToolbar extends React.Component {
<VerticalSeparator /> <VerticalSeparator />
</ToolbarGroup> </ToolbarGroup>
)} )}
<ToolbarGroup style={{ flexGrow: '1' }}> <ToolbarGroup css="margin: 0; flex-grow: 1;">
<ToolbarItem style={{ flexGrow: '1' }}> <ToolbarItem css="flex-grow: 1;">
<Search <Search
columns={columns} columns={columns}
onSearch={onSearch} onSearch={onSearch}
@@ -65,9 +92,7 @@ class DataListToolbar extends React.Component {
</ToolbarItem> </ToolbarItem>
<VerticalSeparator /> <VerticalSeparator />
</ToolbarGroup> </ToolbarGroup>
<ToolbarGroup <ToolbarGroup>
className="sortDropdownGroup"
>
<ToolbarItem> <ToolbarItem>
<Sort <Sort
columns={columns} columns={columns}
@@ -100,7 +125,7 @@ class DataListToolbar extends React.Component {
{additionalControls} {additionalControls}
</LevelItem> </LevelItem>
</Level> </Level>
</div> </AWXToolbar>
)} )}
</I18n> </I18n>
); );

78
src/components/DataListToolbar/styles.scss
View File

@@ -1,69 +1,71 @@
.awx-toolbar { .awx-toolbar {
--awx-toolbar--BackgroundColor: var(--pf-global--BackgroundColor--light-100); // --awx-toolbar--BackgroundColor: var(--pf-global--BackgroundColor--light-100);
--awx-toolbar--BorderColor: #ebebeb; // --awx-toolbar--BorderColor: #ebebeb;
--awx-toolbar--BorderWidth: var(--pf-global--BorderWidth--sm); // --awx-toolbar--BorderWidth: var(--pf-global--BorderWidth--sm);
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;
height: 70px; // height: 70px;
padding-top: 5px; // padding-top: 5px;
--pf-global--target-size--MinHeight: 0px; // --pf-global--target-size--MinHeight: 0px;
--pf-global--target-size--MinWidth: 0px; // --pf-global--target-size--MinWidth: 0px;
--pf-global--FontSize--md: 14px; // --pf-global--FontSize--md: 14px;
} }
.awx-toolbar .pf-l-level { .awx-toolbar .pf-l-level {
flex: 1; // flex: 1;
} }
.awx-toolbar .pf-c-button.pf-m-plain { .awx-toolbar .pf-c-button.pf-m-plain {
--pf-c-button--m-plain--PaddingLeft: 0px; // --pf-c-button--m-plain--PaddingLeft: 0px;
--pf-c-button--m-plain--PaddingRight: 0px; // --pf-c-button--m-plain--PaddingRight: 0px;
} }
.awx-toolbar .pf-l-toolbar__group { .awx-toolbar .pf-l-toolbar__group {
--pf-l-toolbar__group--MarginRight: 0px; // --pf-l-toolbar__group--MarginRight: 0px;
--pf-l-toolbar__group--MarginLeft: 0px; // --pf-l-toolbar__group--MarginLeft: 0px;
} }
.awx-toolbar button.pf-c-button { .awx-toolbar button.pf-c-button {
height: 30px; // height: 30px;
width: 30px; // width: 30px;
padding: 0px; // padding: 0px;
} }
.awx-toolbar .pf-c-input-group { // SEARCH
min-height: 0px; // .awx-toolbar .pf-c-input-group {
height: 30px; // // min-height: 0px;
// // height: 30px;
.pf-m-tertiary { // .pf-m-tertiary {
width: 34px; // // width: 34px;
padding: 0px; // // padding: 0px;
} // }
} // }
// SEARCH
.awx-toolbar .pf-c-dropdown__toggle { .awx-toolbar .pf-c-dropdown__toggle {
min-height: 30px; // min-height: 30px;
min-width: 70px; // min-width: 70px;
height: 30px; // height: 30px;
padding: 0 10px; // padding: 0 10px;
margin: 0px; // margin: 0px;
.pf-c-dropdown__toggle-text { .pf-c-dropdown__toggle-text {
width: auto; // width: auto;
} }
.pf-c-dropdown__toggle-icon { .pf-c-dropdown__toggle-icon {
margin: 0px; // margin: 0px;
padding-top: 3px; // padding-top: 3px;
padding-left: 3px; // padding-left: 3px;
} }
} }
.awx-toolbar .pf-l-toolbar__item + .pf-l-toolbar__item button { .awx-toolbar .pf-l-toolbar__item + .pf-l-toolbar__item button {
margin-left: 20px; // margin-left: 20px;
} }
// .awx-toolbar .pf-c-button.pf-m-primary { // .awx-toolbar .pf-c-button.pf-m-primary {
@@ -78,7 +80,7 @@
// } // }
.awx-toolbar .pf-l-toolbar__item .pf-c-button.pf-m-plain { .awx-toolbar .pf-l-toolbar__item .pf-c-button.pf-m-plain {
font-size: 18px; // font-size: 18px;
} }
// .awx-ToolBarBtn { // .awx-ToolBarBtn {

1
src/components/PaginatedDataList/ToolbarDeleteButton.jsx
View File

@@ -15,6 +15,7 @@ const Button = styled(PFButton)`
justify-content: center; justify-content: center;
margin-right: 20px; margin-right: 20px;
border-radius: 3px; border-radius: 3px;
padding: 0;
&:disabled { &:disabled {

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

@@ -3,14 +3,49 @@ import PropTypes from 'prop-types';
import { I18n } from '@lingui/react'; import { I18n } from '@lingui/react';
import { t } from '@lingui/macro'; import { t } from '@lingui/macro';
import { import {
Button, Button as PFButton,
Dropdown, Dropdown as PFDropdown,
DropdownPosition, DropdownPosition,
DropdownToggle, DropdownToggle,
DropdownItem, DropdownItem,
TextInput TextInput as PFTextInput
} from '@patternfly/react-core'; } from '@patternfly/react-core';
import { SearchIcon } from '@patternfly/react-icons';
import styled from 'styled-components';
const TextInput = styled(PFTextInput)`
min-height: 0px;
height: 30px;
`;
const Button = styled(PFButton)`
width: 34px;
padding: 0px;
`;
const Dropdown = styled(PFDropdown)`
&&& { /* Higher specificity required because we are selecting unclassed elements */
> button {
min-height: 30px;
min-width: 70px;
height: 30px;
padding: 0 10px;
margin: 0px;
> span { /* text element */
width: auto;
}
> svg { /* caret icon */
margin: 0px;
padding-top: 3px;
padding-left: 3px;
}
}
}
`;
class Search extends React.Component { class Search extends React.Component {
constructor (props) { constructor (props) {
super(props); super(props);
@@ -103,7 +138,7 @@ class Search extends React.Component {
aria-label={i18n._(t`Search`)} aria-label={i18n._(t`Search`)}
onClick={this.handleSearch} onClick={this.handleSearch}
> >
<i className="fas fa-search" aria-hidden="true" /> <SearchIcon />
</Button> </Button>
</div> </div>
)} )}

38
src/components/Sort/Sort.jsx
View File

@@ -4,7 +4,7 @@ import { I18n } from '@lingui/react';
import { t } from '@lingui/macro'; import { t } from '@lingui/macro';
import { import {
Button, Button,
Dropdown, Dropdown as PFDropdown,
DropdownPosition, DropdownPosition,
DropdownToggle, DropdownToggle,
DropdownItem DropdownItem
@@ -16,6 +16,36 @@ import {
SortNumericUpIcon SortNumericUpIcon
} from '@patternfly/react-icons'; } from '@patternfly/react-icons';
import styled from 'styled-components';
const Dropdown = styled(PFDropdown)`
&&& {
> button {
min-height: 30px;
min-width: 70px;
height: 30px;
padding: 0 10px;
margin: 0px;
> span { /* text element within dropdown */
width: auto;
}
> svg { /* carret icon */
margin: 0px;
padding-top: 3px;
padding-left: 3px;
}
}
}
`;
const IconWrapper = styled.span`
> svg {
font-size: 18px;
}
`;
class Sort extends React.Component { class Sort extends React.Component {
constructor (props) { constructor (props) {
super(props); super(props);
@@ -60,7 +90,6 @@ class Sort extends React.Component {
const { const {
isSortDropdownOpen isSortDropdownOpen
} = this.state; } = this.state;
const [{ name: sortedColumnName, isNumeric }] = columns const [{ name: sortedColumnName, isNumeric }] = columns
.filter(({ key }) => key === sortedColumnKey); .filter(({ key }) => key === sortedColumnKey);
@@ -104,8 +133,11 @@ class Sort extends React.Component {
onClick={this.handleSort} onClick={this.handleSort}
variant="plain" variant="plain"
aria-label={i18n._(t`Sort`)} aria-label={i18n._(t`Sort`)}
css="padding: 0;"
> >
<SortIcon /> <IconWrapper>
<SortIcon />
</IconWrapper>
</Button> </Button>
</React.Fragment> </React.Fragment>
)} )}