TimelineQueueButtonHeader: make it sticky

This commit is contained in:
Alex Gleason 2021-09-27 18:38:38 -05:00
parent e30ca5208d
commit cbb033e866
No known key found for this signature in database
GPG key ID: 7211D1F99744FBB7
3 changed files with 27 additions and 9 deletions

View file

@ -82,6 +82,7 @@ export default class StatusList extends ImmutablePureComponent {
}
handleDequeueTimeline = () => {
window.scrollTo({ top: 0, behavior: 'smooth' });
const { onDequeueTimeline, timelineId } = this.props;
if (!onDequeueTimeline || !timelineId) return;
onDequeueTimeline(timelineId);

View file

@ -2,6 +2,7 @@ import React from 'react';
import PropTypes from 'prop-types';
import { injectIntl } from 'react-intl';
import classNames from 'classnames';
import SvgIcon from 'soapbox/components/svg_icon';
export default @injectIntl
class TimelineQueueButtonHeader extends React.PureComponent {
@ -27,6 +28,7 @@ class TimelineQueueButtonHeader extends React.PureComponent {
return (
<div className={classes}>
<a className='timeline-queue-header__btn' onClick={onClick}>
<SvgIcon src={require('@tabler/icons/icons/arrow-bar-to-up.svg')} />
{(count > 0) && intl.formatMessage(message, { count })}
</a>
</div>

View file

@ -1,29 +1,44 @@
.timeline-queue-header {
display: block;
width: 100%;
max-height: 46px;
position: relative;
display: flex;
align-items: center;
justify-content: space-evenly;
max-height: 30px;
position: sticky;
top: 60px;
margin: 8px auto;
background-color: var(--brand-color);
color: #fff;
border-bottom: 1px solid;
border-top: 1px solid;
border-color: var(--brand-color--faint);
border-radius: 100px;
transition: max-height 150ms ease;
overflow: hidden;
opacity: 1;
left: 0;
right: 0;
padding: 0 10px;
z-index: 999;
.svg-icon {
margin-right: 5px;
}
&.hidden {
max-height: 0;
opacity: 0;
margin: 0;
}
&__btn {
display: block;
width: 100%;
height: 100%;
text-align: center;
display: flex;
line-height: 46px;
font-size: 14px;
cursor: pointer;
color: var(--primary-text-color);
color: #fff;
white-space: nowrap;
align-items: center;
justify-content: center;
span {
height: 46px;