mirror of
https://github.com/ansible/awx.git
synced 2026-02-16 02:30:01 -03:30
add header toolbar component and move About modal control to App
This commit is contained in:
@@ -1,5 +1,4 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import React, { Component } from 'react';
|
||||
import { I18n } from '@lingui/react';
|
||||
import { Trans, t } from '@lingui/macro';
|
||||
import {
|
||||
@@ -13,10 +12,8 @@ import heroImg from '@patternfly/patternfly-next/assets/images/pfbg_992.jpg';
|
||||
import brandImg from '../../images/tower-logo-white.svg';
|
||||
import logoImg from '../../images/tower-logo-login.svg';
|
||||
|
||||
import { ConfigContext } from '../context';
|
||||
|
||||
class About extends React.Component {
|
||||
createSpeechBubble = (version) => {
|
||||
class About extends Component {
|
||||
static createSpeechBubble (version) {
|
||||
let text = `Tower ${version}`;
|
||||
let top = '';
|
||||
let bottom = '';
|
||||
@@ -33,61 +30,60 @@ class About extends React.Component {
|
||||
return top + text + bottom;
|
||||
}
|
||||
|
||||
handleModalToggle = () => {
|
||||
const { onAboutModalClose } = this.props;
|
||||
onAboutModalClose();
|
||||
};
|
||||
constructor (props) {
|
||||
super(props);
|
||||
|
||||
this.createSpeechBubble = this.constructor.createSpeechBubble.bind(this);
|
||||
}
|
||||
|
||||
render () {
|
||||
const { isOpen } = this.props;
|
||||
const {
|
||||
ansible_version,
|
||||
version,
|
||||
isOpen,
|
||||
onClose
|
||||
} = this.props;
|
||||
|
||||
const speechBubble = this.createSpeechBubble(version);
|
||||
|
||||
return (
|
||||
<I18n>
|
||||
{({ i18n }) => (
|
||||
<ConfigContext.Consumer>
|
||||
{({ ansible_version, version }) => (
|
||||
<AboutModal
|
||||
isOpen={isOpen}
|
||||
onClose={this.handleModalToggle}
|
||||
productName="Ansible Tower"
|
||||
trademark={i18n._(t`Copyright 2018 Red Hat, Inc.`)}
|
||||
brandImageSrc={brandImg}
|
||||
brandImageAlt={i18n._(t`Brand Image`)}
|
||||
logoImageSrc={logoImg}
|
||||
logoImageAlt={i18n._(t`AboutModal Logo`)}
|
||||
heroImageSrc={heroImg}
|
||||
>
|
||||
<pre>
|
||||
{this.createSpeechBubble(version)}
|
||||
{`
|
||||
<AboutModal
|
||||
isOpen={isOpen}
|
||||
onClose={onClose}
|
||||
productName="Ansible Tower"
|
||||
trademark={i18n._(t`Copyright 2018 Red Hat, Inc.`)}
|
||||
brandImageSrc={brandImg}
|
||||
brandImageAlt={i18n._(t`Brand Image`)}
|
||||
logoImageSrc={logoImg}
|
||||
logoImageAlt={i18n._(t`AboutModal Logo`)}
|
||||
heroImageSrc={heroImg}
|
||||
>
|
||||
<pre>
|
||||
{ speechBubble }
|
||||
{`
|
||||
\\
|
||||
\\ ^__^
|
||||
\\ ^__^
|
||||
(oo)\\_______
|
||||
(__) A )\\
|
||||
||----w |
|
||||
|| ||
|
||||
`}
|
||||
</pre>
|
||||
|
||||
<TextContent>
|
||||
<TextList component="dl">
|
||||
<TextListItem component="dt">
|
||||
<Trans>Ansible Version</Trans>
|
||||
</TextListItem>
|
||||
<TextListItem component="dd">{ansible_version}</TextListItem>
|
||||
</TextList>
|
||||
</TextContent>
|
||||
</AboutModal>
|
||||
)}
|
||||
</ConfigContext.Consumer>
|
||||
</pre>
|
||||
<TextContent>
|
||||
<TextList component="dl">
|
||||
<TextListItem component="dt">
|
||||
<Trans>Ansible Version</Trans>
|
||||
</TextListItem>
|
||||
<TextListItem component="dd">{ ansible_version }</TextListItem>
|
||||
</TextList>
|
||||
</TextContent>
|
||||
</AboutModal>
|
||||
)}
|
||||
</I18n>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
About.contextTypes = {
|
||||
ansible_version: PropTypes.string,
|
||||
version: PropTypes.string,
|
||||
};
|
||||
|
||||
export default About;
|
||||
|
||||
Reference in New Issue
Block a user