feat: customize system profile (#828)

This commit is contained in:
boojack
2022-12-22 19:48:44 +08:00
committed by GitHub
parent 72daa4e1d6
commit 7efa749c66
14 changed files with 171 additions and 141 deletions

View File

@ -5,6 +5,8 @@ import * as api from "../helpers/api";
import Icon from "./Icon";
import { generateDialog } from "./Dialog";
import toastHelper from "./Toast";
import LocaleSelect from "./LocaleSelect";
import AppearanceSelect from "./AppearanceSelect";
type Props = DialogProps;
@ -39,6 +41,33 @@ const UpdateCustomizedProfileDialog: React.FC<Props> = ({ destroy }: Props) => {
});
};
const handleDescriptionChanged = (e: React.ChangeEvent<HTMLInputElement>) => {
setState((state) => {
return {
...state,
description: e.target.value as string,
};
});
};
const handleLocaleSelectChange = (locale: Locale) => {
setState((state) => {
return {
...state,
locale: locale,
};
});
};
const handleAppearanceSelectChange = (appearance: Appearance) => {
setState((state) => {
return {
...state,
appearance: appearance,
};
});
};
const handleSaveBtnClick = async () => {
if (state.name === "" || state.iconUrl === "") {
toastHelper.error(t("message.fill-all"));
@ -61,13 +90,13 @@ const UpdateCustomizedProfileDialog: React.FC<Props> = ({ destroy }: Props) => {
return (
<>
<div className="dialog-header-container !w-64">
<div className="dialog-header-container">
<p className="title-text">{t("setting.system-section.customize-server.title")}</p>
<button className="btn close-btn" onClick={handleCloseBtnClick}>
<Icon.X />
</button>
</div>
<div className="dialog-content-container">
<div className="dialog-content-container !w-80">
<p className="text-sm mb-1">
{t("setting.system-section.server-name")}
<span className="text-sm text-gray-400 ml-1">({t("setting.system-section.customize-server.default")})</span>
@ -75,6 +104,12 @@ const UpdateCustomizedProfileDialog: React.FC<Props> = ({ destroy }: Props) => {
<input type="text" className="input-text" value={state.name} onChange={handleNameChanged} />
<p className="text-sm mb-1 mt-2">{t("setting.system-section.customize-server.icon-url")}</p>
<input type="text" className="input-text" value={state.iconUrl} onChange={handleIconUrlChanged} />
<p className="text-sm mb-1 mt-2">Description</p>
<input type="text" className="input-text" value={state.description} onChange={handleDescriptionChanged} />
<p className="text-sm mb-1 mt-2">Server locale</p>
<LocaleSelect className="w-full" value={state.locale} onChange={handleLocaleSelectChange} />
<p className="text-sm mb-1 mt-2">Server appearance</p>
<AppearanceSelect className="w-full" value={state.appearance} onChange={handleAppearanceSelectChange} />
<div className="mt-4 w-full flex flex-row justify-end items-center space-x-2">
<span className="btn-text" onClick={handleCloseBtnClick}>
{t("common.cancel")}