From 87ea094dac8fa9294c25d341962dd3eb5f490934 Mon Sep 17 00:00:00 2001 From: Chris Beer Date: Wed, 29 Mar 2023 12:58:19 -0700 Subject: [PATCH 001/164] Update to MUI 5.x and run npx @mui/codemod v5.0.0/preset-safe over the tree --- __tests__/src/components/AppProviders.test.js | 2 +- .../src/components/ManifestListItem.test.js | 2 +- package.json | 9 +- src/components/AnnotationSettings.js | 4 +- src/components/AppProviders.js | 31 ++++--- src/components/AttributionPanel.js | 8 +- src/components/Branding.js | 6 +- src/components/CanvasAnnotations.js | 10 +-- src/components/CanvasInfo.js | 2 +- src/components/CanvasLayers.js | 24 +++--- src/components/ChangeThemeDialog.js | 6 +- src/components/CollapsibleSection.js | 6 +- src/components/CollectionDialog.js | 10 +-- src/components/CollectionInfo.js | 6 +- src/components/CompanionArea.js | 6 +- src/components/CompanionWindow.js | 12 +-- src/components/ErrorContent.js | 12 +-- src/components/ErrorDialog.js | 12 +-- src/components/FullScreenButton.js | 4 +- src/components/GalleryView.js | 2 +- src/components/GalleryViewThumbnail.js | 12 +-- src/components/IIIFDropTarget.js | 6 +- src/components/IIIFThumbnail.js | 2 +- src/components/LabelValueMetadata.js | 2 +- src/components/LanguageSettings.js | 8 +- src/components/LocalePicker.js | 8 +- src/components/ManifestForm.js | 6 +- src/components/ManifestInfo.js | 2 +- src/components/ManifestListItem.js | 20 ++--- src/components/ManifestListItemError.js | 8 +- src/components/ManifestRelatedLinks.js | 4 +- src/components/MinimalWindow.js | 12 +-- src/components/MiradorMenuButton.js | 8 +- src/components/NestedMenu.js | 10 +-- .../ScrollIndicatedDialogContent.js | 2 +- src/components/SearchHit.js | 10 +-- src/components/SearchPanel.js | 6 +- src/components/SearchPanelControls.js | 86 +++++++++---------- src/components/SearchPanelNavigation.js | 6 +- src/components/SearchResults.js | 8 +- src/components/SelectCollection.js | 8 +- src/components/SidebarIndexItem.js | 2 +- src/components/SidebarIndexList.js | 4 +- src/components/SidebarIndexTableOfContents.js | 8 +- src/components/SidebarIndexThumbnail.js | 2 +- src/components/ThumbnailNavigation.js | 2 +- src/components/ViewerInfo.js | 2 +- src/components/ViewerNavigation.js | 2 +- src/components/Window.js | 2 +- src/components/WindowAuthenticationBar.js | 12 +-- .../WindowCanvasNavigationControls.js | 4 +- src/components/WindowList.js | 8 +- src/components/WindowListButton.js | 2 +- src/components/WindowSideBar.js | 2 +- .../WindowSideBarAnnotationsPanel.js | 2 +- src/components/WindowSideBarButtons.js | 18 ++-- src/components/WindowSideBarCanvasPanel.js | 24 +++--- .../WindowSideBarCollectionPanel.js | 18 ++-- src/components/WindowThumbnailSettings.js | 8 +- src/components/WindowTopBar.js | 8 +- src/components/WindowTopBarPluginMenu.js | 4 +- src/components/WindowTopBarTitle.js | 6 +- src/components/WindowTopMenu.js | 4 +- src/components/WindowViewSettings.js | 10 +-- src/components/Workspace.js | 4 +- src/components/WorkspaceAdd.js | 20 ++--- src/components/WorkspaceAddButton.js | 8 +- src/components/WorkspaceControlPanel.js | 4 +- src/components/WorkspaceExport.js | 28 +++--- src/components/WorkspaceImport.js | 10 +-- src/components/WorkspaceMenu.js | 6 +- src/components/WorkspaceMenuButton.js | 2 +- src/components/WorkspaceOptionsButton.js | 2 +- src/components/WorkspaceOptionsMenu.js | 12 +-- src/components/WorkspaceSelectionDialog.js | 8 +- src/components/ZoomControls.js | 4 +- src/components/icons/BookViewIcon.js | 2 +- src/components/icons/CanvasIndexIcon.js | 2 +- src/components/icons/GalleryViewIcon.js | 2 +- src/components/icons/MiradorIcon.js | 2 +- src/components/icons/RestoreZoomIcon.js | 2 +- .../icons/ThumbnailNavigationBottomIcon.js | 2 +- .../icons/ThumbnailNavigationRightIcon.js | 2 +- src/components/icons/WindowMaxIcon.js | 2 +- src/components/icons/WindowMinIcon.js | 2 +- src/components/icons/WindowOptionsIcon.js | 2 +- .../icons/WorkspaceTypeElasticIcon.js | 2 +- .../icons/WorkspaceTypeMosaicIcon.js | 2 +- src/config/settings.js | 6 +- src/containers/AttributionPanel.js | 2 +- src/containers/AudioViewer.js | 2 +- src/containers/CanvasAnnotations.js | 2 +- src/containers/CanvasLayers.js | 2 +- src/containers/ChangeThemeDialog.js | 2 +- src/containers/CollapsibleSection.js | 2 +- src/containers/CollectionDialog.js | 2 +- src/containers/CompanionArea.js | 2 +- src/containers/CompanionWindow.js | 2 +- src/containers/CustomPanel.js | 2 +- src/containers/ErrorContent.js | 2 +- src/containers/GalleryView.js | 2 +- src/containers/GalleryViewThumbnail.js | 4 +- src/containers/IIIFThumbnail.js | 2 +- src/containers/LayersPanel.js | 2 +- src/containers/LocalePicker.js | 2 +- src/containers/ManifestForm.js | 2 +- src/containers/ManifestListItem.js | 2 +- src/containers/ManifestListItemError.js | 2 +- src/containers/ManifestRelatedLinks.js | 2 +- src/containers/MinimalWindow.js | 2 +- src/containers/MosaicRenderPreview.js | 2 +- src/containers/OpenSeadragonViewer.js | 2 +- src/containers/PrimaryWindow.js | 2 +- src/containers/SanitizedHtml.js | 2 +- .../ScrollIndicatedDialogContent.js | 2 +- src/containers/SearchHit.js | 2 +- src/containers/SearchPanel.js | 2 +- src/containers/SearchPanelControls.js | 2 +- src/containers/SearchPanelNavigation.js | 2 +- src/containers/SearchResults.js | 2 +- src/containers/SelectCollection.js | 2 +- src/containers/SidebarIndexItem.js | 2 +- src/containers/SidebarIndexList.js | 2 +- src/containers/SidebarIndexTableOfContents.js | 4 +- src/containers/SidebarIndexThumbnail.js | 2 +- src/containers/ThumbnailCanvasGrouping.js | 2 +- src/containers/ThumbnailNavigation.js | 2 +- src/containers/VideoViewer.js | 2 +- src/containers/ViewerInfo.js | 2 +- src/containers/ViewerNavigation.js | 2 +- src/containers/Window.js | 2 +- src/containers/WindowAuthenticationBar.js | 4 +- .../WindowCanvasNavigationControls.js | 4 +- src/containers/WindowListButton.js | 2 +- src/containers/WindowSideBar.js | 2 +- .../WindowSideBarAnnotationsPanel.js | 2 +- src/containers/WindowSideBarButtons.js | 2 +- src/containers/WindowSideBarCanvasPanel.js | 2 +- .../WindowSideBarCollectionPanel.js | 2 +- src/containers/WindowSideBarInfoPanel.js | 2 +- src/containers/WindowThumbnailSettings.js | 2 +- src/containers/WindowTopBar.js | 2 +- src/containers/WindowTopBarPluginArea.js | 2 +- src/containers/WindowTopBarPluginMenu.js | 2 +- src/containers/WindowTopBarTitle.js | 2 +- src/containers/WindowTopMenuButton.js | 2 +- src/containers/WindowViewSettings.js | 2 +- src/containers/Workspace.js | 2 +- src/containers/WorkspaceAdd.js | 2 +- src/containers/WorkspaceAddButton.js | 6 +- src/containers/WorkspaceArea.js | 5 +- src/containers/WorkspaceControlPanel.js | 2 +- .../WorkspaceControlPanelButtons.js | 2 +- src/containers/WorkspaceElastic.js | 2 +- src/containers/WorkspaceElasticWindow.js | 2 +- src/containers/WorkspaceExport.js | 2 +- src/containers/WorkspaceImport.js | 2 +- src/containers/WorkspaceMenuButton.js | 2 +- src/containers/WorkspaceMosaic.js | 2 +- src/containers/WorkspaceOptionsButton.js | 2 +- src/containers/WorkspaceSelectionDialog.js | 2 +- src/containers/ZoomControls.js | 2 +- src/extend/pluginMapping.js | 2 +- 163 files changed, 435 insertions(+), 428 deletions(-) diff --git a/__tests__/src/components/AppProviders.test.js b/__tests__/src/components/AppProviders.test.js index 82e2f981e3..ae97556638 100644 --- a/__tests__/src/components/AppProviders.test.js +++ b/__tests__/src/components/AppProviders.test.js @@ -1,4 +1,4 @@ -import Button from '@material-ui/core/Button'; +import Button from '@mui/material/Button'; import { render, screen } from 'test-utils'; import { useTranslation } from 'react-i18next'; import { useDrop } from 'react-dnd'; diff --git a/__tests__/src/components/ManifestListItem.test.js b/__tests__/src/components/ManifestListItem.test.js index ac40ea4586..f305dc0d24 100644 --- a/__tests__/src/components/ManifestListItem.test.js +++ b/__tests__/src/components/ManifestListItem.test.js @@ -34,7 +34,7 @@ describe('ManifestListItem', () => { const { container } = createWrapper({ ready: false }); expect(screen.queryByRole('button')).not.toBeInTheDocument(); - expect(container.querySelectorAll('.MuiSkeleton-rect').length).toBeGreaterThan(0); // eslint-disable-line testing-library/no-node-access, testing-library/no-container + expect(container.querySelectorAll('.MuiSkeleton-rectangular').length).toBeGreaterThan(0); // eslint-disable-line testing-library/no-node-access, testing-library/no-container }); it('renders an error message if fetching the manifest failed', () => { createWrapper({ error: 'This is an error message' }); diff --git a/package.json b/package.json index d153afba8c..3303003a0b 100644 --- a/package.json +++ b/package.json @@ -33,10 +33,13 @@ ], "repository": "https://github.com/ProjectMirador/mirador", "dependencies": { + "@emotion/react": "^11.10.6", + "@emotion/styled": "^11.10.6", "@hello-pangea/dnd": "^16.0.1", - "@material-ui/core": "^4.12.3", - "@material-ui/icons": "^4.9.1", - "@material-ui/lab": "^4.0.0-alpha.53", + "@mui/icons-material": "^5.11.9", + "@mui/lab": "^5.0.0-alpha.120", + "@mui/material": "^5.11.10", + "@mui/styles": "^5.11.9", "@react-aria/live-announcer": "^3.1.2", "classnames": "^2.2.6", "clsx": "^1.0.4", diff --git a/src/components/AnnotationSettings.js b/src/components/AnnotationSettings.js index dd91bdc754..f6fec27ad7 100644 --- a/src/components/AnnotationSettings.js +++ b/src/components/AnnotationSettings.js @@ -1,7 +1,7 @@ import { Component } from 'react'; import PropTypes from 'prop-types'; -import VisibilityIcon from '@material-ui/icons/VisibilitySharp'; -import VisibilityOffIcon from '@material-ui/icons/VisibilityOffSharp'; +import VisibilityIcon from '@mui/icons-material/VisibilitySharp'; +import VisibilityOffIcon from '@mui/icons-material/VisibilityOffSharp'; import MiradorMenuButton from '../containers/MiradorMenuButton'; /** diff --git a/src/components/AppProviders.js b/src/components/AppProviders.js index e4bcddeac7..180246483f 100644 --- a/src/components/AppProviders.js +++ b/src/components/AppProviders.js @@ -2,9 +2,10 @@ import { Component } from 'react'; import PropTypes from 'prop-types'; import { FullScreen, useFullScreenHandle } from 'react-full-screen'; import { I18nextProvider } from 'react-i18next'; -import { - ThemeProvider, StylesProvider, createTheme, jssPreset, createGenerateClassName, -} from '@material-ui/core/styles'; +import { ThemeProvider, StyledEngineProvider, createTheme, adaptV4Theme } from '@mui/material/styles'; +import StylesProvider from '@mui/styles/StylesProvider'; +import jssPreset from '@mui/styles/jssPreset'; +import createGenerateClassName from '@mui/styles/createGenerateClassName'; import { DndContext, DndProvider } from 'react-dnd'; import { MultiBackend } from 'react-dnd-multi-backend'; import { HTML5toTouch } from 'rdndmb-html5-to-touch'; @@ -106,18 +107,20 @@ export class AppProviders extends Component { return ( - - + - - {children} - - - + + + {children} + + + + ); diff --git a/src/components/AttributionPanel.js b/src/components/AttributionPanel.js index c2d8cc6979..e7632acc62 100644 --- a/src/components/AttributionPanel.js +++ b/src/components/AttributionPanel.js @@ -1,8 +1,8 @@ import { Component } from 'react'; import PropTypes from 'prop-types'; -import Typography from '@material-ui/core/Typography'; -import Link from '@material-ui/core/Link'; -import Skeleton from '@material-ui/lab/Skeleton'; +import Typography from '@mui/material/Typography'; +import Link from '@mui/material/Link'; +import Skeleton from '@mui/material/Skeleton'; import { Img } from 'react-image'; import CompanionWindow from '../containers/CompanionWindow'; import { LabelValueMetadata } from './LabelValueMetadata'; @@ -63,7 +63,7 @@ export class AttributionPanel extends Component { role="presentation" className={classes.logo} unloader={ - + } /> diff --git a/src/components/Branding.js b/src/components/Branding.js index d2f4d4f9e1..0fa3a89d98 100644 --- a/src/components/Branding.js +++ b/src/components/Branding.js @@ -1,7 +1,7 @@ import { Component } from 'react'; import PropTypes from 'prop-types'; -import IconButton from '@material-ui/core/IconButton'; -import Typography from '@material-ui/core/Typography'; +import IconButton from '@mui/material/IconButton'; +import Typography from '@mui/material/Typography'; import MiradorIcon from './icons/MiradorIcon'; /** @@ -25,7 +25,7 @@ export class Branding extends Component { href="https://projectmirador.org" target="_blank" rel="noopener" - > + size="large"> diff --git a/src/components/CanvasAnnotations.js b/src/components/CanvasAnnotations.js index 544e135d78..1218f88f7e 100644 --- a/src/components/CanvasAnnotations.js +++ b/src/components/CanvasAnnotations.js @@ -1,11 +1,11 @@ import { Component } from 'react'; import PropTypes from 'prop-types'; import clsx from 'clsx'; -import Chip from '@material-ui/core/Chip'; -import MenuList from '@material-ui/core/MenuList'; -import MenuItem from '@material-ui/core/MenuItem'; -import ListItemText from '@material-ui/core/ListItemText'; -import Typography from '@material-ui/core/Typography'; +import Chip from '@mui/material/Chip'; +import MenuList from '@mui/material/MenuList'; +import MenuItem from '@mui/material/MenuItem'; +import ListItemText from '@mui/material/ListItemText'; +import Typography from '@mui/material/Typography'; import SanitizedHtml from '../containers/SanitizedHtml'; import { ScrollTo } from './ScrollTo'; diff --git a/src/components/CanvasInfo.js b/src/components/CanvasInfo.js index 93f4b31243..39ec1a03fd 100644 --- a/src/components/CanvasInfo.js +++ b/src/components/CanvasInfo.js @@ -1,6 +1,6 @@ import { Component } from 'react'; import PropTypes from 'prop-types'; -import Typography from '@material-ui/core/Typography'; +import Typography from '@mui/material/Typography'; import CollapsibleSection from '../containers/CollapsibleSection'; import SanitizedHtml from '../containers/SanitizedHtml'; import { LabelValueMetadata } from './LabelValueMetadata'; diff --git a/src/components/CanvasLayers.js b/src/components/CanvasLayers.js index 99e400ca25..fad6c7b2f9 100644 --- a/src/components/CanvasLayers.js +++ b/src/components/CanvasLayers.js @@ -2,18 +2,18 @@ import { Component } from 'react'; import PropTypes from 'prop-types'; import clsx from 'clsx'; import { v4 as uuid } from 'uuid'; -import Input from '@material-ui/core/Input'; -import InputAdornment from '@material-ui/core/InputAdornment'; -import List from '@material-ui/core/List'; -import ListItem from '@material-ui/core/ListItem'; -import Slider from '@material-ui/core/Slider'; -import Tooltip from '@material-ui/core/Tooltip'; -import DragHandleIcon from '@material-ui/icons/DragHandleSharp'; -import MoveToTopIcon from '@material-ui/icons/VerticalAlignTopSharp'; -import VisibilityIcon from '@material-ui/icons/VisibilitySharp'; -import VisibilityOffIcon from '@material-ui/icons/VisibilityOffSharp'; -import OpacityIcon from '@material-ui/icons/OpacitySharp'; -import Typography from '@material-ui/core/Typography'; +import Input from '@mui/material/Input'; +import InputAdornment from '@mui/material/InputAdornment'; +import List from '@mui/material/List'; +import ListItem from '@mui/material/ListItem'; +import Slider from '@mui/material/Slider'; +import Tooltip from '@mui/material/Tooltip'; +import DragHandleIcon from '@mui/icons-material/DragHandleSharp'; +import MoveToTopIcon from '@mui/icons-material/VerticalAlignTopSharp'; +import VisibilityIcon from '@mui/icons-material/VisibilitySharp'; +import VisibilityOffIcon from '@mui/icons-material/VisibilityOffSharp'; +import OpacityIcon from '@mui/icons-material/OpacitySharp'; +import Typography from '@mui/material/Typography'; import { DragDropContext, Droppable, Draggable } from '@hello-pangea/dnd'; import MiradorMenuButton from '../containers/MiradorMenuButton'; import IIIFThumbnail from '../containers/IIIFThumbnail'; diff --git a/src/components/ChangeThemeDialog.js b/src/components/ChangeThemeDialog.js index 146071b855..68dcaec794 100644 --- a/src/components/ChangeThemeDialog.js +++ b/src/components/ChangeThemeDialog.js @@ -8,8 +8,8 @@ import { MenuItem, Typography, DialogContent, -} from '@material-ui/core'; -import PaletteIcon from '@material-ui/icons/PaletteSharp'; +} from '@mui/material'; +import PaletteIcon from '@mui/icons-material/PaletteSharp'; import PropTypes from 'prop-types'; /** @@ -48,7 +48,7 @@ export class ChangeThemeDialog extends Component { onClose={handleClose} open={open} > - + {t('changeTheme')} diff --git a/src/components/CollapsibleSection.js b/src/components/CollapsibleSection.js index 8773c9b6d9..15f057b719 100644 --- a/src/components/CollapsibleSection.js +++ b/src/components/CollapsibleSection.js @@ -1,8 +1,8 @@ import { Component } from 'react'; import PropTypes from 'prop-types'; -import Typography from '@material-ui/core/Typography'; -import KeyboardArrowDown from '@material-ui/icons/KeyboardArrowDownSharp'; -import KeyboardArrowUp from '@material-ui/icons/KeyboardArrowUpSharp'; +import Typography from '@mui/material/Typography'; +import KeyboardArrowDown from '@mui/icons-material/KeyboardArrowDownSharp'; +import KeyboardArrowUp from '@mui/icons-material/KeyboardArrowUpSharp'; import MiradorMenuButton from '../containers/MiradorMenuButton'; /** diff --git a/src/components/CollectionDialog.js b/src/components/CollectionDialog.js index 3dc335ba9b..7196841e04 100644 --- a/src/components/CollectionDialog.js +++ b/src/components/CollectionDialog.js @@ -10,9 +10,9 @@ import { MenuList, MenuItem, Typography, -} from '@material-ui/core'; -import ArrowBackIcon from '@material-ui/icons/ArrowBackSharp'; -import Skeleton from '@material-ui/lab/Skeleton'; +} from '@mui/material'; +import ArrowBackIcon from '@mui/icons-material/ArrowBackSharp'; +import Skeleton from '@mui/material/Skeleton'; import asArray from '../lib/asArray'; import { LabelValueMetadata } from './LabelValueMetadata'; import CollapsibleSection from '../containers/CollapsibleSection'; @@ -118,7 +118,7 @@ export class CollectionDialog extends Component { container={this.dialogContainer()} BackdropProps={this.backdropProps()} > - + @@ -179,7 +179,7 @@ export class CollectionDialog extends Component { BackdropProps={this.backdropProps()} open > - + { t(isMultipart ? 'multipartCollection' : 'collection') } diff --git a/src/components/CollectionInfo.js b/src/components/CollectionInfo.js index 4cd3d3961e..ead13a799b 100644 --- a/src/components/CollectionInfo.js +++ b/src/components/CollectionInfo.js @@ -1,8 +1,8 @@ import { Component } from 'react'; import PropTypes from 'prop-types'; -import Button from '@material-ui/core/Button'; -import Typography from '@material-ui/core/Typography'; -import ViewListIcon from '@material-ui/icons/ViewListSharp'; +import Button from '@mui/material/Button'; +import Typography from '@mui/material/Typography'; +import ViewListIcon from '@mui/icons-material/ViewListSharp'; import CollapsibleSection from '../containers/CollapsibleSection'; /** diff --git a/src/components/CompanionArea.js b/src/components/CompanionArea.js index bdf7610b6e..ea5c2c48af 100644 --- a/src/components/CompanionArea.js +++ b/src/components/CompanionArea.js @@ -1,8 +1,8 @@ import { Component } from 'react'; import PropTypes from 'prop-types'; -import Slide from '@material-ui/core/Slide'; -import ArrowLeftIcon from '@material-ui/icons/ArrowLeftSharp'; -import ArrowRightIcon from '@material-ui/icons/ArrowRightSharp'; +import Slide from '@mui/material/Slide'; +import ArrowLeftIcon from '@mui/icons-material/ArrowLeftSharp'; +import ArrowRightIcon from '@mui/icons-material/ArrowRightSharp'; import CompanionWindowFactory from '../containers/CompanionWindowFactory'; import MiradorMenuButton from '../containers/MiradorMenuButton'; import ns from '../config/css-ns'; diff --git a/src/components/CompanionWindow.js b/src/components/CompanionWindow.js index 9cf4fe29a4..a04054005d 100644 --- a/src/components/CompanionWindow.js +++ b/src/components/CompanionWindow.js @@ -1,11 +1,11 @@ import { Children, cloneElement, Component } from 'react'; import PropTypes from 'prop-types'; -import CloseIcon from '@material-ui/icons/CloseSharp'; -import OpenInNewIcon from '@material-ui/icons/OpenInNewSharp'; -import MoveIcon from '@material-ui/icons/DragIndicatorSharp'; -import Paper from '@material-ui/core/Paper'; -import Typography from '@material-ui/core/Typography'; -import Toolbar from '@material-ui/core/Toolbar'; +import CloseIcon from '@mui/icons-material/CloseSharp'; +import OpenInNewIcon from '@mui/icons-material/OpenInNewSharp'; +import MoveIcon from '@mui/icons-material/DragIndicatorSharp'; +import Paper from '@mui/material/Paper'; +import Typography from '@mui/material/Typography'; +import Toolbar from '@mui/material/Toolbar'; import { Rnd } from 'react-rnd'; import MiradorMenuButton from '../containers/MiradorMenuButton'; import ns from '../config/css-ns'; diff --git a/src/components/ErrorContent.js b/src/components/ErrorContent.js index d6e996ece4..03dc97643b 100644 --- a/src/components/ErrorContent.js +++ b/src/components/ErrorContent.js @@ -1,11 +1,11 @@ import { Component } from 'react'; import PropTypes from 'prop-types'; -import Accordion from '@material-ui/core/Accordion'; -import AccordionSummary from '@material-ui/core/AccordionSummary'; -import AccordionDetails from '@material-ui/core/AccordionDetails'; -import Typography from '@material-ui/core/Typography'; -import Alert from '@material-ui/lab/Alert'; -import ExpandMoreIcon from '@material-ui/icons/ExpandMore'; +import Accordion from '@mui/material/Accordion'; +import AccordionSummary from '@mui/material/AccordionSummary'; +import AccordionDetails from '@mui/material/AccordionDetails'; +import Typography from '@mui/material/Typography'; +import Alert from '@mui/material/Alert'; +import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; import { PluginHook } from './PluginHook'; /** */ diff --git a/src/components/ErrorDialog.js b/src/components/ErrorDialog.js index e9f5b342ae..182a1b256d 100644 --- a/src/components/ErrorDialog.js +++ b/src/components/ErrorDialog.js @@ -1,10 +1,10 @@ import { Component } from 'react'; -import Dialog from '@material-ui/core/Dialog'; -import DialogContent from '@material-ui/core/DialogContent'; -import DialogTitle from '@material-ui/core/DialogTitle'; +import Dialog from '@mui/material/Dialog'; +import DialogContent from '@mui/material/DialogContent'; +import DialogTitle from '@mui/material/DialogTitle'; import PropTypes from 'prop-types'; -import { DialogActions, DialogContentText, Typography } from '@material-ui/core'; -import Button from '@material-ui/core/Button'; +import { DialogActions, DialogContentText, Typography } from '@mui/material'; +import Button from '@mui/material/Button'; import { isUndefined } from 'lodash'; /** @@ -28,7 +28,7 @@ export class ErrorDialog extends Component { onClose={() => removeError(error.id)} open={hasError} > - + {t('errorDialogTitle')} diff --git a/src/components/FullScreenButton.js b/src/components/FullScreenButton.js index 2038fa9bc0..0aabc6722e 100644 --- a/src/components/FullScreenButton.js +++ b/src/components/FullScreenButton.js @@ -1,6 +1,6 @@ import { Component } from 'react'; -import FullscreenIcon from '@material-ui/icons/FullscreenSharp'; -import FullscreenExitIcon from '@material-ui/icons/FullscreenExitSharp'; +import FullscreenIcon from '@mui/icons-material/FullscreenSharp'; +import FullscreenExitIcon from '@mui/icons-material/FullscreenExitSharp'; import PropTypes from 'prop-types'; import MiradorMenuButton from '../containers/MiradorMenuButton'; import FullScreenContext from '../contexts/FullScreenContext'; diff --git a/src/components/GalleryView.js b/src/components/GalleryView.js index 66d0348db4..b273f16b50 100644 --- a/src/components/GalleryView.js +++ b/src/components/GalleryView.js @@ -1,6 +1,6 @@ import { Component } from 'react'; import PropTypes from 'prop-types'; -import Paper from '@material-ui/core/Paper'; +import Paper from '@mui/material/Paper'; import GalleryViewThumbnail from '../containers/GalleryViewThumbnail'; /** diff --git a/src/components/GalleryViewThumbnail.js b/src/components/GalleryViewThumbnail.js index e475c98518..8783c2b1ec 100644 --- a/src/components/GalleryViewThumbnail.js +++ b/src/components/GalleryViewThumbnail.js @@ -1,9 +1,9 @@ import { createRef, Component } from 'react'; import PropTypes from 'prop-types'; -import Avatar from '@material-ui/core/Avatar'; -import Chip from '@material-ui/core/Chip'; -import AnnotationIcon from '@material-ui/icons/CommentSharp'; -import SearchIcon from '@material-ui/icons/SearchSharp'; +import Avatar from '@mui/material/Avatar'; +import Chip from '@mui/material/Chip'; +import AnnotationIcon from '@mui/icons-material/CommentSharp'; +import SearchIcon from '@mui/icons-material/SearchSharp'; import classNames from 'classnames'; import { InView } from 'react-intersection-observer'; import MiradorCanvas from '../lib/MiradorCanvas'; @@ -139,7 +139,7 @@ export class GalleryViewThumbnail extends Component { { searchAnnotationsCount > 0 && ( + )} @@ -151,7 +151,7 @@ export class GalleryViewThumbnail extends Component { { (annotationsCount || 0) > 0 && ( + )} diff --git a/src/components/IIIFDropTarget.js b/src/components/IIIFDropTarget.js index 8b48beefc9..6a15f71230 100644 --- a/src/components/IIIFDropTarget.js +++ b/src/components/IIIFDropTarget.js @@ -1,7 +1,7 @@ import PropTypes from 'prop-types'; -import Backdrop from '@material-ui/core/Backdrop'; -import InsertDriveFileSharpIcon from '@material-ui/icons/InsertDriveFileSharp'; -import { grey } from '@material-ui/core/colors'; +import Backdrop from '@mui/material/Backdrop'; +import InsertDriveFileSharpIcon from '@mui/icons-material/InsertDriveFileSharp'; +import { grey } from '@mui/material/colors'; import { v4 as uuid } from 'uuid'; import { NativeTypes } from 'react-dnd-html5-backend'; import { useDrop } from 'react-dnd'; diff --git a/src/components/IIIFThumbnail.js b/src/components/IIIFThumbnail.js index ade25534a6..f36b6aeb4b 100644 --- a/src/components/IIIFThumbnail.js +++ b/src/components/IIIFThumbnail.js @@ -2,7 +2,7 @@ import { Component, useMemo, useEffect, useState, } from 'react'; import PropTypes from 'prop-types'; -import Typography from '@material-ui/core/Typography'; +import Typography from '@mui/material/Typography'; import { useInView } from 'react-intersection-observer'; import classNames from 'classnames'; import getThumbnail from '../lib/ThumbnailFactory'; diff --git a/src/components/LabelValueMetadata.js b/src/components/LabelValueMetadata.js index 9cb73df271..b1fe6c9a29 100644 --- a/src/components/LabelValueMetadata.js +++ b/src/components/LabelValueMetadata.js @@ -1,6 +1,6 @@ import { Component } from 'react'; import PropTypes from 'prop-types'; -import Typography from '@material-ui/core/Typography'; +import Typography from '@mui/material/Typography'; import SanitizedHtml from '../containers/SanitizedHtml'; import ns from '../config/css-ns'; diff --git a/src/components/LanguageSettings.js b/src/components/LanguageSettings.js index 7901c4e440..1affbeffc0 100644 --- a/src/components/LanguageSettings.js +++ b/src/components/LanguageSettings.js @@ -1,8 +1,8 @@ import { Component } from 'react'; -import ListItemIcon from '@material-ui/core/ListItemIcon'; -import ListItemText from '@material-ui/core/ListItemText'; -import MenuItem from '@material-ui/core/MenuItem'; -import CheckIcon from '@material-ui/icons/CheckSharp'; +import ListItemIcon from '@mui/material/ListItemIcon'; +import ListItemText from '@mui/material/ListItemText'; +import MenuItem from '@mui/material/MenuItem'; +import CheckIcon from '@mui/icons-material/CheckSharp'; import PropTypes from 'prop-types'; /** diff --git a/src/components/LocalePicker.js b/src/components/LocalePicker.js index beb212324e..be28917226 100644 --- a/src/components/LocalePicker.js +++ b/src/components/LocalePicker.js @@ -1,9 +1,9 @@ import { Component } from 'react'; import PropTypes from 'prop-types'; -import MenuItem from '@material-ui/core/MenuItem'; -import FormControl from '@material-ui/core/FormControl'; -import Select from '@material-ui/core/Select'; -import Typography from '@material-ui/core/Typography'; +import MenuItem from '@mui/material/MenuItem'; +import FormControl from '@mui/material/FormControl'; +import Select from '@mui/material/Select'; +import Typography from '@mui/material/Typography'; /** * Provide a locale picker diff --git a/src/components/ManifestForm.js b/src/components/ManifestForm.js index 18d304cd6d..a37b71a3d8 100644 --- a/src/components/ManifestForm.js +++ b/src/components/ManifestForm.js @@ -1,8 +1,8 @@ import { Component } from 'react'; import PropTypes from 'prop-types'; -import Button from '@material-ui/core/Button'; -import Grid from '@material-ui/core/Grid'; -import TextField from '@material-ui/core/TextField'; +import Button from '@mui/material/Button'; +import Grid from '@mui/material/Grid'; +import TextField from '@mui/material/TextField'; /** * Provides a form for user input of a manifest url diff --git a/src/components/ManifestInfo.js b/src/components/ManifestInfo.js index 4d9b233925..e465a054da 100644 --- a/src/components/ManifestInfo.js +++ b/src/components/ManifestInfo.js @@ -1,6 +1,6 @@ import { Component } from 'react'; import PropTypes from 'prop-types'; -import Typography from '@material-ui/core/Typography'; +import Typography from '@mui/material/Typography'; import CollapsibleSection from '../containers/CollapsibleSection'; import SanitizedHtml from '../containers/SanitizedHtml'; import { LabelValueMetadata } from './LabelValueMetadata'; diff --git a/src/components/ManifestListItem.js b/src/components/ManifestListItem.js index accd5ede56..56e0209f2a 100644 --- a/src/components/ManifestListItem.js +++ b/src/components/ManifestListItem.js @@ -1,10 +1,10 @@ import { Component } from 'react'; import PropTypes from 'prop-types'; -import ListItem from '@material-ui/core/ListItem'; -import ButtonBase from '@material-ui/core/ButtonBase'; -import Grid from '@material-ui/core/Grid'; -import Typography from '@material-ui/core/Typography'; -import Skeleton from '@material-ui/lab/Skeleton'; +import ListItem from '@mui/material/ListItem'; +import ButtonBase from '@mui/material/ButtonBase'; +import Grid from '@mui/material/Grid'; +import Typography from '@mui/material/Typography'; +import Skeleton from '@mui/material/Skeleton'; import { Img } from 'react-image'; import ManifestListItemError from '../containers/ManifestListItemError'; import ns from '../config/css-ns'; @@ -68,7 +68,7 @@ export class ManifestListItem extends Component { const placeholder = ( - + @@ -78,7 +78,7 @@ export class ManifestListItem extends Component { - + ); @@ -113,7 +113,7 @@ export class ManifestListItem extends Component { height="80" unloader={( ) - : } + : } { isCollection && ( @@ -152,7 +152,7 @@ export class ManifestListItem extends Component { className={classes.logo} unloader={( + {badge ? {children} : children} diff --git a/src/components/NestedMenu.js b/src/components/NestedMenu.js index 65fcfeec57..b611077864 100644 --- a/src/components/NestedMenu.js +++ b/src/components/NestedMenu.js @@ -1,10 +1,10 @@ import { Component } from 'react'; import PropTypes from 'prop-types'; -import ListItemIcon from '@material-ui/core/ListItemIcon'; -import ListItemText from '@material-ui/core/ListItemText'; -import MenuItem from '@material-ui/core/MenuItem'; -import ExpandLess from '@material-ui/icons/ExpandLessSharp'; -import ExpandMore from '@material-ui/icons/ExpandMoreSharp'; +import ListItemIcon from '@mui/material/ListItemIcon'; +import ListItemText from '@mui/material/ListItemText'; +import MenuItem from '@mui/material/MenuItem'; +import ExpandLess from '@mui/icons-material/ExpandLessSharp'; +import ExpandMore from '@mui/icons-material/ExpandMoreSharp'; /** * NestedMenu ~ A presentation component to render a menu item and have diff --git a/src/components/ScrollIndicatedDialogContent.js b/src/components/ScrollIndicatedDialogContent.js index a8de5229d8..c8a7d53534 100644 --- a/src/components/ScrollIndicatedDialogContent.js +++ b/src/components/ScrollIndicatedDialogContent.js @@ -1,5 +1,5 @@ import PropTypes from 'prop-types'; -import DialogContent from '@material-ui/core/DialogContent'; +import DialogContent from '@mui/material/DialogContent'; /** * ScrollIndicatedDialogContent ~ Inject a style into the DialogContent component diff --git a/src/components/SearchHit.js b/src/components/SearchHit.js index 6314f2f6ad..6efcb04746 100644 --- a/src/components/SearchHit.js +++ b/src/components/SearchHit.js @@ -1,11 +1,11 @@ import { Component } from 'react'; import PropTypes from 'prop-types'; import clsx from 'clsx'; -import Button from '@material-ui/core/Button'; -import ListItem from '@material-ui/core/ListItem'; -import ListItemText from '@material-ui/core/ListItemText'; -import Typography from '@material-ui/core/Typography'; -import Chip from '@material-ui/core/Chip'; +import Button from '@mui/material/Button'; +import ListItem from '@mui/material/ListItem'; +import ListItemText from '@mui/material/ListItemText'; +import Typography from '@mui/material/Typography'; +import Chip from '@mui/material/Chip'; import SanitizedHtml from '../containers/SanitizedHtml'; import TruncatedHit from '../lib/TruncatedHit'; import { ScrollTo } from './ScrollTo'; diff --git a/src/components/SearchPanel.js b/src/components/SearchPanel.js index 6806376464..ea07c69f03 100644 --- a/src/components/SearchPanel.js +++ b/src/components/SearchPanel.js @@ -1,8 +1,8 @@ import { createRef, Component } from 'react'; import PropTypes from 'prop-types'; -import Button from '@material-ui/core/Button'; -import Chip from '@material-ui/core/Chip'; -import Typography from '@material-ui/core/Typography'; +import Button from '@mui/material/Button'; +import Chip from '@mui/material/Chip'; +import Typography from '@mui/material/Typography'; import CompanionWindow from '../containers/CompanionWindow'; import SearchPanelControls from '../containers/SearchPanelControls'; import SearchResults from '../containers/SearchResults'; diff --git a/src/components/SearchPanelControls.js b/src/components/SearchPanelControls.js index f16939757a..282213f432 100644 --- a/src/components/SearchPanelControls.js +++ b/src/components/SearchPanelControls.js @@ -3,10 +3,10 @@ import PropTypes from 'prop-types'; import deburr from 'lodash/deburr'; import debounce from 'lodash/debounce'; import isObject from 'lodash/isObject'; -import Autocomplete from '@material-ui/lab/Autocomplete'; -import CircularProgress from '@material-ui/core/CircularProgress'; -import TextField from '@material-ui/core/TextField'; -import SearchIcon from '@material-ui/icons/SearchSharp'; +import Autocomplete from '@mui/material/Autocomplete'; +import CircularProgress from '@mui/material/CircularProgress'; +import TextField from '@mui/material/TextField'; +import SearchIcon from '@mui/icons-material/SearchSharp'; import MiradorMenuButton from '../containers/MiradorMenuButton'; import SearchPanelNavigation from '../containers/SearchPanelNavigation'; @@ -122,46 +122,44 @@ export class SearchPanelControls extends Component { const { search, suggestions } = this.state; const id = `search-${companionWindowId}`; - return ( - <> -
- ( - deburr(getMatch(option).trim()).toLowerCase() - === deburr(getMatch(value).trim()).toLowerCase() - )} - noOptionsText="" - onChange={this.selectItem} - onInputChange={this.handleChange} - freeSolo - renderInput={params => ( - - - - - {Boolean(searchIsFetching) && ( - - )} - - ), - }} - /> - )} - /> - - - - ); + return <> +
+ ( + deburr(getMatch(option).trim()).toLowerCase() + === deburr(getMatch(value).trim()).toLowerCase() + )} + noOptionsText="" + onChange={this.selectItem} + onInputChange={this.handleChange} + freeSolo + renderInput={params => ( + + + + + {Boolean(searchIsFetching) && ( + + )} + + ), + }} + /> + )} + /> + + + ; } } diff --git a/src/components/SearchPanelNavigation.js b/src/components/SearchPanelNavigation.js index 72eb84e1fe..67bf3aaf41 100644 --- a/src/components/SearchPanelNavigation.js +++ b/src/components/SearchPanelNavigation.js @@ -1,8 +1,8 @@ import { Component } from 'react'; import PropTypes from 'prop-types'; -import ChevronLeftIcon from '@material-ui/icons/ChevronLeftSharp'; -import ChevronRightIcon from '@material-ui/icons/ChevronRightSharp'; -import Typography from '@material-ui/core/Typography'; +import ChevronLeftIcon from '@mui/icons-material/ChevronLeftSharp'; +import ChevronRightIcon from '@mui/icons-material/ChevronRightSharp'; +import Typography from '@mui/material/Typography'; import MiradorMenuButton from '../containers/MiradorMenuButton'; /** diff --git a/src/components/SearchResults.js b/src/components/SearchResults.js index c38e5c082a..616d364700 100644 --- a/src/components/SearchResults.js +++ b/src/components/SearchResults.js @@ -1,9 +1,9 @@ import { Component } from 'react'; import PropTypes from 'prop-types'; -import Button from '@material-ui/core/Button'; -import List from '@material-ui/core/List'; -import Typography from '@material-ui/core/Typography'; -import BackIcon from '@material-ui/icons/ArrowBackSharp'; +import Button from '@mui/material/Button'; +import List from '@mui/material/List'; +import Typography from '@mui/material/Typography'; +import BackIcon from '@mui/icons-material/ArrowBackSharp'; import { announce } from '@react-aria/live-announcer'; import SearchHit from '../containers/SearchHit'; import { ScrollTo } from './ScrollTo'; diff --git a/src/components/SelectCollection.js b/src/components/SelectCollection.js index cc75313933..c51af8f531 100644 --- a/src/components/SelectCollection.js +++ b/src/components/SelectCollection.js @@ -1,9 +1,9 @@ import { Component } from 'react'; import PropTypes from 'prop-types'; -import Button from '@material-ui/core/Button'; -import Grid from '@material-ui/core/Grid'; -import Typography from '@material-ui/core/Typography'; -import ListSharpIcon from '@material-ui/icons/ListSharp'; +import Button from '@mui/material/Button'; +import Grid from '@mui/material/Grid'; +import Typography from '@mui/material/Typography'; +import ListSharpIcon from '@mui/icons-material/ListSharp'; /** * diff --git a/src/components/SidebarIndexItem.js b/src/components/SidebarIndexItem.js index d6b1a96668..5882ad8c39 100644 --- a/src/components/SidebarIndexItem.js +++ b/src/components/SidebarIndexItem.js @@ -1,6 +1,6 @@ import { Component } from 'react'; import PropTypes from 'prop-types'; -import Typography from '@material-ui/core/Typography'; +import Typography from '@mui/material/Typography'; import classNames from 'classnames'; /** */ diff --git a/src/components/SidebarIndexList.js b/src/components/SidebarIndexList.js index 5cb8f6d860..ada50e6978 100644 --- a/src/components/SidebarIndexList.js +++ b/src/components/SidebarIndexList.js @@ -1,7 +1,7 @@ import { Component } from 'react'; import PropTypes from 'prop-types'; -import MenuList from '@material-ui/core/MenuList'; -import MenuItem from '@material-ui/core/MenuItem'; +import MenuList from '@mui/material/MenuList'; +import MenuItem from '@mui/material/MenuItem'; import { ScrollTo } from './ScrollTo'; import MiradorCanvas from '../lib/MiradorCanvas'; import SidebarIndexItem from '../containers/SidebarIndexItem'; diff --git a/src/components/SidebarIndexTableOfContents.js b/src/components/SidebarIndexTableOfContents.js index e897a4e411..bf43463d26 100644 --- a/src/components/SidebarIndexTableOfContents.js +++ b/src/components/SidebarIndexTableOfContents.js @@ -1,9 +1,9 @@ import { Component } from 'react'; import PropTypes from 'prop-types'; -import TreeView from '@material-ui/lab/TreeView'; -import ExpandMoreIcon from '@material-ui/icons/ExpandMore'; -import ChevronRightIcon from '@material-ui/icons/ChevronRight'; -import TreeItem from '@material-ui/lab/TreeItem'; +import TreeView from '@mui/lab/TreeView'; +import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; +import ChevronRightIcon from '@mui/icons-material/ChevronRight'; +import TreeItem from '@mui/lab/TreeItem'; import clsx from 'clsx'; import { ScrollTo } from './ScrollTo'; diff --git a/src/components/SidebarIndexThumbnail.js b/src/components/SidebarIndexThumbnail.js index 7abd1973d6..a5e685b2bc 100644 --- a/src/components/SidebarIndexThumbnail.js +++ b/src/components/SidebarIndexThumbnail.js @@ -1,6 +1,6 @@ import { Component } from 'react'; import PropTypes from 'prop-types'; -import Typography from '@material-ui/core/Typography'; +import Typography from '@mui/material/Typography'; import classNames from 'classnames'; import IIIFThumbnail from '../containers/IIIFThumbnail'; diff --git a/src/components/ThumbnailNavigation.js b/src/components/ThumbnailNavigation.js index 59219d4446..2ed735e990 100644 --- a/src/components/ThumbnailNavigation.js +++ b/src/components/ThumbnailNavigation.js @@ -1,6 +1,6 @@ import { createRef, Component } from 'react'; import PropTypes from 'prop-types'; -import Paper from '@material-ui/core/Paper'; +import Paper from '@mui/material/Paper'; import AutoSizer from 'react-virtualized-auto-sizer'; import { VariableSizeList as List } from 'react-window'; import classNames from 'classnames'; diff --git a/src/components/ViewerInfo.js b/src/components/ViewerInfo.js index 595ed37d0f..101c6742cc 100644 --- a/src/components/ViewerInfo.js +++ b/src/components/ViewerInfo.js @@ -1,5 +1,5 @@ import { Component } from 'react'; -import Typography from '@material-ui/core/Typography'; +import Typography from '@mui/material/Typography'; import PropTypes from 'prop-types'; import classNames from 'classnames'; import ns from '../config/css-ns'; diff --git a/src/components/ViewerNavigation.js b/src/components/ViewerNavigation.js index 0253cefa52..2614a7af46 100644 --- a/src/components/ViewerNavigation.js +++ b/src/components/ViewerNavigation.js @@ -1,5 +1,5 @@ import { Component } from 'react'; -import NavigationIcon from '@material-ui/icons/PlayCircleOutlineSharp'; +import NavigationIcon from '@mui/icons-material/PlayCircleOutlineSharp'; import PropTypes from 'prop-types'; import classNames from 'classnames'; import MiradorMenuButton from '../containers/MiradorMenuButton'; diff --git a/src/components/Window.js b/src/components/Window.js index 6033c76919..ba0e403c55 100644 --- a/src/components/Window.js +++ b/src/components/Window.js @@ -1,7 +1,7 @@ import { Component } from 'react'; import PropTypes from 'prop-types'; import cn from 'classnames'; -import Paper from '@material-ui/core/Paper'; +import Paper from '@mui/material/Paper'; import { MosaicWindowContext } from 'react-mosaic-component/lib/contextTypes'; import ns from '../config/css-ns'; import WindowTopBar from '../containers/WindowTopBar'; diff --git a/src/components/WindowAuthenticationBar.js b/src/components/WindowAuthenticationBar.js index bbfbd5a538..65c29f5cf0 100644 --- a/src/components/WindowAuthenticationBar.js +++ b/src/components/WindowAuthenticationBar.js @@ -1,11 +1,11 @@ import { Component } from 'react'; import PropTypes from 'prop-types'; -import Button from '@material-ui/core/Button'; -import Paper from '@material-ui/core/Paper'; -import Collapse from '@material-ui/core/Collapse'; -import DialogActions from '@material-ui/core/DialogActions'; -import Typography from '@material-ui/core/Typography'; -import LockIcon from '@material-ui/icons/LockSharp'; +import Button from '@mui/material/Button'; +import Paper from '@mui/material/Paper'; +import Collapse from '@mui/material/Collapse'; +import DialogActions from '@mui/material/DialogActions'; +import Typography from '@mui/material/Typography'; +import LockIcon from '@mui/icons-material/LockSharp'; import SanitizedHtml from '../containers/SanitizedHtml'; import { PluginHook } from './PluginHook'; diff --git a/src/components/WindowCanvasNavigationControls.js b/src/components/WindowCanvasNavigationControls.js index eaee4dc152..e03c28f643 100644 --- a/src/components/WindowCanvasNavigationControls.js +++ b/src/components/WindowCanvasNavigationControls.js @@ -1,8 +1,8 @@ import { Component } from 'react'; import PropTypes from 'prop-types'; import classNames from 'classnames'; -import Paper from '@material-ui/core/Paper'; -import Typography from '@material-ui/core/Typography'; +import Paper from '@mui/material/Paper'; +import Typography from '@mui/material/Typography'; import ZoomControls from '../containers/ZoomControls'; import ViewerInfo from '../containers/ViewerInfo'; import ViewerNavigation from '../containers/ViewerNavigation'; diff --git a/src/components/WindowList.js b/src/components/WindowList.js index 8ed83f402c..2db96ba42b 100644 --- a/src/components/WindowList.js +++ b/src/components/WindowList.js @@ -1,8 +1,8 @@ import { Component } from 'react'; -import Menu from '@material-ui/core/Menu'; -import MenuItem from '@material-ui/core/MenuItem'; -import ListItemText from '@material-ui/core/ListItemText'; -import ListSubheader from '@material-ui/core/ListSubheader'; +import Menu from '@mui/material/Menu'; +import MenuItem from '@mui/material/MenuItem'; +import ListItemText from '@mui/material/ListItemText'; +import ListSubheader from '@mui/material/ListSubheader'; import PropTypes from 'prop-types'; /** diff --git a/src/components/WindowListButton.js b/src/components/WindowListButton.js index 68a9bd2ac9..a1915b592c 100644 --- a/src/components/WindowListButton.js +++ b/src/components/WindowListButton.js @@ -1,5 +1,5 @@ import { Component } from 'react'; -import BookmarksIcon from '@material-ui/icons/BookmarksSharp'; +import BookmarksIcon from '@mui/icons-material/BookmarksSharp'; import PropTypes from 'prop-types'; import classNames from 'classnames'; import WindowList from '../containers/WindowList'; diff --git a/src/components/WindowSideBar.js b/src/components/WindowSideBar.js index c6fbc6ef3f..40c2120119 100644 --- a/src/components/WindowSideBar.js +++ b/src/components/WindowSideBar.js @@ -1,7 +1,7 @@ import { Component } from 'react'; import PropTypes from 'prop-types'; import classNames from 'classnames'; -import Drawer from '@material-ui/core/Drawer'; +import Drawer from '@mui/material/Drawer'; import WindowSideBarButtons from '../containers/WindowSideBarButtons'; /** diff --git a/src/components/WindowSideBarAnnotationsPanel.js b/src/components/WindowSideBarAnnotationsPanel.js index f5182e6443..75d99711dc 100644 --- a/src/components/WindowSideBarAnnotationsPanel.js +++ b/src/components/WindowSideBarAnnotationsPanel.js @@ -1,6 +1,6 @@ import { createRef, Component } from 'react'; import PropTypes from 'prop-types'; -import Typography from '@material-ui/core/Typography'; +import Typography from '@mui/material/Typography'; import AnnotationSettings from '../containers/AnnotationSettings'; import CanvasAnnotations from '../containers/CanvasAnnotations'; import CompanionWindow from '../containers/CompanionWindow'; diff --git a/src/components/WindowSideBarButtons.js b/src/components/WindowSideBarButtons.js index e4b0a2f6cc..4ae0df3578 100644 --- a/src/components/WindowSideBarButtons.js +++ b/src/components/WindowSideBarButtons.js @@ -1,14 +1,14 @@ import { Component } from 'react'; import PropTypes from 'prop-types'; -import Badge from '@material-ui/core/Badge'; -import Tabs from '@material-ui/core/Tabs'; -import Tab from '@material-ui/core/Tab'; -import Tooltip from '@material-ui/core/Tooltip'; -import InfoIcon from '@material-ui/icons/InfoSharp'; -import AnnotationIcon from '@material-ui/icons/CommentSharp'; -import AttributionIcon from '@material-ui/icons/CopyrightSharp'; -import LayersIcon from '@material-ui/icons/LayersSharp'; -import SearchIcon from '@material-ui/icons/SearchSharp'; +import Badge from '@mui/material/Badge'; +import Tabs from '@mui/material/Tabs'; +import Tab from '@mui/material/Tab'; +import Tooltip from '@mui/material/Tooltip'; +import InfoIcon from '@mui/icons-material/InfoSharp'; +import AnnotationIcon from '@mui/icons-material/CommentSharp'; +import AttributionIcon from '@mui/icons-material/CopyrightSharp'; +import LayersIcon from '@mui/icons-material/LayersSharp'; +import SearchIcon from '@mui/icons-material/SearchSharp'; import CanvasIndexIcon from './icons/CanvasIndexIcon'; /** */ diff --git a/src/components/WindowSideBarCanvasPanel.js b/src/components/WindowSideBarCanvasPanel.js index d785b5abe2..e403fee48a 100644 --- a/src/components/WindowSideBarCanvasPanel.js +++ b/src/components/WindowSideBarCanvasPanel.js @@ -1,17 +1,17 @@ import { createRef, Component } from 'react'; import PropTypes from 'prop-types'; -import Tabs from '@material-ui/core/Tabs'; -import Tab from '@material-ui/core/Tab'; -import Tooltip from '@material-ui/core/Tooltip'; -import Button from '@material-ui/core/Button'; -import ItemListIcon from '@material-ui/icons/ReorderSharp'; -import TocIcon from '@material-ui/icons/SortSharp'; -import ThumbnailListIcon from '@material-ui/icons/ViewListSharp'; -import Typography from '@material-ui/core/Typography'; -import ArrowForwardIcon from '@material-ui/icons/ArrowForwardSharp'; -import FormControl from '@material-ui/core/FormControl'; -import Select from '@material-ui/core/Select'; -import MenuItem from '@material-ui/core/MenuItem'; +import Tabs from '@mui/material/Tabs'; +import Tab from '@mui/material/Tab'; +import Tooltip from '@mui/material/Tooltip'; +import Button from '@mui/material/Button'; +import ItemListIcon from '@mui/icons-material/ReorderSharp'; +import TocIcon from '@mui/icons-material/SortSharp'; +import ThumbnailListIcon from '@mui/icons-material/ViewListSharp'; +import Typography from '@mui/material/Typography'; +import ArrowForwardIcon from '@mui/icons-material/ArrowForwardSharp'; +import FormControl from '@mui/material/FormControl'; +import Select from '@mui/material/Select'; +import MenuItem from '@mui/material/MenuItem'; import CompanionWindow from '../containers/CompanionWindow'; import SidebarIndexList from '../containers/SidebarIndexList'; import SidebarIndexTableOfContents from '../containers/SidebarIndexTableOfContents'; diff --git a/src/components/WindowSideBarCollectionPanel.js b/src/components/WindowSideBarCollectionPanel.js index a6964ca777..a2b5e23755 100644 --- a/src/components/WindowSideBarCollectionPanel.js +++ b/src/components/WindowSideBarCollectionPanel.js @@ -1,14 +1,14 @@ import { Component } from 'react'; import PropTypes from 'prop-types'; -import List from '@material-ui/core/List'; -import ListItem from '@material-ui/core/ListItem'; -import ListItemIcon from '@material-ui/core/ListItemIcon'; -import ListItemText from '@material-ui/core/ListItemText'; -import MenuList from '@material-ui/core/MenuList'; -import MenuItem from '@material-ui/core/MenuItem'; -import Typography from '@material-ui/core/Typography'; -import Skeleton from '@material-ui/lab/Skeleton'; -import ArrowUpwardIcon from '@material-ui/icons/ArrowUpwardSharp'; +import List from '@mui/material/List'; +import ListItem from '@mui/material/ListItem'; +import ListItemIcon from '@mui/material/ListItemIcon'; +import ListItemText from '@mui/material/ListItemText'; +import MenuList from '@mui/material/MenuList'; +import MenuItem from '@mui/material/MenuItem'; +import Typography from '@mui/material/Typography'; +import Skeleton from '@mui/material/Skeleton'; +import ArrowUpwardIcon from '@mui/icons-material/ArrowUpwardSharp'; import CompanionWindow from '../containers/CompanionWindow'; import IIIFThumbnail from '../containers/IIIFThumbnail'; diff --git a/src/components/WindowThumbnailSettings.js b/src/components/WindowThumbnailSettings.js index 22b7eb57db..603b55a787 100644 --- a/src/components/WindowThumbnailSettings.js +++ b/src/components/WindowThumbnailSettings.js @@ -1,8 +1,8 @@ import { Component } from 'react'; -import FormControlLabel from '@material-ui/core/FormControlLabel'; -import ListSubheader from '@material-ui/core/ListSubheader'; -import MenuItem from '@material-ui/core/MenuItem'; -import ThumbnailsOffIcon from '@material-ui/icons/CropDinSharp'; +import FormControlLabel from '@mui/material/FormControlLabel'; +import ListSubheader from '@mui/material/ListSubheader'; +import MenuItem from '@mui/material/MenuItem'; +import ThumbnailsOffIcon from '@mui/icons-material/CropDinSharp'; import PropTypes from 'prop-types'; import ThumbnailNavigationBottomIcon from './icons/ThumbnailNavigationBottomIcon'; import ThumbnailNavigationRightIcon from './icons/ThumbnailNavigationRightIcon'; diff --git a/src/components/WindowTopBar.js b/src/components/WindowTopBar.js index cf204b2f88..3c510b00da 100644 --- a/src/components/WindowTopBar.js +++ b/src/components/WindowTopBar.js @@ -1,9 +1,9 @@ import { Component } from 'react'; import PropTypes from 'prop-types'; -import MenuIcon from '@material-ui/icons/MenuSharp'; -import CloseIcon from '@material-ui/icons/CloseSharp'; -import Toolbar from '@material-ui/core/Toolbar'; -import AppBar from '@material-ui/core/AppBar'; +import MenuIcon from '@mui/icons-material/MenuSharp'; +import CloseIcon from '@mui/icons-material/CloseSharp'; +import Toolbar from '@mui/material/Toolbar'; +import AppBar from '@mui/material/AppBar'; import classNames from 'classnames'; import WindowTopMenuButton from '../containers/WindowTopMenuButton'; import WindowTopBarPluginArea from '../containers/WindowTopBarPluginArea'; diff --git a/src/components/WindowTopBarPluginMenu.js b/src/components/WindowTopBarPluginMenu.js index 78f95a73ec..70a82fc513 100644 --- a/src/components/WindowTopBarPluginMenu.js +++ b/src/components/WindowTopBarPluginMenu.js @@ -1,7 +1,7 @@ import { Component } from 'react'; import PropTypes from 'prop-types'; -import MoreVertIcon from '@material-ui/icons/MoreVertSharp'; -import Menu from '@material-ui/core/Menu'; +import MoreVertIcon from '@mui/icons-material/MoreVertSharp'; +import Menu from '@mui/material/Menu'; import MiradorMenuButton from '../containers/MiradorMenuButton'; import { PluginHook } from './PluginHook'; diff --git a/src/components/WindowTopBarTitle.js b/src/components/WindowTopBarTitle.js index b47f00c2c2..866eb19d2b 100644 --- a/src/components/WindowTopBarTitle.js +++ b/src/components/WindowTopBarTitle.js @@ -1,8 +1,8 @@ import { Component } from 'react'; import PropTypes from 'prop-types'; -import Typography from '@material-ui/core/Typography'; -import Skeleton from '@material-ui/lab/Skeleton'; -import ErrorIcon from '@material-ui/icons/ErrorOutlineSharp'; +import Typography from '@mui/material/Typography'; +import Skeleton from '@mui/material/Skeleton'; +import ErrorIcon from '@mui/icons-material/ErrorOutlineSharp'; /** */ function TitleTypography({ children, ...props }) { diff --git a/src/components/WindowTopMenu.js b/src/components/WindowTopMenu.js index d978876a33..66d943bacb 100644 --- a/src/components/WindowTopMenu.js +++ b/src/components/WindowTopMenu.js @@ -1,6 +1,6 @@ import { Component } from 'react'; -import Menu from '@material-ui/core//Menu'; -import ListSubheader from '@material-ui/core/ListSubheader'; +import Menu from '@mui/material//Menu'; +import ListSubheader from '@mui/material/ListSubheader'; import PropTypes from 'prop-types'; import WindowThumbnailSettings from '../containers/WindowThumbnailSettings'; import WindowViewSettings from '../containers/WindowViewSettings'; diff --git a/src/components/WindowViewSettings.js b/src/components/WindowViewSettings.js index 90c56b8232..8b751fc222 100644 --- a/src/components/WindowViewSettings.js +++ b/src/components/WindowViewSettings.js @@ -1,9 +1,9 @@ import { Component } from 'react'; -import FormControlLabel from '@material-ui/core/FormControlLabel'; -import MenuItem from '@material-ui/core/MenuItem'; -import ListSubheader from '@material-ui/core/ListSubheader'; -import SingleIcon from '@material-ui/icons/CropOriginalSharp'; -import ScrollViewIcon from '@material-ui/icons/ViewColumn'; +import FormControlLabel from '@mui/material/FormControlLabel'; +import MenuItem from '@mui/material/MenuItem'; +import ListSubheader from '@mui/material/ListSubheader'; +import SingleIcon from '@mui/icons-material/CropOriginalSharp'; +import ScrollViewIcon from '@mui/icons-material/ViewColumn'; import PropTypes from 'prop-types'; import BookViewIcon from './icons/BookViewIcon'; import GalleryViewIcon from './icons/GalleryViewIcon'; diff --git a/src/components/Workspace.js b/src/components/Workspace.js index f99f61d4e4..b16db361ab 100644 --- a/src/components/Workspace.js +++ b/src/components/Workspace.js @@ -1,8 +1,8 @@ import { Component } from 'react'; import PropTypes from 'prop-types'; import classNames from 'classnames'; -import Grid from '@material-ui/core/Grid'; -import Typography from '@material-ui/core/Typography'; +import Grid from '@mui/material/Grid'; +import Typography from '@mui/material/Typography'; import Window from '../containers/Window'; import WorkspaceMosaic from '../containers/WorkspaceMosaic'; import WorkspaceElastic from '../containers/WorkspaceElastic'; diff --git a/src/components/WorkspaceAdd.js b/src/components/WorkspaceAdd.js index 172c8d3474..1f34107ca6 100644 --- a/src/components/WorkspaceAdd.js +++ b/src/components/WorkspaceAdd.js @@ -1,16 +1,16 @@ import { createRef, Component } from 'react'; import PropTypes from 'prop-types'; import classNames from 'classnames'; -import AddIcon from '@material-ui/icons/AddSharp'; -import ExpandMoreIcon from '@material-ui/icons/ExpandMoreSharp'; -import AppBar from '@material-ui/core/AppBar'; -import Drawer from '@material-ui/core/Drawer'; -import Grid from '@material-ui/core/Grid'; -import Fab from '@material-ui/core/Fab'; -import List from '@material-ui/core/List'; -import Paper from '@material-ui/core/Paper'; -import Toolbar from '@material-ui/core/Toolbar'; -import Typography from '@material-ui/core/Typography'; +import AddIcon from '@mui/icons-material/AddSharp'; +import ExpandMoreIcon from '@mui/icons-material/ExpandMoreSharp'; +import AppBar from '@mui/material/AppBar'; +import Drawer from '@mui/material/Drawer'; +import Grid from '@mui/material/Grid'; +import Fab from '@mui/material/Fab'; +import List from '@mui/material/List'; +import Paper from '@mui/material/Paper'; +import Toolbar from '@mui/material/Toolbar'; +import Typography from '@mui/material/Typography'; import ns from '../config/css-ns'; import ManifestForm from '../containers/ManifestForm'; import ManifestListItem from '../containers/ManifestListItem'; diff --git a/src/components/WorkspaceAddButton.js b/src/components/WorkspaceAddButton.js index b80ec81369..de3e0f6c7c 100644 --- a/src/components/WorkspaceAddButton.js +++ b/src/components/WorkspaceAddButton.js @@ -1,9 +1,9 @@ import { Component } from 'react'; import PropTypes from 'prop-types'; -import Fab from '@material-ui/core/Fab'; -import Tooltip from '@material-ui/core/Tooltip'; -import AddIcon from '@material-ui/icons/AddSharp'; -import CloseIcon from '@material-ui/icons/CloseSharp'; +import Fab from '@mui/material/Fab'; +import Tooltip from '@mui/material/Tooltip'; +import AddIcon from '@mui/icons-material/AddSharp'; +import CloseIcon from '@mui/icons-material/CloseSharp'; /** */ diff --git a/src/components/WorkspaceControlPanel.js b/src/components/WorkspaceControlPanel.js index 376558285d..92838af76c 100644 --- a/src/components/WorkspaceControlPanel.js +++ b/src/components/WorkspaceControlPanel.js @@ -1,8 +1,8 @@ import { Component } from 'react'; import PropTypes from 'prop-types'; import classNames from 'classnames'; -import AppBar from '@material-ui/core/AppBar'; -import Toolbar from '@material-ui/core/Toolbar'; +import AppBar from '@mui/material/AppBar'; +import Toolbar from '@mui/material/Toolbar'; import WorkspaceAddButton from '../containers/WorkspaceAddButton'; import WorkspaceControlPanelButtons from '../containers/WorkspaceControlPanelButtons'; import Branding from '../containers/Branding'; diff --git a/src/components/WorkspaceExport.js b/src/components/WorkspaceExport.js index 6e2a1b18a6..38a143a2da 100644 --- a/src/components/WorkspaceExport.js +++ b/src/components/WorkspaceExport.js @@ -1,17 +1,17 @@ import { Component } from 'react'; -import Button from '@material-ui/core/Button'; -import Dialog from '@material-ui/core/Dialog'; -import DialogActions from '@material-ui/core/DialogActions'; -import DialogTitle from '@material-ui/core/DialogTitle'; -import DialogContent from '@material-ui/core/DialogContent'; -import Typography from '@material-ui/core/Typography'; -import Snackbar from '@material-ui/core/Snackbar'; -import IconButton from '@material-ui/core/IconButton'; -import ExpandMoreIcon from '@material-ui/icons/ExpandMore'; -import CloseIcon from '@material-ui/icons/Close'; -import Accordion from '@material-ui/core/Accordion'; -import AccordionSummary from '@material-ui/core/AccordionSummary'; -import AccordionDetails from '@material-ui/core/AccordionDetails'; +import Button from '@mui/material/Button'; +import Dialog from '@mui/material/Dialog'; +import DialogActions from '@mui/material/DialogActions'; +import DialogTitle from '@mui/material/DialogTitle'; +import DialogContent from '@mui/material/DialogContent'; +import Typography from '@mui/material/Typography'; +import Snackbar from '@mui/material/Snackbar'; +import IconButton from '@mui/material/IconButton'; +import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; +import CloseIcon from '@mui/icons-material/Close'; +import Accordion from '@mui/material/Accordion'; +import AccordionSummary from '@mui/material/AccordionSummary'; +import AccordionDetails from '@mui/material/AccordionDetails'; import PropTypes from 'prop-types'; import { CopyToClipboard } from 'react-copy-to-clipboard'; @@ -88,7 +88,7 @@ export class WorkspaceExport extends Component { fullWidth maxWidth="sm" > - + {t('downloadExport')} diff --git a/src/components/WorkspaceImport.js b/src/components/WorkspaceImport.js index b0f2c34727..8f3e43783d 100644 --- a/src/components/WorkspaceImport.js +++ b/src/components/WorkspaceImport.js @@ -1,13 +1,13 @@ import { Component } from 'react'; -import Dialog from '@material-ui/core/Dialog'; -import DialogTitle from '@material-ui/core/DialogTitle'; +import Dialog from '@mui/material/Dialog'; +import DialogTitle from '@mui/material/DialogTitle'; import PropTypes from 'prop-types'; import { DialogActions, TextField, Typography, -} from '@material-ui/core'; -import Button from '@material-ui/core/Button'; +} from '@mui/material'; +import Button from '@mui/material/Button'; import ScrollIndicatedDialogContent from '../containers/ScrollIndicatedDialogContent'; /** @@ -73,7 +73,7 @@ export class WorkspaceImport extends Component { fullWidth maxWidth="sm" > - + {t('importWorkspace')} diff --git a/src/components/WorkspaceMenu.js b/src/components/WorkspaceMenu.js index 65e01ba2ed..07ad5455f5 100644 --- a/src/components/WorkspaceMenu.js +++ b/src/components/WorkspaceMenu.js @@ -1,7 +1,7 @@ import { Component } from 'react'; -import Menu from '@material-ui/core/Menu'; -import MenuItem from '@material-ui/core/MenuItem'; -import Typography from '@material-ui/core/Typography'; +import Menu from '@mui/material/Menu'; +import MenuItem from '@mui/material/MenuItem'; +import Typography from '@mui/material/Typography'; import PropTypes from 'prop-types'; import LanguageSettings from '../containers/LanguageSettings'; import { NestedMenu } from './NestedMenu'; diff --git a/src/components/WorkspaceMenuButton.js b/src/components/WorkspaceMenuButton.js index 71d8db245f..8a993710a4 100644 --- a/src/components/WorkspaceMenuButton.js +++ b/src/components/WorkspaceMenuButton.js @@ -1,5 +1,5 @@ import { Component } from 'react'; -import SettingsIcon from '@material-ui/icons/SettingsSharp'; +import SettingsIcon from '@mui/icons-material/SettingsSharp'; import PropTypes from 'prop-types'; import classNames from 'classnames'; import WorkspaceMenu from '../containers/WorkspaceMenu'; diff --git a/src/components/WorkspaceOptionsButton.js b/src/components/WorkspaceOptionsButton.js index bfde64bfb7..e3783c8693 100644 --- a/src/components/WorkspaceOptionsButton.js +++ b/src/components/WorkspaceOptionsButton.js @@ -1,7 +1,7 @@ import { Component } from 'react'; import PropTypes from 'prop-types'; import classNames from 'classnames'; -import MoreHorizontalIcon from '@material-ui/icons/MoreHorizSharp'; +import MoreHorizontalIcon from '@mui/icons-material/MoreHorizSharp'; import MiradorMenuButton from '../containers/MiradorMenuButton'; import WorkspaceOptionsMenu from '../containers/WorkspaceOptionsMenu'; diff --git a/src/components/WorkspaceOptionsMenu.js b/src/components/WorkspaceOptionsMenu.js index 6da23860f7..75aac27a94 100644 --- a/src/components/WorkspaceOptionsMenu.js +++ b/src/components/WorkspaceOptionsMenu.js @@ -1,11 +1,11 @@ import { Component } from 'react'; import PropTypes from 'prop-types'; -import ImportIcon from '@material-ui/icons/Input'; -import SaveAltIcon from '@material-ui/icons/SaveAltSharp'; -import ListItemIcon from '@material-ui/core/ListItemIcon'; -import Menu from '@material-ui/core/Menu'; -import MenuItem from '@material-ui/core/MenuItem'; -import Typography from '@material-ui/core/Typography'; +import ImportIcon from '@mui/icons-material/Input'; +import SaveAltIcon from '@mui/icons-material/SaveAltSharp'; +import ListItemIcon from '@mui/material/ListItemIcon'; +import Menu from '@mui/material/Menu'; +import MenuItem from '@mui/material/MenuItem'; +import Typography from '@mui/material/Typography'; import WorkspaceExport from '../containers/WorkspaceExport'; import WorkspaceImport from '../containers/WorkspaceImport'; import { PluginHook } from './PluginHook'; diff --git a/src/components/WorkspaceSelectionDialog.js b/src/components/WorkspaceSelectionDialog.js index f1efbf48d9..44b014f94d 100644 --- a/src/components/WorkspaceSelectionDialog.js +++ b/src/components/WorkspaceSelectionDialog.js @@ -1,13 +1,13 @@ import { Component } from 'react'; -import Dialog from '@material-ui/core/Dialog'; -import DialogTitle from '@material-ui/core/DialogTitle'; +import Dialog from '@mui/material/Dialog'; +import DialogTitle from '@mui/material/DialogTitle'; import { Card, CardContent, MenuList, MenuItem, Typography, -} from '@material-ui/core'; +} from '@mui/material'; import PropTypes from 'prop-types'; import WorkspaceTypeElasticIcon from './icons/WorkspaceTypeElasticIcon'; import WorkspaceTypeMosaicIcon from './icons/WorkspaceTypeMosaicIcon'; @@ -52,7 +52,7 @@ export class WorkspaceSelectionDialog extends Component { onClose={handleClose} open={open} > - + {t('workspaceSelectionTitle')} diff --git a/src/components/ZoomControls.js b/src/components/ZoomControls.js index 133c9950a8..e0cb0dbc4a 100644 --- a/src/components/ZoomControls.js +++ b/src/components/ZoomControls.js @@ -1,6 +1,6 @@ import { Component } from 'react'; -import AddCircleIcon from '@material-ui/icons/AddCircleOutlineSharp'; -import RemoveCircleIcon from '@material-ui/icons/RemoveCircleOutlineSharp'; +import AddCircleIcon from '@mui/icons-material/AddCircleOutlineSharp'; +import RemoveCircleIcon from '@mui/icons-material/RemoveCircleOutlineSharp'; import PropTypes from 'prop-types'; import RestoreZoomIcon from './icons/RestoreZoomIcon'; import MiradorMenuButton from '../containers/MiradorMenuButton'; diff --git a/src/components/icons/BookViewIcon.js b/src/components/icons/BookViewIcon.js index a6668b1f30..d26b9fe3cc 100644 --- a/src/components/icons/BookViewIcon.js +++ b/src/components/icons/BookViewIcon.js @@ -1,4 +1,4 @@ -import SvgIcon from '@material-ui/core/SvgIcon'; +import SvgIcon from '@mui/material/SvgIcon'; /** * BookViewIcon ~ diff --git a/src/components/icons/CanvasIndexIcon.js b/src/components/icons/CanvasIndexIcon.js index 8d5af98b10..2bac4808d0 100644 --- a/src/components/icons/CanvasIndexIcon.js +++ b/src/components/icons/CanvasIndexIcon.js @@ -1,4 +1,4 @@ -import SvgIcon from '@material-ui/core/SvgIcon'; +import SvgIcon from '@mui/material/SvgIcon'; /** * Render the canvas index svg diff --git a/src/components/icons/GalleryViewIcon.js b/src/components/icons/GalleryViewIcon.js index 9a41003340..cccd9d2c71 100644 --- a/src/components/icons/GalleryViewIcon.js +++ b/src/components/icons/GalleryViewIcon.js @@ -1,4 +1,4 @@ -import SvgIcon from '@material-ui/core/SvgIcon'; +import SvgIcon from '@mui/material/SvgIcon'; /** * GalleryViewIcon ~ diff --git a/src/components/icons/MiradorIcon.js b/src/components/icons/MiradorIcon.js index 920256dd9b..43301fe4cb 100644 --- a/src/components/icons/MiradorIcon.js +++ b/src/components/icons/MiradorIcon.js @@ -1,4 +1,4 @@ -import SvgIcon from '@material-ui/core/SvgIcon'; +import SvgIcon from '@mui/material/SvgIcon'; /** * ThumbnailNavigationRightIcon ~ diff --git a/src/components/icons/RestoreZoomIcon.js b/src/components/icons/RestoreZoomIcon.js index 2005e6e89c..f1cf1e2d1e 100644 --- a/src/components/icons/RestoreZoomIcon.js +++ b/src/components/icons/RestoreZoomIcon.js @@ -1,4 +1,4 @@ -import SvgIcon from '@material-ui/core/SvgIcon'; +import SvgIcon from '@mui/material/SvgIcon'; /** * RestoreZoomIcon ~ diff --git a/src/components/icons/ThumbnailNavigationBottomIcon.js b/src/components/icons/ThumbnailNavigationBottomIcon.js index 5c7080a787..4ef2b95448 100644 --- a/src/components/icons/ThumbnailNavigationBottomIcon.js +++ b/src/components/icons/ThumbnailNavigationBottomIcon.js @@ -1,4 +1,4 @@ -import SvgIcon from '@material-ui/core/SvgIcon'; +import SvgIcon from '@mui/material/SvgIcon'; /** * ThumbnailNavigationBottomIcon ~ diff --git a/src/components/icons/ThumbnailNavigationRightIcon.js b/src/components/icons/ThumbnailNavigationRightIcon.js index 8f22b31d00..6690b01d28 100644 --- a/src/components/icons/ThumbnailNavigationRightIcon.js +++ b/src/components/icons/ThumbnailNavigationRightIcon.js @@ -1,4 +1,4 @@ -import SvgIcon from '@material-ui/core/SvgIcon'; +import SvgIcon from '@mui/material/SvgIcon'; /** * ThumbnailNavigationRightIcon ~ diff --git a/src/components/icons/WindowMaxIcon.js b/src/components/icons/WindowMaxIcon.js index 9590bbb180..3de34b6bf5 100644 --- a/src/components/icons/WindowMaxIcon.js +++ b/src/components/icons/WindowMaxIcon.js @@ -1,4 +1,4 @@ -import SvgIcon from '@material-ui/core/SvgIcon'; +import SvgIcon from '@mui/material/SvgIcon'; /** * WindowMaxIcon ~ diff --git a/src/components/icons/WindowMinIcon.js b/src/components/icons/WindowMinIcon.js index 7a2ef3be9c..3118b915f7 100644 --- a/src/components/icons/WindowMinIcon.js +++ b/src/components/icons/WindowMinIcon.js @@ -1,4 +1,4 @@ -import SvgIcon from '@material-ui/core/SvgIcon'; +import SvgIcon from '@mui/material/SvgIcon'; /** * WindowMinIcon ~ diff --git a/src/components/icons/WindowOptionsIcon.js b/src/components/icons/WindowOptionsIcon.js index 3e365c2930..e87dd28253 100644 --- a/src/components/icons/WindowOptionsIcon.js +++ b/src/components/icons/WindowOptionsIcon.js @@ -1,4 +1,4 @@ -import SvgIcon from '@material-ui/core/SvgIcon'; +import SvgIcon from '@mui/material/SvgIcon'; /** * WindowMinIcon ~ diff --git a/src/components/icons/WorkspaceTypeElasticIcon.js b/src/components/icons/WorkspaceTypeElasticIcon.js index c817330897..e1ee53918a 100644 --- a/src/components/icons/WorkspaceTypeElasticIcon.js +++ b/src/components/icons/WorkspaceTypeElasticIcon.js @@ -1,4 +1,4 @@ -import SvgIcon from '@material-ui/core/SvgIcon'; +import SvgIcon from '@mui/material/SvgIcon'; /** * ElasticWorkspaceIcon ~ diff --git a/src/components/icons/WorkspaceTypeMosaicIcon.js b/src/components/icons/WorkspaceTypeMosaicIcon.js index 5cdb0c34a1..c1724ee7e8 100644 --- a/src/components/icons/WorkspaceTypeMosaicIcon.js +++ b/src/components/icons/WorkspaceTypeMosaicIcon.js @@ -1,4 +1,4 @@ -import SvgIcon from '@material-ui/core/SvgIcon'; +import SvgIcon from '@mui/material/SvgIcon'; /** * WorkspaceTypeMosaicIcon ~ diff --git a/src/config/settings.js b/src/config/settings.js index 5aa08c8f99..68b011a27b 100644 --- a/src/config/settings.js +++ b/src/config/settings.js @@ -12,7 +12,7 @@ export default { themes: { dark: { palette: { - type: 'dark', + mode: 'dark', primary: { main: '#4db6ac', }, @@ -28,13 +28,13 @@ export default { }, light: { palette: { - type: 'light', + mode: 'light', } } }, theme: { // Sets up a MaterialUI theme. See https://material-ui.com/customization/default-theme/ palette: { - type: 'light', + mode: 'light', primary: { main: '#1967d2', // Controls the color of the Add button and current window indicator }, diff --git a/src/containers/AttributionPanel.js b/src/containers/AttributionPanel.js index 8e0801444d..a2315c2c6c 100644 --- a/src/containers/AttributionPanel.js +++ b/src/containers/AttributionPanel.js @@ -1,7 +1,7 @@ import { compose } from 'redux'; import { connect } from 'react-redux'; import { withTranslation } from 'react-i18next'; -import { withStyles } from '@material-ui/core/styles'; +import withStyles from '@mui/styles/withStyles'; import { withPlugins } from '../extend/withPlugins'; import { getManifestLogo, diff --git a/src/containers/AudioViewer.js b/src/containers/AudioViewer.js index e422c6d6b6..c39d973726 100644 --- a/src/containers/AudioViewer.js +++ b/src/containers/AudioViewer.js @@ -1,7 +1,7 @@ import { connect } from 'react-redux'; import { compose } from 'redux'; import { withTranslation } from 'react-i18next'; -import { withStyles } from '@material-ui/core'; +import withStyles from '@mui/styles/withStyles'; import { withPlugins } from '../extend/withPlugins'; import { AudioViewer } from '../components/AudioViewer'; import { getConfig, getVisibleCanvasAudioResources, getVisibleCanvasCaptions } from '../state/selectors'; diff --git a/src/containers/CanvasAnnotations.js b/src/containers/CanvasAnnotations.js index 5bebeae788..3e73035c78 100644 --- a/src/containers/CanvasAnnotations.js +++ b/src/containers/CanvasAnnotations.js @@ -1,7 +1,7 @@ import { compose } from 'redux'; import { connect } from 'react-redux'; import { withTranslation } from 'react-i18next'; -import { withStyles } from '@material-ui/core/styles'; +import withStyles from '@mui/styles/withStyles'; import { withPlugins } from '../extend/withPlugins'; import * as actions from '../state/actions'; import { diff --git a/src/containers/CanvasLayers.js b/src/containers/CanvasLayers.js index 87041bed96..0340e1cf6c 100644 --- a/src/containers/CanvasLayers.js +++ b/src/containers/CanvasLayers.js @@ -1,7 +1,7 @@ import { compose } from 'redux'; import { connect } from 'react-redux'; import { withTranslation } from 'react-i18next'; -import { withStyles } from '@material-ui/core/styles'; +import withStyles from '@mui/styles/withStyles'; import * as actions from '../state/actions'; import { getCanvasLabel, diff --git a/src/containers/ChangeThemeDialog.js b/src/containers/ChangeThemeDialog.js index ade8c4eeeb..a86bb231f9 100644 --- a/src/containers/ChangeThemeDialog.js +++ b/src/containers/ChangeThemeDialog.js @@ -1,6 +1,6 @@ import { compose } from 'redux'; import { connect } from 'react-redux'; -import { withStyles } from '@material-ui/core'; +import withStyles from '@mui/styles/withStyles'; import { withTranslation } from 'react-i18next'; import { withPlugins } from '../extend/withPlugins'; import * as actions from '../state/actions'; diff --git a/src/containers/CollapsibleSection.js b/src/containers/CollapsibleSection.js index 3daa9258b1..8954db7318 100644 --- a/src/containers/CollapsibleSection.js +++ b/src/containers/CollapsibleSection.js @@ -1,6 +1,6 @@ import { compose } from 'redux'; import { withTranslation } from 'react-i18next'; -import { withStyles } from '@material-ui/core/styles'; +import withStyles from '@mui/styles/withStyles'; import { CollapsibleSection } from '../components/CollapsibleSection'; const styles = { diff --git a/src/containers/CollectionDialog.js b/src/containers/CollectionDialog.js index 1920dee3cd..0cb2c2075c 100644 --- a/src/containers/CollectionDialog.js +++ b/src/containers/CollectionDialog.js @@ -1,6 +1,6 @@ import { compose } from 'redux'; import { connect } from 'react-redux'; -import { withStyles } from '@material-ui/core'; +import withStyles from '@mui/styles/withStyles'; import { withTranslation } from 'react-i18next'; import { withPlugins } from '../extend/withPlugins'; import * as actions from '../state/actions'; diff --git a/src/containers/CompanionArea.js b/src/containers/CompanionArea.js index 8ff8b9cb62..18573e5150 100644 --- a/src/containers/CompanionArea.js +++ b/src/containers/CompanionArea.js @@ -1,6 +1,6 @@ import { compose } from 'redux'; import { connect } from 'react-redux'; -import { withStyles } from '@material-ui/core'; +import withStyles from '@mui/styles/withStyles'; import { withTranslation } from 'react-i18next'; import { withPlugins } from '../extend/withPlugins'; import { diff --git a/src/containers/CompanionWindow.js b/src/containers/CompanionWindow.js index 9def7a3c3c..07cc893806 100644 --- a/src/containers/CompanionWindow.js +++ b/src/containers/CompanionWindow.js @@ -1,7 +1,7 @@ import { compose } from 'redux'; import { connect } from 'react-redux'; import { withTranslation } from 'react-i18next'; -import { withStyles } from '@material-ui/core'; +import withStyles from '@mui/styles/withStyles'; import { withSize } from 'react-sizeme'; import { withPlugins } from '../extend/withPlugins'; import { withRef } from '../extend/withRef'; diff --git a/src/containers/CustomPanel.js b/src/containers/CustomPanel.js index 493ad14633..fbd0ece03b 100644 --- a/src/containers/CustomPanel.js +++ b/src/containers/CustomPanel.js @@ -1,7 +1,7 @@ import { compose } from 'redux'; import { connect } from 'react-redux'; import { withTranslation } from 'react-i18next'; -import { withStyles } from '@material-ui/core/styles'; +import withStyles from '@mui/styles/withStyles'; import { withPlugins } from '../extend/withPlugins'; import { CustomPanel } from '../components/CustomPanel'; diff --git a/src/containers/ErrorContent.js b/src/containers/ErrorContent.js index 951d3e2015..2634e7bab6 100644 --- a/src/containers/ErrorContent.js +++ b/src/containers/ErrorContent.js @@ -1,7 +1,7 @@ import { compose } from 'redux'; import { connect } from 'react-redux'; import { withTranslation } from 'react-i18next'; -import { withStyles } from '@material-ui/core/styles'; +import withStyles from '@mui/styles/withStyles'; import { withPlugins } from '../extend/withPlugins'; import { ErrorContent } from '../components/ErrorContent'; import { diff --git a/src/containers/GalleryView.js b/src/containers/GalleryView.js index 6b916d755a..cbc04e253d 100644 --- a/src/containers/GalleryView.js +++ b/src/containers/GalleryView.js @@ -1,6 +1,6 @@ import { compose } from 'redux'; import { connect } from 'react-redux'; -import { withStyles } from '@material-ui/core/styles'; +import withStyles from '@mui/styles/withStyles'; import { withPlugins } from '../extend/withPlugins'; import { GalleryView } from '../components/GalleryView'; import { getCanvases, getSequenceViewingDirection } from '../state/selectors'; diff --git a/src/containers/GalleryViewThumbnail.js b/src/containers/GalleryViewThumbnail.js index 66d6a94a62..472db0ad64 100644 --- a/src/containers/GalleryViewThumbnail.js +++ b/src/containers/GalleryViewThumbnail.js @@ -1,7 +1,7 @@ import { compose } from 'redux'; import { connect } from 'react-redux'; import flatten from 'lodash/flatten'; -import { withStyles } from '@material-ui/core/styles'; +import withStyles from '@mui/styles/withStyles'; import * as actions from '../state/actions'; import { GalleryViewThumbnail } from '../components/GalleryViewThumbnail'; import { @@ -49,7 +49,7 @@ const styles = theme => ({ border: '2px solid transparent', cursor: 'pointer', display: 'inline-block', - margin: `${theme.spacing(1)}px ${theme.spacing(0.5)}px`, + margin: `${theme.spacing(1)} ${theme.spacing(0.5)}`, maxHeight: props => props.config.height + 45, minWidth: '60px', overflow: 'hidden', diff --git a/src/containers/IIIFThumbnail.js b/src/containers/IIIFThumbnail.js index c596b508cd..1f75c3a680 100644 --- a/src/containers/IIIFThumbnail.js +++ b/src/containers/IIIFThumbnail.js @@ -1,7 +1,7 @@ import { compose } from 'redux'; import { connect } from 'react-redux'; import { withTranslation } from 'react-i18next'; -import { withStyles } from '@material-ui/core/styles'; +import withStyles from '@mui/styles/withStyles'; import { withPlugins } from '../extend/withPlugins'; import { getConfig, diff --git a/src/containers/LayersPanel.js b/src/containers/LayersPanel.js index 16a1a9b01b..850bb04804 100644 --- a/src/containers/LayersPanel.js +++ b/src/containers/LayersPanel.js @@ -1,7 +1,7 @@ import { compose } from 'redux'; import { connect } from 'react-redux'; import { withTranslation } from 'react-i18next'; -import { withStyles } from '@material-ui/core/styles'; +import withStyles from '@mui/styles/withStyles'; import { withPlugins } from '../extend/withPlugins'; import { LayersPanel } from '../components/LayersPanel'; import { diff --git a/src/containers/LocalePicker.js b/src/containers/LocalePicker.js index 509fef4e36..94c0903740 100644 --- a/src/containers/LocalePicker.js +++ b/src/containers/LocalePicker.js @@ -1,6 +1,6 @@ import { compose } from 'redux'; import { withTranslation } from 'react-i18next'; -import { withStyles } from '@material-ui/core/styles'; +import withStyles from '@mui/styles/withStyles'; import { LocalePicker } from '../components/LocalePicker'; /** diff --git a/src/containers/ManifestForm.js b/src/containers/ManifestForm.js index e64b68d68c..f65e869d00 100644 --- a/src/containers/ManifestForm.js +++ b/src/containers/ManifestForm.js @@ -1,7 +1,7 @@ import { connect } from 'react-redux'; import { compose } from 'redux'; import { withTranslation } from 'react-i18next'; -import { withStyles } from '@material-ui/core'; +import withStyles from '@mui/styles/withStyles'; import { withPlugins } from '../extend/withPlugins'; import * as actions from '../state/actions'; import { ManifestForm } from '../components/ManifestForm'; diff --git a/src/containers/ManifestListItem.js b/src/containers/ManifestListItem.js index 6553a9cfa2..7e3019a724 100644 --- a/src/containers/ManifestListItem.js +++ b/src/containers/ManifestListItem.js @@ -1,7 +1,7 @@ import { compose } from 'redux'; import { connect } from 'react-redux'; import { withTranslation } from 'react-i18next'; -import { withStyles } from '@material-ui/core'; +import withStyles from '@mui/styles/withStyles'; import { withPlugins } from '../extend/withPlugins'; import { getManifest, diff --git a/src/containers/ManifestListItemError.js b/src/containers/ManifestListItemError.js index 001d98750b..276d48ca88 100644 --- a/src/containers/ManifestListItemError.js +++ b/src/containers/ManifestListItemError.js @@ -1,7 +1,7 @@ import { compose } from 'redux'; import { connect } from 'react-redux'; import { withTranslation } from 'react-i18next'; -import { withStyles } from '@material-ui/core/styles'; +import withStyles from '@mui/styles/withStyles'; import { withPlugins } from '../extend/withPlugins'; import { fetchManifest, removeResource } from '../state/actions'; import { ManifestListItemError } from '../components/ManifestListItemError'; diff --git a/src/containers/ManifestRelatedLinks.js b/src/containers/ManifestRelatedLinks.js index 6bcc356778..5d7157b20a 100644 --- a/src/containers/ManifestRelatedLinks.js +++ b/src/containers/ManifestRelatedLinks.js @@ -1,7 +1,7 @@ import { compose } from 'redux'; import { connect } from 'react-redux'; import { withTranslation } from 'react-i18next'; -import { withStyles } from '@material-ui/core/styles'; +import withStyles from '@mui/styles/withStyles'; import { withPlugins } from '../extend/withPlugins'; import { getManifestHomepage, diff --git a/src/containers/MinimalWindow.js b/src/containers/MinimalWindow.js index 5ed8aec777..62f64110da 100644 --- a/src/containers/MinimalWindow.js +++ b/src/containers/MinimalWindow.js @@ -1,7 +1,7 @@ import { compose } from 'redux'; import { connect } from 'react-redux'; import { withTranslation } from 'react-i18next'; -import { withStyles } from '@material-ui/core/styles'; +import withStyles from '@mui/styles/withStyles'; import { withPlugins } from '../extend/withPlugins'; import * as actions from '../state/actions'; import { MinimalWindow } from '../components/MinimalWindow'; diff --git a/src/containers/MosaicRenderPreview.js b/src/containers/MosaicRenderPreview.js index 0103bab9c5..92bb9ea880 100644 --- a/src/containers/MosaicRenderPreview.js +++ b/src/containers/MosaicRenderPreview.js @@ -1,6 +1,6 @@ import { compose } from 'redux'; import { connect } from 'react-redux'; -import { withStyles } from '@material-ui/core/styles'; +import withStyles from '@mui/styles/withStyles'; import { withTranslation } from 'react-i18next'; import { withPlugins } from '../extend/withPlugins'; import { getManifestTitle } from '../state/selectors'; diff --git a/src/containers/OpenSeadragonViewer.js b/src/containers/OpenSeadragonViewer.js index b5c59dff19..3b55f5b1e8 100644 --- a/src/containers/OpenSeadragonViewer.js +++ b/src/containers/OpenSeadragonViewer.js @@ -1,7 +1,7 @@ import { compose } from 'redux'; import { connect } from 'react-redux'; import { withTranslation } from 'react-i18next'; -import { withStyles } from '@material-ui/core/styles'; +import withStyles from '@mui/styles/withStyles'; import flatten from 'lodash/flatten'; import { withPlugins } from '../extend/withPlugins'; import { OpenSeadragonViewer } from '../components/OpenSeadragonViewer'; diff --git a/src/containers/PrimaryWindow.js b/src/containers/PrimaryWindow.js index 336894235f..637b4cc4f6 100644 --- a/src/containers/PrimaryWindow.js +++ b/src/containers/PrimaryWindow.js @@ -1,6 +1,6 @@ import { compose } from 'redux'; import { connect } from 'react-redux'; -import { withStyles } from '@material-ui/core/styles'; +import withStyles from '@mui/styles/withStyles'; import { withPlugins } from '../extend/withPlugins'; import { getManifestoInstance, getVisibleCanvasAudioResources, getVisibleCanvasVideoResources, getWindow, diff --git a/src/containers/SanitizedHtml.js b/src/containers/SanitizedHtml.js index 932bfa0c0a..66e7fdef0a 100644 --- a/src/containers/SanitizedHtml.js +++ b/src/containers/SanitizedHtml.js @@ -1,4 +1,4 @@ -import { withStyles } from '@material-ui/core/styles'; +import withStyles from '@mui/styles/withStyles'; import { SanitizedHtml } from '../components/SanitizedHtml'; /** diff --git a/src/containers/ScrollIndicatedDialogContent.js b/src/containers/ScrollIndicatedDialogContent.js index 66ec29e1ab..facfeb6a73 100644 --- a/src/containers/ScrollIndicatedDialogContent.js +++ b/src/containers/ScrollIndicatedDialogContent.js @@ -1,4 +1,4 @@ -import { withStyles } from '@material-ui/core/styles'; +import withStyles from '@mui/styles/withStyles'; import { ScrollIndicatedDialogContent } from '../components/ScrollIndicatedDialogContent'; /** diff --git a/src/containers/SearchHit.js b/src/containers/SearchHit.js index 009f44903e..33ad77ce48 100644 --- a/src/containers/SearchHit.js +++ b/src/containers/SearchHit.js @@ -1,7 +1,7 @@ import { compose } from 'redux'; import { connect } from 'react-redux'; import { withTranslation } from 'react-i18next'; -import { withStyles } from '@material-ui/core/styles'; +import withStyles from '@mui/styles/withStyles'; import { withPlugins } from '../extend/withPlugins'; import { SearchHit } from '../components/SearchHit'; import * as actions from '../state/actions'; diff --git a/src/containers/SearchPanel.js b/src/containers/SearchPanel.js index 64461b48c8..29bccbedea 100644 --- a/src/containers/SearchPanel.js +++ b/src/containers/SearchPanel.js @@ -1,7 +1,7 @@ import { compose } from 'redux'; import { connect } from 'react-redux'; import { withTranslation } from 'react-i18next'; -import { withStyles } from '@material-ui/core/styles'; +import withStyles from '@mui/styles/withStyles'; import * as actions from '../state/actions'; import { withPlugins } from '../extend/withPlugins'; import { SearchPanel } from '../components/SearchPanel'; diff --git a/src/containers/SearchPanelControls.js b/src/containers/SearchPanelControls.js index e81d46a4f3..da793f939b 100644 --- a/src/containers/SearchPanelControls.js +++ b/src/containers/SearchPanelControls.js @@ -1,7 +1,7 @@ import { compose } from 'redux'; import { connect } from 'react-redux'; import { withTranslation } from 'react-i18next'; -import { withStyles } from '@material-ui/core/styles'; +import withStyles from '@mui/styles/withStyles'; import { withPlugins } from '../extend/withPlugins'; import { SearchPanelControls } from '../components/SearchPanelControls'; import * as actions from '../state/actions'; diff --git a/src/containers/SearchPanelNavigation.js b/src/containers/SearchPanelNavigation.js index 614b241920..382235a922 100644 --- a/src/containers/SearchPanelNavigation.js +++ b/src/containers/SearchPanelNavigation.js @@ -1,7 +1,7 @@ import { compose } from 'redux'; import { connect } from 'react-redux'; import { withTranslation } from 'react-i18next'; -import { withStyles } from '@material-ui/core/styles'; +import withStyles from '@mui/styles/withStyles'; import { withPlugins } from '../extend/withPlugins'; import { SearchPanelNavigation } from '../components/SearchPanelNavigation'; import * as actions from '../state/actions'; diff --git a/src/containers/SearchResults.js b/src/containers/SearchResults.js index 15e660d99a..7bc6cbe750 100644 --- a/src/containers/SearchResults.js +++ b/src/containers/SearchResults.js @@ -1,7 +1,7 @@ import { compose } from 'redux'; import { connect } from 'react-redux'; import { withTranslation } from 'react-i18next'; -import { withStyles } from '@material-ui/core/styles'; +import withStyles from '@mui/styles/withStyles'; import { withPlugins } from '../extend/withPlugins'; import { SearchResults } from '../components/SearchResults'; import * as actions from '../state/actions'; diff --git a/src/containers/SelectCollection.js b/src/containers/SelectCollection.js index 446c32711f..623f4759a2 100644 --- a/src/containers/SelectCollection.js +++ b/src/containers/SelectCollection.js @@ -1,7 +1,7 @@ import { compose } from 'redux'; import { connect } from 'react-redux'; import { withTranslation } from 'react-i18next'; -import { withStyles } from '@material-ui/core/styles'; +import withStyles from '@mui/styles/withStyles'; import * as actions from '../state/actions'; import { withPlugins } from '../extend/withPlugins'; import { diff --git a/src/containers/SidebarIndexItem.js b/src/containers/SidebarIndexItem.js index e58afff81c..a05595ee25 100644 --- a/src/containers/SidebarIndexItem.js +++ b/src/containers/SidebarIndexItem.js @@ -1,7 +1,7 @@ import { compose } from 'redux'; import { connect } from 'react-redux'; import { withTranslation } from 'react-i18next'; -import { withStyles } from '@material-ui/core/styles'; +import withStyles from '@mui/styles/withStyles'; import { withPlugins } from '../extend/withPlugins'; import { SidebarIndexItem } from '../components/SidebarIndexItem'; diff --git a/src/containers/SidebarIndexList.js b/src/containers/SidebarIndexList.js index 866e7d61d7..fca60c0223 100644 --- a/src/containers/SidebarIndexList.js +++ b/src/containers/SidebarIndexList.js @@ -1,7 +1,7 @@ import { compose } from 'redux'; import { connect } from 'react-redux'; import { withTranslation } from 'react-i18next'; -import { withStyles } from '@material-ui/core/styles'; +import withStyles from '@mui/styles/withStyles'; import { withPlugins } from '../extend/withPlugins'; import * as actions from '../state/actions'; import { diff --git a/src/containers/SidebarIndexTableOfContents.js b/src/containers/SidebarIndexTableOfContents.js index a626981f34..12f282c001 100644 --- a/src/containers/SidebarIndexTableOfContents.js +++ b/src/containers/SidebarIndexTableOfContents.js @@ -1,8 +1,8 @@ import { compose } from 'redux'; import { connect } from 'react-redux'; import { withTranslation } from 'react-i18next'; -import { withStyles } from '@material-ui/core/styles'; -import { alpha } from '@material-ui/core/styles/colorManipulator'; +import { alpha } from '@mui/material/styles'; +import withStyles from '@mui/styles/withStyles'; import { withPlugins } from '../extend/withPlugins'; import { SidebarIndexTableOfContents } from '../components/SidebarIndexTableOfContents'; import { diff --git a/src/containers/SidebarIndexThumbnail.js b/src/containers/SidebarIndexThumbnail.js index 9f582dc464..ab951050a3 100644 --- a/src/containers/SidebarIndexThumbnail.js +++ b/src/containers/SidebarIndexThumbnail.js @@ -1,7 +1,7 @@ import { compose } from 'redux'; import { connect } from 'react-redux'; import { withTranslation } from 'react-i18next'; -import { withStyles } from '@material-ui/core/styles'; +import withStyles from '@mui/styles/withStyles'; import { withPlugins } from '../extend/withPlugins'; import { SidebarIndexThumbnail } from '../components/SidebarIndexThumbnail'; import { getConfig } from '../state/selectors'; diff --git a/src/containers/ThumbnailCanvasGrouping.js b/src/containers/ThumbnailCanvasGrouping.js index 0804cee2d5..ed9c5addc0 100644 --- a/src/containers/ThumbnailCanvasGrouping.js +++ b/src/containers/ThumbnailCanvasGrouping.js @@ -1,7 +1,7 @@ import { compose } from 'redux'; import { connect } from 'react-redux'; import { withTranslation } from 'react-i18next'; -import { withStyles } from '@material-ui/core/styles'; +import withStyles from '@mui/styles/withStyles'; import { withPlugins } from '../extend/withPlugins'; import * as actions from '../state/actions'; import { getCurrentCanvas } from '../state/selectors'; diff --git a/src/containers/ThumbnailNavigation.js b/src/containers/ThumbnailNavigation.js index e3be9a8f33..69c38fb9b5 100644 --- a/src/containers/ThumbnailNavigation.js +++ b/src/containers/ThumbnailNavigation.js @@ -1,7 +1,7 @@ import { compose } from 'redux'; import { connect } from 'react-redux'; import { withTranslation } from 'react-i18next'; -import { withStyles } from '@material-ui/core/styles'; +import withStyles from '@mui/styles/withStyles'; import { withPlugins } from '../extend/withPlugins'; import * as actions from '../state/actions'; import { ThumbnailNavigation } from '../components/ThumbnailNavigation'; diff --git a/src/containers/VideoViewer.js b/src/containers/VideoViewer.js index 70e8ebc083..a55240c1e7 100644 --- a/src/containers/VideoViewer.js +++ b/src/containers/VideoViewer.js @@ -1,7 +1,7 @@ import { connect } from 'react-redux'; import { compose } from 'redux'; import { withTranslation } from 'react-i18next'; -import { withStyles } from '@material-ui/core'; +import withStyles from '@mui/styles/withStyles'; import { withPlugins } from '../extend/withPlugins'; import { VideoViewer } from '../components/VideoViewer'; import { getConfig, getVisibleCanvasCaptions, getVisibleCanvasVideoResources } from '../state/selectors'; diff --git a/src/containers/ViewerInfo.js b/src/containers/ViewerInfo.js index 7e2714d9b7..0d642ae10a 100644 --- a/src/containers/ViewerInfo.js +++ b/src/containers/ViewerInfo.js @@ -1,7 +1,7 @@ import { compose } from 'redux'; import { connect } from 'react-redux'; import { withTranslation } from 'react-i18next'; -import { withStyles } from '@material-ui/core/styles'; +import withStyles from '@mui/styles/withStyles'; import { withPlugins } from '../extend/withPlugins'; import { ViewerInfo } from '../components/ViewerInfo'; import { diff --git a/src/containers/ViewerNavigation.js b/src/containers/ViewerNavigation.js index 38fb8d4602..1e973cc000 100644 --- a/src/containers/ViewerNavigation.js +++ b/src/containers/ViewerNavigation.js @@ -1,7 +1,7 @@ import { compose } from 'redux'; import { connect } from 'react-redux'; import { withTranslation } from 'react-i18next'; -import { withStyles } from '@material-ui/core/styles'; +import withStyles from '@mui/styles/withStyles'; import { withPlugins } from '../extend/withPlugins'; import * as actions from '../state/actions'; import { diff --git a/src/containers/Window.js b/src/containers/Window.js index a06801e2a4..1304a47e18 100644 --- a/src/containers/Window.js +++ b/src/containers/Window.js @@ -1,6 +1,6 @@ import { compose } from 'redux'; import { connect } from 'react-redux'; -import { withStyles } from '@material-ui/core'; +import withStyles from '@mui/styles/withStyles'; import { withTranslation } from 'react-i18next'; import { withPlugins } from '../extend/withPlugins'; import * as actions from '../state/actions'; diff --git a/src/containers/WindowAuthenticationBar.js b/src/containers/WindowAuthenticationBar.js index f3b7f87333..74541246dc 100644 --- a/src/containers/WindowAuthenticationBar.js +++ b/src/containers/WindowAuthenticationBar.js @@ -1,7 +1,7 @@ import { compose } from 'redux'; import { withTranslation } from 'react-i18next'; -import { withStyles } from '@material-ui/core/styles'; -import { alpha } from '@material-ui/core/styles/colorManipulator'; +import { alpha } from '@mui/material/styles'; +import withStyles from '@mui/styles/withStyles'; import { withPlugins } from '../extend/withPlugins'; import { WindowAuthenticationBar } from '../components/WindowAuthenticationBar'; diff --git a/src/containers/WindowCanvasNavigationControls.js b/src/containers/WindowCanvasNavigationControls.js index f1f17053f8..2107641995 100644 --- a/src/containers/WindowCanvasNavigationControls.js +++ b/src/containers/WindowCanvasNavigationControls.js @@ -1,8 +1,8 @@ import { connect } from 'react-redux'; import { compose } from 'redux'; import { withSize } from 'react-sizeme'; -import { withStyles } from '@material-ui/core'; -import { alpha } from '@material-ui/core/styles/colorManipulator'; +import withStyles from '@mui/styles/withStyles'; +import { alpha } from '@mui/material/styles'; import { withPlugins } from '../extend/withPlugins'; import { getWorkspace } from '../state/selectors'; import { WindowCanvasNavigationControls } from '../components/WindowCanvasNavigationControls'; diff --git a/src/containers/WindowListButton.js b/src/containers/WindowListButton.js index 74506d9dba..d9923f970c 100644 --- a/src/containers/WindowListButton.js +++ b/src/containers/WindowListButton.js @@ -1,7 +1,7 @@ import { compose } from 'redux'; import { connect } from 'react-redux'; import { withTranslation } from 'react-i18next'; -import { withStyles } from '@material-ui/core/styles'; +import withStyles from '@mui/styles/withStyles'; import { withPlugins } from '../extend/withPlugins'; import { getWindowIds, getWorkspace } from '../state/selectors'; import { WindowListButton } from '../components/WindowListButton'; diff --git a/src/containers/WindowSideBar.js b/src/containers/WindowSideBar.js index 012b2fd5d5..4b51046540 100644 --- a/src/containers/WindowSideBar.js +++ b/src/containers/WindowSideBar.js @@ -1,6 +1,6 @@ import { connect } from 'react-redux'; import { compose } from 'redux'; -import { withStyles } from '@material-ui/core'; +import withStyles from '@mui/styles/withStyles'; import { withTranslation } from 'react-i18next'; import { withPlugins } from '../extend/withPlugins'; import { WindowSideBar } from '../components/WindowSideBar'; diff --git a/src/containers/WindowSideBarAnnotationsPanel.js b/src/containers/WindowSideBarAnnotationsPanel.js index 904cea2f93..8a1cb84f74 100644 --- a/src/containers/WindowSideBarAnnotationsPanel.js +++ b/src/containers/WindowSideBarAnnotationsPanel.js @@ -1,7 +1,7 @@ import { compose } from 'redux'; import { connect } from 'react-redux'; import { withTranslation } from 'react-i18next'; -import { withStyles } from '@material-ui/core/styles'; +import withStyles from '@mui/styles/withStyles'; import { withPlugins } from '../extend/withPlugins'; import { getVisibleCanvasIds, diff --git a/src/containers/WindowSideBarButtons.js b/src/containers/WindowSideBarButtons.js index 8449e9b6a2..90de07e88d 100644 --- a/src/containers/WindowSideBarButtons.js +++ b/src/containers/WindowSideBarButtons.js @@ -1,6 +1,6 @@ import { compose } from 'redux'; import { connect } from 'react-redux'; -import { withStyles } from '@material-ui/core'; +import withStyles from '@mui/styles/withStyles'; import { withTranslation } from 'react-i18next'; import { withPlugins } from '../extend/withPlugins'; import * as actions from '../state/actions'; diff --git a/src/containers/WindowSideBarCanvasPanel.js b/src/containers/WindowSideBarCanvasPanel.js index 24324d2538..1f86dabe62 100644 --- a/src/containers/WindowSideBarCanvasPanel.js +++ b/src/containers/WindowSideBarCanvasPanel.js @@ -1,7 +1,7 @@ import { compose } from 'redux'; import { connect } from 'react-redux'; import { withTranslation } from 'react-i18next'; -import { withStyles } from '@material-ui/core/styles'; +import withStyles from '@mui/styles/withStyles'; import { withPlugins } from '../extend/withPlugins'; import * as actions from '../state/actions'; import { WindowSideBarCanvasPanel } from '../components/WindowSideBarCanvasPanel'; diff --git a/src/containers/WindowSideBarCollectionPanel.js b/src/containers/WindowSideBarCollectionPanel.js index 32b31a77b2..10afe3cffc 100644 --- a/src/containers/WindowSideBarCollectionPanel.js +++ b/src/containers/WindowSideBarCollectionPanel.js @@ -1,7 +1,7 @@ import { compose } from 'redux'; import { connect } from 'react-redux'; import { withTranslation } from 'react-i18next'; -import { withStyles } from '@material-ui/core/styles'; +import withStyles from '@mui/styles/withStyles'; import { withPlugins } from '../extend/withPlugins'; import * as actions from '../state/actions'; import { diff --git a/src/containers/WindowSideBarInfoPanel.js b/src/containers/WindowSideBarInfoPanel.js index 9fc498ce11..caadfa004e 100644 --- a/src/containers/WindowSideBarInfoPanel.js +++ b/src/containers/WindowSideBarInfoPanel.js @@ -1,7 +1,7 @@ import { compose } from 'redux'; import { connect } from 'react-redux'; import { withTranslation } from 'react-i18next'; -import { withStyles } from '@material-ui/core/styles'; +import withStyles from '@mui/styles/withStyles'; import { withPlugins } from '../extend/withPlugins'; import * as actions from '../state/actions'; import { diff --git a/src/containers/WindowThumbnailSettings.js b/src/containers/WindowThumbnailSettings.js index 24878457a7..6b7a663474 100644 --- a/src/containers/WindowThumbnailSettings.js +++ b/src/containers/WindowThumbnailSettings.js @@ -1,7 +1,7 @@ import { compose } from 'redux'; import { connect } from 'react-redux'; import { withTranslation } from 'react-i18next'; -import { withStyles } from '@material-ui/core/styles'; +import withStyles from '@mui/styles/withStyles'; import { withPlugins } from '../extend/withPlugins'; import * as actions from '../state/actions'; import { getThumbnailNavigationPosition, getThemeDirection } from '../state/selectors'; diff --git a/src/containers/WindowTopBar.js b/src/containers/WindowTopBar.js index 27dd9b8324..b5707d3bcf 100644 --- a/src/containers/WindowTopBar.js +++ b/src/containers/WindowTopBar.js @@ -1,7 +1,7 @@ import { compose } from 'redux'; import { connect } from 'react-redux'; import { withTranslation } from 'react-i18next'; -import { withStyles } from '@material-ui/core'; +import withStyles from '@mui/styles/withStyles'; import { withPlugins } from '../extend/withPlugins'; import * as actions from '../state/actions'; import { getWindowConfig, isFocused } from '../state/selectors'; diff --git a/src/containers/WindowTopBarPluginArea.js b/src/containers/WindowTopBarPluginArea.js index 4bcdc88f5a..d5738eb23f 100644 --- a/src/containers/WindowTopBarPluginArea.js +++ b/src/containers/WindowTopBarPluginArea.js @@ -1,7 +1,7 @@ import { compose } from 'redux'; import { connect } from 'react-redux'; import { withTranslation } from 'react-i18next'; -import { withStyles } from '@material-ui/core'; +import withStyles from '@mui/styles/withStyles'; import { withPlugins } from '../extend/withPlugins'; import { WindowTopBarPluginArea } from '../components/WindowTopBarPluginArea'; diff --git a/src/containers/WindowTopBarPluginMenu.js b/src/containers/WindowTopBarPluginMenu.js index 510d7a35de..91e139b745 100644 --- a/src/containers/WindowTopBarPluginMenu.js +++ b/src/containers/WindowTopBarPluginMenu.js @@ -1,6 +1,6 @@ import { compose } from 'redux'; import { withTranslation } from 'react-i18next'; -import { withStyles } from '@material-ui/core'; +import withStyles from '@mui/styles/withStyles'; import { withPlugins } from '../extend/withPlugins'; import { WindowTopBarPluginMenu } from '../components/WindowTopBarPluginMenu'; import { withWorkspaceContext } from '../contexts/WorkspaceContext'; diff --git a/src/containers/WindowTopBarTitle.js b/src/containers/WindowTopBarTitle.js index 5cb51b8274..9e10dbdbde 100644 --- a/src/containers/WindowTopBarTitle.js +++ b/src/containers/WindowTopBarTitle.js @@ -1,7 +1,7 @@ import { compose } from 'redux'; import { connect } from 'react-redux'; import { withTranslation } from 'react-i18next'; -import { withStyles } from '@material-ui/core'; +import withStyles from '@mui/styles/withStyles'; import { withPlugins } from '../extend/withPlugins'; import { getManifestStatus, getManifestTitle, getWindowConfig } from '../state/selectors'; import { WindowTopBarTitle } from '../components/WindowTopBarTitle'; diff --git a/src/containers/WindowTopMenuButton.js b/src/containers/WindowTopMenuButton.js index 54d863e2b6..105a582944 100644 --- a/src/containers/WindowTopMenuButton.js +++ b/src/containers/WindowTopMenuButton.js @@ -1,6 +1,6 @@ import { compose } from 'redux'; import { withTranslation } from 'react-i18next'; -import { withStyles } from '@material-ui/core'; +import withStyles from '@mui/styles/withStyles'; import { withPlugins } from '../extend/withPlugins'; import { WindowTopMenuButton } from '../components/WindowTopMenuButton'; diff --git a/src/containers/WindowViewSettings.js b/src/containers/WindowViewSettings.js index 6fc417f284..26966e5c36 100644 --- a/src/containers/WindowViewSettings.js +++ b/src/containers/WindowViewSettings.js @@ -1,7 +1,7 @@ import { compose } from 'redux'; import { connect } from 'react-redux'; import { withTranslation } from 'react-i18next'; -import { withStyles } from '@material-ui/core/styles'; +import withStyles from '@mui/styles/withStyles'; import { withPlugins } from '../extend/withPlugins'; import * as actions from '../state/actions'; import { getAllowedWindowViewTypes, getWindowViewType } from '../state/selectors'; diff --git a/src/containers/Workspace.js b/src/containers/Workspace.js index 6eac59013b..1e18b463c8 100644 --- a/src/containers/Workspace.js +++ b/src/containers/Workspace.js @@ -1,7 +1,7 @@ import { compose } from 'redux'; import { connect } from 'react-redux'; import { withTranslation } from 'react-i18next'; -import { withStyles } from '@material-ui/core/styles'; +import withStyles from '@mui/styles/withStyles'; import { withPlugins } from '../extend/withPlugins'; import { Workspace } from '../components/Workspace'; import { diff --git a/src/containers/WorkspaceAdd.js b/src/containers/WorkspaceAdd.js index 25f8903234..d52c8958a8 100644 --- a/src/containers/WorkspaceAdd.js +++ b/src/containers/WorkspaceAdd.js @@ -1,7 +1,7 @@ import { compose } from 'redux'; import { connect } from 'react-redux'; import { withTranslation } from 'react-i18next'; -import { withStyles } from '@material-ui/core'; +import withStyles from '@mui/styles/withStyles'; import { withPlugins } from '../extend/withPlugins'; import * as actions from '../state/actions'; import { WorkspaceAdd } from '../components/WorkspaceAdd'; diff --git a/src/containers/WorkspaceAddButton.js b/src/containers/WorkspaceAddButton.js index 427676b481..41fa18fcf3 100644 --- a/src/containers/WorkspaceAddButton.js +++ b/src/containers/WorkspaceAddButton.js @@ -1,13 +1,15 @@ import { connect } from 'react-redux'; import { compose } from 'redux'; import { withTranslation } from 'react-i18next'; -import { withStyles } from '@material-ui/core'; -import withWidth from '@material-ui/core/withWidth'; +import withStyles from '@mui/styles/withStyles'; import { withPlugins } from '../extend/withPlugins'; import * as actions from '../state/actions'; import { getWindowIds, getWorkspace } from '../state/selectors'; import { WorkspaceAddButton } from '../components/WorkspaceAddButton'; +// FIXME checkout https://mui.com/components/use-media-query/#migrating-from-withwidth +const withWidth = () => (WrappedComponent) => (props) => ; + /** * mapStateToProps - to hook up connect * @memberof WorkspaceControlPanel diff --git a/src/containers/WorkspaceArea.js b/src/containers/WorkspaceArea.js index c2655978c9..7b61552bee 100644 --- a/src/containers/WorkspaceArea.js +++ b/src/containers/WorkspaceArea.js @@ -1,7 +1,8 @@ import { compose } from 'redux'; import { connect } from 'react-redux'; import { withTranslation } from 'react-i18next'; -import { withStyles, lighten, darken } from '@material-ui/core/styles'; +import { lighten, darken } from '@mui/material/styles'; +import withStyles from '@mui/styles/withStyles'; import { withPlugins } from '../extend/withPlugins'; import { WorkspaceArea } from '../components/WorkspaceArea'; import { getConfig, getWindowIds, getWorkspace } from '../state/selectors'; @@ -26,7 +27,7 @@ const mapStateToProps = state => ( * @returns {{background: {background: string}}} */ const styles = (theme) => { - const getBackgroundColor = theme.palette.type === 'light' ? darken : lighten; + const getBackgroundColor = theme.palette.mode === 'light' ? darken : lighten; return { viewer: { diff --git a/src/containers/WorkspaceControlPanel.js b/src/containers/WorkspaceControlPanel.js index 88f482e91d..8b2ce3e96a 100644 --- a/src/containers/WorkspaceControlPanel.js +++ b/src/containers/WorkspaceControlPanel.js @@ -1,6 +1,6 @@ import { compose } from 'redux'; import { withTranslation } from 'react-i18next'; -import { withStyles } from '@material-ui/core/styles'; +import withStyles from '@mui/styles/withStyles'; import { withPlugins } from '../extend/withPlugins'; import { WorkspaceControlPanel } from '../components/WorkspaceControlPanel'; diff --git a/src/containers/WorkspaceControlPanelButtons.js b/src/containers/WorkspaceControlPanelButtons.js index eaef08bd77..82a70f0fc4 100644 --- a/src/containers/WorkspaceControlPanelButtons.js +++ b/src/containers/WorkspaceControlPanelButtons.js @@ -1,5 +1,5 @@ import { compose } from 'redux'; -import { withStyles } from '@material-ui/core/styles'; +import withStyles from '@mui/styles/withStyles'; import { withPlugins } from '../extend/withPlugins'; import { WorkspaceControlPanelButtons } from '../components/WorkspaceControlPanelButtons'; diff --git a/src/containers/WorkspaceElastic.js b/src/containers/WorkspaceElastic.js index 9badc4614b..8454e0458f 100644 --- a/src/containers/WorkspaceElastic.js +++ b/src/containers/WorkspaceElastic.js @@ -1,6 +1,6 @@ import { compose } from 'redux'; import { connect } from 'react-redux'; -import { withStyles } from '@material-ui/core/styles'; +import withStyles from '@mui/styles/withStyles'; import { withPlugins } from '../extend/withPlugins'; import * as actions from '../state/actions'; import WorkspaceElastic from '../components/WorkspaceElastic'; diff --git a/src/containers/WorkspaceElasticWindow.js b/src/containers/WorkspaceElasticWindow.js index 1c071396f7..842d6810be 100644 --- a/src/containers/WorkspaceElasticWindow.js +++ b/src/containers/WorkspaceElasticWindow.js @@ -1,6 +1,6 @@ import { compose } from 'redux'; import { connect } from 'react-redux'; -import { withStyles } from '@material-ui/core'; +import withStyles from '@mui/styles/withStyles'; import * as actions from '../state/actions'; import WorkspaceElasticWindow from '../components/WorkspaceElasticWindow'; import { diff --git a/src/containers/WorkspaceExport.js b/src/containers/WorkspaceExport.js index e1ac982c10..d0f6508bc2 100644 --- a/src/containers/WorkspaceExport.js +++ b/src/containers/WorkspaceExport.js @@ -1,6 +1,6 @@ import { compose } from 'redux'; import { connect } from 'react-redux'; -import { withStyles } from '@material-ui/core/styles'; +import withStyles from '@mui/styles/withStyles'; import { withTranslation } from 'react-i18next'; import { withPlugins } from '../extend/withPlugins'; import { WorkspaceExport } from '../components/WorkspaceExport'; diff --git a/src/containers/WorkspaceImport.js b/src/containers/WorkspaceImport.js index 01c22d1547..668e2cf8ae 100644 --- a/src/containers/WorkspaceImport.js +++ b/src/containers/WorkspaceImport.js @@ -1,7 +1,7 @@ import { compose } from 'redux'; import { connect } from 'react-redux'; import { withTranslation } from 'react-i18next'; -import { withStyles } from '@material-ui/core'; +import withStyles from '@mui/styles/withStyles'; import { withPlugins } from '../extend/withPlugins'; import { WorkspaceImport } from '../components/WorkspaceImport'; import * as actions from '../state/actions'; diff --git a/src/containers/WorkspaceMenuButton.js b/src/containers/WorkspaceMenuButton.js index 16e10d569b..bc8545d2e2 100644 --- a/src/containers/WorkspaceMenuButton.js +++ b/src/containers/WorkspaceMenuButton.js @@ -1,6 +1,6 @@ import { compose } from 'redux'; import { withTranslation } from 'react-i18next'; -import { withStyles } from '@material-ui/core'; +import withStyles from '@mui/styles/withStyles'; import { withPlugins } from '../extend/withPlugins'; import { WorkspaceMenuButton } from '../components/WorkspaceMenuButton'; diff --git a/src/containers/WorkspaceMosaic.js b/src/containers/WorkspaceMosaic.js index b66e2f4aa6..d05ef74f9b 100644 --- a/src/containers/WorkspaceMosaic.js +++ b/src/containers/WorkspaceMosaic.js @@ -1,6 +1,6 @@ import { compose } from 'redux'; import { connect } from 'react-redux'; -import { withStyles } from '@material-ui/core/styles'; +import withStyles from '@mui/styles/withStyles'; import { withPlugins } from '../extend/withPlugins'; import { getWorkspace } from '../state/selectors'; import * as actions from '../state/actions'; diff --git a/src/containers/WorkspaceOptionsButton.js b/src/containers/WorkspaceOptionsButton.js index f17b51310f..618fe339f9 100644 --- a/src/containers/WorkspaceOptionsButton.js +++ b/src/containers/WorkspaceOptionsButton.js @@ -1,6 +1,6 @@ import { compose } from 'redux'; import { withTranslation } from 'react-i18next'; -import { withStyles } from '@material-ui/core/styles'; +import withStyles from '@mui/styles/withStyles'; import { withPlugins } from '../extend/withPlugins'; import { WorkspaceOptionsButton } from '../components/WorkspaceOptionsButton'; diff --git a/src/containers/WorkspaceSelectionDialog.js b/src/containers/WorkspaceSelectionDialog.js index d14881af77..a5974e6501 100644 --- a/src/containers/WorkspaceSelectionDialog.js +++ b/src/containers/WorkspaceSelectionDialog.js @@ -1,7 +1,7 @@ import { compose } from 'redux'; import { connect } from 'react-redux'; import { withTranslation } from 'react-i18next'; -import { withStyles } from '@material-ui/core'; +import withStyles from '@mui/styles/withStyles'; import { withPlugins } from '../extend/withPlugins'; import { WorkspaceSelectionDialog } from '../components/WorkspaceSelectionDialog'; import * as actions from '../state/actions'; diff --git a/src/containers/ZoomControls.js b/src/containers/ZoomControls.js index 512ce860cb..273a0dd5f0 100644 --- a/src/containers/ZoomControls.js +++ b/src/containers/ZoomControls.js @@ -1,7 +1,7 @@ import { compose } from 'redux'; import { connect } from 'react-redux'; import { withTranslation } from 'react-i18next'; -import { withStyles } from '@material-ui/core'; +import withStyles from '@mui/styles/withStyles'; import { withPlugins } from '../extend/withPlugins'; import * as actions from '../state/actions'; import { getShowZoomControlsConfig, getViewer } from '../state/selectors'; diff --git a/src/extend/pluginMapping.js b/src/extend/pluginMapping.js index efc449252a..7ddeefd6bb 100644 --- a/src/extend/pluginMapping.js +++ b/src/extend/pluginMapping.js @@ -18,7 +18,7 @@ import CompanionWindowRegistry from '../lib/CompanionWindowRegistry'; */ export function createTargetToPluginMapping(plugins) { return plugins.reduce((map, plugin) => ( - update(map, [plugin.target, plugin.mode], x => [...x || [], plugin]) + update(map, [plugin.target, plugin.mode], x => [...(x || []), plugin]) ), {}); } From 863ebcd9ed3595dd472be537c7557f8862c5f3b4 Mon Sep 17 00:00:00 2001 From: Chris Beer Date: Wed, 29 Mar 2023 13:46:33 -0700 Subject: [PATCH 002/164] Add the MUI theme provider to the custom renderer --- __tests__/utils/test-utils.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/__tests__/utils/test-utils.js b/__tests__/utils/test-utils.js index 7bc1adf23f..2b6879d9b4 100644 --- a/__tests__/utils/test-utils.js +++ b/__tests__/utils/test-utils.js @@ -3,9 +3,11 @@ import { render } from '@testing-library/react'; import PropTypes from 'prop-types'; import { createStore, applyMiddleware } from 'redux'; import thunkMiddleware from 'redux-thunk'; +import { createTheme, ThemeProvider } from '@mui/material/styles'; import createRootReducer from '../../src/state/reducers/rootReducer'; const rootReducer = createRootReducer(); +const theme = createTheme(); /** * Hook up our rendered object to redux @@ -21,7 +23,7 @@ function renderWithProviders( ) { /** :nodoc: */ function Wrapper({ children }) { - return {children}; + return {children}; } Wrapper.propTypes = { From 53c390859522ac3b80e8a01e49326f95fd8df2ad Mon Sep 17 00:00:00 2001 From: Chris Beer Date: Wed, 29 Mar 2023 14:36:42 -0700 Subject: [PATCH 003/164] Update tests for MUI 5 --- .../src/components/IIIFAuthentication.test.js | 15 +++++++------- .../src/components/LanguageSettings.test.js | 7 ------- __tests__/src/components/SearchPanel.test.js | 2 +- .../components/SearchPanelControls.test.js | 14 ++++++------- .../WindowAuthenticationBar.test.js | 20 +++++++++---------- src/components/ErrorDialog.js | 2 +- src/components/LanguageSettings.js | 1 - src/components/MinimalWindow.js | 2 +- src/components/ScrollTo.js | 2 +- src/components/SidebarIndexTableOfContents.js | 10 +--------- src/components/WindowThumbnailSettings.js | 2 +- src/components/WindowTopMenu.js | 2 +- src/components/WindowViewSettings.js | 2 +- 13 files changed, 31 insertions(+), 50 deletions(-) diff --git a/__tests__/src/components/IIIFAuthentication.test.js b/__tests__/src/components/IIIFAuthentication.test.js index d9be920ac9..d49d5e712d 100644 --- a/__tests__/src/components/IIIFAuthentication.test.js +++ b/__tests__/src/components/IIIFAuthentication.test.js @@ -33,7 +33,7 @@ describe('IIIFAuthentication', () => { describe('without an auth service', () => { it('renders nothing', () => { createWrapper({ authServiceId: null }); - expect(screen.queryByText('login', { selector: 'span' })).not.toBeInTheDocument(); + expect(screen.queryByRole('button', { name: 'login' })).not.toBeInTheDocument(); expect(screen.queryByRole('button')).not.toBeInTheDocument(); }); }); @@ -41,9 +41,7 @@ describe('IIIFAuthentication', () => { it('renders a login bar', async () => { const handleAuthInteraction = jest.fn(); createWrapper({ handleAuthInteraction }); - const confirmBtn = screen.getByText('login', { selector: 'span' }); - expect(confirmBtn).toBeInTheDocument(); - await user.click(confirmBtn); + await user.click(screen.getByRole('button', { name: 'login' })); expect(handleAuthInteraction).toHaveBeenCalledWith('w', 'http://example.com/auth'); }); it('renders nothing for a non-interactive login', () => { @@ -55,7 +53,8 @@ describe('IIIFAuthentication', () => { it('renders with an error message', async () => { const handleAuthInteraction = jest.fn(); createWrapper({ handleAuthInteraction, status: 'failed' }); - const confirmBtn = await screen.findByText('retry', { selector: 'span' }); + await user.click(screen.getByRole('button', { name: 'continue' })); + const confirmBtn = screen.getByRole('button', { name: /retry/ }); expect(screen.getByText('Login failed')).toBeInTheDocument(); expect(screen.getByText('cancel')).toBeInTheDocument(); expect(screen.getByText('... and this is why.')).toBeInTheDocument(); @@ -71,7 +70,7 @@ describe('IIIFAuthentication', () => { window.open = mockWindowOpen; const resolveCookieMock = jest.fn(); createWrapper({ resolveAuthenticationRequest: resolveCookieMock, status: 'cookie' }); - expect(screen.getByText('login', { selector: 'span' })).toBeInTheDocument(); + expect(screen.getByRole('button', { name: 'login' })).toBeInTheDocument(); expect(mockWindowOpen).toHaveBeenCalledWith(`http://example.com/auth?origin=${window.origin}`, 'IiifLoginSender', 'centerscreen'); mockWindow.closed = true; jest.runOnlyPendingTimers(); @@ -81,7 +80,7 @@ describe('IIIFAuthentication', () => { it('does the IIIF access token behavior', async () => { const resolveTokenMock = jest.fn(); createWrapper({ resolveAccessTokenRequest: resolveTokenMock, status: 'token' }); - expect(screen.getByText('login', { selector: 'span' })).toBeInTheDocument(); + expect(screen.getByRole('button', { name: 'login' })).toBeInTheDocument(); window.dispatchEvent(new MessageEvent('message', { data: { messageId: 'http://example.com/token' }, })); @@ -100,7 +99,7 @@ describe('IIIFAuthentication', () => { resetAuthenticationState, status: 'ok', }); - const confirmBtn = await screen.findByText('exit', { selector: 'span' }); + const confirmBtn = await screen.findByRole('button', { name: 'exit' }); await user.click(confirmBtn); await waitFor(() => expect(resetAuthenticationState).toHaveBeenCalledWith({ authServiceId: 'http://example.com/auth', tokenServiceId: 'http://example.com/token', diff --git a/__tests__/src/components/LanguageSettings.test.js b/__tests__/src/components/LanguageSettings.test.js index 0cddf8b5db..98b0a82f6d 100644 --- a/__tests__/src/components/LanguageSettings.test.js +++ b/__tests__/src/components/LanguageSettings.test.js @@ -35,13 +35,6 @@ describe('LanguageSettings', () => { expect(screen.getAllByRole('menuitem')).toHaveLength(2); }); - it('non-active list items are buttons (and active are not)', () => { - createWrapper({ languages }); - - expect(screen.getByRole('menuitem', { name: 'Deutsch' })).not.toHaveClass('MuiButtonBase-root'); - expect(screen.getByRole('menuitem', { name: 'English' })).toHaveClass('MuiButtonBase-root'); - }); - it('renders the check icon when the active prop returns true', () => { createWrapper({ languages }); diff --git a/__tests__/src/components/SearchPanel.test.js b/__tests__/src/components/SearchPanel.test.js index 8b4fb3a304..cd7b50ee01 100644 --- a/__tests__/src/components/SearchPanel.test.js +++ b/__tests__/src/components/SearchPanel.test.js @@ -54,7 +54,7 @@ describe('SearchPanel', () => { it('has the SearchPanelControls component', () => { createWrapper(); - expect(screen.getByRole('textbox', { name: 'searchInputLabel' })).toBeInTheDocument(); + expect(screen.getByRole('combobox', { name: 'searchInputLabel' })).toBeInTheDocument(); expect(screen.getByRole('button', { name: 'searchSubmitAria' })).toBeInTheDocument(); }); diff --git a/__tests__/src/components/SearchPanelControls.test.js b/__tests__/src/components/SearchPanelControls.test.js index e2ab065c27..0b01891240 100644 --- a/__tests__/src/components/SearchPanelControls.test.js +++ b/__tests__/src/components/SearchPanelControls.test.js @@ -33,7 +33,7 @@ describe('SearchPanelControls', () => { searchService: { id: 'http://example.com/search', options: { resource: { id: 'abc' } } }, }); - await user.click(screen.getByRole('textbox')); + await user.click(screen.getByRole('combobox')); await user.keyboard('somestring'); await user.click(await screen.findByText('somestring 12345')); expect(fetchSearch).toHaveBeenCalledWith('window', 'cw', 'http://example.com/search?q=somestring+12345', 'somestring 12345'); @@ -44,7 +44,7 @@ describe('SearchPanelControls', () => { it('renders a text input through the renderInput prop', () => { createWrapper(); - expect(screen.getByRole('textbox')).toHaveAttribute('id', 'search-cw'); + expect(screen.getByRole('combobox')).toHaveAttribute('id', 'search-cw'); }); it('endAdornment is a SearchIcon (with no CircularProgress indicator)', () => { createWrapper(); @@ -67,7 +67,7 @@ describe('SearchPanelControls', () => { }; createWrapper({ fetchSearch, query: 'asdf', searchService }); - await user.clear(screen.getByRole('textbox')); + await user.clear(screen.getByRole('combobox')); await user.keyboard('yolo'); await user.click(screen.getByRole('button')); @@ -84,7 +84,7 @@ describe('SearchPanelControls', () => { createWrapper({ fetchSearch, query: '', searchService }); - await user.clear(screen.getByRole('textbox')); + await user.clear(screen.getByRole('combobox')); await user.click(screen.getByRole('button', { name: 'searchSubmitAria' })); expect(fetchSearch).not.toHaveBeenCalled(); }); @@ -92,12 +92,12 @@ describe('SearchPanelControls', () => { describe('input', () => { it('has the query prop has the input value on intial render', () => { createWrapper({ query: 'Wolpertinger' }); - expect(screen.getByRole('textbox')).toHaveValue('Wolpertinger'); + expect(screen.getByRole('combobox')).toHaveValue('Wolpertinger'); }); it('clears the local search state/input when the incoming query prop has been cleared', () => { const wrapper = createWrapper({ query: 'Wolpertinger' }); - expect(screen.getByRole('textbox')).toHaveValue('Wolpertinger'); + expect(screen.getByRole('combobox')).toHaveValue('Wolpertinger'); wrapper.rerender(( { /> )); - expect(screen.getByRole('textbox')).toHaveValue(''); + expect(screen.getByRole('combobox')).toHaveValue(''); }); }); }); diff --git a/__tests__/src/components/WindowAuthenticationBar.test.js b/__tests__/src/components/WindowAuthenticationBar.test.js index b47771b1d0..c4368b8113 100644 --- a/__tests__/src/components/WindowAuthenticationBar.test.js +++ b/__tests__/src/components/WindowAuthenticationBar.test.js @@ -37,38 +37,36 @@ describe('AuthenticationControl', () => { it('renders a non-collapsing version if there is no description', () => { createWrapper({ description: undefined, header: undefined }); expect(screen.getByText('Log in to see more', { selector: 'span' })).toBeInTheDocument(); - expect(screen.getByText('Login', { selector: 'span' })).toBeInTheDocument(); + expect(screen.getByRole('button')).toHaveTextContent('Login'); }); it('renders a collapsable version if there is a description', async () => { createWrapper({ description: 'long description', header: 'Login to Example Institution' }); const continueBtn = document.querySelectorAll('.MuiButtonBase-root')[0]; - const cancelBtn = screen.getByText('cancel', { selector: 'span' }).closest('button'); - const loginBtn = screen.getByText('Login', { selector: 'span' }); const collapseEl = document.querySelector('.MuiCollapse-hidden'); // disable transition animations for easier testing of the Mui Collapse open/close state config.disabled = true; // initial collapsed state: Presence of continue button text. Hidden cancelBtn, loginBtn, and description expect(screen.getByText('continue')).toBeInTheDocument(); - expect(cancelBtn).not.toBeVisible(); - expect(loginBtn).not.toBeVisible(); + expect(screen.queryByRole('button', { name: 'cancel' })).not.toBeInTheDocument(); + expect(screen.queryByRole('button', { name: 'Login' })).not.toBeInTheDocument(); expect(within(collapseEl).getByText('long description')).not.toBeVisible(); // click to expand await user.click(continueBtn); // expanded state: Removal of continue button text from DOM. Visible cancelBtn, loginBtn, and description expect(screen.queryByText('continue')).not.toBeInTheDocument(); - expect(cancelBtn).toBeVisible(); - expect(loginBtn).toBeVisible(); + expect(screen.getByRole('button', { name: 'cancel' })).toBeVisible(); + expect(screen.getByRole('button', { name: 'Login' })).toBeVisible(); expect(within(collapseEl).getByText('long description')).toBeVisible(); expect(collapseEl).toHaveClass('MuiCollapse-entered'); // click the cancel button to collapse - await user.click(cancelBtn); + await user.click(screen.getByRole('button', { name: 'cancel' })); // collapsed state: Presence of continue button text. Hidden cancelBtn, loginBtn, and description expect(screen.getByText('continue')).toBeInTheDocument(); - expect(cancelBtn).not.toBeVisible(); - expect(loginBtn).not.toBeVisible(); + expect(screen.queryByRole('button', { name: 'cancel' })).not.toBeInTheDocument(); + expect(screen.queryByRole('button', { name: 'Login' })).not.toBeInTheDocument(); expect(within(collapseEl).getByText('long description')).not.toBeVisible(); // re-enable transition animation config.disabled = false; @@ -77,7 +75,7 @@ describe('AuthenticationControl', () => { it('triggers an action when the confirm button is clicked', async () => { const onConfirm = jest.fn(); createWrapper({ onConfirm }); - await user.click(screen.getByText('Login', { selector: 'span' }).closest('button')); + await user.click(screen.getByRole('button', { name: 'Login' })); expect(onConfirm).toHaveBeenCalled(); }); diff --git a/src/components/ErrorDialog.js b/src/components/ErrorDialog.js index 182a1b256d..5a71ff1ec7 100644 --- a/src/components/ErrorDialog.js +++ b/src/components/ErrorDialog.js @@ -29,7 +29,7 @@ export class ErrorDialog extends Component { open={hasError} > - {t('errorDialogTitle')} + {t('errorDialogTitle')} diff --git a/src/components/LanguageSettings.js b/src/components/LanguageSettings.js index 1affbeffc0..f0048c4788 100644 --- a/src/components/LanguageSettings.js +++ b/src/components/LanguageSettings.js @@ -23,7 +23,6 @@ export class LanguageSettings extends Component { { languages.map(language => ( { handleClick(language.locale); }} > diff --git a/src/components/MinimalWindow.js b/src/components/MinimalWindow.js index 188cdbe95e..89d16f7766 100644 --- a/src/components/MinimalWindow.js +++ b/src/components/MinimalWindow.js @@ -62,7 +62,7 @@ export class MinimalWindow extends Component { className={cn(classes.button, ns('window-close'))} onClick={removeWindow} TooltipProps={{ - tabIndex: ariaLabel ? '0' : '-1', + tabIndex: ariaLabel ? 0 : -1, }} > diff --git a/src/components/ScrollTo.js b/src/components/ScrollTo.js index e73d602cf9..4427f0f360 100644 --- a/src/components/ScrollTo.js +++ b/src/components/ScrollTo.js @@ -104,7 +104,7 @@ export class ScrollTo extends Component { */ render() { const { - children, containerRef, offsetTop, scrollTo, ...otherProps + children, containerRef, offsetTop, scrollTo, nodeId, ...otherProps } = this.props; if (!scrollTo) return children; diff --git a/src/components/SidebarIndexTableOfContents.js b/src/components/SidebarIndexTableOfContents.js index bf43463d26..f37b561707 100644 --- a/src/components/SidebarIndexTableOfContents.js +++ b/src/components/SidebarIndexTableOfContents.js @@ -65,20 +65,13 @@ export class SidebarIndexTableOfContents extends Component { } /** */ - handleKeyPressed(event, nodeId) { + handleNodeSelect(event, nodeId) { const { toggleNode } = this.props; - if (event.key === 'Enter') { - this.selectTreeItem(nodeId); - } - if (event.key === ' ' || event.key === 'Spacebar') { toggleNode(nodeId); } - } - /** */ - handleNodeSelect(_event, nodeId) { this.selectTreeItem(nodeId); } @@ -134,7 +127,6 @@ export class SidebarIndexTableOfContents extends Component { root: classes.treeItemRoot, selected: classes.selected, }} - onKeyDown={e => this.handleKeyPressed(e, node.id)} label={(
- {t('thumbnails')} + {t('thumbnails')} { this.handleChange('off'); handleClose(); }}> - {t('windowPluginButtons')} + {t('windowPluginButtons')} ) : null; diff --git a/src/components/WindowViewSettings.js b/src/components/WindowViewSettings.js index 8b751fc222..ff4b4c7dc5 100644 --- a/src/components/WindowViewSettings.js +++ b/src/components/WindowViewSettings.js @@ -68,7 +68,7 @@ export class WindowViewSettings extends Component { if (viewTypes.length === 0) return null; return ( <> - {t('view')} + {t('view')} { viewTypes.map(value => menuItem({ Icon: iconMap[value], value })) } ); From a2e1e1f17bc7e46da49832cae0d0d4a931dd853c Mon Sep 17 00:00:00 2001 From: Chris Beer Date: Wed, 29 Mar 2023 14:43:40 -0700 Subject: [PATCH 004/164] Replace srOnly class with visually-hidden style --- .../src/components/WindowCanvasNavigationControls.test.js | 2 +- src/components/WindowCanvasNavigationControls.js | 3 ++- src/components/Workspace.js | 3 ++- src/components/WorkspaceAdd.js | 3 ++- 4 files changed, 7 insertions(+), 4 deletions(-) diff --git a/__tests__/src/components/WindowCanvasNavigationControls.test.js b/__tests__/src/components/WindowCanvasNavigationControls.test.js index d089de2915..e3337890a7 100644 --- a/__tests__/src/components/WindowCanvasNavigationControls.test.js +++ b/__tests__/src/components/WindowCanvasNavigationControls.test.js @@ -28,7 +28,7 @@ describe('WindowCanvasNavigationControls', () => { it('renders only a screen-reader accessibile version when visible=false', () => { const { container } = render(); - expect(container.firstChild.classList[1]).toMatch(/srOnly/); // eslint-disable-line testing-library/no-node-access + expect(container.firstChild).toHaveStyle({ height: '1px', margin: '-1px', width: '1px' }); // eslint-disable-line testing-library/no-node-access }); it('stacks the nav controls on small width screens', () => { diff --git a/src/components/WindowCanvasNavigationControls.js b/src/components/WindowCanvasNavigationControls.js index e03c28f643..3f27d49e0c 100644 --- a/src/components/WindowCanvasNavigationControls.js +++ b/src/components/WindowCanvasNavigationControls.js @@ -3,6 +3,7 @@ import PropTypes from 'prop-types'; import classNames from 'classnames'; import Paper from '@mui/material/Paper'; import Typography from '@mui/material/Typography'; +import { visuallyHidden } from '@mui/utils'; import ZoomControls from '../containers/ZoomControls'; import ViewerInfo from '../containers/ViewerInfo'; import ViewerNavigation from '../containers/ViewerNavigation'; @@ -28,7 +29,7 @@ export class WindowCanvasNavigationControls extends Component { classes, visible, windowId, zoomToWorld, } = this.props; - if (!visible) return (); + if (!visible) return (); return ( - {t('miradorViewer')} + {t('miradorViewer')} {this.workspaceByType()}
diff --git a/src/components/WorkspaceAdd.js b/src/components/WorkspaceAdd.js index 1f34107ca6..f7c5eafda6 100644 --- a/src/components/WorkspaceAdd.js +++ b/src/components/WorkspaceAdd.js @@ -11,6 +11,7 @@ import List from '@mui/material/List'; import Paper from '@mui/material/Paper'; import Toolbar from '@mui/material/Toolbar'; import Typography from '@mui/material/Typography'; +import { visuallyHidden } from '@mui/utils'; import ns from '../config/css-ns'; import ManifestForm from '../containers/ManifestForm'; import ManifestListItem from '../containers/ManifestListItem'; @@ -115,7 +116,7 @@ export class WorkspaceAdd extends Component {
) : ( - {t('miradorResources')} + {t('miradorResources')} {manifestList} From f3baf999310fd91d0481d991da9ff9b2a5ff0773 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Gerd=20M=C3=BCller?= Date: Wed, 14 Jun 2023 10:04:13 +0200 Subject: [PATCH 005/164] Update to latest MUI 5.x --- package.json | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/package.json b/package.json index 3303003a0b..eb26eb8cd8 100644 --- a/package.json +++ b/package.json @@ -36,10 +36,10 @@ "@emotion/react": "^11.10.6", "@emotion/styled": "^11.10.6", "@hello-pangea/dnd": "^16.0.1", - "@mui/icons-material": "^5.11.9", - "@mui/lab": "^5.0.0-alpha.120", - "@mui/material": "^5.11.10", - "@mui/styles": "^5.11.9", + "@mui/icons-material": "^5.11.16", + "@mui/lab": "^5.0.0-alpha.134", + "@mui/material": "^5.13.5", + "@mui/styles": "^5.13.2", "@react-aria/live-announcer": "^3.1.2", "classnames": "^2.2.6", "clsx": "^1.0.4", From 44699af9f8d048cf13b5fe1f6631284d2d7ae1ed Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Gerd=20M=C3=BCller?= Date: Wed, 14 Jun 2023 14:24:47 +0200 Subject: [PATCH 006/164] Add babel plugin dev dependency --- package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/package.json b/package.json index eb26eb8cd8..7a4df8eceb 100644 --- a/package.json +++ b/package.json @@ -84,6 +84,7 @@ "@babel/core": "^7.17.7", "@babel/plugin-proposal-class-properties": "^7.16.7", "@babel/plugin-proposal-object-rest-spread": "^7.17.3", + "@babel/plugin-proposal-private-property-in-object": "^7.21.11", "@babel/plugin-transform-regenerator": "^7.16.7", "@babel/plugin-transform-runtime": "^7.17.0", "@babel/preset-env": "^7.16.11", From 6924bb3e4b419b0922e9eaf947cb14522939d2a9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Gerd=20M=C3=BCller?= Date: Wed, 21 Jun 2023 14:23:58 +0200 Subject: [PATCH 007/164] Add mui/utils dependency --- package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/package.json b/package.json index 7a4df8eceb..35e436a905 100644 --- a/package.json +++ b/package.json @@ -40,6 +40,7 @@ "@mui/lab": "^5.0.0-alpha.134", "@mui/material": "^5.13.5", "@mui/styles": "^5.13.2", + "@mui/utils": "^5.13.1", "@react-aria/live-announcer": "^3.1.2", "classnames": "^2.2.6", "clsx": "^1.0.4", From be17ab40ee85bc97367281b20abe4889c7fe4403 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Gerd=20M=C3=BCller?= Date: Wed, 21 Jun 2023 14:24:44 +0200 Subject: [PATCH 008/164] Restructure component definitions --- src/config/settings.js | 72 +++++++++++++++++++++++------------------- 1 file changed, 40 insertions(+), 32 deletions(-) diff --git a/src/config/settings.js b/src/config/settings.js index 68b011a27b..37317c45d9 100644 --- a/src/config/settings.js +++ b/src/config/settings.js @@ -167,53 +167,61 @@ export default { }, useNextVariants: true // set so that console deprecation warning is removed }, - overrides: { + components: { + MuiButtonBase: { + defaultProps: { + disableTouchRipple: true, + }, + }, + MuiLink: { + defaultProps: { + underline: 'always' + }, + }, MuiListSubheader: { - root: { - '&[role="presentation"]:focus': { - outline: 0, + styleOverrides: { + root: { + '&[role="presentation"]:focus': { + outline: 0, + }, }, }, }, MuiTooltip: { // Overridden from https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/Tooltip/Tooltip.js#L40-L70 - tooltipPlacementLeft: { - ['@media (min-width:600px)']: { - margin: 0, + styleOverrides: { + tooltipPlacementLeft: { + ['@media (min-width:600px)']: { + margin: 0, + }, }, - }, - tooltipPlacementRight: { - ['@media (min-width:600px)']: { - margin: 0, + tooltipPlacementRight: { + ['@media (min-width:600px)']: { + margin: 0, + }, }, - }, - tooltipPlacementTop: { - ['@media (min-width:600px)']: { - margin: 0, + tooltipPlacementTop: { + ['@media (min-width:600px)']: { + margin: 0, + }, }, - }, - tooltipPlacementBottom: { - ['@media (min-width:600px)']: { - margin: 0, + tooltipPlacementBottom: { + ['@media (min-width:600px)']: { + margin: 0, + }, }, }, }, MuiTouchRipple: { - childPulsate: { - animation: 'none', - }, - rippleVisible: { - animation: 'none', + styleOverrides: { + childPulsate: { + animation: 'none', + }, + rippleVisible: { + animation: 'none', + }, }, }, }, - props: { - MuiButtonBase: { - disableTouchRipple: true, - }, - MuiLink: { - underline: 'always' - }, - }, }, language: 'en', // The default language set in the application availableLanguages: { // All the languages available in the language switcher From 68c362943e90a454fdf1dc31c98e3f2b5cf9ab35 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Gerd=20M=C3=BCller?= Date: Wed, 21 Jun 2023 14:25:24 +0200 Subject: [PATCH 009/164] Delete 'tReady' parameter from menu props --- src/components/WorkspaceMenu.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/components/WorkspaceMenu.js b/src/components/WorkspaceMenu.js index 07ad5455f5..c6e9a191a6 100644 --- a/src/components/WorkspaceMenu.js +++ b/src/components/WorkspaceMenu.js @@ -71,8 +71,10 @@ export class WorkspaceMenu extends Component { t, showZoomControls, toggleZoomControls, - ...menuProps + ...rest } = this.props; + const menuProps = { ...rest }; + delete menuProps.tReady; const { changeTheme, From c12a3d6429ede522046a3c617814131d298940a5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Gerd=20M=C3=BCller?= Date: Wed, 28 Jun 2023 09:33:31 +0200 Subject: [PATCH 010/164] Address linting errors --- src/components/AppProviders.js | 4 +- src/components/Branding.js | 3 +- src/components/ErrorDialog.js | 2 +- src/components/ScrollTo.js | 1 + src/components/SearchPanelControls.js | 74 ++++++++++++++------------- src/containers/WorkspaceAddButton.js | 5 ++ 6 files changed, 50 insertions(+), 39 deletions(-) diff --git a/src/components/AppProviders.js b/src/components/AppProviders.js index 180246483f..492e2e24a0 100644 --- a/src/components/AppProviders.js +++ b/src/components/AppProviders.js @@ -2,7 +2,9 @@ import { Component } from 'react'; import PropTypes from 'prop-types'; import { FullScreen, useFullScreenHandle } from 'react-full-screen'; import { I18nextProvider } from 'react-i18next'; -import { ThemeProvider, StyledEngineProvider, createTheme, adaptV4Theme } from '@mui/material/styles'; +import { + ThemeProvider, StyledEngineProvider, createTheme, adaptV4Theme, +} from '@mui/material/styles'; import StylesProvider from '@mui/styles/StylesProvider'; import jssPreset from '@mui/styles/jssPreset'; import createGenerateClassName from '@mui/styles/createGenerateClassName'; diff --git a/src/components/Branding.js b/src/components/Branding.js index 0fa3a89d98..6e48a1f82a 100644 --- a/src/components/Branding.js +++ b/src/components/Branding.js @@ -25,7 +25,8 @@ export class Branding extends Component { href="https://projectmirador.org" target="_blank" rel="noopener" - size="large"> + size="large" + > diff --git a/src/components/ErrorDialog.js b/src/components/ErrorDialog.js index 5a71ff1ec7..5828a6b98b 100644 --- a/src/components/ErrorDialog.js +++ b/src/components/ErrorDialog.js @@ -3,7 +3,7 @@ import Dialog from '@mui/material/Dialog'; import DialogContent from '@mui/material/DialogContent'; import DialogTitle from '@mui/material/DialogTitle'; import PropTypes from 'prop-types'; -import { DialogActions, DialogContentText, Typography } from '@mui/material'; +import { DialogActions, DialogContentText } from '@mui/material'; import Button from '@mui/material/Button'; import { isUndefined } from 'lodash'; diff --git a/src/components/ScrollTo.js b/src/components/ScrollTo.js index 4427f0f360..0e5c29b6f3 100644 --- a/src/components/ScrollTo.js +++ b/src/components/ScrollTo.js @@ -123,6 +123,7 @@ ScrollTo.propTypes = { PropTypes.func, PropTypes.shape({ current: PropTypes.instanceOf(Element) }), ]).isRequired, + nodeId: PropTypes.string.isRequired, offsetTop: PropTypes.number, scrollTo: PropTypes.bool.isRequired, }; diff --git a/src/components/SearchPanelControls.js b/src/components/SearchPanelControls.js index 282213f432..8e2d1b19af 100644 --- a/src/components/SearchPanelControls.js +++ b/src/components/SearchPanelControls.js @@ -122,44 +122,46 @@ export class SearchPanelControls extends Component { const { search, suggestions } = this.state; const id = `search-${companionWindowId}`; - return <> -
- ( - deburr(getMatch(option).trim()).toLowerCase() + return ( + <> + + ( + deburr(getMatch(option).trim()).toLowerCase() === deburr(getMatch(value).trim()).toLowerCase() - )} - noOptionsText="" - onChange={this.selectItem} - onInputChange={this.handleChange} - freeSolo - renderInput={params => ( - - - - - {Boolean(searchIsFetching) && ( + )} + noOptionsText="" + onChange={this.selectItem} + onInputChange={this.handleChange} + freeSolo + renderInput={params => ( + + + + + {Boolean(searchIsFetching) && ( - )} - - ), - }} - /> - )} - /> - - - ; + )} + + ), + }} + /> + )} + /> + + + + ); } } diff --git a/src/containers/WorkspaceAddButton.js b/src/containers/WorkspaceAddButton.js index 41fa18fcf3..506036df6a 100644 --- a/src/containers/WorkspaceAddButton.js +++ b/src/containers/WorkspaceAddButton.js @@ -8,6 +8,11 @@ import { getWindowIds, getWorkspace } from '../state/selectors'; import { WorkspaceAddButton } from '../components/WorkspaceAddButton'; // FIXME checkout https://mui.com/components/use-media-query/#migrating-from-withwidth +/** + * withWidth + * @memberof WorkspaceControlPanel + * @private + */ const withWidth = () => (WrappedComponent) => (props) => ; /** From f4ae9c955d0e333f3c40b8aef184ba6b9f211444 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Gerd=20M=C3=BCller?= Date: Thu, 3 Aug 2023 17:18:24 +0200 Subject: [PATCH 011/164] Add useWidth method --- src/components/AppProviders.js | 4 ++-- src/containers/WorkspaceAddButton.js | 22 ++++++++++++++++++++-- 2 files changed, 22 insertions(+), 4 deletions(-) diff --git a/src/components/AppProviders.js b/src/components/AppProviders.js index 492e2e24a0..9797aee45b 100644 --- a/src/components/AppProviders.js +++ b/src/components/AppProviders.js @@ -3,7 +3,7 @@ import PropTypes from 'prop-types'; import { FullScreen, useFullScreenHandle } from 'react-full-screen'; import { I18nextProvider } from 'react-i18next'; import { - ThemeProvider, StyledEngineProvider, createTheme, adaptV4Theme, + ThemeProvider, StyledEngineProvider, createTheme, } from '@mui/material/styles'; import StylesProvider from '@mui/styles/StylesProvider'; import jssPreset from '@mui/styles/jssPreset'; @@ -111,7 +111,7 @@ export class AppProviders extends Component { { + // eslint-disable-next-line react-hooks/rules-of-hooks + const matches = useMediaQuery(theme.breakpoints.up(key)); + return !output && matches ? key : output; + }, null) || 'xs' + ); +} + /** * withWidth * @memberof WorkspaceControlPanel * @private */ -const withWidth = () => (WrappedComponent) => (props) => ; +const withWidth = () => (WrappedComponent) => (props) => ; /** * mapStateToProps - to hook up connect From 696085f6ed24341624721e794c44153fdcb4e50b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Gerd=20M=C3=BCller?= Date: Thu, 3 Aug 2023 17:24:08 +0200 Subject: [PATCH 012/164] Fix scripts import order --- scripts/container-lint.js | 4 ++-- scripts/i18n-lint.js | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/scripts/container-lint.js b/scripts/container-lint.js index 7ef296ba57..9092774706 100644 --- a/scripts/container-lint.js +++ b/scripts/container-lint.js @@ -1,6 +1,6 @@ -const glob = require('glob'); // eslint-disable-line import/no-extraneous-dependencies -const fs = require('fs'); const chalk = require('chalk'); // eslint-disable-line import/no-extraneous-dependencies +const fs = require('fs'); +const glob = require('glob'); // eslint-disable-line import/no-extraneous-dependencies const { error } = console; const globOpts = { cwd: 'src/containers' }; diff --git a/scripts/i18n-lint.js b/scripts/i18n-lint.js index 7565bcdea1..16a1313b2a 100644 --- a/scripts/i18n-lint.js +++ b/scripts/i18n-lint.js @@ -1,6 +1,6 @@ -const glob = require('glob'); // eslint-disable-line import/no-extraneous-dependencies -const fs = require('fs'); const chalk = require('chalk'); // eslint-disable-line import/no-extraneous-dependencies +const fs = require('fs'); +const glob = require('glob'); // eslint-disable-line import/no-extraneous-dependencies const { log } = console; const globOpts = { cwd: 'src/locales' }; From 7b2396e9e2b99c6bae39202177db2b15ea448832 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Gerd=20M=C3=BCller?= Date: Thu, 3 Aug 2023 17:30:59 +0200 Subject: [PATCH 013/164] Fix scripts import order --- scripts/container-lint.js | 2 +- scripts/i18n-lint.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/scripts/container-lint.js b/scripts/container-lint.js index 9092774706..01cf79c732 100644 --- a/scripts/container-lint.js +++ b/scripts/container-lint.js @@ -1,5 +1,5 @@ -const chalk = require('chalk'); // eslint-disable-line import/no-extraneous-dependencies const fs = require('fs'); +const chalk = require('chalk'); // eslint-disable-line import/no-extraneous-dependencies const glob = require('glob'); // eslint-disable-line import/no-extraneous-dependencies const { error } = console; diff --git a/scripts/i18n-lint.js b/scripts/i18n-lint.js index 16a1313b2a..8b86e64283 100644 --- a/scripts/i18n-lint.js +++ b/scripts/i18n-lint.js @@ -1,5 +1,5 @@ -const chalk = require('chalk'); // eslint-disable-line import/no-extraneous-dependencies const fs = require('fs'); +const chalk = require('chalk'); // eslint-disable-line import/no-extraneous-dependencies const glob = require('glob'); // eslint-disable-line import/no-extraneous-dependencies const { log } = console; From d4cf2461aae01090573ac1a38949528f39cd3c76 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Gerd=20M=C3=BCller?= Date: Mon, 7 Aug 2023 14:46:02 +0200 Subject: [PATCH 014/164] Add PrimaryWindow test id --- __tests__/src/components/PrimaryWindow.test.js | 4 ++-- src/components/PrimaryWindow.js | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/__tests__/src/components/PrimaryWindow.test.js b/__tests__/src/components/PrimaryWindow.test.js index 52ca6c86b8..ad78ebf4b5 100644 --- a/__tests__/src/components/PrimaryWindow.test.js +++ b/__tests__/src/components/PrimaryWindow.test.js @@ -16,7 +16,7 @@ function createWrapper(props) { describe('PrimaryWindow', () => { it('should render expected elements', async () => { createWrapper({ isFetching: false }); - await screen.findByRole('region', { accessibleName: 'item' }); + await screen.findByTestId('test-window'); expect(document.querySelector('.mirador-primary-window')).toBeInTheDocument(); // eslint-disable-line testing-library/no-node-access expect(document.querySelector('.mirador-companion-area-left')).toBeInTheDocument(); // eslint-disable-line testing-library/no-node-access }); @@ -30,7 +30,7 @@ describe('PrimaryWindow', () => { }); it('should render if fetching is complete and view is gallery', async () => { createWrapper({ isFetching: false, view: 'gallery' }); - await screen.findByRole('region', { accessibleName: 'gallery section' }); + await screen.findByTestId('test-window'); expect(document.querySelector('#xyz-gallery')).toBeInTheDocument(); // eslint-disable-line testing-library/no-node-access }); it('should render and if manifest is collection and isCollectionDialogVisible', async () => { diff --git a/src/components/PrimaryWindow.js b/src/components/PrimaryWindow.js index 988b6784ae..b9bdc7720e 100644 --- a/src/components/PrimaryWindow.js +++ b/src/components/PrimaryWindow.js @@ -77,7 +77,7 @@ export class PrimaryWindow extends Component { isCollectionDialogVisible, windowId, classes, children, } = this.props; return ( -
+
{ isCollectionDialogVisible && } From 8dc0ab57245e41ee887ead306f20a82e9e1746e7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Gerd=20M=C3=BCller?= Date: Tue, 12 Sep 2023 16:48:39 +0200 Subject: [PATCH 015/164] Migrate components to MUI v5 with sx/styled API --- scripts/container-lint.js | 1 - scripts/i18n-lint.js | 1 - src/components/AudioViewer.js | 58 ++++---- src/components/ChangeThemeDialog.js | 67 +++++---- src/components/CollapsibleSection.js | 26 ++-- src/components/GalleryViewThumbnail.js | 130 +++++++++++++----- src/components/PrimaryWindow.js | 15 +- src/components/SidebarIndexItem.js | 6 +- src/components/SidebarIndexThumbnail.js | 7 +- src/components/VideoViewer.js | 22 ++- .../WindowSideBarAnnotationsPanel.js | 15 +- src/components/WindowSideBarInfoPanel.js | 27 ++-- src/components/WindowTopBarTitle.js | 29 ++-- src/components/WorkspaceExport.js | 6 +- src/components/ZoomControls.js | 24 +++- src/containers/AudioViewer.js | 14 -- src/containers/ChangeThemeDialog.js | 24 ---- src/containers/CollapsibleSection.js | 15 -- src/containers/GalleryViewThumbnail.js | 58 -------- src/containers/PrimaryWindow.js | 10 -- src/containers/SidebarIndexItem.js | 11 -- src/containers/SidebarIndexThumbnail.js | 11 -- src/containers/VideoViewer.js | 15 -- .../WindowSideBarAnnotationsPanel.js | 13 -- src/containers/WindowSideBarInfoPanel.js | 17 --- src/containers/WindowTopBarTitle.js | 13 -- src/containers/WorkspaceExport.js | 11 -- src/containers/ZoomControls.js | 26 ---- 28 files changed, 285 insertions(+), 387 deletions(-) diff --git a/scripts/container-lint.js b/scripts/container-lint.js index 477b13a5ec..233e4588b0 100644 --- a/scripts/container-lint.js +++ b/scripts/container-lint.js @@ -1,7 +1,6 @@ const fs = require('fs'); const glob = require('glob'); // eslint-disable-line import/no-extraneous-dependencies const chalk = require('chalk'); // eslint-disable-line import/no-extraneous-dependencies -const glob = require('glob'); // eslint-disable-line import/no-extraneous-dependencies const { error } = console; const globOpts = { cwd: 'src/containers' }; diff --git a/scripts/i18n-lint.js b/scripts/i18n-lint.js index bb20b49b4c..8035c7bc1d 100644 --- a/scripts/i18n-lint.js +++ b/scripts/i18n-lint.js @@ -1,7 +1,6 @@ const fs = require('fs'); const glob = require('glob'); // eslint-disable-line import/no-extraneous-dependencies const chalk = require('chalk'); // eslint-disable-line import/no-extraneous-dependencies -const glob = require('glob'); // eslint-disable-line import/no-extraneous-dependencies const { log } = console; const globOpts = { cwd: 'src/locales' }; diff --git a/src/components/AudioViewer.js b/src/components/AudioViewer.js index ab7b9d6883..66dd04c72f 100644 --- a/src/components/AudioViewer.js +++ b/src/components/AudioViewer.js @@ -1,40 +1,48 @@ -import { Component, Fragment } from 'react'; +import { Fragment } from 'react'; import PropTypes from 'prop-types'; +import { styled } from '@mui/material/styles'; + +const Container = styled('div')({ + alignItems: 'center', + display: 'flex', + width: '100%', +}); + +const StyledAudio = styled('audio')({ + width: '100%', +}); /** */ -export class AudioViewer extends Component { +export function AudioViewer(props) { /* eslint-disable jsx-a11y/media-has-caption */ /** */ - render() { - const { - captions, classes, audioOptions, audioResources, - } = this.props; + const { + captions, audioOptions, audioResources, + } = props; - return ( -
- -
- ); - } - /* eslint-enable jsx-a11y/media-has-caption */ + return ( + + + {audioResources.map((audio) => ( + + + + ))} + {captions.map((caption) => ( + + + + ))} + + + ); } +/* eslint-enable jsx-a11y/media-has-caption */ AudioViewer.propTypes = { audioOptions: PropTypes.object, // eslint-disable-line react/forbid-prop-types audioResources: PropTypes.arrayOf(PropTypes.object), // eslint-disable-line react/forbid-prop-types captions: PropTypes.arrayOf(PropTypes.object), // eslint-disable-line react/forbid-prop-types - classes: PropTypes.objectOf(PropTypes.string).isRequired, }; AudioViewer.defaultProps = { diff --git a/src/components/ChangeThemeDialog.js b/src/components/ChangeThemeDialog.js index 68dcaec794..820c03a61b 100644 --- a/src/components/ChangeThemeDialog.js +++ b/src/components/ChangeThemeDialog.js @@ -11,6 +11,28 @@ import { } from '@mui/material'; import PaletteIcon from '@mui/icons-material/PaletteSharp'; import PropTypes from 'prop-types'; +import { styled } from '@mui/material/styles'; + +const StyledDialog = styled(Dialog)(({ theme }) => ({ + '& .dark': { + color: '#000000', + }, + '& .dialogContent': { + padding: 0, + }, + '& .light': { + color: '#BDBDBD', + }, + '& .listitem': { + '&:focus': { + backgroundColor: theme.palette.action.focus, + }, + '&:hover': { + backgroundColor: theme.palette.action.hover, + }, + cursor: 'pointer', + }, +})); /** * a simple dialog providing the possibility to switch the theme @@ -36,7 +58,6 @@ export class ChangeThemeDialog extends Component { /** */ render() { const { - classes, handleClose, open, selectedTheme, @@ -44,42 +65,34 @@ export class ChangeThemeDialog extends Component { themeIds, } = this.props; return ( - + - - {t('changeTheme')} - + {t('changeTheme')} - + - { - themeIds.map(value => ( - { this.handleThemeChange(value); }} - selected={value === selectedTheme} - value={value} - > - - - - {t(value)} - - )) - } + {themeIds.map((value) => ( + this.handleThemeChange(value)} + selected={value === selectedTheme} + value={value} + > + + + + {t(value)} + + ))} - + ); } } ChangeThemeDialog.propTypes = { - classes: PropTypes.objectOf(PropTypes.string).isRequired, handleClose: PropTypes.func.isRequired, open: PropTypes.bool, selectedTheme: PropTypes.string.isRequired, diff --git a/src/components/CollapsibleSection.js b/src/components/CollapsibleSection.js index 15f057b719..d892eaaae7 100644 --- a/src/components/CollapsibleSection.js +++ b/src/components/CollapsibleSection.js @@ -1,10 +1,17 @@ import { Component } from 'react'; import PropTypes from 'prop-types'; +import { styled } from '@mui/material/styles'; import Typography from '@mui/material/Typography'; import KeyboardArrowDown from '@mui/icons-material/KeyboardArrowDownSharp'; import KeyboardArrowUp from '@mui/icons-material/KeyboardArrowUpSharp'; import MiradorMenuButton from '../containers/MiradorMenuButton'; +const Container = styled('div')(({ theme }) => ({ + cursor: 'pointer', // This style will be applied to Typography + display: 'flex', + justifyContent: 'space-between', +})); + /** * CollapsableSection ~ */ @@ -29,15 +36,15 @@ export class CollapsibleSection extends Component { */ render() { const { - children, classes, id, label, t, + children, id, label, t, } = this.props; const { open } = this.state; return ( <> -
+ {open ? : } -
+ {open && children} ); @@ -67,7 +69,7 @@ export class CollapsibleSection extends Component { CollapsibleSection.propTypes = { children: PropTypes.node.isRequired, - classes: PropTypes.objectOf(PropTypes.string).isRequired, + id: PropTypes.string.isRequired, label: PropTypes.string.isRequired, t: PropTypes.func.isRequired, diff --git a/src/components/GalleryViewThumbnail.js b/src/components/GalleryViewThumbnail.js index 8783c2b1ec..d45b0b5978 100644 --- a/src/components/GalleryViewThumbnail.js +++ b/src/components/GalleryViewThumbnail.js @@ -1,14 +1,73 @@ import { createRef, Component } from 'react'; import PropTypes from 'prop-types'; +import { styled } from '@mui/material/styles'; import Avatar from '@mui/material/Avatar'; import Chip from '@mui/material/Chip'; import AnnotationIcon from '@mui/icons-material/CommentSharp'; import SearchIcon from '@mui/icons-material/SearchSharp'; -import classNames from 'classnames'; import { InView } from 'react-intersection-observer'; import MiradorCanvas from '../lib/MiradorCanvas'; import IIIFThumbnail from '../containers/IIIFThumbnail'; +const GalleryViewItem = styled('div')(({ + theme, selected, hasAnnotations, config, +}) => ({ + '&:focus': { + outline: 'none', + }, + '&:has(annotations)': { + border: `2px solid ${theme.palette.action.selected}`, + }, + '&:hover': { + backgroundColor: theme.palette.action.hover, + }, + '&:selected, &:selected:has(annotations)': { + border: `2px solid ${theme.palette.primary.main}`, + }, + border: '2px solid transparent', + cursor: 'pointer', + display: 'inline-block', + margin: `${theme.spacing(1)}px ${theme.spacing(0.5)}px`, + maxHeight: config.height + 45, + minWidth: '60px', + overflow: 'hidden', + padding: theme.spacing(0.5), + position: 'relative', + width: 'min-content', + + ...(selected && { + border: `2px solid ${theme.palette.primary.main}`, + }), + + ...(hasAnnotations && { + border: `2px solid ${theme.palette.action.selected}`, + }), +})); + +const SearchChip = styled(Chip)(({ theme }) => ({ + ...theme.typography.caption, + '&.Mui-selected .MuiAvatar-circle': { + backgroundColor: theme.palette.highlights?.primary, + }, + marginTop: 2, +})); + +const AnnotationsChip = styled(Chip)(({ theme }) => ({ + ...theme.typography.caption, +})); + +const AvatarIcon = styled(Avatar)(() => ({ + backgroundColor: 'transparent', +})); + +const ChipsContainer = styled('div')(() => ({ + opacity: 0.875, + position: 'absolute', + right: 0, + textAlign: 'right', + top: 0, +})); + /** * Represents a WindowViewer in the mirador workspace. Responsible for mounting * OSD and Navigation @@ -102,22 +161,23 @@ export class GalleryViewThumbnail extends Component { render() { const { annotationsCount, searchAnnotationsCount, - canvas, classes, config, selected, + canvas, config, selected, } = this.props; const miradorCanvas = new MiradorCanvas(canvas); return ( -
0 ? classes.hasAnnotations : '', - ) - } + sx={{ + ...(selected && { + border: `2px solid ${theme => theme.palette.primary.main}`, + }), + ...(searchAnnotationsCount > 0 && { + border: `2px solid ${theme => theme.palette.action.selected}`, + }), + }} onClick={this.handleSelect} onKeyUp={this.handleKey} ref={this.myRef} @@ -130,43 +190,52 @@ export class GalleryViewThumbnail extends Component { variant="outside" maxWidth={config.width} maxHeight={config.height} - style={{ + sx={{ margin: '0 auto', - maxWidth: `${Math.ceil(config.height * miradorCanvas.aspectRatio)}px`, + maxWidth: `${() => Math.ceil(config.height * miradorCanvas.aspectRatio)}px`, }} > -
- { searchAnnotationsCount > 0 && ( - + {searchAnnotationsCount > 0 && ( + + - + )} label={searchAnnotationsCount} - className={classNames(classes.searchChip)} + sx={{ + '&.Mui-selected .MuiAvatar-circle': { + backgroundColor: theme => theme.palette.highlights?.primary, + }, + }} size="small" /> )} - { (annotationsCount || 0) > 0 && ( - 0 && ( + - - + + + )} label={annotationsCount} - className={ - classNames( - classes.annotationsChip, - ) - } + sx={{ + '&.Mui-selected .MuiAvatar-circle': { + backgroundColor: theme => theme.palette.highlights?.primary, + }, + }} size="small" /> )} -
+ -
+ ); } @@ -175,7 +244,6 @@ export class GalleryViewThumbnail extends Component { GalleryViewThumbnail.propTypes = { annotationsCount: PropTypes.number, canvas: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types - classes: PropTypes.objectOf(PropTypes.string).isRequired, config: PropTypes.shape({ height: PropTypes.number, width: PropTypes.number, diff --git a/src/components/PrimaryWindow.js b/src/components/PrimaryWindow.js index b9bdc7720e..a608e62a21 100644 --- a/src/components/PrimaryWindow.js +++ b/src/components/PrimaryWindow.js @@ -1,6 +1,6 @@ import { Component, lazy, Suspense } from 'react'; import PropTypes from 'prop-types'; -import classNames from 'classnames'; +import { styled } from '@mui/material/styles'; import WindowSideBar from '../containers/WindowSideBar'; import CompanionArea from '../containers/CompanionArea'; import CollectionDialog from '../containers/CollectionDialog'; @@ -16,6 +16,12 @@ GalleryView.displayName = 'GalleryView'; SelectCollection.displayName = 'SelectCollection'; WindowViewer.displayName = 'WindowViewer'; +const PrimaryWindowContainer = styled('div')(() => ({ + display: 'flex', + flex: 1, + position: 'relative', +})); + /** * PrimaryWindow - component that renders the primary content of a Mirador * window. Right now this differentiates between a Image, Video, or Audio viewer. @@ -74,17 +80,17 @@ export class PrimaryWindow extends Component { */ render() { const { - isCollectionDialogVisible, windowId, classes, children, + isCollectionDialogVisible, windowId, children, } = this.props; return ( -
+ { isCollectionDialogVisible && } }> {children || this.renderViewer()} -
+ ); } } @@ -92,7 +98,6 @@ export class PrimaryWindow extends Component { PrimaryWindow.propTypes = { audioResources: PropTypes.arrayOf(PropTypes.object), // eslint-disable-line react/forbid-prop-types children: PropTypes.node, - classes: PropTypes.objectOf(PropTypes.string).isRequired, isCollection: PropTypes.bool, isCollectionDialogVisible: PropTypes.bool, isFetching: PropTypes.bool, diff --git a/src/components/SidebarIndexItem.js b/src/components/SidebarIndexItem.js index 5882ad8c39..e3a1204a6d 100644 --- a/src/components/SidebarIndexItem.js +++ b/src/components/SidebarIndexItem.js @@ -1,19 +1,18 @@ import { Component } from 'react'; import PropTypes from 'prop-types'; import Typography from '@mui/material/Typography'; -import classNames from 'classnames'; /** */ export class SidebarIndexItem extends Component { /** */ render() { const { - classes, label, + label, } = this.props; return ( {label} @@ -23,6 +22,5 @@ export class SidebarIndexItem extends Component { } SidebarIndexItem.propTypes = { - classes: PropTypes.objectOf(PropTypes.string).isRequired, label: PropTypes.string.isRequired, }; diff --git a/src/components/SidebarIndexThumbnail.js b/src/components/SidebarIndexThumbnail.js index a5e685b2bc..3abf2902c4 100644 --- a/src/components/SidebarIndexThumbnail.js +++ b/src/components/SidebarIndexThumbnail.js @@ -1,7 +1,6 @@ import { Component } from 'react'; import PropTypes from 'prop-types'; import Typography from '@mui/material/Typography'; -import classNames from 'classnames'; import IIIFThumbnail from '../containers/IIIFThumbnail'; /** */ @@ -9,7 +8,7 @@ export class SidebarIndexThumbnail extends Component { /** */ render() { const { - classes, canvas, height, label, width, + canvas, height, label, width, } = this.props; return ( @@ -18,13 +17,12 @@ export class SidebarIndexThumbnail extends Component {
{label} @@ -36,7 +34,6 @@ export class SidebarIndexThumbnail extends Component { SidebarIndexThumbnail.propTypes = { canvas: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types - classes: PropTypes.objectOf(PropTypes.string).isRequired, height: PropTypes.number, label: PropTypes.string.isRequired, width: PropTypes.number, diff --git a/src/components/VideoViewer.js b/src/components/VideoViewer.js index e8a3d617df..759fd06048 100644 --- a/src/components/VideoViewer.js +++ b/src/components/VideoViewer.js @@ -1,5 +1,17 @@ import { Component, Fragment } from 'react'; import PropTypes from 'prop-types'; +import { styled } from '@mui/material/styles'; + +const Container = styled('div')(() => ({ + alignItems: 'center', + display: 'flex', + width: '100%', +})); + +const Video = styled('video')(() => ({ + maxHeight: '100%', + width: '100%', +})); /** */ export class VideoViewer extends Component { @@ -7,11 +19,11 @@ export class VideoViewer extends Component { /** */ render() { const { - captions, classes, videoOptions, videoResources, + captions, videoOptions, videoResources, } = this.props; return ( -
-
+ + ); } /* eslint-enable jsx-a11y/media-has-caption */ diff --git a/src/components/WindowSideBarAnnotationsPanel.js b/src/components/WindowSideBarAnnotationsPanel.js index 75d99711dc..6841aef087 100644 --- a/src/components/WindowSideBarAnnotationsPanel.js +++ b/src/components/WindowSideBarAnnotationsPanel.js @@ -1,11 +1,19 @@ import { createRef, Component } from 'react'; import PropTypes from 'prop-types'; +import { styled } from '@mui/material/styles'; import Typography from '@mui/material/Typography'; import AnnotationSettings from '../containers/AnnotationSettings'; import CanvasAnnotations from '../containers/CanvasAnnotations'; import CompanionWindow from '../containers/CompanionWindow'; import ns from '../config/css-ns'; +const Section = styled('div')(({ theme }) => ({ + borderBottom: `.5px solid ${theme.palette.section_divider}`, + paddingBottom: theme.spacing(1), + paddingLeft: theme.spacing(2), + paddingRight: theme.spacing(1), + paddingTop: theme.spacing(2), +})); /** * WindowSideBarAnnotationsPanel ~ */ @@ -22,7 +30,7 @@ export class WindowSideBarAnnotationsPanel extends Component { */ render() { const { - annotationCount, classes, canvasIds, t, windowId, id, + annotationCount, canvasIds, t, windowId, id, } = this.props; return ( } > -
+
{t('showingNumAnnotations', { count: annotationCount, number: annotationCount })} -
+ {canvasIds.map((canvasId, index) => ( ({ + borderBottom: `.5px solid ${theme.palette.section_divider}`, + paddingBottom: theme.spacing(1), + paddingLeft: theme.spacing(2), + paddingRight: theme.spacing(1), + paddingTop: theme.spacing(2), +})); /** * WindowSideBarInfoPanel */ @@ -21,7 +29,6 @@ export class WindowSideBarInfoPanel extends Component { windowId, id, canvasIds, - classes, collectionPath, t, locale, @@ -49,7 +56,7 @@ export class WindowSideBarInfoPanel extends Component { > { canvasIds.map((canvasId, index) => ( -
+
-
+ )) } { collectionPath.length > 0 && ( -
+
-
+ )} -
+
-
+ -
+
-
+ ); } @@ -81,7 +88,6 @@ export class WindowSideBarInfoPanel extends Component { WindowSideBarInfoPanel.propTypes = { availableLocales: PropTypes.arrayOf(PropTypes.string), canvasIds: PropTypes.arrayOf(PropTypes.string), - classes: PropTypes.objectOf(PropTypes.string), collectionPath: PropTypes.arrayOf(PropTypes.string), id: PropTypes.string.isRequired, locale: PropTypes.string, @@ -94,7 +100,6 @@ WindowSideBarInfoPanel.propTypes = { WindowSideBarInfoPanel.defaultProps = { availableLocales: [], canvasIds: [], - classes: {}, collectionPath: [], locale: '', setLocale: undefined, diff --git a/src/components/WindowTopBarTitle.js b/src/components/WindowTopBarTitle.js index 866eb19d2b..2482254efc 100644 --- a/src/components/WindowTopBarTitle.js +++ b/src/components/WindowTopBarTitle.js @@ -1,9 +1,21 @@ import { Component } from 'react'; import PropTypes from 'prop-types'; +import { styled } from '@mui/material/styles'; import Typography from '@mui/material/Typography'; import Skeleton from '@mui/material/Skeleton'; import ErrorIcon from '@mui/icons-material/ErrorOutlineSharp'; +const TitleTypographyStyle = styled(TitleTypography)(({ theme }) => ({ + ...theme.typography.h6, + flexGrow: 1, + paddingLeft: theme.spacing(0.5), +})); + +const TitleStyle = styled('div')(({ theme }) => ({ + ...theme.typography.h6, + flexGrow: 1, + paddingLeft: theme.spacing(0.5), +})); /** */ function TitleTypography({ children, ...props }) { return ( @@ -27,32 +39,32 @@ export class WindowTopBarTitle extends Component { */ render() { const { - classes, error, hideWindowTitle, isFetching, manifestTitle, + error, hideWindowTitle, isFetching, manifestTitle, } = this.props; let title = null; if (isFetching) { title = ( - + - + ); } else if (error) { title = ( <> - + {error} - + ); } else if (hideWindowTitle) { - title = (
); + title = (); } else { title = ( - + {manifestTitle} - + ); } return title; @@ -60,7 +72,6 @@ export class WindowTopBarTitle extends Component { } WindowTopBarTitle.propTypes = { - classes: PropTypes.objectOf(PropTypes.string).isRequired, error: PropTypes.string, hideWindowTitle: PropTypes.bool, isFetching: PropTypes.bool, diff --git a/src/components/WorkspaceExport.js b/src/components/WorkspaceExport.js index 38a143a2da..7643e4455a 100644 --- a/src/components/WorkspaceExport.js +++ b/src/components/WorkspaceExport.js @@ -54,7 +54,7 @@ export class WorkspaceExport extends Component { */ render() { const { - children, classes, container, open, t, + children, container, open, t, } = this.props; const { copied } = this.state; @@ -95,7 +95,7 @@ export class WorkspaceExport extends Component { } > {t('viewWorkspaceConfiguration')} @@ -125,7 +125,6 @@ export class WorkspaceExport extends Component { WorkspaceExport.propTypes = { children: PropTypes.node, - classes: PropTypes.objectOf(PropTypes.string), container: PropTypes.object, // eslint-disable-line react/forbid-prop-types exportableState: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types handleClose: PropTypes.func.isRequired, @@ -135,7 +134,6 @@ WorkspaceExport.propTypes = { WorkspaceExport.defaultProps = { children: null, - classes: {}, container: null, open: false, t: key => key, diff --git a/src/components/ZoomControls.js b/src/components/ZoomControls.js index e0cb0dbc4a..3c918182a7 100644 --- a/src/components/ZoomControls.js +++ b/src/components/ZoomControls.js @@ -1,10 +1,25 @@ import { Component } from 'react'; import AddCircleIcon from '@mui/icons-material/AddCircleOutlineSharp'; import RemoveCircleIcon from '@mui/icons-material/RemoveCircleOutlineSharp'; +import { styled } from '@mui/material/styles'; import PropTypes from 'prop-types'; +import Box from '@mui/material/Box'; import RestoreZoomIcon from './icons/RestoreZoomIcon'; import MiradorMenuButton from '../containers/MiradorMenuButton'; +const ZoomControlsWrapper = styled('div')(({ theme }) => ({ + display: 'flex', + flexDirection: 'row', + justifyContent: 'center', +})); + +const dividerStyle = { + borderRight: '1px solid #808080', + display: 'inline-block', + height: '24px', + margin: '12px 6px', +}; + /** */ export class ZoomControls extends Component { @@ -46,7 +61,7 @@ export class ZoomControls extends Component { */ render() { const { - displayDivider, showZoomControls, classes, t, zoomToWorld, + displayDivider, showZoomControls, t, zoomToWorld, } = this.props; if (!showZoomControls) { @@ -56,7 +71,7 @@ export class ZoomControls extends Component { ); } return ( -
+ @@ -66,14 +81,13 @@ export class ZoomControls extends Component { zoomToWorld(false)}> - {displayDivider && } -
+ {displayDivider && } + ); } } ZoomControls.propTypes = { - classes: PropTypes.objectOf(PropTypes.string).isRequired, displayDivider: PropTypes.bool, showZoomControls: PropTypes.bool, t: PropTypes.func, diff --git a/src/containers/AudioViewer.js b/src/containers/AudioViewer.js index c39d973726..2bcd274096 100644 --- a/src/containers/AudioViewer.js +++ b/src/containers/AudioViewer.js @@ -1,7 +1,6 @@ import { connect } from 'react-redux'; import { compose } from 'redux'; import { withTranslation } from 'react-i18next'; -import withStyles from '@mui/styles/withStyles'; import { withPlugins } from '../extend/withPlugins'; import { AudioViewer } from '../components/AudioViewer'; import { getConfig, getVisibleCanvasAudioResources, getVisibleCanvasCaptions } from '../state/selectors'; @@ -15,21 +14,8 @@ const mapStateToProps = (state, { windowId }) => ( } ); -/** */ -const styles = () => ({ - audio: { - width: '100%', - }, - container: { - alignItems: 'center', - display: 'flex', - width: '100%', - }, -}); - const enhance = compose( withTranslation(), - withStyles(styles), connect(mapStateToProps, null), withPlugins('AudioViewer'), ); diff --git a/src/containers/ChangeThemeDialog.js b/src/containers/ChangeThemeDialog.js index a86bb231f9..a473f22f1b 100644 --- a/src/containers/ChangeThemeDialog.js +++ b/src/containers/ChangeThemeDialog.js @@ -1,6 +1,5 @@ import { compose } from 'redux'; import { connect } from 'react-redux'; -import withStyles from '@mui/styles/withStyles'; import { withTranslation } from 'react-i18next'; import { withPlugins } from '../extend/withPlugins'; import * as actions from '../state/actions'; @@ -26,31 +25,8 @@ const mapStateToProps = state => ({ themeIds: getThemeIds(state), }); -/** */ -const styles = theme => ({ - dark: { - color: '#000000', - }, - dialogContent: { - padding: 0, - }, - light: { - color: '#BDBDBD', - }, - listitem: { - '&:focus': { - backgroundColor: theme.palette.action.focus, - }, - '&:hover': { - backgroundColor: theme.palette.action.hover, - }, - cursor: 'pointer', - }, -}); - const enhance = compose( withTranslation(), - withStyles(styles), connect(mapStateToProps, mapDispatchToProps), withPlugins('ChangeThemeDialog'), ); diff --git a/src/containers/CollapsibleSection.js b/src/containers/CollapsibleSection.js index 8954db7318..9e32b49c24 100644 --- a/src/containers/CollapsibleSection.js +++ b/src/containers/CollapsibleSection.js @@ -1,24 +1,9 @@ import { compose } from 'redux'; import { withTranslation } from 'react-i18next'; -import withStyles from '@mui/styles/withStyles'; import { CollapsibleSection } from '../components/CollapsibleSection'; -const styles = { - button: { - padding: 0, - }, - container: { - display: 'flex', - justifyContent: 'space-between', - }, - heading: { - cursor: 'pointer', - }, -}; - const enhance = compose( withTranslation(), - withStyles(styles), ); export default enhance(CollapsibleSection); diff --git a/src/containers/GalleryViewThumbnail.js b/src/containers/GalleryViewThumbnail.js index 472db0ad64..c0306777ce 100644 --- a/src/containers/GalleryViewThumbnail.js +++ b/src/containers/GalleryViewThumbnail.js @@ -1,7 +1,6 @@ import { compose } from 'redux'; import { connect } from 'react-redux'; import flatten from 'lodash/flatten'; -import withStyles from '@mui/styles/withStyles'; import * as actions from '../state/actions'; import { GalleryViewThumbnail } from '../components/GalleryViewThumbnail'; import { @@ -12,62 +11,6 @@ import { getCompanionWindowsForContent, } from '../state/selectors'; -/** - * Styles to be passed to the withStyles HOC - */ -const styles = theme => ({ - annotationIcon: { - height: '1rem', - width: '1rem', - }, - annotationsChip: { - ...theme.typography.caption, - }, - avatar: { - backgroundColor: 'transparent', - }, - chips: { - opacity: 0.875, - position: 'absolute', - right: 0, - textAlign: 'right', - top: 0, - }, - galleryViewItem: { - '&$hasAnnotations': { - border: `2px solid ${theme.palette.action.selected}`, - }, - '&$selected,&$selected$hasAnnotations': { - border: `2px solid ${theme.palette.primary.main}`, - }, - '&:focus': { - outline: 'none', - }, - '&:hover': { - backgroundColor: theme.palette.action.hover, - }, - border: '2px solid transparent', - cursor: 'pointer', - display: 'inline-block', - margin: `${theme.spacing(1)} ${theme.spacing(0.5)}`, - maxHeight: props => props.config.height + 45, - minWidth: '60px', - overflow: 'hidden', - padding: theme.spacing(0.5), - position: 'relative', - width: 'min-content', - }, - hasAnnotations: {}, - searchChip: { - ...theme.typography.caption, - '&$selected $avatar': { - backgroundColor: theme.palette.highlights?.primary, - }, - marginTop: 2, - }, - selected: {}, -}); - /** */ const mapStateToProps = (state, { canvas, windowId }) => { const currentCanvas = getCurrentCanvas(state, { windowId }); @@ -115,7 +58,6 @@ const mapDispatchToProps = (dispatch, { canvas, id, windowId }) => ({ const enhance = compose( connect(mapStateToProps, mapDispatchToProps), - withStyles(styles), // further HOC go here ); diff --git a/src/containers/PrimaryWindow.js b/src/containers/PrimaryWindow.js index 637b4cc4f6..1895e80539 100644 --- a/src/containers/PrimaryWindow.js +++ b/src/containers/PrimaryWindow.js @@ -1,6 +1,5 @@ import { compose } from 'redux'; import { connect } from 'react-redux'; -import withStyles from '@mui/styles/withStyles'; import { withPlugins } from '../extend/withPlugins'; import { getManifestoInstance, getVisibleCanvasAudioResources, getVisibleCanvasVideoResources, getWindow, @@ -18,16 +17,7 @@ const mapStateToProps = (state, { windowId }) => { }; }; -const styles = { - primaryWindow: { - display: 'flex', - flex: 1, - position: 'relative', - }, -}; - const enhance = compose( - withStyles(styles), connect(mapStateToProps, null), withPlugins('PrimaryWindow'), ); diff --git a/src/containers/SidebarIndexItem.js b/src/containers/SidebarIndexItem.js index a05595ee25..bc8a19001e 100644 --- a/src/containers/SidebarIndexItem.js +++ b/src/containers/SidebarIndexItem.js @@ -1,21 +1,10 @@ import { compose } from 'redux'; import { connect } from 'react-redux'; import { withTranslation } from 'react-i18next'; -import withStyles from '@mui/styles/withStyles'; import { withPlugins } from '../extend/withPlugins'; import { SidebarIndexItem } from '../components/SidebarIndexItem'; -/** - * Styles for withStyles HOC - */ -const styles = theme => ({ - label: { - paddingLeft: theme.spacing(1), - }, -}); - const enhance = compose( - withStyles(styles), withTranslation(), connect(null, null), withPlugins('SidebarIndexItem'), diff --git a/src/containers/SidebarIndexThumbnail.js b/src/containers/SidebarIndexThumbnail.js index ab951050a3..74c831814f 100644 --- a/src/containers/SidebarIndexThumbnail.js +++ b/src/containers/SidebarIndexThumbnail.js @@ -1,7 +1,6 @@ import { compose } from 'redux'; import { connect } from 'react-redux'; import { withTranslation } from 'react-i18next'; -import withStyles from '@mui/styles/withStyles'; import { withPlugins } from '../extend/withPlugins'; import { SidebarIndexThumbnail } from '../components/SidebarIndexThumbnail'; import { getConfig } from '../state/selectors'; @@ -15,17 +14,7 @@ const mapStateToProps = (state, { data }) => ({ ...(getConfig(state).canvasNavigation || {}), }); -/** - * Styles for withStyles HOC - */ -const styles = theme => ({ - label: { - paddingLeft: theme.spacing(1), - }, -}); - const enhance = compose( - withStyles(styles), withTranslation(), connect(mapStateToProps, null), withPlugins('SidebarIndexThumbnail'), diff --git a/src/containers/VideoViewer.js b/src/containers/VideoViewer.js index a55240c1e7..3c868940a2 100644 --- a/src/containers/VideoViewer.js +++ b/src/containers/VideoViewer.js @@ -1,7 +1,6 @@ import { connect } from 'react-redux'; import { compose } from 'redux'; import { withTranslation } from 'react-i18next'; -import withStyles from '@mui/styles/withStyles'; import { withPlugins } from '../extend/withPlugins'; import { VideoViewer } from '../components/VideoViewer'; import { getConfig, getVisibleCanvasCaptions, getVisibleCanvasVideoResources } from '../state/selectors'; @@ -15,22 +14,8 @@ const mapStateToProps = (state, { windowId }) => ( } ); -/** */ -const styles = () => ({ - container: { - alignItems: 'center', - display: 'flex', - width: '100%', - }, - video: { - maxHeight: '100%', - width: '100%', - }, -}); - const enhance = compose( withTranslation(), - withStyles(styles), connect(mapStateToProps, null), withPlugins('VideoViewer'), ); diff --git a/src/containers/WindowSideBarAnnotationsPanel.js b/src/containers/WindowSideBarAnnotationsPanel.js index 8a1cb84f74..8370a0c375 100644 --- a/src/containers/WindowSideBarAnnotationsPanel.js +++ b/src/containers/WindowSideBarAnnotationsPanel.js @@ -1,7 +1,6 @@ import { compose } from 'redux'; import { connect } from 'react-redux'; import { withTranslation } from 'react-i18next'; -import withStyles from '@mui/styles/withStyles'; import { withPlugins } from '../extend/withPlugins'; import { getVisibleCanvasIds, @@ -22,20 +21,8 @@ const mapStateToProps = (state, { windowId }) => ({ canvasIds: getVisibleCanvasIds(state, { windowId }), }); -/** */ -const styles = theme => ({ - section: { - borderBottom: `.5px solid ${theme.palette.section_divider}`, - paddingBottom: theme.spacing(1), - paddingLeft: theme.spacing(2), - paddingRight: theme.spacing(1), - paddingTop: theme.spacing(2), - }, -}); - const enhance = compose( withTranslation(), - withStyles(styles), connect(mapStateToProps, null), withPlugins('WindowSideBarAnnotationsPanel'), // further HOC diff --git a/src/containers/WindowSideBarInfoPanel.js b/src/containers/WindowSideBarInfoPanel.js index caadfa004e..19de86776b 100644 --- a/src/containers/WindowSideBarInfoPanel.js +++ b/src/containers/WindowSideBarInfoPanel.js @@ -1,7 +1,6 @@ import { compose } from 'redux'; import { connect } from 'react-redux'; import { withTranslation } from 'react-i18next'; -import withStyles from '@mui/styles/withStyles'; import { withPlugins } from '../extend/withPlugins'; import * as actions from '../state/actions'; import { @@ -33,24 +32,8 @@ const mapDispatchToProps = (dispatch, { windowId, id }) => ({ setLocale: locale => dispatch(actions.updateCompanionWindow(windowId, id, { locale })), }); -/** - * - * @param theme - * @returns {label: {paddingLeft: number}}} - */ -const styles = theme => ({ - section: { - borderBottom: `.5px solid ${theme.palette.section_divider}`, - paddingBottom: theme.spacing(1), - paddingLeft: theme.spacing(2), - paddingRight: theme.spacing(1), - paddingTop: theme.spacing(2), - }, -}); - const enhance = compose( withTranslation(), - withStyles(styles), connect(mapStateToProps, mapDispatchToProps), withPlugins('WindowSideBarInfoPanel'), ); diff --git a/src/containers/WindowTopBarTitle.js b/src/containers/WindowTopBarTitle.js index 9e10dbdbde..fbdf31288b 100644 --- a/src/containers/WindowTopBarTitle.js +++ b/src/containers/WindowTopBarTitle.js @@ -1,7 +1,6 @@ import { compose } from 'redux'; import { connect } from 'react-redux'; import { withTranslation } from 'react-i18next'; -import withStyles from '@mui/styles/withStyles'; import { withPlugins } from '../extend/withPlugins'; import { getManifestStatus, getManifestTitle, getWindowConfig } from '../state/selectors'; import { WindowTopBarTitle } from '../components/WindowTopBarTitle'; @@ -14,20 +13,8 @@ const mapStateToProps = (state, { windowId }) => ({ manifestTitle: getManifestTitle(state, { windowId }), }); -/** - * @param theme - */ -const styles = theme => ({ - title: { - ...theme.typography.h6, - flexGrow: 1, - paddingLeft: theme.spacing(0.5), - }, -}); - const enhance = compose( withTranslation(), - withStyles(styles), connect(mapStateToProps, null), withPlugins('WindowTopBarTitle'), ); diff --git a/src/containers/WorkspaceExport.js b/src/containers/WorkspaceExport.js index d0f6508bc2..069a525428 100644 --- a/src/containers/WorkspaceExport.js +++ b/src/containers/WorkspaceExport.js @@ -1,6 +1,5 @@ import { compose } from 'redux'; import { connect } from 'react-redux'; -import withStyles from '@mui/styles/withStyles'; import { withTranslation } from 'react-i18next'; import { withPlugins } from '../extend/withPlugins'; import { WorkspaceExport } from '../components/WorkspaceExport'; @@ -17,18 +16,8 @@ const mapStateToProps = state => ({ exportableState: getExportableState(state), }); -/** - * Styles for the withStyles HOC - */ -const styles = theme => ({ - accordionTitle: { - padding: 0, - }, -}); - const enhance = compose( withTranslation(), - withStyles(styles), connect(mapStateToProps, {}), withPlugins('WorkspaceExport'), ); diff --git a/src/containers/ZoomControls.js b/src/containers/ZoomControls.js index 273a0dd5f0..ffe0dc081d 100644 --- a/src/containers/ZoomControls.js +++ b/src/containers/ZoomControls.js @@ -1,7 +1,6 @@ import { compose } from 'redux'; import { connect } from 'react-redux'; import { withTranslation } from 'react-i18next'; -import withStyles from '@mui/styles/withStyles'; import { withPlugins } from '../extend/withPlugins'; import * as actions from '../state/actions'; import { getShowZoomControlsConfig, getViewer } from '../state/selectors'; @@ -26,33 +25,8 @@ const mapStateToProps = (state, { windowId }) => ( */ const mapDispatchToProps = { updateViewport: actions.updateViewport }; -/** - * - * @param theme - * @returns {{zoom_controls: {position: string, right: number}, - * ListItem: {paddingBottom: number, paddingTop: number}}} - */ -const styles = theme => ({ - divider: { - borderRight: '1px solid #808080', - display: 'inline-block', - height: '24px', - margin: '12px 6px', - }, - ListItem: { - paddingBottom: 0, - paddingTop: 0, - }, - zoom_controls: { - display: 'flex', - flexDirection: 'row', - justifyContent: 'center', - }, -}); - const enhance = compose( withTranslation(), - withStyles(styles), connect(mapStateToProps, mapDispatchToProps), withPlugins('ZoomControls'), ); From a516b79ee864742879b003f19d81f9c4d6a4688e Mon Sep 17 00:00:00 2001 From: Wilhelm Herbrich Date: Wed, 13 Sep 2023 17:34:13 +0200 Subject: [PATCH 016/164] Migrate WorkspaceOptionsButton to MUI v5 with styled API --- src/components/WorkspaceOptionsButton.js | 23 +++++++++++++++-------- src/containers/WorkspaceOptionsButton.js | 15 --------------- 2 files changed, 15 insertions(+), 23 deletions(-) diff --git a/src/components/WorkspaceOptionsButton.js b/src/components/WorkspaceOptionsButton.js index e3783c8693..63fbf1967e 100644 --- a/src/components/WorkspaceOptionsButton.js +++ b/src/components/WorkspaceOptionsButton.js @@ -1,10 +1,20 @@ import { Component } from 'react'; import PropTypes from 'prop-types'; -import classNames from 'classnames'; +import { styled } from '@mui/material/styles'; import MoreHorizontalIcon from '@mui/icons-material/MoreHorizSharp'; import MiradorMenuButton from '../containers/MiradorMenuButton'; import WorkspaceOptionsMenu from '../containers/WorkspaceOptionsMenu'; +const StyledMiradorMenuButton = styled(MiradorMenuButton)(({ open, theme }) => { + const css = { + margin: theme.spacing(1), + }; + if (open) { + css.backgroundColor = theme.palette.action.selected; + } + return css; +}); + /** * WorkspaceOptionsButton ~ */ @@ -46,20 +56,18 @@ export class WorkspaceOptionsButton extends Component { * Returns the rendered component */ render() { - const { classes, t } = this.props; + const { t } = this.props; const { anchorEl, open } = this.state; return ( <> - - + ({ - ctrlBtn: { - margin: theme.spacing(1), - }, - ctrlBtnSelected: { - backgroundColor: theme.palette.action.selected, - }, -}); - const enhance = compose( - withStyles(styles), withTranslation(), withPlugins('WorkspaceOptionsButton'), ); From 53b9b16dcea8bab56ad115229ead36e4ebe9be51 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Gerd=20M=C3=BCller?= Date: Thu, 14 Sep 2023 09:36:07 +0200 Subject: [PATCH 017/164] Migrate MenuButtons to MUI v5 with sx/styled API --- src/components/WindowListButton.js | 39 +++++++++++++----------- src/components/WindowTopBarPluginMenu.js | 20 +++++++----- src/components/WindowTopMenuButton.js | 20 +++++++----- src/components/WorkspaceMenuButton.js | 18 +++++++---- src/containers/WindowListButton.js | 19 ------------ src/containers/WindowTopBarPluginMenu.js | 13 -------- src/containers/WindowTopMenuButton.js | 13 -------- src/containers/WorkspaceMenuButton.js | 16 ---------- 8 files changed, 58 insertions(+), 100 deletions(-) diff --git a/src/components/WindowListButton.js b/src/components/WindowListButton.js index a1915b592c..b30a584e3f 100644 --- a/src/components/WindowListButton.js +++ b/src/components/WindowListButton.js @@ -1,10 +1,15 @@ import { Component } from 'react'; import BookmarksIcon from '@mui/icons-material/BookmarksSharp'; import PropTypes from 'prop-types'; -import classNames from 'classnames'; +import { styled } from '@mui/material/styles'; import WindowList from '../containers/WindowList'; import MiradorMenuButton from '../containers/MiradorMenuButton'; +const StyledButton = styled(MiradorMenuButton)(({ theme }) => ({ + margin: theme.spacing(1), + paddingLeft: 12, +})); + /** * WindowListButton ~ */ @@ -33,34 +38,36 @@ export class WindowListButton extends Component { */ render() { const { - classes, disabled, t, windowCount, + disabled, t, windowCount, } = this.props; const { windowListAnchor } = this.state; return ( <> - this.handleOpen(e)} + badgeContent={{badgeContent: windowCount }} + onClick={(e) => this.handleOpen(e)} > - + {Boolean(windowListAnchor) && ( - + )} ); @@ -68,12 +75,10 @@ export class WindowListButton extends Component { } WindowListButton.propTypes = { - classes: PropTypes.objectOf(PropTypes.string), disabled: PropTypes.bool, t: PropTypes.func.isRequired, windowCount: PropTypes.number.isRequired, }; WindowListButton.defaultProps = { - classes: {}, disabled: false, }; diff --git a/src/components/WindowTopBarPluginMenu.js b/src/components/WindowTopBarPluginMenu.js index 70a82fc513..7a98d443e8 100644 --- a/src/components/WindowTopBarPluginMenu.js +++ b/src/components/WindowTopBarPluginMenu.js @@ -1,10 +1,14 @@ import { Component } from 'react'; import PropTypes from 'prop-types'; +import { styled } from '@mui/material/styles'; import MoreVertIcon from '@mui/icons-material/MoreVertSharp'; import Menu from '@mui/material/Menu'; import MiradorMenuButton from '../containers/MiradorMenuButton'; import { PluginHook } from './PluginHook'; +const StyledButton = styled(MiradorMenuButton)(({ theme }) => ({ + margin: theme.spacing(1), +})); /** * */ @@ -47,7 +51,7 @@ export class WindowTopBarPluginMenu extends Component { */ render() { const { - classes, container, PluginComponents, t, windowId, menuIcon, + container, PluginComponents, t, windowId, menuIcon, } = this.props; const { anchorEl, open } = this.state; const windowPluginMenuId = `window-plugin-menu_${windowId}`; @@ -55,15 +59,19 @@ export class WindowTopBarPluginMenu extends Component { return ( <> - {menuIcon} - + , open: false, diff --git a/src/components/WindowTopMenuButton.js b/src/components/WindowTopMenuButton.js index ca9ab8db01..b6dda43d49 100644 --- a/src/components/WindowTopMenuButton.js +++ b/src/components/WindowTopMenuButton.js @@ -1,10 +1,13 @@ import { Component } from 'react'; import PropTypes from 'prop-types'; -import classNames from 'classnames'; +import { styled } from '@mui/material/styles'; import WindowTopMenu from '../containers/WindowTopMenu'; import MiradorMenuButton from '../containers/MiradorMenuButton'; import WindowOptionsIcon from './icons/WindowOptionsIcon'; +const StyledButton = styled(MiradorMenuButton)(({ theme }) => ({ + margin: theme.spacing(1), +})); /** */ export class WindowTopMenuButton extends Component { @@ -47,21 +50,25 @@ export class WindowTopMenuButton extends Component { */ render() { const { - classes, className, t, windowId, + t, windowId, } = this.props; const { open, anchorEl } = this.state; const menuId = `window-menu_${windowId}`; return ( <> - - + key, }; diff --git a/src/components/WorkspaceMenuButton.js b/src/components/WorkspaceMenuButton.js index 8a993710a4..343cff7768 100644 --- a/src/components/WorkspaceMenuButton.js +++ b/src/components/WorkspaceMenuButton.js @@ -1,10 +1,13 @@ import { Component } from 'react'; import SettingsIcon from '@mui/icons-material/SettingsSharp'; import PropTypes from 'prop-types'; -import classNames from 'classnames'; +import { styled } from '@mui/material/styles'; import WorkspaceMenu from '../containers/WorkspaceMenu'; import MiradorMenuButton from '../containers/MiradorMenuButton'; +const StyledButton = styled(MiradorMenuButton)(({ theme }) => ({ + margin: theme.spacing(1), +})); /** */ export class WorkspaceMenuButton extends Component { @@ -46,21 +49,25 @@ export class WorkspaceMenuButton extends Component { * @return */ render() { - const { classes, t } = this.props; + const { t } = this.props; const { anchorEl, open } = this.state; return ( <> - - + ({ windowCount: getWindowIds(state).length, }); -/** - * - * @param theme - * @returns {{background: {background: string}}} - */ -const styles = theme => ({ - badge: { - paddingLeft: 12, - }, - ctrlBtn: { - margin: theme.spacing(1), - }, - ctrlBtnSelected: { - backgroundColor: theme.palette.action.selected, - }, -}); - const enhance = compose( withTranslation(), - withStyles(styles), connect(mapStateToProps, null), withPlugins('WindowListButton'), ); diff --git a/src/containers/WindowTopBarPluginMenu.js b/src/containers/WindowTopBarPluginMenu.js index 91e139b745..4900528e9f 100644 --- a/src/containers/WindowTopBarPluginMenu.js +++ b/src/containers/WindowTopBarPluginMenu.js @@ -1,25 +1,12 @@ import { compose } from 'redux'; import { withTranslation } from 'react-i18next'; -import withStyles from '@mui/styles/withStyles'; import { withPlugins } from '../extend/withPlugins'; import { WindowTopBarPluginMenu } from '../components/WindowTopBarPluginMenu'; import { withWorkspaceContext } from '../contexts/WorkspaceContext'; -/** - * - * @param theme - * @returns {{ctrlBtn: {margin: (number|string)}}} - */ -const styles = theme => ({ - ctrlBtnSelected: { - backgroundColor: theme.palette.action.selected, - }, -}); - const enhance = compose( withTranslation(), withWorkspaceContext, - withStyles(styles), withPlugins('WindowTopBarPluginMenu'), ); diff --git a/src/containers/WindowTopMenuButton.js b/src/containers/WindowTopMenuButton.js index 105a582944..8a114a8dea 100644 --- a/src/containers/WindowTopMenuButton.js +++ b/src/containers/WindowTopMenuButton.js @@ -1,23 +1,10 @@ import { compose } from 'redux'; import { withTranslation } from 'react-i18next'; -import withStyles from '@mui/styles/withStyles'; import { withPlugins } from '../extend/withPlugins'; import { WindowTopMenuButton } from '../components/WindowTopMenuButton'; -/** - * - * @param theme - * @returns {{ctrlBtn: {margin: (number|string)}}} - */ -const styles = theme => ({ - ctrlBtnSelected: { - backgroundColor: theme.palette.action.selected, - }, -}); - const enhance = compose( withTranslation(), - withStyles(styles), withPlugins('WindowTopMenuButton'), ); diff --git a/src/containers/WorkspaceMenuButton.js b/src/containers/WorkspaceMenuButton.js index bc8545d2e2..b5f2518eb2 100644 --- a/src/containers/WorkspaceMenuButton.js +++ b/src/containers/WorkspaceMenuButton.js @@ -1,26 +1,10 @@ import { compose } from 'redux'; import { withTranslation } from 'react-i18next'; -import withStyles from '@mui/styles/withStyles'; import { withPlugins } from '../extend/withPlugins'; import { WorkspaceMenuButton } from '../components/WorkspaceMenuButton'; -/** - * - * @param theme - * @returns {{ctrlBtn: {margin: (number|string)}}} - */ -const styles = theme => ({ - ctrlBtn: { - margin: theme.spacing(1), - }, - ctrlBtnSelected: { - backgroundColor: theme.palette.action.selected, - }, -}); - const enhance = compose( withTranslation(), - withStyles(styles), withPlugins('WorkspaceMenuButton'), // further HOC ); From 4726ec9b308dc9890002cc31d37b72f12137ac41 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Gerd=20M=C3=BCller?= Date: Thu, 14 Sep 2023 10:42:07 +0200 Subject: [PATCH 018/164] Migrate components to MUI v5 with sx/styled API --- src/components/AttributionPanel.js | 36 +++++--- src/components/CanvasAnnotations.js | 95 ++++++++++----------- src/components/CompanionArea.js | 105 +++++++++++++++--------- src/components/ErrorContent.js | 47 ++++++----- src/components/GalleryView.js | 15 +++- src/components/LocalePicker.js | 13 +-- src/components/ManifestForm.js | 23 ++++-- src/components/ManifestListItemError.js | 12 ++- src/components/ManifestRelatedLinks.js | 12 ++- src/containers/AttributionPanel.js | 25 +----- src/containers/CanvasAnnotations.js | 28 ------- src/containers/CompanionArea.js | 36 -------- src/containers/CustomPanel.js | 10 --- src/containers/ErrorContent.js | 22 ----- src/containers/GalleryView.js | 18 ---- src/containers/LayersPanel.js | 10 --- src/containers/LocalePicker.js | 18 ---- src/containers/ManifestForm.js | 17 ---- src/containers/ManifestListItemError.js | 19 ----- src/containers/ManifestRelatedLinks.js | 11 --- 20 files changed, 224 insertions(+), 348 deletions(-) diff --git a/src/components/AttributionPanel.js b/src/components/AttributionPanel.js index e7632acc62..e74a7940e2 100644 --- a/src/components/AttributionPanel.js +++ b/src/components/AttributionPanel.js @@ -1,5 +1,6 @@ import { Component } from 'react'; import PropTypes from 'prop-types'; +import { styled } from '@mui/material/styles'; import Typography from '@mui/material/Typography'; import Link from '@mui/material/Link'; import Skeleton from '@mui/material/Skeleton'; @@ -9,6 +10,25 @@ import { LabelValueMetadata } from './LabelValueMetadata'; import ns from '../config/css-ns'; import { PluginHook } from './PluginHook'; +/** + * + * @param theme + * @returns {label: {paddingLeft: number}}} + */ +const Logo = styled(Img)(() => ({ + maxWidth: '100%', +})); +const Placeholder = styled(Skeleton)(({ theme }) => ({ + backgroundColor: theme.palette.grey[300], +})); +const Section = styled('div')(({ theme }) => ({ + borderBottom: `.5px solid ${theme.palette.section_divider}`, + paddingBottom: theme.spacing(1), + paddingLeft: theme.spacing(2), + paddingRight: theme.spacing(1), + paddingTop: theme.spacing(2), +})); + /** * WindowSideBarInfoPanel */ @@ -24,7 +44,6 @@ export class AttributionPanel extends Component { rights, windowId, id, - classes, t, } = this.props; @@ -35,7 +54,7 @@ export class AttributionPanel extends Component { windowId={windowId} id={id} > -
+
{ requiredStatement && ( )} @@ -53,20 +72,19 @@ export class AttributionPanel extends Component { ) } -
+ { manifestLogo && ( -
- + + } /> -
+ )} @@ -76,7 +94,6 @@ export class AttributionPanel extends Component { } AttributionPanel.propTypes = { - classes: PropTypes.objectOf(PropTypes.string), id: PropTypes.string.isRequired, manifestLogo: PropTypes.string, requiredStatement: PropTypes.arrayOf(PropTypes.shape({ @@ -89,7 +106,6 @@ AttributionPanel.propTypes = { }; AttributionPanel.defaultProps = { - classes: {}, manifestLogo: null, requiredStatement: null, rights: null, diff --git a/src/components/CanvasAnnotations.js b/src/components/CanvasAnnotations.js index 1218f88f7e..6934815c2e 100644 --- a/src/components/CanvasAnnotations.js +++ b/src/components/CanvasAnnotations.js @@ -9,6 +9,18 @@ import Typography from '@mui/material/Typography'; import SanitizedHtml from '../containers/SanitizedHtml'; import { ScrollTo } from './ScrollTo'; +const annotationListItem = { + '&$hovered': { + backgroundColor: (theme) => theme.palette.action.hover, + }, + '&:hover,&:focus': { + backgroundColor: (theme) => theme.palette.action.hover, + }, + borderBottom: (theme) => `0.5px solid ${theme.palette.divider}`, + cursor: 'pointer', + whiteSpace: 'normal', +}; + /** * CanvasAnnotations ~ */ @@ -58,7 +70,7 @@ export class CanvasAnnotations extends Component { */ render() { const { - annotations, classes, index, label, selectedAnnotationId, t, totalSize, + annotations, index, label, selectedAnnotationId, t, totalSize, listContainerComponent, htmlSanitizationRuleSet, hoveredAnnotationIds, containerRef, } = this.props; @@ -66,53 +78,46 @@ export class CanvasAnnotations extends Component { return ( <> - + {t('annotationCanvasLabel', { context: `${index + 1}/${totalSize}`, label })} - { - annotations.map(annotation => ( - this.handleClick(e, annotation)} - onFocus={() => this.handleAnnotationHover(annotation)} - onBlur={this.handleAnnotationBlur} - onMouseEnter={() => this.handleAnnotationHover(annotation)} - onMouseLeave={this.handleAnnotationBlur} + {annotations.map((annotation) => ( + this.handleClick(e, annotation)} + onFocus={() => this.handleAnnotationHover(annotation)} + onBlur={this.handleAnnotationBlur} + onMouseEnter={() => this.handleAnnotationHover(annotation)} + onMouseLeave={this.handleAnnotationBlur} + > + - - - -
- { - annotation.tags.map(tag => ( - - )) - } -
- - - - )) - } + + +
+ {annotation.tags.map((tag) => ( + + ))} +
+ + + + ))} ); @@ -126,7 +131,6 @@ CanvasAnnotations.propTypes = { id: PropTypes.string.isRequired, }), ), - classes: PropTypes.objectOf(PropTypes.string), containerRef: PropTypes.oneOfType([ PropTypes.func, PropTypes.shape({ current: PropTypes.instanceOf(Element) }), @@ -146,7 +150,6 @@ CanvasAnnotations.propTypes = { }; CanvasAnnotations.defaultProps = { annotations: [], - classes: {}, containerRef: undefined, hoveredAnnotationIds: [], htmlSanitizationRuleSet: 'iiif', diff --git a/src/components/CompanionArea.js b/src/components/CompanionArea.js index ea5c2c48af..5386dbd1b5 100644 --- a/src/components/CompanionArea.js +++ b/src/components/CompanionArea.js @@ -1,5 +1,6 @@ import { Component } from 'react'; import PropTypes from 'prop-types'; +import { styled } from '@mui/material/styles'; import Slide from '@mui/material/Slide'; import ArrowLeftIcon from '@mui/icons-material/ArrowLeftSharp'; import ArrowRightIcon from '@mui/icons-material/ArrowRightSharp'; @@ -7,17 +8,37 @@ import CompanionWindowFactory from '../containers/CompanionWindowFactory'; import MiradorMenuButton from '../containers/MiradorMenuButton'; import ns from '../config/css-ns'; -/** */ -export class CompanionArea extends Component { - /** */ - areaLayoutClass() { - const { - classes, position, - } = this.props; +const StyledRoot = styled('div')(({ theme }) => ({ + display: 'flex', + minHeight: 0, + position: 'relative', + zIndex: theme.zIndex.appBar - 2, +})); - return (position === 'bottom' || position === 'far-bottom') ? classes.horizontal : null; - } +const StyledWrapper = styled('div')(({ }) => ({ +})); + +const StyledToggle = styled('div')(({ theme }) => ({ + backgroundColor: theme.palette.background.paper, + border: `1px solid ${theme.palette.mode === 'dark' ? theme.palette.divider : theme.palette.shades?.dark}`, + borderRadius: 0, + height: '48px', + left: '100%', + marginTop: '1rem', + padding: 2, + position: 'absolute', + width: '23px', + zIndex: theme.zIndex.drawer, +})); + +const StyledToggleButton = styled(MiradorMenuButton)({ + marginBottom: 12, + marginTop: 12, + padding: 0, +}); +/** */ +export class CompanionArea extends Component { /** */ collapseIcon() { const { companionAreaOpen, direction } = this.props; @@ -51,45 +72,54 @@ export class CompanionArea extends Component { /** */ render() { const { - classes, companionWindowIds, companionAreaOpen, setCompanionAreaOpen, + companionWindowIds, companionAreaOpen, setCompanionAreaOpen, position, sideBarOpen, t, windowId, } = this.props; return ( -
+ -
0 && classes[position], this.areaLayoutClass()].join(' ')} style={{ display: companionAreaOpen ? 'flex' : 'none' }}> - { - companionWindowIds.map(id => ( - - )) - } -
+ 0 && classes[position]}`} + style={{ display: companionAreaOpen ? 'flex' : 'none' }} + sx={{ + ...((position === 'bottom' || position === 'far-bottom') && { + flexDirection: 'column', + width: '100%', + }), + }} + > + {companionWindowIds.map((id) => ( + + ))} + - { - setCompanionAreaOpen && position === 'left' && sideBarOpen && companionWindowIds.length > 0 - && ( -
- { setCompanionAreaOpen(windowId, !companionAreaOpen); }} - TooltipProps={{ placement: 'right' }} - > - {this.collapseIcon()} - -
- ) - } -
+ {setCompanionAreaOpen && position === 'left' && sideBarOpen && companionWindowIds.length > 0 && ( + + { setCompanionAreaOpen(windowId, !companionAreaOpen); }} + TooltipProps={{ placement: 'right' }} + > + {this.collapseIcon()} + + + )} + ); } } CompanionArea.propTypes = { - classes: PropTypes.objectOf(PropTypes.string), companionAreaOpen: PropTypes.bool.isRequired, companionWindowIds: PropTypes.arrayOf(PropTypes.string).isRequired, direction: PropTypes.string.isRequired, @@ -101,7 +131,6 @@ CompanionArea.propTypes = { }; CompanionArea.defaultProps = { - classes: {}, setCompanionAreaOpen: () => {}, sideBarOpen: false, }; diff --git a/src/components/ErrorContent.js b/src/components/ErrorContent.js index 03dc97643b..e31c2bcdcb 100644 --- a/src/components/ErrorContent.js +++ b/src/components/ErrorContent.js @@ -1,5 +1,6 @@ import { Component } from 'react'; import PropTypes from 'prop-types'; +import { styled } from '@mui/material/styles'; import Accordion from '@mui/material/Accordion'; import AccordionSummary from '@mui/material/AccordionSummary'; import AccordionDetails from '@mui/material/AccordionDetails'; @@ -8,12 +9,25 @@ import Alert from '@mui/material/Alert'; import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; import { PluginHook } from './PluginHook'; +const StyledAccordion = styled(Accordion)(({ theme }) => ({ + backgroundColor: theme.palette.error.main, + color: '#fff', + fontWeight: theme.typography.fontWeightMedium, +})); + +const StyledAccordionDetails = styled(AccordionDetails)({ + '& pre': { + height: '100px', + overflowY: 'scroll', + }, + flexDirection: 'column', +})); + /** */ export class ErrorContent extends Component { /** */ render() { const { - classes, error, metadata, showJsError, @@ -28,29 +42,24 @@ export class ErrorContent extends Component { {t('errorDialogTitle')} - {showJsError && ( - - } - > - {t('jsError', { message: error.message, name: error.name })} - - - 
{ t('jsStack', { stack: error.stack }) }
- { metadata && ( - 
{JSON.stringify(metadata, null, 2)}
- )} - - - )} - - + {showJsError && ( + + }> + {t('jsError', { message: error.message, name: error.name })} + + + 
{t('jsStack', { stack: error.stack })}
+ {metadata && 
{JSON.stringify(metadata, null, 2)}
} + + + )} + + ); } } ErrorContent.propTypes = { - classes: PropTypes.objectOf(PropTypes.string).isRequired, error: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types metadata: PropTypes.object, // eslint-disable-line react/forbid-prop-types showJsError: PropTypes.bool, diff --git a/src/components/GalleryView.js b/src/components/GalleryView.js index b273f16b50..bf0370f26f 100644 --- a/src/components/GalleryView.js +++ b/src/components/GalleryView.js @@ -12,7 +12,7 @@ export class GalleryView extends Component { */ render() { const { - canvases, classes, viewingDirection, windowId, + canvases, viewingDirection, windowId, } = this.props; const htmlDir = viewingDirection === 'right-to-left' ? 'rtl' : 'ltr'; return ( @@ -22,7 +22,16 @@ export class GalleryView extends Component { dir={htmlDir} square elevation={0} - className={classes.galleryContainer} + sx={{ + alignItems: 'flex-start', + display: 'flex', + flexDirection: 'row', + flexWrap: 'wrap', + overflowX: 'hidden', + overflowY: 'scroll', + padding: '50px 0 50px 20px', + width: '100%', + }} id={`${windowId}-gallery`} > { @@ -41,12 +50,10 @@ export class GalleryView extends Component { GalleryView.propTypes = { canvases: PropTypes.array.isRequired, // eslint-disable-line react/forbid-prop-types - classes: PropTypes.objectOf(PropTypes.string), viewingDirection: PropTypes.string, windowId: PropTypes.string.isRequired, }; GalleryView.defaultProps = { - classes: {}, viewingDirection: '', }; diff --git a/src/components/LocalePicker.js b/src/components/LocalePicker.js index be28917226..6b590b0b18 100644 --- a/src/components/LocalePicker.js +++ b/src/components/LocalePicker.js @@ -16,7 +16,6 @@ export class LocalePicker extends Component { render() { const { availableLocales, - classes, locale, setLocale, } = this.props; @@ -36,8 +35,14 @@ export class LocalePicker extends Component { value={locale} onChange={(e) => { setLocale(e.target.value); }} name="locale" - classes={{ select: classes.select }} - className={classes.selectEmpty} + sx={{ + '& .MuiSelect-select': { + '&:focus': { + backgroundColor: 'background.paper', + }, + }, + backgroundColor: 'background.paper', + }} > { availableLocales.map(l => ( @@ -52,14 +57,12 @@ export class LocalePicker extends Component { LocalePicker.propTypes = { availableLocales: PropTypes.arrayOf(PropTypes.string), - classes: PropTypes.objectOf(PropTypes.string), locale: PropTypes.string, setLocale: PropTypes.func, }; LocalePicker.defaultProps = { availableLocales: [], - classes: {}, locale: '', setLocale: undefined, }; diff --git a/src/components/ManifestForm.js b/src/components/ManifestForm.js index a37b71a3d8..d536d44c87 100644 --- a/src/components/ManifestForm.js +++ b/src/components/ManifestForm.js @@ -1,9 +1,23 @@ import { Component } from 'react'; import PropTypes from 'prop-types'; +import { styled } from '@mui/material/styles'; import Button from '@mui/material/Button'; import Grid from '@mui/material/Grid'; import TextField from '@mui/material/TextField'; +/** + */ +const inputStyle = (theme) => ({ + ...theme.typography.body1, +}); + +const StyledGrid = styled(Grid)(({ theme }) => ({ + textAlign: 'right', + [theme.breakpoints.up('sm')]: { + textAlign: 'inherit', + }, +})); + /** * Provides a form for user input of a manifest url * @prop {Function} fetchManifest @@ -68,7 +82,6 @@ export class ManifestForm extends Component { const { formValue } = this.state; const { addResourcesOpen, - classes, onCancel, t, } = this.props; @@ -92,11 +105,11 @@ export class ManifestForm extends Component { shrink: true, }} InputProps={{ - className: classes.input, + style: inputStyle, }} /> - + { onCancel && ( - + ); @@ -115,14 +128,12 @@ export class ManifestForm extends Component { ManifestForm.propTypes = { addResource: PropTypes.func.isRequired, addResourcesOpen: PropTypes.bool.isRequired, - classes: PropTypes.objectOf(PropTypes.string), onCancel: PropTypes.func, onSubmit: PropTypes.func, t: PropTypes.func, }; ManifestForm.defaultProps = { - classes: {}, onCancel: null, onSubmit: () => {}, t: key => key, diff --git a/src/components/ManifestListItemError.js b/src/components/ManifestListItemError.js index 828361c4c4..b8d5176aa5 100644 --- a/src/components/ManifestListItemError.js +++ b/src/components/ManifestListItemError.js @@ -15,7 +15,7 @@ export class ManifestListItemError extends Component { */ render() { const { - classes, manifestId, onDismissClick, onTryAgainClick, t, + manifestId, onDismissClick, onTryAgainClick, t, } = this.props; return ( @@ -24,12 +24,17 @@ export class ManifestListItemError extends Component { - + {t('manifestError')} - {manifestId} + {manifestId} @@ -52,7 +57,6 @@ export class ManifestListItemError extends Component { } ManifestListItemError.propTypes = { - classes: PropTypes.objectOf(PropTypes.string).isRequired, manifestId: PropTypes.string.isRequired, onDismissClick: PropTypes.func.isRequired, onTryAgainClick: PropTypes.func.isRequired, diff --git a/src/components/ManifestRelatedLinks.js b/src/components/ManifestRelatedLinks.js index 265a66875b..1481d7cfca 100644 --- a/src/components/ManifestRelatedLinks.js +++ b/src/components/ManifestRelatedLinks.js @@ -1,5 +1,6 @@ import { Component } from 'react'; import PropTypes from 'prop-types'; +import { styled } from '@mui/material/styles'; import Typography from '@mui/material/Typography'; import Link from '@mui/material/Link'; import classNames from 'classnames'; @@ -7,6 +8,12 @@ import CollapsibleSection from '../containers/CollapsibleSection'; import ns from '../config/css-ns'; import { PluginHook } from './PluginHook'; +const StyledDl = styled('dl')(({ theme }) => ({ + '& dd': { + marginBottom: '.5em', + marginLeft: '0', + }, +})); /** * ManifestRelatedLinks */ @@ -17,7 +24,6 @@ export class ManifestRelatedLinks extends Component { */ render() { const { - classes, homepage, manifestUrl, related, @@ -40,7 +46,7 @@ export class ManifestRelatedLinks extends Component { > {t('links')} -
+ { homepage && ( <> {t('iiif_homepage')} @@ -113,7 +119,7 @@ export class ManifestRelatedLinks extends Component { )} -
+ ); diff --git a/src/containers/AttributionPanel.js b/src/containers/AttributionPanel.js index a2315c2c6c..94ae930e0f 100644 --- a/src/containers/AttributionPanel.js +++ b/src/containers/AttributionPanel.js @@ -1,13 +1,12 @@ import { compose } from 'redux'; import { connect } from 'react-redux'; import { withTranslation } from 'react-i18next'; -import withStyles from '@mui/styles/withStyles'; -import { withPlugins } from '../extend/withPlugins'; import { getManifestLogo, getRequiredStatement, getRights, } from '../state/selectors'; +import { withPlugins } from '../extend/withPlugins'; import { AttributionPanel } from '../components/AttributionPanel'; /** @@ -21,29 +20,7 @@ const mapStateToProps = (state, { id, windowId }) => ({ rights: getRights(state, { windowId }), }); -/** - * - * @param theme - * @returns {label: {paddingLeft: number}}} - */ -const styles = theme => ({ - logo: { - maxWidth: '100%', - }, - placeholder: { - backgroundColor: theme.palette.grey[300], - }, - section: { - borderBottom: `.5px solid ${theme.palette.section_divider}`, - paddingBottom: theme.spacing(1), - paddingLeft: theme.spacing(2), - paddingRight: theme.spacing(1), - paddingTop: theme.spacing(2), - }, -}); - const enhance = compose( - withStyles(styles), withTranslation(), connect(mapStateToProps), withPlugins('AttributionPanel'), diff --git a/src/containers/CanvasAnnotations.js b/src/containers/CanvasAnnotations.js index 3e73035c78..5d420e745d 100644 --- a/src/containers/CanvasAnnotations.js +++ b/src/containers/CanvasAnnotations.js @@ -1,7 +1,6 @@ import { compose } from 'redux'; import { connect } from 'react-redux'; import { withTranslation } from 'react-i18next'; -import withStyles from '@mui/styles/withStyles'; import { withPlugins } from '../extend/withPlugins'; import * as actions from '../state/actions'; import { @@ -49,35 +48,8 @@ const mapDispatchToProps = { selectAnnotation: actions.selectAnnotation, }; -/** For withStlyes */ -const styles = theme => ({ - annotationListItem: { - '&$hovered': { - backgroundColor: theme.palette.action.hover, - }, - '&:hover,&:focus': { - backgroundColor: theme.palette.action.hover, - }, - borderBottom: `0.5px solid ${theme.palette.divider}`, - cursor: 'pointer', - whiteSpace: 'normal', - }, - chip: { - backgroundColor: theme.palette.background.paper, - marginRight: theme.spacing(0.5), - marginTop: theme.spacing(1), - }, - hovered: {}, - sectionHeading: { - paddingLeft: theme.spacing(2), - paddingRight: theme.spacing(1), - paddingTop: theme.spacing(2), - }, -}); - const enhance = compose( withTranslation(), - withStyles(styles), connect(mapStateToProps, mapDispatchToProps), withPlugins('CanvasAnnotations'), ); diff --git a/src/containers/CompanionArea.js b/src/containers/CompanionArea.js index 18573e5150..f403a90849 100644 --- a/src/containers/CompanionArea.js +++ b/src/containers/CompanionArea.js @@ -1,6 +1,5 @@ import { compose } from 'redux'; import { connect } from 'react-redux'; -import withStyles from '@mui/styles/withStyles'; import { withTranslation } from 'react-i18next'; import { withPlugins } from '../extend/withPlugins'; import { @@ -21,43 +20,8 @@ const mapDispatchToProps = ({ setCompanionAreaOpen: actions.setCompanionAreaOpen, }); -/** */ -const styles = theme => ({ - horizontal: { - flexDirection: 'column', - width: '100%', - }, - left: { - minWidth: 235, - }, - root: { - display: 'flex', - minHeight: 0, - position: 'relative', - zIndex: theme.zIndex.appBar - 2, - }, - toggle: { - backgroundColor: theme.palette.background.paper, - border: `1px solid ${theme.palette.shades?.dark}`, - borderRadius: 0, - height: '48px', - left: '100%', - marginTop: '1rem', - padding: 2, - position: 'absolute', - width: '23px', - zIndex: theme.zIndex.drawer, - }, - toggleButton: { - marginBottom: 12, - marginTop: 12, - padding: 0, - }, -}); - const enhance = compose( withTranslation(), - withStyles(styles), connect(mapStateToProps, mapDispatchToProps), withPlugins('CompanionArea'), ); diff --git a/src/containers/CustomPanel.js b/src/containers/CustomPanel.js index fbd0ece03b..3f83547018 100644 --- a/src/containers/CustomPanel.js +++ b/src/containers/CustomPanel.js @@ -1,7 +1,6 @@ import { compose } from 'redux'; import { connect } from 'react-redux'; import { withTranslation } from 'react-i18next'; -import withStyles from '@mui/styles/withStyles'; import { withPlugins } from '../extend/withPlugins'; import { CustomPanel } from '../components/CustomPanel'; @@ -11,17 +10,8 @@ import { CustomPanel } from '../components/CustomPanel'; const mapStateToProps = (state, { id, windowId }) => ({ }); -/** - * - * @param theme - * @returns {label: {paddingLeft: number}}} - */ -const styles = theme => ({ -}); - const enhance = compose( withTranslation(), - withStyles(styles), connect(mapStateToProps), withPlugins('CustomPanel'), ); diff --git a/src/containers/ErrorContent.js b/src/containers/ErrorContent.js index 62d02aaf9f..8544356209 100644 --- a/src/containers/ErrorContent.js +++ b/src/containers/ErrorContent.js @@ -1,7 +1,6 @@ import { compose } from 'redux'; import { connect } from 'react-redux'; import { withTranslation } from 'react-i18next'; -import withStyles from '@mui/styles/withStyles'; import { withPlugins } from '../extend/withPlugins'; import { ErrorContent } from '../components/ErrorContent'; import { @@ -23,29 +22,8 @@ const mapStateToProps = (state, { companionWindowId, windowId }) => ({ showJsError: getConfig(state).window.showJsError, }); -/** - * @param theme - * @returns {{typographyBody: {flexGrow: number, fontSize: number|string}, - * windowTopBarStyle: {minHeight: number, paddingLeft: number, backgroundColor: string}}} - */ -const styles = theme => ({ - alert: { - backgroundColor: theme.palette.error.main, - color: '#fff', - fontWeight: theme.typography.fontWeightMedium, - }, - details: { - '& pre': { - height: '100px', - overflowY: 'scroll', - }, - flexDirection: 'column', - }, -}); - const enhance = compose( withTranslation(), - withStyles(styles), connect(mapStateToProps), withPlugins('ErrorContent'), ); diff --git a/src/containers/GalleryView.js b/src/containers/GalleryView.js index cbc04e253d..9c54be5a4b 100644 --- a/src/containers/GalleryView.js +++ b/src/containers/GalleryView.js @@ -1,6 +1,5 @@ import { compose } from 'redux'; import { connect } from 'react-redux'; -import withStyles from '@mui/styles/withStyles'; import { withPlugins } from '../extend/withPlugins'; import { GalleryView } from '../components/GalleryView'; import { getCanvases, getSequenceViewingDirection } from '../state/selectors'; @@ -17,24 +16,7 @@ const mapStateToProps = (state, { windowId }) => ( } ); -/** - * Styles to be passed to the withStyles HOC - */ -const styles = theme => ({ - galleryContainer: { - alignItems: 'flex-start', - display: 'flex', - flexDirection: 'row', - flexWrap: 'wrap', - overflowX: 'hidden', - overflowY: 'scroll', - padding: '50px 0 50px 20px', - width: '100%', - }, -}); - const enhance = compose( - withStyles(styles), connect(mapStateToProps), withPlugins('GalleryView'), // further HOC go here diff --git a/src/containers/LayersPanel.js b/src/containers/LayersPanel.js index 850bb04804..2d7352f4eb 100644 --- a/src/containers/LayersPanel.js +++ b/src/containers/LayersPanel.js @@ -1,7 +1,6 @@ import { compose } from 'redux'; import { connect } from 'react-redux'; import { withTranslation } from 'react-i18next'; -import withStyles from '@mui/styles/withStyles'; import { withPlugins } from '../extend/withPlugins'; import { LayersPanel } from '../components/LayersPanel'; import { @@ -15,17 +14,8 @@ const mapStateToProps = (state, { id, windowId }) => ({ canvasIds: getVisibleCanvasIds(state, { windowId }), }); -/** - * - * @param theme - * @returns {label: {paddingLeft: number}}} - */ -const styles = theme => ({ -}); - const enhance = compose( withTranslation(), - withStyles(styles), connect(mapStateToProps), withPlugins('LayersPanel'), ); diff --git a/src/containers/LocalePicker.js b/src/containers/LocalePicker.js index 94c0903740..2edb53b784 100644 --- a/src/containers/LocalePicker.js +++ b/src/containers/LocalePicker.js @@ -1,27 +1,9 @@ import { compose } from 'redux'; import { withTranslation } from 'react-i18next'; -import withStyles from '@mui/styles/withStyles'; import { LocalePicker } from '../components/LocalePicker'; -/** - * - * @param theme - * @returns {label: {paddingLeft: number}}} - */ -const styles = theme => ({ - select: { - '&:focus': { - backgroundColor: theme.palette.background.paper, - }, - }, - selectEmpty: { - backgroundColor: theme.palette.background.paper, - }, -}); - const enhance = compose( withTranslation(), - withStyles(styles), ); export default enhance(LocalePicker); diff --git a/src/containers/ManifestForm.js b/src/containers/ManifestForm.js index f65e869d00..02a3262144 100644 --- a/src/containers/ManifestForm.js +++ b/src/containers/ManifestForm.js @@ -1,7 +1,6 @@ import { connect } from 'react-redux'; import { compose } from 'redux'; import { withTranslation } from 'react-i18next'; -import withStyles from '@mui/styles/withStyles'; import { withPlugins } from '../extend/withPlugins'; import * as actions from '../state/actions'; import { ManifestForm } from '../components/ManifestForm'; @@ -12,24 +11,8 @@ import { ManifestForm } from '../components/ManifestForm'; * @private */ const mapDispatchToProps = { addResource: actions.addResource }; -/** - * - * @param theme - */ -const styles = theme => ({ - buttons: { - textAlign: 'right', - [theme.breakpoints.up('sm')]: { - textAlign: 'inherit', - }, - }, - input: { - ...theme.typography.body1, - }, -}); const enhance = compose( - withStyles(styles), withTranslation(), connect(null, mapDispatchToProps), withPlugins('ManifestForm'), diff --git a/src/containers/ManifestListItemError.js b/src/containers/ManifestListItemError.js index 276d48ca88..40d9f5f14d 100644 --- a/src/containers/ManifestListItemError.js +++ b/src/containers/ManifestListItemError.js @@ -1,7 +1,6 @@ import { compose } from 'redux'; import { connect } from 'react-redux'; import { withTranslation } from 'react-i18next'; -import withStyles from '@mui/styles/withStyles'; import { withPlugins } from '../extend/withPlugins'; import { fetchManifest, removeResource } from '../state/actions'; import { ManifestListItemError } from '../components/ManifestListItemError'; @@ -12,26 +11,8 @@ const mapDispatchToProps = { onTryAgainClick: fetchManifest, }; -/** - * - * @param theme - * @returns {{manifestIdText: {wordBreak: string}, - * errorIcon: {color: string, width: string, height: string}}} - */ -const styles = theme => ({ - errorIcon: { - color: theme.palette.error.main, - height: '2rem', - width: '2rem', - }, - manifestIdText: { - wordBreak: 'break-all', - }, -}); - const enhance = compose( withTranslation(), - withStyles(styles), connect(null, mapDispatchToProps), withPlugins('ManifestListItemError'), ); diff --git a/src/containers/ManifestRelatedLinks.js b/src/containers/ManifestRelatedLinks.js index 5d7157b20a..a3f1edf9e0 100644 --- a/src/containers/ManifestRelatedLinks.js +++ b/src/containers/ManifestRelatedLinks.js @@ -1,7 +1,6 @@ import { compose } from 'redux'; import { connect } from 'react-redux'; import { withTranslation } from 'react-i18next'; -import withStyles from '@mui/styles/withStyles'; import { withPlugins } from '../extend/withPlugins'; import { getManifestHomepage, @@ -25,17 +24,7 @@ const mapStateToProps = (state, { id, windowId }) => ({ seeAlso: getManifestSeeAlso(state, { windowId }), }); -const styles = { - labelValueMetadata: { - '& dd': { - marginBottom: '.5em', - marginLeft: '0', - }, - }, -}; - const enhance = compose( - withStyles(styles), withTranslation(), connect(mapStateToProps), withPlugins('ManifestRelatedLinks'), From 261ebb4dd4e96501e0dd3b3a11d70a81cf305fdd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Gerd=20M=C3=BCller?= Date: Thu, 14 Sep 2023 11:46:09 +0200 Subject: [PATCH 019/164] Migrate components to MUI v5 with sx/styled API --- src/components/MinimalWindow.js | 48 ++++++++++++++----- src/components/OpenSeadragonViewer.js | 15 ++++-- src/components/SanitizedHtml.js | 18 +++---- .../ScrollIndicatedDialogContent.js | 33 +++++++++---- src/components/SearchPanel.js | 22 +++++---- src/components/SearchPanelControls.js | 31 ++++++++---- src/components/SearchPanelNavigation.js | 6 +-- src/components/SearchResults.js | 14 +++--- src/components/SidebarIndexList.js | 8 ++-- src/containers/MinimalWindow.js | 35 -------------- src/containers/MosaicRenderPreview.js | 12 ----- src/containers/OpenSeadragonViewer.js | 10 ---- src/containers/SanitizedHtml.js | 15 +----- .../ScrollIndicatedDialogContent.js | 28 +---------- src/containers/SearchPanel.js | 20 -------- src/containers/SearchPanelControls.js | 19 -------- src/containers/SearchPanelNavigation.js | 10 ---- src/containers/SearchResults.js | 19 -------- src/containers/SelectCollection.js | 5 -- src/containers/SidebarIndexList.js | 15 ------ 20 files changed, 135 insertions(+), 248 deletions(-) diff --git a/src/components/MinimalWindow.js b/src/components/MinimalWindow.js index 89d16f7766..7b16faff00 100644 --- a/src/components/MinimalWindow.js +++ b/src/components/MinimalWindow.js @@ -1,5 +1,6 @@ import { Component } from 'react'; import PropTypes from 'prop-types'; +import { styled } from '@mui/material/styles'; import MenuIcon from '@mui/icons-material/MenuSharp'; import cn from 'classnames'; import Paper from '@mui/material/Paper'; @@ -10,6 +11,9 @@ import CloseIcon from '@mui/icons-material/CloseSharp'; import MiradorMenuButton from '../containers/MiradorMenuButton'; import ns from '../config/css-ns'; +const StyledMiradorMenuButton = styled(MiradorMenuButton)(({}) => ({ + marginLeft: 'auto', +})); /** */ export class MinimalWindow extends Component { /** */ @@ -19,7 +23,6 @@ export class MinimalWindow extends Component { allowWindowSideBar, ariaLabel, children, - classes, label, removeWindow, t, @@ -32,17 +35,31 @@ export class MinimalWindow extends Component { elevation={1} id={windowId} className={ - cn(classes.window, ns('placeholder-window')) + cn(ns('placeholder-window')) } + sx={{ + backgroundColor: 'shades?.dark', + borderRadius: 0, + display: 'flex', + flexDirection: 'column', + height: '100%', + minHeight: 0, + overflow: 'hidden', + width: '100%', + }} aria-label={label && ariaLabel ? t('window', { label }) : null} > {allowWindowSideBar && ( @@ -53,20 +70,29 @@ export class MinimalWindow extends Component { )} - + {label} {allowClose && removeWindow && ( - - + )} @@ -81,7 +107,6 @@ MinimalWindow.propTypes = { allowWindowSideBar: PropTypes.bool, ariaLabel: PropTypes.bool, children: PropTypes.node, - classes: PropTypes.objectOf(PropTypes.string), label: PropTypes.string, removeWindow: PropTypes.func, t: PropTypes.func, @@ -93,7 +118,6 @@ MinimalWindow.defaultProps = { allowWindowSideBar: true, ariaLabel: true, children: null, - classes: {}, label: '', removeWindow: () => {}, t: key => key, diff --git a/src/components/OpenSeadragonViewer.js b/src/components/OpenSeadragonViewer.js index f2ce17d670..0bcbf76c90 100644 --- a/src/components/OpenSeadragonViewer.js +++ b/src/components/OpenSeadragonViewer.js @@ -2,6 +2,7 @@ import { createRef, Children, cloneElement, Component, } from 'react'; import PropTypes from 'prop-types'; +import { styled } from '@mui/material/styles'; import debounce from 'lodash/debounce'; import isEqual from 'lodash/isEqual'; import OpenSeadragon from 'openseadragon'; @@ -12,6 +13,11 @@ import CanvasWorld from '../lib/CanvasWorld'; import { PluginHook } from './PluginHook'; import { OSDReferences } from '../plugins/OSDReferences'; +const StyledSection = styled('section')(({ theme }) => ({ + cursor: 'grab', + flex: 1, + position: 'relative', +})); /** * Represents a OpenSeadragonViewer in the mirador workspace. Responsible for mounting * and rendering OSD. @@ -340,7 +346,7 @@ export class OpenSeadragonViewer extends Component { */ render() { const { - children, classes, label, t, windowId, + children, label, t, windowId, drawAnnotations, } = this.props; const { viewer, grabbing } = this.state; @@ -355,8 +361,8 @@ export class OpenSeadragonViewer extends Component { )); return ( -
} { enhancedChildren } -
+ ); } } @@ -385,7 +391,6 @@ OpenSeadragonViewer.defaultProps = { OpenSeadragonViewer.propTypes = { canvasWorld: PropTypes.instanceOf(CanvasWorld).isRequired, children: PropTypes.node, - classes: PropTypes.objectOf(PropTypes.string).isRequired, drawAnnotations: PropTypes.bool, infoResponses: PropTypes.arrayOf(PropTypes.object), // eslint-disable-line react/forbid-prop-types label: PropTypes.string, diff --git a/src/components/SanitizedHtml.js b/src/components/SanitizedHtml.js index 1cd1f4b24f..13d3139323 100644 --- a/src/components/SanitizedHtml.js +++ b/src/components/SanitizedHtml.js @@ -1,9 +1,16 @@ import { Component } from 'react'; import PropTypes from 'prop-types'; +import { styled } from '@mui/material/styles'; import DOMPurify from 'dompurify'; import ns from '../config/css-ns'; import htmlRules from '../lib/htmlRules'; +const StyledSpan = styled('span')(({ theme }) => ({ + '& a': { + color: theme.palette.primary.main, + textDecoration: 'underline', + }, +})); /** */ export class SanitizedHtml extends Component { @@ -11,7 +18,7 @@ export class SanitizedHtml extends Component { */ render() { const { - classes, htmlString, ruleSet, ...props + htmlString, ruleSet, ...props } = this.props; // Add a hook to make all links open a new window @@ -25,8 +32,8 @@ export class SanitizedHtml extends Component { }); return ( - + ); } ScrollIndicatedDialogContent.propTypes = { - classes: PropTypes.shape({ - shadowScrollDialog: PropTypes.string, - }).isRequired, - className: PropTypes.string, }; diff --git a/src/components/SearchPanel.js b/src/components/SearchPanel.js index ea07c69f03..368d7fafa0 100644 --- a/src/components/SearchPanel.js +++ b/src/components/SearchPanel.js @@ -19,7 +19,6 @@ export class SearchPanel extends Component { /** */ render() { const { - classes, fetchSearch, windowId, id, @@ -40,7 +39,7 @@ export class SearchPanel extends Component { query && query !== '' && ( ( - @@ -78,10 +89,6 @@ export class SearchPanel extends Component { } SearchPanel.propTypes = { - classes: PropTypes.shape({ - clearChip: PropTypes.string, - inlineButton: PropTypes.string, - }), fetchSearch: PropTypes.func, id: PropTypes.string.isRequired, query: PropTypes.string, @@ -95,7 +102,6 @@ SearchPanel.propTypes = { }; SearchPanel.defaultProps = { - classes: {}, fetchSearch: undefined, query: '', suggestedSearches: [], diff --git a/src/components/SearchPanelControls.js b/src/components/SearchPanelControls.js index 8e2d1b19af..cc00a60531 100644 --- a/src/components/SearchPanelControls.js +++ b/src/components/SearchPanelControls.js @@ -1,5 +1,6 @@ import { Component } from 'react'; import PropTypes from 'prop-types'; +import { styled } from '@mui/material/styles'; import deburr from 'lodash/deburr'; import debounce from 'lodash/debounce'; import isObject from 'lodash/isObject'; @@ -10,6 +11,16 @@ import SearchIcon from '@mui/icons-material/SearchSharp'; import MiradorMenuButton from '../containers/MiradorMenuButton'; import SearchPanelNavigation from '../containers/SearchPanelNavigation'; +const StyledForm = styled('form')(({ theme }) => ({ + paddingBottom: theme.spacing(1), + paddingRight: theme.spacing(1.5), + width: '100%', +})); + +const StyledEndAdornment = styled('div')(({ }) => ({ + position: 'absolute', + right: 0, +})); /** Sometimes an autocomplete match can be a simple string, other times an object with a `match` property, this function abstracts that away */ const getMatch = (option) => (isObject(option) ? option.match : option); @@ -117,14 +128,14 @@ export class SearchPanelControls extends Component { /** */ render() { const { - classes, companionWindowId, searchIsFetching, t, windowId, + companionWindowId, searchIsFetching, t, windowId, } = this.props; const { search, suggestions } = this.state; const id = `search-${companionWindowId}`; return ( <> -
+ + {Boolean(searchIsFetching) && ( - + )} -
+ ), }} /> )} /> - + ); @@ -169,7 +186,6 @@ SearchPanelControls.propTypes = { autocompleteService: PropTypes.shape({ id: PropTypes.string, }), - classes: PropTypes.objectOf(PropTypes.string), companionWindowId: PropTypes.string.isRequired, fetchSearch: PropTypes.func.isRequired, query: PropTypes.string, @@ -183,7 +199,6 @@ SearchPanelControls.propTypes = { SearchPanelControls.defaultProps = { autocompleteService: undefined, - classes: {}, query: '', t: key => key, }; diff --git a/src/components/SearchPanelNavigation.js b/src/components/SearchPanelNavigation.js index 67bf3aaf41..3ddf2c49b5 100644 --- a/src/components/SearchPanelNavigation.js +++ b/src/components/SearchPanelNavigation.js @@ -42,7 +42,7 @@ export class SearchPanelNavigation extends Component { */ render() { const { - numTotal, searchHits, selectedContentSearchAnnotation, classes, t, direction, + numTotal, searchHits, selectedContentSearchAnnotation, t, direction, } = this.props; const iconStyle = direction === 'rtl' ? { transform: 'rotate(180deg)' } : {}; @@ -57,7 +57,7 @@ export class SearchPanelNavigation extends Component { if (searchHits.length === 0) return null; return ( - + key, diff --git a/src/components/SearchResults.js b/src/components/SearchResults.js index 616d364700..e3a855bff2 100644 --- a/src/components/SearchResults.js +++ b/src/components/SearchResults.js @@ -1,5 +1,6 @@ import { Component } from 'react'; import PropTypes from 'prop-types'; +import { styled } from '@mui/material/styles'; import Button from '@mui/material/Button'; import List from '@mui/material/List'; import Typography from '@mui/material/Typography'; @@ -80,7 +81,6 @@ export class SearchResults extends Component { /** */ render() { const { - classes, companionWindowId, containerRef, isFetching, @@ -106,14 +106,18 @@ export class SearchResults extends Component { <> { focused && ( - )} {noResultsState && ( - + {t('searchNoResults')} )} @@ -122,7 +126,7 @@ export class SearchResults extends Component { { nextSearch && (
); } } WorkspaceElastic.propTypes = { - classes: PropTypes.objectOf(PropTypes.string).isRequired, elasticLayout: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types setWorkspaceViewportDimensions: PropTypes.func.isRequired, setWorkspaceViewportPosition: PropTypes.func.isRequired, diff --git a/src/components/WorkspaceElasticWindow.js b/src/components/WorkspaceElasticWindow.js index 54224913c4..90dea640fb 100644 --- a/src/components/WorkspaceElasticWindow.js +++ b/src/components/WorkspaceElasticWindow.js @@ -1,9 +1,14 @@ import { Component } from 'react'; import PropTypes from 'prop-types'; +import { styled } from '@mui/material/styles'; import { Rnd } from 'react-rnd'; import Window from '../containers/Window'; import ns from '../config/css-ns'; +const StyledRnd = styled(Rnd)(({ focused, theme }) => ({ + zIndex: focused ? theme.zIndex.modal - 1 : 'auto', +})); + /** * Represents a work area that contains any number of windows * @memberof Workspace @@ -14,7 +19,6 @@ class WorkspaceElasticWindow extends Component { */ render() { const { - classes, companionWindowDimensions, focused, focusWindow, @@ -27,7 +31,8 @@ class WorkspaceElasticWindow extends Component { const offsetY = workspace.height / 2; return ( - - + ); } } WorkspaceElasticWindow.propTypes = { - classes: PropTypes.objectOf(PropTypes.string), companionWindowDimensions: PropTypes.shape({ height: PropTypes.number, width: PropTypes.number, @@ -85,7 +86,6 @@ WorkspaceElasticWindow.propTypes = { }; WorkspaceElasticWindow.defaultProps = { - classes: {}, companionWindowDimensions: { height: 0, width: 0 }, focused: false, focusWindow: () => {}, diff --git a/src/components/WorkspaceImport.js b/src/components/WorkspaceImport.js index 8f3e43783d..d0b0e4b20d 100644 --- a/src/components/WorkspaceImport.js +++ b/src/components/WorkspaceImport.js @@ -84,12 +84,16 @@ export class WorkspaceImport extends Component { onChange={this.handleChange} minRows={15} variant="filled" - inputProps={{ autoFocus: 'autofocus', className: classes.textInput }} + sx={{ + '.MuiInput-input': { fontFamily: 'monospace' }, + width: '100%', + }} + inputProps={{ autoFocus: 'autofocus' }} helperText={t('importWorkspaceHint')} />
- )} -
+ -
-
+ + {manifest.getTotalCollections() > 0 && ( this.setFilter('collections')} label={t('totalCollections', { count: manifest.getTotalCollections() })} /> )} {manifest.getTotalManifests() > 0 && ( this.setFilter('manifests')} label={t('totalManifests', { count: manifest.getTotalManifests() })} /> )} -
+ { currentFilter === 'collections' && ( { @@ -237,7 +258,7 @@ export class CollectionDialog extends Component { { this.selectCollection(c); }} - className={classes.collectionItem} + sx={{ whiteSpace: 'normal' }} > {CollectionDialog.getUseableLabel(c)} @@ -252,7 +273,7 @@ export class CollectionDialog extends Component { { this.selectManifest(m); }} - className={classes.collectionItem} + sx={{ whiteSpace: 'normal' }} > {CollectionDialog.getUseableLabel(m)} @@ -260,7 +281,7 @@ export class CollectionDialog extends Component { } )} - + ); if (!description && !header) { return ( - -
- { icon || } - + + + { icon || ( + + ) } + { ruleSet ? : label } { button } -
+ ); } return ( - - this.setOpen(false)} > - + { ruleSet ? : header } { header && description ? ': ' : '' } { ruleSet ? : description } @@ -104,7 +182,6 @@ export class WindowAuthenticationBar extends Component { } WindowAuthenticationBar.propTypes = { - classes: PropTypes.objectOf(PropTypes.string).isRequired, confirmButton: PropTypes.string, ConfirmProps: PropTypes.object, // eslint-disable-line react/forbid-prop-types continueLabel: PropTypes.string, diff --git a/src/components/WindowCanvasNavigationControls.js b/src/components/WindowCanvasNavigationControls.js index 3f27d49e0c..c954b06b53 100644 --- a/src/components/WindowCanvasNavigationControls.js +++ b/src/components/WindowCanvasNavigationControls.js @@ -1,5 +1,6 @@ import { Component } from 'react'; import PropTypes from 'prop-types'; +import { alpha } from '@mui/material/styles'; import classNames from 'classnames'; import Paper from '@mui/material/Paper'; import Typography from '@mui/material/Typography'; @@ -25,22 +26,30 @@ export class WindowCanvasNavigationControls extends Component { /** */ render() { - const { - classes, visible, windowId, zoomToWorld, - } = this.props; + const { visible, windowId, zoomToWorld } = this.props; if (!visible) return (); return ( )} /> @@ -97,7 +131,6 @@ export class WindowSideBarButtons extends Component { )} /> @@ -106,7 +139,6 @@ export class WindowSideBarButtons extends Component { )} /> @@ -115,10 +147,9 @@ export class WindowSideBarButtons extends Component { + )} @@ -128,10 +159,9 @@ export class WindowSideBarButtons extends Component { + )} @@ -141,10 +171,9 @@ export class WindowSideBarButtons extends Component { + )} @@ -154,7 +183,6 @@ export class WindowSideBarButtons extends Component { && PluginComponents.map(PluginComponent => ( ({ + flexBasis: '100%', + height: 0, +})); /** * a panel showing the canvases for a given manifest */ @@ -57,7 +62,6 @@ export class WindowSideBarCanvasPanel extends Component { */ render() { const { - classes, collection, id, showMultipart, @@ -113,8 +117,14 @@ export class WindowSideBarCanvasPanel extends Component { value={sequenceId} onChange={this.handleSequenceChange} name="sequenceId" - classes={{ select: classes.select }} - className={classes.selectEmpty} + sx={{ + '&.MuiSelect-select': { + '&:focus': { + backgroundColor: 'background.paper', + }, + }, + backgroundColor: 'background.paper', + }} data-testid="sequence-select" > { sequences.map((s, i) => { WindowSideBarCanvasPanel.getUseableLabel(s, i) }) } @@ -122,7 +132,7 @@ export class WindowSideBarCanvasPanel extends Component { ) } -
+ {showToc && ( - } /> + } /> )} - } /> - } /> + } /> + } /> )} @@ -146,7 +156,7 @@ export class WindowSideBarCanvasPanel extends Component { onClick={showMultipart} endIcon={} > - + {WindowSideBarCanvasPanel.getUseableLabel(collection)} @@ -159,7 +169,6 @@ export class WindowSideBarCanvasPanel extends Component { } WindowSideBarCanvasPanel.propTypes = { - classes: PropTypes.objectOf(PropTypes.string).isRequired, collection: PropTypes.object, // eslint-disable-line react/forbid-prop-types id: PropTypes.string.isRequired, sequenceId: PropTypes.string, diff --git a/src/components/WindowSideBarCollectionPanel.js b/src/components/WindowSideBarCollectionPanel.js index a2b5e23755..7ccaa6b264 100644 --- a/src/components/WindowSideBarCollectionPanel.js +++ b/src/components/WindowSideBarCollectionPanel.js @@ -21,6 +21,12 @@ function Item({ alignItems="flex-start" button component="li" + sx={{ + borderBottom: '0.5px solid', + borderBottomColor: 'divider', + paddingRight: 1, + whiteSpace: 'normal', + }} {...otherProps} > { variant === 'thumbnail' && ( @@ -74,7 +80,6 @@ export class WindowSideBarCollectionPanel extends Component { render() { const { canvasNavigation, - classes, collectionPath, collection, id, @@ -114,7 +119,7 @@ export class WindowSideBarCollectionPanel extends Component { )} { collection && WindowSideBarCollectionPanel.getUseableLabel(collection)} - { isFetching && } + { isFetching && } )} @@ -123,9 +128,9 @@ export class WindowSideBarCollectionPanel extends Component { { isFetching && ( - - - + + + )} @@ -144,7 +149,6 @@ export class WindowSideBarCollectionPanel extends Component { canvasNavigation={canvasNavigation} manifest={manifest} variant={variant} - className={classes.menuItem} selected={manifestId === manifest.id} /> ); @@ -167,7 +171,6 @@ export class WindowSideBarCollectionPanel extends Component { canvasNavigation={canvasNavigation} manifest={manifest} variant={variant} - className={classes.menuItem} selected={manifestId === manifest.id} /> ); @@ -184,7 +187,6 @@ WindowSideBarCollectionPanel.propTypes = { height: PropTypes.number, width: PropTypes.number, }).isRequired, - classes: PropTypes.objectOf(PropTypes.string).isRequired, collection: PropTypes.object, // eslint-disable-line react/forbid-prop-types collectionPath: PropTypes.arrayOf(PropTypes.string), id: PropTypes.string.isRequired, diff --git a/src/components/WindowThumbnailSettings.js b/src/components/WindowThumbnailSettings.js index 9afb7ec461..e25dc0553e 100644 --- a/src/components/WindowThumbnailSettings.js +++ b/src/components/WindowThumbnailSettings.js @@ -34,17 +34,23 @@ export class WindowThumbnailSettings extends Component { */ render() { const { - classes, handleClose, t, thumbnailNavigationPosition, direction, + handleClose, t, thumbnailNavigationPosition, direction, } = this.props; return ( <> {t('thumbnails')} - { this.handleChange('off'); handleClose(); }}> + { this.handleChange('off'); handleClose(); }}> } @@ -52,10 +58,16 @@ export class WindowThumbnailSettings extends Component { labelPlacement="bottom" /> - { this.handleChange('far-bottom'); handleClose(); }}> + { this.handleChange('far-bottom'); handleClose(); }}> } @@ -63,10 +75,16 @@ export class WindowThumbnailSettings extends Component { labelPlacement="bottom" /> - { this.handleChange('far-right'); handleClose(); }}> + { this.handleChange('far-right'); handleClose(); }}> {allowWindowSideBar && ( @@ -95,7 +99,6 @@ WindowTopBar.propTypes = { allowMaximize: PropTypes.bool, allowTopMenuButton: PropTypes.bool, allowWindowSideBar: PropTypes.bool, - classes: PropTypes.objectOf(PropTypes.string).isRequired, focused: PropTypes.bool, focusWindow: PropTypes.func, maximized: PropTypes.bool, diff --git a/src/components/WindowViewSettings.js b/src/components/WindowViewSettings.js index ff4b4c7dc5..caf094bab9 100644 --- a/src/components/WindowViewSettings.js +++ b/src/components/WindowViewSettings.js @@ -36,7 +36,7 @@ export class WindowViewSettings extends Component { */ render() { const { - classes, handleClose, t, windowViewType, viewTypes, + handleClose, t, windowViewType, viewTypes, } = this.props; const iconMap = { @@ -51,13 +51,19 @@ export class WindowViewSettings extends Component { const menuItem = ({ value, Icon }) => ( { this.handleChange(value); handleClose(); }} > } label={t(value)} labelPlacement="bottom" @@ -76,7 +82,6 @@ export class WindowViewSettings extends Component { } WindowViewSettings.propTypes = { - classes: PropTypes.objectOf(PropTypes.string).isRequired, handleClose: PropTypes.func, setWindowViewType: PropTypes.func.isRequired, t: PropTypes.func, diff --git a/src/components/Workspace.js b/src/components/Workspace.js index 785eaf7de4..f9de23c5a3 100644 --- a/src/components/Workspace.js +++ b/src/components/Workspace.js @@ -1,5 +1,6 @@ import { Component } from 'react'; import PropTypes from 'prop-types'; +import { styled } from '@mui/material/styles'; import classNames from 'classnames'; import Grid from '@mui/material/Grid'; import Typography from '@mui/material/Typography'; @@ -10,6 +11,16 @@ import WorkspaceElastic from '../containers/WorkspaceElastic'; import ns from '../config/css-ns'; import { IIIFDropTarget } from './IIIFDropTarget'; +const StyledWorkspaceViewport = styled('div')(() => ({ + bottom: 0, + left: 0, + margin: 0, + overflow: 'hidden', + position: 'absolute', + right: 0, + top: 0, +})); + /** * Represents a work area that contains any number of windows * @memberof Workspace @@ -108,23 +119,28 @@ export class Workspace extends Component { * render */ render() { - const { classes, isWorkspaceControlPanelVisible, t } = this.props; + const { isWorkspaceControlPanelVisible, t } = this.props; return ( -
{t('miradorViewer')} {this.workspaceByType()} -
+ ); } @@ -133,7 +149,6 @@ export class Workspace extends Component { Workspace.propTypes = { addWindow: PropTypes.func, allowNewWindows: PropTypes.bool, - classes: PropTypes.objectOf(PropTypes.string).isRequired, isWorkspaceControlPanelVisible: PropTypes.bool.isRequired, maximizedWindowIds: PropTypes.arrayOf(PropTypes.string), t: PropTypes.func.isRequired, diff --git a/src/containers/CollectionDialog.js b/src/containers/CollectionDialog.js index 0cb2c2075c..02297bccbc 100644 --- a/src/containers/CollectionDialog.js +++ b/src/containers/CollectionDialog.js @@ -1,6 +1,5 @@ import { compose } from 'redux'; import { connect } from 'react-redux'; -import withStyles from '@mui/styles/withStyles'; import { withTranslation } from 'react-i18next'; import { withPlugins } from '../extend/withPlugins'; import * as actions from '../state/actions'; @@ -48,44 +47,8 @@ const mapStateToProps = (state, { windowId }) => { }; }; -/** */ -const styles = theme => ({ - collectionFilter: { - padding: '16px', - paddingTop: 0, - }, - collectionItem: { - whiteSpace: 'normal', - }, - collectionMetadata: { - padding: '16px', - }, - dark: { - color: '#000000', - }, - dialog: { - position: 'absolute !important', - }, - dialogContent: { - padding: theme.spacing(1), - }, - light: { - color: theme.palette.grey[400], - }, - listitem: { - '&:focus': { - backgroundColor: theme.palette.action.focus, - }, - '&:hover': { - backgroundColor: theme.palette.action.hover, - }, - cursor: 'pointer', - }, -}); - const enhance = compose( withTranslation(), - withStyles(styles), withWorkspaceContext, connect(mapStateToProps, mapDispatchToProps), withPlugins('CollectionDialog'), diff --git a/src/containers/ManifestListItem.js b/src/containers/ManifestListItem.js index 7e3019a724..55f5c43e90 100644 --- a/src/containers/ManifestListItem.js +++ b/src/containers/ManifestListItem.js @@ -1,7 +1,6 @@ import { compose } from 'redux'; import { connect } from 'react-redux'; import { withTranslation } from 'react-i18next'; -import withStyles from '@mui/styles/withStyles'; import { withPlugins } from '../extend/withPlugins'; import { getManifest, @@ -50,56 +49,8 @@ const mapDispatchToProps = { fetchManifest: actions.fetchManifest, }; -/** - * - * @param theme - * @returns {{root: {}, label: {textAlign: string, textTransform: string}}} - */ -const styles = theme => ({ - active: {}, - buttonGrid: { - }, - label: { - textAlign: 'left', - textTransform: 'initial', - }, - logo: { - height: '2.5rem', - maxWidth: '100%', - objectFit: 'contain', - paddingRight: 8, - }, - placeholder: { - backgroundColor: theme.palette.grey[300], - }, - root: { - '&$active': { - borderLeft: `4px solid ${theme.palette.primary.main}`, - }, - '&:hover,&:focus-within': { - '&$active': { - borderLeft: `4px solid ${theme.palette.primary.main}`, - }, - backgroundColor: theme.palette.action.hover, - borderLeft: `4px solid ${theme.palette.action.hover}`, - }, - borderLeft: '4px solid transparent', - paddingLeft: theme.spacing(2), - paddingRight: theme.spacing(2), - [theme.breakpoints.up('sm')]: { - paddingLeft: theme.spacing(3), - paddingRight: theme.spacing(3), - }, - }, - thumbnail: { - maxWidth: '100%', - objectFit: 'contain', - }, -}); - const enhance = compose( withTranslation(), - withStyles(styles), connect(mapStateToProps, mapDispatchToProps), withPlugins('ManifestListItem'), ); diff --git a/src/containers/ThumbnailNavigation.js b/src/containers/ThumbnailNavigation.js index 69c38fb9b5..bf7c3490aa 100644 --- a/src/containers/ThumbnailNavigation.js +++ b/src/containers/ThumbnailNavigation.js @@ -1,7 +1,6 @@ import { compose } from 'redux'; import { connect } from 'react-redux'; import { withTranslation } from 'react-i18next'; -import withStyles from '@mui/styles/withStyles'; import { withPlugins } from '../extend/withPlugins'; import * as actions from '../state/actions'; import { ThumbnailNavigation } from '../components/ThumbnailNavigation'; @@ -40,20 +39,7 @@ const mapDispatchToProps = (dispatch, { windowId }) => ({ setPreviousCanvas: (...args) => dispatch(actions.setPreviousCanvas(windowId)), }); -/** - * Styles for withStyles HOC - */ -const styles = theme => ({ - thumbNavigation: { - '&:focus': { - boxShadow: 0, - outline: 0, - }, - }, -}); - const enhance = compose( - withStyles(styles), withTranslation(), connect(mapStateToProps, mapDispatchToProps), withPlugins('ThumbnailNavigation'), diff --git a/src/containers/ViewerInfo.js b/src/containers/ViewerInfo.js index 0d642ae10a..6757102f98 100644 --- a/src/containers/ViewerInfo.js +++ b/src/containers/ViewerInfo.js @@ -1,7 +1,6 @@ import { compose } from 'redux'; import { connect } from 'react-redux'; import { withTranslation } from 'react-i18next'; -import withStyles from '@mui/styles/withStyles'; import { withPlugins } from '../extend/withPlugins'; import { ViewerInfo } from '../components/ViewerInfo'; import { @@ -29,20 +28,7 @@ const mapStateToProps = (state, props) => { }; }; -const styles = { - osdInfo: { - order: 2, - overflow: 'hidden', - paddingBottom: 3, - textOverflow: 'ellipsis', - unicodeBidi: 'plaintext', - whiteSpace: 'nowrap', - width: '100%', - }, -}; - const enhance = compose( - withStyles(styles), withTranslation(), connect(mapStateToProps, null), withPlugins('ViewerInfo'), diff --git a/src/containers/ViewerNavigation.js b/src/containers/ViewerNavigation.js index 1e973cc000..3f142de431 100644 --- a/src/containers/ViewerNavigation.js +++ b/src/containers/ViewerNavigation.js @@ -1,7 +1,6 @@ import { compose } from 'redux'; import { connect } from 'react-redux'; import { withTranslation } from 'react-i18next'; -import withStyles from '@mui/styles/withStyles'; import { withPlugins } from '../extend/withPlugins'; import * as actions from '../state/actions'; import { @@ -28,14 +27,7 @@ const mapDispatchToProps = (dispatch, { windowId }) => ({ setPreviousCanvas: (...args) => dispatch(actions.setPreviousCanvas(windowId)), }); -const styles = { - osdNavigation: { - order: 1, - }, -}; - const enhance = compose( - withStyles(styles), withTranslation(), connect(mapStateToProps, mapDispatchToProps), withPlugins('ViewerNavigation'), diff --git a/src/containers/WindowAuthenticationBar.js b/src/containers/WindowAuthenticationBar.js index 74541246dc..b38a244aa8 100644 --- a/src/containers/WindowAuthenticationBar.js +++ b/src/containers/WindowAuthenticationBar.js @@ -1,62 +1,10 @@ import { compose } from 'redux'; import { withTranslation } from 'react-i18next'; -import { alpha } from '@mui/material/styles'; -import withStyles from '@mui/styles/withStyles'; import { withPlugins } from '../extend/withPlugins'; import { WindowAuthenticationBar } from '../components/WindowAuthenticationBar'; -/** - * @param theme - * @returns {{typographyBody: {flexGrow: number, fontSize: number|string}, - * windowTopBarStyle: {minHeight: number, paddingLeft: number, backgroundColor: string}}} - */ -const styles = theme => ({ - buttonInvert: { - '&:hover': { - backgroundColor: alpha(theme.palette.secondary.contrastText, 1 - theme.palette.action.hoverOpacity), - }, - backgroundColor: theme.palette.secondary.contrastText, - marginLeft: theme.spacing(5), - paddingBottom: 0, - paddingTop: 0, - }, - expanded: { - paddingLeft: theme.spacing(), - paddingRight: theme.spacing(), - }, - failure: { - backgroundColor: theme.palette.error.dark, - }, - fauxButton: { - marginLeft: theme.spacing(2.5), - }, - icon: { - marginRight: theme.spacing(1.5), - verticalAlign: 'text-bottom', - }, - label: { - lineHeight: 2.25, - }, - paper: { - backgroundColor: theme.palette.secondary.main, - color: theme.palette.secondary.contrastText, - cursor: 'pointer', - }, - topBar: { - '&:hover': { - backgroundColor: theme.palette.secondary.main, - }, - alignItems: 'center', - display: 'flex', - justifyContent: 'inherit', - padding: theme.spacing(1), - textTransform: 'none', - }, -}); - const enhance = compose( withTranslation(), - withStyles(styles), withPlugins('WindowAuthenticationBar'), ); diff --git a/src/containers/WindowCanvasNavigationControls.js b/src/containers/WindowCanvasNavigationControls.js index 2107641995..a60fe2e3b1 100644 --- a/src/containers/WindowCanvasNavigationControls.js +++ b/src/containers/WindowCanvasNavigationControls.js @@ -1,8 +1,6 @@ import { connect } from 'react-redux'; import { compose } from 'redux'; import { withSize } from 'react-sizeme'; -import withStyles from '@mui/styles/withStyles'; -import { alpha } from '@mui/material/styles'; import { withPlugins } from '../extend/withPlugins'; import { getWorkspace } from '../state/selectors'; import { WindowCanvasNavigationControls } from '../components/WindowCanvasNavigationControls'; @@ -12,34 +10,8 @@ const mapStateToProps = (state, { windowId }) => ({ visible: getWorkspace(state).focusedWindowId === windowId, }); -/** - * - * @param theme - */ -const styles = theme => ({ - canvasNav: { - cursor: 'default', - display: 'flex', - flexDirection: 'row', - flexWrap: 'wrap', - justifyContent: 'center', - textAlign: 'center', - }, - canvasNavStacked: { - flexDirection: 'column', - }, - controls: { - backgroundColor: alpha(theme.palette.background.paper, 0.5), - bottom: 0, - position: 'absolute', - width: '100%', - zIndex: 50, - }, -}); - const enhance = compose( connect(mapStateToProps), - withStyles(styles), withSize(), withPlugins('WindowCanvasNavigationControls'), ); diff --git a/src/containers/WindowSideBar.js b/src/containers/WindowSideBar.js index 4b51046540..022e34f310 100644 --- a/src/containers/WindowSideBar.js +++ b/src/containers/WindowSideBar.js @@ -1,6 +1,5 @@ import { connect } from 'react-redux'; import { compose } from 'redux'; -import withStyles from '@mui/styles/withStyles'; import { withTranslation } from 'react-i18next'; import { withPlugins } from '../extend/withPlugins'; import { WindowSideBar } from '../components/WindowSideBar'; @@ -19,32 +18,7 @@ const mapStateToProps = (state, { windowId }) => ( } ); -/** - * - * @param theme - * @returns {{toolbar: CSSProperties | toolbar | {minHeight}, grow: {flexGrow: number}, - * drawer: {overflowX: string, left: number, flexShrink: number, width: number, height: string}}} - */ -const styles = theme => ({ - drawer: { - flexShrink: 0, - height: '100%', - order: -1000, - zIndex: theme.zIndex.appBar - 1, - }, - grow: { - flexGrow: 1, - }, - paper: { - borderInlineEnd: `1px solid ${theme.palette.divider}`, - overflowX: 'hidden', - width: 48, - }, - toolbar: theme.mixins.toolbar, -}); - const enhance = compose( - withStyles(styles), withTranslation(), connect(mapStateToProps, null), withPlugins('WindowSideBar'), diff --git a/src/containers/WindowSideBarButtons.js b/src/containers/WindowSideBarButtons.js index 90de07e88d..3b0511ae0f 100644 --- a/src/containers/WindowSideBarButtons.js +++ b/src/containers/WindowSideBarButtons.js @@ -1,6 +1,5 @@ import { compose } from 'redux'; import { connect } from 'react-redux'; -import withStyles from '@mui/styles/withStyles'; import { withTranslation } from 'react-i18next'; import { withPlugins } from '../extend/withPlugins'; import * as actions from '../state/actions'; @@ -65,49 +64,8 @@ const mapStateToProps = (state, { windowId }) => ({ sideBarPanel: ((getCompanionWindowsForPosition(state, { position: 'left', windowId }))[0] || {}).content, }); -/** */ -const style = theme => ({ - badge: { - backgroundColor: theme.palette.notification?.main, - }, - tab: { - '&:active': { - backgroundColor: theme.palette.action?.active, - }, - '&:focus': { - '@media (hover: none)': { - backgroundColor: 'transparent', - }, - backgroundColor: theme.palette.action?.hover, - textDecoration: 'none', - // Reset on touch devices, it doesn't add specificity - }, - '&:hover': { - '@media (hover: none)': { - backgroundColor: 'transparent', - }, - backgroundColor: theme.palette.action?.hover, - textDecoration: 'none', - // Reset on touch devices, it doesn't add specificity - }, - - borderRight: '2px solid transparent', - minWidth: 'auto', - }, - tabSelected: { - borderRight: `2px solid ${theme.palette.primary?.main}`, - }, - tabsFlexContainer: { - flexDirection: 'column', - }, - tabsIndicator: { - display: 'none', - }, -}); - const enhance = compose( withTranslation(), - withStyles(style), connect(mapStateToProps, mapDispatchToProps), withPlugins('WindowSideBarButtons'), ); diff --git a/src/containers/WindowSideBarCanvasPanel.js b/src/containers/WindowSideBarCanvasPanel.js index 1f86dabe62..e6b4befc73 100644 --- a/src/containers/WindowSideBarCanvasPanel.js +++ b/src/containers/WindowSideBarCanvasPanel.js @@ -1,7 +1,6 @@ import { compose } from 'redux'; import { connect } from 'react-redux'; import { withTranslation } from 'react-i18next'; -import withStyles from '@mui/styles/withStyles'; import { withPlugins } from '../extend/withPlugins'; import * as actions from '../state/actions'; import { WindowSideBarCanvasPanel } from '../components/WindowSideBarCanvasPanel'; @@ -53,37 +52,8 @@ const mapDispatchToProps = (dispatch, { id, windowId }) => ({ ), }); -/** - * - * @param theme - */ -const styles = theme => ({ - break: { - flexBasis: '100%', - height: 0, - }, - collectionNavigationButton: { - textTransform: 'none', - }, - label: { - paddingLeft: theme.spacing(1), - }, - select: { - '&:focus': { - backgroundColor: theme.palette.background.paper, - }, - }, - selectEmpty: { - backgroundColor: theme.palette.background.paper, - }, - variantTab: { - minWidth: 'auto', - }, -}); - const enhance = compose( withTranslation(), - withStyles(styles), connect(mapStateToProps, mapDispatchToProps), withPlugins('WindowSideBarCanvasPanel'), ); diff --git a/src/containers/WindowSideBarCollectionPanel.js b/src/containers/WindowSideBarCollectionPanel.js index 10afe3cffc..738c11125a 100644 --- a/src/containers/WindowSideBarCollectionPanel.js +++ b/src/containers/WindowSideBarCollectionPanel.js @@ -1,7 +1,6 @@ import { compose } from 'redux'; import { connect } from 'react-redux'; import { withTranslation } from 'react-i18next'; -import withStyles from '@mui/styles/withStyles'; import { withPlugins } from '../extend/withPlugins'; import * as actions from '../state/actions'; import { @@ -56,22 +55,7 @@ const mapDispatchToProps = (dispatch, { id, windowId }) => ({ updateWindow: (...args) => dispatch(actions.updateWindow(windowId, ...args)), }); -/** - * Styles for withStyles HOC - */ -const styles = theme => ({ - label: { - paddingLeft: theme.spacing(1), - }, - menuItem: { - borderBottom: `0.5px solid ${theme.palette.divider}`, - paddingRight: theme.spacing(1), - whiteSpace: 'normal', - }, -}); - const enhance = compose( - withStyles(styles), withTranslation(), connect(mapStateToProps, mapDispatchToProps), withPlugins('WindowSideBarCollectionPanel'), diff --git a/src/containers/WindowThumbnailSettings.js b/src/containers/WindowThumbnailSettings.js index 6b7a663474..d773247fee 100644 --- a/src/containers/WindowThumbnailSettings.js +++ b/src/containers/WindowThumbnailSettings.js @@ -1,7 +1,6 @@ import { compose } from 'redux'; import { connect } from 'react-redux'; import { withTranslation } from 'react-i18next'; -import withStyles from '@mui/styles/withStyles'; import { withPlugins } from '../extend/withPlugins'; import * as actions from '../state/actions'; import { getThumbnailNavigationPosition, getThemeDirection } from '../state/selectors'; @@ -26,22 +25,7 @@ const mapStateToProps = (state, { windowId }) => ( } ); -/** */ -const styles = theme => ({ - label: { - borderBottom: '2px solid transparent', - }, - MenuItem: { - display: 'inline-block', - }, - selectedLabel: { - borderBottom: `2px solid ${theme.palette.secondary.main}`, - color: theme.palette.secondary.main, - }, -}); - const enhance = compose( - withStyles(styles), withTranslation(null, { withRef: true }), connect(mapStateToProps, mapDispatchToProps, null, { forwardRef: true }), withPlugins('WindowThumbnailSettings'), diff --git a/src/containers/WindowTopBar.js b/src/containers/WindowTopBar.js index b5707d3bcf..ae9fc34b90 100644 --- a/src/containers/WindowTopBar.js +++ b/src/containers/WindowTopBar.js @@ -1,7 +1,6 @@ import { compose } from 'redux'; import { connect } from 'react-redux'; import { withTranslation } from 'react-i18next'; -import withStyles from '@mui/styles/withStyles'; import { withPlugins } from '../extend/withPlugins'; import * as actions from '../state/actions'; import { getWindowConfig, isFocused } from '../state/selectors'; @@ -35,31 +34,8 @@ const mapDispatchToProps = (dispatch, { windowId }) => ({ toggleWindowSideBar: () => dispatch(actions.toggleWindowSideBar(windowId)), }); -/** - * @param theme - * @returns {{typographyBody: {flexGrow: number, fontSize: number|string}, - * windowTopBarStyle: {minHeight: number, paddingLeft: number, backgroundColor: string}}} - */ -const styles = theme => ({ - focused: {}, - windowTopBarStyle: { - '&$focused': { - borderTop: `2px solid ${theme.palette.primary.main}`, - }, - backgroundColor: theme.palette.shades?.main, - borderTop: '2px solid transparent', - minHeight: 32, - paddingLeft: theme.spacing(0.5), - paddingRight: theme.spacing(0.5), - }, - windowTopBarStyleDraggable: { - cursor: 'move', - }, -}); - const enhance = compose( withTranslation(), - withStyles(styles), connect(mapStateToProps, mapDispatchToProps), withPlugins('WindowTopBar'), ); diff --git a/src/containers/WindowTopBarPluginArea.js b/src/containers/WindowTopBarPluginArea.js index d5738eb23f..cf05b64af3 100644 --- a/src/containers/WindowTopBarPluginArea.js +++ b/src/containers/WindowTopBarPluginArea.js @@ -1,17 +1,11 @@ import { compose } from 'redux'; import { connect } from 'react-redux'; import { withTranslation } from 'react-i18next'; -import withStyles from '@mui/styles/withStyles'; import { withPlugins } from '../extend/withPlugins'; import { WindowTopBarPluginArea } from '../components/WindowTopBarPluginArea'; -/** - */ -const styles = {}; - const enhance = compose( withTranslation(), - withStyles(styles), connect(null, null), withPlugins('WindowTopBarPluginArea'), ); diff --git a/src/containers/WindowViewSettings.js b/src/containers/WindowViewSettings.js index 26966e5c36..3e34e5949b 100644 --- a/src/containers/WindowViewSettings.js +++ b/src/containers/WindowViewSettings.js @@ -1,7 +1,6 @@ import { compose } from 'redux'; import { connect } from 'react-redux'; import { withTranslation } from 'react-i18next'; -import withStyles from '@mui/styles/withStyles'; import { withPlugins } from '../extend/withPlugins'; import * as actions from '../state/actions'; import { getAllowedWindowViewTypes, getWindowViewType } from '../state/selectors'; @@ -26,22 +25,7 @@ const mapStateToProps = (state, { windowId }) => ( } ); -/** */ -const styles = theme => ({ - label: { - borderBottom: '2px solid transparent', - }, - MenuItem: { - display: 'inline-block', - }, - selectedLabel: { - borderBottom: `2px solid ${theme.palette.secondary.main}`, - color: theme.palette.secondary.main, - }, -}); - const enhance = compose( - withStyles(styles), withTranslation(null, { withRef: true }), connect(mapStateToProps, mapDispatchToProps, null, { forwardRef: true }), withPlugins('WindowViewSettings'), diff --git a/src/containers/Workspace.js b/src/containers/Workspace.js index 1e18b463c8..b7a8881f87 100644 --- a/src/containers/Workspace.js +++ b/src/containers/Workspace.js @@ -1,7 +1,6 @@ import { compose } from 'redux'; import { connect } from 'react-redux'; import { withTranslation } from 'react-i18next'; -import withStyles from '@mui/styles/withStyles'; import { withPlugins } from '../extend/withPlugins'; import { Workspace } from '../components/Workspace'; import { @@ -35,35 +34,8 @@ const mapDispatchToProps = { addWindow: actions.addWindow, }; -/** - * @param theme - */ -const styles = theme => ({ - workspaceViewport: { - bottom: 0, - left: 0, - margin: 0, - overflow: 'hidden', - position: 'absolute', - right: 0, - top: 0, - }, - workspaceWithControlPanel: { - paddingTop: 74, - }, - // injection order matters here - // eslint-disable-next-line sort-keys - '@media (min-width: 600px)': { - workspaceWithControlPanel: { - paddingLeft: 68, - paddingTop: 0, - }, - }, -}); - const enhance = compose( withTranslation(), - withStyles(styles), connect(mapStateToProps, mapDispatchToProps), withPlugins('Workspace'), // further HOC go here From 7800c41f18e26f51b16f35203bcb3bb450c9e7c6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Gerd=20M=C3=BCller?= Date: Tue, 19 Sep 2023 16:18:54 +0200 Subject: [PATCH 026/164] Fix linting errors --- src/components/CollectionDialog.js | 2 -- src/components/ManifestListItem.js | 25 +++++-------------- src/components/ViewerInfo.js | 2 +- src/components/WindowSideBar.js | 4 ++- src/components/WindowViewSettings.js | 4 +-- .../WorkspaceControlPanelButtons.js | 6 ----- 6 files changed, 12 insertions(+), 31 deletions(-) diff --git a/src/components/CollectionDialog.js b/src/components/CollectionDialog.js index 1d99f2abc2..655288862e 100644 --- a/src/components/CollectionDialog.js +++ b/src/components/CollectionDialog.js @@ -33,7 +33,6 @@ const StyledCollectionFilter = styled('div')(() => ({ paddingTop: 0, })); - /** * a dialog providing the possibility to select the collection */ @@ -153,7 +152,6 @@ export class CollectionDialog extends Component { /** */ render() { const { - classes, collection, error, isMultipart, diff --git a/src/components/ManifestListItem.js b/src/components/ManifestListItem.js index 87a46f190d..b83b198307 100644 --- a/src/components/ManifestListItem.js +++ b/src/components/ManifestListItem.js @@ -22,8 +22,6 @@ const StyledLogo = styled(Img)(({ theme }) => ({ paddingRight: 8, })); - - /** * Represents an item in a list of currently-loaded or loading manifests * @param {object} props @@ -72,7 +70,6 @@ export class ManifestListItem extends Component { thumbnail, manifestLogo, size, - classes, provider, t, error, @@ -103,17 +100,12 @@ export class ManifestListItem extends Component { ({ - '&$active': { - borderLeft: `4px solid ${theme.palette.primary.main}`, - }, '&:hover,&:focus-within': { - '&$active': { - borderLeft: `4px solid ${theme.palette.primary.main}`, - }, backgroundColor: theme.palette.action.hover, - borderLeft: `4px solid ${theme.palette.action.hover}`, + borderLeftColor: active ? theme.palette.action.hover : theme.palette.primary.main, }, - borderLeft: '4px solid transparent', + borderLeft: '4px solid', + borderLeftColor: active ? 'transparent' : theme.palette.primary.main, paddingLeft: theme.spacing(2), paddingRight: theme.spacing(2), [theme.breakpoints.up('sm')]: { @@ -132,17 +124,12 @@ export class ManifestListItem extends Component { ({ - '&$active': { - borderLeft: `4px solid ${theme.palette.primary.main}`, - }, '&:hover,&:focus-within': { - '&$active': { - borderLeft: `4px solid ${theme.palette.primary.main}`, - }, backgroundColor: theme.palette.action.hover, - borderLeft: `4px solid ${theme.palette.action.hover}`, + borderLeftColor: active ? theme.palette.action.hover : theme.palette.primary.main, }, - borderLeft: '4px solid transparent', + borderLeft: '4px solid', + borderLeftColor: active ? 'transparent' : theme.palette.primary.main, paddingLeft: theme.spacing(2), paddingRight: theme.spacing(2), [theme.breakpoints.up('sm')]: { diff --git a/src/components/ViewerInfo.js b/src/components/ViewerInfo.js index 35ec312dc2..3a0e3c3c49 100644 --- a/src/components/ViewerInfo.js +++ b/src/components/ViewerInfo.js @@ -29,7 +29,7 @@ export class ViewerInfo extends Component { } = this.props; return ( - + { t('pagination', { current: canvasIndex + 1, total: canvasCount }) } diff --git a/src/components/WindowSideBar.js b/src/components/WindowSideBar.js index f57e90ad5c..e6ced82293 100644 --- a/src/components/WindowSideBar.js +++ b/src/components/WindowSideBar.js @@ -12,7 +12,9 @@ export class WindowSideBar extends Component { * @return */ render() { - const { direction, t, windowId, sideBarOpen } = this.props; + const { + direction, t, windowId, sideBarOpen, + } = this.props; return ( ( { this.handleChange(value); handleClose(); }} > @@ -62,7 +62,7 @@ export class WindowViewSettings extends Component { borderBottom: '2px solid', borderBottomColor: windowViewType === value ? 'secondary.main' : 'transparent', color: 'secondary.main', - } + }, }} control={} label={t(value)} diff --git a/src/components/WorkspaceControlPanelButtons.js b/src/components/WorkspaceControlPanelButtons.js index b34c350953..6be2ad64fd 100644 --- a/src/components/WorkspaceControlPanelButtons.js +++ b/src/components/WorkspaceControlPanelButtons.js @@ -1,5 +1,4 @@ import { Component } from 'react'; -import PropTypes from 'prop-types'; import { styled } from '@mui/material/styles'; import FullScreenButton from '../containers/FullScreenButton'; import WorkspaceMenuButton from '../containers/WorkspaceMenuButton'; @@ -33,8 +32,3 @@ export class WorkspaceControlPanelButtons extends Component { } } -WorkspaceControlPanelButtons.propTypes = { -}; - -WorkspaceControlPanelButtons.defaultProps = { -}; From 1945f3135709809cd8c8b122f7c7b548495e2e8e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Gerd=20M=C3=BCller?= Date: Tue, 19 Sep 2023 18:16:08 +0200 Subject: [PATCH 027/164] Migrate components to MUI v5 with sx/styled API --- src/components/CanvasAnnotations.js | 27 ++---- src/components/SidebarIndexTableOfContents.js | 51 +++++++--- src/components/ThumbnailCanvasGrouping.js | 29 ++++-- src/components/Window.js | 82 ++++++++++++---- src/components/WorkspaceAdd.js | 69 ++++++++++--- src/components/WorkspaceSelectionDialog.js | 96 +++++++++++++++---- src/containers/SidebarIndexTableOfContents.js | 40 -------- src/containers/ThumbnailCanvasGrouping.js | 26 ----- src/containers/Window.js | 63 ------------ src/containers/WorkspaceAdd.js | 66 ------------- src/containers/WorkspaceSelectionDialog.js | 53 ---------- 11 files changed, 258 insertions(+), 344 deletions(-) diff --git a/src/components/CanvasAnnotations.js b/src/components/CanvasAnnotations.js index 6934815c2e..172880ae47 100644 --- a/src/components/CanvasAnnotations.js +++ b/src/components/CanvasAnnotations.js @@ -1,6 +1,5 @@ import { Component } from 'react'; import PropTypes from 'prop-types'; -import clsx from 'clsx'; import Chip from '@mui/material/Chip'; import MenuList from '@mui/material/MenuList'; import MenuItem from '@mui/material/MenuItem'; @@ -9,18 +8,6 @@ import Typography from '@mui/material/Typography'; import SanitizedHtml from '../containers/SanitizedHtml'; import { ScrollTo } from './ScrollTo'; -const annotationListItem = { - '&$hovered': { - backgroundColor: (theme) => theme.palette.action.hover, - }, - '&:hover,&:focus': { - backgroundColor: (theme) => theme.palette.action.hover, - }, - borderBottom: (theme) => `0.5px solid ${theme.palette.divider}`, - cursor: 'pointer', - whiteSpace: 'normal', -}; - /** * CanvasAnnotations ~ */ @@ -86,12 +73,16 @@ export class CanvasAnnotations extends Component { ({ + +})); /** */ function getStartCanvasId(node) { const jsonld = node.data.__jsonld; // eslint-disable-line no-underscore-dangle @@ -102,7 +105,7 @@ export class SidebarIndexTableOfContents extends Component { /** */ render() { const { - classes, treeStructure, visibleNodeIds, expandedNodeIds, containerRef, nodeIdToScrollTo, + treeStructure, visibleNodeIds, expandedNodeIds, containerRef, nodeIdToScrollTo, } = this.props; if (!treeStructure) { @@ -120,21 +123,42 @@ export class SidebarIndexTableOfContents extends Component { > .MuiTreeItem-content': { + backgroundColor: 'action.selected', + }, + '&:hover > .MuiTreeItem-content': { + backgroundColor: 'action.hover', + }, + '&:hover > .MuiTreeItem-content .MuiTreeItem-label, &:focus > .MuiTreeItem-content .MuiTreeItem-label, &.MuiTreeItem-selected > .MuiTreeItem-content .MuiTreeItem-label, &.MuiTreeItem-selected > .MuiTreeItem-content .MuiTreeItem-label:hover, &.MuiTreeItem-selected:focus > .MuiTreeItem-content .MuiTreeItem-label': { + backgroundColor: 'transparent', + }, + }, }} label={( -
({ + backgroundColor: visibleNodeIds.indexOf(node.id) !== -1 + && alpha(theme.palette.highlights?.primary || theme.palette.action.selected, 0.35), + display: visibleNodeIds.indexOf(node.id) !== -1 && 'inline', })} > {node.label} -
+ )} > {Array.isArray(node.nodes) ? node.nodes.map((n) => renderTree(n)) : null} @@ -144,7 +168,7 @@ export class SidebarIndexTableOfContents extends Component { return ( } defaultExpandIcon={} defaultEndIcon={null} @@ -159,7 +183,6 @@ export class SidebarIndexTableOfContents extends Component { } SidebarIndexTableOfContents.propTypes = { - classes: PropTypes.objectOf(PropTypes.string).isRequired, containerRef: PropTypes.oneOfType([ PropTypes.func, PropTypes.shape({ current: PropTypes.instanceOf(Element) }), diff --git a/src/components/ThumbnailCanvasGrouping.js b/src/components/ThumbnailCanvasGrouping.js index 6e8902339c..1593cab5a4 100644 --- a/src/components/ThumbnailCanvasGrouping.js +++ b/src/components/ThumbnailCanvasGrouping.js @@ -1,9 +1,17 @@ import { PureComponent } from 'react'; import PropTypes from 'prop-types'; +import { styled } from '@mui/material/styles'; import classNames from 'classnames'; import IIIFThumbnail from '../containers/IIIFThumbnail'; import ns from '../config/css-ns'; +const StyledCanvas = styled('div')(({ theme }) => ({ + boxSizing: 'border-box', + color: theme.palette.common.white, + cursor: 'pointer', + display: 'inline-block', + whiteSpace: 'nowrap', +})); /** */ export class ThumbnailCanvasGrouping extends PureComponent { /** */ @@ -31,7 +39,7 @@ export class ThumbnailCanvasGrouping extends PureComponent { /** */ render() { const { - index, style, data, classes, currentCanvasId, + index, style, data, currentCanvasId, } = this.props; const { canvasGroupings, position, height, @@ -52,24 +60,25 @@ export class ThumbnailCanvasGrouping extends PureComponent { role="gridcell" aria-colindex={index + 1} > -
({ + '&:hover': { + outline: `9px solid ${theme.palette.action.hover}`, + outlineOffset: '-2px', + }, height: (position === 'far-right') ? 'auto' : `${height - SPACING}px`, + outline: currentGroupings.map(canvas => canvas.id).includes(currentCanvasId) ? `2px solid ${theme.palette.primary.main}` : 0, + outlineOffset: currentGroupings.map(canvas => canvas.id).includes(currentCanvasId) && '3px', width: (position === 'far-bottom') ? 'auto' : `${style.width}px`, - }} + })} className={classNames( ns(['thumbnail-nav-canvas', `thumbnail-nav-canvas-${index}`, this.currentCanvasClass(currentGroupings.map(canvas => canvas.index))]), - classes.canvas, - { - [classes.currentCanvas]: currentGroupings - .map(canvas => canvas.id).includes(currentCanvasId), - }, )} > {currentGroupings.map((canvas, i) => ( @@ -81,7 +90,7 @@ export class ThumbnailCanvasGrouping extends PureComponent { variant="inside" /> ))} -
+
); } diff --git a/src/components/Window.js b/src/components/Window.js index ba0e403c55..8eea3952ce 100644 --- a/src/components/Window.js +++ b/src/components/Window.js @@ -1,5 +1,6 @@ import { Component } from 'react'; import PropTypes from 'prop-types'; +import { styled } from '@mui/material/styles'; import cn from 'classnames'; import Paper from '@mui/material/Paper'; import { MosaicWindowContext } from 'react-mosaic-component/lib/contextTypes'; @@ -12,6 +13,41 @@ import ErrorContent from '../containers/ErrorContent'; import IIIFAuthentication from '../containers/IIIFAuthentication'; import { PluginHook } from './PluginHook'; +const StyledMiddle = styled('div')(() => ({ + display: 'flex', + flex: '1', + flexDirection: 'row', + minHeight: 0, +})); + +const StyledMiddleLeft = styled('div')(() => ({ + display: 'flex', + flex: '1', + flexDirection: 'column', + minHeight: 0, +})); + +const StyledPrimaryWindow = styled('div')(() => ({ + display: 'flex', + flex: '1', + height: '300px', + minHeight: 0, + position: 'relative', +})); + +const StyledCompanionAreaBottom = styled('div')(() => ({ + display: 'flex', + flex: '0', + flexBasis: 'auto', + minHeight: 0, +})); + +const StyledCompanionAreaRight = styled('div')(() => ({ + display: 'flex', + flex: '0 1 auto', + minHeight: 0, +})); + /** * Represents a Window in the mirador workspace * @param {object} window @@ -62,7 +98,7 @@ export class Window extends Component { render() { const { focusWindow, label, isFetching, maximized, sideBarOpen, - view, windowId, classes, t, + view, windowId, t, manifestError, } = this.props; @@ -82,36 +118,44 @@ export class Window extends Component { component="section" elevation={1} id={windowId} - className={ - cn( - classes.window, - ns('window'), - maximized ? classes.maximized : null, - ) -} + sx={{ + backgroundColor: 'shades?.dark', + borderRadius: 0, + display: 'flex', + flexDirection: 'column', + height: '100%', + left: maximized && 0, + minHeight: 0, + overflow: 'hidden', + position: maximized && 'absolute', + top: maximized && 0, + width: '100%', + zIndex: maximized && 'modal' - 1, + }} + className={cn(ns('window'))} aria-label={t('window', { label })} > {this.wrappedTopBar()} { manifestError && } -
-
-
+ + + -
-
+ + -
-
-
+ + + -
-
+ + @@ -122,7 +166,6 @@ export class Window extends Component { Window.contextType = MosaicWindowContext; Window.propTypes = { - classes: PropTypes.objectOf(PropTypes.string), focusWindow: PropTypes.func, isFetching: PropTypes.bool, label: PropTypes.string, @@ -137,7 +180,6 @@ Window.propTypes = { }; Window.defaultProps = { - classes: {}, focusWindow: () => {}, isFetching: false, label: null, diff --git a/src/components/WorkspaceAdd.js b/src/components/WorkspaceAdd.js index f7c5eafda6..7e06c68b10 100644 --- a/src/components/WorkspaceAdd.js +++ b/src/components/WorkspaceAdd.js @@ -1,5 +1,6 @@ import { createRef, Component } from 'react'; import PropTypes from 'prop-types'; +import { styled } from '@mui/material/styles'; import classNames from 'classnames'; import AddIcon from '@mui/icons-material/AddSharp'; import ExpandMoreIcon from '@mui/icons-material/ExpandMoreSharp'; @@ -19,6 +20,24 @@ import MiradorMenuButton from '../containers/MiradorMenuButton'; import { IIIFDropTarget } from './IIIFDropTarget'; import { PluginHook } from './PluginHook'; +const StyledWorkspaceAdd = styled('div')(() => ({ + boxSizing: 'border-box', + height: '100%', + overflowX: 'hidden', + overflowY: 'auto', + paddingTop: 68, + // injection order matters + // eslint-disable-next-line sort-keys + '@media (min-width: 600px)': { + paddingLeft: 68, + paddingTop: 0, + }, +})); + +const StyledMiradorMenuButton = styled(MiradorMenuButton)(() => ({ + marginLeft: -12, + marginRight: 20, +})); /** * An area for managing manifests and adding them to workspace * @memberof Workspace @@ -76,7 +95,7 @@ export class WorkspaceAdd extends Component { */ render() { const { - catalog, setWorkspaceAddVisibility, t, classes, + catalog, setWorkspaceAddVisibility, t, } = this.props; const { addResourcesOpen } = this.state; @@ -92,7 +111,7 @@ export class WorkspaceAdd extends Component { return ( -
+ {catalog.length < 1 ? ( ) : ( - + {t('miradorResources')} @@ -126,7 +145,12 @@ export class WorkspaceAdd extends Component { (this.setAddResourcesVisibility(true))} > @@ -135,10 +159,16 @@ export class WorkspaceAdd extends Component { ({ + '&.MuiDrawer-paper': { + borderTop: '0', + left: '0', + [theme.breakpoints.up('sm')]: { + left: '65px', + }, + }, + display: !addResourcesOpen && 'none', })} - classes={{ paper: classes.paper }} variant="persistent" anchor="bottom" open={addResourcesOpen} @@ -149,18 +179,29 @@ export class WorkspaceAdd extends Component { }} > ({ + left: '0', + marginTop: 48, + paddingBottom: theme.spacing(2), + paddingLeft: theme.spacing(2), + paddingRight: theme.spacing(2), + [theme.breakpoints.up('sm')]: { + paddingLeft: theme.spacing(3), + paddingRight: theme.spacing(3), + }, + paddingTop: theme.spacing(2), + right: '0', + })} > (this.setAddResourcesVisibility(false))}> - - - + + {t('addResource')} @@ -172,7 +213,7 @@ export class WorkspaceAdd extends Component { /> -
+ ); } @@ -184,7 +225,6 @@ WorkspaceAdd.propTypes = { manifestId: PropTypes.string.isRequired, provider: PropTypes.string, })), - classes: PropTypes.objectOf(PropTypes.string), setWorkspaceAddVisibility: PropTypes.func.isRequired, t: PropTypes.func, }; @@ -192,6 +232,5 @@ WorkspaceAdd.propTypes = { WorkspaceAdd.defaultProps = { addResource: () => {}, catalog: [], - classes: {}, t: key => key, }; diff --git a/src/components/WorkspaceSelectionDialog.js b/src/components/WorkspaceSelectionDialog.js index 44b014f94d..b9c90629c6 100644 --- a/src/components/WorkspaceSelectionDialog.js +++ b/src/components/WorkspaceSelectionDialog.js @@ -9,10 +9,15 @@ import { Typography, } from '@mui/material'; import PropTypes from 'prop-types'; +import { styled } from '@mui/material/styles'; import WorkspaceTypeElasticIcon from './icons/WorkspaceTypeElasticIcon'; import WorkspaceTypeMosaicIcon from './icons/WorkspaceTypeMosaicIcon'; import ScrollIndicatedDialogContent from '../containers/ScrollIndicatedDialogContent'; +const StyledDetails = styled('div')(() => ({ + display: 'flex', + flexDirection: 'column', +})); /** */ export class WorkspaceSelectionDialog extends Component { @@ -42,7 +47,7 @@ export class WorkspaceSelectionDialog extends Component { */ render() { const { - classes, container, handleClose, open, children, t, workspaceType, + container, handleClose, open, children, t, workspaceType, } = this.props; return ( {children} this.handleWorkspaceTypeChange('elastic')} selected={workspaceType === 'elastic'} value="elastic" > - + -
+ - {t('elastic')} + {t('elastic')} {t('elasticDescription')} -
+ this.handleWorkspaceTypeChange('mosaic')} selected={workspaceType === 'mosaic'} value="mosaic" > - + -
+ - {t('mosaic')} + {t('mosaic')} {t('mosaicDescription')} -
+ @@ -115,7 +174,6 @@ export class WorkspaceSelectionDialog extends Component { WorkspaceSelectionDialog.propTypes = { children: PropTypes.node, - classes: PropTypes.objectOf(PropTypes.string).isRequired, container: PropTypes.object, // eslint-disable-line react/forbid-prop-types handleClose: PropTypes.func.isRequired, open: PropTypes.bool, diff --git a/src/containers/SidebarIndexTableOfContents.js b/src/containers/SidebarIndexTableOfContents.js index 12f282c001..870f0c4087 100644 --- a/src/containers/SidebarIndexTableOfContents.js +++ b/src/containers/SidebarIndexTableOfContents.js @@ -1,8 +1,6 @@ import { compose } from 'redux'; import { connect } from 'react-redux'; import { withTranslation } from 'react-i18next'; -import { alpha } from '@mui/material/styles'; -import withStyles from '@mui/styles/withStyles'; import { withPlugins } from '../extend/withPlugins'; import { SidebarIndexTableOfContents } from '../components/SidebarIndexTableOfContents'; import { @@ -34,45 +32,7 @@ const mapDispatchToProps = (dispatch, { id, windowId }) => ({ toggleNode: nodeId => dispatch(actions.toggleNode(windowId, id, nodeId)), }); -/** - * Styles for withStyles HOC - */ -const styles = theme => ({ - content: { - alignItems: 'flex-start', - borderLeft: '1px solid transparent', - padding: '8px 16px 8px 0', - width: 'auto', - }, - group: { - borderLeft: `1px solid ${theme.palette.grey[300]}`, - }, - label: { - paddingLeft: 0, - }, // needed for pseudo $label class - root: { - flexGrow: 1, - }, - selected: {}, // needed for pseudo $selected class - treeItemRoot: { - '&:focus > $content': { - backgroundColor: theme.palette.action.selected, - }, - '&:hover > $content': { - backgroundColor: theme.palette.action.hover, - }, - '&:hover >$content $label, &:focus > $content $label, &$selected > $content $label, &$selected > $content $label:hover, &$selected:focus > $content $label': { - backgroundColor: 'transparent', - }, - }, - visibleNode: { - backgroundColor: alpha(theme.palette.highlights?.primary || theme.palette.action.selected, 0.35), - display: 'inline', - }, -}); - const enhance = compose( - withStyles(styles), withTranslation(), connect(mapStateToProps, mapDispatchToProps), withPlugins('SidebarIndexTableOfContents'), diff --git a/src/containers/ThumbnailCanvasGrouping.js b/src/containers/ThumbnailCanvasGrouping.js index ed9c5addc0..548c941ba9 100644 --- a/src/containers/ThumbnailCanvasGrouping.js +++ b/src/containers/ThumbnailCanvasGrouping.js @@ -1,7 +1,6 @@ import { compose } from 'redux'; import { connect } from 'react-redux'; import { withTranslation } from 'react-i18next'; -import withStyles from '@mui/styles/withStyles'; import { withPlugins } from '../extend/withPlugins'; import * as actions from '../state/actions'; import { getCurrentCanvas } from '../state/selectors'; @@ -25,33 +24,8 @@ const mapStateToProps = (state, { data }) => ({ currentCanvasId: (getCurrentCanvas(state, { windowId: data.windowId }) || {}).id, }); -/** - * Styles for withStyles HOC - */ -const styles = theme => ({ - canvas: { - '&$currentCanvas': { - outline: `2px solid ${theme.palette.primary.main}`, - outlineOffset: '3px', - }, - '&:hover': { - outline: `9px solid ${theme.palette.action.hover}`, - outlineOffset: '-2px', - }, - boxSizing: 'border-box', - color: theme.palette.common.white, - cursor: 'pointer', - display: 'inline-block', - outline: 0, - whiteSpace: 'nowrap', - }, - currentCanvas: { - }, -}); - const enhance = compose( withTranslation(), - withStyles(styles), connect(mapStateToProps, mapDispatchToProps), withPlugins('ThumbnailCanvasGrouping'), ); diff --git a/src/containers/Window.js b/src/containers/Window.js index 1304a47e18..36cd4e14e1 100644 --- a/src/containers/Window.js +++ b/src/containers/Window.js @@ -1,6 +1,5 @@ import { compose } from 'redux'; import { connect } from 'react-redux'; -import withStyles from '@mui/styles/withStyles'; import { withTranslation } from 'react-i18next'; import { withPlugins } from '../extend/withPlugins'; import * as actions from '../state/actions'; @@ -36,70 +35,8 @@ const mapDispatchToProps = (dispatch, { windowId }) => ({ focusWindow: () => dispatch(actions.focusWindow(windowId)), }); -/** - * @param theme - */ -const styles = theme => ({ - companionAreaBottom: { - display: 'flex', - flex: '0', - flexBasis: 'auto', - minHeight: 0, - }, - companionAreaRight: { - display: 'flex', - flex: '0 1 auto', - minHeight: 0, - }, - maximized: {}, - middle: { - display: 'flex', - flex: '1', - flexDirection: 'row', - minHeight: 0, - }, - middleLeft: { - display: 'flex', - flex: '1', - flexDirection: 'column', - minHeight: 0, - }, - primaryWindow: { - display: 'flex', - flex: '1', - height: '300px', - minHeight: 0, - position: 'relative', - }, - thumbnailArea: { - backgroundColor: theme.palette.shades?.dark, - }, - thumbnailAreaBottom: { - }, - thumbnailAreaRight: { - minWidth: 100, - }, - window: { - '&$maximized': { - left: 0, - position: 'absolute', - top: 0, - zIndex: theme.zIndex.modal - 1, - }, - backgroundColor: theme.palette.shades?.dark, - borderRadius: 0, - display: 'flex', - flexDirection: 'column', - height: '100%', - minHeight: 0, - overflow: 'hidden', - width: '100%', - }, -}); - const enhance = compose( withTranslation(), - withStyles(styles), connect(mapStateToProps, mapDispatchToProps), withPlugins('Window'), ); diff --git a/src/containers/WorkspaceAdd.js b/src/containers/WorkspaceAdd.js index d52c8958a8..0c0883945d 100644 --- a/src/containers/WorkspaceAdd.js +++ b/src/containers/WorkspaceAdd.js @@ -1,7 +1,6 @@ import { compose } from 'redux'; import { connect } from 'react-redux'; import { withTranslation } from 'react-i18next'; -import withStyles from '@mui/styles/withStyles'; import { withPlugins } from '../extend/withPlugins'; import * as actions from '../state/actions'; import { WorkspaceAdd } from '../components/WorkspaceAdd'; @@ -24,73 +23,8 @@ const mapDispatchToProps = { setWorkspaceAddVisibility: actions.setWorkspaceAddVisibility, }; -/** - * - * @param theme - * @returns {{typographyBody: {flexGrow: number, fontSize: string}, - * form: {paddingBottom: number, paddingTop: number, marginTop: number}, - * fab: {bottom: number, position: string, right: number}, - * menuButton: {marginRight: number, marginLeft: number}}} - */ -const styles = theme => ({ - displayNone: { - display: 'none', - }, - fab: { - bottom: theme.spacing(2), - position: 'absolute', - right: theme.spacing(2), - }, - form: { - left: '0', - marginTop: 48, - paddingBottom: theme.spacing(2), - paddingLeft: theme.spacing(2), - paddingRight: theme.spacing(2), - [theme.breakpoints.up('sm')]: { - paddingLeft: theme.spacing(3), - paddingRight: theme.spacing(3), - }, - paddingTop: theme.spacing(2), - right: '0', - }, - list: { - margin: '16px', - }, - menuButton: { - marginLeft: -12, - marginRight: 20, - }, - paper: { - borderTop: '0', - left: '0', - [theme.breakpoints.up('sm')]: { - left: '65px', - }, - }, - typographyBody: { - flexGrow: 1, - }, - workspaceAdd: { - boxSizing: 'border-box', - height: '100%', - overflowX: 'hidden', - overflowY: 'auto', - paddingTop: 68, - }, - // injection order matters - // eslint-disable-next-line sort-keys - '@media (min-width: 600px)': { - workspaceAdd: { - paddingLeft: 68, - paddingTop: 0, - }, - }, -}); - const enhance = compose( withTranslation(), - withStyles(styles), connect(mapStateToProps, mapDispatchToProps), withPlugins('WorkspaceAdd'), ); diff --git a/src/containers/WorkspaceSelectionDialog.js b/src/containers/WorkspaceSelectionDialog.js index a5974e6501..3305e53216 100644 --- a/src/containers/WorkspaceSelectionDialog.js +++ b/src/containers/WorkspaceSelectionDialog.js @@ -1,7 +1,6 @@ import { compose } from 'redux'; import { connect } from 'react-redux'; import { withTranslation } from 'react-i18next'; -import withStyles from '@mui/styles/withStyles'; import { withPlugins } from '../extend/withPlugins'; import { WorkspaceSelectionDialog } from '../components/WorkspaceSelectionDialog'; import * as actions from '../state/actions'; @@ -23,60 +22,8 @@ const mapDispatchToProps = { */ const mapStateToProps = state => ({ workspaceType: getWorkspaceType(state) }); -/** */ -const styles = theme => ({ - card: { - backgroundColor: 'transparent', - borderRadius: '0', - boxShadow: '0 0 transparent', - display: 'flex', - }, - content: { - flex: '1 0 auto', - }, - details: { - display: 'flex', - flexDirection: 'column', - }, - headline: { - paddingBottom: '6px', - }, - list: { - '&active': { - outline: 'none', - }, - '&focus': { - outline: 'none', - }, - outline: 'none', - }, - media: { - flex: '0 0 120px', - height: '90px', - }, - menuItem: { - height: 'auto', - overflow: 'auto', - whiteSpace: 'inherit', - }, - root: { - '&:last-child': { - paddingBottom: '12px', - }, - paddingBottom: 0, - paddingTop: 0, - textAlign: 'left', - }, - svgIcon: { - flexShrink: 0, - height: '90px', - width: '120px', - }, -}); - const enhance = compose( withTranslation(), - withStyles(styles), connect(mapStateToProps, mapDispatchToProps), withPlugins('WorkspaceSelectionDialog'), ); From c6936cc5c983294149efe27e0c1434b9f67f508b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Gerd=20M=C3=BCller?= Date: Wed, 20 Sep 2023 10:00:28 +0200 Subject: [PATCH 028/164] Migrate components to MUI v5 with sx/styled API --- src/components/CanvasLayers.js | 88 ++++++++++---- src/components/CompanionWindow.js | 111 +++++++++++++----- src/components/IIIFThumbnail.js | 67 +++++++++-- src/components/SearchHit.js | 53 ++++++--- .../WorkspaceControlPanelButtons.js | 1 - src/containers/CanvasLayers.js | 74 ------------ src/containers/CompanionWindow.js | 87 -------------- src/containers/IIIFThumbnail.js | 45 ------- src/containers/SearchHit.js | 53 --------- 9 files changed, 240 insertions(+), 339 deletions(-) diff --git a/src/components/CanvasLayers.js b/src/components/CanvasLayers.js index fad6c7b2f9..354d5abff1 100644 --- a/src/components/CanvasLayers.js +++ b/src/components/CanvasLayers.js @@ -1,6 +1,6 @@ import { Component } from 'react'; import PropTypes from 'prop-types'; -import clsx from 'clsx'; +import { styled } from '@mui/material/styles'; import { v4 as uuid } from 'uuid'; import Input from '@mui/material/Input'; import InputAdornment from '@mui/material/InputAdornment'; @@ -18,6 +18,19 @@ import { DragDropContext, Droppable, Draggable } from '@hello-pangea/dnd'; import MiradorMenuButton from '../containers/MiradorMenuButton'; import IIIFThumbnail from '../containers/IIIFThumbnail'; +const StyledDragHandle = styled('div')(({ theme }) => ({ + alignItems: 'center', + borderRight: `0.5px solid ${theme.palette.divider}`, + display: 'flex', + flex: 1, + flexDirection: 'row', + marginBottom: -1 * theme.spacing(2) + 0.5, + marginRight: theme.spacing(1), + marginTop: -1 * theme.spacing(2), + maxWidth: theme.spacing(3), + width: theme.spacing(3), +})); + /** */ const reorder = (list, startIndex, endIndex) => { const result = Array.from(list); @@ -116,7 +129,6 @@ export class CanvasLayers extends Component { /** @private */ renderLayer(resource, index) { const { - classes, layerMetadata, t, } = this.props; @@ -136,10 +148,12 @@ export class CanvasLayers extends Component { maxHeight={height} maxWidth={width} resource={resource} - classes={{ image: classes.image, root: classes.thumbnail }} + imageStyle /> @@ -158,10 +172,21 @@ export class CanvasLayers extends Component {
- + this.handleOpacityChange(resource.id, value)} @@ -187,7 +216,6 @@ export class CanvasLayers extends Component { /** @private */ renderDraggableLayer(resource, index) { const { - classes, t, } = this.props; @@ -198,20 +226,32 @@ export class CanvasLayers extends Component { ref={provided.innerRef} {...provided.draggableProps} component="li" - className={clsx( - classes.listItem, - { - [classes.dragging]: snapshot.isDragging, - }, - )} + sx={{ + alignItems: 'stretch', + backgroundColor: snapshot.isDragging && 'action.hover', + borderBottom: '0.5px solid', + borderBottomColor: 'divider', + cursor: 'pointer', + paddingBottom: 2, + paddingRight: 2, + paddingTop: 2, + }} disableGutters key={resource.id} > -
+ -
+ {this.renderLayer(resource, index)} )} @@ -222,7 +262,6 @@ export class CanvasLayers extends Component { /** */ render() { const { - classes, index, label, layers, @@ -233,7 +272,14 @@ export class CanvasLayers extends Component { return ( <> { totalSize > 1 && ( - + {t('annotationCanvasLabel', { context: `${index + 1}/${totalSize}`, label })} )} @@ -241,7 +287,9 @@ export class CanvasLayers extends Component { {(provided, snapshot) => ( @@ -262,7 +310,6 @@ export class CanvasLayers extends Component { CanvasLayers.propTypes = { canvasId: PropTypes.string.isRequired, - classes: PropTypes.objectOf(PropTypes.string), index: PropTypes.number.isRequired, label: PropTypes.string.isRequired, layerMetadata: PropTypes.objectOf(PropTypes.shape({ @@ -277,6 +324,5 @@ CanvasLayers.propTypes = { }; CanvasLayers.defaultProps = { - classes: {}, layerMetadata: undefined, }; diff --git a/src/components/CompanionWindow.js b/src/components/CompanionWindow.js index a04054005d..327130d4c3 100644 --- a/src/components/CompanionWindow.js +++ b/src/components/CompanionWindow.js @@ -1,5 +1,6 @@ import { Children, cloneElement, Component } from 'react'; import PropTypes from 'prop-types'; +import { styled } from '@mui/material/styles'; import CloseIcon from '@mui/icons-material/CloseSharp'; import OpenInNewIcon from '@mui/icons-material/OpenInNewSharp'; import MoveIcon from '@mui/icons-material/DragIndicatorSharp'; @@ -10,6 +11,31 @@ import { Rnd } from 'react-rnd'; import MiradorMenuButton from '../containers/MiradorMenuButton'; import ns from '../config/css-ns'; +const StyledRnd = styled(Rnd)(({ theme }) => ({ + display: 'flex', + flexDirection: 'column', + minHeight: 0, + position: 'relative', +})); + +const StyledPositionButton = styled(MiradorMenuButton)(({ theme }) => ({ + marginLeft: -16, + order: -100, + width: 24, +})); + +const StyledCloseButton = styled(MiradorMenuButton)(({ theme }) => ({ + order: 4, +})); + +const StyledTitleControls = styled('div')(({ theme }) => ({ + alignItems: 'center', + display: 'flex', + flexFlow: 'row wrap', + minHeight: 48, + order: 3, +})); + /** * CompanionWindow */ @@ -67,7 +93,7 @@ export class CompanionWindow extends Component { */ render() { const { - ariaLabel, classes, paperClassName, onCloseClick, updateCompanionWindow, isDisplayed, + ariaLabel, paperClassName, onCloseClick, updateCompanionWindow, isDisplayed, position, t, title, children, titleControls, size, defaultSidebarPanelWidth, defaultSidebarPanelHeight, } = this.props; @@ -88,18 +114,26 @@ export class CompanionWindow extends Component { return ( - - + {title} { @@ -137,48 +182,51 @@ export class CompanionWindow extends Component { <> { updateCompanionWindow && ( - { updateCompanionWindow({ position: position === 'bottom' ? 'right' : 'bottom' }); }} > - + ) } - - + ) } { titleControls && ( -
{titleControls} -
+ ) } {childrenWithAdditionalProps} - + ); } @@ -187,7 +235,6 @@ export class CompanionWindow extends Component { CompanionWindow.propTypes = { ariaLabel: PropTypes.string, children: PropTypes.node, - classes: PropTypes.objectOf(PropTypes.string).isRequired, defaultSidebarPanelHeight: PropTypes.number, defaultSidebarPanelWidth: PropTypes.number, direction: PropTypes.string.isRequired, diff --git a/src/components/IIIFThumbnail.js b/src/components/IIIFThumbnail.js index f36b6aeb4b..389b98e50e 100644 --- a/src/components/IIIFThumbnail.js +++ b/src/components/IIIFThumbnail.js @@ -2,11 +2,19 @@ import { Component, useMemo, useEffect, useState, } from 'react'; import PropTypes from 'prop-types'; +import { styled } from '@mui/material/styles'; import Typography from '@mui/material/Typography'; import { useInView } from 'react-intersection-observer'; -import classNames from 'classnames'; import getThumbnail from '../lib/ThumbnailFactory'; +const StyledRoot = styled('div')(() => ({ + +})); + +const StyledLabel = styled('div')(() => ({ + +})); + /** * A lazy-loaded image that uses IntersectionObserver to determine when to * try to load the image (or even calculate that the image url/height/width are) @@ -98,6 +106,10 @@ const LazyLoadedImage = ({ ); }; +const StyledLazyLoadedImage = styled(LazyLoadedImage)(() => ({ + +})); + LazyLoadedImage.propTypes = { maxHeight: PropTypes.number.isRequired, maxWidth: PropTypes.number.isRequired, @@ -143,9 +155,9 @@ export class IIIFThumbnail extends Component { render() { const { children, - classes, imagePlaceholder, labelled, + imageStyle, maxHeight, maxWidth, resource, @@ -156,8 +168,14 @@ export class IIIFThumbnail extends Component { } = this.props; return ( -
- + { labelled && ( -
- + + {this.label()} -
+ )} {children} -
+ ); } } IIIFThumbnail.propTypes = { children: PropTypes.node, - classes: PropTypes.objectOf(PropTypes.string), imagePlaceholder: PropTypes.string, + imageStyle: PropTypes.bool, label: PropTypes.string, labelled: PropTypes.bool, maxHeight: PropTypes.number, @@ -202,9 +247,9 @@ IIIFThumbnail.propTypes = { IIIFThumbnail.defaultProps = { children: null, - classes: {}, // Transparent "gray" imagePlaceholder: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mMMDQmtBwADgwF/Op8FmAAAAABJRU5ErkJggg==', + imageStyle: false, label: undefined, labelled: false, maxHeight: null, diff --git a/src/components/SearchHit.js b/src/components/SearchHit.js index 6efcb04746..bd03bc21e9 100644 --- a/src/components/SearchHit.js +++ b/src/components/SearchHit.js @@ -1,6 +1,5 @@ import { Component } from 'react'; import PropTypes from 'prop-types'; -import clsx from 'clsx'; import Button from '@mui/material/Button'; import ListItem from '@mui/material/ListItem'; import ListItemText from '@mui/material/ListItemText'; @@ -78,7 +77,6 @@ export class SearchHit extends Component { annotation, annotationLabel, canvasLabel, - classes, companionWindowId, containerRef, hit, @@ -103,23 +101,37 @@ export class SearchHit extends Component { scrollTo={windowSelected && !focused} > - - + + {canvasLabel} @@ -138,7 +150,20 @@ export class SearchHit extends Component { {' '} { truncated && !focused && ( - )} @@ -162,7 +187,6 @@ SearchHit.propTypes = { annotationLabel: PropTypes.string, announcer: PropTypes.func, canvasLabel: PropTypes.string, - classes: PropTypes.objectOf(PropTypes.string), companionWindowId: PropTypes.string, containerRef: PropTypes.oneOfType([ PropTypes.func, @@ -191,7 +215,6 @@ SearchHit.defaultProps = { annotationLabel: undefined, announcer: undefined, canvasLabel: undefined, - classes: {}, companionWindowId: undefined, containerRef: undefined, focused: false, diff --git a/src/components/WorkspaceControlPanelButtons.js b/src/components/WorkspaceControlPanelButtons.js index 6be2ad64fd..4d260dcb48 100644 --- a/src/components/WorkspaceControlPanelButtons.js +++ b/src/components/WorkspaceControlPanelButtons.js @@ -31,4 +31,3 @@ export class WorkspaceControlPanelButtons extends Component { ); } } - diff --git a/src/containers/CanvasLayers.js b/src/containers/CanvasLayers.js index 0340e1cf6c..1b5baf2ffb 100644 --- a/src/containers/CanvasLayers.js +++ b/src/containers/CanvasLayers.js @@ -1,7 +1,6 @@ import { compose } from 'redux'; import { connect } from 'react-redux'; import { withTranslation } from 'react-i18next'; -import withStyles from '@mui/styles/withStyles'; import * as actions from '../state/actions'; import { getCanvasLabel, @@ -26,81 +25,8 @@ const mapDispatchToProps = { updateLayers: actions.updateLayers, }; -/** For withStlyes */ -const styles = theme => ({ - dragging: {}, - dragHandle: { - alignItems: 'center', - borderRight: `0.5px solid ${theme.palette.divider}`, - display: 'flex', - flex: 1, - flexDirection: 'row', - marginBottom: -1 * theme.spacing(2) + 0.5, - marginRight: theme.spacing(1), - marginTop: -1 * theme.spacing(2), - maxWidth: theme.spacing(3), - width: theme.spacing(3), - }, - image: { - borderBottom: `1px solid ${theme.palette.divider}`, - }, - label: { - paddingLeft: theme.spacing(1), - }, - list: { - paddingTop: 0, - }, - listItem: { - '& $dragHandle': { - '&:hover': { - backgroundColor: theme.palette.action.hover, - }, - backgroundColor: theme.palette.shades?.light, - }, - '&$dragging': { - '& $dragHandle, & $dragHandle:hover': { - backgroundColor: theme.palette.action.selected, - }, - backgroundColor: theme.palette.action.hover, - }, - alignItems: 'stretch', - borderBottom: `0.5px solid ${theme.palette.divider}`, - cursor: 'pointer', - paddingBottom: theme.spacing(2), - paddingRight: theme.spacing(1), - paddingTop: theme.spacing(2), - }, - opacityIcon: { - marginRight: theme.spacing(0.5), - }, - opacityInput: { - ...theme.typography.caption, - '&::-webkit-outer-spin-button,&::-webkit-inner-spin-button': { - '-webkit-appearance': 'none', - margin: 0, - }, - '-moz-appearance': 'textfield', - textAlign: 'right', - width: '3ch', - }, - sectionHeading: { - paddingLeft: theme.spacing(2), - paddingRight: theme.spacing(1), - paddingTop: theme.spacing(2), - }, - slider: { - marginLeft: theme.spacing(2), - marginRight: theme.spacing(2), - maxWidth: 150, - }, - thumbnail: { - minWidth: 50, - }, -}); - const enhance = compose( withTranslation(), - withStyles(styles), connect(mapStateToProps, mapDispatchToProps), ); diff --git a/src/containers/CompanionWindow.js b/src/containers/CompanionWindow.js index 07cc893806..64a1806440 100644 --- a/src/containers/CompanionWindow.js +++ b/src/containers/CompanionWindow.js @@ -1,7 +1,6 @@ import { compose } from 'redux'; import { connect } from 'react-redux'; import { withTranslation } from 'react-i18next'; -import withStyles from '@mui/styles/withStyles'; import { withSize } from 'react-sizeme'; import { withPlugins } from '../extend/withPlugins'; import { withRef } from '../extend/withRef'; @@ -45,95 +44,9 @@ const mapDispatchToProps = (dispatch, { windowId, id }) => ({ ), }); -/** - * - * @param theme - * @returns {{closeButton: {top: number, position: string, right: number}, - * root: {overflowY: string, width: string}}} - */ -const styles = theme => ({ - closeButton: { - order: 4, - }, - 'companionWindow-bottom': { - borderTop: `0.5px solid ${theme.palette.divider}`, - }, - 'companionWindow-left': { - borderRight: `0.5px solid ${theme.palette.divider}`, - }, - 'companionWindow-right': { - borderLeft: `0.5px solid ${theme.palette.divider}`, - }, - companionWindowHeader: { - flexWrap: 'wrap', - }, - companionWindowTitleControls: { - flexGrow: 1, - order: 1000, - }, - companionWindowTitleControlsBottom: { - order: 'unset', - }, - content: { - overflowY: 'auto', - wordBreak: 'break-word', - }, - horizontal: { - }, - positionButton: { - marginLeft: -16, - order: -100, - width: 24, - }, - rnd: { - display: 'flex', - flexDirection: 'column', - minHeight: 0, - }, - root: { - boxShadow: 'none', - boxSizing: 'border-box', - display: 'flex', - flexDirection: 'column', - minHeight: 0, - }, - small: {}, - titleControls: { - alignItems: 'center', - display: 'flex', - flexFlow: 'row wrap', - minHeight: 48, - order: 3, - }, - toolbar: { - '&$small': { - '& $closeButton': { - order: 'unset', - }, - '& $titleControls': { - order: 'unset', - }, - }, - alignItems: 'flex-start', - background: theme.palette.shades?.light, - justifyContent: 'space-between', - minHeight: 'max-content', - paddingLeft: theme.spacing(2), - }, - vertical: { - }, - windowSideBarTitle: { - ...theme.typography.subtitle1, - alignSelf: 'center', - flexGrow: 1, - width: 160, - }, -}); - const enhance = compose( withRef(), withTranslation(), - withStyles(styles), withSize(), connect(mapStateToProps, mapDispatchToProps), withPlugins('CompanionWindow'), diff --git a/src/containers/IIIFThumbnail.js b/src/containers/IIIFThumbnail.js index 1f75c3a680..6631a8deb3 100644 --- a/src/containers/IIIFThumbnail.js +++ b/src/containers/IIIFThumbnail.js @@ -1,7 +1,6 @@ import { compose } from 'redux'; import { connect } from 'react-redux'; import { withTranslation } from 'react-i18next'; -import withStyles from '@mui/styles/withStyles'; import { withPlugins } from '../extend/withPlugins'; import { getConfig, @@ -16,51 +15,7 @@ const mapStateToProps = (state) => ({ thumbnailsConfig: getConfig(state).thumbnails, }); -/** - * Styles for withStyles HOC - */ -const styles = theme => ({ - caption: { - lineHeight: '1.5em', - wordBreak: 'break-word', - }, - image: {}, - insideCaption: { - color: '#ffffff', - lineClamp: '1', - whiteSpace: 'nowrap', - }, - insideLabel: { - background: 'linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.3) 70%, rgba(0,0,0,0) 100%)', - bottom: '5px', - boxSizing: 'border-box', - left: '0px', - padding: '4px', - position: 'absolute', - width: '100%', - }, - insideRoot: { - display: 'inline-block', - height: 'inherit', - position: 'relative', - }, - label: { - overflow: 'hidden', - textOverflow: 'ellipsis', - }, - outsideCaption: { - boxOrient: 'vertical', - display: '-webkit-box', - lineClamp: '2', - maxHeight: '3em', - }, - outsideLabel: {}, - outsideRoot: {}, - root: {}, -}); - const enhance = compose( - withStyles(styles), withTranslation(), connect(mapStateToProps), withPlugins('IIIFThumbnail'), diff --git a/src/containers/SearchHit.js b/src/containers/SearchHit.js index 33ad77ce48..7e67df152f 100644 --- a/src/containers/SearchHit.js +++ b/src/containers/SearchHit.js @@ -1,7 +1,6 @@ import { compose } from 'redux'; import { connect } from 'react-redux'; import { withTranslation } from 'react-i18next'; -import withStyles from '@mui/styles/withStyles'; import { withPlugins } from '../extend/withPlugins'; import { SearchHit } from '../components/SearchHit'; import * as actions from '../state/actions'; @@ -70,60 +69,8 @@ const mapDispatchToProps = (dispatch, { windowId }) => ({ ), }); -/** */ -const styles = theme => ({ - adjacent: {}, - focused: {}, - hitCounter: { - ...theme.typography.subtitle2, - backgroundColor: theme.palette.hitCounter?.default, - height: 30, - marginRight: theme.spacing(1), - verticalAlign: 'inherit', - }, - inlineButton: { - '& span': { - lineHeight: '1.5em', - }, - margin: 0, - padding: 0, - textTransform: 'none', - }, - listItem: { - '&$adjacent': { - '& $hitCounter': { - backgroundColor: theme.palette.highlights?.secondary, - }, - '&$windowSelected': { - '& $hitCounter': { - backgroundColor: theme.palette.highlights?.primary, - }, - }, - }, - '&$windowSelected': { - '& $hitCounter': { - backgroundColor: theme.palette.highlights?.primary, - }, - '&$focused': { - '&:hover': { - backgroundColor: 'inherit', - }, - backgroundColor: 'inherit', - }, - }, - borderBottom: `0.5px solid ${theme.palette.divider}`, - paddingRight: 8, - }, - selected: {}, - subtitle: { - marginBottom: theme.spacing(1.5), - }, - windowSelected: {}, -}); - const enhance = compose( connect(mapStateToProps, mapDispatchToProps), - withStyles(styles), withTranslation(), withPlugins('SearchHit'), ); From 160b26d6d14a085c7946f55d7a541f9a0d1b25c8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Gerd=20M=C3=BCller?= Date: Wed, 20 Sep 2023 15:08:01 +0200 Subject: [PATCH 029/164] Fix padding/margin theme values --- src/components/AttributionPanel.js | 36 +++++++++---------- src/components/CollapsibleSection.js | 2 +- src/components/CollectionDialog.js | 8 ++--- src/components/CompanionArea.js | 4 +-- src/components/CompanionWindow.js | 13 ++++--- src/components/ManifestListItem.js | 2 +- src/components/MiradorMenuButton.js | 14 +++++++- src/components/SearchHit.js | 2 +- src/components/SearchPanelControls.js | 6 ++-- src/components/ThumbnailCanvasGrouping.js | 1 - src/components/ViewerInfo.js | 2 +- src/components/WindowAuthenticationBar.js | 8 ++--- .../WindowCanvasNavigationControls.js | 6 ++-- src/components/WindowListButton.js | 4 +-- .../WindowSideBarAnnotationsPanel.js | 13 +++---- src/components/Workspace.js | 4 +-- src/components/WorkspaceAdd.js | 2 +- 17 files changed, 70 insertions(+), 57 deletions(-) diff --git a/src/components/AttributionPanel.js b/src/components/AttributionPanel.js index e74a7940e2..d44bd37a8e 100644 --- a/src/components/AttributionPanel.js +++ b/src/components/AttributionPanel.js @@ -10,23 +10,21 @@ import { LabelValueMetadata } from './LabelValueMetadata'; import ns from '../config/css-ns'; import { PluginHook } from './PluginHook'; -/** - * - * @param theme - * @returns {label: {paddingLeft: number}}} - */ -const Logo = styled(Img)(() => ({ +const StyledLogo = styled(Img)(() => ({ maxWidth: '100%', })); -const Placeholder = styled(Skeleton)(({ theme }) => ({ + +const StyledPlaceholder = styled(Skeleton)(({ theme }) => ({ backgroundColor: theme.palette.grey[300], })); -const Section = styled('div')(({ theme }) => ({ - borderBottom: `.5px solid ${theme.palette.section_divider}`, - paddingBottom: theme.spacing(1), - paddingLeft: theme.spacing(2), - paddingRight: theme.spacing(1), - paddingTop: theme.spacing(2), + +const StyledSection = styled('div')(() => ({ + borderBottom: '.5px solid', + borderBottomColor: 'section_divider', + paddingBottom: 1, + paddingLeft: 2, + paddingRight: 1, + paddingTop: 2, })); /** @@ -54,7 +52,7 @@ export class AttributionPanel extends Component { windowId={windowId} id={id} > -
+ { requiredStatement && ( )} @@ -72,19 +70,19 @@ export class AttributionPanel extends Component { ) } -
+ { manifestLogo && ( -
- + + } /> -
+ )} diff --git a/src/components/CollapsibleSection.js b/src/components/CollapsibleSection.js index d892eaaae7..5e47eccf56 100644 --- a/src/components/CollapsibleSection.js +++ b/src/components/CollapsibleSection.js @@ -6,7 +6,7 @@ import KeyboardArrowDown from '@mui/icons-material/KeyboardArrowDownSharp'; import KeyboardArrowUp from '@mui/icons-material/KeyboardArrowUpSharp'; import MiradorMenuButton from '../containers/MiradorMenuButton'; -const Container = styled('div')(({ theme }) => ({ +const Container = styled('div')(() => ({ cursor: 'pointer', // This style will be applied to Typography display: 'flex', justifyContent: 'space-between', diff --git a/src/components/CollectionDialog.js b/src/components/CollectionDialog.js index 655288862e..7c52b8ff33 100644 --- a/src/components/CollectionDialog.js +++ b/src/components/CollectionDialog.js @@ -20,16 +20,16 @@ import CollapsibleSection from '../containers/CollapsibleSection'; import ScrollIndicatedDialogContent from '../containers/ScrollIndicatedDialogContent'; import ManifestInfo from '../containers/ManifestInfo'; -const StyledScrollIndicatedDialogContent = styled(ScrollIndicatedDialogContent)(({ theme }) => ({ - padding: theme.spacing(1), +const StyledScrollIndicatedDialogContent = styled(ScrollIndicatedDialogContent)(() => ({ + padding: 1, })); const StyledCollectionMetadata = styled('div')(() => ({ - padding: '16px', + padding: 2, })); const StyledCollectionFilter = styled('div')(() => ({ - padding: '16px', + padding: 2, paddingTop: 0, })); diff --git a/src/components/CompanionArea.js b/src/components/CompanionArea.js index c4f9f9b2cf..1bcaf805d7 100644 --- a/src/components/CompanionArea.js +++ b/src/components/CompanionArea.js @@ -32,8 +32,8 @@ const StyledToggle = styled('div')(({ theme }) => ({ })); const StyledToggleButton = styled(MiradorMenuButton)({ - marginBottom: 12, - marginTop: 12, + marginBottom: 1.5, + marginTop: 1.5, padding: 0, }); diff --git a/src/components/CompanionWindow.js b/src/components/CompanionWindow.js index 327130d4c3..dd728168c5 100644 --- a/src/components/CompanionWindow.js +++ b/src/components/CompanionWindow.js @@ -11,24 +11,24 @@ import { Rnd } from 'react-rnd'; import MiradorMenuButton from '../containers/MiradorMenuButton'; import ns from '../config/css-ns'; -const StyledRnd = styled(Rnd)(({ theme }) => ({ +const StyledRnd = styled(Rnd)(() => ({ display: 'flex', flexDirection: 'column', minHeight: 0, position: 'relative', })); -const StyledPositionButton = styled(MiradorMenuButton)(({ theme }) => ({ +const StyledPositionButton = styled(MiradorMenuButton)(() => ({ marginLeft: -16, order: -100, width: 24, })); -const StyledCloseButton = styled(MiradorMenuButton)(({ theme }) => ({ +const StyledCloseButton = styled(MiradorMenuButton)(() => ({ order: 4, })); -const StyledTitleControls = styled('div')(({ theme }) => ({ +const StyledTitleControls = styled('div')(() => ({ alignItems: 'center', display: 'flex', flexFlow: 'row wrap', @@ -123,9 +123,12 @@ export class CompanionWindow extends Component { borderTopColor: position === 'bottom' && 'divider', boxShadow: 'none', boxSizing: 'border-box', - display: isDisplayed ? null : 'flex', + display: 'flex', flexDirection: 'column', minHeight: 0, + }} + style={{ + display: isDisplayed ? null : 'none', order: position === 'left' ? -1 : null, }} className={[ns(`companion-window-${position}`), paperClassName].join(' ')} diff --git a/src/components/ManifestListItem.js b/src/components/ManifestListItem.js index b83b198307..96594ba15a 100644 --- a/src/components/ManifestListItem.js +++ b/src/components/ManifestListItem.js @@ -19,7 +19,7 @@ const StyledLogo = styled(Img)(({ theme }) => ({ height: '2.5rem', maxWidth: '100%', objectFit: 'contain', - paddingRight: 8, + paddingRight: 1, })); /** diff --git a/src/components/MiradorMenuButton.js b/src/components/MiradorMenuButton.js index cfb967ecac..aac9935bfd 100644 --- a/src/components/MiradorMenuButton.js +++ b/src/components/MiradorMenuButton.js @@ -23,7 +23,19 @@ export function MiradorMenuButton(props) { const button = ( {badge - ? {children} + ? ( + + {children} + + ) : children} ); diff --git a/src/components/SearchHit.js b/src/components/SearchHit.js index bd03bc21e9..064aa83203 100644 --- a/src/components/SearchHit.js +++ b/src/components/SearchHit.js @@ -110,7 +110,7 @@ export class SearchHit extends Component { }, borderBottom: '0.5px solid', borderBottomColor: 'divider', - paddingRight: 8, + paddingRight: 1, }} button={!selected} diff --git a/src/components/SearchPanelControls.js b/src/components/SearchPanelControls.js index 72ad3923ce..ef7864a9fe 100644 --- a/src/components/SearchPanelControls.js +++ b/src/components/SearchPanelControls.js @@ -11,9 +11,9 @@ import SearchIcon from '@mui/icons-material/SearchSharp'; import MiradorMenuButton from '../containers/MiradorMenuButton'; import SearchPanelNavigation from '../containers/SearchPanelNavigation'; -const StyledForm = styled('form')(({ theme }) => ({ - paddingBottom: theme.spacing(1), - paddingRight: theme.spacing(1.5), +const StyledForm = styled('form')(() => ({ + paddingBottom: 1, + paddingRight: 1.5, width: '100%', })); diff --git a/src/components/ThumbnailCanvasGrouping.js b/src/components/ThumbnailCanvasGrouping.js index 1593cab5a4..eeccbeb5db 100644 --- a/src/components/ThumbnailCanvasGrouping.js +++ b/src/components/ThumbnailCanvasGrouping.js @@ -97,7 +97,6 @@ export class ThumbnailCanvasGrouping extends PureComponent { } ThumbnailCanvasGrouping.propTypes = { - classes: PropTypes.objectOf(PropTypes.string).isRequired, currentCanvasId: PropTypes.string.isRequired, data: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types index: PropTypes.number.isRequired, diff --git a/src/components/ViewerInfo.js b/src/components/ViewerInfo.js index 3a0e3c3c49..9ebd856493 100644 --- a/src/components/ViewerInfo.js +++ b/src/components/ViewerInfo.js @@ -8,7 +8,7 @@ import ns from '../config/css-ns'; const StyledOsdInfo = styled('div')(() => ({ order: 2, overflow: 'hidden', - paddingBottom: 3, + paddingBottom: 0.5, textOverflow: 'ellipsis', unicodeBidi: 'plaintext', whiteSpace: 'nowrap', diff --git a/src/components/WindowAuthenticationBar.js b/src/components/WindowAuthenticationBar.js index 856aeeeaa6..642149615f 100644 --- a/src/components/WindowAuthenticationBar.js +++ b/src/components/WindowAuthenticationBar.js @@ -126,16 +126,16 @@ export class WindowAuthenticationBar extends Component { > - + ); diff --git a/src/components/PrimaryWindow.js b/src/components/PrimaryWindow.js index a608e62a21..4d6344b3ac 100644 --- a/src/components/PrimaryWindow.js +++ b/src/components/PrimaryWindow.js @@ -16,7 +16,7 @@ GalleryView.displayName = 'GalleryView'; SelectCollection.displayName = 'SelectCollection'; WindowViewer.displayName = 'WindowViewer'; -const PrimaryWindowContainer = styled('div')(() => ({ +const StyledPrimaryWindowContainer = styled('div')(() => ({ display: 'flex', flex: 1, position: 'relative', @@ -83,14 +83,14 @@ export class PrimaryWindow extends Component { isCollectionDialogVisible, windowId, children, } = this.props; return ( - + { isCollectionDialogVisible && } }> {children || this.renderViewer()} - + ); } } diff --git a/src/components/VideoViewer.js b/src/components/VideoViewer.js index 759fd06048..565cb0d855 100644 --- a/src/components/VideoViewer.js +++ b/src/components/VideoViewer.js @@ -2,13 +2,13 @@ import { Component, Fragment } from 'react'; import PropTypes from 'prop-types'; import { styled } from '@mui/material/styles'; -const Container = styled('div')(() => ({ +const StyledContainer = styled('div')(() => ({ alignItems: 'center', display: 'flex', width: '100%', })); -const Video = styled('video')(() => ({ +const StyledVideo = styled('video')(() => ({ maxHeight: '100%', width: '100%', })); @@ -22,8 +22,8 @@ export class VideoViewer extends Component { captions, videoOptions, videoResources, } = this.props; return ( - - - + + ); } /* eslint-enable jsx-a11y/media-has-caption */ diff --git a/src/components/WorkspaceAdd.js b/src/components/WorkspaceAdd.js index 29873d7cf0..2b028c8ae1 100644 --- a/src/components/WorkspaceAdd.js +++ b/src/components/WorkspaceAdd.js @@ -160,7 +160,7 @@ export class WorkspaceAdd extends Component { ({ - '&.MuiDrawer-paper': { + '.MuiDrawer-paper': { borderTop: '0', left: '0', [theme.breakpoints.up('sm')]: { @@ -181,19 +181,15 @@ export class WorkspaceAdd extends Component { }} > ({ + sx={{ left: '0', - marginTop: 48, - paddingBottom: theme.spacing(2), - paddingLeft: theme.spacing(2), - paddingRight: theme.spacing(2), - [theme.breakpoints.up('sm')]: { - paddingLeft: theme.spacing(3), - paddingRight: theme.spacing(3), - }, - paddingTop: theme.spacing(2), + marginTop: 6, + paddingBottom: 2, + paddingLeft: { sm: 3, xs: 2 }, + paddingRight: { sm: 3, xs: 2 }, + paddingTop: 2, right: '0', - })} + }} > (this.setAddResourcesVisibility(false))}> diff --git a/src/components/WorkspaceControlPanel.js b/src/components/WorkspaceControlPanel.js index e9194b1cec..efbd032d6b 100644 --- a/src/components/WorkspaceControlPanel.js +++ b/src/components/WorkspaceControlPanel.js @@ -9,7 +9,7 @@ import WorkspaceControlPanelButtons from '../containers/WorkspaceControlPanelBut import Branding from '../containers/Branding'; import ns from '../config/css-ns'; -const WorkspaceButtons = styled('div')(({ theme }) => ({ +const StyledWorkspaceButtons = styled('div')(({ theme }) => ({ [theme.breakpoints.up('sm')]: { display: 'flex', flexDirection: 'column', @@ -76,9 +76,9 @@ export class WorkspaceControlPanel extends Component { })} > - + - + diff --git a/src/components/ZoomControls.js b/src/components/ZoomControls.js index 7dd6ba179e..2ac82b44f2 100644 --- a/src/components/ZoomControls.js +++ b/src/components/ZoomControls.js @@ -7,7 +7,7 @@ import Box from '@mui/material/Box'; import RestoreZoomIcon from './icons/RestoreZoomIcon'; import MiradorMenuButton from '../containers/MiradorMenuButton'; -const ZoomControlsWrapper = styled('div')({ +const StyledZoomControlsWrapper = styled('div')({ display: 'flex', flexDirection: 'row', justifyContent: 'center', @@ -71,7 +71,7 @@ export class ZoomControls extends Component { ); } return ( - + @@ -82,7 +82,7 @@ export class ZoomControls extends Component { {displayDivider && } - + ); } } From 7d6419165637c61a1e2f42bdc24a72d9e6bc6af2 Mon Sep 17 00:00:00 2001 From: marloelilongley Date: Fri, 27 Oct 2023 16:39:28 -0400 Subject: [PATCH 035/164] Remove test reference to classes for SanitizedHtml component --- __tests__/src/components/SanitizedHtml.test.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/__tests__/src/components/SanitizedHtml.test.js b/__tests__/src/components/SanitizedHtml.test.js index 37c09f96c1..382b90570e 100644 --- a/__tests__/src/components/SanitizedHtml.test.js +++ b/__tests__/src/components/SanitizedHtml.test.js @@ -6,7 +6,6 @@ describe('SanitizedHtml', () => { render( , @@ -18,7 +17,6 @@ describe('SanitizedHtml', () => { }); it('should pass correct class name to root element', () => { - expect(screen.getByTestId('subject')).toHaveClass('root'); expect(screen.getByTestId('subject')).toHaveClass('mirador-third-party-html'); }); From 3b0f4414029c5161307a6d54cb0cf9a58fe9a4c8 Mon Sep 17 00:00:00 2001 From: marloelilongley Date: Fri, 27 Oct 2023 16:40:39 -0400 Subject: [PATCH 036/164] Remove test reference to classes for CompanionArea component --- __tests__/src/components/CompanionArea.test.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/__tests__/src/components/CompanionArea.test.js b/__tests__/src/components/CompanionArea.test.js index 404359b6af..53e7bcdb0a 100644 --- a/__tests__/src/components/CompanionArea.test.js +++ b/__tests__/src/components/CompanionArea.test.js @@ -30,7 +30,7 @@ describe('CompanionArea', () => { it('should add the appropriate classes when the companion area fills the full width', () => { const { container } = createWrapper({ position: 'bottom' }); - expect(container.querySelector('.mirador-companion-area-bottom')).toHaveClass('horizontal'); // eslint-disable-line testing-library/no-node-access, testing-library/no-container + expect(container.querySelector('.mirador-companion-area-bottom')).toBeInTheDocument(); // eslint-disable-line testing-library/no-node-access, testing-library/no-container }); it('renders the appropriate components', () => { From 8ef68104411f1ec5c2a8b0a91d373dbda51b5d01 Mon Sep 17 00:00:00 2001 From: marloelilongley Date: Fri, 27 Oct 2023 16:41:05 -0400 Subject: [PATCH 037/164] Add ns back as prefix for CompanionArea component --- src/components/CompanionArea.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/CompanionArea.js b/src/components/CompanionArea.js index d34a5e35dd..638cd209dd 100644 --- a/src/components/CompanionArea.js +++ b/src/components/CompanionArea.js @@ -84,7 +84,7 @@ export class CompanionArea extends Component { width: '100%', }), }} - className={`companion-area-${position}`} + className={ns(`companion-area-${position}`)} > Date: Fri, 27 Oct 2023 16:42:32 -0400 Subject: [PATCH 038/164] Remove test reference to classes for CompanionWindow component --- __tests__/src/components/CompanionWindow.test.js | 12 +++--------- 1 file changed, 3 insertions(+), 9 deletions(-) diff --git a/__tests__/src/components/CompanionWindow.test.js b/__tests__/src/components/CompanionWindow.test.js index 60343426fe..a7fe7b71ef 100644 --- a/__tests__/src/components/CompanionWindow.test.js +++ b/__tests__/src/components/CompanionWindow.test.js @@ -11,7 +11,6 @@ function createWrapper(props) { isDisplayed direction="ltr" windowId="x" - classes={{ horizontal: 'horizontal', small: 'small', vertical: 'vertical' }} companionWindow={{}} position="right" {...props} @@ -96,9 +95,10 @@ describe('CompanionWindow', () => { updateCompanionWindow, }); - expect(screen.getByRole('complementary')).toHaveClass('vertical'); + expect(screen.getByRole('complementary')).toHaveClass('mirador-companion-window-right'); await user.click(screen.getByRole('button', { name: 'moveCompanionWindowToBottom' })); + expect(updateCompanionWindow).toHaveBeenCalledWith({ position: 'bottom' }); }); }); @@ -113,7 +113,7 @@ describe('CompanionWindow', () => { updateCompanionWindow, }); - expect(screen.getByRole('complementary')).toHaveClass('horizontal'); + expect(screen.getByRole('complementary')).toHaveClass('mirador-companion-window-bottom '); await user.click(screen.getByRole('button', { name: 'moveCompanionWindowToRight' })); @@ -127,12 +127,6 @@ describe('CompanionWindow', () => { expect(screen.getByTestId('xyz')).toBeInTheDocument(); }); - it('adds a small class when the component width is small', () => { - const { container } = createWrapper({ size: { width: 369 } }); - - expect(container.querySelector('.MuiToolbar-root')).toHaveClass('small'); // eslint-disable-line testing-library/no-node-access, testing-library/no-container - }); - it('has a resize handler', () => { const { container } = createWrapper(); From bbe3af9bd5e7fc6f4dff4aae47f40de5094b3095 Mon Sep 17 00:00:00 2001 From: marloelilongley Date: Fri, 27 Oct 2023 16:43:49 -0400 Subject: [PATCH 039/164] Remove test reference to classes and unnecessary tests for GalleryViewThumbnail component --- .../components/GalleryViewThumbnail.test.js | 21 ------------------- 1 file changed, 21 deletions(-) diff --git a/__tests__/src/components/GalleryViewThumbnail.test.js b/__tests__/src/components/GalleryViewThumbnail.test.js index 3ff910b086..bad9e3098e 100644 --- a/__tests__/src/components/GalleryViewThumbnail.test.js +++ b/__tests__/src/components/GalleryViewThumbnail.test.js @@ -11,7 +11,6 @@ function createWrapper(props) { return render( {}} setCanvas={() => {}} {...props} @@ -23,26 +22,6 @@ describe('GalleryView', () => { beforeEach(() => { window.HTMLElement.prototype.scrollIntoView = jest.fn(); }); - it('sets a mirador-current-canvas-grouping class when the canvas is selected', () => { - createWrapper({ selected: true }); - expect(screen.getByRole('button')).toBeInTheDocument(); - expect(screen.getByRole('button')).toHaveClass('selected'); - }); - it('does not set a mirador-current-canvas-grouping class when the canvas is not selected', () => { - createWrapper({ selected: false }); - expect(screen.getByRole('button')).toBeInTheDocument(); - expect(screen.getByRole('button')).not.toHaveClass('selected'); - }); - it('sets a mirador-current-canvas-grouping class when the canvas is selected', () => { - createWrapper({ selected: true }); - expect(screen.getByRole('button')).toBeInTheDocument(); - expect(screen.getByRole('button')).toHaveClass('selected'); - }); - it('does not set a mirador-current-canvas-grouping class when the canvas is not selected', () => { - createWrapper({ selected: false }); - expect(screen.getByRole('button')).toBeInTheDocument(); - expect(screen.getByRole('button')).not.toHaveClass('selected'); - }); it('renders the thumbnail', () => { createWrapper({ config: { height: 55 } }); expect(screen.getByRole('presentation')).toBeInTheDocument(); From f03b79f54f79b852c773fbe2b6832887395f119b Mon Sep 17 00:00:00 2001 From: marloelilongley Date: Fri, 27 Oct 2023 16:44:51 -0400 Subject: [PATCH 040/164] Use updated selectors in LocalePicker component tests --- __tests__/src/components/LocalePicker.test.js | 38 +++++++++++-------- 1 file changed, 22 insertions(+), 16 deletions(-) diff --git a/__tests__/src/components/LocalePicker.test.js b/__tests__/src/components/LocalePicker.test.js index a37bdb4bd9..ec8a7c971a 100644 --- a/__tests__/src/components/LocalePicker.test.js +++ b/__tests__/src/components/LocalePicker.test.js @@ -3,7 +3,7 @@ import userEvent from '@testing-library/user-event'; import { LocalePicker } from '../../../src/components/LocalePicker'; /** - * Helper function to create a shallow wrapper around LanguageSettings + * Helper function to create a shallow wrapper around LocalePicker */ function createWrapper(props) { return render( @@ -24,36 +24,42 @@ describe('LocalePicker', () => { }); it('renders a select with the current value', () => { - createWrapper({ availableLocales: ['en', 'de'], locale: 'en' }); - - expect(screen.getByRole('button')).toHaveTextContent('en'); + createWrapper({ availableLocales: ['en', 'de'], locale: 'de' }); + // The option to expand the dropdown menu is rendered by a CompanionWindow titleControls prop in WindowSideBarInfoPanel, which is a combobox + const dropdownTitle = screen.getByRole('combobox'); + expect(dropdownTitle).toHaveTextContent('de'); }); - it('renders a select with a list item for each language passed in props', async () => { + it('renders a select with both options and sets the current value', async () => { const user = userEvent.setup(); - - createWrapper({ availableLocales: ['en', 'de'], locale: 'en' }); - - await user.click(screen.getByRole('button')); - - expect(screen.getAllByRole('option')).toHaveLength(2); + createWrapper({ availableLocales: ['en', 'de'], locale: 'de' }); + const dropdownTitle = screen.getByRole('combobox'); + // Open the menu + await user.click(dropdownTitle); + // The dropddown menu is not nested within the combobox, it is a sibling in the DOM, an MuiMenu + const menu = await screen.getByRole('listbox'); + // Assert that the menu element has 2 children (2 options) + expect(menu.children).toHaveLength(2); + // Verify that the select element has the correct value ('de') + const deOption = await screen.getByRole('option', { name: 'de' }); + expect(deOption).toHaveAttribute('aria-selected', 'true'); + // Verify en is also an option expect(screen.getByRole('option', { name: 'en' })).toBeInTheDocument(); - expect(screen.getByRole('option', { name: 'de' })).toBeInTheDocument(); }); it('triggers setLocale prop when clicking a list item', async () => { const user = userEvent.setup(); const setLocale = jest.fn(); - createWrapper({ availableLocales: ['en', 'de'], locale: 'en', setLocale, }); - - await user.click(screen.getByRole('button')); + const dropdownTitle = screen.getByRole('combobox'); + // Open the Select component + await user.click(dropdownTitle); + // Change the locale to 'de' await user.click(screen.getByRole('option', { name: 'de' })); - expect(setLocale).toHaveBeenCalledTimes(1); expect(setLocale).toHaveBeenCalledWith('de'); }); From 4ac5f58daef5e275dd5e3865a0c2bc8b4823cbd5 Mon Sep 17 00:00:00 2001 From: marloelilongley Date: Fri, 27 Oct 2023 16:45:54 -0400 Subject: [PATCH 041/164] Use data attribute to test for active status in ManifestListItem component --- __tests__/src/components/ManifestListItem.test.js | 8 ++++---- src/components/ManifestListItem.js | 1 + 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/__tests__/src/components/ManifestListItem.test.js b/__tests__/src/components/ManifestListItem.test.js index f305dc0d24..eeba7e6c96 100644 --- a/__tests__/src/components/ManifestListItem.test.js +++ b/__tests__/src/components/ManifestListItem.test.js @@ -25,10 +25,10 @@ describe('ManifestListItem', () => { expect(screen.getByRole('listitem')).toHaveAttribute('data-manifestid', 'http://example.com'); expect(screen.getByRole('button')).toHaveTextContent('xyz'); }); - it('adds a class when the item is active', () => { - createWrapper({ active: true, classes: { active: 'active' } }); - - expect(screen.getByRole('listitem')).toHaveClass('active'); + it('properly interprets active in the DOM', () => { + createWrapper({ active: true }); + // If this is true, we can assume the proper styling classes are being applied + expect(screen.getByRole('listitem')).toHaveAttribute('data-active', 'true'); }); it('renders a placeholder element until real data is available', () => { const { container } = createWrapper({ ready: false }); diff --git a/src/components/ManifestListItem.js b/src/components/ManifestListItem.js index 96594ba15a..f936073152 100644 --- a/src/components/ManifestListItem.js +++ b/src/components/ManifestListItem.js @@ -138,6 +138,7 @@ export class ManifestListItem extends Component { }, })} data-manifestid={manifestId} + data-active={active} > {ready ? ( From 54b3a478c769e82b5c3d077c87efb929ecef3fee Mon Sep 17 00:00:00 2001 From: marloelilongley Date: Fri, 27 Oct 2023 16:48:46 -0400 Subject: [PATCH 042/164] Remove reference to classes in SearchHit component test --- .../src/components/ScrollIndicatedDialogContent.test.js | 9 --------- __tests__/src/components/SearchHit.test.js | 2 -- 2 files changed, 11 deletions(-) diff --git a/__tests__/src/components/ScrollIndicatedDialogContent.test.js b/__tests__/src/components/ScrollIndicatedDialogContent.test.js index 4c76018dca..ae84979485 100644 --- a/__tests__/src/components/ScrollIndicatedDialogContent.test.js +++ b/__tests__/src/components/ScrollIndicatedDialogContent.test.js @@ -6,7 +6,6 @@ function createWrapper(props) { return render( , ); @@ -19,16 +18,8 @@ describe('ScrollIndicatedDialogContent', () => { expect(screen.getByTestId('subject')).toHaveAttribute('randomprop', 'randomPropValue'); }); - it('provides a className to the DialogContent prop to style it', () => { - createWrapper(); - - expect(screen.getByTestId('subject')).toHaveClass('shadowScrollDialog'); - }); - it('joins an incoming className prop with our className', () => { createWrapper({ className: 'upstreamClassName' }); - - expect(screen.getByTestId('subject')).toHaveClass('shadowScrollDialog'); expect(screen.getByTestId('subject')).toHaveClass('upstreamClassName'); }); }); diff --git a/__tests__/src/components/SearchHit.test.js b/__tests__/src/components/SearchHit.test.js index 3db42a226f..c72cef108f 100644 --- a/__tests__/src/components/SearchHit.test.js +++ b/__tests__/src/components/SearchHit.test.js @@ -24,7 +24,6 @@ const Subject = (props) => ( announcer={() => {}} annotation={{ targetId: 'x' }} annotationId="foo" - classes={{ windowSelected: 'windowSelected' }} hit={{ after: ', and start the chainsaw', annotations: ['foo'], @@ -46,7 +45,6 @@ describe('SearchHit', () => { render(); expect(screen.getByRole('listitem')).toHaveClass('Mui-selected'); - expect(screen.getByRole('listitem')).toHaveClass('windowSelected'); expect(screen.getByRole('listitem')).toHaveTextContent('1Light up the moose , and start the chai more'); await user.click(screen.getByRole('button')); From de4c7660d8720c8d9bba7d162b4b882384e49566 Mon Sep 17 00:00:00 2001 From: marloelilongley Date: Fri, 27 Oct 2023 16:49:34 -0400 Subject: [PATCH 043/164] Test for function call rather than style in ThumbnailCanvasGrouping --- .../src/components/ThumbnailCanvasGrouping.test.js | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/__tests__/src/components/ThumbnailCanvasGrouping.test.js b/__tests__/src/components/ThumbnailCanvasGrouping.test.js index 96895ba47f..8bfff1d6d0 100644 --- a/__tests__/src/components/ThumbnailCanvasGrouping.test.js +++ b/__tests__/src/components/ThumbnailCanvasGrouping.test.js @@ -36,12 +36,13 @@ describe('ThumbnailCanvasGrouping', () => { setCanvas = jest.fn(); wrapper = createWrapper({ data, setCanvas }); }); + const spyCurrentCanvasClass = jest.spyOn(ThumbnailCanvasGrouping.prototype, 'currentCanvasClass'); + afterEach(() => { + spyCurrentCanvasClass.mockClear(); + }); it('renders', () => { expect(screen.getByRole('gridcell')).toBeInTheDocument(); }); - it('sets a mirador-current-canvas-grouping class on current canvas', () => { - expect(screen.getByRole('button')).toHaveClass('mirador-current-canvas-grouping'); - }); it('renders a CaptionedIIIFThumbnail', () => { expect(screen.getByText('Image 1')).toBeInTheDocument(); }); @@ -49,9 +50,9 @@ describe('ThumbnailCanvasGrouping', () => { wrapper.unmount(); const user = userEvent.setup(); wrapper = createWrapper({ data, index: 0, setCanvas }); - await user.click(wrapper.container.querySelector('.mirador-thumbnail-nav-canvas-0')); // eslint-disable-line testing-library/no-node-access - + expect(spyCurrentCanvasClass).toHaveBeenCalledWith([0]); + expect(spyCurrentCanvasClass).toHaveReturnedWith('current-canvas-grouping'); expect(setCanvas).toHaveBeenCalledWith('http://iiif.io/api/presentation/2.0/example/fixtures/canvas/24/c1.json'); }); describe('attributes based off far-bottom position', () => { From 3f5c65ed763955ad64a0409aafd9cee9b329703f Mon Sep 17 00:00:00 2001 From: marloelilongley Date: Fri, 27 Oct 2023 16:50:31 -0400 Subject: [PATCH 044/164] Remove reference to classes for WindowSideBar test --- __tests__/src/components/WindowSideBar.test.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/__tests__/src/components/WindowSideBar.test.js b/__tests__/src/components/WindowSideBar.test.js index 895e20fb35..0fa75243cf 100644 --- a/__tests__/src/components/WindowSideBar.test.js +++ b/__tests__/src/components/WindowSideBar.test.js @@ -5,7 +5,6 @@ import { WindowSideBar } from '../../../src/components/WindowSideBar'; function createWrapper({ ...props }) { return render( k} windowId="xyz" {...props} @@ -26,7 +25,6 @@ function createWrapper({ ...props }) { describe('WindowSideBar when closed', () => { it('renders without an error', () => { createWrapper({}); - expect(document.querySelector('.test-drawer')).toBeInTheDocument(); // eslint-disable-line testing-library/no-node-access expect(screen.queryByRole('navigation', { accessibleName: 'sidebarPanelsNavigation' })).not.toBeInTheDocument(); }); }); From c428b57d58e4e1019e618ad309ad53a26d093009 Mon Sep 17 00:00:00 2001 From: marloelilongley Date: Fri, 27 Oct 2023 16:51:17 -0400 Subject: [PATCH 045/164] Remove reference to classes in WindowSideBarCanvasPanel test --- __tests__/src/components/WindowSideBarCanvasPanel.test.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/__tests__/src/components/WindowSideBarCanvasPanel.test.js b/__tests__/src/components/WindowSideBarCanvasPanel.test.js index 9ad3ce6cca..9c3c48ca0a 100644 --- a/__tests__/src/components/WindowSideBarCanvasPanel.test.js +++ b/__tests__/src/components/WindowSideBarCanvasPanel.test.js @@ -65,7 +65,7 @@ describe('WindowSideBarCanvasPanel', () => { createWrapper({ multipleSequences: true, updateSequence }); expect(screen.getByTestId('sequence-select')).toHaveTextContent('a'); - await user.click(within(screen.getByTestId('sequence-select')).getByRole('button')); + await user.click(within(screen.getByTestId('sequence-select')).getByRole('combobox')); const listbox = within(screen.getByRole('listbox')); expect(listbox.getAllByRole('option')).toHaveLength(2); From 0e9d28da96fcf0f2affba71529aa757603e557d8 Mon Sep 17 00:00:00 2001 From: marloelilongley Date: Fri, 27 Oct 2023 16:52:46 -0400 Subject: [PATCH 046/164] Test for attribute rather than class in WindowTopMenuButton component --- __tests__/src/components/WindowTopMenuButton.test.js | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/__tests__/src/components/WindowTopMenuButton.test.js b/__tests__/src/components/WindowTopMenuButton.test.js index 86ef9584d4..3a115def37 100644 --- a/__tests__/src/components/WindowTopMenuButton.test.js +++ b/__tests__/src/components/WindowTopMenuButton.test.js @@ -38,9 +38,16 @@ describe('WindowTopMenuButton', () => { expect(screen.queryByRole('menu')).not.toBeInTheDocument(); }); - it('the button has a class indicating that it is "selected" once it is clicked', async () => { + it('the open attribute of the button is null without being clicked', async () => { + render(); + // without a click, the button is not open and therefore doesn't have aria-owns attr + expect(screen.getByLabelText('windowMenu')).not.toHaveAttribute("aria-owns"); // eslint-disable-line testing-library/no-node-access + }); + + it('the open attribute of the button is applied once it is clicked', async () => { render(); await user.click(screen.getByLabelText('windowMenu')); - expect(screen.getByLabelText('windowMenu')).toHaveClass('ctrlBtnSelected'); // eslint-disable-line testing-library/no-node-access + // when 'open' is true, aria-owns is set to the id of the window + expect(screen.getByLabelText('windowMenu')).toHaveAttribute('aria-owns', 'window-menu_xyz'); // eslint-disable-line testing-library/no-node-access }); }); From 6eec7f055651223c12f8d4cf986490dc78e954fa Mon Sep 17 00:00:00 2001 From: marloelilongley Date: Fri, 27 Oct 2023 16:53:21 -0400 Subject: [PATCH 047/164] Don't test for classes in WorkspaceElasticWindow component --- .../src/components/WorkspaceElasticWindow.test.js | 11 +++-------- 1 file changed, 3 insertions(+), 8 deletions(-) diff --git a/__tests__/src/components/WorkspaceElasticWindow.test.js b/__tests__/src/components/WorkspaceElasticWindow.test.js index 5d8982ea6b..03f565afd1 100644 --- a/__tests__/src/components/WorkspaceElasticWindow.test.js +++ b/__tests__/src/components/WorkspaceElasticWindow.test.js @@ -46,18 +46,13 @@ describe('WorkspaceElasticWindow', () => { expect(el).toHaveStyle({ height: '200px', transform: 'translate(5040px,5040px)', width: '200px' }); }); describe('focuses the window', () => { - it('adds class to focused window', () => { - const { container } = createWrapper({ classes: { focused: 'focused-window' }, focused: true, layout }); - const el = container.firstChild; - - expect(el).toHaveClass('focused-window'); - }); it('calls focusWindow when clicked', async () => { const user = userEvent.setup(); const mockFocusWindow = jest.fn(); const { container } = createWrapper({ focusWindow: mockFocusWindow, layout }); - const el = container.querySelector('.mirador-window-top-bar'); - await user.click(el); + const topBar = container.querySelector('.mirador-window-top-bar'); + await user.click(topBar); + expect(mockFocusWindow).toHaveBeenCalled(); }); }); From d03635d66e49a478c84153a7befaeb4af5474e22 Mon Sep 17 00:00:00 2001 From: marloelilongley Date: Fri, 27 Oct 2023 16:54:47 -0400 Subject: [PATCH 048/164] Use a testable method to check for divider in ZoomControls --- __tests__/src/components/ZoomControls.test.js | 20 ++++++++++++------- src/components/ZoomControls.js | 19 ++++++++++++++++-- 2 files changed, 30 insertions(+), 9 deletions(-) diff --git a/__tests__/src/components/ZoomControls.test.js b/__tests__/src/components/ZoomControls.test.js index 6f7be5e3ad..7c3c4ae6b6 100644 --- a/__tests__/src/components/ZoomControls.test.js +++ b/__tests__/src/components/ZoomControls.test.js @@ -1,16 +1,15 @@ import { render, screen } from 'test-utils'; import userEvent from '@testing-library/user-event'; +import Box from '@mui/material/Box'; import { ZoomControls } from '../../../src/components/ZoomControls'; /** Utility function to create a shallow rendering */ function createWrapper(props) { return render( {}} {...props} - />, ); } @@ -19,6 +18,10 @@ describe('ZoomControls', () => { const viewer = { x: 100, y: 100, zoom: 1 }; const showZoomControls = false; let updateViewport; + const spyRenderDivider = jest.spyOn(ZoomControls.prototype, 'renderDivider'); + afterEach(() => { + spyRenderDivider.mockClear(); + }); describe('with showZoomControls=false', () => { it('renders nothing unless asked', () => { @@ -65,15 +68,18 @@ describe('ZoomControls', () => { /* eslint-disable testing-library/no-container, testing-library/no-node-access */ describe('responsive divider', () => { it('is present when the displayDivider prop is true (default)', () => { - const { container } = createWrapper({ showZoomControls: true, viewer }); - - expect(container.querySelector('.divider')).toBeInTheDocument(); + createWrapper({ showZoomControls: true, viewer }); + expect(spyRenderDivider).toHaveBeenCalled(); + // Retrieve the result of the spy function + const renderedDivider = spyRenderDivider.mock.results[0].value; + expect(renderedDivider.type).toBe(Box); }); it('is not present when the displayDivider prop is false', () => { - const { container } = createWrapper({ displayDivider: false, showZoomControls: true, viewer }); + createWrapper({ displayDivider: false, showZoomControls: true, viewer }); - expect(container.querySelector('.divider')).not.toBeInTheDocument(); + expect(spyRenderDivider).toHaveBeenCalled(); + expect(spyRenderDivider).toHaveReturnedWith(null); }); }); }); diff --git a/src/components/ZoomControls.js b/src/components/ZoomControls.js index 2ac82b44f2..f533c96f08 100644 --- a/src/components/ZoomControls.js +++ b/src/components/ZoomControls.js @@ -55,13 +55,28 @@ export class ZoomControls extends Component { }); } + /** + * Renders a divider element if displayDivider is set to true. + * + * @returns {Box | null} + */ + renderDivider() { + const { displayDivider } = this.props; + + if (displayDivider) { + return ; + } + + return null; + } + /** * render * @return */ render() { const { - displayDivider, showZoomControls, t, zoomToWorld, + showZoomControls, t, zoomToWorld, } = this.props; if (!showZoomControls) { @@ -81,7 +96,7 @@ export class ZoomControls extends Component { zoomToWorld(false)}> - {displayDivider && } + {this.renderDivider()} ); } From 05ce84b283f06cbc6a28abb42ddea5a1e6a94292 Mon Sep 17 00:00:00 2001 From: marloelilongley Date: Fri, 27 Oct 2023 16:55:22 -0400 Subject: [PATCH 049/164] Don't double nest h2 components in Workspace dialogs --- src/components/WorkspaceExport.js | 4 ++-- src/components/WorkspaceImport.js | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/WorkspaceExport.js b/src/components/WorkspaceExport.js index 7643e4455a..47fecd3e63 100644 --- a/src/components/WorkspaceExport.js +++ b/src/components/WorkspaceExport.js @@ -88,8 +88,8 @@ export class WorkspaceExport extends Component { fullWidth maxWidth="sm" > - - {t('downloadExport')} + + {t('downloadExport')} diff --git a/src/components/WorkspaceImport.js b/src/components/WorkspaceImport.js index d0b0e4b20d..57963ec86d 100644 --- a/src/components/WorkspaceImport.js +++ b/src/components/WorkspaceImport.js @@ -73,8 +73,8 @@ export class WorkspaceImport extends Component { fullWidth maxWidth="sm" > - - {t('importWorkspace')} + + {t('importWorkspace')} Date: Fri, 27 Oct 2023 16:59:52 -0400 Subject: [PATCH 050/164] Remove getContentAnchorEl prop as it is unsupported in MUI5 --- src/components/LocalePicker.js | 1 - src/components/WindowSideBarCanvasPanel.js | 1 - src/components/WindowTopBarPluginMenu.js | 1 - src/components/WindowTopMenu.js | 1 - 4 files changed, 4 deletions(-) diff --git a/src/components/LocalePicker.js b/src/components/LocalePicker.js index 6b590b0b18..616c6fe796 100644 --- a/src/components/LocalePicker.js +++ b/src/components/LocalePicker.js @@ -29,7 +29,6 @@ export class LocalePicker extends Component { horizontal: 'left', vertical: 'bottom', }, - getContentAnchorEl: null, }} displayEmpty value={locale} diff --git a/src/components/WindowSideBarCanvasPanel.js b/src/components/WindowSideBarCanvasPanel.js index b4a5b6cfe5..eff8d871c7 100644 --- a/src/components/WindowSideBarCanvasPanel.js +++ b/src/components/WindowSideBarCanvasPanel.js @@ -111,7 +111,6 @@ export class WindowSideBarCanvasPanel extends Component { horizontal: 'left', vertical: 'bottom', }, - getContentAnchorEl: null, }} displayEmpty value={sequenceId} diff --git a/src/components/WindowTopBarPluginMenu.js b/src/components/WindowTopBarPluginMenu.js index a0e973898e..5a96836650 100644 --- a/src/components/WindowTopBarPluginMenu.js +++ b/src/components/WindowTopBarPluginMenu.js @@ -85,7 +85,6 @@ export class WindowTopBarPluginMenu extends Component { horizontal: 'right', vertical: 'top', }} - getContentAnchorEl={null} open={open} onClose={() => this.handleMenuClose()} > diff --git a/src/components/WindowTopMenu.js b/src/components/WindowTopMenu.js index b5dc9a5aef..feb45377bd 100644 --- a/src/components/WindowTopMenu.js +++ b/src/components/WindowTopMenu.js @@ -47,7 +47,6 @@ export class WindowTopMenu extends Component { onExit: toggleDraggingEnabled, }} orientation="horizontal" - getContentAnchorEl={null} anchorEl={anchorEl} open={open} > From efc3ed2580a13d19baa9b713f3e3ca08152b650f Mon Sep 17 00:00:00 2001 From: marloelilongley Date: Fri, 27 Oct 2023 17:00:35 -0400 Subject: [PATCH 051/164] Remove reference to flakey 404 manifest --- __tests__/integration/mirador/thumbnail-navigation.test.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/__tests__/integration/mirador/thumbnail-navigation.test.js b/__tests__/integration/mirador/thumbnail-navigation.test.js index 35de953cca..9425e9d3ca 100644 --- a/__tests__/integration/mirador/thumbnail-navigation.test.js +++ b/__tests__/integration/mirador/thumbnail-navigation.test.js @@ -6,7 +6,8 @@ describe('Thumbnail navigation', () => { await expect(page).toMatchElement('.mirador-window', { polling: 'mutation', timeout: 5000 }); }); - it('navigates a manifest using thumbnail navigation', async () => { + //TODO: pick a new url; this Harvard one is 404 + xit('navigates a manifest using thumbnail navigation', async () => { await expect(page).toMatchElement('.mirador-thumb-navigation'); let windows = await page.evaluate(() => ( miradorInstance.store.getState().windows @@ -20,7 +21,7 @@ describe('Thumbnail navigation', () => { )); expect(Object.values(windows)[0].canvasId).toBe('https://iiif.harvardartmuseums.org/manifests/object/299843/canvas/canvas-18737483'); // canvas @ index 1 }); - it('displays on right side', async () => { + xit('displays on right side', async () => { await expect(page).toMatchElement('.mirador-thumb-navigation'); await expect(page).toMatchElement('.mirador-companion-area-far-bottom .mirador-thumb-navigation'); const windowId = await page.evaluate(() => { From 52822b8a938ed30bfcd4fb669cd150ee680cb37e Mon Sep 17 00:00:00 2001 From: marloelilongley Date: Fri, 27 Oct 2023 17:05:09 -0400 Subject: [PATCH 052/164] Use valid color variable for WorkspaceArea background --- src/components/WorkspaceArea.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/WorkspaceArea.js b/src/components/WorkspaceArea.js index 2e72b80446..886118f616 100644 --- a/src/components/WorkspaceArea.js +++ b/src/components/WorkspaceArea.js @@ -12,7 +12,7 @@ const StyledMain = styled('main')(({ theme }) => { const getBackgroundColor = theme.palette.mode === 'light' ? darken : lighten; return { - background: getBackgroundColor(theme.palette.shades.light, 0.1), + background: getBackgroundColor(theme.palette.grey.A200, 0.1), bottom: 0, left: 0, overflow: 'hidden', From 8932afd5dc5a015ea1c45fcd3ac6a293193d81a9 Mon Sep 17 00:00:00 2001 From: apple Date: Thu, 9 Nov 2023 17:23:21 -0500 Subject: [PATCH 053/164] Migrate MUI Tree View from labs to mui-x See https://mui.com/blog/lab-tree-view-to-mui-x/ --- package.json | 1 + src/components/SidebarIndexTableOfContents.js | 4 ++-- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index 35e436a905..2847a24e05 100644 --- a/package.json +++ b/package.json @@ -41,6 +41,7 @@ "@mui/material": "^5.13.5", "@mui/styles": "^5.13.2", "@mui/utils": "^5.13.1", + "@mui/x-tree-view": "^6.17.0", "@react-aria/live-announcer": "^3.1.2", "classnames": "^2.2.6", "clsx": "^1.0.4", diff --git a/src/components/SidebarIndexTableOfContents.js b/src/components/SidebarIndexTableOfContents.js index 9d20057761..d9e0a7be6e 100644 --- a/src/components/SidebarIndexTableOfContents.js +++ b/src/components/SidebarIndexTableOfContents.js @@ -1,10 +1,10 @@ import { Component } from 'react'; import PropTypes from 'prop-types'; import { alpha, styled } from '@mui/material/styles'; -import TreeView from '@mui/lab/TreeView'; +import { TreeView } from '@mui/x-tree-view/TreeView'; import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; import ChevronRightIcon from '@mui/icons-material/ChevronRight'; -import TreeItem from '@mui/lab/TreeItem'; +import { TreeItem } from '@mui/x-tree-view/TreeItem'; import { ScrollTo } from './ScrollTo'; const StyledVisibleNode = styled('div')(() => ({ From bbab5946d69bc589f360f54dbb24112df597218c Mon Sep 17 00:00:00 2001 From: apple Date: Thu, 9 Nov 2023 17:33:30 -0500 Subject: [PATCH 054/164] Address linter errors --- __tests__/integration/mirador/thumbnail-navigation.test.js | 2 +- __tests__/src/components/LocalePicker.test.js | 6 +++--- __tests__/src/components/WindowTopMenuButton.test.js | 2 +- src/components/WorkspaceImport.js | 3 +-- 4 files changed, 6 insertions(+), 7 deletions(-) diff --git a/__tests__/integration/mirador/thumbnail-navigation.test.js b/__tests__/integration/mirador/thumbnail-navigation.test.js index 9425e9d3ca..82502cbd53 100644 --- a/__tests__/integration/mirador/thumbnail-navigation.test.js +++ b/__tests__/integration/mirador/thumbnail-navigation.test.js @@ -6,7 +6,7 @@ describe('Thumbnail navigation', () => { await expect(page).toMatchElement('.mirador-window', { polling: 'mutation', timeout: 5000 }); }); - //TODO: pick a new url; this Harvard one is 404 + // TODO: pick a new url; this Harvard one is 404 xit('navigates a manifest using thumbnail navigation', async () => { await expect(page).toMatchElement('.mirador-thumb-navigation'); let windows = await page.evaluate(() => ( diff --git a/__tests__/src/components/LocalePicker.test.js b/__tests__/src/components/LocalePicker.test.js index ec8a7c971a..2ff1b2ceef 100644 --- a/__tests__/src/components/LocalePicker.test.js +++ b/__tests__/src/components/LocalePicker.test.js @@ -37,11 +37,11 @@ describe('LocalePicker', () => { // Open the menu await user.click(dropdownTitle); // The dropddown menu is not nested within the combobox, it is a sibling in the DOM, an MuiMenu - const menu = await screen.getByRole('listbox'); + const menu = screen.getByRole('listbox'); // Assert that the menu element has 2 children (2 options) - expect(menu.children).toHaveLength(2); + expect(menu.children).toHaveLength(2); // eslint-disable-line testing-library/no-node-access // Verify that the select element has the correct value ('de') - const deOption = await screen.getByRole('option', { name: 'de' }); + const deOption = screen.getByRole('option', { name: 'de' }); expect(deOption).toHaveAttribute('aria-selected', 'true'); // Verify en is also an option expect(screen.getByRole('option', { name: 'en' })).toBeInTheDocument(); diff --git a/__tests__/src/components/WindowTopMenuButton.test.js b/__tests__/src/components/WindowTopMenuButton.test.js index 3a115def37..15d4b65f42 100644 --- a/__tests__/src/components/WindowTopMenuButton.test.js +++ b/__tests__/src/components/WindowTopMenuButton.test.js @@ -41,7 +41,7 @@ describe('WindowTopMenuButton', () => { it('the open attribute of the button is null without being clicked', async () => { render(); // without a click, the button is not open and therefore doesn't have aria-owns attr - expect(screen.getByLabelText('windowMenu')).not.toHaveAttribute("aria-owns"); // eslint-disable-line testing-library/no-node-access + expect(screen.getByLabelText('windowMenu')).not.toHaveAttribute('aria-owns'); // eslint-disable-line testing-library/no-node-access }); it('the open attribute of the button is applied once it is clicked', async () => { diff --git a/src/components/WorkspaceImport.js b/src/components/WorkspaceImport.js index 57963ec86d..7ad6510501 100644 --- a/src/components/WorkspaceImport.js +++ b/src/components/WorkspaceImport.js @@ -5,7 +5,6 @@ import PropTypes from 'prop-types'; import { DialogActions, TextField, - Typography, } from '@mui/material'; import Button from '@mui/material/Button'; import ScrollIndicatedDialogContent from '../containers/ScrollIndicatedDialogContent'; @@ -73,7 +72,7 @@ export class WorkspaceImport extends Component { fullWidth maxWidth="sm" > - + {t('importWorkspace')} From 9b53dff61fd5a662798313bb39c9d4370ba2cfa5 Mon Sep 17 00:00:00 2001 From: apple Date: Thu, 9 Nov 2023 17:33:48 -0500 Subject: [PATCH 055/164] Avoid nesting h2 elements --- src/components/WorkspaceSelectionDialog.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/WorkspaceSelectionDialog.js b/src/components/WorkspaceSelectionDialog.js index b9c90629c6..24f6421631 100644 --- a/src/components/WorkspaceSelectionDialog.js +++ b/src/components/WorkspaceSelectionDialog.js @@ -57,8 +57,8 @@ export class WorkspaceSelectionDialog extends Component { onClose={handleClose} open={open} > - - {t('workspaceSelectionTitle')} + + {t('workspaceSelectionTitle')} {children} From 38c36a62ef1876b5806249d65ac7a4e931f7fa5d Mon Sep 17 00:00:00 2001 From: apple Date: Fri, 10 Nov 2023 15:01:33 -0500 Subject: [PATCH 056/164] Fix styling in companion window panels --- src/components/AttributionPanel.js | 2 +- src/components/SidebarIndexList.js | 5 +---- src/components/WindowTopBar.js | 2 +- 3 files changed, 3 insertions(+), 6 deletions(-) diff --git a/src/components/AttributionPanel.js b/src/components/AttributionPanel.js index 32958c7f18..9b6463f8ac 100644 --- a/src/components/AttributionPanel.js +++ b/src/components/AttributionPanel.js @@ -47,7 +47,7 @@ export class AttributionPanel extends Component { windowId={windowId} id={id} > - + { requiredStatement && ( )} diff --git a/src/components/SidebarIndexList.js b/src/components/SidebarIndexList.js index c269999346..9c678b17da 100644 --- a/src/components/SidebarIndexList.js +++ b/src/components/SidebarIndexList.js @@ -51,13 +51,10 @@ export class SidebarIndexList extends Component { diff --git a/src/components/WindowTopBar.js b/src/components/WindowTopBar.js index 4699b6ffa1..07ace0d1a2 100644 --- a/src/components/WindowTopBar.js +++ b/src/components/WindowTopBar.js @@ -31,7 +31,7 @@ export class WindowTopBar extends Component { } = this.props; return ( - +
- - + + ))} diff --git a/src/components/ScrollTo.js b/src/components/ScrollTo.js index c4aed0adb7..4e11892d72 100644 --- a/src/components/ScrollTo.js +++ b/src/components/ScrollTo.js @@ -1,5 +1,6 @@ -import { createRef, Component } from 'react'; +import { cloneElement, createRef, Component } from 'react'; import PropTypes from 'prop-types'; +import isEmpty from 'lodash/isEmpty'; /** * ScrollTo ~ @@ -107,13 +108,9 @@ export class ScrollTo extends Component { children, containerRef, offsetTop, scrollTo, nodeId, ...otherProps } = this.props; - if (!scrollTo) return children; + if (!scrollTo && isEmpty(otherProps)) return children; - return ( -
- {children} -
- ); + return cloneElement(children, { ref: this.scrollToRef, ...otherProps }); } } diff --git a/src/components/SidebarIndexList.js b/src/components/SidebarIndexList.js index 9d6b80f50c..babb183841 100644 --- a/src/components/SidebarIndexList.js +++ b/src/components/SidebarIndexList.js @@ -48,26 +48,28 @@ export class SidebarIndexList extends Component { const onClick = () => { setCanvas(windowId, canvas.id); }; // eslint-disable-line require-jsdoc, max-len return ( - - - - + + ); }) } From d47c82ac26b93ec66283a0bd5888c116b44c33b1 Mon Sep 17 00:00:00 2001 From: Chris Beer Date: Tue, 12 Dec 2023 10:08:39 -0800 Subject: [PATCH 136/164] Allow canvas labels to wrap --- src/components/SidebarIndexList.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/SidebarIndexList.js b/src/components/SidebarIndexList.js index babb183841..59c8f76737 100644 --- a/src/components/SidebarIndexList.js +++ b/src/components/SidebarIndexList.js @@ -62,6 +62,7 @@ export class SidebarIndexList extends Component { paddingLeft: 2, paddingRight: 1, position: 'initial', + whiteSpace: 'normal', }} divider onClick={onClick} From 93751f76985615fdc2b5eda8ff579620e81e957f Mon Sep 17 00:00:00 2001 From: Chris Beer Date: Tue, 12 Dec 2023 10:26:25 -0800 Subject: [PATCH 137/164] Pull sidebar index styles up --- src/components/SidebarIndexItem.js | 1 - src/components/SidebarIndexList.js | 20 +++++++++++--------- src/components/SidebarIndexThumbnail.js | 5 +---- 3 files changed, 12 insertions(+), 14 deletions(-) diff --git a/src/components/SidebarIndexItem.js b/src/components/SidebarIndexItem.js index e3a1204a6d..11bb4af9c0 100644 --- a/src/components/SidebarIndexItem.js +++ b/src/components/SidebarIndexItem.js @@ -12,7 +12,6 @@ export class SidebarIndexItem extends Component { return ( {label} diff --git a/src/components/SidebarIndexList.js b/src/components/SidebarIndexList.js index 59c8f76737..d19394ef97 100644 --- a/src/components/SidebarIndexList.js +++ b/src/components/SidebarIndexList.js @@ -2,11 +2,20 @@ import { Component } from 'react'; import PropTypes from 'prop-types'; import MenuList from '@mui/material/MenuList'; import MenuItem from '@mui/material/MenuItem'; +import { styled } from '@mui/material/styles'; import { ScrollTo } from './ScrollTo'; import MiradorCanvas from '../lib/MiradorCanvas'; import SidebarIndexItem from '../containers/SidebarIndexItem'; import SidebarIndexThumbnail from '../containers/SidebarIndexThumbnail'; +const StyledItem = styled(MenuItem, { name: 'SidebarIndexList', slot: 'item' })(({ theme }) => ({ + alignItems: 'flex-start', + paddingLeft: theme.spacing(2), + paddingRight: theme.spacing(1), + position: 'initial', + whiteSpace: 'normal', +})); + /** */ export class SidebarIndexList extends Component { /** @private */ @@ -55,21 +64,14 @@ export class SidebarIndexList extends Component { selected={selectedCanvasIds.includes(canvas.id)} scrollTo={selectedCanvasIds.includes(canvas.id)} > - - + ); }) diff --git a/src/components/SidebarIndexThumbnail.js b/src/components/SidebarIndexThumbnail.js index 3abf2902c4..05126d8de0 100644 --- a/src/components/SidebarIndexThumbnail.js +++ b/src/components/SidebarIndexThumbnail.js @@ -21,10 +21,7 @@ export class SidebarIndexThumbnail extends Component { maxWidth={width} /> - + {label} From cc276c5e1aa2580677f514e647664a9902d0aafd Mon Sep 17 00:00:00 2001 From: Chris Beer Date: Tue, 12 Dec 2023 14:45:08 -0800 Subject: [PATCH 138/164] Continue to apply custom tooltip margins --- src/config/settings.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/config/settings.js b/src/config/settings.js index 1f9cf3eb5e..c9ea8a0dc3 100644 --- a/src/config/settings.js +++ b/src/config/settings.js @@ -367,22 +367,22 @@ export default { styleOverrides: { tooltipPlacementLeft: { ['@media (min-width:600px)']: { - margin: 0, + margin: '0 !important', }, }, tooltipPlacementRight: { ['@media (min-width:600px)']: { - margin: 0, + margin: '0 !important', }, }, tooltipPlacementTop: { ['@media (min-width:600px)']: { - margin: 0, + margin: '0 !important', }, }, tooltipPlacementBottom: { ['@media (min-width:600px)']: { - margin: 0, + margin: '0 !important', }, }, }, From 90bbf2d5a825fae5a33bfa9e6539790d9b64b2e4 Mon Sep 17 00:00:00 2001 From: Chris Beer Date: Tue, 12 Dec 2023 15:51:06 -0800 Subject: [PATCH 139/164] Fix branding alignment --- src/components/Branding.js | 5 +++-- src/components/WorkspaceControlPanel.js | 2 -- 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/src/components/Branding.js b/src/components/Branding.js index 6e48a1f82a..9b3af649cc 100644 --- a/src/components/Branding.js +++ b/src/components/Branding.js @@ -2,6 +2,7 @@ import { Component } from 'react'; import PropTypes from 'prop-types'; import IconButton from '@mui/material/IconButton'; import Typography from '@mui/material/Typography'; +import Stack from '@mui/material/Stack'; import MiradorIcon from './icons/MiradorIcon'; /** @@ -13,7 +14,7 @@ export class Branding extends Component { const { t, variant, ...ContainerProps } = this.props; return ( -
+ { variant === 'wide' && (
{t('mirador')} @@ -30,7 +31,7 @@ export class Branding extends Component { -
+ ); } } diff --git a/src/components/WorkspaceControlPanel.js b/src/components/WorkspaceControlPanel.js index b1278bc166..ddcd967284 100644 --- a/src/components/WorkspaceControlPanel.js +++ b/src/components/WorkspaceControlPanel.js @@ -47,8 +47,6 @@ const StyledWorkspaceButtons = styled('div', { name: 'WorkspaceControlPanel', sl })); const StyledBranding = styled(Branding, { name: 'WorkspaceControlPanel', slot: 'branding' })(({ theme }) => ({ - display: 'flex', - justifyContent: 'center', [theme.breakpoints.up('xs')]: { display: 'none', }, From dc66a1056bb532932116819eb4aef05c915c6483 Mon Sep 17 00:00:00 2001 From: Chris Beer Date: Wed, 13 Dec 2023 08:14:20 -0800 Subject: [PATCH 140/164] Use the special dark mode dialog background color calculation --- .../ScrollIndicatedDialogContent.js | 61 +++++++++++++------ 1 file changed, 42 insertions(+), 19 deletions(-) diff --git a/src/components/ScrollIndicatedDialogContent.js b/src/components/ScrollIndicatedDialogContent.js index 5e9770bc42..01e10ca255 100644 --- a/src/components/ScrollIndicatedDialogContent.js +++ b/src/components/ScrollIndicatedDialogContent.js @@ -1,26 +1,49 @@ import PropTypes from 'prop-types'; import DialogContent from '@mui/material/DialogContent'; -import { styled } from '@mui/material/styles'; +import { alpha, styled } from '@mui/material/styles'; -const Root = styled(DialogContent, { name: 'ScrollIndicatedDialogContent', slot: 'root' })(({ theme }) => ({ - /* Shadow covers */ - background: `linear-gradient(${theme.palette.background.paper} 30%, rgba(255, 255, 255, 0)), ` - + `linear-gradient(rgba(255, 255, 255, 0), ${theme.palette.background.paper} 70%) 0 100%, ` - // Shaddows - + 'radial-gradient(50% 0, farthest-side, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)), ' - + 'radial-gradient(50% 100%, farthest-side, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)) 0 100%,', - /* Shadow covers */ - background: `linear-gradient(${theme.palette.background.paper} 30%, rgba(255, 255, 255, 0)), ` // eslint-disable-line no-dupe-keys - + `linear-gradient(rgba(255, 255, 255, 0), ${theme.palette.background.paper} 70%) 0 100%, ` - // Shaddows - + 'radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)), ' - + 'radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)) 0 100%;', +/** + * From https://github.com/mui/material-ui/blob/v5.15.0/packages/mui-material/src/styles/getOverlayAlpha.ts + */ +const getOverlayAlpha = (elevation) => { + let alphaValue; + if (elevation < 1) { + alphaValue = 5.11916 * elevation ** 2; + } else { + alphaValue = 4.5 * Math.log(elevation + 1) + 2; + } + return (alphaValue / 100).toFixed(2); +}; + +const Root = styled(DialogContent, { name: 'ScrollIndicatedDialogContent', slot: 'root' })(({ ownerState, theme }) => { + // In dark mode, paper has a elevation-dependent background color: + // https://github.com/mui/material-ui/blob/v5.15.0/packages/mui-material/src/Paper/Paper.js#L55-L60 + const bgcolor = theme.palette.mode === 'dark' ? { + backgroundImage: `linear-gradient(${alpha( + '#fff', + getOverlayAlpha(ownerState?.elevation || 24), + )}, ${alpha('#fff', getOverlayAlpha(ownerState?.elevation || 24))})`, + } : theme.palette.background.paper; + return { + /* Shadow covers */ + background: `linear-gradient(${bgcolor} 30%, rgba(255, 255, 255, 0)), ` + + `linear-gradient(rgba(255, 255, 255, 0), ${bgcolor} 70%) 0 100%, ` + // Shaddows + + 'radial-gradient(50% 0, farthest-side, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)), ' + + 'radial-gradient(50% 100%, farthest-side, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)) 0 100%,', + /* Shadow covers */ + background: `linear-gradient(${bgcolor} 30%, rgba(255, 255, 255, 0)), ` // eslint-disable-line no-dupe-keys + + `linear-gradient(rgba(255, 255, 255, 0), ${bgcolor} 70%) 0 100%, ` + // Shaddows + + 'radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)), ' + + 'radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)) 0 100%;', - backgroundAttachment: 'local, local, scroll, scroll', - backgroundRepeat: 'no-repeat', - backgroundSize: '100% 40px, 100% 40px, 100% 14px, 100% 14px', - overflowY: 'auto', -})); + backgroundAttachment: 'local, local, scroll, scroll', + backgroundRepeat: 'no-repeat', + backgroundSize: '100% 40px, 100% 40px, 100% 14px, 100% 14px', + overflowY: 'auto', + }; +}); /** * ScrollIndicatedDialogContent ~ Inject a style into the DialogContent component From a9e082e2a8ed2736d0e778c0e2df64f0acae237f Mon Sep 17 00:00:00 2001 From: Chris Beer Date: Wed, 13 Dec 2023 08:20:06 -0800 Subject: [PATCH 141/164] Reset the collection collapsible section background color for collection metadata --- src/components/CollectionDialog.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/components/CollectionDialog.js b/src/components/CollectionDialog.js index 4fd15b564c..75fa641f14 100644 --- a/src/components/CollectionDialog.js +++ b/src/components/CollectionDialog.js @@ -25,6 +25,9 @@ const StyledScrollIndicatedDialogContent = styled(ScrollIndicatedDialogContent)( })); const StyledCollectionMetadata = styled('div')(() => ({ + '& .MuiPaper-root': { + background: 'transparent', + }, padding: (theme) => theme.spacing(2), })); From d55df5de4a0162ed40cdd275cfd169b7050fdcc6 Mon Sep 17 00:00:00 2001 From: Chris Beer Date: Wed, 13 Dec 2023 09:08:18 -0800 Subject: [PATCH 142/164] Wrap the empty workspace in paper to get the right background in dark mode --- src/components/Workspace.js | 31 +++++++++++++++++++------------ 1 file changed, 19 insertions(+), 12 deletions(-) diff --git a/src/components/Workspace.js b/src/components/Workspace.js index 06e49737c6..8963e18232 100644 --- a/src/components/Workspace.js +++ b/src/components/Workspace.js @@ -3,6 +3,7 @@ import PropTypes from 'prop-types'; import { styled } from '@mui/material/styles'; import classNames from 'classnames'; import Grid from '@mui/material/Grid'; +import Paper from '@mui/material/Paper'; import Typography from '@mui/material/Typography'; import { visuallyHidden } from '@mui/utils'; import Window from '../containers/Window'; @@ -83,26 +84,32 @@ export class Workspace extends Component { const { t } = this.props; return ( - - - {t('welcome')} - + + {t('welcome')} + + - + ); } From 40c9adc400093936668bc9263f4f2143ca07300b Mon Sep 17 00:00:00 2001 From: Chris Beer Date: Wed, 13 Dec 2023 09:41:12 -0800 Subject: [PATCH 143/164] Update annotation tags to avoid improperly nested HTML tags --- src/components/CanvasAnnotations.js | 19 +++++++++++-------- 1 file changed, 11 insertions(+), 8 deletions(-) diff --git a/src/components/CanvasAnnotations.js b/src/components/CanvasAnnotations.js index ba5f5cb268..8b4993c3e2 100644 --- a/src/components/CanvasAnnotations.js +++ b/src/components/CanvasAnnotations.js @@ -95,14 +95,17 @@ export class CanvasAnnotations extends Component { onMouseEnter={() => this.handleAnnotationHover(annotation)} onMouseLeave={this.handleAnnotationBlur} > - - -
- {annotation.tags.map((tag) => ( - - ))} -
- + + } + secondary={ + annotation.tags.map((tag) => ( + + )) + } + /> ))} From 36908ddd8f930cbc360e7931ead8eda9f0f0ad02 Mon Sep 17 00:00:00 2001 From: Chris Beer Date: Wed, 13 Dec 2023 15:02:30 -0800 Subject: [PATCH 144/164] Update jest-dom --- jest.json | 4 ++-- package.json | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/jest.json b/jest.json index b5713a9dc7..947d95cd44 100644 --- a/jest.json +++ b/jest.json @@ -33,7 +33,7 @@ "/__tests__/utils" ], "preset": "jest-puppeteer", - "setupFilesAfterEnv": ["@testing-library/jest-dom/extend-expect"], + "setupFilesAfterEnv": ["@testing-library/jest-dom/jest-globals"], "transformIgnorePatterns": [ "/node_modules/(?!@react-dnd|react-dnd|dnd-core|react-dnd-html5-backend|dnd-multi-backend|rdndmb-html5-to-touch)" ], @@ -58,7 +58,7 @@ "preset": "jest-puppeteer", "setupFilesAfterEnv": [ "/setupJestIntegration.js", - "@testing-library/jest-dom/extend-expect" + "@testing-library/jest-dom/jest-globals" ], "transformIgnorePatterns": [ "/node_modules/(?!@react-dnd|react-dnd|dnd-core|react-dnd-html5-backend|dnd-multi-backend|rdndmb-html5-to-touch)" diff --git a/package.json b/package.json index 39fb0ef9cb..7e42335175 100644 --- a/package.json +++ b/package.json @@ -94,7 +94,7 @@ "@babel/preset-react": "^7.16.7", "@pmmmwh/react-refresh-webpack-plugin": "^0.5.4", "@testing-library/dom": "^9.2.0", - "@testing-library/jest-dom": "^5.16.5", + "@testing-library/jest-dom": "^6.1.5", "@testing-library/react": "^12.1.5", "@testing-library/user-event": "^14.4.3", "@typescript-eslint/eslint-plugin": "^5.15.0", @@ -114,7 +114,7 @@ "eslint-plugin-flowtype": "^8.0.3", "eslint-plugin-import": "^2.25.4", "eslint-plugin-jest": "^27.1.5", - "eslint-plugin-jest-dom": "^4.0.3", + "eslint-plugin-jest-dom": "^5.1.0", "eslint-plugin-jsx-a11y": "^6.4.1", "eslint-plugin-react": "^7.29.4", "eslint-plugin-react-hooks": "^4.6.0", From fe66214ca73cdd0759626d60c7f0d9a37bf0b8c3 Mon Sep 17 00:00:00 2001 From: Chris Beer Date: Wed, 13 Dec 2023 15:05:05 -0800 Subject: [PATCH 145/164] Use the new-style headless browser for testing --- jest-puppeteer.config.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/jest-puppeteer.config.js b/jest-puppeteer.config.js index b7f3d29270..31bf265ad4 100644 --- a/jest-puppeteer.config.js +++ b/jest-puppeteer.config.js @@ -1,6 +1,6 @@ module.exports = { launch: { - headless: process.env.HEADLESS !== 'false', + headless: process.env.HEADLESS !== 'false' ? 'new' : false, }, server: [{ command: 'npm run server -- -p 4488', From 9760796df3a93e5784dfdf3be3497636973b91ad Mon Sep 17 00:00:00 2001 From: Chris Beer Date: Wed, 13 Dec 2023 15:37:28 -0800 Subject: [PATCH 146/164] Allow new versions of i18next --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 7e42335175..a6b5f43394 100644 --- a/package.json +++ b/package.json @@ -48,7 +48,7 @@ "clsx": "^1.0.4", "deepmerge": "^4.2.2", "dompurify": "^3.0.0", - "i18next": "^21.0.0 || ^22.0.0", + "i18next": "^21.0.0 || ^22.0.0 || ^23.0.0", "lodash": "^4.17.11", "manifesto.js": "^4.2.0", "normalize-url": "^4.5.0", From c6c30db643adbe6a9f3a9a8a9ae10fba8db6b475 Mon Sep 17 00:00:00 2001 From: Chris Beer Date: Wed, 13 Dec 2023 16:01:42 -0800 Subject: [PATCH 147/164] Update puppeteer --- package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index a6b5f43394..4e3b656ab1 100644 --- a/package.json +++ b/package.json @@ -124,9 +124,9 @@ "jest": "^29.3.1", "jest-environment-jsdom": "^29.4.3", "jest-fetch-mock": "^3.0.0", - "jest-puppeteer": "^8.0.0", + "jest-puppeteer": "^9.0.2", "jsdom": "^21.0.0", - "puppeteer": "^19.0.0", + "puppeteer": "^21.0.0", "react": "^17.0.0", "react-dnd-test-backend": "^16.0.1", "react-dom": "^17.0.0", From b102c9e303f0a650aeb1aa0706710b4026070e6d Mon Sep 17 00:00:00 2001 From: Chris Beer Date: Wed, 13 Dec 2023 16:03:20 -0800 Subject: [PATCH 148/164] Update react-i18next --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 4e3b656ab1..3e0622fa38 100644 --- a/package.json +++ b/package.json @@ -62,7 +62,7 @@ "react-dnd-multi-backend": "^8.0.0", "react-dnd-touch-backend": "^16.0.0", "react-full-screen": "^1.1.1", - "react-i18next": "^11.7.0 || ^12.0.0", + "react-i18next": "^11.7.0 || ^12.0.0 || ^13.0.0", "react-image": "^4.0.1", "react-intersection-observer": "^9.0.0", "react-mosaic-component": "^6.0.0", From ceaa8a06691017937545f872fcba7a6e512b24ab Mon Sep 17 00:00:00 2001 From: Chris Beer Date: Wed, 13 Dec 2023 16:11:04 -0800 Subject: [PATCH 149/164] Update jsdom --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 3e0622fa38..b460e9553b 100644 --- a/package.json +++ b/package.json @@ -125,7 +125,7 @@ "jest-environment-jsdom": "^29.4.3", "jest-fetch-mock": "^3.0.0", "jest-puppeteer": "^9.0.2", - "jsdom": "^21.0.0", + "jsdom": "^23.0.0", "puppeteer": "^21.0.0", "react": "^17.0.0", "react-dnd-test-backend": "^16.0.1", From a08aa6a3f194534bda777e984739eacbd234dcdc Mon Sep 17 00:00:00 2001 From: Chris Beer Date: Wed, 13 Dec 2023 16:16:54 -0800 Subject: [PATCH 150/164] Update glob --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index b460e9553b..9bf535402c 100644 --- a/package.json +++ b/package.json @@ -119,7 +119,7 @@ "eslint-plugin-react": "^7.29.4", "eslint-plugin-react-hooks": "^4.6.0", "eslint-plugin-testing-library": "^5.10.2", - "glob": "^9.3.0", + "glob": "^10.3.0", "http-server": "^14.1.0", "jest": "^29.3.1", "jest-environment-jsdom": "^29.4.3", From bb3e763ad086fa9b41e809f85f63033e08b92feb Mon Sep 17 00:00:00 2001 From: Chris Beer Date: Thu, 14 Dec 2023 08:43:44 -0800 Subject: [PATCH 151/164] remove unused clsx dependency --- package.json | 1 - 1 file changed, 1 deletion(-) diff --git a/package.json b/package.json index 9bf535402c..a701b965dd 100644 --- a/package.json +++ b/package.json @@ -45,7 +45,6 @@ "@mui/x-tree-view": "^6.17.0", "@react-aria/live-announcer": "^3.1.2", "classnames": "^2.2.6", - "clsx": "^1.0.4", "deepmerge": "^4.2.2", "dompurify": "^3.0.0", "i18next": "^21.0.0 || ^22.0.0 || ^23.0.0", From 8d7178f21bda65dd136803933910da63936db305 Mon Sep 17 00:00:00 2001 From: Chris Beer Date: Thu, 14 Dec 2023 09:04:10 -0800 Subject: [PATCH 152/164] Replace redux-devtools-extension with @redux-devtools/extension --- package.json | 1 + src/state/createStore.js | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index 9bf535402c..57ead2000f 100644 --- a/package.json +++ b/package.json @@ -44,6 +44,7 @@ "@mui/utils": "^5.13.1", "@mui/x-tree-view": "^6.17.0", "@react-aria/live-announcer": "^3.1.2", + "@redux-devtools/extension": "^3.3.0", "classnames": "^2.2.6", "clsx": "^1.0.4", "deepmerge": "^4.2.2", diff --git a/src/state/createStore.js b/src/state/createStore.js index 9467f322c5..c115859260 100644 --- a/src/state/createStore.js +++ b/src/state/createStore.js @@ -6,7 +6,7 @@ import thunkMiddleware from 'redux-thunk'; import createSagaMiddleware from 'redux-saga'; import { combineReducers, createStore, applyMiddleware } from 'redux'; -import { composeWithDevTools } from 'redux-devtools-extension'; +import { composeWithDevTools } from '@redux-devtools/extension'; import createRootReducer from './reducers/rootReducer'; import getRootSaga from './sagas'; import settings from '../config/settings'; From d23f62856a70a795838e6faadeff85915d2d7f20 Mon Sep 17 00:00:00 2001 From: Chris Beer Date: Thu, 14 Dec 2023 08:57:26 -0800 Subject: [PATCH 153/164] Remove deprecated @mui/styles package --- package.json | 1 - src/components/AppProviders.js | 16 ++++------------ src/containers/AppProviders.js | 1 - 3 files changed, 4 insertions(+), 14 deletions(-) diff --git a/package.json b/package.json index 57ead2000f..5fc129601b 100644 --- a/package.json +++ b/package.json @@ -40,7 +40,6 @@ "@mui/icons-material": "^5.11.16", "@mui/lab": "^5.0.0-alpha.134", "@mui/material": "^5.13.5", - "@mui/styles": "^5.13.2", "@mui/utils": "^5.13.1", "@mui/x-tree-view": "^6.17.0", "@react-aria/live-announcer": "^3.1.2", diff --git a/src/components/AppProviders.js b/src/components/AppProviders.js index 4f0888beb8..f39aae6098 100644 --- a/src/components/AppProviders.js +++ b/src/components/AppProviders.js @@ -5,8 +5,6 @@ import { I18nextProvider } from 'react-i18next'; import { ThemeProvider, StyledEngineProvider, createTheme, } from '@mui/material/styles'; -import StylesProvider from '@mui/styles/StylesProvider'; -import createGenerateClassName from '@mui/styles/createGenerateClassName'; import { DndContext, DndProvider } from 'react-dnd'; import { MultiBackend } from 'react-dnd-multi-backend'; import { HTML5toTouch } from 'rdndmb-html5-to-touch'; @@ -96,13 +94,11 @@ export class AppProviders extends Component { /** */ render() { const { - children, createGenerateClassNameOptions, + children, theme, translations, dndManager, } = this.props; - const generateClassName = createGenerateClassName(createGenerateClassNameOptions); - /** * Create rtl emotion cache */ @@ -128,11 +124,9 @@ export class AppProviders extends Component { - - - {children} - - + + {children} + @@ -144,7 +138,6 @@ export class AppProviders extends Component { AppProviders.propTypes = { children: PropTypes.node, - createGenerateClassNameOptions: PropTypes.object, // eslint-disable-line react/forbid-prop-types dndManager: PropTypes.object, // eslint-disable-line react/forbid-prop-types language: PropTypes.string.isRequired, theme: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types @@ -153,6 +146,5 @@ AppProviders.propTypes = { AppProviders.defaultProps = { children: null, - createGenerateClassNameOptions: {}, dndManager: undefined, }; diff --git a/src/containers/AppProviders.js b/src/containers/AppProviders.js index 22e8a3a06d..1ad1c6784d 100644 --- a/src/containers/AppProviders.js +++ b/src/containers/AppProviders.js @@ -11,7 +11,6 @@ import { AppProviders } from '../components/AppProviders'; */ const mapStateToProps = state => ( { - createGenerateClassNameOptions: getConfig(state).createGenerateClassNameOptions, language: getConfig(state).language, theme: getTheme(state), translations: getConfig(state).translations, From 2514469ffe8936dc8c1f53df46434d4c7bcb1178 Mon Sep 17 00:00:00 2001 From: Chris Beer Date: Mon, 18 Dec 2023 10:30:22 -0800 Subject: [PATCH 154/164] Don't hold space for companion windows if there aren't any. --- src/components/CompanionArea.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/CompanionArea.js b/src/components/CompanionArea.js index 7d4061ce59..79e1a7acee 100644 --- a/src/components/CompanionArea.js +++ b/src/components/CompanionArea.js @@ -25,7 +25,7 @@ const Container = styled('div', { name: 'CompanionArea', slot: 'container' })(({ flexDirection: 'column', width: '100%', }), - ...((ownerState?.position === 'left') && { + ...((ownerState?.position === 'left' && (ownerState?.companionWindowIds && ownerState.companionWindowIds.length > 0)) && { minWidth: '235px', }), })); @@ -98,7 +98,7 @@ export class CompanionArea extends Component { 0}`} + className={`${ns('companion-windows')}`} > {companionWindowIds.map((id) => ( From b481ead907eb0ed2ad7631898c7d25ae1c34e271 Mon Sep 17 00:00:00 2001 From: Chris Beer Date: Tue, 19 Dec 2023 08:05:11 -0800 Subject: [PATCH 155/164] Clean up WindowSideBar styling --- src/components/WindowSideBar.js | 16 ++++++---------- 1 file changed, 6 insertions(+), 10 deletions(-) diff --git a/src/components/WindowSideBar.js b/src/components/WindowSideBar.js index c036a8faa4..7750eeb294 100644 --- a/src/components/WindowSideBar.js +++ b/src/components/WindowSideBar.js @@ -6,11 +6,15 @@ import WindowSideBarButtons from '../containers/WindowSideBarButtons'; const Root = styled(Drawer, { name: 'WindowSideBar', slot: 'root' })(({ theme }) => ({ flexShrink: 0, - height: '100%', order: -1000, zIndex: theme.zIndex.appBar - 1, })); +const Nav = styled('nav', { name: 'WindowSideBar', slot: 'nav' })({ + position: 'relative !important', + width: 48, +}); + /** * WindowSideBar */ @@ -31,15 +35,7 @@ export class WindowSideBar extends Component { anchor={direction === 'rtl' ? 'right' : 'left'} PaperProps={{ 'aria-label': t('sidebarPanelsNavigation'), - component: 'nav', - sx: { - borderBlock: 0, - borderInlineStart: 0, - height: '100%', - overflowX: 'hidden', - position: 'relative', - width: 48, - }, + component: Nav, variant: 'outlined', }} SlideProps={{ direction: direction === 'rtl' ? 'left' : 'right', mountOnEnter: true, unmountOnExit: true }} From 2250f69ad57215474a6f123b89b865397be4110b Mon Sep 17 00:00:00 2001 From: Chris Beer Date: Tue, 19 Dec 2023 10:03:24 -0800 Subject: [PATCH 156/164] Make sure the CompanionArea styled root receives props necessary for applying appropriate styles --- src/components/CompanionArea.js | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/src/components/CompanionArea.js b/src/components/CompanionArea.js index 79e1a7acee..b73350d644 100644 --- a/src/components/CompanionArea.js +++ b/src/components/CompanionArea.js @@ -4,16 +4,17 @@ import { styled } from '@mui/material/styles'; import Slide from '@mui/material/Slide'; import ArrowLeftIcon from '@mui/icons-material/ArrowLeftSharp'; import ArrowRightIcon from '@mui/icons-material/ArrowRightSharp'; +import classNames from 'classnames'; import CompanionWindowFactory from '../containers/CompanionWindowFactory'; import MiradorMenuButton from '../containers/MiradorMenuButton'; import ns from '../config/css-ns'; -const Root = styled('div', { name: 'CompanionArea', slot: 'root' })(({ position, theme }) => ({ +const Root = styled('div', { name: 'CompanionArea', slot: 'root' })(({ ownerState, theme }) => ({ display: 'flex', minHeight: 0, position: 'relative', zIndex: theme.zIndex.appBar - 2, - ...((position === 'bottom' || position === 'far-bottom') && { + ...((ownerState.position === 'bottom' || ownerState.position === 'far-bottom') && { flexDirection: 'column', width: '100%', }), @@ -89,12 +90,13 @@ export class CompanionArea extends Component { /** */ render() { const { + className, companionWindowIds, companionAreaOpen, setCompanionAreaOpen, position, sideBarOpen, t, windowId, } = this.props; - const className = [this.areaLayoutClass(), ns(`companion-area-${position}`)].join(' '); + const classes = classNames(this.areaLayoutClass(), ns(`companion-area-${position}`), className); return ( - + {}, sideBarOpen: false, }; From 589a51eb3427c64c8d449257d43106b2fed7870a Mon Sep 17 00:00:00 2001 From: Chris Beer Date: Tue, 19 Dec 2023 10:03:47 -0800 Subject: [PATCH 157/164] Trim wrapping divs where possible --- src/components/PrimaryWindow.js | 12 ++-- src/components/Window.js | 118 ++++++++++++++------------------ src/components/WindowTopBar.js | 5 +- 3 files changed, 63 insertions(+), 72 deletions(-) diff --git a/src/components/PrimaryWindow.js b/src/components/PrimaryWindow.js index 4d6344b3ac..30c4d302eb 100644 --- a/src/components/PrimaryWindow.js +++ b/src/components/PrimaryWindow.js @@ -1,6 +1,7 @@ import { Component, lazy, Suspense } from 'react'; import PropTypes from 'prop-types'; import { styled } from '@mui/material/styles'; +import classNames from 'classnames'; import WindowSideBar from '../containers/WindowSideBar'; import CompanionArea from '../containers/CompanionArea'; import CollectionDialog from '../containers/CollectionDialog'; @@ -16,7 +17,7 @@ GalleryView.displayName = 'GalleryView'; SelectCollection.displayName = 'SelectCollection'; WindowViewer.displayName = 'WindowViewer'; -const StyledPrimaryWindowContainer = styled('div')(() => ({ +const Root = styled('div', { name: 'PrimaryWindow', slot: 'root' })(() => ({ display: 'flex', flex: 1, position: 'relative', @@ -80,17 +81,18 @@ export class PrimaryWindow extends Component { */ render() { const { - isCollectionDialogVisible, windowId, children, + isCollectionDialogVisible, windowId, children, className, } = this.props; + return ( - + { isCollectionDialogVisible && } }> {children || this.renderViewer()} - + ); } } @@ -98,6 +100,7 @@ export class PrimaryWindow extends Component { PrimaryWindow.propTypes = { audioResources: PropTypes.arrayOf(PropTypes.object), // eslint-disable-line react/forbid-prop-types children: PropTypes.node, + className: PropTypes.string, isCollection: PropTypes.bool, isCollectionDialogVisible: PropTypes.bool, isFetching: PropTypes.bool, @@ -109,6 +112,7 @@ PrimaryWindow.propTypes = { PrimaryWindow.defaultProps = { audioResources: [], children: undefined, + className: undefined, isCollection: false, isCollectionDialogVisible: false, isFetching: false, diff --git a/src/components/Window.js b/src/components/Window.js index c2f6b3a5bb..2d654afd69 100644 --- a/src/components/Window.js +++ b/src/components/Window.js @@ -1,4 +1,4 @@ -import { Component } from 'react'; +import { Component, useContext } from 'react'; import PropTypes from 'prop-types'; import { styled } from '@mui/material/styles'; import Paper from '@mui/material/Paper'; @@ -12,13 +12,25 @@ import ErrorContent from '../containers/ErrorContent'; import IIIFAuthentication from '../containers/IIIFAuthentication'; import { PluginHook } from './PluginHook'; +const rowMixin = { + display: 'flex', + flex: '1', + flexDirection: 'row', + minHeight: 0, +}; + +const columnMixin = { + display: 'flex', + flex: '1', + flexDirection: 'column', + minHeight: 0, +}; + const Root = styled(Paper)(({ ownerState, theme }) => ({ + ...columnMixin, backgroundColor: theme.palette.shades?.dark, borderRadius: 0, - display: 'flex', - flexDirection: 'column', height: '100%', - minHeight: 0, overflow: 'hidden', width: '100%', ...(ownerState?.maximized && { @@ -29,41 +41,39 @@ const Root = styled(Paper)(({ ownerState, theme }) => ({ }), })); -const StyledMiddle = styled('div')(() => ({ - display: 'flex', - flex: '1', - flexDirection: 'row', - minHeight: 0, +const ContentRow = styled('div')(() => ({ + ...rowMixin, })); -const StyledMiddleLeft = styled('div')(() => ({ - display: 'flex', - flex: '1', - flexDirection: 'column', - minHeight: 0, +const ContentColumn = styled('div')(() => ({ + ...columnMixin, })); -const StyledPrimaryWindow = styled('div')(() => ({ - display: 'flex', - flex: '1', +const StyledPrimaryWindow = styled(PrimaryWindow)(() => ({ + ...rowMixin, height: '300px', - minHeight: 0, position: 'relative', })); -const StyledCompanionAreaBottom = styled('div')(() => ({ - display: 'flex', +const StyledCompanionAreaBottom = styled(CompanionArea)(() => ({ + ...rowMixin, flex: '0', flexBasis: 'auto', - minHeight: 0, })); const StyledCompanionAreaRight = styled('div')(() => ({ - display: 'flex', + ...rowMixin, flex: '0 1 auto', - minHeight: 0, })); +/** Window title bar wrapper for drag controls in the mosaic view */ +const DraggableNavBar = ({ children, ...props }) => { + const { mosaicWindowActions } = useContext(MosaicWindowContext); + return mosaicWindowActions.connectDragSource( + , + ); +}; + /** * Represents a Window in the mirador workspace * @param {object} window @@ -81,40 +91,13 @@ export class Window extends Component { return { error, hasError: true }; } - /** - * wrappedTopBar - will conditionally wrap a WindowTopBar for needed - * additional functionality based on workspace type - */ - wrappedTopBar() { - const { - windowId, workspaceType, windowDraggable, - } = this.props; - - const topBar = ( -
- - -
- ); - if (workspaceType === 'mosaic' && windowDraggable) { - const { mosaicWindowActions } = this.context; - return mosaicWindowActions.connectDragSource( - topBar, - ); - } - return topBar; - } - /** * Renders things */ render() { const { focusWindow, label, isFetching, sideBarOpen, - view, windowId, t, + view, windowDraggable, windowId, workspaceType, t, manifestError, } = this.props; @@ -138,27 +121,28 @@ export class Window extends Component { className={ns('window')} aria-label={t('window', { label })} > - {this.wrappedTopBar()} + + { manifestError && } - - - - - - - - - + + + + + - + diff --git a/src/components/WindowTopBar.js b/src/components/WindowTopBar.js index abc496c2cc..5e32f8cd07 100644 --- a/src/components/WindowTopBar.js +++ b/src/components/WindowTopBar.js @@ -45,10 +45,11 @@ export class WindowTopBar extends Component { removeWindow, windowId, toggleWindowSideBar, t, maximizeWindow, maximized, minimizeWindow, allowClose, allowMaximize, focusWindow, allowFullscreen, allowTopMenuButton, allowWindowSideBar, + component, } = this.props; return ( - + {}, maximized: false, From 89235726e8011cda96c3e2d1371e3a6a73172416 Mon Sep 17 00:00:00 2001 From: Chris Beer Date: Tue, 19 Dec 2023 15:57:31 -0800 Subject: [PATCH 158/164] Name Window slots --- src/components/Window.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/components/Window.js b/src/components/Window.js index 2d654afd69..4610fb6cf2 100644 --- a/src/components/Window.js +++ b/src/components/Window.js @@ -26,7 +26,7 @@ const columnMixin = { minHeight: 0, }; -const Root = styled(Paper)(({ ownerState, theme }) => ({ +const Root = styled(Paper, { name: 'Window', slot: 'root' })(({ ownerState, theme }) => ({ ...columnMixin, backgroundColor: theme.palette.shades?.dark, borderRadius: 0, @@ -41,27 +41,27 @@ const Root = styled(Paper)(({ ownerState, theme }) => ({ }), })); -const ContentRow = styled('div')(() => ({ +const ContentRow = styled('div', { name: 'Window', slot: 'row' })(() => ({ ...rowMixin, })); -const ContentColumn = styled('div')(() => ({ +const ContentColumn = styled('div', { name: 'Window', slot: 'column' })(() => ({ ...columnMixin, })); -const StyledPrimaryWindow = styled(PrimaryWindow)(() => ({ +const StyledPrimaryWindow = styled(PrimaryWindow, { name: 'Window', slot: 'primary' })(() => ({ ...rowMixin, height: '300px', position: 'relative', })); -const StyledCompanionAreaBottom = styled(CompanionArea)(() => ({ +const StyledCompanionAreaBottom = styled(CompanionArea, { name: 'Window', slot: 'bottom' })(() => ({ ...rowMixin, flex: '0', flexBasis: 'auto', })); -const StyledCompanionAreaRight = styled('div')(() => ({ +const StyledCompanionAreaRight = styled('div', { name: 'Window', slot: 'right' })(() => ({ ...rowMixin, flex: '0 1 auto', })); From 5ebf51f709eb8a35a8c09f8b721d8bf137dd2165 Mon Sep 17 00:00:00 2001 From: Chris Beer Date: Tue, 19 Dec 2023 16:00:09 -0800 Subject: [PATCH 159/164] Name the WorkspaceArea root component --- src/components/WorkspaceArea.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/WorkspaceArea.js b/src/components/WorkspaceArea.js index 886118f616..66479271a8 100644 --- a/src/components/WorkspaceArea.js +++ b/src/components/WorkspaceArea.js @@ -8,7 +8,7 @@ import WorkspaceAdd from '../containers/WorkspaceAdd'; import BackgroundPluginArea from '../containers/BackgroundPluginArea'; import ns from '../config/css-ns'; -const StyledMain = styled('main')(({ theme }) => { +const Root = styled('main', { name: 'WorkspaceArea', slot: 'root' })(({ theme }) => { const getBackgroundColor = theme.palette.mode === 'light' ? darken : lighten; return { @@ -47,7 +47,7 @@ export class WorkspaceArea extends Component { isWorkspaceControlPanelVisible && } - - + ); } From 1961328a13d238ba235458dca8822b65d94cd290 Mon Sep 17 00:00:00 2001 From: Chris Beer Date: Tue, 19 Dec 2023 16:36:17 -0800 Subject: [PATCH 160/164] Use flexbox to lay out the workspace --- __tests__/src/components/Workspace.test.js | 20 ++--------------- src/components/Workspace.js | 25 +++++----------------- src/components/WorkspaceAdd.js | 7 ------ src/components/WorkspaceArea.js | 21 ++++++++++++------ src/components/WorkspaceControlPanel.js | 5 ++--- src/containers/Workspace.js | 1 - 6 files changed, 24 insertions(+), 55 deletions(-) diff --git a/__tests__/src/components/Workspace.test.js b/__tests__/src/components/Workspace.test.js index 3f1fd853e7..493598f751 100644 --- a/__tests__/src/components/Workspace.test.js +++ b/__tests__/src/components/Workspace.test.js @@ -83,22 +83,6 @@ describe('Workspace', () => { }); }); - describe('when the workspace control panel is displayed', () => { - it('has the *-with-control-panel class applied', () => { - const { container } = createWrapper(); - - expect(container.querySelector('.mirador-workspace-with-control-panel')).toBeInTheDocument(); - }); - }); - - describe('when the workspace control panel is not displayed', () => { - it('does not have the *-with-control-panel class applied', () => { - const { container } = createWrapper({ isWorkspaceControlPanelVisible: false }); - - expect(container.querySelector('.mirador-workspace-with-control-panel')).not.toBeInTheDocument(); - }); - }); - describe('drag and drop', () => { it('adds a new catalog entry from a manifest', async () => { const manifestJson = '{ "data": "123" }'; @@ -106,7 +90,7 @@ describe('Workspace', () => { const addWindow = jest.fn(); const { container } = createWrapper({ addWindow }); - const dropTarget = container.querySelector('.mirador-workspace-with-control-panel'); + const dropTarget = container.querySelector('.mirador-workspace-viewport'); const file = new File([manifestJson], 'manifest.json', { type: 'application/json' }); const dataTransfer = { @@ -129,7 +113,7 @@ describe('Workspace', () => { const { container } = createWrapper({ addWindow, allowNewWindows: false }); - const dropTarget = container.querySelector('.mirador-workspace-with-control-panel'); + const dropTarget = container.querySelector('.mirador-workspace-viewport'); const file = new File([manifestJson], 'manifest.json', { type: 'application/json' }); const dataTransfer = { diff --git a/src/components/Workspace.js b/src/components/Workspace.js index 8963e18232..b8d48d33a7 100644 --- a/src/components/Workspace.js +++ b/src/components/Workspace.js @@ -12,23 +12,10 @@ import WorkspaceElastic from '../containers/WorkspaceElastic'; import ns from '../config/css-ns'; import { IIIFDropTarget } from './IIIFDropTarget'; -const Root = styled('div', { name: 'Workspace', slot: 'root' })(({ ownerState, theme }) => ({ - '@media (min-width: 600px)': { - ...(ownerState.isWorkspaceControlPanelVisible && { - paddingLeft: theme.spacing(8.5), - paddingTop: 0, - }), - }, - ...(ownerState.isWorkspaceControlPanelVisible && { - paddingTop: theme.spacing(9.25), - }), - bottom: 0, - left: 0, - margin: 0, - overflow: 'hidden', - position: 'absolute', - right: 0, - top: 0, +const Root = styled('div', { name: 'Workspace', slot: 'root' })(() => ({ + height: '100%', + position: 'relative', + width: '100%', })); /** @@ -135,7 +122,7 @@ export class Workspace extends Component { * render */ render() { - const { isWorkspaceControlPanelVisible, t } = this.props; + const { t } = this.props; return ( @@ -144,7 +131,6 @@ export class Workspace extends Component { className={ classNames( ns('workspace-viewport'), - (isWorkspaceControlPanelVisible && ns('workspace-with-control-panel')), ) } > @@ -159,7 +145,6 @@ export class Workspace extends Component { Workspace.propTypes = { addWindow: PropTypes.func, allowNewWindows: PropTypes.bool, - isWorkspaceControlPanelVisible: PropTypes.bool.isRequired, maximizedWindowIds: PropTypes.arrayOf(PropTypes.string), t: PropTypes.func.isRequired, windowIds: PropTypes.arrayOf(PropTypes.string), diff --git a/src/components/WorkspaceAdd.js b/src/components/WorkspaceAdd.js index cced34789c..6e744878c4 100644 --- a/src/components/WorkspaceAdd.js +++ b/src/components/WorkspaceAdd.js @@ -25,13 +25,6 @@ const StyledWorkspaceAdd = styled('div')(() => ({ height: '100%', overflowX: 'hidden', overflowY: 'auto', - paddingTop: 68, - // injection order matters - // eslint-disable-next-line sort-keys - '@media (min-width: 600px)': { - paddingLeft: 68, - paddingTop: 0, - }, })); const StyledMiradorMenuButton = styled(MiradorMenuButton)(() => ({ diff --git a/src/components/WorkspaceArea.js b/src/components/WorkspaceArea.js index 66479271a8..f5c93a1464 100644 --- a/src/components/WorkspaceArea.js +++ b/src/components/WorkspaceArea.js @@ -8,20 +8,29 @@ import WorkspaceAdd from '../containers/WorkspaceAdd'; import BackgroundPluginArea from '../containers/BackgroundPluginArea'; import ns from '../config/css-ns'; -const Root = styled('main', { name: 'WorkspaceArea', slot: 'root' })(({ theme }) => { +const Root = styled('div', { name: 'WorkspaceArea', slot: 'root' })(({ theme }) => { const getBackgroundColor = theme.palette.mode === 'light' ? darken : lighten; return { background: getBackgroundColor(theme.palette.grey.A200, 0.1), bottom: 0, + display: 'flex', + flexDirection: 'column', left: 0, - overflow: 'hidden', position: 'absolute', right: 0, top: 0, + [theme.breakpoints.up('sm')]: { + flexDirection: 'row', + }, }; }); +const ViewerArea = styled('main', { name: 'WorkspaceArea', slot: 'viewer' })(() => ({ + flexGrow: 1, + position: 'relative', +})); + /** * This is the top level Mirador component. * @prop {Object} manifests @@ -42,12 +51,12 @@ export class WorkspaceArea extends Component { } = this.props; return ( - <> + { isWorkspaceControlPanelVisible && } - - - + + ); } } diff --git a/src/components/WorkspaceControlPanel.js b/src/components/WorkspaceControlPanel.js index ddcd967284..1331341330 100644 --- a/src/components/WorkspaceControlPanel.js +++ b/src/components/WorkspaceControlPanel.js @@ -14,10 +14,9 @@ const Root = styled(AppBar, { name: 'WorkspaceControlPanel', slot: 'root' })(({ height: 64, padding: theme.spacing(1), paddingBottom: 0, + position: 'relative', [theme.breakpoints.up('sm')]: { - height: '100%', - left: 0, - right: 'auto', + height: 'auto', width: ownerState.variant === 'wide' ? 'auto' : 64, }, ...(ownerState.variant === 'wide' && { diff --git a/src/containers/Workspace.js b/src/containers/Workspace.js index b7a8881f87..f9288e8d94 100644 --- a/src/containers/Workspace.js +++ b/src/containers/Workspace.js @@ -17,7 +17,6 @@ import * as actions from '../state/actions'; const mapStateToProps = state => ( { allowNewWindows: getConfig(state).workspace.allowNewWindows, - isWorkspaceControlPanelVisible: getConfig(state).workspaceControlPanel.enabled, maximizedWindowIds: getMaximizedWindowsIds(state), windowIds: getWindowIds(state), workspaceId: getWorkspace(state).id, From 7306b0ed78db70079ebffeb5a1e2a24a7cc36cb8 Mon Sep 17 00:00:00 2001 From: Chris Beer Date: Tue, 19 Dec 2023 16:41:17 -0800 Subject: [PATCH 161/164] Use the palette shade for the workspace background --- src/components/WorkspaceArea.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/WorkspaceArea.js b/src/components/WorkspaceArea.js index f5c93a1464..16200f8d81 100644 --- a/src/components/WorkspaceArea.js +++ b/src/components/WorkspaceArea.js @@ -12,7 +12,7 @@ const Root = styled('div', { name: 'WorkspaceArea', slot: 'root' })(({ theme }) const getBackgroundColor = theme.palette.mode === 'light' ? darken : lighten; return { - background: getBackgroundColor(theme.palette.grey.A200, 0.1), + background: getBackgroundColor(theme.palette.shades.light, 0.1), bottom: 0, display: 'flex', flexDirection: 'column', From 45ecb49762468331cc3c76d57e5354087b24cf79 Mon Sep 17 00:00:00 2001 From: Chris Beer Date: Tue, 19 Dec 2023 16:41:29 -0800 Subject: [PATCH 162/164] Use a consistent root styled component for the workspace --- src/components/Workspace.js | 9 ++------- 1 file changed, 2 insertions(+), 7 deletions(-) diff --git a/src/components/Workspace.js b/src/components/Workspace.js index b8d48d33a7..c94f8a30b3 100644 --- a/src/components/Workspace.js +++ b/src/components/Workspace.js @@ -3,7 +3,6 @@ import PropTypes from 'prop-types'; import { styled } from '@mui/material/styles'; import classNames from 'classnames'; import Grid from '@mui/material/Grid'; -import Paper from '@mui/material/Paper'; import Typography from '@mui/material/Typography'; import { visuallyHidden } from '@mui/utils'; import Window from '../containers/Window'; @@ -71,11 +70,7 @@ export class Workspace extends Component { const { t } = this.props; return ( - + - + ); } From a476b2d4acfb930e5f7a395a090ff3d59d57f5ba Mon Sep 17 00:00:00 2001 From: Chris Beer Date: Tue, 19 Dec 2023 17:03:10 -0800 Subject: [PATCH 163/164] Fix elastic workspace panning --- src/components/WorkspaceElastic.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/WorkspaceElastic.js b/src/components/WorkspaceElastic.js index c910f0d301..e3972e3dca 100644 --- a/src/components/WorkspaceElastic.js +++ b/src/components/WorkspaceElastic.js @@ -13,7 +13,7 @@ const StyledRnd = styled(Rnd)({ transitionDuration: '.7s', // order matters // eslint-disable-next-line sort-keys - '& .react-draggable-dragging': { + '&.react-draggable-dragging': { transitionDuration: 'unset', }, }); From bc0cc02074e7bd93d0ca5f2a9f6d6625aa04a955 Mon Sep 17 00:00:00 2001 From: Chris Beer Date: Tue, 19 Dec 2023 17:03:22 -0800 Subject: [PATCH 164/164] Pull WorkspaceElastic styles up --- src/components/WorkspaceElastic.js | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/src/components/WorkspaceElastic.js b/src/components/WorkspaceElastic.js index e3972e3dca..f871ab9983 100644 --- a/src/components/WorkspaceElastic.js +++ b/src/components/WorkspaceElastic.js @@ -6,6 +6,12 @@ import ResizeObserver from 'react-resize-observer'; import WorkspaceElasticWindow from '../containers/WorkspaceElasticWindow'; import ns from '../config/css-ns'; +const Root = styled('div', { name: 'WorkspaceElastic', slot: 'root' })({ + height: '100%', + position: 'relative', + width: '100%', +}); + const StyledRnd = styled(Rnd)({ boxSizing: 'border-box', margin: 0, @@ -39,7 +45,7 @@ class WorkspaceElastic extends Component { const offsetY = workspace.height / 2; return ( -
+ {}} onResize={(rect) => { setWorkspaceViewportDimensions(rect); }} @@ -79,7 +85,7 @@ class WorkspaceElastic extends Component { )) } -
+ ); } }