@ -4,6 +4,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
import PropTypes from 'prop-types' ;
import PropTypes from 'prop-types' ;
import { fetchAccount , fetchAccountByUsername } from '../../actions/accounts' ;
import { fetchAccount , fetchAccountByUsername } from '../../actions/accounts' ;
import { expandAccountFeaturedTimeline , expandAccountTimeline } from '../../actions/timelines' ;
import { expandAccountFeaturedTimeline , expandAccountTimeline } from '../../actions/timelines' ;
import Icon from 'soapbox/components/icon' ;
import StatusList from '../../components/status_list' ;
import StatusList from '../../components/status_list' ;
import LoadingIndicator from '../../components/loading_indicator' ;
import LoadingIndicator from '../../components/loading_indicator' ;
import Column from '../ui/components/column' ;
import Column from '../ui/components/column' ;
@ -18,7 +19,7 @@ import { fetchPatronAccount } from '../../actions/patron';
import { getSoapboxConfig } from 'soapbox/actions/soapbox' ;
import { getSoapboxConfig } from 'soapbox/actions/soapbox' ;
import { getSettings } from 'soapbox/actions/settings' ;
import { getSettings } from 'soapbox/actions/settings' ;
import { makeGetStatusIds , findAccountByUsername } from 'soapbox/selectors' ;
import { makeGetStatusIds , findAccountByUsername } from 'soapbox/selectors' ;
import SubNavigation from 'soapbox/components/sub_navigation ';
import classNames from 'classnames ';
const makeMapStateToProps = ( ) => {
const makeMapStateToProps = ( ) => {
const getStatusIds = makeGetStatusIds ( ) ;
const getStatusIds = makeGetStatusIds ( ) ;
@ -81,6 +82,11 @@ class AccountTimeline extends ImmutablePureComponent {
unavailable : PropTypes . bool ,
unavailable : PropTypes . bool ,
} ;
} ;
state = {
collapsed : true ,
animating : false ,
}
componentDidMount ( ) {
componentDidMount ( ) {
const { params : { username } , accountId , accountApId , withReplies , me , patronEnabled } = this . props ;
const { params : { username } , accountId , accountApId , withReplies , me , patronEnabled } = this . props ;
@ -129,8 +135,18 @@ class AccountTimeline extends ImmutablePureComponent {
}
}
}
}
handleToggleClick = ( e ) => {
e . stopPropagation ( ) ;
this . setState ( { collapsed : ! this . state . collapsed , animating : true } ) ;
}
handleTransitionEnd = ( ) => {
this . setState ( { animating : false } ) ;
}
render ( ) {
render ( ) {
const { statusIds , featuredStatusIds , isLoading , hasMore , isBlocked , isAccount , accountId , unavailable , accountUsername } = this . props ;
const { statusIds , featuredStatusIds , isLoading , hasMore , isBlocked , isAccount , accountId , unavailable , accountUsername } = this . props ;
const { collapsed , animating } = this . state ;
if ( ! isAccount && accountId !== - 1 ) {
if ( ! isAccount && accountId !== - 1 ) {
return (
return (
@ -161,12 +177,6 @@ class AccountTimeline extends ImmutablePureComponent {
return (
return (
< Column transparent >
< Column transparent >
< SubNavigation
className = 'account__sub-navigation'
message = { ` @ ${ accountUsername } ` }
showAfter = { 300 }
settings = { ColumnSettingsContainer }
/ >
< div className = 'account__section-headline' >
< div className = 'account__section-headline' >
< NavLink exact to = { ` /@ ${ accountUsername } ` } >
< NavLink exact to = { ` /@ ${ accountUsername } ` } >
< FormattedMessage id = 'account.posts' defaultMessage = 'Posts' / >
< FormattedMessage id = 'account.posts' defaultMessage = 'Posts' / >
@ -177,6 +187,16 @@ class AccountTimeline extends ImmutablePureComponent {
< NavLink exact to = { ` /@ ${ accountUsername } /media ` } >
< NavLink exact to = { ` /@ ${ accountUsername } /media ` } >
< FormattedMessage id = 'account.media' defaultMessage = 'Media' / >
< FormattedMessage id = 'account.media' defaultMessage = 'Media' / >
< / N a v L i n k >
< / N a v L i n k >
< div className = 'column-header__buttons' >
< button onClick = { this . handleToggleClick } >
< Icon id = 'sliders' / >
< / b u t t o n >
< / d i v >
< / d i v >
< div className = { classNames ( 'column-header__collapsible' , { collapsed , animating } ) } onTransitionEnd = { this . handleTransitionEnd } >
< div className = 'column-header__collapsible-inner' >
{ ( ! collapsed || animating ) && < ColumnSettingsContainer / > }
< / d i v >
< / d i v >
< / d i v >
< StatusList
< StatusList
scrollKey = 'account_timeline'
scrollKey = 'account_timeline'