shaba/awx
1
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2024-10-31 23:51:09 +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
//
.pf-c-page__header-brand {
max-width: 255px;
}
@ -293,3 +292,4 @@
margin-right: 20px;
}
}

149
src/components/PageHeaderToolbar.jsx
View File

@ -11,6 +11,7 @@ import {
Toolbar,
ToolbarGroup,
ToolbarItem,
Tooltip
} from '@patternfly/react-core';
import {
QuestionCircleIcon,
@ -22,7 +23,10 @@ const DOCLINK = 'https://docs.ansible.com/ansible-tower/latest/html/userguide/in
class PageHeaderToolbar extends Component {
constructor (props) {
super(props);
this.state = { isHelpOpen: false, isUserOpen: false };
this.state = {
isHelpOpen: false,
isUserOpen: false,
};
this.onHelpSelect = this.onHelpSelect.bind(this);
this.onHelpToggle = this.onHelpToggle.bind(this);
@ -54,77 +58,88 @@ class PageHeaderToolbar extends Component {
const { isHelpOpen, isUserOpen } = this.state;
const { isAboutDisabled, onAboutClick, onLogoutClick } = this.props;
const dropdownIconColor = {
color: 'white'
};
return (
<I18n>
{({ i18n }) => (
<Toolbar>
<ToolbarGroup>
<ToolbarItem>
<Dropdown
isOpen={isHelpOpen}
position={DropdownPosition.right}
onSelect={this.onHelpSelect}
toggle={(
<DropdownToggle
onToggle={this.onHelpToggle}
style={dropdownIconColor}
>
<QuestionCircleIcon />
</DropdownToggle>
)}
dropdownItems={[
<DropdownItem
key="help"
target="_blank"
href={DOCLINK}
>
{i18n._(t`Help`)}
</DropdownItem>,
<DropdownItem
key="about"
component="button"
isDisabled={isAboutDisabled}
onClick={onAboutClick}
>
{i18n._(t`About`)}
</DropdownItem>
]}
/>
</ToolbarItem>
<ToolbarItem>
<Dropdown
isOpen={isUserOpen}
position={DropdownPosition.right}
onSelect={this.onUserSelect}
toggle={(
<DropdownToggle
onToggle={this.onUserToggle}
style={dropdownIconColor}
>
<UserIcon />
</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
position="left"
content={
<div>Help</div>
}
>
<ToolbarItem>
<Dropdown
isPlain
isOpen={isHelpOpen}
position={DropdownPosition.right}
onSelect={this.onHelpSelect}
toggle={(
<DropdownToggle
onToggle={this.onHelpToggle}
>
<QuestionCircleIcon />
</DropdownToggle>
)}
dropdownItems={[
<DropdownItem
key="help"
target="_blank"
href={DOCLINK}
>
{i18n._(t`Help`)}
</DropdownItem>,
<DropdownItem
key="about"
component="button"
isDisabled={isAboutDisabled}
onClick={onAboutClick}
>
{i18n._(t`About`)}
</DropdownItem>
]}
/>
</ToolbarItem>
</Tooltip>
<Tooltip
position="left"
content={
<div>User</div>
}
>
<ToolbarItem>
<Dropdown
isPlain
isOpen={isUserOpen}
position={DropdownPosition.right}
onSelect={this.onUserSelect}
toggle={(
<DropdownToggle
onToggle={this.onUserToggle}
>
<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>
</Toolbar>
)}