feat(web): attach images with a file picker, not just paste and drop - #18
feat(web): attach images with a file picker, not just paste and drop#18Antisophy wants to merge 1 commit into
Conversation
eb87eb0 to
7cfbf7a
Compare
7cfbf7a to
ab2d5ae
Compare
|
@Antisophy Can you share a screenshot of what this looks like? Esp. on mobile (narrow screens). |
The composer accepts images by paste and by drag-and-drop, which between them cover a desktop and nothing else: a phone has no file drag source, and mobile browsers do not reliably put a photo on the DOM clipboard, so there is no way to attach an image there at all. Add an attach control backed by a hidden file input (accept="image/*", multiple), which is what reaches the system photo picker. The input is visually hidden rather than display:none, since only the former is reliably clickable from script across engines, and it is cleared after each selection so the same photo can be picked again after removing it. Also reject image types the agent APIs do not accept (anything outside JPEG, PNG, GIF and WebP) with a message in the composer, rather than attaching a file whose send then fails: a photo picked out of a file manager can still be HEIC even where the camera path transcodes to JPEG. The control is an upright paperclip drawn as an inline svg in the same idiom as the sidebar's icons: it takes its colour from the theme, renders identically everywhere, and its height comes from the same custom property that now sizes the send and stop buttons and the single-line textarea (the buttons center their labels with flex, the textarea's padding and line-height sum to the same height), so every control in the composer row matches exactly by construction rather than by font luck.
ab2d5ae to
50f46a2
Compare
|
Rebased onto current master and amended after checking the height-locked composer on a desktop browser: the pin applied only to the send button, so during a turn the stop button stood taller than send and the paperclip, and the send label sat high inside its box (a 36px box leaves 16px for the line, and the fonts browsers actually render need more than that). Send and stop are now pinned together with flex-centered labels, and the single-line textarea is sized from the same property (9px padding plus a 16px line-height plus 1px borders is 36px), so every control in the row shares one exact height regardless of font metrics. Description updated to match. The rebase also carried the attach test over to the new |
The composer accepts images by paste and by drag-and-drop, which between them cover a desktop and nothing else. A phone has no file drag source, and mobile browsers do not reliably put a photo on the DOM clipboard, so there is currently no way to attach an image from one at all.
This adds an attach control backed by a hidden file input (
accept="image/*",multiple), which is what reaches the system photo picker.Details worth knowing:
display: none, since only the former is reliably clickable from script across engines, and it is cleared after each selection so the same photo can be picked again after being removed.svgin the same idiom as the sidebar's icons: it takes its colour from the theme and renders identically everywhere, its viewBox is cropped to the artwork so the button is exactly as wide as the clip, and its height comes from the same custom property that now sizes the send and stop buttons and the single-line textarea (the buttons center their labels with flex; the textarea's padding and line-height sum to the same height), so every control in the composer row matches exactly by construction.Covered by unit tests for the picker wiring, preview creation, the unsupported-type refusal, and re-picking the same file twice.
One of five independent changes for using cydo on a phone: #15 (composer spacing), #16 (the page dragging sideways), #17 (hiding the composer while reading history), #19 (replaying a window of history, with older messages on demand). They touch different code and can merge in any order.