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 (
+
+ );
case 'mention':
- return this.renderMention();
+ return (
+
+ );
case 'favourite':
- return this.renderFavourite();
+ return (
+
+ );
case 'reblog':
- return this.renderReblog();
+ return (
+
+ );
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 b61aaa21cd..033c61e3d8 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/status/components/detailed_status.js b/app/javascript/themes/glitch/features/status/components/detailed_status.js
index 7606bfbf37..df78ce4b6d 100644
--- a/app/javascript/themes/glitch/features/status/components/detailed_status.js
+++ b/app/javascript/themes/glitch/features/status/components/detailed_status.js
@@ -41,7 +41,7 @@ export default class DetailedStatus extends ImmutablePureComponent {
render () {
const status = this.props.status.get('reblog') ? this.props.status.get('reblog') : this.props.status;
- const { settings } = this.props;
+ const { expanded, setExpansion, settings } = this.props;
let media = '';
let mediaIcon = null;
@@ -109,6 +109,8 @@ export default class DetailedStatus extends ImmutablePureComponent {
status={status}
media={media}
mediaIcon={mediaIcon}
+ expanded={expanded}
+ setExpansion={setExpansion}
/>
diff --git a/app/javascript/themes/glitch/features/status/index.js b/app/javascript/themes/glitch/features/status/index.js
index 57af94a9ad..8561bd4de7 100644
--- a/app/javascript/themes/glitch/features/status/index.js
+++ b/app/javascript/themes/glitch/features/status/index.js
@@ -71,6 +71,7 @@ export default class Status extends ImmutablePureComponent {
state = {
fullscreen: false,
+ isExpanded: null,
};
componentWillMount () {
@@ -88,6 +89,12 @@ export default class Status extends ImmutablePureComponent {
}
}
+ handleExpandedToggle = () => {
+ if (this.props.status.get('spoiler_text')) {
+ this.setExpansion(this.state.isExpanded ? null : true);
+ }
+ };
+
handleFavouriteClick = (status) => {
if (status.get('favourited')) {
this.props.dispatch(unfavourite(status));
@@ -241,6 +248,10 @@ export default class Status extends ImmutablePureComponent {
));
}
+ setExpansion = value => {
+ this.setState({ isExpanded: value ? true : null });
+ }
+
setRef = c => {
this.node = c;
}
@@ -272,8 +283,9 @@ export default class Status extends ImmutablePureComponent {
render () {
let ancestors, descendants;
+ const { setExpansion } = this;
const { status, settings, ancestorsIds, descendantsIds } = this.props;
- const { fullscreen } = this.state;
+ const { fullscreen, isExpanded } = this.state;
if (status === null) {
return (
@@ -300,6 +312,7 @@ export default class Status extends ImmutablePureComponent {
boost: this.handleHotkeyBoost,
mention: this.handleHotkeyMention,
openProfile: this.handleHotkeyOpenProfile,
+ toggleSpoiler: this.handleExpandedToggle,
};
return (
@@ -317,6 +330,8 @@ export default class Status extends ImmutablePureComponent {
settings={settings}
onOpenVideo={this.handleOpenVideo}
onOpenMedia={this.handleOpenMedia}
+ expanded={isExpanded}
+ setExpansion={setExpansion}
/>