random-mirrors/gab-social
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Updated timeline_queue_button_header

Browse Source 
fixes: #27
put queue header in dom but hide if no count
if count, animate in so it doesn't jump the feed
This commit is contained in:
mgabdev 2019-07-17 18:53:09 -04:00
parent 2eea427148
commit 2aa38d53ea
2 changed files with 19 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
app/javascript/gabsocial/components/timeline_queue_button_header.js
View File

@ -2,6 +2,7 @@ import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { FormattedMessage } from 'react-intl'; import { FormattedMessage } from 'react-intl';
import { shortNumberFormat } from '../utils/numbers'; import { shortNumberFormat } from '../utils/numbers';
import classNames from 'classnames';
export default class TimelineQueueButtonHeader extends React.PureComponent { export default class TimelineQueueButtonHeader extends React.PureComponent {
static propTypes = { static propTypes = {
@ -18,19 +19,21 @@ export default class TimelineQueueButtonHeader extends React.PureComponent {
render () { render () {
const { count, itemType, onClick } = this.props; const { count, itemType, onClick } = this.props;
if (count <= 0) return null; const classes = classNames('timeline-queue-header', {
'hidden': (count <= 0)
});
return ( return (
<div className='timeline-queue-header'> <div className={classes}>
<a className='timeline-queue-header__btn' onClick={onClick}> <a className='timeline-queue-header__btn' onClick={onClick}>
<FormattedMessage {(count > 0) && <FormattedMessage
id='timeline_queue.label' id='timeline_queue.label'
defaultMessage='Click to see {count} new {type}' defaultMessage='Click to see {count} new {type}'
values={{ values={{
count: shortNumberFormat(count), count: shortNumberFormat(count),
type: count == 1 ? itemType : `${itemType}s`, type: count == 1 ? itemType : `${itemType}s`,
}} }}
/> />}
</a> </a>
</div> </div>
); );

14
app/javascript/styles/gabsocial/components.scss
View File

@ -5108,21 +5108,31 @@ noscript {
.timeline-queue-header { .timeline-queue-header {
display: block; display: block;
width: 100%; width: 100%;
height: 52px; max-height: 46px;
position: relative; position: relative;
background-color: darken($ui-base-color, 8%); background-color: darken($ui-base-color, 8%);
border-bottom: 1px solid; border-bottom: 1px solid;
border-top: 1px solid; border-top: 1px solid;
border-color: darken($ui-base-color, 4%); border-color: darken($ui-base-color, 4%);
transition: max-height 2.5s ease;
overflow: hidden;
&.hidden {
max-height: 0px;
}
&__btn { &__btn {
display: block; display: block;
width: 100%; width: 100%;
height: 100%; height: 100%;
text-align: center; text-align: center;
line-height: 52px; line-height: 46px;
font-size: 14px; font-size: 14px;
cursor: pointer; cursor: pointer;
color: $secondary-text-color; color: $secondary-text-color;
span {
height: 46px;
}
} }
} }