diff options
| author |  tobi <31960611+tsmethurst@users.noreply.github.com> | 2024-07-08 15:47:03 +0200 |
|---|---|---|
| committer |  GitHub <noreply@github.com> | 2024-07-08 15:47:03 +0200 |
| commit | d70f4e166dd9ce2f11a6ac2d7a2e500515657041 (patch) | |
| tree | 256f2a4423742a41adceb00dbec0cd56c568e908 /web/source/settings/views/user/profile.tsx | |
| parent | [chore]: Bump github.com/minio/minio-go/v7 from 7.0.72 to 7.0.73 (#3083) (diff) | |
| download | gotosocial-d70f4e166dd9ce2f11a6ac2d7a2e500515657041.tar.xz | |
[feature/frontend] Allow setting alt-text for avatar + header (#3086)
Diffstat (limited to 'web/source/settings/views/user/profile.tsx')
| -rw-r--r-- | web/source/settings/views/user/profile.tsx | 44 |
1 files changed, 29 insertions, 15 deletions
diff --git a/web/source/settings/views/user/profile.tsx b/web/source/settings/views/user/profile.tsx index 17827ce9e..f4088b353 100644 --- a/web/source/settings/views/user/profile.tsx +++ b/web/source/settings/views/user/profile.tsx @@ -93,7 +93,9 @@ function UserProfileForm({ data: profile }) { const form = { avatar: useFileInput("avatar", { withPreview: true }), + avatarDescription: useTextInput("avatar_description", { source: profile }), header: useFileInput("header", { withPreview: true }), + headerDescription: useTextInput("header_description", { source: profile }), displayName: useTextInput("display_name", { source: profile }), note: useTextInput("note", { source: profile, valueSelector: (p) => p.source?.note }), bot: useBoolInput("bot", { source: profile }), @@ -131,21 +133,33 @@ function UserProfileForm({ data: profile }) { username={profile.username} role={profile.role} /> - <div className="files"> - <div> - <FileInput - label="Header" - field={form.header} - accept="image/*" - /> - </div> - <div> - <FileInput - label="Avatar" - field={form.avatar} - accept="image/*" - /> - </div> + + <div className="file-input-with-image-description"> + <FileInput + label="Header" + field={form.header} + accept="image/png, image/jpeg, image/webp, image/gif" + /> + <TextInput + field={form.headerDescription} + label="Header image description" + placeholder="A green field with pink flowers." + autoCapitalize="sentences" + /> + </div> + + <div className="file-input-with-image-description"> + <FileInput + label="Avatar (1:1 images look best)" + field={form.avatar} + accept="image/png, image/jpeg, image/webp, image/gif" + /> + <TextInput + field={form.avatarDescription} + label="Avatar image description" + placeholder="A cute drawing of a smiling sloth." + autoCapitalize="sentences" + /> </div> <div className="theme"> |