moon
/
soapbox
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'reactions-column' into 'develop' 

Add column headers to some more pages

See merge request soapbox-pub/soapbox-fe!947
This commit is contained in:
marcin mikołajczak 2022-01-01 23:14:32 +00:00
parent 6174c1553b bda323ea7d
commit 18e9da0a1d
5 changed files with 35 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/soapbox/features/account_gallery/index.js
View File

@ -8,7 +8,7 @@ import {
} from 'soapbox/actions/accounts'; } from 'soapbox/actions/accounts';
import { expandAccountMediaTimeline } from '../../actions/timelines'; import { expandAccountMediaTimeline } from '../../actions/timelines';
import LoadingIndicator from 'soapbox/components/loading_indicator'; import LoadingIndicator from 'soapbox/components/loading_indicator';
import Column from '../ui/components/column'; import Column from 'soapbox/components/column';
import ImmutablePureComponent from 'react-immutable-pure-component'; import ImmutablePureComponent from 'react-immutable-pure-component';
import { getAccountGallery, findAccountByUsername } from 'soapbox/selectors'; import { getAccountGallery, findAccountByUsername } from 'soapbox/selectors';
import MediaItem from './components/media_item'; import MediaItem from './components/media_item';
@ -17,6 +17,7 @@ import MissingIndicator from 'soapbox/components/missing_indicator';
import { openModal } from 'soapbox/actions/modal'; import { openModal } from 'soapbox/actions/modal';
import { NavLink } from 'react-router-dom'; import { NavLink } from 'react-router-dom';
import { FormattedMessage } from 'react-intl'; import { FormattedMessage } from 'react-intl';
import SubNavigation from 'soapbox/components/sub_navigation';
const mapStateToProps = (state, { params, withReplies = false }) => { const mapStateToProps = (state, { params, withReplies = false }) => {
const username = params.username || ''; const username = params.username || '';
@ -186,6 +187,7 @@ class AccountGallery extends ImmutablePureComponent {
return ( return (
<Column> <Column>
<SubNavigation message={`@${accountUsername}`} />
<div className='slist slist--flex' onScroll={this.handleScroll}> <div className='slist slist--flex' onScroll={this.handleScroll}>
<div className='account__section-headline'> <div className='account__section-headline'>
<div style={{ width: '100%', display: 'flex' }}> <div style={{ width: '100%', display: 'flex' }}>

10
app/soapbox/features/favourited_statuses/index.js
View File

@ -5,7 +5,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
import { fetchFavouritedStatuses, expandFavouritedStatuses, fetchAccountFavouritedStatuses, expandAccountFavouritedStatuses } from '../../actions/favourites'; import { fetchFavouritedStatuses, expandFavouritedStatuses, fetchAccountFavouritedStatuses, expandAccountFavouritedStatuses } from '../../actions/favourites';
import Column from '../ui/components/column'; import Column from '../ui/components/column';
import StatusList from '../../components/status_list'; import StatusList from '../../components/status_list';
import { injectIntl, FormattedMessage } from 'react-intl'; import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
import ImmutablePureComponent from 'react-immutable-pure-component'; import ImmutablePureComponent from 'react-immutable-pure-component';
import { debounce } from 'lodash'; import { debounce } from 'lodash';
import MissingIndicator from 'soapbox/components/missing_indicator'; import MissingIndicator from 'soapbox/components/missing_indicator';
@ -13,6 +13,10 @@ import { fetchAccount, fetchAccountByUsername } from '../../actions/accounts';
import LoadingIndicator from '../../components/loading_indicator'; import LoadingIndicator from '../../components/loading_indicator';
import { findAccountByUsername } from 'soapbox/selectors'; import { findAccountByUsername } from 'soapbox/selectors';
const messages = defineMessages({
heading: { id: 'column.favourited_statuses', defaultMessage: 'Liked posts' },
});
const mapStateToProps = (state, { params }) => { const mapStateToProps = (state, { params }) => {
const username = params.username || ''; const username = params.username || '';
const me = state.get('me'); const me = state.get('me');
@ -102,7 +106,7 @@ class Favourites extends ImmutablePureComponent {
}, 300, { leading: true }) }, 300, { leading: true })
render() { render() {
const { statusIds, isLoading, hasMore, isMyAccount, isAccount, accountId, unavailable } = this.props; const { intl, statusIds, isLoading, hasMore, isMyAccount, isAccount, accountId, unavailable } = this.props;
if (!isMyAccount && !isAccount && accountId !== -1) { if (!isMyAccount && !isAccount && accountId !== -1) {
return ( return (
@ -135,7 +139,7 @@ class Favourites extends ImmutablePureComponent {
: <FormattedMessage id='empty_column.account_favourited_statuses' defaultMessage="This user doesn't have any liked posts yet." />; : <FormattedMessage id='empty_column.account_favourited_statuses' defaultMessage="This user doesn't have any liked posts yet." />;
return ( return (
<Column> <Column heading={intl.formatMessage(messages.heading)}>
<StatusList <StatusList
statusIds={statusIds} statusIds={statusIds}
scrollKey='favourited_statuses' scrollKey='favourited_statuses'

12
app/soapbox/features/followers/index.js
View File

@ -11,7 +11,7 @@ import {
expandFollowers, expandFollowers,
fetchAccountByUsername, fetchAccountByUsername,
} from '../../actions/accounts'; } from '../../actions/accounts';
import { FormattedMessage } from 'react-intl'; import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
import AccountContainer from '../../containers/account_container'; import AccountContainer from '../../containers/account_container';
import Column from '../ui/components/column'; import Column from '../ui/components/column';
import ScrollableList from '../../components/scrollable_list'; import ScrollableList from '../../components/scrollable_list';
@ -19,6 +19,10 @@ import MissingIndicator from 'soapbox/components/missing_indicator';
import { getFollowDifference } from 'soapbox/utils/accounts'; import { getFollowDifference } from 'soapbox/utils/accounts';
import { findAccountByUsername } from 'soapbox/selectors'; import { findAccountByUsername } from 'soapbox/selectors';
const messages = defineMessages({
heading: { id: 'column.followers', defaultMessage: 'Followers' },
});
const mapStateToProps = (state, { params, withReplies = false }) => { const mapStateToProps = (state, { params, withReplies = false }) => {
const username = params.username || ''; const username = params.username || '';
const me = state.get('me'); const me = state.get('me');
@ -47,9 +51,11 @@ const mapStateToProps = (state, { params, withReplies = false }) => {
}; };
export default @connect(mapStateToProps) export default @connect(mapStateToProps)
@injectIntl
class Followers extends ImmutablePureComponent { class Followers extends ImmutablePureComponent {
static propTypes = { static propTypes = {
intl: PropTypes.object.isRequired,
params: PropTypes.object.isRequired, params: PropTypes.object.isRequired,
dispatch: PropTypes.func.isRequired, dispatch: PropTypes.func.isRequired,
accountIds: ImmutablePropTypes.orderedSet, accountIds: ImmutablePropTypes.orderedSet,
@ -85,7 +91,7 @@ class Followers extends ImmutablePureComponent {
}, 300, { leading: true }); }, 300, { leading: true });
render() { render() {
const { accountIds, hasMore, diffCount, isAccount, accountId, unavailable } = this.props; const { intl, accountIds, hasMore, diffCount, isAccount, accountId, unavailable } = this.props;
if (!isAccount && accountId !== -1) { if (!isAccount && accountId !== -1) {
return ( return (
@ -114,7 +120,7 @@ class Followers extends ImmutablePureComponent {
} }
return ( return (
<Column> <Column heading={intl.formatMessage(messages.heading)}>
<ScrollableList <ScrollableList
scrollKey='followers' scrollKey='followers'
hasMore={hasMore} hasMore={hasMore}

12
app/soapbox/features/following/index.js
View File

@ -11,7 +11,7 @@ import {
expandFollowing, expandFollowing,
fetchAccountByUsername, fetchAccountByUsername,
} from '../../actions/accounts'; } from '../../actions/accounts';
import { FormattedMessage } from 'react-intl'; import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
import AccountContainer from '../../containers/account_container'; import AccountContainer from '../../containers/account_container';
import Column from '../ui/components/column'; import Column from '../ui/components/column';
import ScrollableList from '../../components/scrollable_list'; import ScrollableList from '../../components/scrollable_list';
@ -19,6 +19,10 @@ import MissingIndicator from 'soapbox/components/missing_indicator';
import { getFollowDifference } from 'soapbox/utils/accounts'; import { getFollowDifference } from 'soapbox/utils/accounts';
import { findAccountByUsername } from 'soapbox/selectors'; import { findAccountByUsername } from 'soapbox/selectors';
const messages = defineMessages({
heading: { id: 'column.following', defaultMessage: 'Following' },
});
const mapStateToProps = (state, { params, withReplies = false }) => { const mapStateToProps = (state, { params, withReplies = false }) => {
const username = params.username || ''; const username = params.username || '';
const me = state.get('me'); const me = state.get('me');
@ -47,9 +51,11 @@ const mapStateToProps = (state, { params, withReplies = false }) => {
}; };
export default @connect(mapStateToProps) export default @connect(mapStateToProps)
@injectIntl
class Following extends ImmutablePureComponent { class Following extends ImmutablePureComponent {
static propTypes = { static propTypes = {
intl: PropTypes.object.isRequired,
params: PropTypes.object.isRequired, params: PropTypes.object.isRequired,
dispatch: PropTypes.func.isRequired, dispatch: PropTypes.func.isRequired,
accountIds: ImmutablePropTypes.orderedSet, accountIds: ImmutablePropTypes.orderedSet,
@ -85,7 +91,7 @@ class Following extends ImmutablePureComponent {
}, 300, { leading: true }); }, 300, { leading: true });
render() { render() {
const { accountIds, hasMore, isAccount, diffCount, accountId, unavailable } = this.props; const { intl, accountIds, hasMore, isAccount, diffCount, accountId, unavailable } = this.props;
if (!isAccount && accountId !== -1) { if (!isAccount && accountId !== -1) {
return ( return (
@ -114,7 +120,7 @@ class Following extends ImmutablePureComponent {
} }
return ( return (
<Column> <Column heading={intl.formatMessage(messages.heading)}>
<ScrollableList <ScrollableList
scrollKey='following' scrollKey='following'
hasMore={hasMore} hasMore={hasMore}

10
app/soapbox/features/pinned_statuses/index.js
View File

@ -5,10 +5,14 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
import { fetchPinnedStatuses } from '../../actions/pin_statuses'; import { fetchPinnedStatuses } from '../../actions/pin_statuses';
import Column from '../ui/components/column'; import Column from '../ui/components/column';
import StatusList from '../../components/status_list'; import StatusList from '../../components/status_list';
import { injectIntl, FormattedMessage } from 'react-intl'; import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
import ImmutablePureComponent from 'react-immutable-pure-component'; import ImmutablePureComponent from 'react-immutable-pure-component';
import MissingIndicator from 'soapbox/components/missing_indicator'; import MissingIndicator from 'soapbox/components/missing_indicator';
const messages = defineMessages({
heading: { id: 'column.pins', defaultMessage: 'Pinned posts' },
});
const mapStateToProps = (state, { params }) => { const mapStateToProps = (state, { params }) => {
const username = params.username || ''; const username = params.username || '';
const me = state.get('me'); const me = state.get('me');
@ -37,7 +41,7 @@ class PinnedStatuses extends ImmutablePureComponent {
} }
render() { render() {
const { statusIds, hasMore, isMyAccount } = this.props; const { intl, statusIds, hasMore, isMyAccount } = this.props;
if (!isMyAccount) { if (!isMyAccount) {
return ( return (
@ -48,7 +52,7 @@ class PinnedStatuses extends ImmutablePureComponent {
} }
return ( return (
<Column> <Column heading={intl.formatMessage(messages.heading)}>
<StatusList <StatusList
statusIds={statusIds} statusIds={statusIds}
scrollKey='pinned_statuses' scrollKey='pinned_statuses'