Pull WindowTopBar styles up

ProjectMirador · Dec 5, 2023 · dd48269 · dd48269
1 parent 493f984
commit dd48269
Showing 1 changed file with 69 additions and 64 deletions.
diff --git a/src/components/WindowTopBar.js b/src/components/WindowTopBar.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 CloseIcon from '@mui/icons-material/CloseSharp';
 import Toolbar from '@mui/material/Toolbar';
@@ -15,6 +16,22 @@ import WindowMaxIcon from './icons/WindowMaxIcon';
 import WindowMinIcon from './icons/WindowMinIcon';
 import ns from '../config/css-ns';
 
+const Root = styled(AppBar, { name: 'WindowTopBar', slot: 'root' })(() => ({
+  zIndex: 1100,
+}));
+
+const StyledToolbar = styled(Toolbar, { name: 'WindowTopBar', slot: 'toolbar' })(({ ownerState, theme }) => ({
+  backgroundColor: theme.palette.shades?.main,
+  borderTop: '2px solid',
+  borderTopColor: ownerState?.focused ? theme.palette.primary.main : 'transparent',
+  minHeight: 32,
+  paddingLeft: theme.spacing(0.5),
+  paddingRight: theme.spacing(0.5),
+  ...(ownerState?.windowDraggable && {
+    cursor: 'move',
+  }),
+}));
+
 /**
  * WindowTopBar
  */
@@ -25,72 +42,60 @@ export class WindowTopBar extends Component {
    */
   render() {
     const {
-      removeWindow, windowId, toggleWindowSideBar, t, windowDraggable,
-      maximizeWindow, maximized, minimizeWindow, focused, allowClose, allowMaximize,
+      removeWindow, windowId, toggleWindowSideBar, t,
+      maximizeWindow, maximized, minimizeWindow, allowClose, allowMaximize,
       focusWindow, allowFullscreen, allowTopMenuButton, allowWindowSideBar,
     } = this.props;
 
     return (
-      <AppBar position="relative" color="default" enableColorOnDark sx={{ zIndex: 1100 }}>
-        <nav aria-label={t('windowNavigation')}>
-          <Toolbar
-            disableGutters
-            onMouseDown={focusWindow}
-            sx={{
-              backgroundColor: 'shades.main',
-              borderTop: '2px solid ',
-              borderTopColor: focused ? 'primary.main' : 'transparent',
-              minHeight: 32,
-              paddingLeft: 0.5,
-              paddingRight: 0.5,
-              ...(windowDraggable && {
-                cursor: 'move',
-              }),
-            }}
-            className={classNames(ns('window-top-bar'))}
-            variant="dense"
-          >
-            {allowWindowSideBar && (
-              <MiradorMenuButton
-                aria-label={t('toggleWindowSideBar')}
-                onClick={toggleWindowSideBar}
-                className={ns('window-menu-btn')}
-              >
-                <MenuIcon />
-              </MiradorMenuButton>
-            )}
-            <WindowTopBarTitle
-              windowId={windowId}
-            />
-            {allowTopMenuButton && (
-              <WindowTopMenuButton windowId={windowId} className={ns('window-menu-btn')} />
-            )}
-            <WindowTopBarPluginArea windowId={windowId} />
-            <WindowTopBarPluginMenu windowId={windowId} />
-            {allowMaximize && (
-              <MiradorMenuButton
-                aria-label={(maximized ? t('minimizeWindow') : t('maximizeWindow'))}
-                className={classNames(ns('window-maximize'), ns('window-menu-btn'))}
-                onClick={(maximized ? minimizeWindow : maximizeWindow)}
-              >
-                {(maximized ? <WindowMinIcon /> : <WindowMaxIcon />)}
-              </MiradorMenuButton>
-            )}
-            {allowFullscreen && (
-              <FullScreenButton className={ns('window-menu-btn')} />
-            )}
-            {allowClose && (
-              <MiradorMenuButton
-                aria-label={t('closeWindow')}
-                className={classNames(ns('window-close'), ns('window-menu-btn'))}
-                onClick={removeWindow}
-              >
-                <CloseIcon />
-              </MiradorMenuButton>
-            )}
-          </Toolbar>
-        </nav>
-      </AppBar>
+      <Root component="nav" aria-label={t('windowNavigation')} position="relative" color="default" enableColorOnDark>
+        <StyledToolbar
+          disableGutters
+          onMouseDown={focusWindow}
+          ownerState={this.props}
+          className={classNames(ns('window-top-bar'))}
+          variant="dense"
+        >
+          {allowWindowSideBar && (
+            <MiradorMenuButton
+              aria-label={t('toggleWindowSideBar')}
+              onClick={toggleWindowSideBar}
+              className={ns('window-menu-btn')}
+            >
+              <MenuIcon />
+            </MiradorMenuButton>
+          )}
+          <WindowTopBarTitle
+            windowId={windowId}
+          />
+          {allowTopMenuButton && (
+            <WindowTopMenuButton windowId={windowId} className={ns('window-menu-btn')} />
+          )}
+          <WindowTopBarPluginArea windowId={windowId} />
+          <WindowTopBarPluginMenu windowId={windowId} />
+          {allowMaximize && (
+            <MiradorMenuButton
+              aria-label={(maximized ? t('minimizeWindow') : t('maximizeWindow'))}
+              className={classNames(ns('window-maximize'), ns('window-menu-btn'))}
+              onClick={(maximized ? minimizeWindow : maximizeWindow)}
+            >
+              {(maximized ? <WindowMinIcon /> : <WindowMaxIcon />)}
+            </MiradorMenuButton>
+          )}
+          {allowFullscreen && (
+            <FullScreenButton className={ns('window-menu-btn')} />
+          )}
+          {allowClose && (
+            <MiradorMenuButton
+              aria-label={t('closeWindow')}
+              className={classNames(ns('window-close'), ns('window-menu-btn'))}
+              onClick={removeWindow}
+            >
+              <CloseIcon />
+            </MiradorMenuButton>
+          )}
+        </StyledToolbar>
+      </Root>
     );
   }
 }
@@ -101,15 +106,15 @@ WindowTopBar.propTypes = {
   allowMaximize: PropTypes.bool,
   allowTopMenuButton: PropTypes.bool,
   allowWindowSideBar: PropTypes.bool,
-  focused: PropTypes.bool,
+  focused: PropTypes.bool, // eslint-disable-line react/no-unused-prop-types
   focusWindow: PropTypes.func,
   maximized: PropTypes.bool,
   maximizeWindow: PropTypes.func,
   minimizeWindow: PropTypes.func,
   removeWindow: PropTypes.func.isRequired,
   t: PropTypes.func,
   toggleWindowSideBar: PropTypes.func.isRequired,
-  windowDraggable: PropTypes.bool,
+  windowDraggable: PropTypes.bool, // eslint-disable-line react/no-unused-prop-types
   windowId: PropTypes.string.isRequired,
 };