compress boost/fave notifications more

This commit is contained in:
Ash Levy 2018-03-12 20:57:28 -04:00
parent a0724cd742
commit 9317f6853e
4 changed files with 122 additions and 79 deletions

View file

@ -3,6 +3,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import StatusPrepend from './status_prepend'; import StatusPrepend from './status_prepend';
import StatusHeader from './status_header'; import StatusHeader from './status_header';
import StatusIcons from './status_icons';
import StatusContent from './status_content'; import StatusContent from './status_content';
import StatusActionBar from './status_action_bar'; import StatusActionBar from './status_action_bar';
import ImmutablePureComponent from 'react-immutable-pure-component'; import ImmutablePureComponent from 'react-immutable-pure-component';
@ -392,23 +393,31 @@ export default class Status extends ImmutablePureComponent {
ref={handleRef} ref={handleRef}
tabIndex='0' tabIndex='0'
> >
{prepend && account ? ( <header className='status__info'>
<StatusPrepend {prepend && account ? (
type={prepend} <StatusPrepend
account={account} type={prepend}
parseClick={parseClick} account={account}
notificationId={this.props.notificationId} parseClick={parseClick}
notificationId={this.props.notificationId}
/>
) : null}
{!muted ? (
<StatusHeader
status={status}
friend={account}
collapsed={isExpanded === false}
parseClick={parseClick}
/>
) : null}
<StatusIcons
status={status}
mediaIcon={mediaIcon}
collapsible={settings.getIn(['collapsed', 'enabled'])}
collapsed={isExpanded === false}
setExpansion={setExpansion}
/> />
) : null} </header>
<StatusHeader
status={status}
friend={account}
mediaIcon={mediaIcon}
collapsible={settings.getIn(['collapsed', 'enabled'])}
collapsed={isExpanded === false}
parseClick={parseClick}
setExpansion={setExpansion}
/>
<StatusContent <StatusContent
status={status} status={status}
media={media} media={media}
@ -418,7 +427,7 @@ export default class Status extends ImmutablePureComponent {
parseClick={parseClick} parseClick={parseClick}
disabled={!router} disabled={!router}
/> />
{isExpanded !== false ? ( {isExpanded !== false && !muted ? (
<StatusActionBar <StatusActionBar
{...other} {...other}
status={status} status={status}

View file

@ -2,48 +2,20 @@
import React from 'react'; import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePropTypes from 'react-immutable-proptypes';
import { defineMessages, injectIntl } from 'react-intl';
// Mastodon imports. // Mastodon imports.
import Avatar from './avatar'; import Avatar from './avatar';
import AvatarOverlay from './avatar_overlay'; import AvatarOverlay from './avatar_overlay';
import DisplayName from './display_name'; import DisplayName from './display_name';
import IconButton from './icon_button';
import VisibilityIcon from './status_visibility_icon';
// Messages for use with internationalization stuff.
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' },
});
@injectIntl
export default class StatusHeader extends React.PureComponent { export default class StatusHeader extends React.PureComponent {
static propTypes = { static propTypes = {
status: ImmutablePropTypes.map.isRequired, status: ImmutablePropTypes.map.isRequired,
friend: ImmutablePropTypes.map, friend: ImmutablePropTypes.map,
mediaIcon: PropTypes.string,
collapsible: PropTypes.bool,
collapsed: PropTypes.bool,
parseClick: PropTypes.func.isRequired, parseClick: PropTypes.func.isRequired,
setExpansion: PropTypes.func.isRequired,
intl: PropTypes.object.isRequired,
}; };
// Handles clicks on collapsed button
handleCollapsedClick = (e) => {
const { collapsed, setExpansion } = this.props;
if (e.button === 0) {
setExpansion(collapsed ? null : false);
e.preventDefault();
}
}
// Handles clicks on account name/image // Handles clicks on account name/image
handleAccountClick = (e) => { handleAccountClick = (e) => {
const { status, parseClick } = this.props; const { status, parseClick } = this.props;
@ -55,16 +27,12 @@ export default class StatusHeader extends React.PureComponent {
const { const {
status, status,
friend, friend,
mediaIcon,
collapsible,
collapsed,
intl,
} = this.props; } = this.props;
const account = status.get('account'); const account = status.get('account');
return ( return (
<header className='status__info'> <div className='status__info__account' >
<a <a
href={account.get('url')} href={account.get('url')}
target='_blank' target='_blank'
@ -87,33 +55,7 @@ export default class StatusHeader extends React.PureComponent {
> >
<DisplayName account={account} /> <DisplayName account={account} />
</a> </a>
<div className='status__info__icons'> </div>
{mediaIcon ? (
<i
className={`fa fa-fw fa-${mediaIcon}`}
aria-hidden='true'
/>
) : null}
{(
<VisibilityIcon visibility={status.get('visibility')} />
)}
{collapsible ? (
<IconButton
className='status__collapse-button'
animate flip
active={collapsed}
title={
collapsed ?
intl.formatMessage(messages.uncollapse) :
intl.formatMessage(messages.collapse)
}
icon='angle-double-up'
onClick={this.handleCollapsedClick}
/>
) : null}
</div>
</header>
); );
} }

View file

@ -0,0 +1,81 @@
// Package imports.
import React from 'react';
import PropTypes from 'prop-types';
import ImmutablePropTypes from 'react-immutable-proptypes';
import { defineMessages, injectIntl } from 'react-intl';
// Mastodon imports.
import IconButton from './icon_button';
import VisibilityIcon from './status_visibility_icon';
// Messages for use with internationalization stuff.
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' },
});
@injectIntl
export default class StatusIcons extends React.PureComponent {
static propTypes = {
status: ImmutablePropTypes.map.isRequired,
mediaIcon: PropTypes.string,
collapsible: PropTypes.bool,
collapsed: PropTypes.bool,
setExpansion: PropTypes.func.isRequired,
intl: PropTypes.object.isRequired,
};
// Handles clicks on collapsed button
handleCollapsedClick = (e) => {
const { collapsed, setExpansion } = this.props;
if (e.button === 0) {
setExpansion(collapsed ? null : false);
e.preventDefault();
}
}
// Rendering.
render () {
const {
status,
mediaIcon,
collapsible,
collapsed,
intl,
} = this.props;
return (
<div className='status__info__icons'>
{mediaIcon ? (
<i
className={`fa fa-fw fa-${mediaIcon}`}
aria-hidden='true'
/>
) : null}
{(
<VisibilityIcon visibility={status.get('visibility')} />
)}
{collapsible ? (
<IconButton
className='status__collapse-button'
animate flip
active={collapsed}
title={
collapsed ?
intl.formatMessage(messages.uncollapse) :
intl.formatMessage(messages.collapse)
}
icon='angle-double-up'
onClick={this.handleCollapsedClick}
/>
) : null}
</div>
);
}
}

View file

@ -254,7 +254,7 @@
} }
.notification__message { .notification__message {
margin: -10px 0px 10px 32px; margin: -10px 0px 10px 0;
} }
} }
@ -287,7 +287,7 @@
overflow: hidden; overflow: hidden;
} }
.status__info .status__display-name { .status__info__account .status__display-name {
display: block; display: block;
max-width: 100%; max-width: 100%;
padding-right: 25px; padding-right: 25px;
@ -304,12 +304,17 @@
flex: none; flex: none;
position: relative; position: relative;
color: lighten($ui-base-color, 26%); color: lighten($ui-base-color, 26%);
margin-left: auto;
.status__visibility-icon { .status__visibility-icon {
padding-left: 6px; padding-left: 6px;
} }
} }
.status__info__account {
display: flex;
}
.status-check-box { .status-check-box {
border-bottom: 1px solid $ui-secondary-color; border-bottom: 1px solid $ui-secondary-color;
display: flex; display: flex;
@ -527,6 +532,12 @@
text-decoration: none; text-decoration: none;
} }
} }
.status__content {
margin-top: -15px;
margin-bottom: 0;
padding-top: 0;
}
} }
.status__relative-time, .status__relative-time,