Merge branch 'attachment-previews' into 'develop'

Attachment preview icons

See merge request soapbox-pub/soapbox-fe!678
groups^2
Alex Gleason 2021-08-21 14:44:57 +00:00
commit bfa61cf62a
2 zmienionych plików z 49 dodań i 1 usunięć

Wyświetl plik

@ -9,6 +9,40 @@ import classNames from 'classnames';
import Icon from 'soapbox/components/icon';
import Blurhash from 'soapbox/components/blurhash';
const MIMETYPE_ICONS = {
'application/x-freearc': 'file-archive-o',
'application/x-bzip': 'file-archive-o',
'application/x-bzip2': 'file-archive-o',
'application/gzip': 'file-archive-o',
'application/vnd.rar': 'file-archive-o',
'application/x-tar': 'file-archive-o',
'application/zip': 'file-archive-o',
'application/x-7z-compressed': 'file-archive-o',
'application/x-csh': 'file-code-o',
'application/html': 'file-code-o',
'text/javascript': 'file-code-o',
'application/json': 'file-code-o',
'application/ld+json': 'file-code-o',
'application/x-httpd-php': 'file-code-o',
'application/x-sh': 'file-code-o',
'application/xhtml+xml': 'file-code-o',
'application/xml': 'file-code-o',
'application/epub+zip': 'file-epub-o',
'application/vnd.oasis.opendocument.spreadsheet': 'file-excel-o',
'application/vnd.ms-excel': 'file-excel-o',
'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': 'file-excel-o',
'application/pdf': 'file-pdf-o',
'application/vnd.oasis.opendocument.presentation': 'file-powerpoint-o',
'application/vnd.ms-powerpoint': 'file-powerpoint-o',
'application/vnd.openxmlformats-officedocument.presentationml.presentation': 'file-powerpoint-o',
'text/plain': 'file-text-o',
'application/rtf': 'file-text-o',
'application/msword': 'file-word-o',
'application/x-abiword': 'file-word-o',
'application/vnd.openxmlformats-officedocument.wordprocessingml.document': 'file-word-o',
'application/vnd.oasis.opendocument.text': 'file-word-o',
};
const messages = defineMessages({
description: { id: 'upload_form.description', defaultMessage: 'Describe for the visually impaired' },
delete: { id: 'upload_form.undo', defaultMessage: 'Delete' },
@ -100,6 +134,11 @@ class Upload extends ImmutablePureComponent {
const x = ((focusX / 2) + .5) * 100;
const y = ((focusY / -2) + .5) * 100;
const mediaType = media.get('type');
const uploadIcon = mediaType === 'unknown' && (
<Icon
id={MIMETYPE_ICONS[media.getIn(['pleroma', 'mime_type'])] || 'paperclip'}
/>
);
return (
<div className='compose-form__upload' tabIndex='0' onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave} onClick={this.handleClick} role='button'>
@ -115,7 +154,7 @@ class Upload extends ImmutablePureComponent {
>
<div className={classNames('compose-form__upload__actions', { active })}>
<button className='icon-button' onClick={this.handleUndoClick}><Icon id='times' /> <FormattedMessage id='upload_form.undo' defaultMessage='Delete' /></button>
<button className='icon-button' onClick={this.handleOpenModal}><Icon id='search-plus' /> <FormattedMessage id='upload_form.preview' defaultMessage='Preview' /></button>
{mediaType !== 'unknown' && <button className='icon-button' onClick={this.handleOpenModal}><Icon id='search-plus' /> <FormattedMessage id='upload_form.preview' defaultMessage='Preview' /></button>}
</div>
<div className={classNames('compose-form__upload-description', { active })}>
@ -140,6 +179,7 @@ class Upload extends ImmutablePureComponent {
<source src={media.get('preview_url')} />
</video>
)}
{uploadIcon}
</div>
</div>
)}

Wyświetl plik

@ -297,6 +297,14 @@
height: 100%;
object-fit: cover;
}
> i.fa {
width: 100%;
color: hsla(var(--primary-text-color_hsl), 0.4);
font-size: 64px;
text-align: center;
line-height: 160px;
}
}
}