From f7d75f57ea8624bcdfc295cd87293538ad834426 Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Sun, 20 Nov 2022 14:23:18 -0600 Subject: [PATCH 1/6] StillImage: make it play nice with Tailwind, remove still-image.scss --- app/soapbox/components/media-gallery.tsx | 11 ++++-- app/soapbox/components/still-image.tsx | 38 +++++++++++++++++-- .../account-gallery/components/media-item.tsx | 1 + .../features/account/components/header.tsx | 2 +- 4 files changed, 44 insertions(+), 8 deletions(-) diff --git a/app/soapbox/components/media-gallery.tsx b/app/soapbox/components/media-gallery.tsx index 42b961dc1..1a6754210 100644 --- a/app/soapbox/components/media-gallery.tsx +++ b/app/soapbox/components/media-gallery.tsx @@ -160,16 +160,21 @@ const Item: React.FC = ({ ); } else if (attachment.type === 'image') { - const letterboxed = shouldLetterbox(attachment); + const letterboxed = total === 1 && shouldLetterbox(attachment); thumbnail = ( - + ); } else if (attachment.type === 'gifv') { diff --git a/app/soapbox/components/still-image.tsx b/app/soapbox/components/still-image.tsx index 24e212ce5..38e72a6b6 100644 --- a/app/soapbox/components/still-image.tsx +++ b/app/soapbox/components/still-image.tsx @@ -12,10 +12,12 @@ interface IStillImage { src: string, /** Extra CSS styles on the outer
element. */ style?: React.CSSProperties, + /** Whether to display the image contained vs filled in its container. */ + letterboxed?: boolean, } /** Renders images on a canvas, only playing GIFs if autoPlayGif is enabled. */ -const StillImage: React.FC = ({ alt, className, src, style }) => { +const StillImage: React.FC = ({ alt, className, src, style, letterboxed = false }) => { const settings = useSettings(); const autoPlayGif = settings.get('autoPlayGif'); @@ -34,10 +36,38 @@ const StillImage: React.FC = ({ alt, className, src, style }) => { } }; + /** ClassNames shared between the `` and `` elements. */ + const baseClassName = classNames('w-full h-full block', { + 'object-contain': letterboxed, + 'object-cover': !letterboxed, + }); + return ( -
- {alt} - {hoverToPlay && } +
+
+ {alt} + + {hoverToPlay && ( + + )} +
); }; diff --git a/app/soapbox/features/account-gallery/components/media-item.tsx b/app/soapbox/features/account-gallery/components/media-item.tsx index a2a171bfc..4242094b5 100644 --- a/app/soapbox/features/account-gallery/components/media-item.tsx +++ b/app/soapbox/features/account-gallery/components/media-item.tsx @@ -74,6 +74,7 @@ const MediaItem: React.FC = ({ attachment, displayWidth, onOpenMedia src={attachment.preview_url} alt={attachment.description} style={{ objectPosition: `${x}% ${y}%` }} + className='w-full h-full rounded-lg overflow-hidden' /> ); } else if (['gifv', 'video'].indexOf(attachment.type) !== -1) { diff --git a/app/soapbox/features/account/components/header.tsx b/app/soapbox/features/account/components/header.tsx index 4aa4d3b05..ef41e9ccf 100644 --- a/app/soapbox/features/account/components/header.tsx +++ b/app/soapbox/features/account/components/header.tsx @@ -577,7 +577,7 @@ const Header: React.FC = ({ account }) => {
From b4b9aa039d16deb5d13fee515e5f07c3d05c5201 Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Sun, 20 Nov 2022 14:53:24 -0600 Subject: [PATCH 2/6] Remove .still-image css, display "GIF" badge in media when autoPlayGif is off --- app/soapbox/components/media-gallery.tsx | 3 +- app/soapbox/components/still-image.tsx | 24 +++++++++- app/styles/accounts.scss | 4 -- app/styles/application.scss | 1 - app/styles/chats.scss | 5 --- app/styles/components/media-gallery.scss | 57 ++---------------------- app/styles/components/still-image.scss | 28 ------------ 7 files changed, 29 insertions(+), 93 deletions(-) delete mode 100644 app/styles/components/still-image.scss diff --git a/app/soapbox/components/media-gallery.tsx b/app/soapbox/components/media-gallery.tsx index 1a6754210..9244f05d5 100644 --- a/app/soapbox/components/media-gallery.tsx +++ b/app/soapbox/components/media-gallery.tsx @@ -164,7 +164,7 @@ const Item: React.FC = ({ thumbnail = ( = ({ src={attachment.url} alt={attachment.description} letterboxed={letterboxed} + showExt /> ); diff --git a/app/soapbox/components/still-image.tsx b/app/soapbox/components/still-image.tsx index 38e72a6b6..899b83683 100644 --- a/app/soapbox/components/still-image.tsx +++ b/app/soapbox/components/still-image.tsx @@ -14,10 +14,12 @@ interface IStillImage { style?: React.CSSProperties, /** Whether to display the image contained vs filled in its container. */ letterboxed?: boolean, + /** Whether to show the file extension in the corner. */ + showExt?: boolean, } /** Renders images on a canvas, only playing GIFs if autoPlayGif is enabled. */ -const StillImage: React.FC = ({ alt, className, src, style, letterboxed = false }) => { +const StillImage: React.FC = ({ alt, className, src, style, letterboxed = false, showExt = false }) => { const settings = useSettings(); const autoPlayGif = settings.get('autoPlayGif'); @@ -67,9 +69,29 @@ const StillImage: React.FC = ({ alt, className, src, style, letterb })} /> )} + + {(hoverToPlay && showExt) && ( +
+ +
+ )}
); }; +interface IExtensionBadge { + /** File extension. */ + ext: string, +} + +/** Badge displaying a file extension. */ +const ExtensionBadge: React.FC = ({ ext }) => { + return ( +
+ {ext} +
+ ); +}; + export default StillImage; diff --git a/app/styles/accounts.scss b/app/styles/accounts.scss index e4a0833c7..e24a19ddf 100644 --- a/app/styles/accounts.scss +++ b/app/styles/accounts.scss @@ -72,10 +72,6 @@ a .account__avatar { bottom: 0; right: 0; z-index: 1; - - &.still-image { - position: absolute; - } } } diff --git a/app/styles/application.scss b/app/styles/application.scss index da62ca314..2d7428ad6 100644 --- a/app/styles/application.scss +++ b/app/styles/application.scss @@ -44,7 +44,6 @@ @import 'components/columns'; @import 'components/search'; @import 'components/react-toggle'; -@import 'components/still-image'; @import 'components/spoiler-button'; @import 'components/video-player'; @import 'components/audio-player'; diff --git a/app/styles/chats.scss b/app/styles/chats.scss index 7c98b11ff..d2f00aeff 100644 --- a/app/styles/chats.scss +++ b/app/styles/chats.scss @@ -356,11 +356,6 @@ &__preview { background-color: transparent; } - - &__item-thumbnail img, - &__item-thumbnail .still-image img { - object-fit: contain; - } } .chat-messages__divider { diff --git a/app/styles/components/media-gallery.scss b/app/styles/components/media-gallery.scss index 664600893..70a954a88 100644 --- a/app/styles/components/media-gallery.scss +++ b/app/styles/components/media-gallery.scss @@ -57,32 +57,11 @@ line-height: 0; position: relative; z-index: 1; + height: 100%; + width: 100%; - &, - .still-image { - height: 100%; - width: 100%; - - img { - @apply object-cover rounded-lg; - } - } - - .still-image--play-on-hover::before { - content: 'GIF'; - position: absolute; - color: var(--primary-text-color); - background: var(--foreground-color); - bottom: 6px; - left: 6px; - padding: 2px 6px; - border-radius: 2px; - font-size: 11px; - font-weight: 600; - pointer-events: none; - opacity: 0.9; - transition: opacity 0.1s ease; - line-height: 18px; + img { + @apply object-cover rounded-lg; } video { @@ -92,17 +71,6 @@ } } -.status__wrapper { - .media-gallery__item-thumbnail.letterboxed { - &, - .still-image { - img { - object-fit: contain; - } - } - } -} - .media-gallery__preview { @apply bg-gray-200 dark:bg-gray-900 rounded-lg; width: 100%; @@ -113,23 +81,6 @@ left: 0; z-index: 0; - .still-image--play-on-hover::before { - content: 'GIF'; - position: absolute; - color: var(--primary-text-color); - background: var(--foreground-color); - bottom: 6px; - left: 6px; - padding: 2px 6px; - border-radius: 2px; - font-size: 11px; - font-weight: 600; - pointer-events: none; - opacity: 0.9; - transition: opacity 0.1s ease; - line-height: 18px; - } - &--hidden { display: none; } diff --git a/app/styles/components/still-image.scss b/app/styles/components/still-image.scss deleted file mode 100644 index 0b86d6ada..000000000 --- a/app/styles/components/still-image.scss +++ /dev/null @@ -1,28 +0,0 @@ -.still-image { - position: relative; - overflow: hidden; - - img, - canvas { - width: 100%; - height: 100%; - display: block; - object-fit: cover; - font-family: inherit; - } - - &--play-on-hover { - img { - position: absolute; - visibility: hidden; - } - - &:hover img { - visibility: visible; - } - - &:hover canvas { - visibility: hidden; - } - } -} From 8d2db4c2a33279993cf9c4012924e49fa60ba5df Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Sun, 20 Nov 2022 15:26:01 -0600 Subject: [PATCH 3/6] Fix letterboxing remote statuses --- app/styles/components/media-gallery.scss | 4 ---- 1 file changed, 4 deletions(-) diff --git a/app/styles/components/media-gallery.scss b/app/styles/components/media-gallery.scss index 70a954a88..25d953dfa 100644 --- a/app/styles/components/media-gallery.scss +++ b/app/styles/components/media-gallery.scss @@ -60,10 +60,6 @@ height: 100%; width: 100%; - img { - @apply object-cover rounded-lg; - } - video { width: 100%; height: 100%; From 0111d4f179c88b7efeb710b5e2e336779545a4b7 Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Tue, 22 Nov 2022 10:31:23 -0600 Subject: [PATCH 4/6] Fix StillImage in Safari --- app/soapbox/components/still-image.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/soapbox/components/still-image.tsx b/app/soapbox/components/still-image.tsx index 899b83683..470ea51db 100644 --- a/app/soapbox/components/still-image.tsx +++ b/app/soapbox/components/still-image.tsx @@ -47,7 +47,7 @@ const StillImage: React.FC = ({ alt, className, src, style, letterb return (
From dce26a6600457c3b8866facbb650ac99617a4d7d Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Tue, 22 Nov 2022 11:33:00 -0600 Subject: [PATCH 5/6] ProfileHoverCard: fix account bio on Mastodon --- app/soapbox/components/profile-hover-card.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/soapbox/components/profile-hover-card.tsx b/app/soapbox/components/profile-hover-card.tsx index 367c788e0..8ade427ca 100644 --- a/app/soapbox/components/profile-hover-card.tsx +++ b/app/soapbox/components/profile-hover-card.tsx @@ -136,7 +136,7 @@ export const ProfileHoverCard: React.FC = ({ visible = true } ) : null} - {account.source.get('note', '').length > 0 && ( + {account.note.length > 0 && ( )} From 47613dde566ad39317d0df26bb96bfe404cad087 Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Tue, 22 Nov 2022 11:33:47 -0600 Subject: [PATCH 6/6] Simplify StillImage component, fix header images --- app/soapbox/components/still-image.tsx | 44 +++++++++---------- app/soapbox/components/ui/card/card.tsx | 2 +- .../features/account/components/header.tsx | 3 +- .../features/ui/components/user-panel.tsx | 8 +--- 4 files changed, 25 insertions(+), 32 deletions(-) diff --git a/app/soapbox/components/still-image.tsx b/app/soapbox/components/still-image.tsx index 470ea51db..1f4f1a261 100644 --- a/app/soapbox/components/still-image.tsx +++ b/app/soapbox/components/still-image.tsx @@ -47,35 +47,33 @@ const StillImage: React.FC = ({ alt, className, src, style, letterb return (
-
- {alt} + + {hoverToPlay && ( + + )} - {hoverToPlay && ( - - )} - - {(hoverToPlay && showExt) && ( -
- -
- )} -
+ {(hoverToPlay && showExt) && ( +
+ +
+ )}
); }; diff --git a/app/soapbox/components/ui/card/card.tsx b/app/soapbox/components/ui/card/card.tsx index 59f6ee1bc..a2d181e3a 100644 --- a/app/soapbox/components/ui/card/card.tsx +++ b/app/soapbox/components/ui/card/card.tsx @@ -33,7 +33,7 @@ const Card = React.forwardRef(({ children, variant = 'def ref={ref} {...filteredProps} className={classNames({ - 'bg-white dark:bg-primary-900 text-gray-900 dark:text-gray-100 shadow-lg dark:shadow-none overflow-hidden': variant === 'rounded', + 'bg-white dark:bg-primary-900 text-gray-900 dark:text-gray-100 shadow-lg dark:shadow-none overflow-hidden isolate': variant === 'rounded', [sizes[size]]: variant === 'rounded', }, className)} > diff --git a/app/soapbox/features/account/components/header.tsx b/app/soapbox/features/account/components/header.tsx index ef41e9ccf..d3d7865b6 100644 --- a/app/soapbox/features/account/components/header.tsx +++ b/app/soapbox/features/account/components/header.tsx @@ -551,13 +551,12 @@ const Header: React.FC = ({ account }) => { )}
-
+
{account.header && ( )} diff --git a/app/soapbox/features/ui/components/user-panel.tsx b/app/soapbox/features/ui/components/user-panel.tsx index 8f0fbf517..918d94efd 100644 --- a/app/soapbox/features/ui/components/user-panel.tsx +++ b/app/soapbox/features/ui/components/user-panel.tsx @@ -36,13 +36,9 @@ const UserPanel: React.FC = ({ accountId, action, badges, domain })
-
+
{header && ( - + )}