compress boost/fave notifications more

2018-03-12 20:57:28 -04:00 · 2018-03-12 20:57:28 -04:00 · 9317f6853e
parent a0724cd742
commit 9317f6853e
4 changed files with 122 additions and 79 deletions
--- a/app/javascript/flavours/glitch/components/status.js
+++ b/app/javascript/flavours/glitch/components/status.js
@ -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}
--- a/app/javascript/flavours/glitch/components/status_header.js
+++ b/app/javascript/flavours/glitch/components/status_header.js
@ -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>
    );
  }

--- a/app/javascript/flavours/glitch/components/status_icons.js
+++ b/app/javascript/flavours/glitch/components/status_icons.js
@ -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>
+    );
+  }
+
+}
--- a/app/javascript/flavours/glitch/styles/components/status.scss
+++ b/app/javascript/flavours/glitch/styles/components/status.scss
@ -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,