diff options
Diffstat (limited to 'app/javascript/flavours/glitch/features')
14 files changed, 192 insertions, 122 deletions
diff --git a/app/javascript/flavours/glitch/features/account/components/profile_column_header.js b/app/javascript/flavours/glitch/features/account/components/profile_column_header.js index 1a6abef37..b6d373a2c 100644 --- a/app/javascript/flavours/glitch/features/account/components/profile_column_header.js +++ b/app/javascript/flavours/glitch/features/account/components/profile_column_header.js @@ -11,16 +11,18 @@ export default @injectIntl class ProfileColumnHeader extends React.PureComponent { static propTypes = { + onClick: PropTypes.func, intl: PropTypes.object.isRequired, }; render() { - const { intl } = this.props; + const { onClick, intl } = this.props; return ( <ColumnHeader icon='user-circle' title={intl.formatMessage(messages.profile)} + onClick={onClick} showBackButton /> ); diff --git a/app/javascript/flavours/glitch/features/account_gallery/index.js b/app/javascript/flavours/glitch/features/account_gallery/index.js index a9ea5088e..63c1b2d86 100644 --- a/app/javascript/flavours/glitch/features/account_gallery/index.js +++ b/app/javascript/flavours/glitch/features/account_gallery/index.js @@ -65,6 +65,10 @@ export default class AccountGallery extends ImmutablePureComponent { } } + handleHeaderClick = () => { + this.column.scrollTop(); + } + handleScrollToBottom = () => { if (this.props.hasMore) { this.handleLoadMore(this.props.medias.size > 0 ? this.props.medias.last().getIn(['status', 'id']) : undefined); @@ -94,6 +98,10 @@ export default class AccountGallery extends ImmutablePureComponent { return !(location.state && location.state.mastodonModalOpen); } + setRef = c => { + this.column = c; + } + render () { const { medias, isLoading, hasMore } = this.props; @@ -112,8 +120,8 @@ export default class AccountGallery extends ImmutablePureComponent { } return ( - <Column> - <ProfileColumnHeader /> + <Column ref={this.setRef}> + <ProfileColumnHeader onClick={this.handleHeaderClick} /> <ScrollContainer scrollKey='account_gallery' shouldUpdateScroll={this.shouldUpdateScroll}> <div className='scrollable scrollable--flex' onScroll={this.handleScroll}> diff --git a/app/javascript/flavours/glitch/features/account_timeline/index.js b/app/javascript/flavours/glitch/features/account_timeline/index.js index 415e3be20..d683b8789 100644 --- a/app/javascript/flavours/glitch/features/account_timeline/index.js +++ b/app/javascript/flavours/glitch/features/account_timeline/index.js @@ -57,10 +57,18 @@ export default class AccountTimeline extends ImmutablePureComponent { } } + handleHeaderClick = () => { + this.column.scrollTop(); + } + handleLoadMore = maxId => { this.props.dispatch(expandAccountTimeline(this.props.params.accountId, { maxId, withReplies: this.props.withReplies })); } + setRef = c => { + this.column = c; + } + render () { const { statusIds, featuredStatusIds, isLoading, hasMore } = this.props; @@ -73,8 +81,8 @@ export default class AccountTimeline extends ImmutablePureComponent { } return ( - <Column name='account'> - <ProfileColumnHeader /> + <Column ref={this.setRef} name='account'> + <ProfileColumnHeader onClick={this.handleHeaderClick} /> <StatusList prepend={<HeaderContainer accountId={this.props.params.accountId} />} diff --git a/app/javascript/flavours/glitch/features/followers/index.js b/app/javascript/flavours/glitch/features/followers/index.js index 124004cb6..6bb9f60fd 100644 --- a/app/javascript/flavours/glitch/features/followers/index.js +++ b/app/javascript/flavours/glitch/features/followers/index.js @@ -43,6 +43,10 @@ export default class Followers extends ImmutablePureComponent { } } + handleHeaderClick = () => { + this.column.scrollTop(); + } + handleScroll = (e) => { const { scrollTop, scrollHeight, clientHeight } = e.target; @@ -61,6 +65,10 @@ export default class Followers extends ImmutablePureComponent { return !(location.state && location.state.mastodonModalOpen); } + setRef = c => { + this.column = c; + } + render () { const { accountIds, hasMore } = this.props; @@ -79,8 +87,8 @@ export default class Followers extends ImmutablePureComponent { } return ( - <Column> - <ProfileColumnHeader /> + <Column ref={this.setRef}> + <ProfileColumnHeader onClick={this.handleHeaderClick} /> <ScrollContainer scrollKey='followers' shouldUpdateScroll={this.shouldUpdateScroll}> <div className='scrollable' onScroll={this.handleScroll}> diff --git a/app/javascript/flavours/glitch/features/following/index.js b/app/javascript/flavours/glitch/features/following/index.js index 656100dad..3f2f091a1 100644 --- a/app/javascript/flavours/glitch/features/following/index.js +++ b/app/javascript/flavours/glitch/features/following/index.js @@ -43,6 +43,10 @@ export default class Following extends ImmutablePureComponent { } } + handleHeaderClick = () => { + this.column.scrollTop(); + } + handleScroll = (e) => { const { scrollTop, scrollHeight, clientHeight } = e.target; @@ -61,6 +65,10 @@ export default class Following extends ImmutablePureComponent { return !(location.state && location.state.mastodonModalOpen); } + setRef = c => { + this.column = c; + } + render () { const { accountIds, hasMore } = this.props; @@ -79,8 +87,8 @@ export default class Following extends ImmutablePureComponent { } return ( - <Column> - <ProfileColumnHeader /> + <Column ref={this.setRef}> + <ProfileColumnHeader onClick={this.handleHeaderClick} /> <ScrollContainer scrollKey='following' shouldUpdateScroll={this.shouldUpdateScroll}> <div className='scrollable' onScroll={this.handleScroll}> diff --git a/app/javascript/flavours/glitch/features/local_settings/page/index.js b/app/javascript/flavours/glitch/features/local_settings/page/index.js index 4535d9849..bc4ad359c 100644 --- a/app/javascript/flavours/glitch/features/local_settings/page/index.js +++ b/app/javascript/flavours/glitch/features/local_settings/page/index.js @@ -328,6 +328,14 @@ export default class LocalSettingsPage extends React.PureComponent { > <FormattedMessage id='settings.inline_preview_cards' defaultMessage='Inline preview cards for external links' /> </LocalSettingsPageItem> + <LocalSettingsPageItem + settings={settings} + item={['media', 'reveal_behind_cw']} + id='mastodon-settings--reveal-behind-cw' + onChange={onChange} + > + <FormattedMessage id='settings.media_reveal_behind_cw' defaultMessage='Reveal sensitive media behind a CW by default' /> + </LocalSettingsPageItem> </div> ), ]; diff --git a/app/javascript/flavours/glitch/features/notifications/components/column_settings.js b/app/javascript/flavours/glitch/features/notifications/components/column_settings.js index 4e35d5b4e..e29bd61f5 100644 --- a/app/javascript/flavours/glitch/features/notifications/components/column_settings.js +++ b/app/javascript/flavours/glitch/features/notifications/components/column_settings.js @@ -90,6 +90,17 @@ export default class ColumnSettings extends React.PureComponent { <SettingToggle prefix='notifications' settings={settings} settingPath={['sounds', 'reblog']} onChange={onChange} label={soundStr} /> </div> </div> + + <div role='group' aria-labelledby='notifications-poll'> + <span id='notifications-poll' className='column-settings__section'><FormattedMessage id='notifications.column_settings.poll' defaultMessage='Poll results:' /></span> + + <div className='column-settings__row'> + <SettingToggle prefix='notifications_desktop' settings={settings} settingPath={['alerts', 'poll']} onChange={onChange} label={alertStr} /> + {showPushSettings && <SettingToggle prefix='notifications_push' settings={pushSettings} settingPath={['alerts', 'poll']} meta={pushMeta} onChange={this.onPushChange} label={pushStr} />} + <SettingToggle prefix='notifications' settings={settings} settingPath={['shows', 'poll']} onChange={onChange} label={showStr} /> + <SettingToggle prefix='notifications' settings={settings} settingPath={['sounds', 'poll']} onChange={onChange} label={soundStr} /> + </div> + </div> </div> ); } diff --git a/app/javascript/flavours/glitch/features/notifications/components/filter_bar.js b/app/javascript/flavours/glitch/features/notifications/components/filter_bar.js index f95a2c9de..3457b7598 100644 --- a/app/javascript/flavours/glitch/features/notifications/components/filter_bar.js +++ b/app/javascript/flavours/glitch/features/notifications/components/filter_bar.js @@ -6,6 +6,7 @@ const tooltips = defineMessages({ mentions: { id: 'notifications.filter.mentions', defaultMessage: 'Mentions' }, favourites: { id: 'notifications.filter.favourites', defaultMessage: 'Favourites' }, boosts: { id: 'notifications.filter.boosts', defaultMessage: 'Boosts' }, + polls: { id: 'notifications.filter.polls', defaultMessage: 'Poll results' }, follows: { id: 'notifications.filter.follows', defaultMessage: 'Follows' }, }); @@ -79,6 +80,13 @@ class FilterBar extends React.PureComponent { <i className='fa fa-fw fa-retweet' /> </button> <button + className={selectedFilter === 'poll' ? 'active' : ''} + onClick={this.onClick('poll')} + title={intl.formatMessage(tooltips.polls)} + > + <i className='fa fa-fw fa-tasks' /> + </button> + <button className={selectedFilter === 'follow' ? 'active' : ''} onClick={this.onClick('follow')} title={intl.formatMessage(tooltips.follows)} diff --git a/app/javascript/flavours/glitch/features/notifications/components/notification.js b/app/javascript/flavours/glitch/features/notifications/components/notification.js index daafe3507..5c5bbf604 100644 --- a/app/javascript/flavours/glitch/features/notifications/components/notification.js +++ b/app/javascript/flavours/glitch/features/notifications/components/notification.js @@ -108,6 +108,27 @@ export default class Notification extends ImmutablePureComponent { withDismiss /> ); + case 'poll': + return ( + <StatusContainer + containerId={notification.get('id')} + hidden={hidden} + id={notification.get('status')} + account={notification.get('account')} + prepend='poll' + muted + notification={notification} + onMoveDown={onMoveDown} + onMoveUp={onMoveUp} + onMention={onMention} + getScrollPosition={getScrollPosition} + updateScrollBottom={updateScrollBottom} + cachedMediaWidth={this.props.cachedMediaWidth} + cacheMediaWidth={this.props.cacheMediaWidth} + onUnmount={this.props.onUnmount} + withDismiss + /> + ); default: return null; } diff --git a/app/javascript/flavours/glitch/features/standalone/community_timeline/index.js b/app/javascript/flavours/glitch/features/standalone/community_timeline/index.js deleted file mode 100644 index 2b67e836a..000000000 --- a/app/javascript/flavours/glitch/features/standalone/community_timeline/index.js +++ /dev/null @@ -1,71 +0,0 @@ -import React from 'react'; -import { connect } from 'react-redux'; -import PropTypes from 'prop-types'; -import StatusListContainer from 'flavours/glitch/features/ui/containers/status_list_container'; -import { expandCommunityTimeline } from 'flavours/glitch/actions/timelines'; -import Column from 'flavours/glitch/components/column'; -import ColumnHeader from 'flavours/glitch/components/column_header'; -import { defineMessages, injectIntl } from 'react-intl'; -import { connectCommunityStream } from 'flavours/glitch/actions/streaming'; - -const messages = defineMessages({ - title: { id: 'standalone.public_title', defaultMessage: 'A look inside...' }, -}); - -@connect() -@injectIntl -export default class CommunityTimeline extends React.PureComponent { - - static propTypes = { - dispatch: PropTypes.func.isRequired, - intl: PropTypes.object.isRequired, - }; - - handleHeaderClick = () => { - this.column.scrollTop(); - } - - setRef = c => { - this.column = c; - } - - componentDidMount () { - const { dispatch } = this.props; - - dispatch(expandCommunityTimeline()); - this.disconnect = dispatch(connectCommunityStream()); - } - - componentWillUnmount () { - if (this.disconnect) { - this.disconnect(); - this.disconnect = null; - } - } - - handleLoadMore = maxId => { - this.props.dispatch(expandCommunityTimeline({ maxId })); - } - - render () { - const { intl } = this.props; - - return ( - <Column ref={this.setRef} label={intl.formatMessage(messages.title)}> - <ColumnHeader - icon='users' - title={intl.formatMessage(messages.title)} - onClick={this.handleHeaderClick} - /> - - <StatusListContainer - timelineId='community' - onLoadMore={this.handleLoadMore} - scrollKey='standalone_public_timeline' - trackScroll={false} - /> - </Column> - ); - } - -} diff --git a/app/javascript/flavours/glitch/features/standalone/public_timeline/index.js b/app/javascript/flavours/glitch/features/standalone/public_timeline/index.js index 907da3992..5e2b3fc6d 100644 --- a/app/javascript/flavours/glitch/features/standalone/public_timeline/index.js +++ b/app/javascript/flavours/glitch/features/standalone/public_timeline/index.js @@ -1,70 +1,112 @@ import React from 'react'; import { connect } from 'react-redux'; import PropTypes from 'prop-types'; -import StatusListContainer from 'flavours/glitch/features/ui/containers/status_list_container'; -import { expandPublicTimeline } from 'flavours/glitch/actions/timelines'; -import Column from 'flavours/glitch/components/column'; -import ColumnHeader from 'flavours/glitch/components/column_header'; -import { defineMessages, injectIntl } from 'react-intl'; -import { connectPublicStream } from 'flavours/glitch/actions/streaming'; +import ImmutablePropTypes from 'react-immutable-proptypes'; +import { expandPublicTimeline, expandCommunityTimeline } from 'flavours/glitch/actions/timelines'; +import { connectPublicStream, connectCommunityStream } from 'flavours/glitch/actions/streaming'; +import Masonry from 'react-masonry-infinite'; +import { List as ImmutableList, Map as ImmutableMap } from 'immutable'; +import DetailedStatusContainer from 'flavours/glitch/features/status/containers/detailed_status_container'; +import { debounce } from 'lodash'; +import LoadingIndicator from 'flavours/glitch/components/loading_indicator'; -const messages = defineMessages({ - title: { id: 'standalone.public_title', defaultMessage: 'A look inside...' }, -}); +const mapStateToProps = (state, { local }) => { + const timeline = state.getIn(['timelines', local ? 'community' : 'public'], ImmutableMap()); -@connect() -@injectIntl -export default class PublicTimeline extends React.PureComponent { + return { + statusIds: timeline.get('items', ImmutableList()), + isLoading: timeline.get('isLoading', false), + hasMore: timeline.get('hasMore', false), + }; +}; + +export default @connect(mapStateToProps) +class PublicTimeline extends React.PureComponent { static propTypes = { dispatch: PropTypes.func.isRequired, - intl: PropTypes.object.isRequired, + statusIds: ImmutablePropTypes.list.isRequired, + isLoading: PropTypes.bool.isRequired, + hasMore: PropTypes.bool.isRequired, + local: PropTypes.bool, }; - handleHeaderClick = () => { - this.column.scrollTop(); + componentDidMount () { + this._connect(); } - setRef = c => { - this.column = c; + componentDidUpdate (prevProps) { + if (prevProps.local !== this.props.local) { + this._disconnect(); + this._connect(); + } } - componentDidMount () { - const { dispatch } = this.props; - - dispatch(expandPublicTimeline()); - this.disconnect = dispatch(connectPublicStream()); + componentWillUnmount () { + this._disconnect(); } - componentWillUnmount () { + _connect () { + const { dispatch, local } = this.props; + + dispatch(local ? expandCommunityTimeline() : expandPublicTimeline()); + this.disconnect = dispatch(local ? connectCommunityStream() : connectPublicStream()); + } + + _disconnect () { if (this.disconnect) { this.disconnect(); this.disconnect = null; } } - handleLoadMore = maxId => { - this.props.dispatch(expandPublicTimeline({ maxId })); + handleLoadMore = () => { + const { dispatch, statusIds, local } = this.props; + const maxId = statusIds.last(); + + if (maxId) { + dispatch(local ? expandCommunityTimeline({ maxId }) : expandPublicTimeline({ maxId })); + } + } + + setRef = c => { + this.masonry = c; } + handleHeightChange = debounce(() => { + if (!this.masonry) { + return; + } + + this.masonry.forcePack(); + }, 50) + render () { - const { intl } = this.props; + const { statusIds, hasMore, isLoading } = this.props; + + const sizes = [ + { columns: 1, gutter: 0 }, + { mq: '415px', columns: 1, gutter: 10 }, + { mq: '640px', columns: 2, gutter: 10 }, + { mq: '960px', columns: 3, gutter: 10 }, + { mq: '1255px', columns: 3, gutter: 10 }, + ]; + + const loader = (isLoading && statusIds.isEmpty()) ? <LoadingIndicator key={0} /> : undefined; return ( - <Column ref={this.setRef} label={intl.formatMessage(messages.title)}> - <ColumnHeader - icon='globe' - title={intl.formatMessage(messages.title)} - onClick={this.handleHeaderClick} - /> - - <StatusListContainer - timelineId='public' - onLoadMore={this.handleLoadMore} - scrollKey='standalone_public_timeline' - trackScroll={false} - /> - </Column> + <Masonry ref={this.setRef} className='statuses-grid' hasMore={hasMore} loadMore={this.handleLoadMore} sizes={sizes} loader={loader}> + {statusIds.map(statusId => ( + <div className='statuses-grid__item' key={statusId}> + <DetailedStatusContainer + id={statusId} + compact + measureHeight + onHeightChange={this.handleHeightChange} + /> + </div> + )).toArray()} + </Masonry> ); } diff --git a/app/javascript/flavours/glitch/features/status/components/detailed_status.js b/app/javascript/flavours/glitch/features/status/components/detailed_status.js index ad60320ef..e78f16c54 100644 --- a/app/javascript/flavours/glitch/features/status/components/detailed_status.js +++ b/app/javascript/flavours/glitch/features/status/components/detailed_status.js @@ -23,7 +23,7 @@ export default class DetailedStatus extends ImmutablePureComponent { }; static propTypes = { - status: ImmutablePropTypes.map.isRequired, + status: ImmutablePropTypes.map, settings: ImmutablePropTypes.map.isRequired, onOpenMedia: PropTypes.func.isRequired, onOpenVideo: PropTypes.func.isRequired, @@ -138,6 +138,7 @@ export default class DetailedStatus extends ImmutablePureComponent { preventPlayback={!expanded} onOpenVideo={this.handleOpenVideo} autoplay + revealed={settings.getIn(['media', 'reveal_behind_cw']) && !!status.get('spoiler_text') ? true : undefined} /> ); mediaIcon = 'video-camera'; @@ -151,6 +152,7 @@ export default class DetailedStatus extends ImmutablePureComponent { fullwidth={settings.getIn(['media', 'fullwidth'])} hidden={!expanded} onOpenMedia={this.props.onOpenMedia} + revealed={settings.getIn(['media', 'reveal_behind_cw']) && !!status.get('spoiler_text') ? true : undefined} /> ); mediaIcon = 'picture-o'; diff --git a/app/javascript/flavours/glitch/features/status/index.js b/app/javascript/flavours/glitch/features/status/index.js index 880372de5..73d3c7e9e 100644 --- a/app/javascript/flavours/glitch/features/status/index.js +++ b/app/javascript/flavours/glitch/features/status/index.js @@ -369,6 +369,10 @@ export default class Status extends ImmutablePureComponent { } } + handleHeaderClick = () => { + this.column.scrollTop(); + } + renderChildren (list) { return list.map(id => ( <StatusContainer @@ -390,6 +394,10 @@ export default class Status extends ImmutablePureComponent { this.node = c; } + setColumnRef = c => { + this.column = c; + } + componentDidUpdate (prevProps) { if (this.props.params.statusId && (this.props.params.statusId !== prevProps.params.statusId || prevProps.ancestorsIds.size < this.props.ancestorsIds.size)) { const { status, ancestorsIds } = this.props; @@ -452,10 +460,11 @@ export default class Status extends ImmutablePureComponent { }; return ( - <Column label={intl.formatMessage(messages.detailedStatus)}> + <Column ref={this.setColumnRef} label={intl.formatMessage(messages.detailedStatus)}> <ColumnHeader icon='comment' title={intl.formatMessage(messages.tootHeading)} + onClick={this.handleHeaderClick} showBackButton extraButton={( <button className='column-header__button' title={intl.formatMessage(!isExpanded ? messages.revealAll : messages.hideAll)} aria-label={intl.formatMessage(!isExpanded ? messages.revealAll : messages.hideAll)} onClick={this.handleToggleAll} aria-pressed={!isExpanded ? 'false' : 'true'}><i className={`fa fa-${!isExpanded ? 'eye-slash' : 'eye'}`} /></button> diff --git a/app/javascript/flavours/glitch/features/video/index.js b/app/javascript/flavours/glitch/features/video/index.js index cf66536c4..e3ed799c7 100644 --- a/app/javascript/flavours/glitch/features/video/index.js +++ b/app/javascript/flavours/glitch/features/video/index.js @@ -119,6 +119,12 @@ export default class Video extends React.PureComponent { revealed: this.props.revealed === undefined ? (displayMedia !== 'hide_all' && !this.props.sensitive || displayMedia === 'show_all') : this.props.revealed, }; + componentWillReceiveProps (nextProps) { + if (nextProps.revealed === true) { + this.setState({ revealed: true }); + } + } + // hard coded in components.scss // any way to get ::before values programatically? volWidth = 50; |