New design for visibility icons

master
Ondřej Hruška 7 years ago committed by beatrix
parent 86f8df7903
commit e3c2183c12
  1. 1
      app/javascript/mastodon/components/status.js
  2. 20
      app/javascript/mastodon/components/status_header.js
  3. 22
      app/javascript/styles/components.scss

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

@ -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 (
<header className='status__info'>
{
@ -174,6 +187,13 @@ it is rendered as a float.
aria-hidden='true'
/>
) : null}
{(
<i
className={`status__visibility-icon fa fa-fw fa-${visibilityClass}`}
title={intl.formatMessage(messages[visibility])}
aria-hidden='true'
/>
)}
{collapsible ? (
<IconButton
className='status__collapse-button'

@ -611,22 +611,6 @@
.notification__message {
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 {
@ -672,7 +656,11 @@
display: inline-block;
position: relative;
float: right;
color: $ui-primary-color;
color: lighten($ui-base-color, 26%);
}
.status__visibility-icon {
padding-left: 6px;
}
.status-check-box {

Loading…
Cancel
Save