1
1
mirror of https://github.com/usememos/memos.git synced 2024-12-24 11:44:44 +03:00

chore: update setting dialog style ()

This commit is contained in:
boojack 2023-02-19 21:12:16 +08:00 committed by GitHub
parent ffe1073292
commit b145d8b8a2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 40 additions and 17 deletions

View File

@ -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>

View File

@ -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 />

View File

@ -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;

View File

@ -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",