New design for visibility icons

This commit is contained in:
Ondřej Hruška 2017-07-08 00:34:47 +02:00 committed by beatrix
parent eb5ac56c31
commit 49bae78c88
3 changed files with 26 additions and 17 deletions

View file

@ -692,6 +692,7 @@ collapsed.
account={status.get('account')} account={status.get('account')}
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

@ -48,6 +48,10 @@ from inside props. In our case, these are the `collapse` and
const messages = defineMessages({ const messages = defineMessages({
collapse: { id: 'status.collapse', defaultMessage: 'Collapse' }, collapse: { id: 'status.collapse', defaultMessage: 'Collapse' },
uncollapse: { id: 'status.uncollapse', defaultMessage: 'Uncollapse' }, uncollapse: { id: 'status.uncollapse', defaultMessage: 'Uncollapse' },
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' },
}); });
/* * * * */ /* * * * */
@ -100,6 +104,7 @@ 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,
}; };
/* /*
@ -153,8 +158,16 @@ has a very straightforward rendering process.
collapsible, collapsible,
collapsed, collapsed,
intl, intl,
visibility,
} = this.props; } = this.props;
const visibilityClass = {
public: 'globe',
unlisted: 'unlock-alt',
private: 'lock',
direct: 'envelope',
}[visibility];
return ( return (
<header className='status__info'> <header className='status__info'>
{ {
@ -174,6 +187,13 @@ it is rendered as a float.
aria-hidden='true' aria-hidden='true'
/> />
) : null} ) : null}
{(
<i
className={`status__visibility-icon fa fa-fw fa-${visibilityClass}`}
title={intl.formatMessage(messages[visibility])}
aria-hidden='true'
/>
)}
{collapsible ? ( {collapsible ? (
<IconButton <IconButton
className='status__collapse-button' className='status__collapse-button'

View file

@ -611,22 +611,6 @@
.notification__message { .notification__message {
margin: -10px 0 10px; margin: -10px 0 10px;
} }
// Visibility icons
&::before {
float: right;
padding-top: 5px;
margin-left: 8px;
font-family: "FontAwesome";
color: lighten($ui-base-color, 26%);
text-align: center;
width: 16px;
}
&.status-public::before { content: "\F0AC" }
&.status-unlisted::before { content: "\F13E" }
&.status-private::before { content: "\F023" }
&.status-direct::before { content: "\F0E0" }
} }
.notification-favourite { .notification-favourite {
@ -672,7 +656,11 @@
display: inline-block; display: inline-block;
position: relative; position: relative;
float: right; float: right;
color: $ui-primary-color; color: lighten($ui-base-color, 26%);
}
.status__visibility-icon {
padding-left: 6px;
} }
.status-check-box { .status-check-box {