mirror of
https://github.com/usememos/memos.git
synced 2025-06-05 22:09:59 +02:00
feat: customize system profile (#828)
This commit is contained in:
@ -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")}
|
||||
|
Reference in New Issue
Block a user