mirror of
https://github.com/usememos/memos.git
synced 2024-12-24 11:44:44 +03:00
chore: update setting dialog style (#1125)
This commit is contained in:
parent
ffe1073292
commit
b145d8b8a2
web/src
@ -1,5 +1,5 @@
|
|||||||
import { useEffect, useState } from "react";
|
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 * as api from "../helpers/api";
|
||||||
import { UNKNOWN_ID } from "../helpers/consts";
|
import { UNKNOWN_ID } from "../helpers/consts";
|
||||||
import { absolutifyLink } from "../helpers/utils";
|
import { absolutifyLink } from "../helpers/utils";
|
||||||
@ -207,13 +207,13 @@ const CreateIdentityProviderDialog: React.FC<Props> = (props: Props) => {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<div className="dialog-header-container !w-96">
|
<div className="dialog-header-container">
|
||||||
<p className="title-text">{isCreating ? "Create SSO" : "Update SSO"}</p>
|
<p className="title-text">{isCreating ? "Create SSO" : "Update SSO"}</p>
|
||||||
<button className="btn close-btn" onClick={handleCloseBtnClick}>
|
<button className="btn close-btn" onClick={handleCloseBtnClick}>
|
||||||
<Icon.X />
|
<Icon.X />
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div className="dialog-content-container">
|
<div className="dialog-content-container w-full max-w-[24rem]">
|
||||||
{isCreating && (
|
{isCreating && (
|
||||||
<>
|
<>
|
||||||
<Typography className="!mb-1" level="body2">
|
<Typography className="!mb-1" level="body2">
|
||||||
@ -276,9 +276,10 @@ const CreateIdentityProviderDialog: React.FC<Props> = (props: Props) => {
|
|||||||
{type === "OAUTH2" && (
|
{type === "OAUTH2" && (
|
||||||
<>
|
<>
|
||||||
{isCreating && (
|
{isCreating && (
|
||||||
<Alert variant="outlined" color="neutral" className="w-full mb-2">
|
<p className="border rounded-md p-2 text-sm w-full mb-2 break-all">
|
||||||
Redirect URL: {absolutifyLink("/auth/callback")}
|
Redirect URL: {absolutifyLink("/auth/callback")}{" "}
|
||||||
</Alert>
|
RedirectRedirectRedirectRedirectRedirectRedirectRedirectRedirectRedirectRedirectRedirect
|
||||||
|
</p>
|
||||||
)}
|
)}
|
||||||
<Typography className="!mb-1" level="body2">
|
<Typography className="!mb-1" level="body2">
|
||||||
Client ID<span className="text-red-600">*</span>
|
Client ID<span className="text-red-600">*</span>
|
||||||
|
@ -1,3 +1,4 @@
|
|||||||
|
import { Option, Select } from "@mui/joy";
|
||||||
import { useState } from "react";
|
import { useState } from "react";
|
||||||
import { useTranslation } from "react-i18next";
|
import { useTranslation } from "react-i18next";
|
||||||
import { useGlobalStore, useUserStore } from "../store/module";
|
import { useGlobalStore, useUserStore } from "../store/module";
|
||||||
@ -14,7 +15,7 @@ import "../less/setting-dialog.less";
|
|||||||
|
|
||||||
type Props = DialogProps;
|
type Props = DialogProps;
|
||||||
|
|
||||||
type SettingSection = "my-account" | "preferences" | "member" | "system" | "storage" | "sso";
|
type SettingSection = "my-account" | "preference" | "member" | "system" | "storage" | "sso";
|
||||||
|
|
||||||
interface State {
|
interface State {
|
||||||
selectedSection: SettingSection;
|
selectedSection: SettingSection;
|
||||||
@ -29,6 +30,7 @@ const SettingDialog: React.FC<Props> = (props: Props) => {
|
|||||||
const [state, setState] = useState<State>({
|
const [state, setState] = useState<State>({
|
||||||
selectedSection: "my-account",
|
selectedSection: "my-account",
|
||||||
});
|
});
|
||||||
|
const isHost = user?.role === "HOST";
|
||||||
|
|
||||||
const handleSectionSelectorItemClick = (settingSection: SettingSection) => {
|
const handleSectionSelectorItemClick = (settingSection: SettingSection) => {
|
||||||
setState({
|
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 (
|
return (
|
||||||
<div className="dialog-content-container">
|
<div className="dialog-content-container">
|
||||||
<button className="btn close-btn" onClick={destroy}>
|
<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")}
|
<Icon.User className="w-4 h-auto mr-2 opacity-80" /> {t("setting.my-account")}
|
||||||
</span>
|
</span>
|
||||||
<span
|
<span
|
||||||
onClick={() => handleSectionSelectorItemClick("preferences")}
|
onClick={() => handleSectionSelectorItemClick("preference")}
|
||||||
className={`section-item ${state.selectedSection === "preferences" ? "selected" : ""}`}
|
className={`section-item ${state.selectedSection === "preference" ? "selected" : ""}`}
|
||||||
>
|
>
|
||||||
<Icon.Cog className="w-4 h-auto mr-2 opacity-80" /> {t("setting.preference")}
|
<Icon.Cog className="w-4 h-auto mr-2 opacity-80" /> {t("setting.preference")}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
{user?.role === "HOST" ? (
|
{isHost ? (
|
||||||
<>
|
<>
|
||||||
<span className="section-title">{t("common.admin")}</span>
|
<span className="section-title">{t("common.admin")}</span>
|
||||||
<div className="section-items-container">
|
<div className="section-items-container">
|
||||||
@ -86,7 +96,7 @@ const SettingDialog: React.FC<Props> = (props: Props) => {
|
|||||||
onClick={() => handleSectionSelectorItemClick("sso")}
|
onClick={() => handleSectionSelectorItemClick("sso")}
|
||||||
className={`section-item ${state.selectedSection === "sso" ? "selected" : ""}`}
|
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>
|
</span>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
@ -94,9 +104,20 @@ const SettingDialog: React.FC<Props> = (props: Props) => {
|
|||||||
) : null}
|
) : null}
|
||||||
</div>
|
</div>
|
||||||
<div className="section-content-container">
|
<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" ? (
|
{state.selectedSection === "my-account" ? (
|
||||||
<MyAccountSection />
|
<MyAccountSection />
|
||||||
) : state.selectedSection === "preferences" ? (
|
) : state.selectedSection === "preference" ? (
|
||||||
<PreferencesSection />
|
<PreferencesSection />
|
||||||
) : state.selectedSection === "member" ? (
|
) : state.selectedSection === "member" ? (
|
||||||
<MemberSection />
|
<MemberSection />
|
||||||
|
@ -2,17 +2,17 @@
|
|||||||
@apply px-4;
|
@apply px-4;
|
||||||
|
|
||||||
> .dialog-container {
|
> .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 {
|
> .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 {
|
> .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;
|
@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 {
|
> .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 {
|
> .section-title {
|
||||||
@apply text-sm mt-2 sm:mt-4 first:mt-4 mb-1 font-mono text-gray-400;
|
@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 {
|
> .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 {
|
> .section-container {
|
||||||
@apply flex flex-col justify-start items-start w-full my-2;
|
@apply flex flex-col justify-start items-start w-full my-2;
|
||||||
|
@ -152,10 +152,11 @@
|
|||||||
"setting": {
|
"setting": {
|
||||||
"my-account": "My Account",
|
"my-account": "My Account",
|
||||||
"preference": "Preference",
|
"preference": "Preference",
|
||||||
"storage": "Storage",
|
|
||||||
"member": "Member",
|
"member": "Member",
|
||||||
"member-list": "Member list",
|
"member-list": "Member list",
|
||||||
"system": "System",
|
"system": "System",
|
||||||
|
"storage": "Storage",
|
||||||
|
"sso": "SSO",
|
||||||
"account-section": {
|
"account-section": {
|
||||||
"title": "Account Information",
|
"title": "Account Information",
|
||||||
"update-information": "Update Information",
|
"update-information": "Update Information",
|
||||||
|
Loading…
Reference in New Issue
Block a user