Merge pull request #386 from ashkitten/compressed-notifs

compress boost/fave notifications more

4 files changed, 122 insertions, 79 deletions

diff --git a/app/javascript/flavours/glitch/components/status.js b/app/javascript/flavours/glitch/components/status.js
index d63b6a639..e8105e705 100644
--- 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}
diff --git a/app/javascript/flavours/glitch/components/status_header.js b/app/javascript/flavours/glitch/components/status_header.js
index e8c7a771e..65458e3f0 100644
--- 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>
     );
   }
 
diff --git a/app/javascript/flavours/glitch/components/status_icons.js b/app/javascript/flavours/glitch/components/status_icons.js
new file mode 100644
index 000000000..2e558cc77
--- /dev/null
+++ 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>
+    );
+  }
+
+}
diff --git a/app/javascript/flavours/glitch/styles/components/status.scss b/app/javascript/flavours/glitch/styles/components/status.scss
index 1ee5cba9e..ba42703ab 100644
--- 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,