compress boost/fave notifications more
This commit is contained in:
Ash Levy
parent
828d10c327
commit
1d27649098
4 changed files with 122 additions and 79 deletions
|
|
@ -3,6 +3,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
|
|||
import PropTypes from 'prop-types';
|
||||
import StatusPrepend from './status_prepend';
|
||||
import StatusHeader from './status_header';
|
||||
import StatusIcons from './status_icons';
|
||||
import StatusContent from './status_content';
|
||||
import StatusActionBar from './status_action_bar';
|
||||
import ImmutablePureComponent from 'react-immutable-pure-component';
|
||||
|
|
@ -392,23 +393,31 @@ export default class Status extends ImmutablePureComponent {
|
|||
ref={handleRef}
|
||||
tabIndex='0'
|
||||
>
|
||||
{prepend && account ? (
|
||||
<StatusPrepend
|
||||
type={prepend}
|
||||
account={account}
|
||||
parseClick={parseClick}
|
||||
notificationId={this.props.notificationId}
|
||||
<header className='status__info'>
|
||||
{prepend && account ? (
|
||||
<StatusPrepend
|
||||
type={prepend}
|
||||
account={account}
|
||||
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}
|
||||
<StatusHeader
|
||||
status={status}
|
||||
friend={account}
|
||||
mediaIcon={mediaIcon}
|
||||
collapsible={settings.getIn(['collapsed', 'enabled'])}
|
||||
collapsed={isExpanded === false}
|
||||
parseClick={parseClick}
|
||||
setExpansion={setExpansion}
|
||||
/>
|
||||
</header>
|
||||
<StatusContent
|
||||
status={status}
|
||||
media={media}
|
||||
|
|
@ -418,7 +427,7 @@ export default class Status extends ImmutablePureComponent {
|
|||
parseClick={parseClick}
|
||||
disabled={!router}
|
||||
/>
|
||||
{isExpanded !== false ? (
|
||||
{isExpanded !== false && !muted ? (
|
||||
<StatusActionBar
|
||||
{...other}
|
||||
status={status}
|
||||
|
|
|
|||
|
|
@ -2,48 +2,20 @@
|
|||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||
import { defineMessages, injectIntl } from 'react-intl';
|
||||
|
||||
// Mastodon imports.
|
||||
import Avatar from './avatar';
|
||||
import AvatarOverlay from './avatar_overlay';
|
||||
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 {
|
||||
|
||||
static propTypes = {
|
||||
status: ImmutablePropTypes.map.isRequired,
|
||||
friend: ImmutablePropTypes.map,
|
||||
mediaIcon: PropTypes.string,
|
||||
collapsible: PropTypes.bool,
|
||||
collapsed: PropTypes.bool,
|
||||
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
|
||||
handleAccountClick = (e) => {
|
||||
const { status, parseClick } = this.props;
|
||||
|
|
@ -55,16 +27,12 @@ export default class StatusHeader extends React.PureComponent {
|
|||
const {
|
||||
status,
|
||||
friend,
|
||||
mediaIcon,
|
||||
collapsible,
|
||||
collapsed,
|
||||
intl,
|
||||
} = this.props;
|
||||
|
||||
const account = status.get('account');
|
||||
|
||||
return (
|
||||
<header className='status__info'>
|
||||
<div className='status__info__account' >
|
||||
<a
|
||||
href={account.get('url')}
|
||||
target='_blank'
|
||||
|
|
@ -87,33 +55,7 @@ export default class StatusHeader extends React.PureComponent {
|
|||
>
|
||||
<DisplayName account={account} />
|
||||
</a>
|
||||
<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>
|
||||
|
||||
</header>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
81
app/javascript/flavours/glitch/components/status_icons.js
Normal file
81
app/javascript/flavours/glitch/components/status_icons.js
Normal 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>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -254,7 +254,7 @@
|
|||
}
|
||||
|
||||
.notification__message {
|
||||
margin: -10px 0px 10px 32px;
|
||||
margin: -10px 0px 10px 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -287,7 +287,7 @@
|
|||
overflow: hidden;
|
||||
}
|
||||
|
||||
.status__info .status__display-name {
|
||||
.status__info__account .status__display-name {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
padding-right: 25px;
|
||||
|
|
@ -304,12 +304,17 @@
|
|||
flex: none;
|
||||
position: relative;
|
||||
color: lighten($ui-base-color, 26%);
|
||||
margin-left: auto;
|
||||
|
||||
.status__visibility-icon {
|
||||
padding-left: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.status__info__account {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.status-check-box {
|
||||
border-bottom: 1px solid $ui-secondary-color;
|
||||
display: flex;
|
||||
|
|
@ -527,6 +532,12 @@
|
|||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
.status__content {
|
||||
margin-top: -15px;
|
||||
margin-bottom: 0;
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.status__relative-time,
|
||||
|
|
|
|||
Loading…
Reference in a new issue