From b145d8b8a25fa666cd186b9f9857a29e2425b75a Mon Sep 17 00:00:00 2001 From: boojack Date: Sun, 19 Feb 2023 21:12:16 +0800 Subject: [PATCH] chore: update setting dialog style (#1125) --- .../CreateIdentityProviderDialog.tsx | 13 ++++---- web/src/components/SettingDialog.tsx | 33 +++++++++++++++---- web/src/less/setting-dialog.less | 8 ++--- web/src/locales/en.json | 3 +- 4 files changed, 40 insertions(+), 17 deletions(-) diff --git a/web/src/components/CreateIdentityProviderDialog.tsx b/web/src/components/CreateIdentityProviderDialog.tsx index 1f2cdfd4..360c664f 100644 --- a/web/src/components/CreateIdentityProviderDialog.tsx +++ b/web/src/components/CreateIdentityProviderDialog.tsx @@ -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) => { return ( <> -
+

{isCreating ? "Create SSO" : "Update SSO"}

-
+
{isCreating && ( <> @@ -276,9 +276,10 @@ const CreateIdentityProviderDialog: React.FC = (props: Props) => { {type === "OAUTH2" && ( <> {isCreating && ( - - Redirect URL: {absolutifyLink("/auth/callback")} - +

+ Redirect URL: {absolutifyLink("/auth/callback")}{" "} + RedirectRedirectRedirectRedirectRedirectRedirectRedirectRedirectRedirectRedirectRedirect +

)} Client ID* diff --git a/web/src/components/SettingDialog.tsx b/web/src/components/SettingDialog.tsx index bb8dd489..238bd5d2 100644 --- a/web/src/components/SettingDialog.tsx +++ b/web/src/components/SettingDialog.tsx @@ -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) => { const [state, setState] = useState({ selectedSection: "my-account", }); + const isHost = user?.role === "HOST"; const handleSectionSelectorItemClick = (settingSection: SettingSection) => { setState({ @@ -36,6 +38,14 @@ const SettingDialog: React.FC = (props: Props) => { }); }; + const getSettingSectionList = () => { + let settingList: SettingSection[] = ["my-account", "preference"]; + if (isHost) { + settingList = settingList.concat(["member", "system", "storage", "sso"]); + } + return settingList; + }; + return (
- {user?.role === "HOST" ? ( + {isHost ? ( <> {t("common.admin")}
@@ -86,7 +96,7 @@ const SettingDialog: React.FC = (props: Props) => { onClick={() => handleSectionSelectorItemClick("sso")} className={`section-item ${state.selectedSection === "sso" ? "selected" : ""}`} > - SSO + {t("setting.sso")} )}
@@ -94,9 +104,20 @@ const SettingDialog: React.FC = (props: Props) => { ) : null}
+ {state.selectedSection === "my-account" ? ( - ) : state.selectedSection === "preferences" ? ( + ) : state.selectedSection === "preference" ? ( ) : state.selectedSection === "member" ? ( diff --git a/web/src/less/setting-dialog.less b/web/src/less/setting-dialog.less index 2bab7545..52484a1d 100644 --- a/web/src/less/setting-dialog.less +++ b/web/src/less/setting-dialog.less @@ -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; diff --git a/web/src/locales/en.json b/web/src/locales/en.json index 0415fb89..aba05209 100644 --- a/web/src/locales/en.json +++ b/web/src/locales/en.json @@ -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",