From fb41fd3688d17dcfc30aff3f70cc965a33e8b2e1 Mon Sep 17 00:00:00 2001 From: linonetwo Date: Sun, 7 Dec 2025 20:58:22 +0800 Subject: [PATCH] refactor: split edit workspace UI code --- .../EditWorkspace/AppearanceOptions.tsx | 84 +++ src/windows/EditWorkspace/MiscOptions.tsx | 134 +++++ .../EditWorkspace/SaveAndSyncOptions.tsx | 203 +++++++ .../EditWorkspace/SubWorkspaceRouting.tsx | 117 ++++ src/windows/EditWorkspace/index.tsx | 561 +----------------- src/windows/EditWorkspace/styles.tsx | 111 ++++ 6 files changed, 668 insertions(+), 542 deletions(-) create mode 100644 src/windows/EditWorkspace/AppearanceOptions.tsx create mode 100644 src/windows/EditWorkspace/MiscOptions.tsx create mode 100644 src/windows/EditWorkspace/SaveAndSyncOptions.tsx create mode 100644 src/windows/EditWorkspace/SubWorkspaceRouting.tsx create mode 100644 src/windows/EditWorkspace/styles.tsx diff --git a/src/windows/EditWorkspace/AppearanceOptions.tsx b/src/windows/EditWorkspace/AppearanceOptions.tsx new file mode 100644 index 00000000..d9ed771e --- /dev/null +++ b/src/windows/EditWorkspace/AppearanceOptions.tsx @@ -0,0 +1,84 @@ +import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; +import { AccordionDetails, Divider, Tooltip } from '@mui/material'; +import React from 'react'; +import { useTranslation } from 'react-i18next'; +import defaultIcon from '../../images/default-icon.png'; + +import { wikiPictureExtensions } from '@/constants/fileNames'; +import { IWorkspace } from '@services/workspaces/interface'; +import { Avatar, AvatarFlex, AvatarLeft, AvatarPicture, AvatarRight, OptionsAccordion, OptionsAccordionSummary, PictureButton, TextField } from './styles'; + +interface AppearanceOptionsProps { + workspace: IWorkspace; + workspaceSetter: (newValue: IWorkspace) => void; +} + +const getValidIconPath = (iconPath?: string | null): string => { + if (typeof iconPath === 'string') { + return `file:///${iconPath}`; + } + return defaultIcon; +}; + +export function AppearanceOptions(props: AppearanceOptionsProps): React.JSX.Element { + const { t } = useTranslation(); + const { workspace, workspaceSetter } = props; + const { name, picturePath } = workspace; + + return ( + + + }> + {t('EditWorkspace.AppearanceOptions')} + + + + ) => { + workspaceSetter({ ...workspace, name: event.target.value }); + }} + /> + + + + + + + + + + { + const filePaths = await window.service.native.pickFile([{ name: 'Images', extensions: wikiPictureExtensions }]); + if (filePaths.length > 0) { + workspaceSetter({ ...workspace, picturePath: filePaths[0] }); + } + }} + > + {t('EditWorkspace.SelectLocal')} + + + + + { + workspaceSetter({ ...workspace, picturePath: null }); + }} + disabled={!picturePath} + > + {t('EditWorkspace.ResetDefaultIcon')} + + + + + + + ); +} diff --git a/src/windows/EditWorkspace/MiscOptions.tsx b/src/windows/EditWorkspace/MiscOptions.tsx new file mode 100644 index 00000000..ea14324e --- /dev/null +++ b/src/windows/EditWorkspace/MiscOptions.tsx @@ -0,0 +1,134 @@ +import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; +import { AccordionDetails, Divider, List, ListItem, ListItemText, Switch, Tooltip } from '@mui/material'; +import React from 'react'; +import { useTranslation } from 'react-i18next'; + +import { isWikiWorkspace, IWorkspace } from '@services/workspaces/interface'; +import { OptionsAccordion, OptionsAccordionSummary, TextField } from './styles'; + +interface MiscOptionsProps { + workspace: IWorkspace; + workspaceSetter: (newValue: IWorkspace, requestSaveAndRestart?: boolean) => void; + rememberLastPageVisited: boolean | undefined; +} + +export function MiscOptions(props: MiscOptionsProps): React.JSX.Element { + const { t } = useTranslation(); + const { workspace, workspaceSetter, rememberLastPageVisited } = props; + + const isWiki = isWikiWorkspace(workspace); + const { + disableAudio = false, + disableNotifications = false, + enableFileSystemWatch = false, + hibernateWhenUnused = false, + homeUrl = '', + isSubWiki = false, + lastUrl = null, + } = isWiki ? workspace : { + disableAudio: false, + disableNotifications: false, + enableFileSystemWatch: false, + hibernateWhenUnused: false, + homeUrl: '', + isSubWiki: false, + lastUrl: null, + }; + + return ( + + + } data-testid='preference-section-miscOptions'> + {t('EditWorkspace.MiscOptions')} + + + + {!isSubWiki && ( + + + ) => { + workspaceSetter({ ...workspace, hibernateWhenUnused: event.target.checked }); + }} + /> + } + > + + + ) => { + workspaceSetter({ ...workspace, disableNotifications: event.target.checked }); + }} + /> + } + > + + + ) => { + workspaceSetter({ ...workspace, disableAudio: event.target.checked }); + }} + /> + } + > + + + + ) => { + workspaceSetter({ ...workspace, enableFileSystemWatch: event.target.checked }, true); + }} + /> + } + > + + + + )} + {!isSubWiki && rememberLastPageVisited && ( + ) => { + workspaceSetter({ + ...workspace, + lastUrl: (event.target.value || homeUrl) ?? '', + }); + }} + /> + )} + + + ); +} diff --git a/src/windows/EditWorkspace/SaveAndSyncOptions.tsx b/src/windows/EditWorkspace/SaveAndSyncOptions.tsx new file mode 100644 index 00000000..c0cbe664 --- /dev/null +++ b/src/windows/EditWorkspace/SaveAndSyncOptions.tsx @@ -0,0 +1,203 @@ +import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; +import { AccordionDetails, Button, Divider, List, ListItem, ListItemText, Switch, Tooltip } from '@mui/material'; +import React from 'react'; +import { useTranslation } from 'react-i18next'; + +import { TokenForm } from '@/components/TokenForm'; +import { SupportedStorageServices } from '@services/types'; +import { isWikiWorkspace, IWorkspace } from '@services/workspaces/interface'; +import { SyncedWikiDescription } from '../AddWorkspace/Description'; +import { GitRepoUrlForm } from '../AddWorkspace/GitRepoUrlForm'; +import { OptionsAccordion, OptionsAccordionSummary, TextField } from './styles'; + +interface SaveAndSyncOptionsProps { + workspace: IWorkspace; + workspaceSetter: (newValue: IWorkspace, requestSaveAndRestart?: boolean) => void; + rememberLastPageVisited: boolean | undefined; +} + +export function SaveAndSyncOptions(props: SaveAndSyncOptionsProps): React.JSX.Element { + const { t } = useTranslation(); + const { workspace, workspaceSetter, rememberLastPageVisited: _rememberLastPageVisited } = props; + + const isWiki = isWikiWorkspace(workspace); + const { + gitUrl = null, + homeUrl: _homeUrl = '', + isSubWiki = false, + lastUrl: _lastUrl = null, + storageService = SupportedStorageServices.github, + syncOnInterval = false, + syncOnStartup = false, + backupOnInterval = false, + userName = '', + wikiFolderLocation = '', + } = isWiki ? workspace : { + gitUrl: null, + homeUrl: '', + isSubWiki: false, + lastUrl: null, + storageService: SupportedStorageServices.github, + syncOnInterval: false, + syncOnStartup: false, + backupOnInterval: false, + userName: '', + wikiFolderLocation: '', + }; + + const fallbackUserName = ''; + const isCreateSyncedWorkspace = storageService !== SupportedStorageServices.local; + + return ( + + + } data-testid='preference-section-saveAndSyncOptions'> + {t('EditWorkspace.SaveAndSyncOptions')} + + + + ) => { + workspaceSetter({ ...workspace, wikiFolderLocation: event.target.value }); + }} + /> + + + + {isSubWiki && workspace && isWikiWorkspace(workspace) && workspace.mainWikiToLink && ( + + )} + {!isSubWiki && ( + ) => { + workspaceSetter({ ...workspace, userName: event.target.value }, true); + }} + label={t('AddWorkspace.WorkspaceUserName')} + placeholder={fallbackUserName} + value={userName} + /> + )} + + { + workspaceSetter({ ...workspace, storageService: isSynced ? SupportedStorageServices.github : SupportedStorageServices.local }); + }} + /> + {isCreateSyncedWorkspace && ( + { + workspaceSetter({ ...workspace, storageService: nextStorageService }); + }} + /> + )} + {storageService !== SupportedStorageServices.local && ( + { + workspaceSetter({ ...workspace, gitUrl: nextGitUrl }); + }} + isCreateMainWorkspace={!isSubWiki} + /> + )} + {storageService !== SupportedStorageServices.local && ( + <> + + ) => { + workspaceSetter({ ...workspace, syncOnInterval: event.target.checked }); + }} + /> + } + > + + + ) => { + workspaceSetter({ ...workspace, syncOnStartup: event.target.checked }); + }} + /> + } + > + + + + + )} + {storageService === SupportedStorageServices.local && ( + <> + + + ) => { + workspaceSetter({ ...workspace, backupOnInterval: event.target.checked }); + }} + /> + } + > + + + + + )} + + + ); +} diff --git a/src/windows/EditWorkspace/SubWorkspaceRouting.tsx b/src/windows/EditWorkspace/SubWorkspaceRouting.tsx new file mode 100644 index 00000000..9b3df0e4 --- /dev/null +++ b/src/windows/EditWorkspace/SubWorkspaceRouting.tsx @@ -0,0 +1,117 @@ +import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; +import { AccordionDetails, Autocomplete, AutocompleteRenderInputParams, List, ListItem, ListItemText, Switch, Tooltip, Typography } from '@mui/material'; +import React from 'react'; +import { useTranslation } from 'react-i18next'; + +import type { IWikiWorkspace } from '@services/workspaces/interface'; +import { OptionsAccordion, OptionsAccordionSummary, TextField } from './styles'; + +interface SubWorkspaceRoutingProps { + workspace: IWikiWorkspace; + workspaceSetter: (newValue: IWikiWorkspace, requestSaveAndRestart?: boolean) => void; + availableTags: string[]; + isSubWiki: boolean; +} + +export function SubWorkspaceRouting(props: SubWorkspaceRoutingProps): React.JSX.Element { + const { t } = useTranslation(); + const { workspace, workspaceSetter, availableTags, isSubWiki } = props; + + const { + tagNames, + includeTagTree, + fileSystemPathFilterEnable, + fileSystemPathFilter, + } = workspace; + + return ( + + + } data-testid='preference-section-subWorkspaceOptions'> + {t('AddWorkspace.SubWorkspaceOptions')} + + + + + {isSubWiki ? t('AddWorkspace.SubWorkspaceOptionsDescriptionForSub') : t('AddWorkspace.SubWorkspaceOptionsDescriptionForMain')} + + { + void _event; + workspaceSetter({ ...workspace, tagNames: newValue }, true); + }} + slotProps={{ + chip: { + variant: 'outlined', + }, + }} + renderInput={(parameters: AutocompleteRenderInputParams) => ( + + )} + /> + + ) => { + workspaceSetter({ ...workspace, includeTagTree: event.target.checked }, true); + }} + /> + } + > + + + ) => { + workspaceSetter({ ...workspace, fileSystemPathFilterEnable: event.target.checked }, true); + }} + /> + } + > + + + + {fileSystemPathFilterEnable && ( + ) => { + workspaceSetter({ ...workspace, fileSystemPathFilter: event.target.value || null }, true); + }} + label={t('AddWorkspace.FilterExpression')} + helperText={t('AddWorkspace.FilterExpressionHelp')} + sx={{ mb: 2 }} + /> + )} + + + ); +} diff --git a/src/windows/EditWorkspace/index.tsx b/src/windows/EditWorkspace/index.tsx index ea9a7a7f..80642dd4 100644 --- a/src/windows/EditWorkspace/index.tsx +++ b/src/windows/EditWorkspace/index.tsx @@ -1,144 +1,23 @@ import { Helmet } from '@dr.pogodin/react-helmet'; -import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; -import { - Accordion, - AccordionDetails, - AccordionSummary, - Autocomplete, - AutocompleteRenderInputParams, - Button as ButtonRaw, - Divider, - Paper, - Switch, - TextField as TextFieldRaw, - Tooltip, - Typography, -} from '@mui/material'; -import { css, styled } from '@mui/material/styles'; -import React, { ReactNode } from 'react'; +import { Divider } from '@mui/material'; +import React from 'react'; import { useTranslation } from 'react-i18next'; -import defaultIcon from '../../images/default-icon.png'; import { usePromiseValue } from '@/helpers/useServiceValue'; import { WindowMeta, WindowNames } from '@services/windows/WindowProperties'; import { useWorkspaceObservable } from '@services/workspaces/hooks'; import { useForm } from './useForm'; -import { List, ListItem, ListItemText } from '@/components/ListItem'; import { RestartSnackbarType, useRestartSnackbar } from '@/components/RestartSnackbar'; -import { TokenForm } from '@/components/TokenForm'; -import { wikiPictureExtensions } from '@/constants/fileNames'; -import { SupportedStorageServices } from '@services/types'; import { isWikiWorkspace, nonConfigFields } from '@services/workspaces/interface'; import { isEqual, omit } from 'lodash'; -import { SyncedWikiDescription } from '../AddWorkspace/Description'; -import { GitRepoUrlForm } from '../AddWorkspace/GitRepoUrlForm'; import { useAvailableTags } from '../AddWorkspace/useAvailableTags'; +import { AppearanceOptions } from './AppearanceOptions'; +import { MiscOptions } from './MiscOptions'; +import { SaveAndSyncOptions } from './SaveAndSyncOptions'; import { ServerOptions } from './server'; - -const OptionsAccordion = styled((props: React.ComponentProps) => )` - box-shadow: unset; - background-color: unset; -`; -const OptionsAccordionSummary = styled((props: React.ComponentProps) => )` - padding: 0; - flex-direction: row-reverse; -`; -const Root = styled((props: React.ComponentProps) => )` - height: 100%; - width: 100%; - padding: 20px; - /** for SaveCancelButtonsContainer 's height */ - margin-bottom: 40px; - display: flex; - flex-direction: column; - background: ${({ theme }) => theme.palette.background.paper}; -`; -const FlexGrow = styled('div')` - flex: 1; -`; -const Button = styled((props: React.ComponentProps) => )` - float: right; - margin-left: 10px; -`; -const TextField = styled((props: React.ComponentProps) => ( - -))` - margin-bottom: 10px; -`; -const AvatarFlex = styled('div')` - display: flex; -`; -const AvatarLeft = styled('div')` - padding-top: 10px; - padding-bottom: 10px; - padding-left: 0; - padding-right: 10px; -`; -const AvatarRight = styled('div')` - flex: 1; - display: flex; - flex-direction: column; - justify-content: space-around; - align-items: flex-start; - padding-top: 10px; - padding-bottom: 10px; - padding-left: 10px; - padding-right: 0; -`; -/** - * border: theme.palette.type === 'dark' ? 'none': '1px solid rgba(0, 0, 0, 0.12)'; - */ -const Avatar = styled('div')<{ transparentBackground?: boolean }>` - height: 85px; - width: 85px; - border-radius: 4px; - color: #333; - font-size: 32px; - line-height: 64px; - text-align: center; - font-weight: 500; - text-transform: uppercase; - user-select: none; - - overflow: hidden; - ${({ transparentBackground }) => { - if (transparentBackground === true) { - return css` - background: transparent; - border: none; - border-radius: 0; - `; - } -}} -`; -const SaveCancelButtonsContainer = styled('div')` - position: fixed; - left: 0; - bottom: 0; - - height: auto; - width: 100%; - padding: 5px; - background-color: ${({ theme }) => theme.palette.background.paper}; - opacity: 0.9; - backdrop-filter: blur(10px); -`; -const AvatarPicture = styled('img')` - height: 100%; - width: 100%; -`; -const PictureButton = styled((props: React.ComponentProps) => )``; -const _Caption = styled((props: { children?: ReactNode } & React.ComponentProps) => )` - display: block; -`; - -const getValidIconPath = (iconPath?: string | null): string => { - if (typeof iconPath === 'string') { - return `file:///${iconPath}`; - } - return defaultIcon; -}; +import { Button, FlexGrow, Root, SaveCancelButtonsContainer } from './styles'; +import { SubWorkspaceRouting } from './SubWorkspaceRouting'; const workspaceID = (window.meta() as WindowMeta[WindowNames.editWorkspace]).workspaceID!; @@ -148,34 +27,11 @@ export default function EditWorkspace(): React.JSX.Element { const [requestRestartCountDown, RestartSnackbar] = useRestartSnackbar({ waitBeforeCountDown: 0, workspace: originalWorkspace, restartType: RestartSnackbarType.Wiki }); const [workspace, workspaceSetter, onSave] = useForm(originalWorkspace, requestRestartCountDown); const isWiki = workspace && isWikiWorkspace(workspace); - const { - name, - order, - picturePath, - } = workspace ?? {}; + const { order } = workspace ?? {}; + const { name } = workspace ?? {}; - // Wiki-specific properties with fallbacks - const backupOnInterval = isWiki ? workspace.backupOnInterval : false; - const disableAudio = isWiki ? workspace.disableAudio : false; - const disableNotifications = isWiki ? workspace.disableNotifications : false; - const enableFileSystemWatch = isWiki ? workspace.enableFileSystemWatch : false; - const gitUrl = isWiki ? workspace.gitUrl : null; - const hibernateWhenUnused = isWiki ? workspace.hibernateWhenUnused : false; - const homeUrl = isWiki ? workspace.homeUrl : ''; const isSubWiki = isWiki ? workspace.isSubWiki : false; const mainWikiToLink = isWiki ? workspace.mainWikiToLink : null; - const storageService = isWiki ? workspace.storageService : SupportedStorageServices.github; - const syncOnInterval = isWiki ? workspace.syncOnInterval : false; - const syncOnStartup = isWiki ? workspace.syncOnStartup : false; - const tagNames = isWiki ? workspace.tagNames : []; - const includeTagTree = isWiki ? workspace.includeTagTree : false; - const fileSystemPathFilterEnable = isWiki ? workspace.fileSystemPathFilterEnable : false; - const fileSystemPathFilter = isWiki ? workspace.fileSystemPathFilter : null; - const transparentBackground = isWiki ? workspace.transparentBackground : false; - const userName = isWiki ? workspace.userName : ''; - const lastUrl = isWiki ? workspace.lastUrl : null; - const wikiFolderLocation = isWiki ? workspace.wikiFolderLocation : ''; - const fallbackUserName = usePromiseValue(async () => (await window.service.auth.get('userName'))!, ''); // Fetch all tags from main wiki for autocomplete suggestions const availableTags = useAvailableTags(mainWikiToLink ?? undefined, isSubWiki); @@ -197,7 +53,6 @@ export default function EditWorkspace(): React.JSX.Element { if (workspace === undefined) { return {t('Loading')}; } - const isCreateSyncedWorkspace = storageService !== SupportedStorageServices.local; return ( {RestartSnackbar} @@ -214,395 +69,17 @@ export default function EditWorkspace(): React.JSX.Element { )} - - - }> - {t('EditWorkspace.AppearanceOptions')} - - - - ) => { - workspaceSetter({ ...workspace, name: event.target.value }); - }} - /> - - - - - - - - - - { - const filePaths = await window.service.native.pickFile([{ name: 'Images', extensions: wikiPictureExtensions }]); - if (filePaths.length > 0) { - workspaceSetter({ ...workspace, picturePath: filePaths[0] }); - } - }} - > - {t('EditWorkspace.SelectLocal')} - - - - - { - workspaceSetter({ ...workspace, picturePath: null }); - }} - disabled={!picturePath} - > - {t('EditWorkspace.ResetDefaultIcon')} - - - - - - - - - } data-testid='preference-section-saveAndSyncOptions'> - {t('EditWorkspace.SaveAndSyncOptions')} - - - - ) => { - workspaceSetter({ ...workspace, wikiFolderLocation: event.target.value }); - }} - /> - - { - const directories = await window.service.native.pickDirectory(); - if (directories.length > 0) { - const newLocation = directories[0]; - try { - await window.service.wikiGitWorkspace.moveWorkspaceLocation(workspaceID, newLocation); - } catch (error) { - const errorMessage = (error as Error).message; - void window.service.native.log('error', `Failed to move workspace: ${errorMessage}`, { error, workspaceID, newLocation }); - // Show error notification - void window.service.notification.show({ - title: t('EditWorkspace.MoveWorkspaceFailed'), - body: t('EditWorkspace.MoveWorkspaceFailedMessage', { name: workspace.name, error: errorMessage }), - }); - } - } - }} - > - {t('EditWorkspace.MoveWorkspace')} - - - {isSubWiki && mainWikiToLink && ( - - )} - {!isSubWiki && ( - ) => { - workspaceSetter({ ...workspace, userName: event.target.value }, true); - }} - label={t('AddWorkspace.WorkspaceUserName')} - placeholder={fallbackUserName} - value={userName} - /> - )} - - { - workspaceSetter({ ...workspace, storageService: isSynced ? SupportedStorageServices.github : SupportedStorageServices.local }); - }} - /> - {isCreateSyncedWorkspace && ( - { - workspaceSetter({ ...workspace, storageService: nextStorageService }); - }} - /> - )} - {storageService !== SupportedStorageServices.local && ( - { - workspaceSetter({ ...workspace, gitUrl: nextGitUrl }); - }} - isCreateMainWorkspace={!isSubWiki} - /> - )} - {storageService !== SupportedStorageServices.local && ( - <> - - ) => { - workspaceSetter({ ...workspace, syncOnInterval: event.target.checked }); - }} - /> - } - > - - - ) => { - workspaceSetter({ ...workspace, syncOnStartup: event.target.checked }); - }} - /> - } - > - - - - - )} - {storageService === SupportedStorageServices.local && ( - <> - - - ) => { - workspaceSetter({ ...workspace, backupOnInterval: event.target.checked }); - }} - /> - } - > - - - - - )} - - - {showSubWorkspaceRouting && ( - - - } data-testid='preference-section-subWorkspaceOptions'> - {t('AddWorkspace.SubWorkspaceOptions')} - - - - - {isSubWiki ? t('AddWorkspace.SubWorkspaceOptionsDescriptionForSub') : t('AddWorkspace.SubWorkspaceOptionsDescriptionForMain')} - - { - void _event; - workspaceSetter({ ...workspace, tagNames: newValue }, true); - }} - slotProps={{ - chip: { - variant: 'outlined', - }, - }} - renderInput={(parameters: AutocompleteRenderInputParams) => ( - - )} - /> - - ) => { - workspaceSetter({ ...workspace, includeTagTree: event.target.checked }, true); - }} - /> - } - > - - - ) => { - workspaceSetter({ ...workspace, fileSystemPathFilterEnable: event.target.checked }, true); - }} - /> - } - > - - - - {fileSystemPathFilterEnable && ( - ) => { - workspaceSetter({ ...workspace, fileSystemPathFilter: event.target.value || null }, true); - }} - label={t('AddWorkspace.FilterExpression')} - helperText={t('AddWorkspace.FilterExpressionHelp')} - sx={{ mb: 2 }} - /> - )} - - + + + {showSubWorkspaceRouting && isWiki && ( + )} - - - } data-testid='preference-section-miscOptions'> - {t('EditWorkspace.MiscOptions')} - - - - {!isSubWiki && ( - - - ) => { - workspaceSetter({ ...workspace, hibernateWhenUnused: event.target.checked }); - }} - /> - } - > - - - ) => { - workspaceSetter({ ...workspace, disableNotifications: event.target.checked }); - }} - /> - } - > - - - ) => { - workspaceSetter({ ...workspace, disableAudio: event.target.checked }); - }} - /> - } - > - - - - ) => { - workspaceSetter({ ...workspace, enableFileSystemWatch: event.target.checked }, true); - }} - /> - } - > - - - - )} - {!isSubWiki && rememberLastPageVisited && ( - ) => { - workspaceSetter({ - ...workspace, - lastUrl: (event.target.value || homeUrl) ?? '', - }); - }} - /> - )} - - + {!isEqual(omit(workspace, nonConfigFields), omit(originalWorkspace, nonConfigFields)) && ( diff --git a/src/windows/EditWorkspace/styles.tsx b/src/windows/EditWorkspace/styles.tsx new file mode 100644 index 00000000..0f9fcc89 --- /dev/null +++ b/src/windows/EditWorkspace/styles.tsx @@ -0,0 +1,111 @@ +import { Accordion, AccordionSummary, Paper } from '@mui/material'; +import { Button as ButtonRaw, TextField as TextFieldRaw, Typography } from '@mui/material'; +import { css, styled } from '@mui/material/styles'; +import React, { ReactNode } from 'react'; + +export const OptionsAccordion = styled((props: React.ComponentProps) => )` + box-shadow: unset; + background-color: unset; +`; + +export const OptionsAccordionSummary = styled((props: React.ComponentProps) => )` + padding: 0; + flex-direction: row-reverse; +`; + +export const Root = styled((props: React.ComponentProps) => )` + height: 100%; + width: 100%; + padding: 20px; + /** for SaveCancelButtonsContainer 's height */ + margin-bottom: 40px; + display: flex; + flex-direction: column; + background: ${({ theme }) => theme.palette.background.paper}; +`; + +export const FlexGrow = styled('div')` + flex: 1; +`; + +export const Button = styled((props: React.ComponentProps) => )` + float: right; + margin-left: 10px; +`; + +export const TextField = styled((props: React.ComponentProps) => ( + +))` + margin-bottom: 10px; +`; + +export const AvatarFlex = styled('div')` + display: flex; +`; + +export const AvatarLeft = styled('div')` + padding-top: 10px; + padding-bottom: 10px; + padding-left: 0; + padding-right: 10px; +`; + +export const AvatarRight = styled('div')` + flex: 1; + display: flex; + flex-direction: column; + justify-content: space-around; + align-items: flex-start; + padding-top: 10px; + padding-bottom: 10px; + padding-left: 10px; + padding-right: 0; +`; + +export const Avatar = styled('div')<{ transparentBackground?: boolean }>` + height: 85px; + width: 85px; + border-radius: 4px; + color: #333; + font-size: 32px; + line-height: 64px; + text-align: center; + font-weight: 500; + text-transform: uppercase; + user-select: none; + + overflow: hidden; + ${({ transparentBackground }) => { + if (transparentBackground === true) { + return css` + background: transparent; + border: none; + border-radius: 0; + `; + } +}} +`; + +export const SaveCancelButtonsContainer = styled('div')` + position: fixed; + left: 0; + bottom: 0; + + height: auto; + width: 100%; + padding: 5px; + background-color: ${({ theme }) => theme.palette.background.paper}; + opacity: 0.9; + backdrop-filter: blur(10px); +`; + +export const AvatarPicture = styled('img')` + height: 100%; + width: 100%; +`; + +export const PictureButton = styled((props: React.ComponentProps) => )``; + +export const _Caption = styled((props: { children?: ReactNode } & React.ComponentProps) => )` + display: block; +`;