kopia lustrzana https://gitlab.com/soapbox-pub/soapbox
Attachment preview icons
Signed-off-by: marcin mikołajczak <git@mkljczk.pl>merge-requests/678/head
rodzic
e0cb4e0ec9
commit
686c458b63
|
@ -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>
|
||||
)}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
Ładowanie…
Reference in New Issue