@@ -1,5 +1,6 @@ | |||
import React from 'react'; | |||
import ImmutablePropTypes from 'react-immutable-proptypes'; | |||
import PropTypes from 'prop-types'; | |||
import ImmutablePureComponent from 'react-immutable-pure-component'; | |||
const filename = url => url.split('/').pop().split('#')[0].split('?')[0]; | |||
@@ -8,10 +9,25 @@ export default class AttachmentList extends ImmutablePureComponent { | |||
static propTypes = { | |||
media: ImmutablePropTypes.list.isRequired, | |||
compact: PropTypes.bool, | |||
}; | |||
render () { | |||
const { media } = this.props; | |||
const { media, compact } = this.props; | |||
if (compact) { | |||
return ( | |||
<div className='attachment-list compact'> | |||
<ul className='attachment-list__list'> | |||
{media.map(attachment => ( | |||
<li key={attachment.get('id')}> | |||
<a href={attachment.get('remote_url')} target='_blank' rel='noopener'><i className='fa fa-link' /> {filename(attachment.get('remote_url'))}</a> | |||
</li> | |||
))} | |||
</ul> | |||
</div> | |||
); | |||
} | |||
return ( | |||
<div className='attachment-list'> | |||
@@ -7,6 +7,7 @@ import RelativeTimestamp from './relative_timestamp'; | |||
import DisplayName from './display_name'; | |||
import StatusContent from './status_content'; | |||
import StatusActionBar from './status_action_bar'; | |||
import AttachmentList from './attachment_list'; | |||
import { FormattedMessage } from 'react-intl'; | |||
import ImmutablePureComponent from 'react-immutable-pure-component'; | |||
import { MediaGallery, Video } from '../features/ui/util/async-components'; | |||
@@ -179,7 +180,12 @@ export default class Status extends ImmutablePureComponent { | |||
if (status.get('media_attachments').size > 0 && !this.props.muted) { | |||
if (status.get('media_attachments').some(item => item.get('type') === 'unknown')) { | |||
media = ( | |||
<AttachmentList | |||
compact | |||
media={status.get('media_attachments')} | |||
/> | |||
); | |||
} else if (status.getIn(['media_attachments', 0, 'type']) === 'video') { | |||
const video = status.getIn(['media_attachments', 0]); | |||
@@ -4222,45 +4222,59 @@ a.status-card { | |||
border-radius: 4px; | |||
margin-top: 14px; | |||
overflow: hidden; | |||
} | |||
.attachment-list__icon { | |||
flex: 0 0 auto; | |||
color: $ui-base-lighter-color; | |||
padding: 8px 18px; | |||
cursor: default; | |||
border-right: 1px solid lighten($ui-base-color, 8%); | |||
display: flex; | |||
flex-direction: column; | |||
align-items: center; | |||
justify-content: center; | |||
font-size: 26px; | |||
&__icon { | |||
flex: 0 0 auto; | |||
color: $ui-base-lighter-color; | |||
padding: 8px 18px; | |||
cursor: default; | |||
border-right: 1px solid lighten($ui-base-color, 8%); | |||
display: flex; | |||
flex-direction: column; | |||
align-items: center; | |||
justify-content: center; | |||
font-size: 26px; | |||
.fa { | |||
display: block; | |||
.fa { | |||
display: block; | |||
} | |||
} | |||
} | |||
.attachment-list__list { | |||
list-style: none; | |||
padding: 4px 0; | |||
padding-left: 8px; | |||
display: flex; | |||
flex-direction: column; | |||
justify-content: center; | |||
li { | |||
display: block; | |||
&__list { | |||
list-style: none; | |||
padding: 4px 0; | |||
padding-left: 8px; | |||
display: flex; | |||
flex-direction: column; | |||
justify-content: center; | |||
li { | |||
display: block; | |||
padding: 4px 0; | |||
} | |||
a { | |||
text-decoration: none; | |||
color: $ui-base-lighter-color; | |||
font-weight: 500; | |||
&:hover { | |||
text-decoration: underline; | |||
} | |||
} | |||
} | |||
a { | |||
text-decoration: none; | |||
color: $ui-base-lighter-color; | |||
font-weight: 500; | |||
&.compact { | |||
border: 0; | |||
margin-top: 4px; | |||
&:hover { | |||
text-decoration: underline; | |||
.attachment-list__list { | |||
padding: 0; | |||
display: block; | |||
} | |||
.fa { | |||
color: $ui-base-lighter-color; | |||
} | |||
} | |||
} | |||