From 772333248eebc9dbe661313852eff2073bdbb7a6 Mon Sep 17 00:00:00 2001 From: Aaron Liu Date: Sat, 12 Jul 2025 11:41:32 +0800 Subject: [PATCH] refactor(dashboard): move all filesystem settings into one new page --- src/component/Admin/AdminBundle.tsx | 4 +- .../CustomProps/CustomPropsSetting.tsx | 165 +++++++++--------- src/component/Admin/FileSystem/FileSyste.tsx | 68 -------- src/component/Admin/FileSystem/Filesystem.tsx | 132 ++++++++++++++ .../HexColorInput.tsx | 4 +- .../Icons}/EmojiList.tsx | 9 +- .../Icons}/FileIconList.tsx | 11 +- .../Admin/FileSystem/Icons/FileIcons.tsx | 58 ++++++ .../Parameters.tsx} | 75 ++------ .../ViewerSetting/FileViewerEditDialog.tsx | 36 ++-- .../ViewerSetting/FileViewerList.tsx | 26 +-- .../ViewerSetting/FileViewerRow.tsx | 18 +- .../ViewerSetting/ImportWopiDialog.tsx | 16 +- .../ViewerSetting/ViewerSetting.tsx | 33 ++++ .../Settings/Appearance/ThemeOptions.tsx | 2 +- src/component/Admin/Settings/Settings.tsx | 44 ----- src/component/Icons/AppGeneric.tsx | 9 + src/component/Icons/Icons.tsx | 9 + 18 files changed, 394 insertions(+), 325 deletions(-) delete mode 100644 src/component/Admin/FileSystem/FileSyste.tsx create mode 100644 src/component/Admin/FileSystem/Filesystem.tsx rename src/component/Admin/{Settings/Filesystem => FileSystem}/HexColorInput.tsx (86%) rename src/component/Admin/{Settings/Filesystem => FileSystem/Icons}/EmojiList.tsx (99%) rename src/component/Admin/{Settings/Filesystem => FileSystem/Icons}/FileIconList.tsx (98%) create mode 100644 src/component/Admin/FileSystem/Icons/FileIcons.tsx rename src/component/Admin/{Settings/Filesystem/Filesystem.tsx => FileSystem/Parameters.tsx} (91%) rename src/component/Admin/{Settings/Filesystem => FileSystem}/ViewerSetting/FileViewerEditDialog.tsx (94%) rename src/component/Admin/{Settings/Filesystem => FileSystem}/ViewerSetting/FileViewerList.tsx (94%) rename src/component/Admin/{Settings/Filesystem => FileSystem}/ViewerSetting/FileViewerRow.tsx (89%) rename src/component/Admin/{Settings/Filesystem => FileSystem}/ViewerSetting/ImportWopiDialog.tsx (77%) create mode 100644 src/component/Admin/FileSystem/ViewerSetting/ViewerSetting.tsx create mode 100644 src/component/Icons/AppGeneric.tsx create mode 100644 src/component/Icons/Icons.tsx diff --git a/src/component/Admin/AdminBundle.tsx b/src/component/Admin/AdminBundle.tsx index 2d9d40f..8b0bef6 100644 --- a/src/component/Admin/AdminBundle.tsx +++ b/src/component/Admin/AdminBundle.tsx @@ -1,5 +1,6 @@ import EntitySetting from "./Entity/EntitySetting"; import FileSetting from "./File/FileSetting"; +import FileSystem from "./FileSystem/Filesystem"; import EditGroup from "./Group/EditGroup/EditGroup"; import GroupSetting from "./Group/GroupSetting"; import Home from "./Home/Home"; @@ -12,15 +13,14 @@ import OauthCallback from "./StoragePolicy/OauthCallback"; import StoragePolicySetting from "./StoragePolicy/StoragePolicySetting"; import TaskList from "./Task/TaskList"; import UserSetting from "./User/UserSetting"; -import FileSystem from "./FileSystem/FileSyste"; export { EditGroup, - FileSystem, EditNode, EditStoragePolicy, EntitySetting, FileSetting, + FileSystem, GroupSetting, Home, NodeSetting, diff --git a/src/component/Admin/FileSystem/CustomProps/CustomPropsSetting.tsx b/src/component/Admin/FileSystem/CustomProps/CustomPropsSetting.tsx index 56db79b..4320e09 100644 --- a/src/component/Admin/FileSystem/CustomProps/CustomPropsSetting.tsx +++ b/src/component/Admin/FileSystem/CustomProps/CustomPropsSetting.tsx @@ -22,7 +22,6 @@ import Add from "../../../Icons/Add"; import { ProChip } from "../../../Pages/Setting/SettingForm"; import ProDialog from "../../Common/ProDialog"; import { SettingContext } from "../../Settings/SettingWrapper"; -import { SettingSection } from "../../Settings/Settings"; import DraggableCustomPropsRow, { FieldTypes } from "./DraggableCustomPropsRow"; import EditPropsDialog from "./EditPropsDialog"; @@ -117,94 +116,88 @@ const CustomPropsSetting = () => { return ( e.preventDefault()}> - + setProOpen(false)} /> - - - } {...bindTrigger(newPropsPopupState)}> - {t("customProps.add")} - - - {(Object.keys(FieldTypes) as CustomPropsType[]).map((type, index) => { - const fieldType = FieldTypes[type]; - const Icon = fieldType.icon; - return ( - (fieldType.pro ? setProOpen(true) : onNewProp(type))} - > - - - - {t(fieldType.title)} - {fieldType.pro && } - - ); - })} - - - - - - + + } {...bindTrigger(newPropsPopupState)}> + {t("customProps.add")} + + + {(Object.keys(FieldTypes) as CustomPropsType[]).map((type, index) => { + const fieldType = FieldTypes[type]; + const Icon = fieldType.icon; + return ( + (fieldType.pro ? setProOpen(true) : onNewProp(type))}> + + + + {t(fieldType.title)} + {fieldType.pro && } + + ); + })} + + + + +
+ + + {t("settings.displayName")} + {t("customProps.type")} + {t("customProps.default")} + {t("settings.actions")} + + + + + {customProps.map((prop, idx) => { + const rowRef = createRef(); + return ( + { + setEditProps(props); + setIsNew(false); + setOpen(true); + }} + onDelete={handleDeleteProduct} + onMoveUp={() => handleMoveUp(idx)} + onMoveDown={() => handleMoveDown(idx)} + isFirst={idx === 0} + isLast={idx === customProps.length - 1} + t={t} + /> + ); + })} + {customProps.length === 0 && ( - {t("settings.displayName")} - {t("customProps.type")} - {t("customProps.default")} - {t("settings.actions")} - + + + {t("application:setting.listEmpty")} + + - - - {customProps.map((prop, idx) => { - const rowRef = createRef(); - return ( - { - setEditProps(props); - setIsNew(false); - setOpen(true); - }} - onDelete={handleDeleteProduct} - onMoveUp={() => handleMoveUp(idx)} - onMoveDown={() => handleMoveDown(idx)} - isFirst={idx === 0} - isLast={idx === customProps.length - 1} - t={t} - /> - ); - })} - {customProps.length === 0 && ( - - - - {t("application:setting.listEmpty")} - - - - )} - -
- - - + )} + + + + setOpen(false)} onSave={handleSave} isNew={isNew} props={editProps} /> diff --git a/src/component/Admin/FileSystem/FileSyste.tsx b/src/component/Admin/FileSystem/FileSyste.tsx deleted file mode 100644 index a22e142..0000000 --- a/src/component/Admin/FileSystem/FileSyste.tsx +++ /dev/null @@ -1,68 +0,0 @@ -import { Box, Container } from "@mui/material"; -import { useQueryState } from "nuqs"; -import { useMemo } from "react"; -import { useTranslation } from "react-i18next"; -import { CSSTransition, SwitchTransition } from "react-transition-group"; -import ResponsiveTabs, { Tab } from "../../Common/ResponsiveTabs.tsx"; -import TextBulletListSquareEdit from "../../Icons/TextBulletListSquareEdit.tsx"; -import PageContainer from "../../Pages/PageContainer.tsx"; -import PageHeader, { PageTabQuery } from "../../Pages/PageHeader.tsx"; -import SettingsWrapper from "../Settings/SettingWrapper.tsx"; -import CustomPropsSetting from "./CustomProps/CustomPropsSetting.tsx"; - -export enum SettingsPageTab { - Parameters = "parameters", - CustomProps = "customProps", - Icon = "icon", - FileApp = "fileApp", -} - -const FileSystem = () => { - const { t } = useTranslation("dashboard"); - const [tab, setTab] = useQueryState(PageTabQuery); - - const tabs: Tab[] = useMemo(() => { - const res = []; - res.push( - ...[ - { - label: t("nav.customProps"), - value: SettingsPageTab.CustomProps, - icon: , - }, - ], - ); - return res; - }, [t]); - - return ( - - - - setTab(newValue)} - tabs={tabs} - /> - - node.addEventListener("transitionend", done, false)} - classNames="fade" - key={`${tab}`} - > - - {(!tab || tab === SettingsPageTab.Parameters) &&
} - {tab === SettingsPageTab.CustomProps && ( - - - - )} - - - - - - ); -}; - -export default FileSystem; diff --git a/src/component/Admin/FileSystem/Filesystem.tsx b/src/component/Admin/FileSystem/Filesystem.tsx new file mode 100644 index 0000000..0e2ab59 --- /dev/null +++ b/src/component/Admin/FileSystem/Filesystem.tsx @@ -0,0 +1,132 @@ +import { Box, Container } from "@mui/material"; +import { useQueryState } from "nuqs"; +import { useMemo } from "react"; +import { useTranslation } from "react-i18next"; +import { CSSTransition, SwitchTransition } from "react-transition-group"; +import ResponsiveTabs, { Tab } from "../../Common/ResponsiveTabs.tsx"; +import AppGeneric from "../../Icons/AppGeneric.tsx"; +import Icons from "../../Icons/Icons.tsx"; +import SettingsOutlined from "../../Icons/SettingsOutlined.tsx"; +import TextBulletListSquareEdit from "../../Icons/TextBulletListSquareEdit.tsx"; +import PageContainer from "../../Pages/PageContainer.tsx"; +import PageHeader, { PageTabQuery } from "../../Pages/PageHeader.tsx"; +import SettingsWrapper from "../Settings/SettingWrapper.tsx"; +import CustomPropsSetting from "./CustomProps/CustomPropsSetting.tsx"; +import FileIcons from "./Icons/FileIcons.tsx"; +import Parameters from "./Parameters.tsx"; +import ViewerSetting from "./ViewerSetting/ViewerSetting.tsx"; + +export enum SettingsPageTab { + Parameters = "parameters", + CustomProps = "customProps", + Icon = "icon", + FileApp = "fileApp", +} + +const FileSystem = () => { + const { t } = useTranslation("dashboard"); + const [tab, setTab] = useQueryState(PageTabQuery); + + const tabs: Tab[] = useMemo(() => { + const res = []; + res.push( + ...[ + { + label: t("nav.settings"), + value: SettingsPageTab.Parameters, + icon: , + }, + { + label: t("settings.fileIcons"), + value: SettingsPageTab.Icon, + icon: , + }, + { + label: t("settings.fileViewers"), + value: SettingsPageTab.FileApp, + icon: , + }, + { + label: t("nav.customProps"), + value: SettingsPageTab.CustomProps, + icon: , + }, + ], + ); + return res; + }, [t]); + + return ( + + + + setTab(newValue)} + tabs={tabs} + /> + + node.addEventListener("transitionend", done, false)} + classNames="fade" + key={`${tab}`} + > + + {(!tab || tab === SettingsPageTab.Parameters) && ( + + + + )} + {tab === SettingsPageTab.Icon && ( + + + + )} + {tab === SettingsPageTab.FileApp && ( + + + + )} + {tab === SettingsPageTab.CustomProps && ( + + + + )} + + + + + + ); +}; + +export default FileSystem; diff --git a/src/component/Admin/Settings/Filesystem/HexColorInput.tsx b/src/component/Admin/FileSystem/HexColorInput.tsx similarity index 86% rename from src/component/Admin/Settings/Filesystem/HexColorInput.tsx rename to src/component/Admin/FileSystem/HexColorInput.tsx index 849c10f..f01016a 100644 --- a/src/component/Admin/Settings/Filesystem/HexColorInput.tsx +++ b/src/component/Admin/FileSystem/HexColorInput.tsx @@ -1,8 +1,8 @@ -import { DenseFilledTextField } from "../../../Common/StyledComponents.tsx"; +import { DenseFilledTextField } from "../../Common/StyledComponents.tsx"; import { InputAdornment } from "@mui/material"; import CircleColorSelector, { customizeMagicColor, -} from "../../../FileManager/FileInfo/ColorCircle/CircleColorSelector.tsx"; +} from "../../FileManager/FileInfo/ColorCircle/CircleColorSelector.tsx"; import * as React from "react"; export interface HexColorInputProps { diff --git a/src/component/Admin/Settings/Filesystem/EmojiList.tsx b/src/component/Admin/FileSystem/Icons/EmojiList.tsx similarity index 99% rename from src/component/Admin/Settings/Filesystem/EmojiList.tsx rename to src/component/Admin/FileSystem/Icons/EmojiList.tsx index d53c2b4..da10d2b 100644 --- a/src/component/Admin/Settings/Filesystem/EmojiList.tsx +++ b/src/component/Admin/FileSystem/Icons/EmojiList.tsx @@ -1,6 +1,7 @@ -import React from "react"; import { Box, IconButton, Stack, Table, TableBody, TableContainer, TableHead, TableRow } from "@mui/material"; -import { memo, useMemo, useState } from "react"; +import React, { memo, useMemo, useState } from "react"; +import { DndProvider, useDrag, useDrop } from "react-dnd"; +import { HTML5Backend } from "react-dnd-html5-backend"; import { useTranslation } from "react-i18next"; import { DenseFilledTextField, @@ -10,10 +11,8 @@ import { StyledTableContainerPaper, } from "../../../Common/StyledComponents.tsx"; import Add from "../../../Icons/Add.tsx"; -import Dismiss from "../../../Icons/Dismiss.tsx"; import ArrowDown from "../../../Icons/ArrowDown.tsx"; -import { DndProvider, useDrag, useDrop } from "react-dnd"; -import { HTML5Backend } from "react-dnd-html5-backend"; +import Dismiss from "../../../Icons/Dismiss.tsx"; export interface EmojiListProps { config: string; diff --git a/src/component/Admin/Settings/Filesystem/FileIconList.tsx b/src/component/Admin/FileSystem/Icons/FileIconList.tsx similarity index 98% rename from src/component/Admin/Settings/Filesystem/FileIconList.tsx rename to src/component/Admin/FileSystem/Icons/FileIconList.tsx index f68432d..da101d1 100644 --- a/src/component/Admin/Settings/Filesystem/FileIconList.tsx +++ b/src/component/Admin/FileSystem/Icons/FileIconList.tsx @@ -1,7 +1,7 @@ import { Box, IconButton, Table, TableBody, TableContainer, TableHead, TableRow } from "@mui/material"; -import * as React from "react"; +import { useTheme } from "@mui/material/styles"; import { memo, useMemo, useState } from "react"; -import { builtInIcons, FileTypeIconSetting } from "../../../FileManager/Explorer/FileTypeIcon.tsx"; +import { useTranslation } from "react-i18next"; import { DenseFilledTextField, NoWrapCell, @@ -9,11 +9,10 @@ import { SecondaryButton, StyledTableContainerPaper, } from "../../../Common/StyledComponents.tsx"; -import { useTranslation } from "react-i18next"; -import { useTheme } from "@mui/material/styles"; -import HexColorInput from "./HexColorInput.tsx"; -import Dismiss from "../../../Icons/Dismiss.tsx"; +import { builtInIcons, FileTypeIconSetting } from "../../../FileManager/Explorer/FileTypeIcon.tsx"; import Add from "../../../Icons/Add.tsx"; +import Dismiss from "../../../Icons/Dismiss.tsx"; +import HexColorInput from "../HexColorInput.tsx"; export interface FileIconListProps { config: string; diff --git a/src/component/Admin/FileSystem/Icons/FileIcons.tsx b/src/component/Admin/FileSystem/Icons/FileIcons.tsx new file mode 100644 index 0000000..906b86a --- /dev/null +++ b/src/component/Admin/FileSystem/Icons/FileIcons.tsx @@ -0,0 +1,58 @@ +import { Box, Stack, Typography } from "@mui/material"; +import { useSnackbar } from "notistack"; +import { useCallback, useContext, useState } from "react"; +import { useTranslation } from "react-i18next"; +import { useAppDispatch } from "../../../../redux/hooks"; +import { SettingSection, SettingSectionContent } from "../../Settings/Settings"; +import { SettingContext } from "../../Settings/SettingWrapper"; +import EmojiList from "./EmojiList"; +import FileIconList from "./FileIconList"; + +const FileIcons = () => { + const { t } = useTranslation("dashboard"); + const { formRef, setSettings, values } = useContext(SettingContext); + const [loading, setLoading] = useState(false); + const dispatch = useAppDispatch(); + const { enqueueSnackbar } = useSnackbar(); + + const iconOnChange = useCallback( + (s: string) => + setSettings({ + explorer_icons: s, + }), + [], + ); + + const onEmojiChange = useCallback( + (s: string) => + setSettings({ + emojis: s, + }), + [], + ); + + return ( + e.preventDefault()}> + + + + {t("settings.fileIcons")} + + + + + + + + {t("settings.emojiOptions")} + + + + + + + + ); +}; + +export default FileIcons; diff --git a/src/component/Admin/Settings/Filesystem/Filesystem.tsx b/src/component/Admin/FileSystem/Parameters.tsx similarity index 91% rename from src/component/Admin/Settings/Filesystem/Filesystem.tsx rename to src/component/Admin/FileSystem/Parameters.tsx index ef8e6a2..78b8879 100644 --- a/src/component/Admin/Settings/Filesystem/Filesystem.tsx +++ b/src/component/Admin/FileSystem/Parameters.tsx @@ -14,21 +14,18 @@ import { useSnackbar } from "notistack"; import * as React from "react"; import { useCallback, useContext, useState } from "react"; import { Trans, useTranslation } from "react-i18next"; -import { sendClearBlobUrlCache } from "../../../../api/api.ts"; -import { useAppDispatch } from "../../../../redux/hooks.ts"; -import { isTrueVal } from "../../../../session/utils.ts"; -import SizeInput from "../../../Common/SizeInput.tsx"; -import { DefaultCloseAction } from "../../../Common/Snackbar/snackbar.tsx"; -import { DenseFilledTextField, DenseSelect, SecondaryButton } from "../../../Common/StyledComponents.tsx"; -import { SquareMenuItem } from "../../../FileManager/ContextMenu/ContextMenu.tsx"; -import SettingForm from "../../../Pages/Setting/SettingForm.tsx"; -import { NoMarginHelperText, SettingSection, SettingSectionContent } from "../Settings.tsx"; -import { SettingContext } from "../SettingWrapper.tsx"; -import EmojiList from "./EmojiList.tsx"; -import FileIconList from "./FileIconList.tsx"; -import FileViewerList from "./ViewerSetting/FileViewerList.tsx"; +import { sendClearBlobUrlCache } from "../../../api/api.ts"; +import { useAppDispatch } from "../../../redux/hooks.ts"; +import { isTrueVal } from "../../../session/utils.ts"; +import SizeInput from "../../Common/SizeInput.tsx"; +import { DefaultCloseAction } from "../../Common/Snackbar/snackbar.tsx"; +import { DenseFilledTextField, DenseSelect, SecondaryButton } from "../../Common/StyledComponents.tsx"; +import { SquareMenuItem } from "../../FileManager/ContextMenu/ContextMenu.tsx"; +import SettingForm from "../../Pages/Setting/SettingForm.tsx"; +import { NoMarginHelperText, SettingSection, SettingSectionContent } from "../Settings/Settings.tsx"; +import { SettingContext } from "../Settings/SettingWrapper.tsx"; -const Filesystem = () => { +const Parameters = () => { const { t } = useTranslation("dashboard"); const { formRef, setSettings, values } = useContext(SettingContext); const [loading, setLoading] = useState(false); @@ -47,36 +44,12 @@ const Filesystem = () => { }); }; - const iconOnChange = useCallback( - (s: string) => - setSettings({ - explorer_icons: s, - }), - [], - ); - - const viewerOnChange = useCallback( - (s: string) => - setSettings({ - file_viewers: s, - }), - [], - ); - const onMimeMappingChange = useCallback((e: React.ChangeEvent) => { setSettings({ mime_mapping: e.target.value, }); }, []); - const onEmojiChange = useCallback( - (s: string) => - setSettings({ - emojis: s, - }), - [], - ); - return ( e.preventDefault()}> @@ -358,22 +331,6 @@ const Filesystem = () => { - - - {t("settings.fileIcons")} - - - - - - - - {t("settings.fileViewers")} - - - - - {t("settings.searchQuery")} @@ -429,14 +386,6 @@ const Filesystem = () => { - - - {t("settings.emojiOptions")} - - - - - {t("settings.advanceOptions")} @@ -630,4 +579,4 @@ const Filesystem = () => { ); }; -export default Filesystem; +export default Parameters; diff --git a/src/component/Admin/Settings/Filesystem/ViewerSetting/FileViewerEditDialog.tsx b/src/component/Admin/FileSystem/ViewerSetting/FileViewerEditDialog.tsx similarity index 94% rename from src/component/Admin/Settings/Filesystem/ViewerSetting/FileViewerEditDialog.tsx rename to src/component/Admin/FileSystem/ViewerSetting/FileViewerEditDialog.tsx index a269239..3da8acd 100644 --- a/src/component/Admin/Settings/Filesystem/ViewerSetting/FileViewerEditDialog.tsx +++ b/src/component/Admin/FileSystem/ViewerSetting/FileViewerEditDialog.tsx @@ -4,6 +4,7 @@ import { IconButton, Link, ListItemText, + SelectChangeEvent, Switch, Table, TableBody, @@ -17,33 +18,32 @@ import Grid from "@mui/material/Grid2"; import { useSnackbar } from "notistack"; import React, { lazy, Suspense, useCallback, useEffect, useMemo, useState } from "react"; import { Trans, useTranslation } from "react-i18next"; -import { Viewer, ViewerPlatform, ViewerType } from "../../../../../api/explorer.ts"; -import { builtInViewers } from "../../../../../redux/thunks/viewer.ts"; -import { isTrueVal } from "../../../../../session/utils.ts"; -import CircularProgress from "../../../../Common/CircularProgress.tsx"; -import SizeInput from "../../../../Common/SizeInput.tsx"; -import { DefaultCloseAction } from "../../../../Common/Snackbar/snackbar.tsx"; +import { Viewer, ViewerPlatform, ViewerType } from "../../../../api/explorer.ts"; +import { builtInViewers } from "../../../../redux/thunks/viewer.ts"; +import { isTrueVal } from "../../../../session/utils.ts"; +import CircularProgress from "../../../Common/CircularProgress.tsx"; +import SizeInput from "../../../Common/SizeInput.tsx"; +import { DefaultCloseAction } from "../../../Common/Snackbar/snackbar.tsx"; import { DenseFilledTextField, DenseSelect, NoWrapTableCell, SecondaryButton, StyledTableContainerPaper, -} from "../../../../Common/StyledComponents.tsx"; -import DraggableDialog from "../../../../Dialogs/DraggableDialog.tsx"; -import { SquareMenuItem } from "../../../../FileManager/ContextMenu/ContextMenu.tsx"; -import { ViewerIDWithDefaultIcons } from "../../../../FileManager/Dialogs/OpenWith.tsx"; -import Add from "../../../../Icons/Add.tsx"; -import Dismiss from "../../../../Icons/Dismiss.tsx"; -import SettingForm from "../../../../Pages/Setting/SettingForm.tsx"; -import MagicVarDialog, { MagicVar } from "../../../Common/MagicVarDialog.tsx"; -import { NoMarginHelperText } from "../../Settings.tsx"; -import ArrowDown from "../../../../Icons/ArrowDown.tsx"; +} from "../../../Common/StyledComponents.tsx"; +import DraggableDialog from "../../../Dialogs/DraggableDialog.tsx"; +import { SquareMenuItem } from "../../../FileManager/ContextMenu/ContextMenu.tsx"; +import { ViewerIDWithDefaultIcons } from "../../../FileManager/Dialogs/OpenWith.tsx"; +import Add from "../../../Icons/Add.tsx"; +import Dismiss from "../../../Icons/Dismiss.tsx"; +import SettingForm from "../../../Pages/Setting/SettingForm.tsx"; +import MagicVarDialog, { MagicVar } from "../../Common/MagicVarDialog.tsx"; +import { NoMarginHelperText } from "../../Settings/Settings.tsx"; +import ArrowDown from "../../../Icons/ArrowDown.tsx"; import { DndProvider, useDrag, useDrop } from "react-dnd"; import { HTML5Backend } from "react-dnd-html5-backend"; -import { SelectChangeEvent } from "@mui/material"; -const MonacoEditor = lazy(() => import("../../../../Viewers/CodeViewer/MonacoEditor.tsx")); +const MonacoEditor = lazy(() => import("../../../Viewers/CodeViewer/MonacoEditor.tsx")); export interface FileViewerEditDialogProps { viewer: Viewer; diff --git a/src/component/Admin/Settings/Filesystem/ViewerSetting/FileViewerList.tsx b/src/component/Admin/FileSystem/ViewerSetting/FileViewerList.tsx similarity index 94% rename from src/component/Admin/Settings/Filesystem/ViewerSetting/FileViewerList.tsx rename to src/component/Admin/FileSystem/ViewerSetting/FileViewerList.tsx index 969935d..c0e02b7 100644 --- a/src/component/Admin/Settings/Filesystem/ViewerSetting/FileViewerList.tsx +++ b/src/component/Admin/FileSystem/ViewerSetting/FileViewerList.tsx @@ -15,20 +15,20 @@ import { import { bindMenu, bindTrigger, usePopupState } from "material-ui-popup-state/hooks"; import * as React from "react"; import { memo, useCallback, useMemo, useState } from "react"; +import { DndProvider, useDrag, useDrop } from "react-dnd"; +import { HTML5Backend } from "react-dnd-html5-backend"; import { useTranslation } from "react-i18next"; -import { Viewer, ViewerGroup, ViewerType } from "../../../../../api/explorer.ts"; -import { uuidv4 } from "../../../../../util"; -import { NoWrapTableCell, SecondaryButton } from "../../../../Common/StyledComponents.tsx"; -import { SquareMenuItem } from "../../../../FileManager/ContextMenu/ContextMenu.tsx"; -import Add from "../../../../Icons/Add.tsx"; -import DesktopFlow from "../../../../Icons/DesktopFlow.tsx"; -import DocumentDataLink from "../../../../Icons/DocumentDataLink.tsx"; -import { AccordionSummary, StyledAccordion } from "../../UserSession/SSOSettings.tsx"; +import { Viewer, ViewerGroup, ViewerType } from "../../../../api/explorer.ts"; +import { uuidv4 } from "../../../../util"; +import { NoWrapTableCell, SecondaryButton } from "../../../Common/StyledComponents.tsx"; +import { SquareMenuItem } from "../../../FileManager/ContextMenu/ContextMenu.tsx"; +import Add from "../../../Icons/Add.tsx"; +import DesktopFlow from "../../../Icons/DesktopFlow.tsx"; +import DocumentDataLink from "../../../Icons/DocumentDataLink.tsx"; +import { AccordionSummary, StyledAccordion } from "../../Settings/UserSession/SSOSettings.tsx"; import FileViewerEditDialog from "./FileViewerEditDialog.tsx"; import FileViewerRow from "./FileViewerRow.tsx"; import ImportWopiDialog from "./ImportWopiDialog.tsx"; -import { DndProvider, useDrag, useDrop } from "react-dnd"; -import { HTML5Backend } from "react-dnd-html5-backend"; interface ViewerGroupProps { group: ViewerGroup; @@ -288,6 +288,9 @@ const FileViewerList = memo(({ config, onChange }: FileViewerListProps) => { return ( + } sx={{ mb: 1 }}> + {t("settings.addViewer")} + {configParsed?.length > 0 && configParsed.map((item: ViewerGroup, index) => ( { dndType={`viewer-row-${index}`} /> ))} - } sx={{ mt: 1 }}> - {t("settings.addViewer")} - { + const { t } = useTranslation("dashboard"); + const { formRef, setSettings, values } = useContext(SettingContext); + const [loading, setLoading] = useState(false); + const dispatch = useAppDispatch(); + const { enqueueSnackbar } = useSnackbar(); + + const viewerOnChange = useCallback( + (s: string) => + setSettings({ + file_viewers: s, + }), + [], + ); + + return ( + e.preventDefault()}> + + + + + ); +}; + +export default ViewerSetting; diff --git a/src/component/Admin/Settings/Appearance/ThemeOptions.tsx b/src/component/Admin/Settings/Appearance/ThemeOptions.tsx index ebed22a..e61c166 100644 --- a/src/component/Admin/Settings/Appearance/ThemeOptions.tsx +++ b/src/component/Admin/Settings/Appearance/ThemeOptions.tsx @@ -23,7 +23,7 @@ import { import Add from "../../../Icons/Add"; import Delete from "../../../Icons/Delete"; import Edit from "../../../Icons/Edit"; -import HexColorInput from "../../Settings/Filesystem/HexColorInput"; +import HexColorInput from "../../FileSystem/HexColorInput.tsx"; import ThemeOptionEditDialog from "./ThemeOptionEditDialog"; export interface ThemeOptionsProps { diff --git a/src/component/Admin/Settings/Settings.tsx b/src/component/Admin/Settings/Settings.tsx index 4b2be9e..d6fd40e 100644 --- a/src/component/Admin/Settings/Settings.tsx +++ b/src/component/Admin/Settings/Settings.tsx @@ -8,7 +8,6 @@ import ResponsiveTabs, { Tab } from "../../Common/ResponsiveTabs.tsx"; import Bot from "../../Icons/Bot.tsx"; import Color from "../../Icons/Color.tsx"; import CubeSync from "../../Icons/CubeSync.tsx"; -import CubeTree from "../../Icons/CubeTree.tsx"; import Currency from "../../Icons/Currency.tsx"; import FilmstripImage from "../../Icons/FilmstripImage.tsx"; import Globe from "../../Icons/Globe.tsx"; @@ -22,7 +21,6 @@ import Appearance from "./Appearance/Appearance.tsx"; import Captcha from "./Captcha/Captcha.tsx"; import Email from "./Email/Email.tsx"; import Events from "./Event/Events.tsx"; -import Filesystem from "./Filesystem/Filesystem.tsx"; import Media from "./Media/Media.tsx"; import Queue from "./Queue/Queue.tsx"; import ServerSetting from "./Server/ServerSetting.tsx"; @@ -104,11 +102,6 @@ const Settings = () => { value: SettingsPageTab.Captcha, icon: , }, - { - label: t("nav.fileSystem"), - value: SettingsPageTab.FileSystem, - icon: , - }, { label: t("nav.mediaProcessing"), value: SettingsPageTab.MediaProcessing, @@ -230,43 +223,6 @@ const Settings = () => { )} - {tab === SettingsPageTab.FileSystem && ( - - - - )} {tab === SettingsPageTab.MediaProcessing && ( + + + ); +} diff --git a/src/component/Icons/Icons.tsx b/src/component/Icons/Icons.tsx new file mode 100644 index 0000000..288a98c --- /dev/null +++ b/src/component/Icons/Icons.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function Icons(props: SvgIconProps) { + return ( + + + + ); +}