TimelineQueueButtonHeader: make it sticky

profile-avatar-switcher
Alex Gleason 2021-09-27 18:38:38 -05:00
rodzic e30ca5208d
commit cbb033e866
Nie znaleziono w bazie danych klucza dla tego podpisu
ID klucza GPG: 7211D1F99744FBB7
3 zmienionych plików z 27 dodań i 9 usunięć

Wyświetl plik

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

Wyświetl plik

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

Wyświetl plik

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