diff options
Diffstat (limited to 'app/javascript')
6 files changed, 84 insertions, 80 deletions
diff --git a/app/javascript/themes/glitch/components/status.js b/app/javascript/themes/glitch/components/status.js index 327c7f5c1..9288bcafa 100644 --- a/app/javascript/themes/glitch/components/status.js +++ b/app/javascript/themes/glitch/components/status.js @@ -9,6 +9,7 @@ import ImmutablePureComponent from 'react-immutable-pure-component'; import { MediaGallery, Video } from 'themes/glitch/util/async-components'; import { HotKeys } from 'react-hotkeys'; import NotificationOverlayContainer from 'themes/glitch/features/notifications/containers/overlay_container'; +import classNames from 'classnames'; // We use the component (and not the container) since we do not want // to use the progress bar to show download progress @@ -21,6 +22,7 @@ export default class Status extends ImmutablePureComponent { }; static propTypes = { + containerId: PropTypes.string, id: PropTypes.string, status: ImmutablePropTypes.map, account: ImmutablePropTypes.map, @@ -188,7 +190,9 @@ export default class Status extends ImmutablePureComponent { } handleExpandedToggle = () => { - this.setExpansion(this.state.isExpanded || !this.props.status.get('spoiler') ? null : true); + if (this.props.status.get('spoiler_text')) { + this.setExpansion(this.state.isExpanded ? null : true); + } }; handleOpenVideo = startTime => { @@ -222,11 +226,11 @@ export default class Status extends ImmutablePureComponent { } handleHotkeyMoveUp = () => { - this.props.onMoveUp(this.props.status.get('id')); + this.props.onMoveUp(this.props.containerId || this.props.id); } handleHotkeyMoveDown = () => { - this.props.onMoveDown(this.props.status.get('id')); + this.props.onMoveDown(this.props.containerId || this.props.id); } handleRef = c => { @@ -371,31 +375,24 @@ export default class Status extends ImmutablePureComponent { openProfile: this.handleHotkeyOpenProfile, moveUp: this.handleHotkeyMoveUp, moveDown: this.handleHotkeyMoveDown, + toggleSpoiler: this.handleExpandedToggle, }; + const computedClass = classNames('status', `status-${status.get('visibility')}`, { + collapsed: isExpanded === false, + 'has-background': isExpanded === false && background, + 'marked-for-delete': this.state.markedForDelete, + muted, + }, 'focusable'); + return ( <HotKeys handlers={handlers}> <div - className={ - `status${ - muted ? ' muted' : '' - } status-${status.get('visibility')}${ - isExpanded === false ? ' collapsed' : '' - }${ - isExpanded === false && background ? ' has-background' : '' - }${ - this.state.markedForDelete ? ' marked-for-delete' : '' - }` - } - style={{ - backgroundImage: ( - isExpanded === false && background ? - `url(${background})` : - 'none' - ), - }} + className={computedClass} + style={isExpanded === false && background ? { backgroundImage: `url(${background})` } : null} {...selectorAttribs} ref={handleRef} + tabIndex='0' > {prepend && account ? ( <StatusPrepend diff --git a/app/javascript/themes/glitch/containers/status_container.js b/app/javascript/themes/glitch/containers/status_container.js index 14906723a..0cee73b9a 100644 --- a/app/javascript/themes/glitch/containers/status_container.js +++ b/app/javascript/themes/glitch/containers/status_container.js @@ -45,6 +45,7 @@ const makeMapStateToProps = () => { } return { + containerId : props.containerId || props.id, // Should match reblogStatus's id for reblogs status : status, account : account || props.account, settings : state.get('local_settings'), diff --git a/app/javascript/themes/glitch/features/notifications/components/follow.js b/app/javascript/themes/glitch/features/notifications/components/follow.js index 8a0f01736..96cfe83e6 100644 --- a/app/javascript/themes/glitch/features/notifications/components/follow.js +++ b/app/javascript/themes/glitch/features/notifications/components/follow.js @@ -14,6 +14,7 @@ import NotificationOverlayContainer from '../containers/overlay_container'; export default class NotificationFollow extends ImmutablePureComponent { static propTypes = { + hidden: PropTypes.bool, id: PropTypes.string.isRequired, account: ImmutablePropTypes.map.isRequired, notification: ImmutablePropTypes.map.isRequired, @@ -57,7 +58,7 @@ export default class NotificationFollow extends ImmutablePureComponent { } render () { - const { account, notification } = this.props; + const { account, notification, hidden } = this.props; // Links to the display name. const displayName = account.get('display_name_html') || account.get('username'); @@ -87,7 +88,7 @@ export default class NotificationFollow extends ImmutablePureComponent { /> </div> - <AccountContainer id={account.get('id')} withNote={false} /> + <AccountContainer hidden={hidden} id={account.get('id')} withNote={false} /> <NotificationOverlayContainer notification={notification} /> </div> </HotKeys> diff --git a/app/javascript/themes/glitch/features/notifications/components/notification.js b/app/javascript/themes/glitch/features/notifications/components/notification.js index a309d3a42..47f5770bf 100644 --- a/app/javascript/themes/glitch/features/notifications/components/notification.js +++ b/app/javascript/themes/glitch/features/notifications/components/notification.js @@ -16,70 +16,75 @@ export default class Notification extends ImmutablePureComponent { onMoveUp: PropTypes.func.isRequired, onMoveDown: PropTypes.func.isRequired, onMention: PropTypes.func.isRequired, - settings: ImmutablePropTypes.map.isRequired, }; - renderFollow () { - const { notification } = this.props; - return ( - <NotificationFollow - id={notification.get('id')} - account={notification.get('account')} - notification={notification} - /> - ); - } - - renderMention () { - const { notification } = this.props; - return ( - <StatusContainer - id={notification.get('status')} - notification={notification} - withDismiss - /> - ); - } - - renderFavourite () { - const { notification } = this.props; - return ( - <StatusContainer - id={notification.get('status')} - account={notification.get('account')} - prepend='favourite' - muted - notification={notification} - withDismiss - /> - ); - } - - renderReblog () { - const { notification } = this.props; - return ( - <StatusContainer - id={notification.get('status')} - account={notification.get('account')} - prepend='reblog' - muted - notification={notification} - withDismiss - /> - ); - } - render () { - const { notification } = this.props; + const { + hidden, + notification, + onMoveDown, + onMoveUp, + onMention, + } = this.props; + switch(notification.get('type')) { case 'follow': - return this.renderFollow(); + return ( + <NotificationFollow + hidden={hidden} + id={notification.get('id')} + account={notification.get('account')} + notification={notification} + onMoveDown={onMoveDown} + onMoveUp={onMoveUp} + onMention={onMention} + /> + ); case 'mention': - return this.renderMention(); + return ( + <StatusContainer + containerId={notification.get('id')} + hidden={hidden} + id={notification.get('status')} + notification={notification} + onMoveDown={onMoveDown} + onMoveUp={onMoveUp} + onMention={onMention} + withDismiss + /> + ); case 'favourite': - return this.renderFavourite(); + return ( + <StatusContainer + containerId={notification.get('id')} + hidden={hidden} + id={notification.get('status')} + account={notification.get('account')} + prepend='favourite' + muted + notification={notification} + onMoveDown={onMoveDown} + onMoveUp={onMoveUp} + onMention={onMention} + withDismiss + /> + ); case 'reblog': - return this.renderReblog(); + return ( + <StatusContainer + containerId={notification.get('id')} + hidden={hidden} + id={notification.get('status')} + account={notification.get('account')} + prepend='reblog' + muted + notification={notification} + onMoveDown={onMoveDown} + onMoveUp={onMoveUp} + onMention={onMention} + withDismiss + /> + ); default: return null; } diff --git a/app/javascript/themes/glitch/features/notifications/containers/notification_container.js b/app/javascript/themes/glitch/features/notifications/containers/notification_container.js index b61aaa21c..033c61e3d 100644 --- a/app/javascript/themes/glitch/features/notifications/containers/notification_container.js +++ b/app/javascript/themes/glitch/features/notifications/containers/notification_container.js @@ -11,7 +11,6 @@ const makeMapStateToProps = () => { const mapStateToProps = (state, props) => ({ notification: getNotification(state, props.notification, props.accountId), - settings: state.get('local_settings'), notifCleaning: state.getIn(['notifications', 'cleaningMode']), }); diff --git a/app/javascript/themes/glitch/features/ui/index.js b/app/javascript/themes/glitch/features/ui/index.js index b59a2e637..3eea63189 100644 --- a/app/javascript/themes/glitch/features/ui/index.js +++ b/app/javascript/themes/glitch/features/ui/index.js @@ -84,6 +84,7 @@ const keyMap = { goToProfile: 'g u', goToBlocked: 'g b', goToMuted: 'g m', + toggleSpoiler: 'x', }; @connect(mapStateToProps) |