diff options
Diffstat (limited to 'app/javascript/flavours/glitch/features')
3 files changed, 40 insertions, 24 deletions
diff --git a/app/javascript/flavours/glitch/features/getting_started/components/announcements.js b/app/javascript/flavours/glitch/features/getting_started/components/announcements.js index 71b54b060..9a7d175c4 100644 --- a/app/javascript/flavours/glitch/features/getting_started/components/announcements.js +++ b/app/javascript/flavours/glitch/features/getting_started/components/announcements.js @@ -277,19 +277,13 @@ class Announcement extends ImmutablePureComponent { static propTypes = { announcement: ImmutablePropTypes.map.isRequired, emojiMap: ImmutablePropTypes.map.isRequired, - dismissAnnouncement: PropTypes.func.isRequired, addReaction: PropTypes.func.isRequired, removeReaction: PropTypes.func.isRequired, intl: PropTypes.object.isRequired, }; - handleDismissClick = () => { - const { dismissAnnouncement, announcement } = this.props; - dismissAnnouncement(announcement.get('id')); - } - render () { - const { announcement, intl } = this.props; + const { announcement } = this.props; const startsAt = announcement.get('starts_at') && new Date(announcement.get('starts_at')); const endsAt = announcement.get('ends_at') && new Date(announcement.get('ends_at')); const now = new Date(); @@ -314,8 +308,6 @@ class Announcement extends ImmutablePureComponent { removeReaction={this.props.removeReaction} emojiMap={this.props.emojiMap} /> - - <IconButton title={intl.formatMessage(messages.close)} icon='times' className='announcements__item__dismiss-icon' onClick={this.handleDismissClick} /> </div> ); } @@ -328,8 +320,6 @@ class Announcements extends ImmutablePureComponent { static propTypes = { announcements: ImmutablePropTypes.list, emojiMap: ImmutablePropTypes.map.isRequired, - fetchAnnouncements: PropTypes.func.isRequired, - dismissAnnouncement: PropTypes.func.isRequired, addReaction: PropTypes.func.isRequired, removeReaction: PropTypes.func.isRequired, intl: PropTypes.object.isRequired, @@ -339,11 +329,6 @@ class Announcements extends ImmutablePureComponent { index: 0, }; - componentDidMount () { - const { fetchAnnouncements } = this.props; - fetchAnnouncements(); - } - handleChangeIndex = index => { this.setState({ index: index % this.props.announcements.size }); } @@ -369,13 +354,12 @@ class Announcements extends ImmutablePureComponent { <img className='announcements__mastodon' alt='' draggable='false' src={mascot || elephantUIPlane} /> <div className='announcements__container'> - <ReactSwipeableViews index={index} onChangeIndex={this.handleChangeIndex}> + <ReactSwipeableViews animateHeight index={index} onChangeIndex={this.handleChangeIndex}> {announcements.map(announcement => ( <Announcement key={announcement.get('id')} announcement={announcement} emojiMap={this.props.emojiMap} - dismissAnnouncement={this.props.dismissAnnouncement} addReaction={this.props.addReaction} removeReaction={this.props.removeReaction} intl={intl} diff --git a/app/javascript/flavours/glitch/features/getting_started/containers/announcements_container.js b/app/javascript/flavours/glitch/features/getting_started/containers/announcements_container.js index b10d1d4ce..8fa695e34 100644 --- a/app/javascript/flavours/glitch/features/getting_started/containers/announcements_container.js +++ b/app/javascript/flavours/glitch/features/getting_started/containers/announcements_container.js @@ -1,5 +1,5 @@ import { connect } from 'react-redux'; -import { fetchAnnouncements, dismissAnnouncement, addReaction, removeReaction } from 'mastodon/actions/announcements'; +import { addReaction, removeReaction } from 'flavours/glitch/actions/announcements'; import Announcements from '../components/announcements'; import { createSelector } from 'reselect'; import { Map as ImmutableMap } from 'immutable'; @@ -12,8 +12,6 @@ const mapStateToProps = state => ({ }); const mapDispatchToProps = dispatch => ({ - fetchAnnouncements: () => dispatch(fetchAnnouncements()), - dismissAnnouncement: id => dispatch(dismissAnnouncement(id)), addReaction: (id, name) => dispatch(addReaction(id, name)), removeReaction: (id, name) => dispatch(removeReaction(id, name)), }); diff --git a/app/javascript/flavours/glitch/features/home_timeline/index.js b/app/javascript/flavours/glitch/features/home_timeline/index.js index 263371b06..457ac051c 100644 --- a/app/javascript/flavours/glitch/features/home_timeline/index.js +++ b/app/javascript/flavours/glitch/features/home_timeline/index.js @@ -9,15 +9,23 @@ import { addColumn, removeColumn, moveColumn } from 'flavours/glitch/actions/col import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; import ColumnSettingsContainer from './containers/column_settings_container'; import { Link } from 'react-router-dom'; +import { fetchAnnouncements, toggleShowAnnouncements } from 'flavours/glitch/actions/announcements'; import AnnouncementsContainer from 'flavours/glitch/features/getting_started/containers/announcements_container'; +import classNames from 'classnames'; +import IconWithBadge from 'flavours/glitch/components/icon_with_badge'; const messages = defineMessages({ title: { id: 'column.home', defaultMessage: 'Home' }, + show_announcements: { id: 'home.show_announcements', defaultMessage: 'Show announcements' }, + hide_announcements: { id: 'home.hide_announcements', defaultMessage: 'Hide announcements' }, }); const mapStateToProps = state => ({ hasUnread: state.getIn(['timelines', 'home', 'unread']) > 0, isPartial: state.getIn(['timelines', 'home', 'isPartial']), + hasAnnouncements: !state.getIn(['announcements', 'items']).isEmpty(), + unreadAnnouncements: state.getIn(['announcements', 'unread']).size, + showAnnouncements: state.getIn(['announcements', 'show']), }); export default @connect(mapStateToProps) @@ -31,6 +39,9 @@ class HomeTimeline extends React.PureComponent { isPartial: PropTypes.bool, columnId: PropTypes.string, multiColumn: PropTypes.bool, + hasAnnouncements: PropTypes.bool, + unreadAnnouncements: PropTypes.number, + showAnnouncements: PropTypes.bool, }; handlePin = () => { @@ -61,6 +72,7 @@ class HomeTimeline extends React.PureComponent { } componentDidMount () { + this.props.dispatch(fetchAnnouncements()); this._checkIfReloadNeeded(false, this.props.isPartial); } @@ -93,10 +105,31 @@ class HomeTimeline extends React.PureComponent { } } + handleToggleAnnouncementsClick = (e) => { + e.stopPropagation(); + this.props.dispatch(toggleShowAnnouncements()); + } + render () { - const { intl, hasUnread, columnId, multiColumn } = this.props; + const { intl, hasUnread, columnId, multiColumn, hasAnnouncements, unreadAnnouncements, showAnnouncements } = this.props; const pinned = !!columnId; + let announcementsButton = null; + + if (hasAnnouncements) { + announcementsButton = ( + <button + className={classNames('column-header__button', { 'active': showAnnouncements })} + title={intl.formatMessage(showAnnouncements ? messages.hide_announcements : messages.show_announcements)} + aria-label={intl.formatMessage(showAnnouncements ? messages.hide_announcements : messages.show_announcements)} + aria-pressed={showAnnouncements ? 'true' : 'false'} + onClick={this.handleToggleAnnouncementsClick} + > + <IconWithBadge id='bullhorn' count={unreadAnnouncements} /> + </button> + ); + } + return ( <Column bindToDocument={!multiColumn} ref={this.setRef} name='home' label={intl.formatMessage(messages.title)}> <ColumnHeader @@ -108,13 +141,14 @@ class HomeTimeline extends React.PureComponent { onClick={this.handleHeaderClick} pinned={pinned} multiColumn={multiColumn} + extraButton={announcementsButton} > <ColumnSettingsContainer /> </ColumnHeader> + {hasAnnouncements && showAnnouncements && <AnnouncementsContainer />} + <StatusListContainer - prepend={<AnnouncementsContainer />} - alwaysPrepend trackScroll={!pinned} scrollKey={`home_timeline-${columnId}`} onLoadMore={this.handleLoadMore} |