From e3c2183c12b5598ae891e148b5f32e066832e053 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ond=C5=99ej=20Hru=C5=A1ka?= Date: Sat, 8 Jul 2017 00:34:47 +0200 Subject: [PATCH] New design for visibility icons --- app/javascript/mastodon/components/status.js | 1 + .../mastodon/components/status_header.js | 20 +++++++++++++++++ app/javascript/styles/components.scss | 22 +++++-------------- 3 files changed, 26 insertions(+), 17 deletions(-) diff --git a/app/javascript/mastodon/components/status.js b/app/javascript/mastodon/components/status.js index 027aa8a8fa..816bc6533d 100644 --- a/app/javascript/mastodon/components/status.js +++ b/app/javascript/mastodon/components/status.js @@ -692,6 +692,7 @@ collapsed. account={status.get('account')} friend={account} mediaIcon={mediaIcon} + visibility={status.get('visibility')} collapsible={settings.getIn(['collapsed', 'enabled'])} collapsed={isExpanded === false} parseClick={parseClick} diff --git a/app/javascript/mastodon/components/status_header.js b/app/javascript/mastodon/components/status_header.js index e8216e3d0a..ce7f942b13 100644 --- a/app/javascript/mastodon/components/status_header.js +++ b/app/javascript/mastodon/components/status_header.js @@ -48,6 +48,10 @@ from inside props. In our case, these are the `collapse` and const messages = defineMessages({ collapse: { id: 'status.collapse', defaultMessage: 'Collapse' }, 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, setExpansion: PropTypes.func.isRequired, intl: PropTypes.object.isRequired, + visibility: PropTypes.string, }; /* @@ -153,8 +158,16 @@ has a very straightforward rendering process. collapsible, collapsed, intl, + visibility, } = this.props; + const visibilityClass = { + public: 'globe', + unlisted: 'unlock-alt', + private: 'lock', + direct: 'envelope', + }[visibility]; + return (
{ @@ -174,6 +187,13 @@ it is rendered as a float. aria-hidden='true' /> ) : null} + {( +