diff options
Diffstat (limited to 'app')
6 files changed, 63 insertions, 25 deletions
diff --git a/app/javascript/glitch/components/status/header.js b/app/javascript/glitch/components/status/header.js index 3187fa7fb..5ce59fba4 100644 --- a/app/javascript/glitch/components/status/header.js +++ b/app/javascript/glitch/components/status/header.js @@ -29,6 +29,7 @@ import Avatar from '../../../mastodon/components/avatar'; import AvatarOverlay from '../../../mastodon/components/avatar_overlay'; import DisplayName from '../../../mastodon/components/display_name'; import IconButton from '../../../mastodon/components/icon_button'; +import VisibilityIcon from './visibility_icon'; /* * * * */ @@ -94,7 +95,7 @@ icons) into a single `<header>` element. export default class StatusHeader extends React.PureComponent { static propTypes = { - account: ImmutablePropTypes.map.isRequired, + status: ImmutablePropTypes.map.isRequired, friend: ImmutablePropTypes.map, mediaIcon: PropTypes.string, collapsible: PropTypes.bool, @@ -102,7 +103,6 @@ export default class StatusHeader extends React.PureComponent { parseClick: PropTypes.func.isRequired, setExpansion: PropTypes.func.isRequired, intl: PropTypes.object.isRequired, - visibility: PropTypes.string, }; /* @@ -135,8 +135,8 @@ status. */ handleAccountClick = (e) => { - const { account, parseClick } = this.props; - parseClick(e, `/accounts/${+account.get('id')}`); + const { status, parseClick } = this.props; + parseClick(e, `/accounts/${+status.getIn(['account', 'id'])}`); } /* @@ -150,21 +150,15 @@ has a very straightforward rendering process. render () { const { - account, + status, friend, mediaIcon, collapsible, collapsed, intl, - visibility, } = this.props; - const visibilityClass = { - public: 'globe', - unlisted: 'unlock-alt', - private: 'lock', - direct: 'envelope', - }[visibility]; + const account = status.get('account'); return ( <header className='status__info'> @@ -186,11 +180,7 @@ it is rendered as a float. /> ) : null} {( - <i - className={`status__visibility-icon fa fa-fw fa-${visibilityClass}`} - title={intl.formatMessage(messages[visibility])} - aria-hidden='true' - /> + <VisibilityIcon visibility={status.get('visibility')} /> )} {collapsible ? ( <IconButton diff --git a/app/javascript/glitch/components/status/index.js b/app/javascript/glitch/components/status/index.js index b7ec8b4ca..5571b3c85 100644 --- a/app/javascript/glitch/components/status/index.js +++ b/app/javascript/glitch/components/status/index.js @@ -704,10 +704,9 @@ collapsed. /> ) : null} <StatusHeader - account={status.get('account')} + status={status} friend={account} mediaIcon={mediaIcon} - visibility={status.get('visibility')} collapsible={settings.getIn(['collapsed', 'enabled'])} collapsed={isExpanded === false} parseClick={parseClick} diff --git a/app/javascript/glitch/components/status/visibility_icon.js b/app/javascript/glitch/components/status/visibility_icon.js new file mode 100644 index 000000000..017b69cbb --- /dev/null +++ b/app/javascript/glitch/components/status/visibility_icon.js @@ -0,0 +1,48 @@ +// Package imports // +import React from 'react'; +import PropTypes from 'prop-types'; +import { defineMessages, injectIntl } from 'react-intl'; +import ImmutablePureComponent from 'react-immutable-pure-component'; + +const messages = defineMessages({ + public: { id: 'privacy.public.short', defaultMessage: 'Public' }, + unlisted: { id: 'privacy.unlisted.short', defaultMessage: 'Unlisted' }, + private: { id: 'privacy.private.short', defaultMessage: 'Followers-only' }, + direct: { id: 'privacy.direct.short', defaultMessage: 'Direct' }, +}); + +@injectIntl +export default class VisibilityIcon extends ImmutablePureComponent { + + static propTypes = { + visibility: PropTypes.string, + intl: PropTypes.object.isRequired, + withLabel: PropTypes.bool, + }; + + render() { + const { withLabel, visibility, intl } = this.props; + + const visibilityClass = { + public: 'globe', + unlisted: 'unlock-alt', + private: 'lock', + direct: 'envelope', + }[visibility]; + + const label = intl.formatMessage(messages[visibility]); + + const icon = (<i + className={`status__visibility-icon fa fa-fw fa-${visibilityClass}`} + title={label} + aria-hidden='true' + />); + + if (withLabel) { + return (<span style={{ whiteSpace: 'nowrap' }}>{icon} {label}</span>); + } else { + return icon; + } + } + +} diff --git a/app/javascript/mastodon/features/status/components/action_bar.js b/app/javascript/mastodon/features/status/components/action_bar.js index 5e150842e..1eff04e97 100644 --- a/app/javascript/mastodon/features/status/components/action_bar.js +++ b/app/javascript/mastodon/features/status/components/action_bar.js @@ -72,8 +72,8 @@ export default class ActionBar extends React.PureComponent { } let reblogIcon = 'retweet'; - if (status.get('visibility') === 'direct') reblogIcon = 'envelope'; - else if (status.get('visibility') === 'private') reblogIcon = 'lock'; + //if (status.get('visibility') === 'direct') reblogIcon = 'envelope'; + // else if (status.get('visibility') === 'private') reblogIcon = 'lock'; let reblog_disabled = (status.get('visibility') === 'direct' || status.get('visibility') === 'private'); diff --git a/app/javascript/mastodon/features/status/components/detailed_status.js b/app/javascript/mastodon/features/status/components/detailed_status.js index 67d1e822d..5d28d4390 100644 --- a/app/javascript/mastodon/features/status/components/detailed_status.js +++ b/app/javascript/mastodon/features/status/components/detailed_status.js @@ -11,6 +11,7 @@ import Link from 'react-router-dom/Link'; import { FormattedDate, FormattedNumber } from 'react-intl'; import CardContainer from '../containers/card_container'; import ImmutablePureComponent from 'react-immutable-pure-component'; +import VisibilityIcon from '../../../../glitch/components/status/visibility_icon'; export default class DetailedStatus extends ImmutablePureComponent { @@ -103,7 +104,7 @@ export default class DetailedStatus extends ImmutablePureComponent { <span className='detailed-status__favorites'> <FormattedNumber value={status.get('favourites_count')} /> </span> - </Link> + </Link> · <VisibilityIcon visibility={status.get('visibility')} /> </div> </div> ); diff --git a/app/javascript/styles/components.scss b/app/javascript/styles/components.scss index 9e5d34f53..fa44b825c 100644 --- a/app/javascript/styles/components.scss +++ b/app/javascript/styles/components.scss @@ -836,10 +836,10 @@ position: relative; float: right; color: lighten($ui-base-color, 26%); -} -.status__visibility-icon { - padding-left: 6px; + .status__visibility-icon { + padding-left: 6px; + } } .status-check-box { |