kopia lustrzana https://gitlab.com/soapbox-pub/soapbox
TimelineQueueButtonHeader: make it sticky
rodzic
e30ca5208d
commit
cbb033e866
|
@ -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);
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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;
|
||||||
|
|
Ładowanie…
Reference in New Issue