mirror of
https://github.com/ansible/awx.git
synced 2026-02-14 01:34:45 -03:30
Restore logo (#218)
* move tower logo svg into component * switch to new logo in header & login screen
This commit is contained in:
Keith Grant
GitHub
21
src/App.jsx
21
src/App.jsx
@@ -4,13 +4,13 @@ import {
|
||||
Nav,
|
||||
NavList,
|
||||
Page,
|
||||
PageHeader,
|
||||
PageHeader as PFPageHeader,
|
||||
PageSidebar,
|
||||
Button
|
||||
} from '@patternfly/react-core';
|
||||
|
||||
import { withI18n } from '@lingui/react';
|
||||
import { t } from '@lingui/macro';
|
||||
import styled from 'styled-components';
|
||||
|
||||
import { RootDialog } from './contexts/RootDialog';
|
||||
import { withNetwork } from './contexts/Network';
|
||||
@@ -22,6 +22,20 @@ import NavExpandableGroup from './components/NavExpandableGroup';
|
||||
import TowerLogo from './components/TowerLogo';
|
||||
import PageHeaderToolbar from './components/PageHeaderToolbar';
|
||||
|
||||
const PageHeader = styled(PFPageHeader)`
|
||||
& .pf-c-page__header-brand-link {
|
||||
color: inherit;
|
||||
|
||||
&:hover {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
& svg {
|
||||
width: 125px;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
class App extends Component {
|
||||
constructor (props) {
|
||||
super(props);
|
||||
@@ -104,7 +118,8 @@ class App extends Component {
|
||||
<PageHeader
|
||||
showNavToggle
|
||||
onNavToggle={this.onNavToggle}
|
||||
logo={<TowerLogo linkTo="/" />}
|
||||
logo={<TowerLogo />}
|
||||
logoProps={{ href: '/' }}
|
||||
toolbar={(
|
||||
<PageHeaderToolbar
|
||||
loggedInUser={me}
|
||||
|
||||
11
src/app.scss
11
src/app.scss
@@ -11,15 +11,6 @@
|
||||
max-width: 255px;
|
||||
}
|
||||
|
||||
.pf-c-page__header-brand-link {
|
||||
max-width: 85px;
|
||||
}
|
||||
|
||||
.pf-c-page__header-brand-link img {
|
||||
transform: scale(1.1, 1.1);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.pf-c-page__header-tools .pf-l-toolbar__item {
|
||||
margin-left: 20px;
|
||||
}
|
||||
@@ -399,5 +390,3 @@
|
||||
.pf-m-error p.pf-c-form__helper-text {
|
||||
color: var(--pf-global--danger-color--100);
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -1,67 +1,83 @@
|
||||
import React, { Component } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { withRouter } from 'react-router-dom';
|
||||
import { withI18n } from '@lingui/react';
|
||||
import { t } from '@lingui/macro';
|
||||
import { Brand } from '@patternfly/react-core';
|
||||
|
||||
import TowerLogoHeader from '../../../images/tower-logo-header.svg';
|
||||
import TowerLogoHeaderHover from '../../../images/tower-logo-header-hover.svg';
|
||||
|
||||
class TowerLogo extends Component {
|
||||
constructor (props) {
|
||||
super(props);
|
||||
|
||||
this.state = { hover: false };
|
||||
|
||||
this.onClick = this.onClick.bind(this);
|
||||
this.onHover = this.onHover.bind(this);
|
||||
}
|
||||
|
||||
onClick () {
|
||||
const { history, linkTo } = this.props;
|
||||
|
||||
if (!linkTo) return;
|
||||
|
||||
history.push(linkTo);
|
||||
}
|
||||
|
||||
onHover () {
|
||||
const { hover } = this.state;
|
||||
|
||||
this.setState({ hover: !hover });
|
||||
}
|
||||
|
||||
render () {
|
||||
const { hover } = this.state;
|
||||
const { i18n } = this.props;
|
||||
|
||||
let src = TowerLogoHeader;
|
||||
|
||||
if (hover) {
|
||||
src = TowerLogoHeaderHover;
|
||||
}
|
||||
|
||||
return (
|
||||
<Brand
|
||||
src={src}
|
||||
alt={i18n._(t`Tower Brand Image`)}
|
||||
onMouseOut={this.onHover}
|
||||
onMouseOver={this.onHover}
|
||||
onBlur={this.onHover}
|
||||
onFocus={this.onHover}
|
||||
onClick={this.onClick}
|
||||
/>
|
||||
<svg
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlnsXlink="http://www.w3.org/1999/xlink"
|
||||
x="0px"
|
||||
y="0px"
|
||||
viewBox="0 0 823 230"
|
||||
xmlSpace="preserve"
|
||||
css="fill: currentColor;"
|
||||
>
|
||||
<title>{i18n._(t`Tower Brand Image`)}</title>
|
||||
<g>
|
||||
<path d="M213.6,151.8h12.8l29.8,72.8h-11.9l-8.4-21.3h-32.6l-8.5,21.3h-11.3L213.6,151.8z M232.3,194.3l-12.7-31.9
|
||||
L207,194.3H232.3z"
|
||||
/>
|
||||
<path d="M262.3,171.7h10.4v5.3c4.2-4.2,10-6.5,15.9-6.3c12.2,0,20.6,8.5,20.6,20.7v33.3h-10.3v-31.5
|
||||
c0-8.2-5-13.4-13.2-13.4c-5.2-0.2-10.2,2.4-13,6.9v38.1h-10.4V171.7z"
|
||||
/>
|
||||
<path d="M322,210.9c4.8,4.2,10.9,6.5,17.3,6.7c8.3,0,12.7-3.6,12.7-7.9c0-3.7-2.6-5.9-8.5-6.8l-9.6-1.4
|
||||
c-10.4-1.5-15.8-6.4-15.8-14.7c0-9.7,8.5-16,20.7-16c7.6,0,15.1,2.3,21.3,6.8l-5.3,6.9c-5.1-3.4-10.4-5.5-16.8-5.5
|
||||
c-6.1,0-10.6,2.7-10.6,7.2c0,4,2.5,5.7,8.7,6.6l9.6,1.4c10.7,1.6,16,6.6,16,14.8c0,9.6-9.6,16.6-22.2,16.6c-8.8,0-17.2-2.6-23.2-7.8
|
||||
L322,210.9z"
|
||||
/>
|
||||
<path d="M368.4,156.7c0-3.6,2.9-6.4,6.5-6.4c3.6,0.1,6.3,3.1,6.2,6.7c-0.1,3.4-2.8,6.1-6.2,6.2
|
||||
C371.2,163.2,368.4,160.3,368.4,156.7z M380,224.6h-10.4v-52.9H380V224.6z"
|
||||
/>
|
||||
<path d="M418.3,225.5c-5.7,0-11.3-1.8-15.9-5.3v4.5h-10.3v-72.8l10.4-2.3v27c4.5-3.8,10.2-5.8,16.1-5.7
|
||||
c15.1,0,26.7,12.1,26.7,27.2S433.7,225.5,418.3,225.5z M402.5,186.2v24.1c3.8,4,9.1,6.2,14.7,6.1c10.3,0,18-7.9,18-18.2
|
||||
c0-10.5-7.9-18.3-18-18.3C411,179.9,405.9,182.2,402.5,186.2z"
|
||||
/>
|
||||
<path d="M465.5,224.6h-10.4v-72.8l10.4-2.3V224.6z" />
|
||||
<path d="M501.8,170.9c14.6,0,25.6,12.1,25.6,27.7v3h-41.8c1.3,8.8,9,15.3,17.9,15.2c4.9,0.1,9.6-1.6,13.4-4.7l6.7,6.6
|
||||
c-5.8,4.7-13,7.2-20.5,7c-15.6,0-27.8-12-27.8-27.4S486.8,170.9,501.8,170.9z M485.7,193.8h31.4c-1.5-8.1-7.8-14.1-15.5-14.1
|
||||
C493.5,179.6,487.2,185.4,485.7,193.8z"
|
||||
/>
|
||||
<path d="M544.1,151.8h60.6v7.2h-26.3v65.6h-8V159h-26.3V151.8z" />
|
||||
<path d="M625,171.5c14.8,0,26.5,11.9,26.5,27s-11.7,27.2-26.5,27.2s-26.6-11.9-26.6-27.1S610.1,171.5,625,171.5z
|
||||
M625,178.4c-10.6,0-19,8.8-19,20.2s8.3,20.3,19,20.3s19-8.9,19-20.3S635.6,178.4,625,178.4z"
|
||||
/>
|
||||
<path d="M670.8,224.6l-14.7-52.1h7.6l11.2,41.6l13-41.6h6.9l12.9,41.6l11.3-41.6h7.3l-14.8,52.1h-7.4l-12.9-41.7
|
||||
l-13,41.7H670.8z"
|
||||
/>
|
||||
<path d="M756.6,171.7c13.8,0,24.6,12,24.6,26.8v2.4h-42.7c1.1,10.3,9.3,17.9,19.6,17.9c5.4,0,10.8-1.8,14.4-4.8l4.8,5.1
|
||||
c-5.6,4.3-12.4,6.6-19.5,6.4c-14.7,0.2-26.7-11.6-26.8-26.3c0-0.2,0-0.5,0-0.7C730.9,183.8,742,171.7,756.6,171.7z M738.7,194.8
|
||||
h34.8c-1.4-9.3-8.5-16.3-17.2-16.3C747.1,178.5,740.1,185.4,738.7,194.8z"
|
||||
/>
|
||||
<path d="M791.8,172.5h7.7v7.2c3-5.2,8.5-8.4,14.5-8.3c1.7,0,3.4,0.2,5,0.7v7.1c-1.7-0.6-3.6-0.9-5.4-0.9
|
||||
c-5.6,0-11,2.8-14,10.6v35.8h-7.7L791.8,172.5z"
|
||||
/>
|
||||
<path d="M543.3,99.4c0,11.9,7.2,17.7,20.2,17.7c4-0.1,8-0.7,11.9-1.7v-13.8c-2.5,0.8-5.1,1.2-7.7,1.2
|
||||
c-5.4,0-7.4-1.7-7.4-6.7V74.9h15.6V60.7h-15.6v-18l-17,3.7v14.3H532v14.2h11.2L543.3,99.4L543.3,99.4z M490.4,99.7
|
||||
c0-3.7,3.7-5.5,9.2-5.5c3.4,0,6.8,0.4,10.1,1.3v7.2c-3.3,1.8-6.9,2.7-10.6,2.6C493.6,105.3,490.4,103.2,490.4,99.7 M495.6,117.3
|
||||
c6,0,10.8-1.3,15.4-4.3v3.4h16.8V80.7c0-13.6-9.2-21-24.4-21c-8.5,0-16.9,2-26,6.1l6.1,12.5c6.5-2.7,12-4.4,16.8-4.4
|
||||
c7,0,10.6,2.7,10.6,8.3v2.7c-4.1-1.1-8.4-1.6-12.6-1.6c-14.3,0-22.9,6-22.9,16.7C475.4,109.9,483.1,117.3,495.6,117.3 M403.1,116.4
|
||||
h18.1V87.5h30.3v28.8h18.1V42.7h-18.1V71h-30.3V42.7h-18.1V116.4z M334.2,88.5c0-8,6.3-14.1,14.6-14.1c4.3-0.1,8.5,1.4,11.8,4.3
|
||||
v19.4c-3.2,3-7.4,4.6-11.8,4.4C340.6,102.6,334.2,96.5,334.2,88.5 M360.8,116.3h16.8V39l-17,3.7v21c-4.3-2.4-9.3-3.7-14.2-3.7
|
||||
c-16.2,0-28.9,12.5-28.9,28.5c-0.2,15.6,12.3,28.4,27.9,28.6c0.2,0,0.3,0,0.5,0c5.4,0,10.6-1.7,14.9-4.8L360.8,116.3L360.8,116.3z
|
||||
M283.6,73.6c5.4,0,9.9,3.5,11.7,8.8H272C273.7,76.9,277.9,73.6,283.6,73.6 M254.9,88.6c0,16.2,13.2,28.8,30.3,28.8
|
||||
c9.4,0,16.2-2.5,23.2-8.4l-11.3-10c-2.6,2.7-6.5,4.2-11.1,4.2c-5.9,0.2-11.4-3.3-13.7-8.8H312v-4.2c0-17.7-11.9-30.4-28.1-30.4
|
||||
c-15.8-0.2-28.8,12.4-29,28.1C254.9,88.1,254.9,88.3,254.9,88.6 M225.6,58.2c6,0,9.4,3.8,9.4,8.3s-3.4,8.3-9.4,8.3h-17.9V58.2H225.6
|
||||
z M189.6,116.3h18.1V89.5h13.8l13.9,26.8h20.2l-16.2-29.4c8.4-3.4,13.9-11.6,13.9-20.7c0-13.2-10.4-23.5-26-23.5h-37.6L189.6,116.3z
|
||||
"
|
||||
/>
|
||||
<circle css="fill: #ee0000" cx="78.4" cy="77.9" r="76.4" />
|
||||
<path d="M114.5,108.4l-30.3-73c-0.7-2-2.6-3.3-4.7-3.2c-2.1,0-4.1,1.2-4.8,3.2l-33.3,80.1h11.4l13.2-33l39.3,31.8
|
||||
c1.6,1.3,2.7,1.9,4.2,1.9c3,0.1,5.5-2.3,5.6-5.3v-0.1C115,109.9,114.8,109.2,114.5,108.4z M79.5,48.6l19.7,48.7L69.4,73.8L79.5,48.6
|
||||
z"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
TowerLogo.propTypes = {
|
||||
linkTo: PropTypes.string,
|
||||
};
|
||||
|
||||
TowerLogo.defaultProps = {
|
||||
linkTo: null,
|
||||
};
|
||||
|
||||
export default withI18n()(withRouter(TowerLogo));
|
||||
export default withI18n()(TowerLogo);
|
||||
|
||||
Reference in New Issue
Block a user