diff --git a/app/javascript/mastodon/features/compose/components/upload.tsx b/app/javascript/mastodon/features/compose/components/upload.tsx index 67c8ee5e9..adc51733d 100644 --- a/app/javascript/mastodon/features/compose/components/upload.tsx +++ b/app/javascript/mastodon/features/compose/components/upload.tsx @@ -22,10 +22,11 @@ import { useAppDispatch, useAppSelector } from 'mastodon/store'; export const Upload: React.FC<{ id: string; dragging?: boolean; + draggable?: boolean; overlay?: boolean; tall?: boolean; wide?: boolean; -}> = ({ id, dragging, overlay, tall, wide }) => { +}> = ({ id, dragging, draggable = true, overlay, tall, wide }) => { const dispatch = useAppDispatch(); const media = useAppSelector((state) => ( @@ -71,6 +72,7 @@ export const Upload: React.FC<{
{ [dispatch, setActiveId], ); + const handleDragCancel = useCallback(() => { + setActiveId(null); + }, [setActiveId]); + const accessibility: { screenReaderInstructions: ScreenReaderInstructions; announcements: Announcements; @@ -158,32 +162,46 @@ export const UploadForm: React.FC = () => {
- - + ) : ( + - {mediaIds.map((id, idx) => ( - - ))} - + + {mediaIds.map((id, idx) => ( + + ))} + - - {activeId ? : null} - - + + {activeId ? : null} + + + )}
)} diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index 29bf272ca..a7219b419 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -708,7 +708,12 @@ body > [data-popper-placement] { &__upload { position: relative; - cursor: grab; + + &.draggable { + will-change: transform, opacity; + touch-action: none; + cursor: grab; + } &.dragging { opacity: 0; @@ -720,18 +725,6 @@ body > [data-popper-placement] { pointer-events: none; } - &__drag-handle { - position: absolute; - top: 50%; - inset-inline-start: 0; - transform: translateY(-50%); - color: $white; - background: transparent; - border: 0; - padding: 8px 3px; - cursor: grab; - } - &__actions { display: flex; align-items: flex-start;