External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-05-19 23:07:42 -02:30
Code Issues Packages Projects Releases Wiki 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
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;
} }
} }

157
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,77 +58,98 @@ 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>
<ToolbarItem> <Tooltip
<Dropdown position="left"
isOpen={isHelpOpen} entryDelay={0}
position={DropdownPosition.right} exitDelay={0}
onSelect={this.onHelpSelect} content={
toggle={( <div>Help</div>
<DropdownToggle }
onToggle={this.onHelpToggle} >
style={dropdownIconColor} <ToolbarItem>
> <Dropdown
<QuestionCircleIcon /> isPlain
</DropdownToggle> isOpen={isHelpOpen}
)} position={DropdownPosition.right}
dropdownItems={[ onSelect={this.onHelpSelect}
<DropdownItem toggle={(
key="help" <DropdownToggle
target="_blank" onToggle={this.onHelpToggle}
href={DOCLINK} // style={dropdownIconColor}
> >
{i18n._(t`Help`)} <QuestionCircleIcon />
</DropdownItem>, </DropdownToggle>
<DropdownItem )}
key="about" dropdownItems={[
component="button" <DropdownItem
isDisabled={isAboutDisabled} key="help"
onClick={onAboutClick} target="_blank"
> href={DOCLINK}
{i18n._(t`About`)} >
</DropdownItem> {i18n._(t`Help`)}
]} </DropdownItem>,
/> <DropdownItem
</ToolbarItem> key="about"
<ToolbarItem> component="button"
<Dropdown isDisabled={isAboutDisabled}
isOpen={isUserOpen} onClick={onAboutClick}
position={DropdownPosition.right} >
onSelect={this.onUserSelect} {i18n._(t`About`)}
toggle={( </DropdownItem>
<DropdownToggle ]}
onToggle={this.onUserToggle} />
style={dropdownIconColor} </ToolbarItem>
> </Tooltip>
<UserIcon /> <Tooltip
</DropdownToggle> position="left"
)} entryDelay={0}
dropdownItems={[ exitDelay={0}
<DropdownItem content={
key="user" <div>User</div>
href="#/home" }
> >
{i18n._(t`User Details`)} <ToolbarItem>
</DropdownItem>, <Dropdown
<DropdownItem isPlain
key="logout" isOpen={isUserOpen}
component="button" position={DropdownPosition.right}
onClick={onLogoutClick} onSelect={this.onUserSelect}
> toggle={(
{i18n._(t`Logout`)} <DropdownToggle
</DropdownItem> onToggle={this.onUserToggle}
]} // style={dropdownIconColor}
/> >
</ToolbarItem> <UserIcon />
&nbsp; User Name
</DropdownToggle>
)}
dropdownItems={[
<DropdownItem
key="user"
href="#/home"
>
{i18n._(t`User Details`)}
</DropdownItem>,
<DropdownItem
key="logout"
component="button"
onClick={onLogoutClick}
>
{i18n._(t`Logout`)}
</DropdownItem>
]}
/>
</ToolbarItem>
</Tooltip>
</ToolbarGroup> </ToolbarGroup>
</Toolbar> </Toolbar>
)} )}