Add visibility icon to Detailed status

This commit is contained in:
Ondřej Hruška 2017-07-27 00:41:28 +02:00
parent e82021e0e6
commit cb69e35b3b
6 changed files with 63 additions and 25 deletions

View file

@ -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

View file

@ -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}

View file

@ -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;
}
}
}

View file

@ -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');

View file

@ -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>
);

View file

@ -836,10 +836,10 @@
position: relative;
float: right;
color: lighten($ui-base-color, 26%);
}
.status__visibility-icon {
.status__visibility-icon {
padding-left: 6px;
}
}
.status-check-box {