From 80532116af203aec8824d2598ef64ed0cbb562b1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= Date: Fri, 6 May 2022 14:33:14 +0200 Subject: [PATCH] Use Tabler Icons for attachment icons MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: marcin mikołajczak --- app/soapbox/components/media_gallery.js | 10 ++- .../features/compose/components/upload.js | 74 ++++++++++--------- app/styles/components/compose-form.scss | 8 -- 3 files changed, 50 insertions(+), 42 deletions(-) diff --git a/app/soapbox/components/media_gallery.js b/app/soapbox/components/media_gallery.js index d4782d3b1..ffe8bc0e1 100644 --- a/app/soapbox/components/media_gallery.js +++ b/app/soapbox/components/media_gallery.js @@ -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 = ( + + ); + return (
- + {attachmentIcon} {filename}
diff --git a/app/soapbox/features/compose/components/upload.js b/app/soapbox/features/compose/components/upload.js index 6c3ef5638..184b6b612 100644 --- a/app/soapbox/features/compose/components/upload.js +++ b/app/soapbox/features/compose/components/upload.js @@ -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' && ( ); diff --git a/app/styles/components/compose-form.scss b/app/styles/components/compose-form.scss index d81481b07..4682d5123 100644 --- a/app/styles/components/compose-form.scss +++ b/app/styles/components/compose-form.scss @@ -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; - } } }