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

Merge pull request #160 from AlexSCorey/114-HeaderIcons

Browse Source 
Adds tooltip to username and help icon
This commit is contained in:
Alex Corey 2019-04-10 16:39:20 -04:00 committed by GitHub
commit 84f45d122d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 83 additions and 68 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;
} }
@ -293,3 +292,4 @@
margin-right: 20px; margin-right: 20px;
} }
} }

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