Skip to content

Commit e80971e

Browse files
GargronClearlyClaire
authored andcommitted
[Glitch] Change media reordering design in the compose form in web UI
Port 11a12e5 to glitch-soc Signed-off-by: Claire <[email protected]>
1 parent 9e10fd5 commit e80971e

File tree

7 files changed

+364
-162
lines changed

7 files changed

+364
-162
lines changed

app/javascript/flavours/glitch/features/compose/components/sensitive_button.jsx

+5-5
Original file line numberDiff line numberDiff line change
@@ -21,11 +21,11 @@ const messages = defineMessages({
2121
export const SensitiveButton = () => {
2222
const intl = useIntl();
2323

24-
const spoilersAlwaysOn = useAppSelector((state) => state.getIn(['local_settings', 'always_show_spoilers_field']));
25-
const spoilerText = useAppSelector((state) => state.getIn(['compose', 'spoiler_text']));
26-
const sensitive = useAppSelector((state) => state.getIn(['compose', 'sensitive']));
27-
const spoiler = useAppSelector((state) => state.getIn(['compose', 'spoiler']));
28-
const mediaCount = useAppSelector((state) => state.getIn(['compose', 'media_attachments']).size);
24+
const spoilersAlwaysOn = useAppSelector((state) => state.local_settings.getIn(['always_show_spoilers_field']));
25+
const spoilerText = useAppSelector((state) => state.compose.get('spoiler_text'));
26+
const sensitive = useAppSelector((state) => state.compose.get('sensitive'));
27+
const spoiler = useAppSelector((state) => state.compose.get('spoiler'));
28+
const mediaCount = useAppSelector((state) => state.compose.get('media_attachments').size);
2929
const disabled = spoilersAlwaysOn ? (spoilerText && spoilerText.length > 0) : spoiler;
3030

3131
const active = sensitive || (spoilersAlwaysOn && spoilerText && spoilerText.length > 0);

app/javascript/flavours/glitch/features/compose/components/upload.jsx

-81
This file was deleted.
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,130 @@
1+
import { useCallback } from 'react';
2+
3+
import { FormattedMessage } from 'react-intl';
4+
5+
import classNames from 'classnames';
6+
7+
import { useSortable } from '@dnd-kit/sortable';
8+
import { CSS } from '@dnd-kit/utilities';
9+
10+
import CloseIcon from '@/material-icons/400-20px/close.svg?react';
11+
import EditIcon from '@/material-icons/400-24px/edit.svg?react';
12+
import WarningIcon from '@/material-icons/400-24px/warning.svg?react';
13+
import {
14+
undoUploadCompose,
15+
initMediaEditModal,
16+
} from 'flavours/glitch/actions/compose';
17+
import { Blurhash } from 'flavours/glitch/components/blurhash';
18+
import { Icon } from 'flavours/glitch/components/icon';
19+
import type { MediaAttachment } from 'flavours/glitch/models/media_attachment';
20+
import { useAppDispatch, useAppSelector } from 'flavours/glitch/store';
21+
22+
export const Upload: React.FC<{
23+
id: string;
24+
dragging?: boolean;
25+
overlay?: boolean;
26+
tall?: boolean;
27+
wide?: boolean;
28+
}> = ({ id, dragging, overlay, tall, wide }) => {
29+
const dispatch = useAppDispatch();
30+
const media = useAppSelector(
31+
(state) =>
32+
state.compose // eslint-disable-line @typescript-eslint/no-unsafe-call
33+
.get('media_attachments') // eslint-disable-line @typescript-eslint/no-unsafe-member-access
34+
.find((item: MediaAttachment) => item.get('id') === id) as // eslint-disable-line @typescript-eslint/no-unsafe-member-access
35+
| MediaAttachment
36+
| undefined,
37+
);
38+
const sensitive = useAppSelector(
39+
(state) => state.compose.get('sensitive') as boolean, // eslint-disable-line @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access
40+
);
41+
42+
const handleUndoClick = useCallback(() => {
43+
dispatch(undoUploadCompose(id));
44+
}, [dispatch, id]);
45+
46+
const handleFocalPointClick = useCallback(() => {
47+
dispatch(initMediaEditModal(id));
48+
}, [dispatch, id]);
49+
50+
const { attributes, listeners, setNodeRef, transform, transition } =
51+
useSortable({ id });
52+
53+
if (!media) {
54+
return null;
55+
}
56+
57+
const focusX = media.getIn(['meta', 'focus', 'x']) as number;
58+
const focusY = media.getIn(['meta', 'focus', 'y']) as number;
59+
const x = (focusX / 2 + 0.5) * 100;
60+
const y = (focusY / -2 + 0.5) * 100;
61+
const missingDescription =
62+
((media.get('description') as string | undefined) ?? '').length === 0;
63+
64+
const style = {
65+
transform: CSS.Transform.toString(transform),
66+
transition,
67+
};
68+
69+
return (
70+
<div
71+
className={classNames('compose-form__upload media-gallery__item', {
72+
dragging,
73+
overlay,
74+
'media-gallery__item--tall': tall,
75+
'media-gallery__item--wide': wide,
76+
})}
77+
ref={setNodeRef}
78+
style={style}
79+
{...attributes}
80+
{...listeners}
81+
>
82+
<div
83+
className='compose-form__upload__thumbnail'
84+
style={{
85+
backgroundImage: !sensitive
86+
? `url(${media.get('preview_url') as string})`
87+
: undefined,
88+
backgroundPosition: `${x}% ${y}%`,
89+
}}
90+
>
91+
{sensitive && (
92+
<Blurhash
93+
hash={media.get('blurhash') as string}
94+
className='compose-form__upload__preview'
95+
/>
96+
)}
97+
98+
<div className='compose-form__upload__actions'>
99+
<button
100+
type='button'
101+
className='icon-button compose-form__upload__delete'
102+
onClick={handleUndoClick}
103+
>
104+
<Icon id='close' icon={CloseIcon} />
105+
</button>
106+
<button
107+
type='button'
108+
className='icon-button'
109+
onClick={handleFocalPointClick}
110+
>
111+
<Icon id='edit' icon={EditIcon} />{' '}
112+
<FormattedMessage id='upload_form.edit' defaultMessage='Edit' />
113+
</button>
114+
</div>
115+
116+
<div className='compose-form__upload__warning'>
117+
<button
118+
type='button'
119+
className={classNames('icon-button', {
120+
active: missingDescription,
121+
})}
122+
onClick={handleFocalPointClick}
123+
>
124+
{missingDescription && <Icon id='warning' icon={WarningIcon} />} ALT
125+
</button>
126+
</div>
127+
</div>
128+
</div>
129+
);
130+
};

app/javascript/flavours/glitch/features/compose/components/upload_form.jsx

-56
This file was deleted.

0 commit comments

Comments
 (0)