Add visibility icon to Detailed status

signup-info-prompt
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 AvatarOverlay from '../../../mastodon/components/avatar_overlay';
import DisplayName from '../../../mastodon/components/display_name'; import DisplayName from '../../../mastodon/components/display_name';
import IconButton from '../../../mastodon/components/icon_button'; 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 { export default class StatusHeader extends React.PureComponent {
static propTypes = { static propTypes = {
account: ImmutablePropTypes.map.isRequired, status: ImmutablePropTypes.map.isRequired,
friend: ImmutablePropTypes.map, friend: ImmutablePropTypes.map,
mediaIcon: PropTypes.string, mediaIcon: PropTypes.string,
collapsible: PropTypes.bool, collapsible: PropTypes.bool,
@ -102,7 +103,6 @@ export default class StatusHeader extends React.PureComponent {
parseClick: PropTypes.func.isRequired, parseClick: PropTypes.func.isRequired,
setExpansion: PropTypes.func.isRequired, setExpansion: PropTypes.func.isRequired,
intl: PropTypes.object.isRequired, intl: PropTypes.object.isRequired,
visibility: PropTypes.string,
}; };
/* /*
@ -135,8 +135,8 @@ status.
*/ */
handleAccountClick = (e) => { handleAccountClick = (e) => {
const { account, parseClick } = this.props; const { status, parseClick } = this.props;
parseClick(e, `/accounts/${+account.get('id')}`); parseClick(e, `/accounts/${+status.getIn(['account', 'id'])}`);
} }
/* /*
@ -150,21 +150,15 @@ has a very straightforward rendering process.
render () { render () {
const { const {
account, status,
friend, friend,
mediaIcon, mediaIcon,
collapsible, collapsible,
collapsed, collapsed,
intl, intl,
visibility,
} = this.props; } = this.props;
const visibilityClass = { const account = status.get('account');
public: 'globe',
unlisted: 'unlock-alt',
private: 'lock',
direct: 'envelope',
}[visibility];
return ( return (
<header className='status__info'> <header className='status__info'>
@ -186,11 +180,7 @@ it is rendered as a float.
/> />
) : null} ) : null}
{( {(
<i <VisibilityIcon visibility={status.get('visibility')} />
className={`status__visibility-icon fa fa-fw fa-${visibilityClass}`}
title={intl.formatMessage(messages[visibility])}
aria-hidden='true'
/>
)} )}
{collapsible ? ( {collapsible ? (
<IconButton <IconButton

View File

@ -704,10 +704,9 @@ collapsed.
/> />
) : null} ) : null}
<StatusHeader <StatusHeader
account={status.get('account')} status={status}
friend={account} friend={account}
mediaIcon={mediaIcon} mediaIcon={mediaIcon}
visibility={status.get('visibility')}
collapsible={settings.getIn(['collapsed', 'enabled'])} collapsible={settings.getIn(['collapsed', 'enabled'])}
collapsed={isExpanded === false} collapsed={isExpanded === false}
parseClick={parseClick} 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'; let reblogIcon = 'retweet';
if (status.get('visibility') === 'direct') reblogIcon = 'envelope'; //if (status.get('visibility') === 'direct') reblogIcon = 'envelope';
else if (status.get('visibility') === 'private') reblogIcon = 'lock'; // else if (status.get('visibility') === 'private') reblogIcon = 'lock';
let reblog_disabled = (status.get('visibility') === 'direct' || status.get('visibility') === 'private'); 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 { FormattedDate, FormattedNumber } from 'react-intl';
import CardContainer from '../containers/card_container'; import CardContainer from '../containers/card_container';
import ImmutablePureComponent from 'react-immutable-pure-component'; import ImmutablePureComponent from 'react-immutable-pure-component';
import VisibilityIcon from '../../../../glitch/components/status/visibility_icon';
export default class DetailedStatus extends ImmutablePureComponent { export default class DetailedStatus extends ImmutablePureComponent {
@ -103,7 +104,7 @@ export default class DetailedStatus extends ImmutablePureComponent {
<span className='detailed-status__favorites'> <span className='detailed-status__favorites'>
<FormattedNumber value={status.get('favourites_count')} /> <FormattedNumber value={status.get('favourites_count')} />
</span> </span>
</Link> </Link> · <VisibilityIcon visibility={status.get('visibility')} />
</div> </div>
</div> </div>
); );

View File

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