Tiny Status improvements

- Media toots are no longer auto-collapsed if the media is behind a CW
- Display names no longer appear clickable when a toot is collapsed
- Fixed #36 by adding reduplicating the media icon inside the SHOW
MORE/LESS

3 files changed, 15 insertions, 8 deletions

diff --git a/app/javascript/mastodon/components/status.js b/app/javascript/mastodon/components/status.js
index 33e4a25e4..a200570a1 100644
--- a/app/javascript/mastodon/components/status.js
+++ b/app/javascript/mastodon/components/status.js
@@ -176,7 +176,7 @@ class Status extends ImmutablePureComponent {
     else if (settings.getIn(['collapsed', 'auto', 'all'])) this.collapse();
     else if (settings.getIn(['collapsed', 'auto', 'lengthy']) && node.clientHeight > 400) this.collapse();
     else if (settings.getIn(['collapsed', 'auto', 'replies']) && status.get('in_reply_to_id', null) !== null) this.collapse();
-    else if (settings.getIn(['collapsed', 'auto', 'media']) && status.get('media_attachments').size > 0) this.collapse();
+    else if (settings.getIn(['collapsed', 'auto', 'media']) && !(status.get('spoiler_text').length > 0) && status.get('media_attachments').size > 0) this.collapse();
 
     if (!this.props.intersectionObserverWrapper) {
       // TODO: enable IntersectionObserver optimization for notification statuses.
@@ -268,7 +268,7 @@ class Status extends ImmutablePureComponent {
 
   render () {
     let media = null;
-    let mediaType = null;
+    let mediaIcon = null;
     let statusAvatar;
 
     // Exclude intersectionObserverWrapper from `other` variable
@@ -297,10 +297,10 @@ class Status extends ImmutablePureComponent {
 
       } else if (status.getIn(['media_attachments', 0, 'type']) === 'video') {
         media = <VideoPlayer media={status.getIn(['media_attachments', 0])} sensitive={status.get('sensitive')} onOpenVideo={this.props.onOpenVideo} />;
-        mediaType = <i className='fa fa-fw fa-video-camera' aria-hidden='true' />;
+        mediaIcon = 'video-camera';
       } else {
         media = <MediaGallery media={status.get('media_attachments')} sensitive={status.get('sensitive')} height={110} onOpenMedia={this.props.onOpenMedia} autoPlayGif={this.props.autoPlayGif} />;
-        mediaType = status.get('media_attachments').size > 1 ? <i className='fa fa-fw fa-th-large' aria-hidden='true' /> : <i className='fa fa-fw fa-picture-o' aria-hidden='true' />;
+        mediaIcon = 'picture-o';
       }
 
       if (!status.get('sensitive') && !(status.get('spoiler_text').length > 0) && settings.getIn(['collapsed', 'backgrounds', 'preview_images'])) background = status.getIn(['media_attachments', 0]).get('preview_url');
@@ -317,7 +317,7 @@ class Status extends ImmutablePureComponent {
         <div className='status__info'>
 
           <div className='status__info__icons'>
-            {mediaType}
+            {mediaIcon ? <i className={`fa fa-fw fa-${mediaIcon}`} aria-hidden='true' /> : null}
             {settings.getIn(['collapsed', 'enabled']) ? <IconButton
               className='status__collapse-button'
               animate flip
@@ -338,7 +338,7 @@ class Status extends ImmutablePureComponent {
 
         </div>
 
-        <StatusContent status={status} onClick={this.handleClick} expanded={isExpanded} collapsed={isCollapsed} onExpandedToggle={this.handleExpandedToggle} onHeightUpdate={this.saveHeight}>
+        <StatusContent status={status} mediaIcon={mediaIcon} onClick={this.handleClick} expanded={isExpanded} collapsed={isCollapsed} onExpandedToggle={this.handleExpandedToggle} onHeightUpdate={this.saveHeight}>
 
           {isCollapsed ? null : media}
 
diff --git a/app/javascript/mastodon/components/status_content.js b/app/javascript/mastodon/components/status_content.js
index 7bf96218b..61a71e2f0 100644
--- a/app/javascript/mastodon/components/status_content.js
+++ b/app/javascript/mastodon/components/status_content.js
@@ -20,6 +20,7 @@ export default class StatusContent extends React.PureComponent {
     onExpandedToggle: PropTypes.func,
     onHeightUpdate: PropTypes.func,
     onClick: PropTypes.func,
+    mediaIcon: PropTypes.string,
     children: PropTypes.element,
   };
 
@@ -119,7 +120,7 @@ export default class StatusContent extends React.PureComponent {
   }
 
   render () {
-    const { status, children } = this.props;
+    const { status, children, mediaIcon } = this.props;
 
     const hidden = this.props.onExpandedToggle ? !this.props.expanded : this.state.hidden;
 
@@ -151,7 +152,9 @@ export default class StatusContent extends React.PureComponent {
           <p style={{ marginBottom: hidden && status.get('mentions').isEmpty() ? '0px' : null }}>
             <span dangerouslySetInnerHTML={spoilerContent} />
             {' '}
-            <button tabIndex='0' className='status__content__spoiler-link' onClick={this.handleSpoilerClick}>{toggleText}</button>
+            <button tabIndex='0' className='status__content__spoiler-link' onClick={this.handleSpoilerClick}>
+              {toggleText} {mediaIcon ? <i className={`fa fa-fw fa-${mediaIcon}`} aria-hidden='true' /> : null}
+            </button>
           </p>
 
           {mentionsPlaceholder}
diff --git a/app/javascript/styles/components.scss b/app/javascript/styles/components.scss
index 516a06de5..e75f92e9d 100644
--- a/app/javascript/styles/components.scss
+++ b/app/javascript/styles/components.scss
@@ -584,6 +584,10 @@
       content: "";
     }
 
+    .status__display-name:hover strong {
+      text-decoration: none;
+    }
+
     .status__content {
       height: 20px;
       overflow: hidden;