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 Icon from 'soapbox/components/icon';
import StillImage from 'soapbox/components/still_image';
import { MIMETYPE_ICONS } from 'soapbox/features/compose/components/upload';
import { truncateFilename } from 'soapbox/utils/media';
import { isIOS } from '../is_mobile';
@ -146,11 +147,18 @@ class Item extends React.PureComponent {
if (attachment.get('type') === 'unknown') {
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 (
<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' }}>
<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>
</a>
</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';
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 bookIcon = require('@tabler/icons/icons/book.svg');
const fileAnalyticsIcon = require('@tabler/icons/icons/file-analytics.svg');
const fileCodeIcon = require('@tabler/icons/icons/file-code.svg');
const fileTextIcon = require('@tabler/icons/icons/file-text.svg');
const fileZipIcon = require('@tabler/icons/icons/file-zip.svg');
const presentationIcon = require('@tabler/icons/icons/presentation.svg');
export const MIMETYPE_ICONS = {
'application/x-freearc': fileZipIcon,
'application/x-bzip': fileZipIcon,
'application/x-bzip2': fileZipIcon,
'application/gzip': fileZipIcon,
'application/vnd.rar': fileZipIcon,
'application/x-tar': fileZipIcon,
'application/zip': fileZipIcon,
'application/x-7z-compressed': fileZipIcon,
'application/x-csh': fileCodeIcon,
'application/html': fileCodeIcon,
'text/javascript': fileCodeIcon,
'application/json': fileCodeIcon,
'application/ld+json': fileCodeIcon,
'application/x-httpd-php': fileCodeIcon,
'application/x-sh': fileCodeIcon,
'application/xhtml+xml': fileCodeIcon,
'application/xml': fileCodeIcon,
'application/epub+zip': bookIcon,
'application/vnd.oasis.opendocument.spreadsheet': fileAnalyticsIcon,
'application/vnd.ms-excel': fileAnalyticsIcon,
'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': fileAnalyticsIcon,
'application/pdf': fileTextIcon,
'application/vnd.oasis.opendocument.presentation': presentationIcon,
'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({
@ -137,7 +144,8 @@ class Upload extends ImmutablePureComponent {
const mediaType = media.get('type');
const uploadIcon = mediaType === 'unknown' && (
<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%;
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;
}
}
}