mirrors
/
gotosocial
mirror of
1
Fork 0
Code Issues Releases Activity

[chore/frontend] Present themes as dropdown instead of radio (#3244)

This commit is contained in:
tobi 2024-08-27 12:16:45 +02:00 committed by GitHub
parent 8a34e4c28f
commit 2db5a51582
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 27 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
web/source/settings/views/user/profile.tsx
View File

@ -17,14 +17,13 @@
along with this program. If not, see <http://www.gnu.org/licenses/>. along with this program. If not, see <http://www.gnu.org/licenses/>.
*/ */
import React from "react"; import React, { useMemo } from "react";
import { import {
useTextInput, useTextInput,
useFileInput, useFileInput,
useBoolInput, useBoolInput,
useFieldArrayInput, useFieldArrayInput,
useRadioInput
} from "../../lib/form"; } from "../../lib/form";
import useFormSubmit from "../../lib/form/submit"; import useFormSubmit from "../../lib/form/submit";
@ -35,7 +34,7 @@ import {
TextArea, TextArea,
FileInput, FileInput,
Checkbox, Checkbox,
RadioGroup Select
} from "../../components/form/inputs"; } from "../../components/form/inputs";
import FormWithData from "../../lib/form/form-with-data"; import FormWithData from "../../lib/form/form-with-data";
@ -81,16 +80,29 @@ function UserProfileForm({ data: profile }) {
// Parse out available theme options into nice format. // Parse out available theme options into nice format.
const { data: themes } = useAccountThemesQuery(); const { data: themes } = useAccountThemesQuery();
let themeOptions = { "": "Default" }; const themeOptions = useMemo(() => {
let themeOptions = [
<option key="" value="">
Default
</option>
];
themes?.forEach((theme) => { themes?.forEach((theme) => {
let key = theme.file_name; const value = theme.file_name;
let value = theme.title; let text = theme.title;
if (theme.description) { if (theme.description) {
value += " - " + theme.description; text += " - " + theme.description;
} }
themeOptions[key] = value; themeOptions.push(
<option key={value} value={value}>
{text}
</option>
);
}); });
return themeOptions;
}, [themes]);
const form = { const form = {
avatar: useFileInput("avatar", { withPreview: true }), avatar: useFileInput("avatar", { withPreview: true }),
avatarDescription: useTextInput("avatar_description", { source: profile }), avatarDescription: useTextInput("avatar_description", { source: profile }),
@ -108,10 +120,7 @@ function UserProfileForm({ data: profile }) {
length: instanceConfig.maxPinnedFields length: instanceConfig.maxPinnedFields
}), }),
customCSS: useTextInput("custom_css", { source: profile, nosubmit: !instanceConfig.allowCustomCSS }), customCSS: useTextInput("custom_css", { source: profile, nosubmit: !instanceConfig.allowCustomCSS }),
theme: useRadioInput("theme", { theme: useTextInput("theme", { source: profile }),
source: profile,
options: themeOptions,
}),
}; };
const [submitForm, result] = useFormSubmit(form, useUpdateCredentialsMutation(), { const [submitForm, result] = useFormSubmit(form, useUpdateCredentialsMutation(), {
@ -169,9 +178,10 @@ function UserProfileForm({ data: profile }) {
<br/> <br/>
<span>After choosing theme and saving, <a href={profile.url} target="_blank">open your profile</a> and refresh to see changes.</span> <span>After choosing theme and saving, <a href={profile.url} target="_blank">open your profile</a> and refresh to see changes.</span>
</div> </div>
<RadioGroup <Select
aria-labelledby="theme-label" aria-labelledby="theme-label"
field={form.theme} field={form.theme}
options={<>{themeOptions}</>}
/> />
</div> </div>
</div> </div>