me
/
glitchier-soc
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #386 from ashkitten/compressed-notifs

Browse Source 
compress boost/fave notifications more
th-downstream
David Yip 7 years ago committed by GitHub
parent dd0dafed03 1d27649098
commit 3c05ed5ce6
4 changed files with 122 additions and 79 deletions
Show Stats Download Patch File Download Diff File

43
app/javascript/flavours/glitch/components/status.js
Unescape View File

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

62
app/javascript/flavours/glitch/components/status_header.js
Unescape View File

@ -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
Unescape 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>
);
}
}

15
app/javascript/flavours/glitch/styles/components/status.scss
Unescape View File

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

Write Preview
Loading…
Cancel
Save