From f3c3df62ab0f460ec9eea558a09aefc161a9d8d5 Mon Sep 17 00:00:00 2001 From: kibigo! Date: Mon, 27 Nov 2017 13:17:12 -0800 Subject: [PATCH 1/2] Implement status hotkeys + spoiler expanding --- .../themes/glitch/components/status.js | 39 +++--- .../glitch/containers/status_container.js | 1 + .../notifications/components/follow.js | 5 +- .../notifications/components/notification.js | 117 +++++++++--------- .../containers/notification_container.js | 1 - .../themes/glitch/features/ui/index.js | 1 + 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 327c7f5c1b..9288bcafa4 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 (
{prepend && account ? ( { } 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 8a0f01736d..96cfe83e66 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 { />
- +
diff --git a/app/javascript/themes/glitch/features/notifications/components/notification.js b/app/javascript/themes/glitch/features/notifications/components/notification.js index a309d3a42a..47f5770bf0 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 ( - - ); - } - - renderMention () { - const { notification } = this.props; - return ( - - ); - } - - renderFavourite () { - const { notification } = this.props; - return ( - - ); - } - - renderReblog () { - const { notification } = this.props; - return ( - - ); - } - render () { - const { notification } = this.props; + const { + hidden, + notification, + onMoveDown, + onMoveUp, + onMention, + } = this.props; + switch(notification.get('type')) { case 'follow': - return this.renderFollow(); + return ( +