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

Small ux changes on the org list based on feedback

Browse Source
This commit is contained in:
mabashian
2018-12-12 10:40:51 -05:00
parent b375963165
commit 71ace1bc00
3 changed files with 25 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -23,6 +23,7 @@ import {
SortNumericDownIcon,
SortNumericUpIcon,
TrashAltIcon,
PlusIcon
} from '@patternfly/react-icons';
import {
Link
@@ -114,6 +115,12 @@ class DataListToolbar extends React.Component {
return icon;
};
const dropdownItems = columns.filter(({ key }) => key !== searchKey).map(({ key, name }) => (
<DropdownItem key={key} component="button">
{ name }
</DropdownItem>
));
return (
<I18n>
{({ i18n }) => (
@@ -146,13 +153,8 @@ class DataListToolbar extends React.Component {
{ searchColumnName }
</DropdownToggle>
)}
>
{columns.filter(({ key }) => key !== searchKey).map(({ key, name }) => (
<DropdownItem key={key} component="button">
{ name }
</DropdownItem>
))}
</Dropdown>
dropdownItems={dropdownItems}
/>
<TextInput
type="search"
aria-label={i18n._(t`Search text input`)}
@@ -183,15 +185,8 @@ class DataListToolbar extends React.Component {
{ sortedColumnName }
</DropdownToggle>
)}
>
{columns
.filter(({ key, isSortable }) => isSortable && key !== sortedColumnKey)
.map(({ key, name }) => (
<DropdownItem key={key} component="button">
{ name }
</DropdownItem>
))}
</Dropdown>
dropdownItems={dropdownItems}
/>
</ToolbarItem>
<ToolbarItem>
<Button
@@ -228,7 +223,7 @@ class DataListToolbar extends React.Component {
{addUrl && (
<Link to={addUrl}>
<Button variant="primary" aria-label={i18n._(t`Add`)}>
<Trans>Add</Trans>
<PlusIcon />
</Button>
</Link>
)}

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

@@ -33,7 +33,7 @@
margin-right: 20px;
}
.awx-toolbar button {
.awx-toolbar button.pf-c-button {
height: 30px;
padding: 0px;
}
@@ -43,7 +43,7 @@
height: 30px;
input {
padding: 0px;
padding: 0 10px;
width: 300px;
}
@@ -57,7 +57,7 @@
min-height: 30px;
min-width: 70px;
height: 30px;
padding: 0px;
padding: 0 10px;
margin: 0px;
.pf-c-dropdown__toggle-icon {
@@ -74,16 +74,23 @@
.awx-toolbar .pf-c-button.pf-m-primary {
background-color: #5cb85c;
min-width: 0px;
width: 58px;
width: 30px;
height: 30px;
text-align: center;
padding: 0px;
margin: 0px;
margin-right: 20px;
margin-left: 20px;
border-radius: 50%;
}
.awx-toolbar .pf-l-toolbar__item .pf-c-button.pf-m-plain {
font-size: 18px;
}
.awx-toolbar .pf-l-toolbar__item .pf-c-button.pf-m-plain :nth-of-type(2) {
// .awx-toolbar .pf-l-toolbar__item:nth-of-type(2) {
// .pf-c-button.pf-m-plain {
font-size: 22px;
// }
}