diff options
Diffstat (limited to 'app/javascript/flavours/glitch/components')
5 files changed, 95 insertions, 56 deletions
diff --git a/app/javascript/flavours/glitch/components/hashtag.js b/app/javascript/flavours/glitch/components/hashtag.js index 769185a2b..5bbf32c87 100644 --- a/app/javascript/flavours/glitch/components/hashtag.js +++ b/app/javascript/flavours/glitch/components/hashtag.js @@ -1,7 +1,7 @@ // @ts-check import React from 'react'; import { Sparklines, SparklinesCurve } from 'react-sparklines'; -import { FormattedMessage } from 'react-intl'; +import { FormattedMessage, injectIntl, defineMessages } from 'react-intl'; import PropTypes from 'prop-types'; import ImmutablePropTypes from 'react-immutable-proptypes'; import Permalink from './permalink'; @@ -9,6 +9,10 @@ import ShortNumber from 'flavours/glitch/components/short_number'; import Skeleton from 'flavours/glitch/components/skeleton'; import classNames from 'classnames'; +const messages = defineMessages({ + totalVolume: { id: 'hashtag.total_volume', defaultMessage: 'Total volume in the last {days, plural, one {day} other {{days} days}}' }, +}); + class SilentErrorBoundary extends React.Component { static propTypes = { @@ -41,10 +45,11 @@ class SilentErrorBoundary extends React.Component { const accountsCountRenderer = (displayNumber, pluralReady) => ( <FormattedMessage id='trends.counter_by_accounts' - defaultMessage='{count, plural, one {{counter} person} other {{counter} people}} talking' + defaultMessage='{count, plural, one {{counter} person} other {{counter} people}} in the past {days, plural, one {day} other {{days} days}}' values={{ count: pluralReady, counter: <strong>{displayNumber}</strong>, + days: 2, }} /> ); @@ -64,7 +69,7 @@ ImmutableHashtag.propTypes = { hashtag: ImmutablePropTypes.map.isRequired, }; -const Hashtag = ({ name, href, to, people, uses, history, className }) => ( +const Hashtag = injectIntl(({ name, href, to, people, uses, history, className, intl }) => ( <div className={classNames('trends__item', className)}> <div className='trends__item__name'> <Permalink href={href} to={to}> @@ -74,9 +79,10 @@ const Hashtag = ({ name, href, to, people, uses, history, className }) => ( {typeof people !== 'undefined' ? <ShortNumber value={people} renderer={accountsCountRenderer} /> : <Skeleton width={100} />} </div> - <div className='trends__item__current'> + <abbr className='trends__item__current' title={intl.formatMessage(messages.totalVolume, { days: 2 })}> {typeof uses !== 'undefined' ? <ShortNumber value={uses} /> : <Skeleton width={42} height={36} />} - </div> + <span className='trends__item__current__asterisk'>*</span> + </abbr> <div className='trends__item__sparkline'> <SilentErrorBoundary> @@ -86,7 +92,7 @@ const Hashtag = ({ name, href, to, people, uses, history, className }) => ( </SilentErrorBoundary> </div> </div> -); +)); Hashtag.propTypes = { name: PropTypes.string, diff --git a/app/javascript/flavours/glitch/components/icon_button.js b/app/javascript/flavours/glitch/components/icon_button.js index 9a05badd0..be2468d68 100644 --- a/app/javascript/flavours/glitch/components/icon_button.js +++ b/app/javascript/flavours/glitch/components/icon_button.js @@ -140,8 +140,16 @@ export default class IconButton extends React.PureComponent { ); if (href) { - contents = ( - <a href={href} target='_blank' rel='noopener noreferrer'> + return ( + <a + href={href} + aria-label={title} + title={title} + target='_blank' + rel='noopener noreferrer' + className={classes} + style={style} + > {contents} </a> ); diff --git a/app/javascript/flavours/glitch/components/status.js b/app/javascript/flavours/glitch/components/status.js index 8a5fda676..11c81765b 100644 --- a/app/javascript/flavours/glitch/components/status.js +++ b/app/javascript/flavours/glitch/components/status.js @@ -81,8 +81,8 @@ class Status extends ImmutablePureComponent { onBlock: PropTypes.func, onEmbed: PropTypes.func, onHeightChange: PropTypes.func, + onToggleHidden: PropTypes.func, muted: PropTypes.bool, - collapse: PropTypes.bool, hidden: PropTypes.bool, unread: PropTypes.bool, prepend: PropTypes.string, @@ -121,7 +121,6 @@ class Status extends ImmutablePureComponent { 'settings', 'prepend', 'muted', - 'collapse', 'notification', 'hidden', 'expanded', @@ -149,14 +148,14 @@ class Status extends ImmutablePureComponent { let updated = false; // Make sure the state mirrors props we track… - if (nextProps.collapse !== prevState.collapseProp) { - update.collapseProp = nextProps.collapse; - updated = true; - } if (nextProps.expanded !== prevState.expandedProp) { update.expandedProp = nextProps.expanded; updated = true; } + if (nextProps.status?.get('hidden') !== prevState.statusPropHidden) { + update.statusPropHidden = nextProps.status?.get('hidden'); + updated = true; + } // Update state based on new props if (!nextProps.settings.getIn(['collapsed', 'enabled'])) { @@ -164,14 +163,19 @@ class Status extends ImmutablePureComponent { update.isCollapsed = false; updated = true; } - } else if ( - nextProps.collapse !== prevState.collapseProp && - nextProps.collapse !== undefined + } + + // Handle uncollapsing toots when the shared CW state is expanded + if (nextProps.settings.getIn(['content_warnings', 'shared_state']) && + nextProps.status?.get('spoiler_text')?.length && nextProps.status?.get('hidden') === false && + prevState.statusPropHidden !== false && prevState.isCollapsed ) { - update.isCollapsed = nextProps.collapse; - if (nextProps.collapse) update.isExpanded = false; + update.isCollapsed = false; updated = true; } + + // The “expanded” prop is used to one-off change the local state. + // It's used in the thread view when unfolding/re-folding all CWs at once. if (nextProps.expanded !== prevState.expandedProp && nextProps.expanded !== undefined ) { @@ -180,15 +184,9 @@ class Status extends ImmutablePureComponent { updated = true; } - if (nextProps.expanded === undefined && - prevState.isExpanded === undefined && - update.isExpanded === undefined - ) { - const isExpanded = autoUnfoldCW(nextProps.settings, nextProps.status); - if (isExpanded !== undefined) { - update.isExpanded = isExpanded; - updated = true; - } + if (prevState.isExpanded === undefined && update.isExpanded === undefined) { + update.isExpanded = autoUnfoldCW(nextProps.settings, nextProps.status); + updated = true; } if (nextProps.status && nextProps.status.get('id') !== prevState.statusId) { @@ -243,22 +241,18 @@ class Status extends ImmutablePureComponent { const autoCollapseSettings = settings.getIn(['collapsed', 'auto']); - if (function () { - switch (true) { - case !!collapse: - case !!autoCollapseSettings.get('all'): - case autoCollapseSettings.get('notifications') && !!muted: - case autoCollapseSettings.get('lengthy') && node.clientHeight > ( - status.get('media_attachments').size && !muted ? 650 : 400 - ): - case autoCollapseSettings.get('reblogs') && prepend === 'reblogged_by': - case autoCollapseSettings.get('replies') && status.get('in_reply_to_id', null) !== null: - case autoCollapseSettings.get('media') && !(status.get('spoiler_text').length) && !!status.get('media_attachments').size: - return true; - default: - return false; - } - }()) { + // Don't autocollapse if CW state is shared and status is explicitly revealed, + // as it could cause surprising changes when receiving notifications + if (settings.getIn(['content_warnings', 'shared_state']) && status.get('spoiler_text').length && !status.get('hidden')) return; + + if (collapse || + autoCollapseSettings.get('all') || + (autoCollapseSettings.get('notifications') && muted) || + (autoCollapseSettings.get('lengthy') && node.clientHeight > ((status.get('media_attachments').size && !muted) ? 650 : 400)) || + (autoCollapseSettings.get('reblogs') && prepend === 'reblogged_by') || + (autoCollapseSettings.get('replies') && status.get('in_reply_to_id', null) !== null) || + (autoCollapseSettings.get('media') && !(status.get('spoiler_text').length) && status.get('media_attachments').size > 0) + ) { this.setCollapsed(true); // Hack to fix timeline jumps on second rendering when auto-collapsing this.setState({ autoCollapsed: true }); @@ -309,16 +303,20 @@ class Status extends ImmutablePureComponent { // is enabled, so we don't have to. setCollapsed = (value) => { if (this.props.settings.getIn(['collapsed', 'enabled'])) { - this.setState({ isCollapsed: value }); if (value) { this.setExpansion(false); } + this.setState({ isCollapsed: value }); } else { this.setState({ isCollapsed: false }); } } setExpansion = (value) => { + if (this.props.settings.getIn(['content_warnings', 'shared_state']) && this.props.status.get('hidden') === value) { + this.props.onToggleHidden(this.props.status); + } + this.setState({ isExpanded: value }); if (value) { this.setCollapsed(false); @@ -365,7 +363,9 @@ class Status extends ImmutablePureComponent { } handleExpandedToggle = () => { - if (this.props.status.get('spoiler_text')) { + if (this.props.settings.getIn(['content_warnings', 'shared_state'])) { + this.props.onToggleHidden(this.props.status); + } else if (this.props.status.get('spoiler_text')) { this.setExpansion(!this.state.isExpanded); } }; @@ -505,16 +505,31 @@ class Status extends ImmutablePureComponent { usingPiP, ...other } = this.props; - const { isExpanded, isCollapsed, forceFilter } = this.state; + const { isCollapsed, forceFilter } = this.state; let background = null; let attachments = null; - let media = []; - let mediaIcons = []; + + // Depending on user settings, some media are considered as parts of the + // contents (affected by CW) while other will be displayed outside of the + // CW. + let contentMedia = []; + let contentMediaIcons = []; + let extraMedia = []; + let extraMediaIcons = []; + let media = contentMedia; + let mediaIcons = contentMediaIcons; + + if (settings.getIn(['content_warnings', 'media_outside'])) { + media = extraMedia; + mediaIcons = extraMediaIcons; + } if (status === null) { return null; } + const isExpanded = settings.getIn(['content_warnings', 'shared_state']) ? !status.get('hidden') : this.state.isExpanded; + const handlers = { reply: this.handleHotkeyReply, favourite: this.handleHotkeyFavourite, @@ -681,8 +696,8 @@ class Status extends ImmutablePureComponent { } if (status.get('poll')) { - media.push(<PollContainer pollId={status.get('poll')} />); - mediaIcons.push('tasks'); + contentMedia.push(<PollContainer pollId={status.get('poll')} />); + contentMediaIcons.push('tasks'); } // Here we prepare extra data-* attributes for CSS selectors. @@ -748,7 +763,7 @@ class Status extends ImmutablePureComponent { </span> <StatusIcons status={status} - mediaIcons={mediaIcons} + mediaIcons={contentMediaIcons.concat(extraMediaIcons)} collapsible={settings.getIn(['collapsed', 'enabled'])} collapsed={isCollapsed} setCollapsed={setCollapsed} @@ -757,8 +772,9 @@ class Status extends ImmutablePureComponent { </header> <StatusContent status={status} - media={media} - mediaIcons={mediaIcons} + media={contentMedia} + extraMedia={extraMedia} + mediaIcons={contentMediaIcons} expanded={isExpanded} onExpandedToggle={this.handleExpandedToggle} parseClick={parseClick} @@ -766,6 +782,7 @@ class Status extends ImmutablePureComponent { tagLinks={settings.get('tag_misleading_links')} rewriteMentions={settings.get('rewrite_mentions')} /> + {!isCollapsed || !(muted || !settings.getIn(['collapsed', 'show_action_bar'])) ? ( <StatusActionBar {...other} diff --git a/app/javascript/flavours/glitch/components/status_action_bar.js b/app/javascript/flavours/glitch/components/status_action_bar.js index 0a5c5b69d..667afac5a 100644 --- a/app/javascript/flavours/glitch/components/status_action_bar.js +++ b/app/javascript/flavours/glitch/components/status_action_bar.js @@ -5,10 +5,11 @@ import IconButton from './icon_button'; import DropdownMenuContainer from 'flavours/glitch/containers/dropdown_menu_container'; import { defineMessages, injectIntl } from 'react-intl'; import ImmutablePureComponent from 'react-immutable-pure-component'; -import { me, isStaff } from 'flavours/glitch/util/initial_state'; +import { me } from 'flavours/glitch/util/initial_state'; import RelativeTimestamp from './relative_timestamp'; import { accountAdminLink, statusAdminLink } from 'flavours/glitch/util/backend_links'; import classNames from 'classnames'; +import { PERMISSION_MANAGE_USERS } from 'flavours/glitch/permissions'; const messages = defineMessages({ delete: { id: 'status.delete', defaultMessage: 'Delete' }, @@ -47,6 +48,7 @@ class StatusActionBar extends ImmutablePureComponent { static contextTypes = { router: PropTypes.object, + identity: PropTypes.object, }; static propTypes = { @@ -240,7 +242,7 @@ class StatusActionBar extends ImmutablePureComponent { menu.push({ text: intl.formatMessage(messages.block, { name: status.getIn(['account', 'username']) }), action: this.handleBlockClick }); menu.push({ text: intl.formatMessage(messages.report, { name: status.getIn(['account', 'username']) }), action: this.handleReport }); - if (isStaff && (accountAdminLink || statusAdminLink)) { + if ((this.context.identity.permissions & PERMISSION_MANAGE_USERS) === PERMISSION_MANAGE_USERS && (accountAdminLink || statusAdminLink)) { menu.push(null); if (accountAdminLink !== undefined) { menu.push({ diff --git a/app/javascript/flavours/glitch/components/status_content.js b/app/javascript/flavours/glitch/components/status_content.js index 6a027f8d2..39891da4f 100644 --- a/app/javascript/flavours/glitch/components/status_content.js +++ b/app/javascript/flavours/glitch/components/status_content.js @@ -70,6 +70,7 @@ export default class StatusContent extends React.PureComponent { collapsed: PropTypes.bool, onExpandedToggle: PropTypes.func, media: PropTypes.node, + extraMedia: PropTypes.node, mediaIcons: PropTypes.arrayOf(PropTypes.string), parseClick: PropTypes.func, disabled: PropTypes.bool, @@ -256,6 +257,7 @@ export default class StatusContent extends React.PureComponent { const { status, media, + extraMedia, mediaIcons, parseClick, disabled, @@ -351,6 +353,8 @@ export default class StatusContent extends React.PureComponent { {media} </div> + {extraMedia} + </div> ); } else if (parseClick) { @@ -372,6 +376,7 @@ export default class StatusContent extends React.PureComponent { lang={lang} /> {media} + {extraMedia} </div> ); } else { @@ -391,6 +396,7 @@ export default class StatusContent extends React.PureComponent { lang={lang} /> {media} + {extraMedia} </div> ); } |