Add button to go to top of build page
As a frequent user of the Zuul web UI, I have often wished there were a way to jump to the top of the build page after scrolling down a large log file. This adds a button in the bottom right corner that jumps to the top of the page when clicked. Change-Id: I7782055d64255844b682e282fcd1d74cf88f4ced
This commit is contained in:
@@ -18,6 +18,7 @@ import { withRouter } from 'react-router-dom'
|
||||
import PropTypes from 'prop-types'
|
||||
import { parse } from 'query-string'
|
||||
import {
|
||||
Button,
|
||||
EmptyState,
|
||||
EmptyStateVariant,
|
||||
EmptyStateIcon,
|
||||
@@ -30,6 +31,7 @@ import {
|
||||
Title,
|
||||
} from '@patternfly/react-core'
|
||||
import {
|
||||
ArrowUpIcon,
|
||||
BuildIcon,
|
||||
FileArchiveIcon,
|
||||
FileCodeIcon,
|
||||
@@ -65,6 +67,10 @@ class BuildPage extends React.Component {
|
||||
history: PropTypes.object.isRequired,
|
||||
}
|
||||
|
||||
state = {
|
||||
topOfPageVisible: true,
|
||||
}
|
||||
|
||||
updateData = () => {
|
||||
// The related fetchBuild...() methods won't do anything if the data is
|
||||
// already available in the local state, so just call them.
|
||||
@@ -75,11 +81,16 @@ class BuildPage extends React.Component {
|
||||
)
|
||||
}
|
||||
|
||||
onScroll = () => {
|
||||
this.setState({topOfPageVisible: window.scrollY === 0})
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
document.title = 'Zuul Build'
|
||||
if (this.props.tenant.name) {
|
||||
this.updateData()
|
||||
}
|
||||
window.addEventListener('scroll', this.onScroll)
|
||||
}
|
||||
|
||||
componentDidUpdate(prevProps) {
|
||||
@@ -302,11 +313,23 @@ class BuildPage extends React.Component {
|
||||
</Tab>
|
||||
</Tabs>
|
||||
</PageSection>
|
||||
{!this.state.topOfPageVisible && (
|
||||
<PageSection variant={PageSectionVariants.light}>
|
||||
<Button onClick={scrollToTop} variant="primary" style={{position: 'fixed', bottom: 20, right: 20, zIndex: 1}}>
|
||||
Go to top of page <ArrowUpIcon/>
|
||||
</Button>
|
||||
</PageSection>
|
||||
)}
|
||||
</>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
function scrollToTop() {
|
||||
window.scrollTo(0,0)
|
||||
document.activeElement.blur()
|
||||
}
|
||||
|
||||
function mapStateToProps(state, ownProps) {
|
||||
const buildId = ownProps.match.params.buildId
|
||||
// JavaScript will return undefined in case the key is missing in the
|
||||
|
||||
Reference in New Issue
Block a user