UX improvements

This commit is contained in:
Alex Corey
2019-04-29 10:41:57 -04:00
parent 1be496cfc1
commit 64d4b71ec9
5 changed files with 66 additions and 32 deletions

View File

@@ -16,6 +16,7 @@
flex: 1;
align-items: center;
padding: 20px;
cursor: pointer;
}
}

View File

@@ -114,12 +114,14 @@ class DataListToolbar extends React.Component {
<LevelItem>
{ showDelete && (
<Tooltip
content={deleteTooltip}
position="left"
content={disableTrashCanIcon ? i18n._(t`Select a row to delete`) : i18n._(t`Delete`)}
position="top"
>
<span>
<div
className={disableTrashCanIcon ? 'awx-ToolBarTrashCanIcon-disabled'
: 'awx-ToolBarBtn'}
>
<Button
className="awx-ToolBarBtn"
variant="plain"
aria-label={i18n._(t`Delete`)}
onClick={onOpenDeleteModal}
@@ -127,17 +129,21 @@ class DataListToolbar extends React.Component {
>
<TrashAltIcon className="awx-ToolBarTrashCanIcon" />
</Button>
</span>
</div>
</Tooltip>
)}
{showAdd && addUrl && (
<Link to={addUrl}>
<Button
variant="primary"
aria-label={i18n._(t`Add`)}
<Tooltip
content={i18n._(t`Add Organization`)}
>
<PlusIcon />
</Button>
<Button
variant="primary"
aria-label={i18n._(t`Add`)}
>
<PlusIcon />
</Button>
</Tooltip>
</Link>
)}
{showAdd && add && (

View File

@@ -76,18 +76,18 @@
margin-right: 20px;
}
.awx-toolbar .pf-c-button {
margin-right: 20px;
}
.awx-toolbar .pf-l-toolbar__item .pf-c-button.pf-m-plain {
font-size: 18px;
}
.pf-c-button--disabled--BackgroundColor{
background-color: #b7b7b7;
}
.awx-ToolBarBtn{
width: 30px;
position: absolute;
right: 80px;
display: flex;
justify-content: center;
margin-right: 20px;
border-radius: 3px;
}
.awx-ToolBarBtn:hover{
.awx-ToolBarTrashCanIcon {
@@ -95,4 +95,17 @@
}
background-color:#d9534f;
}
.awx-ToolBarTrashCanIcon-disabled{
width: 30px;
position: absolute;
right: 80px;
display: flex;
justify-content: center;
margin-right: 20px;
}
.pf-l-toolbar >div{
&:last-child{
display:none;
}
}