aiden
/
memos
mirror of https://github.com/usememos/memos
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

chore: update setting page styles (#1863)

Browse Source 
* chore: update setting page styles

* chore: update
pull/1864/head
boojack 2 years ago committed by GitHub
parent 6a78887f1d
commit 6b3748e2a3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 62 additions and 143 deletions
Show Stats Download Patch File Download Diff File

5
web/src/components/Header.tsx
Unescape Escape View File

@ -134,10 +134,11 @@ const Header = () => {
</NavLink> </NavLink>
<div className="pr-3 pl-1 w-full"> <div className="pr-3 pl-1 w-full">
<button <button
className="mt-2 w-full py-3 rounded-full flex flex-row justify-center items-center bg-green-600 font-medium text-white dark:opacity-80 hover:shadow hover:opacity-90" className="mt-2 w-full py-3 rounded-full flex flex-row justify-center items-center bg-green-600 text-white dark:opacity-80 hover:shadow hover:opacity-90"
onClick={() => showMemoEditorDialog()} onClick={() => showMemoEditorDialog()}
> >
<Icon.Edit3 className="w-4 h-auto mr-1" /> New <Icon.Edit3 className="w-4 h-auto mr-1" />
{t("common.new")}
</button> </button>
</div> </div>
<UpgradeVersionView /> <UpgradeVersionView />

27
web/src/components/Settings/MyAccountSection.tsx
Unescape Escape View File

@ -1,3 +1,4 @@
import { Button, Input, Textarea } from "@mui/joy";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { useUserStore } from "@/store/module"; import { useUserStore } from "@/store/module";
import { showCommonDialog } from "../Dialog/CommonDialog"; import { showCommonDialog } from "../Dialog/CommonDialog";
@ -5,7 +6,6 @@ import showChangePasswordDialog from "../ChangePasswordDialog";
import Icon from "../Icon"; import Icon from "../Icon";
import showUpdateAccountDialog from "../UpdateAccountDialog"; import showUpdateAccountDialog from "../UpdateAccountDialog";
import UserAvatar from "../UserAvatar"; import UserAvatar from "../UserAvatar";
import "@/less/settings/my-account-section.less";
const MyAccountSection = () => { const MyAccountSection = () => {
const { t } = useTranslation(); const { t } = useTranslation();
@ -47,18 +47,23 @@ const MyAccountSection = () => {
</button> </button>
</div> </div>
</div> </div>
<div className="section-container openapi-section-container"> <div className="section-container openapi-section-container mt-6">
<p className="title-text">{t("setting.account-section.openapi-title")}</p> <p className="title-text">{t("setting.account-section.openapi-title")}</p>
<p className="value-text">{openAPIRoute}</p> <Input className="w-full mb-3" value={openAPIRoute} readOnly />
<span className="btn-danger mt-2" onClick={handleResetOpenIdBtnClick}> <Button color="warning" className="mb-4" onClick={handleResetOpenIdBtnClick}>
{t("setting.account-section.reset-api")} <Icon.RefreshCw className="ml-2 h-4 w-4" /> {t("setting.account-section.reset-api")} <Icon.RefreshCw className="ml-2 h-4 w-4" />
</span> </Button>
<div className="usage-guide-container"> <Textarea
<pre>{`POST ${openAPIRoute}\nContent-type: application/json\n{\n "content": "${t("setting.account-section.openapi-sample-post", { className="w-full !font-mono !text-sm mt-4"
url: window.location.origin, value={`POST ${openAPIRoute}\nContent-type: application/json\n{\n "content": "${t(
interpolation: { escapeValue: false }, "setting.account-section.openapi-sample-post",
})}"\n}`}</pre> {
</div> url: window.location.origin,
interpolation: { escapeValue: false },
}
)}"\n}`}
readOnly
/>
</div> </div>
</> </>
); );

67
web/src/components/Settings/SystemSection.tsx
Unescape Escape View File

@ -33,10 +33,6 @@ const SystemSection = () => {
memoDisplayWithUpdatedTs: systemStatus.memoDisplayWithUpdatedTs, memoDisplayWithUpdatedTs: systemStatus.memoDisplayWithUpdatedTs,
}); });
const [telegramBotToken, setTelegramBotToken] = useState<string>(""); const [telegramBotToken, setTelegramBotToken] = useState<string>("");
const [openAIConfig, setOpenAIConfig] = useState<OpenAIConfig>({
key: "",
host: "",
});
useEffect(() => { useEffect(() => {
globalStore.fetchSystemStatus(); globalStore.fetchSystemStatus();
@ -44,11 +40,6 @@ const SystemSection = () => {
useEffect(() => { useEffect(() => {
api.getSystemSetting().then(({ data: { data: systemSettings } }) => { api.getSystemSetting().then(({ data: { data: systemSettings } }) => {
const openAIConfigSetting = systemSettings.find((setting) => setting.name === "openai-config");
if (openAIConfigSetting) {
setOpenAIConfig(JSON.parse(openAIConfigSetting.value));
}
const telegramBotSetting = systemSettings.find((setting) => setting.name === "telegram-bot-token"); const telegramBotSetting = systemSettings.find((setting) => setting.name === "telegram-bot-token");
if (telegramBotSetting) { if (telegramBotSetting) {
setTelegramBotToken(telegramBotSetting.value); setTelegramBotToken(telegramBotSetting.value);
@ -96,33 +87,6 @@ const SystemSection = () => {
toast.success(t("message.succeed-vacuum-database")); toast.success(t("message.succeed-vacuum-database"));
}; };
const handleOpenAIConfigKeyChanged = (value: string) => {
setOpenAIConfig({
...openAIConfig,
key: value,
});
};
const handleOpenAIConfigHostChanged = (value: string) => {
setOpenAIConfig({
...openAIConfig,
host: value,
});
};
const handleSaveOpenAIConfig = async () => {
try {
await api.upsertSystemSetting({
name: "openai-config",
value: JSON.stringify(openAIConfig),
});
} catch (error) {
console.error(error);
return;
}
toast.success("OpenAI Config updated");
};
const handleTelegramBotTokenChanged = (value: string) => { const handleTelegramBotTokenChanged = (value: string) => {
setTelegramBotToken(value); setTelegramBotToken(value);
}; };
@ -296,37 +260,6 @@ const SystemSection = () => {
onChange={(event) => handleTelegramBotTokenChanged(event.target.value)} onChange={(event) => handleTelegramBotTokenChanged(event.target.value)}
/> />
<Divider className="!mt-3 !my-4" /> <Divider className="!mt-3 !my-4" />
<div className="form-label">
<div className="flex flex-row items-center">
<span className="text-sm mr-1">{t("setting.system-section.openai-api-key")}</span>
<HelpButton hint={t("setting.system-section.openai-api-key-description")} url="https://platform.openai.com/account/api-keys" />
</div>
<Button onClick={handleSaveOpenAIConfig}>{t("common.save")}</Button>
</div>
<Input
className="w-full"
sx={{
fontFamily: "monospace",
fontSize: "14px",
}}
placeholder={t("setting.system-section.openai-api-key-placeholder")}
value={openAIConfig.key}
onChange={(event) => handleOpenAIConfigKeyChanged(event.target.value)}
/>
<div className="form-label mt-2">
<span className="normal-text">{t("setting.system-section.openai-api-host")}</span>
</div>
<Input
className="w-full"
sx={{
fontFamily: "monospace",
fontSize: "14px",
}}
placeholder={t("setting.system-section.openai-api-host-placeholder")}
value={openAIConfig.host}
onChange={(event) => handleOpenAIConfigHostChanged(event.target.value)}
/>
<Divider className="!mt-3 !my-4" />
<div className="form-label"> <div className="form-label">
<span className="normal-text">{t("setting.system-section.additional-style")}</span> <span className="normal-text">{t("setting.system-section.additional-style")}</span>
<Button onClick={handleSaveAdditionalStyle}>{t("common.save")}</Button> <Button onClick={handleSaveAdditionalStyle}>{t("common.save")}</Button>

4
web/src/components/UpdateLocalStorageDialog.tsx
Unescape Escape View File

@ -51,9 +51,7 @@ const UpdateLocalStorageDialog: React.FC<Props> = (props: Props) => {
<div className="dialog-content-container max-w-xs"> <div className="dialog-content-container max-w-xs">
<p className="text-sm break-words mb-1">{t("setting.storage-section.update-local-path-description")}</p> <p className="text-sm break-words mb-1">{t("setting.storage-section.update-local-path-description")}</p>
<div className="flex flex-row"> <div className="flex flex-row">
<p className="text-sm text-gray-400 mb-2 break-all"> <p className="text-sm text-gray-400 mb-2 break-all">e.g. {"assets/{publicid}"}</p>
{t("common.e.g")} {"assets/{publicid}"}
</p>
<HelpButton hint={t("common.learn-more")} url="https://usememos.com/docs/local-storage" /> <HelpButton hint={t("common.learn-more")} url="https://usememos.com/docs/local-storage" />
</div> </div>
<Input <Input

4
web/src/less/setting.less
Unescape Escape View File

@ -2,7 +2,7 @@
@apply flex flex-row justify-start items-start relative w-full h-full p-4 rounded-lg bg-white dark:bg-zinc-700 dark:text-gray-200 sm:gap-x-4; @apply flex flex-row justify-start items-start relative w-full h-full p-4 rounded-lg bg-white dark:bg-zinc-700 dark:text-gray-200 sm:gap-x-4;
> .section-selector-container { > .section-selector-container {
@apply hidden sm:flex flex-col justify-start items-start sm:w-40 h-auto sm:h-full shrink-0; @apply hidden sm:flex flex-col justify-start items-start sm:w-40 h-auto sm:h-full shrink-0 pb-2 border-r dark:border-r-zinc-600;
> .section-title { > .section-title {
@apply text-sm mt-2 sm:mt-4 first:mt-2 mb-1 font-mono text-gray-400; @apply text-sm mt-2 sm:mt-4 first:mt-2 mb-1 font-mono text-gray-400;
@ -26,7 +26,7 @@
} }
> .section-content-container { > .section-content-container {
@apply w-full sm:w-auto grow flex flex-col justify-start items-start h-full sm:h-128 overflow-y-scroll hide-scrollbar; @apply w-full sm:w-auto pl-2 grow flex flex-col justify-start items-start h-full sm:h-128 overflow-y-scroll hide-scrollbar;
> .section-container { > .section-container {
@apply flex flex-col justify-start items-start w-full; @apply flex flex-col justify-start items-start w-full;

17
web/src/less/settings/my-account-section.less
Unescape Escape View File

@ -1,17 +0,0 @@
.openapi-section-container {
> .value-text {
@apply w-full font-mono text-sm shadow-inner border dark:border-zinc-700 py-2 px-3 rounded leading-6 break-all whitespace-pre-wrap;
}
> .usage-guide-container {
@apply flex flex-col justify-start items-start mt-2 w-full;
> .title-text {
@apply my-2 text-sm;
}
> pre {
@apply w-full bg-gray-100 dark:bg-zinc-700 shadow-inner py-2 px-3 text-sm rounded font-mono break-all whitespace-pre-wrap;
}
}
}

2
web/src/locales/en.json
Unescape Escape View File

@ -59,8 +59,8 @@
"name": "Name", "name": "Name",
"visibility": "Visibility", "visibility": "Visibility",
"learn-more": "Learn more", "learn-more": "Learn more",
"e.g": "e.g.",
"beta": "Beta", "beta": "Beta",
"new": "New",
"dialog": { "dialog": {
"error": "Error", "error": "Error",
"help": "Help", "help": "Help",

77
web/src/locales/zh-Hans.json
Unescape Escape View File

@ -1,41 +1,4 @@
{ {
"about": {
"about-memos": "关于Memos",
"memos-description": "Memos是一个基于网页的笔记应用程序，您可以使用它来编写、组织和共享笔记",
"no-server-description": "没有为此服务器配置描述。",
"other-projects": "其他的项目",
"powered-by": "Powered by"
},
"amount-text": {
"day_one": "DAY",
"day_other": "DAYS",
"memo_one": "MEMO",
"memo_other": "MEMOS",
"tag_one": "TAG",
"tag_other": "TAGS"
},
"archived": {
"archived-memos": "已归档的备忘录",
"fetching-data": "请求数据中...",
"no-archived-memos": "没有归档的备忘录"
},
"ask-ai": {
"go-to-settings": "前往设置",
"not-enabled": "您尚未设置 OpenAI API 密钥。",
"placeholder": "随便问",
"title": "问 AI",
"default-message-group-title": "默认会话",
"create-message-group-title": "新建会话",
"label-message-group-name-title": "会话名称"
},
"auth": {
"host-tip": "你正在注册为管理员用户账号。",
"new-password": "新密码",
"not-host-tip": "如果你没有账号，请联系站点管理员",
"repeat-new-password": "重复新密码",
"signup-as-host": "注册为管理员"
},
"common": { "common": {
"about": "关于", "about": "关于",
"admin": "管理", "admin": "管理",
@ -56,7 +19,6 @@
"daily-review": "每日回顾", "daily-review": "每日回顾",
"database": "数据库", "database": "数据库",
"delete": "删除", "delete": "删除",
"e.g": "例如",
"edit": "编辑", "edit": "编辑",
"email": "邮箱", "email": "邮箱",
"expand": "展开", "expand": "展开",
@ -103,7 +65,44 @@
"vacuum": "清理未使用资源", "vacuum": "清理未使用资源",
"version": "版本", "version": "版本",
"visibility": "可见性", "visibility": "可见性",
"yourself": "你自己" "yourself": "你自己",
"new": "新建"
},
"about": {
"about-memos": "关于Memos",
"memos-description": "Memos是一个基于网页的笔记应用程序，您可以使用它来编写、组织和共享笔记",
"no-server-description": "没有为此服务器配置描述。",
"other-projects": "其他的项目",
"powered-by": "Powered by"
},
"amount-text": {
"day_one": "DAY",
"day_other": "DAYS",
"memo_one": "MEMO",
"memo_other": "MEMOS",
"tag_one": "TAG",
"tag_other": "TAGS"
},
"archived": {
"archived-memos": "已归档的备忘录",
"fetching-data": "请求数据中...",
"no-archived-memos": "没有归档的备忘录"
},
"ask-ai": {
"go-to-settings": "前往设置",
"not-enabled": "您尚未设置 OpenAI API 密钥。",
"placeholder": "随便问",
"title": "问 AI",
"default-message-group-title": "默认会话",
"create-message-group-title": "新建会话",
"label-message-group-name-title": "会话名称"
},
"auth": {
"host-tip": "你正在注册为管理员用户账号。",
"new-password": "新密码",
"not-host-tip": "如果你没有账号，请联系站点管理员",
"repeat-new-password": "重复新密码",
"signup-as-host": "注册为管理员"
}, },
"daily-review": { "daily-review": {
"no-memos": "哎呀，空无一物。", "no-memos": "哎呀，空无一物。",

2
web/src/pages/Setting.tsx
Unescape Escape View File

@ -96,7 +96,7 @@ const Setting = () => {
</div> </div>
<div className="section-content-container"> <div className="section-content-container">
<Select <Select
className="block sm:!hidden" className="block mb-2 sm:!hidden"
value={state.selectedSection} value={state.selectedSection}
onChange={(_, value) => handleSectionSelectorItemClick(value as SettingSection)} onChange={(_, value) => handleSectionSelectorItemClick(value as SettingSection)}
> >

Write Preview
Loading…
Cancel
Save