moon
/
soapbox
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'attachment-previews' into 'develop' 

Attachment preview icons

See merge request soapbox-pub/soapbox-fe!678
This commit is contained in:
Alex Gleason 2021-08-21 14:44:57 +00:00
parent 84c7b9df06 686c458b63
commit bfa61cf62a
2 changed files with 49 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
app/soapbox/features/compose/components/upload.js
View File

@ -9,6 +9,40 @@ import classNames from 'classnames';
import Icon from 'soapbox/components/icon'; import Icon from 'soapbox/components/icon';
import Blurhash from 'soapbox/components/blurhash'; 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({ const messages = defineMessages({
description: { id: 'upload_form.description', defaultMessage: 'Describe for the visually impaired' }, description: { id: 'upload_form.description', defaultMessage: 'Describe for the visually impaired' },
delete: { id: 'upload_form.undo', defaultMessage: 'Delete' }, delete: { id: 'upload_form.undo', defaultMessage: 'Delete' },
@ -100,6 +134,11 @@ class Upload extends ImmutablePureComponent {
const x = ((focusX / 2) + .5) * 100; const x = ((focusX / 2) + .5) * 100;
const y = ((focusY / -2) + .5) * 100; const y = ((focusY / -2) + .5) * 100;
const mediaType = media.get('type'); const mediaType = media.get('type');
const uploadIcon = mediaType === 'unknown' && (
<Icon
id={MIMETYPE_ICONS[media.getIn(['pleroma', 'mime_type'])] || 'paperclip'}
/>
);
return ( return (
<div className='compose-form__upload' tabIndex='0' onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave} onClick={this.handleClick} role='button'> <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 })}> <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.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>
<div className={classNames('compose-form__upload-description', { active })}> <div className={classNames('compose-form__upload-description', { active })}>
@ -140,6 +179,7 @@ class Upload extends ImmutablePureComponent {
<source src={media.get('preview_url')} /> <source src={media.get('preview_url')} />
</video> </video>
)} )}
{uploadIcon}
</div> </div>
</div> </div>
)} )}

8
app/styles/components/compose-form.scss
View File

@ -297,6 +297,14 @@
height: 100%; height: 100%;
object-fit: cover; 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;
}
} }
} }