From 687fcdc294f8c28893c8e902ae26d121e1d23742 Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Tue, 17 Jan 2023 14:33:04 -0600 Subject: [PATCH 1/9] Chats: improve design of attachments, fix sizing bug --- .../chats/components/chat-message-list.tsx | 60 ++++++++++--------- 1 file changed, 33 insertions(+), 27 deletions(-) diff --git a/app/soapbox/features/chats/components/chat-message-list.tsx b/app/soapbox/features/chats/components/chat-message-list.tsx index cdf0321780..1e56ffb542 100644 --- a/app/soapbox/features/chats/components/chat-message-list.tsx +++ b/app/soapbox/features/chats/components/chat-message-list.tsx @@ -312,39 +312,45 @@ const ChatMessageList: React.FC = ({ chat }) => { )} - -
- {maybeRenderMedia(chatMessage)} - -
- + {maybeRenderMedia(chatMessage)} + + {content && ( + +
+ +
+ + )} + Date: Tue, 17 Jan 2023 14:34:31 -0600 Subject: [PATCH 2/9] Chats: don't display "copy" button if there's no text to copy --- app/soapbox/features/chats/components/chat-message-list.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/soapbox/features/chats/components/chat-message-list.tsx b/app/soapbox/features/chats/components/chat-message-list.tsx index 1e56ffb542..355a71f51a 100644 --- a/app/soapbox/features/chats/components/chat-message-list.tsx +++ b/app/soapbox/features/chats/components/chat-message-list.tsx @@ -246,7 +246,7 @@ const ChatMessageList: React.FC = ({ chat }) => { const menu: Menu = []; - if (navigator.clipboard) { + if (navigator.clipboard && chatMessage.content) { menu.push({ text: intl.formatMessage(messages.copy), action: () => handleCopyText(chatMessage), From a4692f45ea7521ef0c00b4644e09f2abe4407e90 Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Tue, 17 Jan 2023 14:48:58 -0600 Subject: [PATCH 3/9] CHANGELOG: update for chat attachment improvements --- CHANGELOG.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index f511a09828..58f181b6ab 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -10,8 +10,11 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Admin: redirect the homepage to any URL. ### Changed +- Chats: improved display of media attachments. ### Fixed +- Chats: media attachments rendering at the wrong size and/or causing the chat to scroll on load. +- Chats: don't display "copy" button for messages without text. ### Removed - Admin: single user mode. Now the homepage can be redirected to any URL. From 11b48dbd55e0f0e5919921e31446f8af9df5bd48 Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Fri, 20 Jan 2023 11:05:35 -0600 Subject: [PATCH 4/9] Fix media gallery border-radius on Safari --- app/styles/components/media-gallery.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/app/styles/components/media-gallery.scss b/app/styles/components/media-gallery.scss index 0c71a43ddc..aa79493b1d 100644 --- a/app/styles/components/media-gallery.scss +++ b/app/styles/components/media-gallery.scss @@ -2,6 +2,7 @@ box-sizing: border-box; overflow: hidden; border-radius: 10px; + isolation: isolate; position: relative; width: 100%; height: auto; From f222491b3e79a2d1038f65483bc36eeeb6780a28 Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Fri, 20 Jan 2023 11:13:54 -0600 Subject: [PATCH 5/9] ChatMessageList: sharpen top-right corner of bubble when there's an attachment --- app/soapbox/features/chats/components/chat-message-list.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/app/soapbox/features/chats/components/chat-message-list.tsx b/app/soapbox/features/chats/components/chat-message-list.tsx index 355a71f51a..6a19a8c000 100644 --- a/app/soapbox/features/chats/components/chat-message-list.tsx +++ b/app/soapbox/features/chats/components/chat-message-list.tsx @@ -331,6 +331,7 @@ const ChatMessageList: React.FC = ({ chat }) => { className={ classNames({ 'text-ellipsis break-words relative rounded-md py-2 px-3 max-w-full space-y-2 [&_.mention]:underline': true, + 'rounded-tr-sm': chatMessage.attachment, '[&_.mention]:text-primary-600 dark:[&_.mention]:text-accent-blue': !isMyMessage, '[&_.mention]:text-white dark:[&_.mention]:white': isMyMessage, 'bg-primary-500 text-white': isMyMessage, From af1ad92432a0e285224b06cb90cfa47989e68703 Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Fri, 20 Jan 2023 11:29:40 -0600 Subject: [PATCH 6/9] Chats: use plus icon to upload attachment --- .../features/chats/components/chat-composer.tsx | 1 + .../features/compose/components/upload-button.tsx | 10 +++++++--- 2 files changed, 8 insertions(+), 3 deletions(-) diff --git a/app/soapbox/features/chats/components/chat-composer.tsx b/app/soapbox/features/chats/components/chat-composer.tsx index 358fbb6f3b..be1d7b907f 100644 --- a/app/soapbox/features/chats/components/chat-composer.tsx +++ b/app/soapbox/features/chats/components/chat-composer.tsx @@ -162,6 +162,7 @@ const ChatComposer = React.forwardRef resetFileKey={resetFileKey} iconClassName='w-5 h-5' className='text-primary-500' + icon={require('@tabler/icons/plus.svg')} /> )} diff --git a/app/soapbox/features/compose/components/upload-button.tsx b/app/soapbox/features/compose/components/upload-button.tsx index 7d6f31c65c..e5c12e8b59 100644 --- a/app/soapbox/features/compose/components/upload-button.tsx +++ b/app/soapbox/features/compose/components/upload-button.tsx @@ -22,6 +22,7 @@ export interface IUploadButton { resetFileKey: number | null, className?: string, iconClassName?: string, + icon?: string, } const UploadButton: React.FC = ({ @@ -31,6 +32,7 @@ const UploadButton: React.FC = ({ resetFileKey, className = 'text-gray-600 hover:text-gray-700 dark:hover:text-gray-500', iconClassName, + icon, }) => { const intl = useIntl(); const { configuration } = useInstance(); @@ -52,9 +54,11 @@ const UploadButton: React.FC = ({ return null; } - const src = onlyImages(attachmentTypes) - ? require('@tabler/icons/photo.svg') - : require('@tabler/icons/paperclip.svg'); + const src = icon || ( + onlyImages(attachmentTypes) + ? require('@tabler/icons/photo.svg') + : require('@tabler/icons/paperclip.svg') + ); return (
From ec0a3d6eea6e1161422dd3a11c569934e2b840a2 Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Fri, 20 Jan 2023 11:53:10 -0600 Subject: [PATCH 7/9] Chats: actually, do use a paperclip --- app/soapbox/features/chats/components/chat-composer.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/app/soapbox/features/chats/components/chat-composer.tsx b/app/soapbox/features/chats/components/chat-composer.tsx index be1d7b907f..358fbb6f3b 100644 --- a/app/soapbox/features/chats/components/chat-composer.tsx +++ b/app/soapbox/features/chats/components/chat-composer.tsx @@ -162,7 +162,6 @@ const ChatComposer = React.forwardRef resetFileKey={resetFileKey} iconClassName='w-5 h-5' className='text-primary-500' - icon={require('@tabler/icons/plus.svg')} /> )} From 58cf71ceda809dacfd6f031d932f1c8bda7a40e0 Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Fri, 20 Jan 2023 11:56:50 -0600 Subject: [PATCH 8/9] ChatMessageList: fix regression with links not wrapping --- app/soapbox/features/chats/components/chat-message-list.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/soapbox/features/chats/components/chat-message-list.tsx b/app/soapbox/features/chats/components/chat-message-list.tsx index 6a19a8c000..b4a8a4c705 100644 --- a/app/soapbox/features/chats/components/chat-message-list.tsx +++ b/app/soapbox/features/chats/components/chat-message-list.tsx @@ -325,7 +325,7 @@ const ChatMessageList: React.FC = ({ chat }) => { {maybeRenderMedia(chatMessage)} {content && ( - +
Date: Fri, 20 Jan 2023 13:08:10 -0600 Subject: [PATCH 9/9] Chats: fix bubble corner for other person's message --- app/soapbox/features/chats/components/chat-message-list.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/app/soapbox/features/chats/components/chat-message-list.tsx b/app/soapbox/features/chats/components/chat-message-list.tsx index b4a8a4c705..613a5eed0a 100644 --- a/app/soapbox/features/chats/components/chat-message-list.tsx +++ b/app/soapbox/features/chats/components/chat-message-list.tsx @@ -331,7 +331,8 @@ const ChatMessageList: React.FC = ({ chat }) => { className={ classNames({ 'text-ellipsis break-words relative rounded-md py-2 px-3 max-w-full space-y-2 [&_.mention]:underline': true, - 'rounded-tr-sm': chatMessage.attachment, + 'rounded-tr-sm': chatMessage.attachment && isMyMessage, + 'rounded-tl-sm': chatMessage.attachment && !isMyMessage, '[&_.mention]:text-primary-600 dark:[&_.mention]:text-accent-blue': !isMyMessage, '[&_.mention]:text-white dark:[&_.mention]:white': isMyMessage, 'bg-primary-500 text-white': isMyMessage,