shaba/awx
1
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2024-11-01 08:21:15 +03:00
Code Releases Activity

Adds tooltip to username and help icon.

Browse Source
This commit is contained in:
Alex Corey 2019-04-10 08:48:52 -04:00
parent 3d6790a419
commit 731da8049b
2 changed files with 92 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app.scss
View File

@ -6,7 +6,6 @@
// //
// masthead overrides // masthead overrides
// //
.pf-c-page__header-brand { .pf-c-page__header-brand {
max-width: 255px; max-width: 255px;
} }
@ -291,3 +290,4 @@
margin-right: 20px; margin-right: 20px;
} }
} }

37
src/components/PageHeaderToolbar.jsx
View File

@ -11,6 +11,7 @@ import {
Toolbar, Toolbar,
ToolbarGroup, ToolbarGroup,
ToolbarItem, ToolbarItem,
Tooltip
} from '@patternfly/react-core'; } from '@patternfly/react-core';
import { import {
QuestionCircleIcon, QuestionCircleIcon,
@ -22,7 +23,10 @@ const DOCLINK = 'https://docs.ansible.com/ansible-tower/latest/html/userguide/in
class PageHeaderToolbar extends Component { class PageHeaderToolbar extends Component {
constructor (props) { constructor (props) {
super(props); super(props);
this.state = { isHelpOpen: false, isUserOpen: false }; this.state = {
isHelpOpen: false,
isUserOpen: false,
};
this.onHelpSelect = this.onHelpSelect.bind(this); this.onHelpSelect = this.onHelpSelect.bind(this);
this.onHelpToggle = this.onHelpToggle.bind(this); this.onHelpToggle = this.onHelpToggle.bind(this);
@ -54,24 +58,33 @@ class PageHeaderToolbar extends Component {
const { isHelpOpen, isUserOpen } = this.state; const { isHelpOpen, isUserOpen } = this.state;
const { isAboutDisabled, onAboutClick, onLogoutClick } = this.props; const { isAboutDisabled, onAboutClick, onLogoutClick } = this.props;
const dropdownIconColor = { // const dropdownIconColor = {
color: 'white' // color: 'white'
}; // };
return ( return (
<I18n> <I18n>
{({ i18n }) => ( {({ i18n }) => (
<Toolbar> <Toolbar>
<ToolbarGroup> <ToolbarGroup>
<Tooltip
position="left"
entryDelay={0}
exitDelay={0}
content={
<div>Help</div>
}
>
<ToolbarItem> <ToolbarItem>
<Dropdown <Dropdown
isPlain
isOpen={isHelpOpen} isOpen={isHelpOpen}
position={DropdownPosition.right} position={DropdownPosition.right}
onSelect={this.onHelpSelect} onSelect={this.onHelpSelect}
toggle={( toggle={(
<DropdownToggle <DropdownToggle
onToggle={this.onHelpToggle} onToggle={this.onHelpToggle}
style={dropdownIconColor} // style={dropdownIconColor}
> >
<QuestionCircleIcon /> <QuestionCircleIcon />
</DropdownToggle> </DropdownToggle>
@ -95,17 +108,28 @@ class PageHeaderToolbar extends Component {
]} ]}
/> />
</ToolbarItem> </ToolbarItem>
</Tooltip>
<Tooltip
position="left"
entryDelay={0}
exitDelay={0}
content={
<div>User</div>
}
>
<ToolbarItem> <ToolbarItem>
<Dropdown <Dropdown
isPlain
isOpen={isUserOpen} isOpen={isUserOpen}
position={DropdownPosition.right} position={DropdownPosition.right}
onSelect={this.onUserSelect} onSelect={this.onUserSelect}
toggle={( toggle={(
<DropdownToggle <DropdownToggle
onToggle={this.onUserToggle} onToggle={this.onUserToggle}
style={dropdownIconColor} // style={dropdownIconColor}
> >
<UserIcon /> <UserIcon />
&nbsp; User Name
</DropdownToggle> </DropdownToggle>
)} )}
dropdownItems={[ dropdownItems={[
@ -125,6 +149,7 @@ class PageHeaderToolbar extends Component {
]} ]}
/> />
</ToolbarItem> </ToolbarItem>
</Tooltip>
</ToolbarGroup> </ToolbarGroup>
</Toolbar> </Toolbar>
)} )}