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

Merge branch 'media-attachment-icons' into 'develop' 

Use Tabler Icons for attachment icons

See merge request soapbox-pub/soapbox-fe!1318
This commit is contained in:
marcin mikołajczak 2022-05-06 13:29:17 +00:00
parent 37b0b972e0 80532116af
commit d41e347c79
3 changed files with 50 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
app/soapbox/components/media_gallery.js
View File

@ -11,6 +11,7 @@ import { getSettings } from 'soapbox/actions/settings';
import Blurhash from 'soapbox/components/blurhash'; import Blurhash from 'soapbox/components/blurhash';
import Icon from 'soapbox/components/icon'; import Icon from 'soapbox/components/icon';
import StillImage from 'soapbox/components/still_image'; import StillImage from 'soapbox/components/still_image';
import { MIMETYPE_ICONS } from 'soapbox/features/compose/components/upload';
import { truncateFilename } from 'soapbox/utils/media'; import { truncateFilename } from 'soapbox/utils/media';
import { isIOS } from '../is_mobile'; import { isIOS } from '../is_mobile';
@ -146,11 +147,18 @@ class Item extends React.PureComponent {
if (attachment.get('type') === 'unknown') { if (attachment.get('type') === 'unknown') {
const filename = truncateFilename(attachment.get('remote_url'), MAX_FILENAME_LENGTH); const filename = truncateFilename(attachment.get('remote_url'), MAX_FILENAME_LENGTH);
const attachmentIcon = (
<Icon
className='h-16 w-16 text-gray-800 dark:text-gray-200'
src={MIMETYPE_ICONS[attachment.getIn(['pleroma', 'mime_type'])] || require('@tabler/icons/icons/paperclip.svg')}
/>
);
return ( return (
<div className={classNames('media-gallery__item', { standalone })} key={attachment.get('id')} style={{ position, float, left, top, right, bottom, height, width: `${width}%` }}> <div className={classNames('media-gallery__item', { standalone })} key={attachment.get('id')} style={{ position, float, left, top, right, bottom, height, width: `${width}%` }}>
<a className='media-gallery__item-thumbnail' href={attachment.get('remote_url')} target='_blank' style={{ cursor: 'pointer' }}> <a className='media-gallery__item-thumbnail' href={attachment.get('remote_url')} target='_blank' style={{ cursor: 'pointer' }}>
<Blurhash hash={attachment.get('blurhash')} className='media-gallery__preview' /> <Blurhash hash={attachment.get('blurhash')} className='media-gallery__preview' />
<span className='media-gallery__item__icons'><Icon id='file' /></span> <span className='media-gallery__item__icons'>{attachmentIcon}</span>
<span className='media-gallery__filename__label'>{filename}</span> <span className='media-gallery__filename__label'>{filename}</span>
</a> </a>
</div> </div>

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

@ -13,38 +13,45 @@ import IconButton from 'soapbox/components/icon_button';
import Motion from '../../ui/util/optional_motion'; import Motion from '../../ui/util/optional_motion';
const MIMETYPE_ICONS = { const bookIcon = require('@tabler/icons/icons/book.svg');
'application/x-freearc': 'file-archive-o', const fileAnalyticsIcon = require('@tabler/icons/icons/file-analytics.svg');
'application/x-bzip': 'file-archive-o', const fileCodeIcon = require('@tabler/icons/icons/file-code.svg');
'application/x-bzip2': 'file-archive-o', const fileTextIcon = require('@tabler/icons/icons/file-text.svg');
'application/gzip': 'file-archive-o', const fileZipIcon = require('@tabler/icons/icons/file-zip.svg');
'application/vnd.rar': 'file-archive-o', const presentationIcon = require('@tabler/icons/icons/presentation.svg');
'application/x-tar': 'file-archive-o',
'application/zip': 'file-archive-o', export const MIMETYPE_ICONS = {
'application/x-7z-compressed': 'file-archive-o', 'application/x-freearc': fileZipIcon,
'application/x-csh': 'file-code-o', 'application/x-bzip': fileZipIcon,
'application/html': 'file-code-o', 'application/x-bzip2': fileZipIcon,
'text/javascript': 'file-code-o', 'application/gzip': fileZipIcon,
'application/json': 'file-code-o', 'application/vnd.rar': fileZipIcon,
'application/ld+json': 'file-code-o', 'application/x-tar': fileZipIcon,
'application/x-httpd-php': 'file-code-o', 'application/zip': fileZipIcon,
'application/x-sh': 'file-code-o', 'application/x-7z-compressed': fileZipIcon,
'application/xhtml+xml': 'file-code-o', 'application/x-csh': fileCodeIcon,
'application/xml': 'file-code-o', 'application/html': fileCodeIcon,
'application/epub+zip': 'file-epub-o', 'text/javascript': fileCodeIcon,
'application/vnd.oasis.opendocument.spreadsheet': 'file-excel-o', 'application/json': fileCodeIcon,
'application/vnd.ms-excel': 'file-excel-o', 'application/ld+json': fileCodeIcon,
'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': 'file-excel-o', 'application/x-httpd-php': fileCodeIcon,
'application/pdf': 'file-pdf-o', 'application/x-sh': fileCodeIcon,
'application/vnd.oasis.opendocument.presentation': 'file-powerpoint-o', 'application/xhtml+xml': fileCodeIcon,
'application/vnd.ms-powerpoint': 'file-powerpoint-o', 'application/xml': fileCodeIcon,
'application/vnd.openxmlformats-officedocument.presentationml.presentation': 'file-powerpoint-o', 'application/epub+zip': bookIcon,
'text/plain': 'file-text-o', 'application/vnd.oasis.opendocument.spreadsheet': fileAnalyticsIcon,
'application/rtf': 'file-text-o', 'application/vnd.ms-excel': fileAnalyticsIcon,
'application/msword': 'file-word-o', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': fileAnalyticsIcon,
'application/x-abiword': 'file-word-o', 'application/pdf': fileTextIcon,
'application/vnd.openxmlformats-officedocument.wordprocessingml.document': 'file-word-o', 'application/vnd.oasis.opendocument.presentation': presentationIcon,
'application/vnd.oasis.opendocument.text': 'file-word-o', 'application/vnd.ms-powerpoint': presentationIcon,
'application/vnd.openxmlformats-officedocument.presentationml.presentation': presentationIcon,
'text/plain': fileTextIcon,
'application/rtf': fileTextIcon,
'application/msword': fileTextIcon,
'application/x-abiword': fileTextIcon,
'application/vnd.openxmlformats-officedocument.wordprocessingml.document': fileTextIcon,
'application/vnd.oasis.opendocument.text': fileTextIcon,
}; };
const messages = defineMessages({ const messages = defineMessages({
@ -137,7 +144,8 @@ class Upload extends ImmutablePureComponent {
const mediaType = media.get('type'); const mediaType = media.get('type');
const uploadIcon = mediaType === 'unknown' && ( const uploadIcon = mediaType === 'unknown' && (
<Icon <Icon
id={MIMETYPE_ICONS[media.getIn(['pleroma', 'mime_type'])] || 'paperclip'} className='h-16 w-16 mx-auto my-12 text-gray-800 dark:text-gray-200'
src={MIMETYPE_ICONS[media.getIn(['pleroma', 'mime_type'])] || require('@tabler/icons/icons/paperclip.svg')}
/> />
); );

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

@ -184,14 +184,6 @@
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;
}
} }
} }