ColdBreeze/ColdBreeze-chat-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: setting overview

Browse Source
This commit is contained in:
Tristan Yang
2023-05-15 13:14:29 +08:00
parent c551909e86
commit 27204a1c11
10 changed files with 55 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/locales/en/setting.json
+8
View File
@@ -41,6 +41,8 @@
"delete_desc": "Are you sure want to delete this user?"
},
"overview": {
"title_feat": "Features",
"title_feat_desc": "you can toggle features as you need",
"name": "Server Name",
"desc": "Server Description",
"upload_desc": "Minimum size is 128x128, We recommend at least 512x512 for the server. Max size limited to 5M.",
@@ -80,6 +82,12 @@
"desc": "Toggle users' online status visible",
"enable": "Enable",
"disable": "Disable"
},
"chat_layout": {
"title": "Chat Layout",
"desc": "message self send on the left or right",
"left": "Left",
"self_right": "Self Right"
}
},
"license": {
public/locales/zh/setting.json
+8
View File
@@ -38,6 +38,8 @@
"private": "私密"
},
"overview": {
"title_feat": "特性开关",
"title_feat_desc": "根据你的需要开启或关闭特性",
"name": "服务器名",
"desc": "服务器描述",
"upload_desc": "图片最小 128x128，我们推荐上传 512x512 大小的图片，最大不要超过5M。",
@@ -74,6 +76,12 @@
"desc": "开启或关闭用户在线状态",
"enable": "开启",
"disable": "关闭"
},
"chat_layout": {
"title": "聊天布局",
"desc": "你可以决定自己发的消息居左还是居右",
"left": "居左",
"self_right": "居右"
}
},
"license": {
src/routes/setting/Overview/DarkMode.tsx
+3 -7
View File
@@ -2,6 +2,7 @@ import { useState } from 'react';
import { useTranslation } from 'react-i18next';
import Radio from '../../../common/component/styled/Radio';
import { Theme } from '../../../types/common';
import SettingBlock from './SettingBlock';
// type Props = {}
@@ -19,15 +20,10 @@ const DarkMode = () => {
} else {
const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
document.documentElement.classList.add(isDark ? "dark" : 'light');
}
};
return (
<div className="text-sm">
<p className="dark:text-gray-100 font-semibold">{t("overview.theme.title")}</p>
<p className="flex justify-between w-full text-gray-400 mb-2">
{t("overview.theme.desc")}
</p>
<SettingBlock title={t("overview.theme.title")} desc={t("overview.theme.desc")}>
<Radio
options={[t("overview.theme.auto"), t("overview.theme.dark"), t("overview.theme.light")]}
values={['auto', 'dark', 'light']}
@@ -36,7 +32,7 @@ const DarkMode = () => {
handleThemeToggle(v);
}}
/>
</div>
</SettingBlock>
);
};
src/routes/setting/Overview/FrontendURL.tsx
+4 -7
View File
@@ -1,10 +1,11 @@
// import React from 'react'
import { useTranslation } from 'react-i18next';
import { toast } from 'react-hot-toast';
import { useGetFrontendUrlQuery, useUpdateFrontendUrlMutation } from '../../../app/services/server';
import StyledInput from "../../../common/component/styled/Input";
import StyledButton from "../../../common/component/styled/Button";
import { ChangeEvent, useState, useEffect } from 'react';
import { toast } from 'react-hot-toast';
import SettingBlock from './SettingBlock';
// type Props = {}
const Index = () => {
@@ -32,16 +33,12 @@ const Index = () => {
}, [getUrlSuccess, data]);
// if(!fetch)
return (
<div className="text-sm">
<p className="dark:text-gray-100 font-semibold">{t("overview.url.title")}</p>
<p className="flex justify-between w-full text-gray-400">
{t("overview.url.desc")}
</p>
<SettingBlock title={t("overview.url.title")} desc={t("overview.url.desc")}>
<div className="flex items-center gap-4 mt-2">
<StyledInput placeholder='frontend url' value={url} onChange={handleChange} />
<StyledButton disabled={!url || isLoading} className='' onClick={handleUpdate}> {ct("action.update")}</StyledButton>
</div>
</div>
</SettingBlock>
);
};
src/routes/setting/Overview/Language.tsx
+3 -6
View File
@@ -1,6 +1,7 @@
// import React from 'react'
import { useTranslation } from 'react-i18next';
import StyledRadio from "../../../common/component/styled/Radio";
import SettingBlock from './SettingBlock';
// type Props = {}
@@ -10,11 +11,7 @@ const Index = () => {
i18n.changeLanguage(v);
};
return (
<div className="text-sm">
<p className="dark:text-gray-100 font-semibold">{t("overview.lang.title")}</p>
<p className="flex justify-between w-full text-gray-400 mb-2">
{t("overview.lang.desc")}
</p>
<SettingBlock title={t("overview.lang.title")} desc={t("overview.lang.desc")}>
<StyledRadio
options={[t("overview.lang.en"), t("overview.lang.zh"), t("overview.lang.jp"), t("overview.lang.tr")]}
values={["en", "zh", "jp", "tr"]}
@@ -25,7 +22,7 @@ const Index = () => {
handleGuestToggle(v);
}}
/>
</div>
</SettingBlock>
);
};
src/routes/setting/Overview/OnlineStatus.tsx
+3 -8
View File
@@ -5,6 +5,7 @@ import { useEffect } from 'react';
import { toast } from 'react-hot-toast';
import StyledRadio from "../../../common/component/styled/Radio";
import { useAppSelector } from '../../../app/store';
import SettingBlock from './SettingBlock';
// type Props = {}
const Index = () => {
@@ -24,20 +25,14 @@ const Index = () => {
};
// if (!loadSuccess) return null;
return (
<div className="text-sm">
<p className="dark:text-gray-100 font-semibold">{t("title")}</p>
<p className="flex justify-between w-full text-gray-400 mb-2">
<span className="txt">
{t("desc")}
</span>
</p>
<SettingBlock title={t("title")} desc={t('desc')} >
<StyledRadio
options={[t("enable"), t("disable")]}
values={["true", "false"]}
value={`${currStatus}`}
onChange={handleToggle}
/>
</div>
</SettingBlock>
);
};
src/routes/setting/Overview/Server.tsx
+1 -1
View File
@@ -78,7 +78,7 @@ const Index = () => {
</div>
)}
</div>
<div className="flex flex-col items-start gap-6 mb-16">
<div className="flex flex-col items-start gap-6 mb-3">
<div className="w-full flex flex-col items-start gap-2">
<Label className='dark:text-gray-100' htmlFor="name">{t("overview.name")}</Label>
<Input
src/routes/setting/Overview/SettingBlock.tsx
+21
View File
@@ -0,0 +1,21 @@
import React from 'react';
type Props = {
title: string,
desc: string,
children: React.ReactNode
}
const SettingBlock = ({ title, desc, children }: Props) => {
return (
<div className="text-sm">
<p className="text-gray-600 dark:text-gray-100 font-semibold">{title}</p>
<p className="flex justify-between w-full text-gray-400 mb-2 text-xs">
{desc}
</p>
{children}
</div>
);
};
export default SettingBlock;
src/routes/setting/Overview/language.tsx
+3 -6
View File
@@ -1,6 +1,7 @@
// import React from 'react'
import { useTranslation } from 'react-i18next';
import StyledRadio from "../../../common/component/styled/Radio";
import SettingBlock from './SettingBlock';
// type Props = {}
@@ -10,11 +11,7 @@ const Index = () => {
i18n.changeLanguage(v);
};
return (
<div className="text-sm">
<p className="dark:text-gray-100 font-semibold">{t("overview.lang.title")}</p>
<p className="flex justify-between w-full text-gray-400 mb-2">
{t("overview.lang.desc")}
</p>
<SettingBlock title={t("overview.lang.title")} desc={t("overview.lang.desc")}>
<StyledRadio
options={[t("overview.lang.en"), t("overview.lang.zh"), t("overview.lang.jp"), t("overview.lang.tr")]}
values={["en", "zh", "jp", "tr"]}
@@ -25,7 +22,7 @@ const Index = () => {
handleGuestToggle(v);
}}
/>
</div>
</SettingBlock>
);
};
src/routes/setting/Overview/server.tsx
+1 -1
View File
@@ -78,7 +78,7 @@ const Index = () => {
</div>
)}
</div>
<div className="flex flex-col items-start gap-6 mb-16">
<div className="flex flex-col items-start gap-6 mb-3">
<div className="w-full flex flex-col items-start gap-2">
<Label className='dark:text-gray-100' htmlFor="name">{t("overview.name")}</Label>
<Input