mirror of
https://github.com/usememos/memos.git
synced 2024-12-19 00:51:30 +03:00
chore: update setting dialog style (#1125)
This commit is contained in:
boojack
GitHub
parent
ffe1073292
commit
b145d8b8a2
@ -1,5 +1,5 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { Alert, Button, Divider, Input, Radio, RadioGroup, Typography } from "@mui/joy";
|
||||
import { Button, Divider, Input, Radio, RadioGroup, Typography } from "@mui/joy";
|
||||
import * as api from "../helpers/api";
|
||||
import { UNKNOWN_ID } from "../helpers/consts";
|
||||
import { absolutifyLink } from "../helpers/utils";
|
||||
@ -207,13 +207,13 @@ const CreateIdentityProviderDialog: React.FC<Props> = (props: Props) => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="dialog-header-container !w-96">
|
||||
<div className="dialog-header-container">
|
||||
<p className="title-text">{isCreating ? "Create SSO" : "Update SSO"}</p>
|
||||
<button className="btn close-btn" onClick={handleCloseBtnClick}>
|
||||
<Icon.X />
|
||||
</button>
|
||||
</div>
|
||||
<div className="dialog-content-container">
|
||||
<div className="dialog-content-container w-full max-w-[24rem]">
|
||||
{isCreating && (
|
||||
<>
|
||||
<Typography className="!mb-1" level="body2">
|
||||
@ -276,9 +276,10 @@ const CreateIdentityProviderDialog: React.FC<Props> = (props: Props) => {
|
||||
{type === "OAUTH2" && (
|
||||
<>
|
||||
{isCreating && (
|
||||
<Alert variant="outlined" color="neutral" className="w-full mb-2">
|
||||
Redirect URL: {absolutifyLink("/auth/callback")}
|
||||
</Alert>
|
||||
<p className="border rounded-md p-2 text-sm w-full mb-2 break-all">
|
||||
Redirect URL: {absolutifyLink("/auth/callback")}{" "}
|
||||
RedirectRedirectRedirectRedirectRedirectRedirectRedirectRedirectRedirectRedirectRedirect
|
||||
</p>
|
||||
)}
|
||||
<Typography className="!mb-1" level="body2">
|
||||
Client ID<span className="text-red-600">*</span>
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
import { Option, Select } from "@mui/joy";
|
||||
import { useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useGlobalStore, useUserStore } from "../store/module";
|
||||
@ -14,7 +15,7 @@ import "../less/setting-dialog.less";
|
||||
|
||||
type Props = DialogProps;
|
||||
|
||||
type SettingSection = "my-account" | "preferences" | "member" | "system" | "storage" | "sso";
|
||||
type SettingSection = "my-account" | "preference" | "member" | "system" | "storage" | "sso";
|
||||
|
||||
interface State {
|
||||
selectedSection: SettingSection;
|
||||
@ -29,6 +30,7 @@ const SettingDialog: React.FC<Props> = (props: Props) => {
|
||||
const [state, setState] = useState<State>({
|
||||
selectedSection: "my-account",
|
||||
});
|
||||
const isHost = user?.role === "HOST";
|
||||
|
||||
const handleSectionSelectorItemClick = (settingSection: SettingSection) => {
|
||||
setState({
|
||||
@ -36,6 +38,14 @@ const SettingDialog: React.FC<Props> = (props: Props) => {
|
||||
});
|
||||
};
|
||||
|
||||
const getSettingSectionList = () => {
|
||||
let settingList: SettingSection[] = ["my-account", "preference"];
|
||||
if (isHost) {
|
||||
settingList = settingList.concat(["member", "system", "storage", "sso"]);
|
||||
}
|
||||
return settingList;
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="dialog-content-container">
|
||||
<button className="btn close-btn" onClick={destroy}>
|
||||
@ -51,13 +61,13 @@ const SettingDialog: React.FC<Props> = (props: Props) => {
|
||||
<Icon.User className="w-4 h-auto mr-2 opacity-80" /> {t("setting.my-account")}
|
||||
</span>
|
||||
<span
|
||||
onClick={() => handleSectionSelectorItemClick("preferences")}
|
||||
className={`section-item ${state.selectedSection === "preferences" ? "selected" : ""}`}
|
||||
onClick={() => handleSectionSelectorItemClick("preference")}
|
||||
className={`section-item ${state.selectedSection === "preference" ? "selected" : ""}`}
|
||||
>
|
||||
<Icon.Cog className="w-4 h-auto mr-2 opacity-80" /> {t("setting.preference")}
|
||||
</span>
|
||||
</div>
|
||||
{user?.role === "HOST" ? (
|
||||
{isHost ? (
|
||||
<>
|
||||
<span className="section-title">{t("common.admin")}</span>
|
||||
<div className="section-items-container">
|
||||
@ -86,7 +96,7 @@ const SettingDialog: React.FC<Props> = (props: Props) => {
|
||||
onClick={() => handleSectionSelectorItemClick("sso")}
|
||||
className={`section-item ${state.selectedSection === "sso" ? "selected" : ""}`}
|
||||
>
|
||||
<Icon.Key className="w-4 h-auto mr-2 opacity-80" /> SSO <BetaBadge />
|
||||
<Icon.Key className="w-4 h-auto mr-2 opacity-80" /> {t("setting.sso")} <BetaBadge />
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
@ -94,9 +104,20 @@ const SettingDialog: React.FC<Props> = (props: Props) => {
|
||||
) : null}
|
||||
</div>
|
||||
<div className="section-content-container">
|
||||
<Select
|
||||
className="block sm:!hidden"
|
||||
value={state.selectedSection}
|
||||
onChange={(_, value) => handleSectionSelectorItemClick(value as SettingSection)}
|
||||
>
|
||||
{getSettingSectionList().map((settingSection) => (
|
||||
<Option key={settingSection} value={settingSection}>
|
||||
{t(`setting.${settingSection}`)}
|
||||
</Option>
|
||||
))}
|
||||
</Select>
|
||||
{state.selectedSection === "my-account" ? (
|
||||
<MyAccountSection />
|
||||
) : state.selectedSection === "preferences" ? (
|
||||
) : state.selectedSection === "preference" ? (
|
||||
<PreferencesSection />
|
||||
) : state.selectedSection === "member" ? (
|
||||
<MemberSection />
|
||||
|
||||
@ -2,17 +2,17 @@
|
||||
@apply px-4;
|
||||
|
||||
> .dialog-container {
|
||||
@apply w-180 max-w-full mb-8 p-0;
|
||||
@apply w-180 max-w-full h-full sm:h-auto mb-8 p-0;
|
||||
|
||||
> .dialog-content-container {
|
||||
@apply flex flex-col sm:flex-row justify-start items-start relative w-full overflow-y-scroll p-0 hide-scrollbar;
|
||||
@apply flex flex-row justify-start items-start relative w-full h-full overflow-y-scroll p-0 hide-scrollbar;
|
||||
|
||||
> .close-btn {
|
||||
@apply z-1 flex flex-col justify-center items-center absolute top-4 right-4 w-6 h-6 rounded hover:bg-gray-200 dark:hover:bg-zinc-700 hover:shadow;
|
||||
}
|
||||
|
||||
> .section-selector-container {
|
||||
@apply w-full sm:w-44 h-auto sm:h-full shrink-0 rounded-t-lg sm:rounded-none sm:rounded-l-lg p-4 bg-gray-100 dark:bg-zinc-700 flex flex-col justify-start items-start;
|
||||
@apply hidden sm:flex flex-col justify-start items-start sm:w-44 h-auto sm:h-full shrink-0 rounded-t-lg sm:rounded-none sm:rounded-l-lg p-4 bg-gray-100 dark:bg-zinc-700;
|
||||
|
||||
> .section-title {
|
||||
@apply text-sm mt-2 sm:mt-4 first:mt-4 mb-1 font-mono text-gray-400;
|
||||
@ -36,7 +36,7 @@
|
||||
}
|
||||
|
||||
> .section-content-container {
|
||||
@apply w-full sm:w-auto p-4 sm:px-6 grow flex flex-col justify-start items-start h-128 overflow-y-scroll hide-scrollbar;
|
||||
@apply w-full sm:w-auto p-4 sm:px-6 grow flex flex-col justify-start items-start h-full sm:h-128 overflow-y-scroll hide-scrollbar;
|
||||
|
||||
> .section-container {
|
||||
@apply flex flex-col justify-start items-start w-full my-2;
|
||||
|
||||
@ -152,10 +152,11 @@
|
||||
"setting": {
|
||||
"my-account": "My Account",
|
||||
"preference": "Preference",
|
||||
"storage": "Storage",
|
||||
"member": "Member",
|
||||
"member-list": "Member list",
|
||||
"system": "System",
|
||||
"storage": "Storage",
|
||||
"sso": "SSO",
|
||||
"account-section": {
|
||||
"title": "Account Information",
|
||||
"update-information": "Update Information",
|
||||
|
||||
Loading…
Reference in New Issue
Block a user